/* New Audience Home Layout */

 /* Intro section */

.introContainer .shader {
    background-image: none;
}

.introContainer .intro h1 {
    display: none;
}

.introContainer .intro .divider {
    display: none;
}

    @media (min-width: 768px) {
	 .introContainer {
		 min-height: 500px;
	}
    }

    @media (min-width: 481px) and (max-width: 767px) {
    	 .introContainer {
    		 min-height: 400px;
    	}
    }

    @media (max-width: 480px) {
    	 .introContainer {
    		min-height: 300px;
    	}
    }

/* About dept section */

.dept-background {
	background-color:#000;
	padding: 30px 0;
}

.dept-intro {
	margin-bottom:20px;
}
	
.dept-title {
    margin-top: 0;
    font-family: 'United Sans';
	color:#cfb991 !important;
	font-weight: 600;
}

.dept-background .button {
    margin-right: 2rem;
}

.button-campusGold-inverse.button-hollow:link, .button-campusGold-inverse.button-hollow:visited {
 	color:#fff;
}

.button.button-hollow.button-slim.button-campusGold-inverse {
  outline-color: #CFB991;
  text-transform: uppercase;
  font-weight: bold;
}

.button-campusGold-inverse.button-hollow:hover {
 	color:#000;
}

.dept-background p {
	color:#fff !important;
}

/* New Feature and Extra sections */

.featureContainer, .extraContainer {
    position: relative;
    background-color: #000;
    background-image: url("../images/audience-introBackground.jpg");
    background-size: cover;
    background-position: top center; /* hide this if needed */
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
}

.featureContainer .shader, .extraContainer .shader{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px;
    background-image: none;
    background-repeat: repeat
}

.extraContainer .shader {
    background-image: none;
}

.featureContainer .intro, .extraContainer .intro{
    position: relative;
    z-index: 1;
    color: #fff
}

.featureContainer .intro h1 {
 	z-index:1000;
 	padding:0;
 	color:inherit;
 	font-family:acumin-pro-semi-condensed,"Franklin Gothic",sans-serif;
 	text-transform:uppercase;
 	font-weight:700;
 	font-style:italic
}

.extraContainer .intro h2 {
    z-index: 1000;
    padding: 0 0 10px;
    color: inherit;
    font-family: acumin-pro-semi-condensed, "Franklin Gothic", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-style: italic;
    text-shadow: 2px 2px 5px #000;
}

.featureContainer .intro h1 span.subtitle {
 	display:block;
 	padding:10px 0 0 0;
 	font-family:acumin-pro,"Franklin Gothic",sans-serif;
 	font-size:.5em;
 	font-style:initial;
 	line-height:1em;
 	text-transform:none
}

.extraContainer .intro h2 span.subtitle {
    display: block;
    padding: 10px 0 0;
    font-family: acumin-pro, "Franklin Gothic", sans-serif;
    font-size: .5em;
    font-style: initial;
    line-height: 1em;
    text-transform: none;
}

    @media (min-width: 768px){
        .featureContainer .intro h1, .extraContainer .intro h2{
            font-size:4.5em;
            line-height:1em
        }
    }
    
    @media (max-width: 767px){
        .featureContainer .intro h1, .extraContainer .intro h2{
            font-size:2.22222em;
            line-height:1em
        }
    }
    
.featureContainer .intro .divider {
	 height: 10px;
     width: 50%;
     max-width: 150px;
     margin: 5px auto 30px;
     background-color: #fff;
}

.extraContainer .intro .divider {
    display: none;
}

