/*************** Common Elements ***************/

* { margin:0; padding:0; }

html, body { width:100%; height:100%; margin:0; padding:0; font-size: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

h1 { font-family: Titillium, Open Sans, Helvetica, Arial, sans-serif; font-size: 3.5em; text-align: center; }
h2 { font-family: 'Source Sans Pro', sans-serif; font-size: 2rem; font-weight: 400; text-align: center; }
h3 { font-family: 'Source Sans Pro', sans-serif; font-size: 1.5em; font-weight: 300; text-align: center; }
h4 {font-size: 1.5em; padding-bottom: 10px;}
p, span, li  { font-family:  open_sansregular, Helvetica, Arial, sans-serif; font-size: 1em; }
td { padding: 15px; font-family: open_sansregular, Open Sans, Helvetica, Arial, sans-serif; }
/*li { list-style-position: inside; } */
   
img { display: block; }
  
hr { margin : 1em 0;   height : 1px; border : 0; background : #ccc 50% 0 no-repeat; }
.home hr { margin : 0;   height : 1px; border : 0; background : #ccc 50% 0 no-repeat; }
  
a:link { color: #fff; cursor: default; }  /* unvisited link */
a:visited { color: #fff; }  /* visited link */
a:hover { color: #aaa; }  /* mouse over link */
a:active { color: #aaa; }  /* selected link */
a { text-decoration: none; }

.blue-link a:link { color: blue; cursor: default; }  /* unvisited link */
.blue-link a:visited { color: purple; }  /* visited link */
.blue-link a:hover { color: #66a3ff; }  /* mouse over link */
.blue-link a:active { color: red; }  /* selected link */

.center { text-align: center; }
   
.larger-text { font-size: 1.25em; }

.clear { clear: both; }

.spacer { height: 30px; }
  
.focal-point { width: 100%; height: auto; overflow: hidden; }
.focal-point img { width: 100%; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }
.focal-point div { position: relative;  max-width: none;  height: auto; }


  /*************** Page Layout **************/
  /*   background-color: #435261; #af1e26  */
#container { width: 100%; min-height:100%; height: auto !important; height: 100%; margin: 0; padding: 0; }
#container2 { min-height:100%; height: auto !important; height: 100%; position: relative; margin: 0 auto; padding: 0; }
 .subcontainer { margin: 0 auto; width: 1000px; }
 
#content { width: 100%; position: relative; margin: 0; padding-bottom: 20em; /* Height of the footer */ }
 
#content1 { width: 100%; cursor: default; }
.content1-inset { margin:0 auto; width:1000px; }

#news { width: 100%; background-color: #E3E6EA; }
#news-inset { width: 960px; margin: 0 auto;}


#content2 { width: 100%;  margin: 0 auto;}
#content2-inset {width: 100%; }

#content3 { width: 100%;  margin:0 auto; }
#content3-inset {width: 100%; }

#content4 { width: 100%;  margin:0 auto;  }
#content4-inset {width: 100%; }

#content5 { display: none; }
#content5-inset {margin:0 auto;}

.one-third-box { float: left;  width: 290px; margin-left: 23px; }

.left-third-box { float: left; width: 300px; padding: 15px 0 25px 50px; }

.right-two-thirds-box { float: right; width: 550px; padding: 15px 50px 25px 0; }

#left-index-box { float: left; width: 225px; padding: 15px 10px 20px 0; }

#center-index-box { float: left; width: 500px; padding: 15px 0 25px; }

#right-index-box { float: left; width: 210px; padding: 15px 0 25px 0; }


  /* ****************** HEADER AND FOOTER ***************** */

#header { width:100%; height: 70px; margin: 0; padding: 0; background-color: transparent; }
#header-blue { width:100%; height: 70px; margin: 0; padding: 0; background-color: #435261; }

#header-content { width: 100%; margin: 0; padding: 0; }

#logo { float: left; display: inline; position: relative; margin: 10px 0 0 20px; }

#menu { float: right; margin: 15px 25px 0 0; }

#menu2 { float: right; margin: 12px 25px 0 0; }
  
.sb-slidebar sb-right {display: none;}
  
#footer { width: 100%; height: 20em; /* Height of the footer */ padding: 0; bottom: 0; background-color: #435261; }

#footer-content { width: 1024px; margin: 0 auto; padding-top: 8px; }
  
#footer-center { width: 1023px; margin: 0 auto; padding-top: 0px; }
  
#footer-center p  { font-family: 'Source Sans Pro', sans-serif; font-size: 1.5rem; font-weight: 300; text-align: center;  color: #fff; }

#fb { width: 150px; margin: 10px auto 0; }

.spacer-footer { height: 30px; }

#address { position: absolute; bottom: 70px; width: 1023px; text-align: center; }
#address p { font-size: 1.5rem; }
#address-narrow { display: none; }
  
#copywrite { position: absolute; bottom: 25px; width: 1023px; text-align: center; }

#copywrite p { font-size: 1.25rem; }


/* *********************** Elements ****************************** */
#home-img { max-width: 100%; }
#home-img-narrow { max-width: 100%; display: none; }
#dates-narrow { max-width: 100%; display: none; }
#fall { width: 100%; height: auto; }
 
#heading-box { position: relative; width: 100%; margin: 0 auto; padding: 5px 0;  background-color: #435261; border-top: 2px solid #000;  }
/* #heading-box { position: relative; width: 100%; margin: 0 auto; padding: 0; } */

#title-text {width: 1024px; margin: 0 auto;}
  
#preamble { line-height: 1em; color: #fff; font-family: 'Play'; font-size: 1.2em; }

#main-title { line-height: 1em; color: #fff; font-family: 'Play'; font-weight: 700; font-size: 3.2rem; }
/* #main-title { color: #435261; font-family: 'Titillium Web', sans-serif; font-size: 5rem; text-shadow: 0 .09em 5px rgba(0,0,0,0.3); } */
  
#iss-stinger { width: 1024px; margin: 0 auto; padding: 0;}

#stinger { text-align: right; color:#fff; font-size: 1.5em; }
  
#iss-dates { width: 100%; margin: 0 auto; padding: 10px 0;  background-color: #435261; border-bottom: 2px solid #000; }
  
#iss-dates p {width: 880px; margin: 0 auto;}
 
#iss-celebrate {text-align: center; font-size: 2em; font-family: 'Open Sans', sans-serif; font-weight: 600; line-height: 1.75rem; color: #fff;}

#iss-info {width: 880px; margin: 0 auto;}
  
#iss-info p {font-family: 'Open Sans', sans-serif;  font-size: 1.3rem; font-weight: 600; line-height: 1.75rem; color: #fff;  text-align: center;}
  
#iss-description { width: 960px; margin: 0 auto; padding: 0 0 20px 5px; }
  
#iss-description p { font-family: 'Open Sans', sans-serif;  font-size: 1.75rem; font-weight: 400; line-height: 2.25rem; text-align: center; color: #000; }
  
#utility-box-left { float: left; width: 50%; padding: 10px 10px 10px 0; }
#utility-box-left-content { float: right; width: 600px; padding: 10px 10px 10px 0; }

#utility-box-right { float: right; width: 49%; }
#utility-box-right-content { float: left; width: 600px; }
#utility-img { width: 100%; height: auto; }

#aerial-box-left { float: left; width: 49%; }
#aerial-box-left-content { float: right; width: 600px; }
#aerial-img { width: 100%; height: auto; }

#aerial-box-right { float: right; width: 50%; padding: 10px 10px 10px 0; }
#aerial-box-right-content { float: left; width: 600px; padding: 10px 0 10px 20px; }

.course-description { text-align: left; font-family: 'Open Sans', sans-serif;  font-size: 1.3rem; font-weight: 400; line-height: 1.8rem; }
  
.button-box { width: 100%; text-align: center; }
 
.page-img { width: 100%; position: relative; left: -5px; }
.page-img img { }
 
.page-content { width: 100%; margin: 0 auto; }

#title-box { width: 100%; margin: 0 auto; padding-top: 15px;}
  
.title { color: #000; font-family: 'Titillium Web', sans-serif; font-size: 2.75em; line-height: 1em; text-align: center; }
 
.left-content-box { float: left; width: 62%; padding: 0 10px; }
.left-text { }
.right-sidebar-box { float: right; width: 30%; border-left: solid 1px #ccc; padding-left: 20px; }
.right-text { }

.page-email a:link { color: #435261; }
.page-email a:visited { color: #435261; }  /* visited link */

#iss-text { text-align: left; }
  
.red { color: red; }
  
.testimonial-name { text-align: right; }
  
.staff-box { width: 90%; margin: 0 auto 20px; padding: 0; }
.staff-id { float: left; width: 200px; margin: 0 10px;}
  
.staff-description { float: right; width: 70%; padding: 0 20px; border-left: solid 1px #ccc; }
  
.staff-table { padding: 5px 20px; }

.contact-box { width: 80%; margin: 0 auto 20px; padding: 0 20px; }

a[href^=tel] { color: inherit; text-decoration: none; }

#film-list td { font-size: 1.25em; width: 60%; }

.tel, .tel:visited { /*for small screens */
display:block;
color:#000;
background-color:#fff;
padding:0.25em;
text-decoration:none;
font-size: 1.5em;
}
.tel:hover, .tel:focus {
color:#aaa;
background-color:#fff;
}
@media screen and (min-width: 28.5em) { /* for larger screens */
.tel, .tel:visited {
background:none;
cursor:default;
font-size: 1.5em;
}
.tel, .tel:focus {
color:#000;
}
}

.tel2, .tel2:visited { /*for small screens */
display:block;
color:#000;
background-color:#435261;
padding:0;
text-decoration:none;
font-size: 1em;
}
.tel2:hover, .tel2:focus {
color:#aaa;
background-color:#435261;
}
@media screen and (min-width: 28.5em) { /* for larger screens */
.tel2, .tel2:visited {
background:#435261;
cursor:default;
font-size: 1em;
}
.tel2, .tel2:focus {
color:#000;
}
}

#gallery a { float: left; margin: 0 5px 55px 0; }

 /* BUTTON Outline Outward */
.button {
margin: 0 auto;
padding: .4em 2.75em;
cursor: pointer;
background: none repeat scroll 0% 0% #435261;
text-decoration: none;
color: #fff;
font-size: 1.5rem;
font-family: 'Open Sans', sans-serif; 
font-weight: 600;
}
 
.outline-outward {
margin: 0 auto;
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.outline-outward:before {
  content: '';
  position: absolute;
  border: #435261 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}

.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

.button2 {
margin: 0 auto;
padding: .4em 2.75em;
cursor: pointer;
background: none repeat scroll 0% 0% #435261;
text-decoration: none;
color: #fff;
font-size: 1.5rem;
font-family: 'Open Sans', sans-serif; 
font-weight: 600;
}

.outline-outward2 {
margin: 0 auto;
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.outline-outward2:before {
  content: '';
  position: absolute;
  border: #435261 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}

.outline-outward2:hover:before, .outline-outward2:focus:before, .outline-outward2:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

.button3 {
margin: 0 auto;
padding: .4em 2.75em;
cursor: pointer;
background: none repeat scroll 0% 0% #F78900;
text-decoration: none;
color: #fff;
font-size: 1.5rem;
font-family: 'Open Sans', sans-serif; 
font-weight: 600;
}
 
.outline-outward3 {
margin: 0 auto;
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.outline-outward3:before {
  content: '';
  position: absolute;
  border: #435261 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}

.outline-outward3:hover:before, .outline-outward3:focus:before, .outline-outward3:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}
 
 .button3:hover { color: #435261; }
 
  /* **********************SLIDEBAR ELEMENTS******************* */

.sb-slidebar {
	background-color: #435261; /* Background colour. */
	color: #e8e8e8; /* Text colour. */
	overflow-x: hidden;
}

.sb-slidebar a {
	color: #FF3971;
	text-decoration: none;
}

.sb-slidebar a:hover {
	font-weight: bold; /* Link hover colour. */
	text-decoration: underline;
}

/* Main Menu */
.sb-menu { /* Apply to <ul> or <ol>. */
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.sb-menu li {
	width: 100%;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* Will lighten any background colour you set. */
	/* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */ /* Will darken any background colour you set. */
}

.sb-menu > li:first-child {
	border-top: none; /* Removes top border from first list item.. */
}

.sb-menu > li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
	/* border-bottom: none; */  /* Removed bottom border from last list item. */
}

.sb-menu li a {
	width: 100%; /* Makes links full width. */
	display: inline-block;
	padding: 1em; /* Creates an even padding the same size as your font. */
	color: #f2f2f2;
}

.sb-menu li a:hover {
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.05); /* Will lighten any background colour you set. */
}

/* Borders */
.sb-left .sb-menu li a {
	border-left: 3px solid transparent;
}

.sb-left .sb-menu li a:hover {
	border-left: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

.sb-right .sb-menu li a {
	border-right: 3px solid transparent;
}

.sb-right .sb-menu li a:hover {
	border-right: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

/* Left */

.sb-menu li .sb-open-right, .sb-menu li small { display: inline-block; padding: 14px; }
.sb-menu li img { margin: 12px; }

/* Right */
img.menu-logo { margin: 14px auto; }
#nav-logo { padding: 0 }

/* Slidebar Type */

.sb-slidebar, .sb-slidebar h3 {
	color: #F0F0F0;
}

.sb-slidebar ul.sb-nav li a {
	color: #DEDEDE;
}

.sb-slidebar ul.sb-nav li a:hover {
	color: #C7C7C7;
	text-decoration: none;
}

.sb-slidebar ul.sb-nav li span:hover {
	color: #C7C7C7;
}
  
  
  /* ****************Responsive****************** */

@media screen and (max-width: 1224px) {
#logo { margin: 10px 0 0 15px; width: 230px; height: 45px; }
#menu { margin: 8px 15px 0 0; }
#menu2 { margin: 8px 15px 0 0; }
#main-title { font-size: 2.5em; line-height: 1em; padding: 10px 20px 5px 0px; }
#utility-box-left { width: 60%; }
#utility-box-right { width: 39%; }
#aerial-box-left { width: 39%; }
#aerial-box-right { width: 60%; }

@media screen and (max-width: 1024px)  {
html,body { width: 100%, overflow-x: hidden; }
body {font-size:  1rem; }
img { max-width: 100%; height: auto; }
img.menu-logo { width: 90%; margin: 14px auto; }
#menu { margin: 8px 15px 0 0; }
#header { height: 65px; }
#header-blue { height: 60px; }
#title-text {width: 100% }
#iss-stinger { width: 100%; margin: 0 auto; padding: 0;}
#stinger { text-align: center; }
#news-inset { width: 100%; }
.news-pic {width: 20%;}
#dates-narrow { max-width: 100%; display: block; }
.subcontainer {width: 98%;}
#iss {width: 100%; padding: 5px 10px 0px; }
#iss-description {width: 100%; }
#iss-description p { font-size: ; line-height: ; }
#utility-box-left { float: none; width: 100%; }
#utility-box-left-content { float: none; margin: 0 auto; padding: 10px; }
#utility-box-right { display: none; }
#aerial-box-left { display: none; }
#aerial-box-right { float: none; width: 100% }
#aerial-box-right-content { float: none; margin: 0 auto; padding: 10px; }
#content5 { display: none; }

.left-content-box { width: 95%; }
.left-text { width: 80%; margin: 0 auto; }
.right-sidebar-box { clear: right; width: 95%; border: none;  }
.right-text { width: 320px; margin: 0 auto; }

#footer { height: 22em; }
#footer-center,  #footer-content, #copywrite { width: 320px }
.spacer-footer { height: 15px; }
#address { display: none; }
#address-narrow { display: block; position: absolute; bottom: 70px; width: 320px; text-align: center;}
}
  
@media screen and (max-width: 960px) and (orientation: portrait) {
	#iss-info {width: 100%; padding: 5px 0;}
	#iss-info p {width: 95%; padding: 0 10px;}
	#iss-dates {width: 100%;}
}

@media screen and (max-width: 690px) and (orientation: portrait) {
#header { height: 45px; }
#header-blue { height: 50px; }
#logo { margin: 8px 0 0 10px; width: 175px; height: 35px; }
#menu { margin: 8px 15px 0 0; width: 110px; height: 50px; }
#menu2 { margin: 5px 15px 0 0; width: 50px; height: 50px; }
.focal-point { width: 130%; }
#iss {width: 100%; padding: 10px 10px 10px 0px; }
#title-text {width: 100%;}
#preamble { width: 100%; text-align: center; }
#main-title { font-size: 2.3rem; line-height: 1em; padding: 10px;  }
#home-img { display: none; }
#home-img-narrow { max-width: 100%; padding-top: 0px; display: block; }
#iss-celebrate {font-size: 1.5em;}
#iss-description p { font-size: 1.25rem; line-height: 1.8rem; padding-right: 15px; }
#news-content { width: 540px;}
.news-pic {width: 80%; margin: 20px auto 0;}
#utility-box-left-content { width: auto; }
#aerial-box-right-content { width: auto; }
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { display: block; }
table { width: 260px; margin: 0 auto; padding: 10px 0; }
/* Hide table headers (but not display: none;, for accessibility) */
thead tr { position: absolute; top: -9999px; left: -9999px; }
/* Behave  like a "row" */
td { border: none;  position: relative; padding: 0; }
/* Now like a table header */
td:before { position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%;  padding-right: 10px; white-space: nowrap; }
table#film-list { width: 360px; margin: 0 auto; padding: 10px 0; font-size: 0.7em; }
/* Hide table headers (but not display: none;, for accessibility) */
table#film-list td { border: none;  position: relative; padding: 0; width: 100%; }
/* Now like a table header */
#film-list td:before { position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%;  padding-right: 10px; white-space: nowrap; }
/* Label the data
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
*/
.button { padding: 0.4em 1.5em; }
/*#footer-center,  #footer-content, #copywrite { width: 320px }*/
.left-text { width: 90%; margin: 0 auto; }
}
 
 @media screen and (max-width: 560px) and (orientation: portrait) {
	 #news-content {width:300px;}
 }
  /********************* FONTS*******************/

/* #1 Regular Weight */
@font-face {
	font-family: Titillium;
	font-style: normal;
	font-weight: normal;
	src: url(fonts/Titillium/Titillium-Light.otf);
	src: url(fonts/Titillium/Titillium-Light.eot);
}

/* #2 Italic Style */
@font-face {
	font-family: Titillium;
	font-style: italic;
	font-weight: normal;
	src: url(fonts/Titillium/Titillium-RegularItalic.otf);
}

/* #3 Bold Weight */
@font-face {
	font-family: Titillium;
	font-style: normal;
	font-weight: bold;
	src: url(fonts/Titillium/Titillium-Bold.otf);
}

/* #4 Bold Italic Style */
@font-face {
	font-family: Titillium;
	font-style: italic;
	font-weight: bold;
	src: url(fonts/Titillium/Titillium-BoldItalic.otf);
}

/* #1 Regular Weight */
@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot');
    src: url('fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans_regular_macroman/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/opensans_regular_macroman/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/opensans_regular_macroman/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* #2 Italic Style */
@font-face {
    font-family: 'open_sansitalic';
    src: url('fonts/opensans_italic_macroman/OpenSans-Italic-webfont.eot');
    src: url('fonts/opensans_italic_macroman/-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans_italic_macroman/OpenSans-Italic-webfont.woff') format('woff'),
         url('fonts/opensans_italic_macroman/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('fonts/opensans_italic_macroman/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* #3 Bold Weight */
@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/opensans_bold_macroman/OpenSans-Bold-webfont.eot');
    src: url('fonts/opensans_bold_macroman/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans_bold_macroman/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/opensans_bold_macroman/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/opensans_bold_macroman/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* #4 Bold Italic Style */
@font-face {
    font-family: 'open_sansbold_italic';
    src: url('fonts/opensans_bolditalic_macroman/OpenSans-BoldItalic-webfont.eot');
    src: url('fonts/opensans_bolditalic_macroman/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans_bolditalic_macroman/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('fonts/opensans_bolditalic_macroman/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/opensans_bolditalic_macroman/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* #5 Light Style */
@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/opensans_light_macroman/OpenSans-Light-webfont.eot');
    src: url('fonts/opensans_light_macroman/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans_light_macroman/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/opensans_light_macroman/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/opensans_light_macroman/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* #6 Semi-bold Style */
@font-face {
    font-family: 'open_sanssemibold';
    src: url('fonts/opensans_semibold_macroman/OpenSans-Semibold-webfont.eot');
    src: url('fonts/opensans_semibold_macroman/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans_semibold_macroman/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/opensans_semibold_macroman/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/opensans_semibold_macroman/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
font-family: 'Metrophobic', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Titillium Web', sans-serif;
*/