@font-face {
    font-family: 'DINProBold';
    src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-bold-webfont.eot');
    src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-bold-webfont.eot') format('embedded-opentype'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-bold-webfont.woff') format('woff'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-bold-webfont.ttf') format('truetype'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'DINProRegular';
    src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-regular-webfont.eot');
    src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-regular-webfont.eot') format('embedded-opentype'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-regular-webfont.woff') format('woff'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-regular-webfont.ttf') format('truetype'),
         url('/content/dam/sfu/commonassets/fonts/din/adinpro-regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'DINProMedium';
    src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-medium-webfont.eot');
    src: url('/content/dam/sfu/commonassets/fonts/din/dinpro-medium-webfont.eot') format('embedded-opentype'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-medium-webfont.woff') format('woff'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-medium-webfont.ttf') format('truetype'),
         url('/content/dam/sfu/commonassets/fonts/din/dinpro-medium-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
  font-family: 'DINWebLight';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Light.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Light.woff') format('woff');
  }

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

@font-face {
  font-family: 'DINWebBold';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Bold.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Bold.woff') format('woff');
  }

@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');
}

@font-face {
  font-family: 'DINWebBlack';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Black.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Black.woff') format('woff');
  }

@font-face {
  font-family: 'DINWebLightItalic';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-LightIta.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-LightIta.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  }

@font-face {
	font-family: 'DINWebItalic';
	src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Ita.eot');
	src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-Ita.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	}

@font-face {
  font-family: 'DINWebMediumItalic';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-MediumIta.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-MediumIta.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  }

@font-face {
  font-family: 'DINWebBoldItalic';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-BoldIta.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-BoldIta.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  }

@font-face {
  font-family: 'DINWebBlackItalic';
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-BlackIta.eot');
  src: url('/content/dam/sfu/commonassets/fonts/din/DINWeb-BlackIta.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  }

 h1{
    font-family:"DinWebMedium" , sans-serif;
    font-size:1.75em;
    color:#3D3935;
    line-height:1.1em;
    padding-top:0;
  }
 h2{
    font-size:1.3em;
    padding-top:0;
  }
 h3{
    color:#3D3935;
    font-size:1.15em;
    padding-top:0;
  }
 h4{
    font-family:"DinWebMedium" , sans-serif;
    padding-top:0;
  }
  .toggle h4{
    padding-top:.4em;
  }
h5{
    font-family:"DinWeb", sans-serif;
    font-size: .9em;
    color:#3D3935;
    padding-top:0;
  }

ul.custom-list li{
  background: none;
  padding-left:0em;
  margin-bottom:.5em;
  padding-bottom:.3em;
  border-bottom:1px solid #ddd;
}

ul.custom-list li:last-child{
  border-bottom:none;
}

.custom-text-list ul li{
  background: none;
  padding-left:0em;
  margin-bottom:.5em;
  padding-bottom:.3em;
  border-bottom:1px solid #ddd;
}

.custom-text-list ul li:last-child{
  border-bottom:none;
}

div.parsys_column{
  margin:0.2em 0;
}

.carousel .news h3{
  color:#fff;
}

.custom-columns .cq-colctrl-lt5-c0{
  width:75%;
}

.custom-columns .cq-colctrl-lt5-c1{
  width:25%;
  padding-left:2%;
  padding-right:0%;
}

.carousel .news .carousel-text{
  margin-top:0%;
  padding-bottom:0%;
}


.first.newsList p a{
    font-family: "DINWebMedium",san-serif;
    display:block;
    font-size:1.1em;
    text-transform:uppercase;
}

.first.newsList p {
  font-family: "DINWeb", sans-serif;
  font-size:.9em;
  text-transform:uppercase;
  color:#777;
}

.newsList p {
  font-family: "DINWebLightItalic", sans-serif;
  font-size:.9em;
  color:#777;
}

.newsList p a{
    font-family: "DINWeb",sans-serif;
    display:block;
}

.plain.toggle {
	background: none;
	padding-left:0px ;
}

.toggle h4 {
	background-color: none;
    border: 1px solid #ccc;
    padding: 5px 5px 5px 5px;
    color: #C01622;
	-webkit-transition: all 1s ease 0s;
	transition: 1s;
}

.toggle h4:hover {
    background-color: #eee;
    text-decoration: none;
    cursor: pointer;
}
    

.toggle h2 {
	background-color: none;
    border: 1px solid #ccc;
    padding: 5px 5px 5px 5px;
    color: #C01622;
	-webkit-transition: all 1s ease 0s;
	transition: 1s;
}

.toggle h2:hover {
    background-color: #eee;
    text-decoration: none;
    cursor: pointer;
}

.noLine.toggleContent{
  border-left:none;
  padding-left:0%;
}

.ruledThin{
  border-top:1px solid #ccc;
}

.ruledMedium{
  border-top:3px solid #f4f4f4;
}

.profile-overview { width: 100%; }

div.edl1 a.box {
    background-color: #F5F107;
}

div.edl1 a.box:hover {
    background-color: #E0DD06;
}

div.edl2 a.box {
    background-color: #0054a6;
}
div.edl2 a.box:hover {
    background-color: #1973CC;
}

div.edl3 a.box {
    background-color: #b5111b;
}
div.edl3 a.box:hover {
    background-color: #C01622;
}

div.edl4 a.box {
    background-color: #54534a;
}
div.edl4 a.box:hover {
    background-color: #64635D;
}

.ruledThick{
  border-top:10px solid #ccc;
}


.home{
  transition:  all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  box-shadow:0 8px 6px -6px #ddd;
}
.home:hover{
  opacity: .85;
  box-shadow:0 8px 6px -6px #666;
}

.home .image {
  width: 100%;
  float:none;
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
  background-color:#fff;
}

.home .image:hover {
  width: 100%;
  background-color:#fff;

}
.home .image a{
background-color:#000;
}

.home .text {
background-color:#000;
  padding: 0.1em 0em 0em 1em;
  margin-top:-0.2em;

}

.home .text h4 a{
  color: #FFF;
}

.home2{
  transition: 1s;
  box-shadow:0 8px 6px -6px #ddd;
}
.home2:hover{
  opacity: .85;
  box-shadow:0 8px 6px -6px #666;
}
.home2 .image{
  width:100%;
  float:none;
  transition: all 1s ease 0s;
}

.home2 .text{
  padding: 0.1em 0em 0em 1em;
  margin-top:-0.43em;
  background-color:#000;
}

.home2 .text h4{
  color: #FFF;
  padding-bottom:0.9em;
}

.home3{
  display:block;
  -webkit-transition: all 1s ease 0s;
  transition: 1s;
  box-shadow:0 8px 6px -6px #aaa;

}
.home3:hover{
  box-shadow:0 8px 6px -6px #333;
}
.home3 .image {
  width:100%;
  float:none;
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}


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

.home3 .image a img:hover{
  opacity:.40;
  position:relative;
  background-color:#000;
}

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

.home3 .text h4{
  color: #FFF;
  padding-bottom:0.9em;
}
/**** GS ***/
.home4{
  display:block;
  -webkit-transition: all 1s ease 0s;
  transition: 1s;
  box-shadow:0 8px 6px -6px #999;

}
.home4:hover{
  box-shadow:0 8px 6px -6px #333;
}
.home4 .image {
  width:100%;
  float:none;
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}


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

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

.home4 .text{
  position:relative;
  padding: 0.1em 0em 0em 1em;
  background-color:#243A6C;
  margin-top:-.45em;
}
.home4 .text a{
  position:relative;
  color:#fff;
}


.home4 .text h4{
  color: #FFF;
  padding-bottom:0.9em;
}

.image-button3 {
  box-shadow: 0 -0.6em 0 #243A6C, 0 8px 6px -6px #999;
  transition: 1.5s;
}

.image-button3:hover {
  box-shadow: 0 -0.6em 0 #32518E, 0 8px 6px -6px #333333;
  opacity:.85;
}

.custom-button .image{
  width:100%;
  float:none;

}

/*.home2{
  display:block;
  transition:1s;
  -webkit-transition: all 1s ease 0s;
  box-shadow:0 8px 6px -6px #aaa;
}

.home2:hover{
  opacity:.80;
  box-shadow:0 8px 6px -6px #555;
}

.home2 .image{
  width:100%;
}

.home2 .image img{
  width:100%;
  border-bottom:30px solid #ccc;
}

.home2 .text{

}*/
.marginTop{
  margin-top:1.65em;
}
.columnMargin{
  margin-top:-10em;
}

.button1 a {
}

.button h5{
  padding-bottom:0em;
}

.button1 h5 a {
    color: #666;
    padding: 1em;
    border: 1px solid #ccc;
    box-shadow: 0 8px 6px -6px #DDDDDD;
    display:block;
    background-color: #fff;
    transition: all 1s ease 0s;
    margin-bottom:-2em;
}
.button1 a:hover {
    background-color: #eee;
    box-shadow: 0 8px 6px -6px #aaa;
    opacity: 0.85;
    border: 1px solid #aaa;
}

.button2{
  border: 1px solid #ccc;
  box-shadow: 0 10px 0 #777, 0 22px 6px -6px #DDDDDD;
  transition:1s;
  padding:1em;
}

.button2:hover{
  border: 1px solid #aaa;
  opacity:.85;
  box-shadow: 0 10px 0 #777, 0 22px 6px -6px #aaa;
}

.button2{
  display:block;
}

.button2 h5{
  margin:0;
  padding:0;
}

.button2 h2{
  font-family: "DINWebMedium", sans-serif;
  margin:0;
  padding:0;
}

.button2 h2 a, h5 a{
  color:#3D3935;
}

.custom-heading h4 {
    background-color: rgb(61, 56, 53);
    color: rgb(255, 255, 255);
    padding: 0.8em 1em 0.6em 0.6em;
        padding-top: 0.8em;
        padding-right-value: 1em;
        padding-bottom: 0.6em;
        padding-left-value: 0.6em;
        padding-left-ltr-source: physical;
        padding-left-rtl-source: physical;
        padding-right-ltr-source: physical;
        padding-right-rtl-source: physical;
}

.ruled{
  border-top: 7px solid #eee;
}

.ruledThin{
  border-top: 1px solid #eee;
}

div.documenttools{
  border:none;
  padding-left:0px;
  margin-left:-0.2em;
}


div.custom-four-column h4{
  margin-top:0.6em;
}

div.custom-four-column h4 a{
  color:#888;
}

.marginEven{
  margin-top:1em;
  margin-bottom:1em;
}


/**** 4-column modification GENERAL ****/

div.cq-colctrl-lt8-c0 {
    margin-right: 2.666%;
    padding: 0;
    width: 23%;
}
div.cq-colctrl-lt8-c1 {
    margin-right: 2.666%;
    padding: 0;
    width: 23%;
}
div.cq-colctrl-lt8-c2 {
    clear: none;
    padding:0;
    margin-right: 2.666%;
    width: 23%;
}
div.cq-colctrl-lt8-c3 {
    margin-right: 0;
    padding: 0;
    width: 23%;
  }


/**** 3-column modification ****/

  div.landing .cq-colctrl-lt2-c0 {
    margin-right: 2.7%;
    width: 31.5%;
    padding-right:0px;
}
  div.landing .cq-colctrl-lt2-c1 {
    margin-right: 2.7%;
    width: 31.5%;
    padding-right:0px;
}
  div.landing .cq-colctrl-lt2-c2{
    width: 31.5%;
    padding-right:0px;
}

/** Styles for Tables @desktop **/
	.UG_CO table, .GS_CO  table { 
		margin-bottom:2em;
		width: 100%; 
		border-collapse: collapse; 
		border-color: none;
		overflow-x: visible;
	}
	.UG_CO table, .GS_CO  table { 
		overflow-x: visible;
	}
	.UG_CO table tr, .GS_CO table tr {
		border-bottom:1px dotted #ccc;
	}

	.UG_CO table th, .GS_CO table th { 
		background: none; 
	    color: #444;
	    font-family: "DINWeb",sans-serif;
	    font-weight: inherit;
	    padding: 1em 0 .5em 0.25em;
	    /*font-size: 1.5em;*/
		font-weight: inherit;
		border-bottom:none;

	}
	.UG_CO table td, .UG_CO th, .GS_CO table td,  .GS_CO th { 
		padding: 1em 6px 1em 6px; 
		/*border: 1px solid #ccc;*/ 
		text-align: left; 
	}
	/***/


/**** Media Queries ****/

  @media (max-width: 1500px){
    .home3 .text{
      padding-right:4.4em;
    }
    .home4 .text{
      padding-right:3em;
    }
  }
  @media (max-width: 1480px){
  .carousel .news .carousel-text{
      padding-bottom:1.5em;
    }
  }

  @media (max-width:1380px){
   .home3.short .text{
    padding-right:7.5em;
   }
  }

  @media (max-width: 1076px){
    .home3 .text{
      padding-right:2em;
    }
  }

  @media (max-width: 980px){
    .home3 .text{
      padding-right: 1em;
    }
    .home4 .text{
      padding-right: 1em;
    }
  }

  @media (max-width: 768px) {
      /** Styles for Tables @780 **/
	
		/* Force table to not be like tables anymore */
		.UG_CO table, .UG_CO thead, .UG_CO tbody, .UG_CO th, .UG_CO td, .UG_CO tr, .GS_CO table, .GS_CO thead, .GS_CO tbody, .GS_CO th, .GS_CO td, .GS_CO tr { 
			display: block; 
			width:100%;
			float:left;
  			clear:left;
		}
		
		.UG_CO table td, .UG_CO table th, .GS_CO table td, .GS_CO table th{
			padding: none;
		}

		.UG_CO table tr th , .GS_CO table tr th { 
			display:none;
		}
			.UG_CO table tr:nth-child(1) , .GS_CO table tr:nth-child(1){
				display:none;
			}

		.UG_CO table tr, .GS_CO table tr { 
			border: 1px solid #ccc; 
			border-bottom:none;
			margin-bottom:2em;
			box-shadow: 0 -8px 0 #ccc;
		}
		
		.GS_CO table tr:nth-child(2){
   	    	margin-top:1em;
}

		.UG_CO table td, .GS_CO table td { 
			/* Behave  like a row */
			border: none;
			border-bottom: 1px dotted #ccc; 
			position: relative;
			padding-left: 50%; 
			font-family: "DinWeb", sans-serif;
		}
			.UG_CO table td:last-child, .GS_CO table td:last-child{
				border-bottom:1px solid #ccc;
			}

			/*table td:first-child{

				}*/
		
		.UG_CO td:before , .GS_CO td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 14px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
			padding: 0em 0em 0em 0.5em;
			font-family:"DINWebBold", sans-serif;
			color:#333;
		}
		
		/* Label the data*/
		.UG_CO td:nth-of-type(1):before { content: "Section"; }
		.UG_CO td:nth-of-type(2):before { content: "Instructor"; }
		.UG_CO td:nth-of-type(3):before { content: "Day/Time"; }
		.UG_CO td:nth-of-type(4):before { content: "Campus"; }
		.UG_CO td:nth-of-type(5):before { content: ""; }
		.UG_CO td:nth-of-type(6):before { content: ""; }
		.UG_CO td:nth-of-type(7):before { content: ""; }
		.UG_CO td:nth-of-type(8):before { content: ""; }
		.UG_CO td:nth-of-type(9):before { content: ""; }
		.UG_CO td:nth-of-type(10):before { content: ""; }

		.GS_CO td:nth-of-type(1):before { content: "Course"; }
		.GS_CO td:nth-of-type(2):before { content: "Title"; }
		.GS_CO td:nth-of-type(3):before { content: "Instructor"; }
		.GS_CO td:nth-of-type(4):before { content: "Day/Time"; }
		.GS_CO td:nth-of-type(5):before { content: "Campus"; }
		.GS_CO td:nth-of-type(6):before { content: ""; }
		.GS_CO td:nth-of-type(7):before { content: ""; }
		.GS_CO td:nth-of-type(8):before { content: ""; }
		.GS_CO td:nth-of-type(9):before { content: ""; }
		.GS_CO td:nth-of-type(10):before { content: ""; }

		/***/
      
  .section .mobile, .section img.mobile + br{
    display:none;
  }

   .home3.short .text{
    padding-right:4em;
   }
    div.home4 .text{
      padding-right: 2.5em;
    }
    div.home3 .text{
      padding-right: 1.6em;
    }
  .programs div.cq-colctrl-lt2-c0{
    width: 33%;
  }
  .programs div.cq-colctrl-lt2-c1{
    width: 33%;

  }
  .programs div.cq-colctrl-lt2-c2{
    clear: none;
    width: 33%;
  }
  .custom-columns .cq-colctrl-lt2-c0{
    width:100%;
  }
  .custom-columns .cq-colctrl-lt2-c2{
    clear:none;
  }

  /**** 3 columns ****/

  div.landing .cq-colctrl-lt2-c2{
   clear:none;
  }
  .programs div.cq-colctrl-lt2-c0{
    width: 50%;
  }
  .programs div.cq-colctrl-lt2-c1{
    width: 50%;

  }

}
@media (max-width: 610px) {
    .home3 .text{
      font-size:.8em;
      margin-top:-0.55em;
      padding-right:3em;
    }


}


@media (max-width: 480px) {
    
        /** Styles for Tables @480 **/

		.UG_CO table, .GS_CO table { 
			border: none; 
		}

		.UG_CO body , .GS_CO body { 
			padding: 0; 
			margin: 0; 
		}

		/***/

  .section .mobile, .section img.mobile + br{
    display:block;
  }
    .home4 .text{
      padding-right: 1em;
    }
    .home3 .text{
      font-size:.9em;
      padding-right:1em;
    }

.custom-columns .cq-colctrl-lt5-c0{
  width:100%;
}

.custom-columns .cq-colctrl-lt5-c1{
  width:100%;
  padding-left:0%;
  padding-right:0%;
}

  div.cq-colctrl-lt8-c0{
    margin-right:0%;
    width:100%;
  }

  div.cq-colctrl-lt8-c1{
    width:100%;
    margin-right:0%;
  }

  div.cq-colctrl-lt8-c2{
    margin-right:0%;
    width:100%;
  }

  div.cq-colctrl-lt8-c3{
    width:100%;
    margin-right:0%;
  }

  /**** 3-column modification ****/

  div.landing .cq-colctrl-lt2-c0 {
    margin-right: 0%;
    width: 100%;
}
  div.landing .cq-colctrl-lt2-c1 {
    margin-right: 0%;
    width: 100%;
}
  div.landing .cq-colctrl-lt2-c2{
    width: 100%;
}

/**** 4-column modification for AREAS OF STUDY /

  div.custom-four-column .cq-colctrl-lt8-c0{
    margin-right:4%;
    width:48%;
  }

  div.custom-four-column .cq-colctrl-lt8-c1{
    width:48%;
    margin-right:0%;
  }

  div.custom-four-column .cq-colctrl-lt8-c2{
    margin-right:4%;
    width:48%;
  }

  div.custom-four-column .cq-colctrl-lt8-c3{
    width:48%;
    margin-right:0%;
  }

}