.featureContainer .intro .content {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5em;
}

    @media (min-width: 1200px) {
        .extraContainer {
            min-height: 650px;
            padding-top: 500px !important;
        }    
    }
    
    @media (min-width:992px) and (max-width:1199px) {
        .extraContainer {
            min-height: 600px;
            padding-top: 450px;
        }
    }    
    
    @media (min-width:768px) and (max-width:991px) {
        .extraContainer {
            min-height: initial;
            padding-top: 400px;
        }
    }

	@media (min-width: 768px) {
	    
	    .featureContainer {
		  	min-height: 500px;
		  	padding-top: 125px
		 }
	    
	 	.featureContainer .intro .content, .extraContainer .intro .content {
	  		padding:15px 0 30px;
	  		font-size:1em;
	  		text-shadow: 2px 2px 5px #000;
	 	}
	}

	@media (max-width: 767px) {
	    
	    .featureContainer, .extraContainer {
	  		height: auto;
	  		padding-top: 15px
	 	}
	 	
	 	.extraContainer {
	 	    min-height: initial;
            padding-top: 300px;
	 	}
	 	
	 	.extraContainer .intro h2 {
	 	    font-size: 2.22222em;
            line-height: 1em;
	 	}
	    
	 	.featureContainer .intro .content, .extraContainer .intro .content {
	  		padding: 15px;
	  		font-size: .88889em
	 	}
	}

    @media (min-width: 481px) and (max-width: 767px) {
    	 .featureContainer, .extraContainer {
    		 min-height: 400px;
    	}
    }

    @media (max-width: 480px) {
    	 .featureContainer, .extraContainer {
    		min-height: 300px;
    	}
    }

.dept-features {
    background-color: #9D9795;
    padding: 30px 0;
}

.dept-features h2 {
    margin-top: 0;
    font-family: 'United Sans';
	color:#000;
}

.dept-features .button {
    margin-right: 2rem;
}

.dept-features .button.button-slim {
    outline-color: #000;
}

.dept-features .button.button-slim:hover, .dept-features .button.button-slim:active, .dept-features .button.button-slim:focus {
 	background-color: #fff;
 	color: #000;
    outline-color: #000;
}


.main-feature-image img {
    width: 100%; 
}

.main-feature-text {
    margin: 1rem 0;
}

.news-social {
    padding: 30px 0;
    background-color: #f3f3f3;
}

.contentArea {
    margin: 20px 0;
    
}

@media (max-width: 767px) {
    .dept-background, .features-background, .dept-features, .news-social {
        padding: 30px 20px;
    }
    
    .dept-social {
        padding: 30px 20px !important;
    }
    
    .main-feature-image img {
        width: 100%;
        display: block;
        max-width: 100%;
        height: auto;
        padding-right: 0;
        padding-bottom: 1em;
    }
}


@media print {
  
  body {
      overflow: visible;
  }
  
  .navbar {
    display: none;
  }
  
  .breadcrumb {
    display: none;
  }
  
  .footer {
    display: none;
  }
  
  .maincontent {
    font: 12pt Georgia, "Times New Roman", Times, serif !important;
    line-height: 1.3;
    margin: 0;
    padding: 0; 
    float: none !important;
    width: 100%;
  }
  
  .logo {
      width: 100%;
  }
  
    .logo img {
       display: none;
    }
   
   .logo:after {
      content: "Purdue University - Department of Computer Science";
      font-size: 24pt;
      color: #000000;
      font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    .department {
        display: none;
    }
  
  img {
      min-width: 200px;
    max-width: 500px;
    border: 0;
  }
  
  h1 {
    font-size: 24pt !important;
  }
  
  a[href^="http://"]:after, a[href^="https://"]:after {
    content: " (" attr(href) ")" !important;
    font-size: 90%;
    word-wrap: break-word;
  }
  
  a[href]:after {
    content: "";
  }
   
  li a:after {
      font-size: 90%;
      text-decoration: none;
      word-wrap: break-word;
  }
  
  p a {
      color: #000000;
      text-decoration: none !important;
  }
  
  li a {
    color: #000000;
    text-decoration: none !important;
  }
  
  .top a:after {
      display: none;
  }
  
  .bottom {
    background-color: #ffffff;
    color: #000000;
    border-top: 1px solid #bbb;
    margin-top: 30px;
    display: block;
    font-size: 10pt;
  }
  
  .btn {
      display: none;
  }
 
  /* about the department page */
  .bannerRow {
      display: none;
  }
  
  .bannerContainer {
      display: none;
  }
  
  .deptOfficeContent .container .contentRow .mainContent:after {
      content: url(../images/sections/about/about-sm.jpg);  
  }
  
  .mainContent {
    font: 12pt Georgia, "Times New Roman", Times, serif !important;
    line-height: 1.3;
    margin: 0;
    padding: 0; 
    float: none !important;
    width: 100%;
  }
}
  
