/*

	Template Author : pixelhint.com
	Author Email    : contact@pixelhint.com
	Template Name   : Sublime
	
	
	*****************************************
	
	
    - fonts
    - general css
    - billboard
    - header
    - services
    - video
    - testimonials
    - blog posts
	- footer
	
*/
.img{
	width: 100%;
	
}
.icon{
	width: 100%;
	height: auto;
}

.floatleft {
    float:left;
}
.floatright {
    float:right;
}

 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {text-align: right; display: inline;}

ul.topnav li:first-child{

	
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #000;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.iconburger {display: none;}

 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li {display: none}
  ul.topnav li.iconburger {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative; background:rgba(0,0,0, 0.8);}
  ul.topnav.responsive li.iconburger {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}


/*  Fonts  */
@font-face {
    font-family: 'raleway-regular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular.woff') format('woff'),
         url('../fonts/raleway-regular.ttf') format('truetype'),
         url('../fonts/raleway-regular.svg#raleway-regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'raleway-semibold';
    src: url('../fonts/raleway-semibold.eot');
    src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-semibold.woff') format('woff'),
         url('../fonts/raleway-semibold.ttf') format('truetype'),
         url('../fonts/raleway-semibold.svg#raleway-semibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'raleway-bold';
    src: url('../fonts/raleway-bold.eot');
    src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-bold.woff') format('woff'),
         url('../fonts/raleway-bold.ttf') format('truetype'),
         url('../fonts/raleway-bold.svg#raleway-bold') format('svg');
    font-weight: normal;
    font-style: normal;

}



/*  General CSS*/
body{
    background: #fff;
	width: 100%;
}

.menu {
    color:#FFF;
    height:50px;
	position:absolute;
    top:10px;
    width:100%;
	z-index: 999;
	background:rgba(0,0,0, 0.3);
}

.menu ul{ padding-right: 0.5em;}
.fixed {
	
    background:rgba(0,0,0, 0.8);
    position:fixed;
    top:0;
}

.wrapper{
	max-width: 1100px;
    width: 100%;
    margin: 0 auto;
	
}

h1, h2, h3, h4, h5 ,h6{
    color: #626262;
    font-family: "raleway-regular", arial;
    letter-spacing: 1px;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder; padding: 0 15px; }

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}







/*    Billboard    */
.billboard{
    width: 100%;
    height: 690px;
    position: relative;
}

.billboard.light{
    background: url('../img/billboard.jpg') no-repeat;   
     
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.billboard.dark{
    background: url('../img/billboard2.jpg') no-repeat;
    
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}


.billboard .shadow{
    position: absolute;
    width: 100%;
    height: 142px;
    bottom: 0;
    left: 0;
    margin-bottom: -1px;
    background: url('../img/shadow.png') repeat-x;
}

.video .shadow3{
    width: 100%;
    height: 66px;
    bottom: 0;
    left: 0;
    background: url('../img/shadow3.png') repeat-x;
}

.video .shadow2{
    width: 100%;
    height: 66px;
    bottom: 0;
    left: 0;
    margin-bottom: -1px;
    background: url('../img/shadow2.png') repeat-x;
}

.billboard .caption{
    padding-top: 220px;
    text-align: center;
}

.billboard .caption.light{
    color: #fff;
}

.billboard .caption.dark{
    color: #5d5d5d;
}

.billboard .caption h1{
    font-family: "raleway-bold";
    font-size: 50px;
    font-weight: bold; 
    margin-bottom: 30px;
}

.billboard .caption.light h1{
    color: #fff;
}

.billboard .caption.dark h1{
    color: #5d5d5d;
}

.billboard .caption p{
    font-family: "raleway-regular";
    font-size: 18px;
    margin-bottom: 30px;
}

.billboard .caption.light p{
    color: #fff;
}

.billboard .caption.dark p{
    color: #5d5d5d;
}

.billboard .caption hr{
    display: inline-block;
    height: 1px;
    width: 30px;
    border: 0!important;   
    margin: 0;
    padding: 0;
}

.billboard .caption.light hr{
    background: #fff;
}

.billboard .caption.dark hr{
    background: #5d5d5d;
}






/*    header    */
header{
    width: 90%;
}

header .logo{
    float: left;
	margin-top: 13px;
	margin-left: 5px;
}

header nav{
    float: right;
}


header nav ul li{
    list-style: none;
    display: block;
    float: left;
    margin-left: 30px;
}

header nav ul li a{
    text-decoration: none;  
    font-family: "raleway-regular";
    font-size: 16px;

    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}

header.light nav ul li a{  
    color: #fff;
}

header.light nav ul li a:hover{
    color: #B9B9B9;
}

header.dark nav ul li a{  
    color: #5d5d5d;
}

header.dark nav ul li a:hover{
    color: #919191;
}







/*    Services    */
.services ul{
    margin-top: 100px;
}

.services ul li{
    list-style: none;
    display: block;
    width: 313px;
    float: left;
    margin-left: 80px;
    text-align: center;
}

.services ul li:first-child{
    margin-left: 0;
}

.services ul li .separator{
    display: block;
    width: 1px;
    height: 20px;
    background: #f6f6f6;
    margin: 20px auto;
}

.services ul li h2{
    color: #616161;
    font-family: "raleway-bold";
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.services ul li p{
   color: #838181;
    font-family: "raleway-regular";
    font-size: 14px;
    line-height: 28px; 
    margin-top: 40px;
    letter-spacing: .5px;
}

.titletext{
   color: #838181;
    font-family: "raleway-regular";
    font-size: 14px;
    line-height: 28px; 
    margin-top: 40px;
    letter-spacing: .5px;
	text-align: justify;
	padding: 0 15px;
}







/*    Video    */
.video{
    display: block;
    width: 100%;
    height: 230px;
    text-align: center;
    margin-top: 100px;
    background: url('../img/video.jpg') no-repeat;    
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.video .video_logo{
    margin-top: 35px;
}

.video h3{
    color: #fff;
    font-family: "raleway-regular";
    font-size: 14px;
    font-weight: normal!important;
    margin: 20px 0 0 0;
}

.video #play_btn{
    display: inline-block;
    width: 71px;
    height: 71px;
    background: url('../img/play_btn.png') no-repeat;
    margin-top: 40px;
}




.title{
    text-align: center;
    overflow: hidden;
}

.title h2{
    color: #616161;
    font-family: "raleway-bold";
    font-size: 30px;
    font-weight: bold;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.title h3{
    color: #9b9b9b;
    font-family: "raleway-regular";
    font-size: 14px;
    margin: 0 0 20px 0;
    font-weight: normal!important;
}

.title hr.separator{
    display: block;
    width: 40px;
    height: 1px;
    background-color: #ebebeb;
    margin: 0 auto;
    padding: 0;
    border: 0!important;
}



.field {font-size: 1.2em; margin-bottom: 10px;}

#contact-info a {
	
	color: #16798E;;
}

.anchor {
    position: relative;
    top: -50px;
}



/*    testimonials    */
.contact{
    margin-top: 100px;
	padding: 100px 0;
    background: #fafafa;
}

.contact ul{
    margin-top: 50px;
    list-style: none;
}







/*    blog posts    */
.testimonials{
    margin-top: 100px;
    
}

.testimonials ul{
    list-style: none;
    margin-top: 70px;
}

.testimonials ul li{
    display: block;
    width: 230px;
    margin-left: 60px;
    float: left;
}

.testimonials ul li:first-child{
    margin-left: 0;
}

.media .date{
    position: absolute;
    top: 0;
    left: 30px;
    width: 50px;
    padding: 10px 0;
    background: rgba(62, 62, 62, .7);
    text-align: center;
}

.media .date span{
    display: block;
}

.media .date .day{
    color: #fff;
    font-family: "raleway-bold";
    font-size: 18px;
    font-weight: bold;

}

.media .date .month{
    color: #fff;
    font-family: "raleway-regular";
    font-size: 12px;
}

.media{
    position: relative;
	padding-bottom: 15px;
}

.medialink{
    color: #616161;
    font-family: "raleway-regular";
    font-size: 16px;
    font-weight: normal;
    line-height: 26px;
    margin: 20px 0 0 0;
}

.mediaimg {
    margin: 0 auto;
}







/*    footer    */
footer{
    padding: 35px 0;
    overflow: hidden;
}

footer .footer_logo{
    float: left;
}

footer .rights p{
    float: left;
    color: #838181;
    font-family: "raleway-regular";
    font-size: 13px;
    margin: 5px 0 0 40px; 
}

footer .rights p a{
    color: #777;
    font-family: "raleway-semibold";
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}

footer nav ul{
    float: right;
    overflow: hidden;
    list-style: none;
    margin-top: 5px; 
}

footer nav ul li{
    float: left;
    margin-left: 25px;
}

footer nav ul li a{
    color: #838181;
    font-family: "raleway-regular";
    font-size: 13px;
    text-decoration: none;

    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}

footer nav ul li a:hover{
    color: #616161;
}