/* SFU Faculty of Science Style Sheet */
/* ---------------------------------- */
/* ---------------------------------- */

@font-face {
  font-family: 'DINWebMedium';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Medium.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Medium.woff') format('woff');
  /*src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-regular-webfont.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-regular-webfont.woff') format('woff');*/
}

}



/* Basic character styles */
h1{
  color: #333;
}

h1 i, h1 em{
  font-family: "DINWebItalic", sans-serif;
}

h2{
  font-size: 1.625em;
  color: #333;
}

h3{
  font-family: "DINWebMedium", sans-serif;
  font-size: 1.3125em;
  line-height: 1.125em;
  color: #333;
}

h4{
  line-height: 1.75em;
}

p {
  /*font-family: "DINWebMedium", sans-serif;*/
  color: #333;
  font-size: 0.9em;
}

.title h1{
  text-transform: uppercase;
}

.custom-carousel {
    margin-top: 0px;
}

/* Homepage carousel */
.custom-carousel h3 {
    color: #FFFFFF;
}

.custom-carousel p {
    color: #FFFFFF;
}



/* View more style */
.view-more p{
    position: relative;
    text-align: center;
}

.view-more p:before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dotted #888;
    margin-top: 0.8em;
}

.view-more a{
    font-size: 0.9em;
    font-style: italic;
    position: relative;
    z-index: 2;
    padding: 0 1em; 
    background-color: #FFF;
}

.ruledDot {
    border-top: 1px dotted #888;
    color: #fff;
    background-color: #fff;
    height 1px;
    width:100%;
}


/* Set intro default margin to be the same as a normal <p> */
.intro p{
  margin-top: 1em;
  color: #111;
}

/* modify padding ruled below */
.ruled-below{
  padding-bottom: 0;
}

/* Make section-heading bg occupy only length of h2 */
/* Revert back to full length on mobile */
.section-heading-block h2{
  background-color:#3d3935;
  color:#fff;
  padding: 0.3em 0.7em 0.2em 0.7em;
  margin-top: 0;
  margin-bottom: 0.5em;
  display: inline-block;
}

.section-heading-date h3{
  padding: 0.3em 0.7em 0.2em 0.7em;
  margin-top: 0;
  margin-bottom: 0.5em;
  box-shadow: 0 0 1px #999;
  border-left: 10px solid #A6192E;
}

