/* Template Author : pixelhint.com Author Email : contact@pixelhint.com Template Name : Crafty ***************************************** - Header - Billboard - Services - Video - Recent Work - Subscription - Social Media Icons - Footer - Subsciption pop-up */ /* 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{ width: 1200px; height: auto; margin: 0 auto; position: relative; } .feature a, .cta a.cta_btn, .testimonials #t_navigation 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: #353434; } header .logo{ float: left; margin-top: 21px; } header nav{ overflow: hidden; display: inline-block; margin: 20px 0 0 40px; padding: 13px 40px; border-left: 1px #404040 solid; } 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 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('/crafty/img/sm.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("../crafty/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; } /* Services/features */ .features{ width: 100%; padding: 100px 0; background: #f7f7f7; } .features .row{ margin-bottom: 100px; overflow: hidden; } .features .row:last-child{ margin-bottom: 0; } .features .row .feature:last-child{ margin-right: 0; } .features .feature{ display: block; width: 346px; height: auto; float: left; margin-right: 80px; } .feature .ficon{ display: block; width: 65px; float: left; margin-right: 40px; } .feature .details_exp{ display: block; width: 240px; 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{ margin: 0 auto!important; } .testimonials .testi_slider,{ width: 1040px; overflow: hidden; } .testimonials .testi_slider .t{ width: 1040px; text-align: center; float: left; } .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: inline-block; text-align: center; width: 13px; height: 100px; } .sep_line:after{ content: ""; display: block; width: 1px; height: 100%; background: #dedede; margin-left: 6px; } .sep_top{ border-bottom: 1px #dedede solid; margin-bottom: 40px } .sep_bottom{ border-top: 1px #dedede solid; margin-top: 40px } /* Info section */ .info{ width: 100%; overflow: hidden; } .info_pic{ display: block; width: 50%; height: 405px; float: left; background: url('/crafty/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; background: #3b3b3b; 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 40px 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 40px 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; } /* Take To Action section */ .cta{ 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; } ::selection {color:#ffffff;background:#353434;} ::-moz-selection {color:#ffffff;background:#353434;