/*



	Template Author : pixelhint.com

	Author Email    : contact@pixelhint.com

	Template Name   : Crafty

	

	

	*****************************************

	

	

	- Header

	- Billboard

	- Services/features

	- Testimonials

	- Info section

	- Take To Action section

    - footer

	- Responsive code

	

*/







/*  Fonts  */

@font-face {

    font-family: 'lato_regular';

    src: url('../fonts/lato-regular.eot');

    src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),

         url('../fonts/lato-regular.woff') format('woff'),

         url('../fonts/lato-regular.ttf') format('truetype'),

         url('../fonts/lato-regular.svg#LatoRegular') format('svg');

    font-weight: normal;

    font-style: normal;



}





@font-face {

    font-family: 'lato_bold';

    src: url('../fonts/lato-bold.eot');

    src: url('../fonts/lato-bold.eot?#iefix') format('embedded-opentype'),

         url('../fonts/lato-bold.woff') format('woff'),

         url('../fonts/lato-bold.ttf') format('truetype'),

         url('../fonts/lato-bold.svg#LatoBold') format('svg');

    font-weight: normal;

    font-style: normal;



}





@font-face {

    font-family: 'avantgardelt-extralight';

    src: url('../fonts/avantgardelt-extralight.eot');

    src: url('../fonts/avantgardelt-extralight.eot?#iefix') format('embedded-opentype'),

         url('../fonts/avantgardelt-extralight.woff') format('woff'),

         url('../fonts/avantgardelt-extralight.ttf') format('truetype'),

         url('../fonts/avantgardelt-extralight.svg#avantgardelt-extralight') format('svg');

    font-weight: normal;

    font-style: normal;



}









/*  General CSS*/

.wrapper{

	max-width: 1200px;

	height: auto;

	margin: 0 auto;

    position: relative;

}

.tradename{

	color:#888888;

	font-size:2em;

	display:inline-block;

}
	



