@charset "UTF-8";

/* First we are just defining some global styling using the body element -- font, and line height */
body{
font-family:"Teko-Regular", Arial, Helvetica, sans-serif;
font-size:1.5rem;
line-height:1.2;
}

a { color: #ff5700; text-decoration: none;}
a:hover { color: #39a5b7; text-decoration: underline;}
a.triangle{ text-decoration: none; background: url('../images/bullet-arrow.gif') left no-repeat; padding-left: 10px; font-weight: normal;}
a.triangle:hover{ text-decoration: underline;}

@font-face {
	font-family: 'Teko-Regular';
	src:url(../fonts/Teko-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;

}

header {
   top: 0;
   left: 0;
   border-radius: 5px 5px 0 0;
}

#wrapper {
   position: fixed;
   top: 10%;
   left: 10%;
   right: 10%;
   bottom: 10%;
/* White for older browser, rgba for newer */
   /* border: solid 1px silver;
   border-radius: 0px; */
}

.divider {
    border-top: .5px solid #fff;
    display: block;
    height: 1px;
    margin: 0 auto;
    width: 90%;
}

li{
font-size:1.2rem;
}

.responsive-photo1 {
display:block;
width:100%;
margin-right:-20px;
margin-left:auto;
padding: 0px 20px 0px 20px;
max-width:400px;
}
.responsive-photo2 {
display:block;
width:100%;
margin-right:-20px;
margin-left:auto;
padding: 0px 80px 0px 20px;
max-width:800px;
}

.divider {
display: block;
width: 100%;
margin-right: 0px;
margin-left: auto;
padding: 40px 0px -20px 0px;
max-width: 100%;
float: center;
}

#gallery { width: 800px; height: 345px; position: relative; margin-left: 80px; padding-top: 20px; }

/*The two new media queries are listed below*/

@media (min-width: 960px) {

h1{
font-size: 2.5rem;
    font-weight: normal;
    margin-left: 20px;
    text-align: center;
    color: #ff5700;
    font-family: "Teko Regular", sans-serif;
    opacity: 100%;
}

h2{
font-size: 2rem;
font-weight: bold;
font-variant:small-caps;
margin-left: 5px;
padding-top: 10px;
margin-bottom:-20px;
color: #39a5b7;
font-family:"Teko-Regular", Arial, Helvetica, sans-serif;
}

h3{
font-size: 1.5rem;
font-weight: normal;
margin-left: 3px;
margin-bottom: 0px;
margin-top: 0px;
color: #ff5700;
font-family:"Teko-Regular", Arial, Helvetica, sans-serif;
}

h3red{
font-size:2rem;
font-weight:bold;
margin-left:0px;
margin-bottom:-10px;
margin-top:0px;
padding-left:0px;
color:#ff0909;
font-family:"Teko Regular", sans-serif;
}

h3green{
font-size:2rem;
font-weight:bold;
margin-left:0px;
margin-bottom:-10px;
margin-top:10px;
padding-left:0px;
color:#01964e;
font-family:"Teko Regular", sans-serif;
}

h3blue{
font-size:2rem;
font-weight:bold;
margin-left:0px;
margin-bottom:-10px;
margin-top:10px;
padding-left:0px;
color:#0066a6;
font-family:"Teko Regular", sans-serif;
}

      article {
      width:959px;
      color:#000;
      min-height:480px;
      padding:0px;
      margin-left:auto;
      margin-right:auto;
      }

      /*The following style rules are new*/

      #navbar{
      list-style:none;
      margin-bottom: 70px;
      float:left;
      width:959px;
	  margin: 16px 0px 60px 120px;
      padding:0px;
      }

      #navbar li{
      font-size:1.75rem;
      float:left;
      margin-right:20px;
      margin-left:20px;
      position:relative;
      }

      #navbar a{
      display:block;
      padding:5px;
      color:#ff5700;
	  background-color:#fff;
      text-decoration:none;
      border: solid 1px silver;
      }

      #navbar a:hover{
      color:#39a5b7;
      text-decoration:none;
      }
      /*Dropdown styling*/

      #navbar ul{
      list-style: none;
      position: absolute;
      left: -9999px; /*Hide off-screen when not hovered over*/
      }

      #navbar ul li{
      padding-top:5px; /*Between the li items for spacing*/
      float:none;
      margin-left:-25px;
      }

      #navbar ul a{
	  color: #ff5700;
      white-space:nowrap; /*Stop text wrapping*/
      }

      #navbar li:hover ul{ /*Display the dropdown on hover*/
      left:0; /*Bring back on-screen when needed*/
      }

      #navbar li:hover a{ /*The top link display when a user hovers over sub-menu items*/
      text-decoration: none;
	  opacity: 100%;
      }

      #nav li:hover ul a{ /*The hover state defined a global style for links even before they're hovered over. Here we undo these effects.*/
      text-decoration:none;
      }

      #navbar li:hover ul li a:hover{ /*Defines the most explicit hover states when a user hovers over an individual link.*/
	  color: #39a5b7;
      }

} /*END MEDIA QUERY 1*/

/*THIS REPLACES MEDIA QUERY 2 - Media query for viewports 959px and narrower*/