/* Centering Images */
img.center-image{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Dean contacts display */
.dean-contacts .image{
  float: none;
  width: 100%;
  margin-bottom: 2%;
}

/* Staff-contacts display for desktop */
.staff-contacts .image{
  width: 35%;
  margin-bottom: 2%;
}

.staff-contacts .text h3{
  padding-top: 2%;
  margin-bottom: 0;
}

.staff-contacts .text h4{
  padding-bottom: 0;
  margin-top: 0.5em;
}

/* Programs display, similar with departments extra l */
.programs {
  border-bottom: 4px solid #DDD;
  box-shadow: 0 0 0 1px #DDD;
  #padding: 0.5em 1.25em 0.25em 1.25em;
  padding: 1.25em 0.5em 0.25em 1.25em;
  min-height: 65px;
}

.programs.toggle{
  display: block;
  background: none;
  margin-bottom: 5%;
}

.programs.toggle:hover{
  border-bottom: 4px solid #A6192E;
  transition: all ease-in 0.3s;
}

.programs.toggle:hover h1{
  color: #A6192E;
  transition: all ease-in 0.3s;
}

.programs.toggle:hover h4{
  color: #A6192E;
  transition: all ease-in 0.3s;
}



/* contact info for dean or other purposes */

.contact-info{
  border-top: 8px solid #23557c;
  outline: 1px solid #CCC;
  padding: 1em 2em 1em 2em;
}

/* Deadlines for research page */ 
.deadlines h3{
  background: #A6192E;
  color: white;
  margin-bottom: 0;
  padding: 0.4em 1em 0.2em 1em;
}

.deadlines h4{
  background: #F7F7F7;
  margin: 0;
  padding: 1em 2em;
}

.newruled {
    border-top: 1px solid #DDD;
    padding-top: 1em;
    margin-top: 2em;
    margin-bottom: 1em;
}


/* Dotted Table Style */
.newTable{
  border-collapse: collapse;
}

.newTable th{
  border-bottom: 1px solid #333;
  padding: 0 1em;
}

.newTable td{
  border-bottom: 1px dashed #888;
  padding: 1em;
}


/* student-category homepage box */
.students-box{
  border-top: 8px solid #A6192E;
}

.DIN-list ul{
  font-family: "DINWeb", sans-serif;
  margin: 0;
  padding: 0;
  border-left: none;
  list-style-type: none;
  margin-bottom: 2%;
}

.DIN-list ul li{
  padding: 10px 6px 10px 0;
  border-bottom: 1px solid #DDD;
  background-image: none;
}

/* Departments */ 
.dept-list ul li{
  background: #F7F7F7;
  border-bottom: 1px solid #CCC;
  padding: 0.8em 1.5em 0.8em 1em;
  font-family: "DINWebMedium", sans-serif;
}

.dept-list h3{
  background: #A6192E;
  color:white;
  padding:0.5em 0.5em 0.3em 0.75em;
  margin-bottom: 0;
}

.departments{
  border-bottom: 4px solid #DDD;
  box-shadow: 0 0 0 1px #DDD;
}

.departments:hover{
    border-bottom: 4px solid #a6192E;
    transition: all ease-in 0.4s;
}

.departments h4{
    margin: 1em;
    padding: 1em 1em 0.3em 0;
}

.departments:hover h4{
    color: #A6192E;
    transition: all ease-in 0.4s;
}

/* Image Gallery Fix. Force clear on every 4n + 1 item */
.image-gallery .flex-control-thumbs li:nth-of-type(4n+1) {
  clear: left;
}


/* Overlay Styles */

div.overlay, div.overlay-bg { 
  margin-bottom: 2%; 
}

div.overlay .text, div.overlay-bg .text{
  bottom: 0;
  padding: 1.25em 1.5em;
  position: absolute;
  color: #FFF;
  text-shadow: 1px 1px 3px #000000;
}

/* Different padding for overlay-bg */
div .overlay-bg .text{
  padding: 2% 0;
}

/* Set properties h1 and p */
div.overlay .text h1, div.overlay-bg .text h1,  
div.overlay .text p, div.overlay-bg .text p {
  font-family: "DINWebBold";
  font-size: 2em;
  line-height: 1.1em;
  margin-bottom: 0;
  color: #FFF;
} 

div.overlay .text h1 i, div.overlay-bg .text h1 i,
div.overlay-bg p a, div.overlay-bg h1 a{
  color: #FFF;
}

/* Add a background and modify margin / padding */
div.overlay-bg h1, div.overlay-bg p{
  padding: 0.5em 0.5em 0.3em 1.25em;
  background: rgba(0,0,0,0.6);
}

/* Set column overlay padding */
div.cq-colctrl-lt0 .overlay .text, 
div.cq-colctrl-lt4 .overlay .text, 
div.cq-colctrl-lt5 .overlay .text, 
div.cq-colctrl-lt2 .overlay .text, 
div.cq-colctrl-lt8 .overlay .text { 
  padding: 0 1em; }

/* 2 column overlay */
div.cq-colctrl-lt0 .overlay .text h1, div.cq-colctrl-lt0 .overlay-bg .text h1,
div.cq-colctrl-lt0 .overlay .text p, div.cq-colctrl-lt0 .overlay-bg .text p  {
  font-family: "DINWebMedium";
  font-size: 1.75em;
  line-height: 1em;
  margin-bottom: 15px;
}

div.cq-colctrl-lt0 .overlay-bg .text h1, 
div.cq-colctrl-lt0 .overlay-bg .text p {
  font-size: 1.375em;
  margin-bottom: 0;
}

/* 2 column 33%/67% overlay */
/* 2 column 67%/33% overlay */
div.cq-colctrl-lt4 .overlay .text h1,
div.cq-colctrl-lt5 .overlay .text h1,
div.cq-colctrl-lt4 .overlay .text p,
div.cq-colctrl-lt5 .overlay .text p{
  font-family: "DINWebMedium";
  font-size: 1.375em;
  line-height: 1em;
  margin-bottom: 10px;
}

/* 3 column overlay */
div.cq-colctrl-lt2 .overlay .text h1, div.cq-colctrl-lt2 .overlay-bg .text h1,
div.cq-colctrl-lt2 .overlay .text p, div.cq-colctrl-lt2 .overlay-bg .text p{
  font-family: "DINWebMedium";
  font-size: 1.375em;
  line-height: 1em;
  margin-bottom: 10px;
}

/* 3 col overlay-bg margin */
div.cq-colctrl-lt2 .overlay-bg .text h1,
div.cq-colctrl-lt2 .overlay-bg .text p{
    margin-bottom: 0;
}

/* pull quote image style */
.textimage .pull-quote-image {
    background-color: #3d3935;
    height: 15em;
    overflow: hidden;
}

.textimage .pull-quote-image .text {
    font-size:1.8em;
    line-height:1.2em;
    background-color: transparent;
    padding: 0% 4% 2% 6%;
}

.textimage .pull-quote-image .text p{
  color: #FFF;
}

.textimage .pull-quote-image .image {
  width: 50%;
  padding-bottom: .9em;
  background-color: #fff;
}

/* Text Quote styles */
.text-pull-quote p{
    font-size: 1.4em;
    line-height: 1.3125em;
    padding: 1em 2em;
    color: white;
}

.text-pull-quote {
  background-color: #3d3935;
}

.text-pull-quote.red {
  background-color: #A6192E;
}

.text-pull-quote.blue {
  background-color: #2A3E52;
}

.text-pull-quote.yellow {
  background-color: #EBBE31;
}

.text-quote-line{
  border-top: 2px solid #A6192E;
  border-bottom: 2px solid #A6192E;
  font-size: 1.4em;
  line-height: 1.4em;
  padding: 1em 1em 0 1em;
  margin: 2em 0;
}

.text-quote-line .image{
  margin-bottom: 0.8em;
}

/* Quick Facts */
/* ----------------------- */

.fact-title h1{
  color: white;
  background: #2A3E52;
  margin-bottom:-36px;
  padding: 1em 2em;
}

.fact-box h1{
  background: #71C5DE;
  color: white;
  padding: 2em;
  font-size: 2.5em;
}

.circles-title h2{
  color: #888;
  background: #DEEBEC;
  padding: 1em;
  margin-top: -33px;
  font-family: "DINWebMedium", sans-serif;
}

div.circles-box{
  background: #DEEBEC;
  margin: -33px 0 0 0;
  padding: 2em;
}

.circles{
  height: 200px;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding-top:69px;
  border-radius: 100px;
  box-shadow: 0 0 8px #CCC;
}

.circles h2{
  font-size: 2.5em;
  color: white;
  font-family: "DINWebBold", sans-serif;
}

.circles p{
  font-family: "DINWebMedium", sans-serif;
  color: white;
}

.circ-1{
  background: #EBBE31;
}

.circ-2{
  background: #7DB4BE;
}

.circ-3{
  background: #E8733C;
}

.grants-box h1{
  background: #2A3E52;
  padding: 1em 1em 0 1em;
  color: white;
  font-size: 3em;
  margin-top: 0;
}

div.percent-box{
  background: #E8733C;
  padding: 1em 1em 2.5em 1em;
  margin-top: -40px;
}

.percent-box h1{
  color: white;
  font-size: 4em;
  margin-bottom: 0;
  margin-top: 25px;
  padding: 0;
}

.percent-box h2{
  color: white;
  font-family: "DINWebMedium", sans-serif;
}

.box-dashed-right{
  border-right: 1px dashed #FFF;
}

.newsComments{
  display: none;
}


/* MEDIA QUERIES */
/* ------------- */

/* Smaller than typical 13" display */
@media (max-width: 1200px){
  .textimage .pull-quote-image {
    height: auto;
    overflow: visible;
   }

  .textimage .pull-quote-image .image {
    width: 100%;
    height: 16em;
    overflow: hidden;
    border: none;
    float: none;
    padding-bottom: 0em;
    background-color: transparent;
  }

  .textimage .pull-quote-image .text {
    padding-top: 0%;
    padding-bottom: 1%;
  }
}


/* >>> iPad landscape and smaller */
@media (max-width: 1024px){

  .col-clear2 .cq-colctrl-lt0-c0,
  .col-clear2 .cq-colctrl-lt0-c1{
    width: 100%;
  }

  .col-clear67-33 .cq-colctrl-lt5-c0, .col-clear67-33 .cq-colctrl-lt5-c1{
    width: 100%;
  }

  .SSbox h1{
    font-size: 1.25em;
  }

  div.staff-contacts .image{
    float: none;
    width: 60%;
    margin-bottom: 2%;
  }

  /* 3 column overlay-bg style */
  div.cq-colctrl-lt2 .overlay-bg .text h1,
  div.cq-colctrl-lt2 .overlay-bg .text p{
    font-family: "DINWebMedium";
    font-size: 1.3125em;
    line-height: 1em;
    margin-bottom: 3px;
    letter-spacing: 0;
    padding: 0.5em 1em 0.25em 1em;
  }

  div.cq-colctrl-lt2 .overlay-bg .text{
    margin-bottom: 0;
  }

  /* Quotes-mobile sizing */ 
  .text-pull-quote p{
    font-size: 1.25em;
    padding: 1em;
  }

  .text-quote-line{
    font-size: 1.25em;
    padding: 1em 1em 0.75em 1em;
  }

  /* iPad text-image student box improve legibility */
  div.overlay-bg.students-box .text{
    position: inherit;
  }

  div.overlay-bg.students-box .text p{
    background: #333;
  }
}

@media (max-width: 980px){
 .box-dashed-right{
    border-right: none;
    border-bottom: 1px dashed #FFF;
    padding-bottom: 1.5em;
  }
}


/* Nexus 7 to iPad portrait*/
@media (min-width: 600px) and (max-width: 768px){
  div.cq-colctrl-lt0 .overlay-bg .text h1,
  div.cq-colctrl-lt0 .overlay-bg .text p{
      padding: 0.3em 0.5em 0.1em 0.75em;
  }

  div.cq-colctrl-lt2 .overlay-bg .text h1,
  div.cq-colctrl-lt2 .overlay-bg .text p{
      padding: 0.3em 1.4em 0.1em 1.5em;
  }

  .contact-info{
    max-width: 400px;
  }

  .textimage .pull-quote-image .image {
    height: auto;
    overflow: visible;
  }

  div.cq-colctrl-lt2-c0{
    width: 33%;
  }

  div.cq-colctrl-lt2-c1{
    width: 33%;
  }

  div.cq-colctrl-lt2-c2{
    clear: none;
    width: 33%;
  }
}

/* >>> iPhone to Small tablet (nexus 7 2012) */
@media (min-width: 320px) and (max-width:601px) {

  .section-heading-block h2{
    display: block;
  }

  div.overlay .text{
    padding: 0.5em 0.125em;
  }

  div.staff-contacts .image{
    float: none;
    width: 100%;
    margin-bottom: 2%;
  }

  div.overlay .text h1, div.overlay-bg .text h1,
  div.overlay .text p, div.overlay-bg .text p{
    font-family: "DINWebMedium";
    font-size: 1.625em;
    letter-spacing: -0.05em;
    line-height: 1em;
    padding: 0.3em 0.5em 0.1em 0.75em;
  }

/* Move banner title to the bottom of image for better legibility */
  div.overlay-bg.banner .text{
    position: inherit;
  }

  div.overlay-bg.banner .text h1{
    background: #333;
    padding: 1em 1em 0.2em 1em;
  }

  .textimage .pull-quote-image .text {
    font-size: 1.2em;
    line-height: 1.4em;
  }
  
  .textimage .pull-quote-image .image {
    height: auto;      
    }
 }

/* End of @media statements */


.categoryBox{
  display:block;
  -webkit-transition: all 1s ease 0s;
  transition: 1s;
  box-shadow: 0 8px 6px -6px #aaa;
  border-top: 8px solid #A6192E;
}

.categoryBox:hover {
  box-shadow:0 8px 6px -6px #333;  
}

.categoryBox .image {
  width:100%;
  float:none;
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

.categoryBox .image a img {
  transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  background-color: #fff;
}

  
.categoryBox .image a img:hover {
  opacity: .80;
  position: relative;
  background-color: #fff;
}

.categoryBox .text {
  position: relative;
  padding: 0.1em 0em 0em 1em;
  background-color: #777;
  margin-top: -.45em;
}

.categoryBox .text a {
  position: relative;
  color: #fff;
}

.categoryBox .text h4 {
  font-family: "DinWebMedium", sans-serif;
  padding-top: 0;
  color: #FFF;
  padding-bottom: 0.9em;
}

.categoryBox .toggle h4 {
  padding-top: .4em;
}

.noPaddingTop h4 {
  padding-top: 0em;
}

.supportButton {
    text-align: center;
}

.supportButton a {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    display: block;
    padding: 15px 0;
}

.supportButton a:hover {
    background-color: #ddd;
    transition: all 1s ease 0s;
}