::selection {color:#ffffff;background:#353434;}

::-moz-selection {color:#ffffff;background:#353434;}



.feature a,

.cta a.cta_btn,

.testimonials #t_navigation a,

header ul.social li a,

header nav ul li a{

	transition:all .2s linear;

	-webkit-transition:all .2s linear;

	-moz-transition:all .2s linear;

	-o-transition:all .2s linear;

}









/*  header  */

header{

    width: 100%;

    height: 80px;

    background: #161616;

}



header .logo{

    float: left;

    margin-top: 21px;

}



header .menu_icon{

    display: block;

    width: 35px;

    height: 35px;

    background: url('../img/menu_icon.png') no-repeat;

    float: right;

    margin-top: 23px;

    display: none;

}



header nav{

    overflow: hidden;

    display: inline-block;

    margin: 20px 0 0 40px;

    padding: 13px 40px;

    border-left: 1px #404040 solid;

    z-index: 9999;

}



header nav ul{

    list-style: none;

}



header nav ul li{

    float: left;

    margin-left: 35px;

    font-size: 16px;

    font-family: 'lato_regular', arial;

    letter-spacing: 1px;

}



header nav ul li:first-child{

    margin-left: 0;

}



header nav ul li a {

    text-decoration: none;

    color: #fff;

}



header nav ul li a:hover{

    color: #65bf95;

}



header ul.social{

    float: right;

    list-style: none;

    margin-top: 23px;

}



header ul.social li{

    float: left;

    margin-left: 10px;

}



header ul.social li a{

    display: block;

    width: 35px;

    height: 35px;

    background: url('../img/sm.png') no-repeat;

}



header ul.social li a:hover{

    background: url('../img/sm_hover.png') no-repeat;

}



header ul.social li a{

    display: block;

    width: 35px;

    height: 35px;

}



header ul.social li a.fb{

    background-position: 0 0;

}



header ul.social li a.twitter{

    background-position: -36px 0;

}



header ul.social li a.gplus{

    background-position: -72px 0;

}









/*  Billboard  */

.billboard{

    width: 100%;

    height: 580px;

    background: url("../img/billboard.jpg") no-repeat center center;

    background-size: cover;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    overflow: hidden;

}



.billboard .caption{

    margin-left: 515px;

    margin-top: 220px;

}



.billboard .caption p{

    display: inline-block;

    color: #000;

    font-family: "avantgardelt-extralight", arial;

    font-weight: lighter;

    font-size: 35px;

    padding: 20px;

    background: rgba(255, 255, 255, 0.6);

    margin-bottom: 2px;

    text-transform: uppercase;

    z-index: 8888;

}









/*  Services/features  */

.features{

    width: 100%;

    padding-top: 100px;

    background: #f7f7f7;

    overflow: hidden;

}


.features h2{

    color: #4e4e4e;

    font-family: "lato_regular", arial;

    font-size: 26px;

    text-transform: uppercase;

    margin-bottom: 80px;

    letter-spacing: 1px;

}



.features .feature{

    display: block;

    width: 28.83333333333333%;

    height: auto;

    float: left;

    margin-right: 6.666666666666667%;

    margin-bottom: 100px;

}



.features .feature:nth-child(3n+0)

{

    margin-right: 0;

}



.feature .ficon{

    display: block;

    width: 18.78612716763006%;

    float: left;

    margin-right: 11.5606936416185%;

}



.feature .details_exp{

    display: block;

    width: 69.36416184971098%;

    float: left;

}



.feature h3{

    margin-bottom: 20px;

    color: #767575;

    font-family: "lato_bold", arial;

    font-size: 22px;

    font-weight: bold;

    letter-spacing: 1px;



}



.feature p{

    margin-bottom: 20px;

    color: #9e9e9e;

    font-family: "lato_regular", arial;

    font-size: 15px;

    line-height: 22px;



}



.feature a{

    color: #848484;

    font-family: "lato_regular", arial;

    font-size: 15px;

    text-decoration: none;

    letter-spacing: .5px;

}



.feature a:hover{

    color: #353434;

}



.feature a span{

    font-family: arial;

    margin-left: 10px;

}









/*  Testimonials  */

.testimonials{

    text-align: center;

}



.testimonials h2{

    color: #4e4e4e;

    font-family: "lato_regular", arial;

    font-size: 26px;

    text-transform: uppercase;

    margin-bottom: 80px;

    letter-spacing: 1px;

}



.caroufredsel_wrapper{

    max-width: 1040px!important;

    margin: 0 auto!important;

}



.testimonials .testi_slider{

    max-width: 1040px!important;

    height: auto;

    overflow: hidden;

}



.testimonials .testi_slider .t{

    max-width: 1040px!important;

    text-align: center;

    float: left;

    height: auto;

}



.testimonials p{

    color: #8e8d8d;

    font-family: "lato_regular", arial;

    font-size: 20px;

    line-height: 30px;

    letter-spacing: 1px;

}



.testimonials p.author{

    color: #686767;

    font-family: "lato_bold", arial;

    font-size: 16px;

    font-weight: bold;

    margin-top: 40px;

}



.testimonials #t_navigation a{

    display: inline-block;

    width: 13px;

    height: 13px;

    background: #dadada;

    text-decoration: none;

    margin-right: 10px;

    margin-top: 40px;



    border-radius: 100px;

    -webkit-border-radius: 100px;

    -moz-border-radius: 100px;

    -o-border-radius: 100px;

}



.testimonials #t_navigation a.selected{

    background: #bebebe;

}



.sep_line{

    display: block;

    width: 13.5px;

    height: 100px;

}



.sep_line:after{

    content: "";

    display: block;

    width: 1px;

    height: 100%;

    background: #dedede;

    margin: 0 auto;

}



.sep_top{

    border-bottom: 1px #dedede solid;

    margin: 0 auto 40px auto;

}



.sep_bottom{

    border-top: 1px #dedede solid;

    margin: 40px auto 0 auto;

}









/*  Info Section  */

.info{

    width: 100%;

    overflow: hidden;

    background: #3b3b3b;

}



.info_pic{

    display: block;

    width: 50%;

    height: 405px;

    float: left;

    background: url('../img/info_img.jpg') no-repeat;



    background-size: cover;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

}



.info_details{

    display: block;

    width: 50%;

    height: 245px;

    float: left;

    padding: 80px 0;

}



.info_details h3{

    color: #fff;

    font-family: "lato_bold", arial;

    font-size: 30px;

    font-weight: bold;

    font-weight: bold;

    text-transform: uppercase;

    max-width: 560px;

    margin: 0 0 3.333333333333333% 40px;

    letter-spacing: 1px;

    line-height: 40px;

}