@media (max-width: 959px) {  

h1{
font-size: 2rem;
font-weight: bold;
font-variant: small-caps;
float: left;
margin-top:-60px;
margin-bottom:-60px;
margin-left: 0px;
color: #39a5b7;
font-family:"Teko-Regular", Arial, Helvetica, sans-serif;
}

h2{
font-size: 1.75rem;
font-weight: bold;
font-variant:small-caps;
margin-left: 0px;
margin-top: 0px;
color: #39a5b7;
font-family:"Teko-Regular", Arial, Helvetica, sans-serif;
}

h3{
font-size: 1.5rem;
font-weight: normal;
margin-left: 3px;
margin-bottom: 0px;
margin-top: 0px;
color: #ff5700;
font-family:"Teko-Regular", Arial, Helvetica, sans-serif;
}

h3red{
font-size: 1.75rem;
font-weight: bold;
margin-left: 0px;
margin-bottom: -10px;
margin-top: 10px;
padding-left:0px;
color: #ff0909;
font-family:"Teko Regular", sans-serif;
}

h3green{
font-size: 1.75rem;
font-weight: bold;
margin-left: 0px;
margin-bottom: -10px;
margin-top: 10px;
padding-left:0px;
color: #01964e;
font-family:"Teko Regular", sans-serif;
}

h3blue{
font-size: 1.75rem;
font-weight: bold;
margin-left: 0px;
margin-bottom: -10px;
margin-top: 10px;
padding-left:0px;
color: #0066a6;
font-family:"Teko Regular", sans-serif;
}

      article {
	  color:#000;
	  margin-top: -8px;
      min-height: 480px;
	  margin-left: auto;
      margin-right: auto;
      padding: 0px; /*I added some padding to our <article> style.*/
      }

      /*The following style rules are new*/
      a{
      font-size: 1.75rem;
      text-decoration: none;
      }

      #navbar{
      list-style:none;
      margin-bottom:50px;
	  padding-top:-10px;
      }

      #navbar li{
      position:relative;
      margin-left:-50px;
      }

      #navbar a{
      font-size:1.75rem;
      display:block;
      width:100%;
      padding:5px;
      margin-bottom:5px;
      color:#ff5700;
	  text-align:center;
      background:none;
	  background-color:#fff;
      text-decoration:none;
      border:solid 1px silver;
      }

      #navbar a:hover{
      color:#39a5b7;
      text-decoration:none;
      }

      /* hide submenus in mobile devices */

      #navbar ul li{
      display: none;
      }

      #navbar li:hover a{
      text-decoration:none;
	  color:#39a5b7;
      width:100%;
      }
	  

} /*END MEDIA QUERY 2*/

.bodyfull { width: 900px; padding: 0 20px 0px 30px; float: left; margin: 30px 0 0 60px; position: relative; }
.bodyindent { margin-left: 50px; position: relative;}


#bodyleft { width: 390px; padding: 0 0px 60px 0px; float: left; margin: 0px 0 0 0px; position: absolute; color: #0f4a82; font-weight: normal; font-style: none; font-size: 18px; line-height: normal; font-family: "Teko-Regular", Arial, Helvetica, sans-serif; text-align: left; }
#bodyright { width: 390px; padding: 0 0px 60px 540px; float: left; margin: 0px 0 0 0px; position: relative; color: #0f4a82; font-weight: normal; font-style: none; font-size: 18px; line-height: normal; font-family:"Teko-Regular", Arial, Helvetica, sans-serif   ; text-align: left; }

#social-media { position: relative; width: 200px; margin: 10px 10px 10px 10px; }
.LinkedIn { width: 42px; height: 41px; float: left; margin-top: -41px; padding-left: 660px; }
.Twitter { relative; width: 42px; height: 41px; float: left; margin-top: -41px; padding-left: 760px; }
.Facebook { relative; width: 42px; height: 41px; float: left; margin-top: 30px; padding-left: 860px; }

#subnav { font-size:1.25em; text-align: right; margin-top:0px; padding-right: 0px; padding-bottom: 40px; padding-top:s0px; } 	
#subnav a { color: #ff5700; text-decoration:none; }
#subnav a:hover { color: #ee212f; text-decoration: underline; }

#download { font-size:1.25em; text-align: right; margin-top:0px; padding-right: 0px; padding-bottom: 40px; padding-top:s0px; } 	
#download a { color: #ff5700; text-decoration:none; }
#download a:hover { color: #39a5b7; text-decoration: underline; }

#more { font-size:1.25rem; text-align: center; padding-left: 20px; margin-top:0px; padding-right: 10px; padding-bottom: 5px; padding-top:0px; }
#more a { color: #ff5700; text-decoration:none; }
#more a:hover { color: #fff; text-decoration: underline; }

#backtotop { font-size:1.5rem; text-align: center; margin-top:0px; padding-right: 10px; padding-bottom: 50px; padding-top:50px; }
#backtotop a { color: #ff5700; text-decoration:none; }
#backtotop a:hover { color: #39a5b7; text-decoration: underline; }

#homage { font-size:1.25rem; text-align: center; margin-top:0px; padding-right: 10px; padding-bottom: 10px; padding-top:10px; }
#homage a { color: #ee212f; text-decoration:none; }
#homage a:hover { color: #fff; text-decoration: underline; }

#arrow { width: 12px; height: 9px; background:url(../images/arrow.png) top left no-repeat; margin: 10px 0 0 0px; }

/* 
 * 
 * Layout / Footer
 * 
 */

#ft { width: 100%; height: 200px; margin: 0 auto; background-image: url(../images/bg-footer.jpg) top left repeat-x; font-size: 14px; line-height: normal; padding-left: 0px; }
#ft #ftmain { width: 1023px; margin: 0 auto; background-image: url(../images/bg-footer.jpg) top left repeat-x; min-height: 100px; padding-left: 20px; }
#ft ul li { list-style-image: url(../images/arrow.png); }
#ft a { color: #ffffff; text-decoration: none; }
#ft a:hover { color: #ee212f; text-decoration: underline; }
#ft .sublogos { width: 100px; height: 46px; float: left; margin: 40px 10px 0 10px; }
#ft .copyright { width: 200px; float: left; margin: 40px 0px 0px 63px;}
#ft .ftcolumn { width: 170px; float: left; margin-top: 45px; padding-left: 20px; }