.info_details p{

    color: #ededed;

    font-family: "lato_regular", arial;

    font-size: 16px;

    max-width: 560px;

    margin: 0 0 3.333333333333333% 40px;

    letter-spacing: 1px;

    line-height: 30px;

}



.info_details a{

    color: #fff;

    font-family: "lato_regular", arial;

    font-size: 16px;

    margin: 0 0 0 40px;

    text-decoration: none;

}



.info_details a span{

    margin-left: 10px;

}









/*  Call To Action Section  */

.cta{

    display: block;

    text-align: center;

    padding-top: 100px;

}



.cta h3{

    color: #6b6b6b;

    font-family: "lato_bold", arial;

    font-size: 34px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.cta p{

    color: #7f7c7c;

    font-family: "lato_regular", arial;

    font-size: 17px;

    margin-top: 20px;

    letter-spacing: .5px;

}



.cta a.cta_btn{

    display: inline-block;

    padding: 20px 60px;

    background-color: #65bf95;

    color: #fff;

    font-family: "lato_regular", arial;

    font-size: 20px;

    text-decoration: none;

    margin-top: 60px;

    text-transform: uppercase;

    letter-spacing: 1px;





    -moz-border-radius: 1px;

    -webkit-border-radius: 1px;

    border-radius: 1px;



}



.cta a.cta_btn:hover{

    background: #56b086;

}



.cta .cta_sep{

    display: block;

    width: 1px;

    height: 100px;

    background: #dedede;

    margin: 0 auto;

}









/*  Footer  */

footer{

    padding: 100px 0;

    border-top: 1px #dedede solid;

    background: #f7f7f7;

    text-align: center;

}



footer .rights{

    color: #3b3b3b;

    font-family: "lato_regular", arial;

    font-size: 14px;

    margin-top: 30px;

    line-height: 25px;

}



footer .rights a{

    text-decoration: none;

    font-family: 'lato_bold', arial;

    font-weight: bold;

    color: #3b3b3b;

}



a{

    color: #3b3b3b;

}









/*  Responsive code  */

@media (max-width:1200px){

    .wrapper{

        padding: 0 40px;

    }

    .info_pic,

    .info_details{

        width: 100%;

    }



    .info_details{

        height: auto;

        padding: 40px 0;

    }



    .info_details h3,

    .info_details p,

    .info_details a{

        max-width: 80%;

        display: block;

        text-align: center;

        margin: 40px auto;

    }

}





@media (max-width:1000px){

    .billboard .caption{

        text-align: center;

        margin-left: 0;

    }

    .cta{

        width: 80%;

        margin: 0 auto;

    }

}





@media (max-width:800px){

    header .logo{

        float: none;

    }



    header .menu_icon{

        display: block;

    }



    ul.social{

        display: none;

    }



    header nav{

        display: block;

        background: #353434;

        margin: 21px 0 0 0;

        padding: 0;

        border-left: 0;

        border-top: 1px #2c2c2c solid;

        overflow: hidden;

        text-align: center;

        position: relative;

        z-index: 9999;

        display: none;

    }

    header nav{

        border-bottom-left-radius: 2px; 

        -webkit-border-bottom-left-radius: 2px; 

        -moz-border-bottom-left-radius: 2px; 

        -o-border-bottom-left-radius: 2px; 

        border-bottom-right-radius: 2px; 

        -webkit-border-bottom-right-radius: 2px; 

        -moz-border-bottom-right-radius: 2px; 

        -o-border-bottom-right-radius: 2px; 

    }

    header nav.show_menu{

        display: block;

    }

    header nav ul li{

        margin: 0;

        width: 100%;

        border-bottom: 1px #2c2c2c solid;

    }

    header nav ul li:last-child{

        border-bottom: 0;

    }

    header nav ul li a{

        display: block;

        width: 100%;

        padding: 20px 0;

    }

    header nav ul li a:active{

        display: block;

        width: 100%;

        padding: 20px 0;

        background: #2c2c2c;

    }



    .features .feature{

        width: 46.66666666666667%;

        margin-right: 6.666666666666667%!important;

    }

    .features .feature:nth-child(2n+2)

    {

        margin-right: 0!important;

    }

}



@media (max-width:500px){



    .features .feature{

        width: 100%;

        margin-right: 0!important;

    }



}