/* GLOBAL STYLES -------------------------------------------------- */ #site-wrapper { position: relative; overflow: hidden; width: 100%; } #site-canvas { width: 100%; height: 100%; position: relative; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: .3s ease all; transition: .3s ease all; } #site-menu { width: 90%; z-index: 9999 !important; min-height:2000px; position: absolute; top: 0; left: -90%; background: #ee7501; padding: 60px 30px; z-index: } #site-wrapper.show-nav #site-canvas { -webkit-transform: translateX(90%); transform: translateX(90%);} body { padding-bottom: 0px; color: #5a5a5a; font-family: 'Roboto', sans-serif; font-weight:400; letter-spacing:2px; line-height:1.4em; } .container {color:#333;} .container .row .centred {text-align:center;} .container .row.topPad {padding-top:50px} hr {background:#333; border:#333; height:1px; width:100%;} .topPadSml {padding:25px 0 0 0;} .botPadSmall {padding-bottom: 25px ;} .grey {width:100%; background:#f0f0f0; padding-bottom:50px; clear:both; margin-bottom:0;} .right-text {text-align:right;} .strip {padding:80px 0 ;} .strip-small {padding:40px 0 ;} .fullwidth{width:100%; margin:0; padding:0;} .no-gutter > [class*='col-'] { padding-right:0; padding-left:0; } .row { margin: 0; padding: 0 } .auto {width:100%;} img.margin-top {margin-top:30px;} /* COLOURS (ORS) */ .grey { background:#282828;} .orange {background:#ee7501;} .blue { background:#2375bb;} .green {background:#8cc84d;} .white {background:#fff; color:#333;} .olive {background:#61635b;} /* TEXT STYLES */ h1 { font-size:38px; font-weight:900; color:#fff; letter-spacing:4px; line-height:1.5em; margin-top:0; padding-top:0; } h2 { font-size:32px; font-weight:900; color:#fff; line-height:1.4em;} h3 { font-size:26px; font-weight:900; color:#fff; line-height:1.4em;} h1 span, h2 span, h3 span {color:#fff; line-height:1.4em;} h4 {padding-bottom:15px; line-height:1.4em;} .light {font-weight:100;} .t-orange {color:#ee7501;} .t-green {color:#8cc84d;} .t-orange span{color:#fff;} .t-blue {color:#2375bb;} span.t-orange {color:#ee7501;} p.quote.t-green{color:#8cc84d;} .videoBody h1 {text-align:center;} p.quote { font-family: 'Reenie Beanie', cursive; font-size:38px; color:#111; padding:0 30px; } .white p {color:#333;} a.watch { } a {transition: .4s all;} a.primary {display:inline-block; width:auto; padding:15px 40px; color:white; background:#8cc84d; margin-top:20px; } a.primary:hover {background:#6ea336; text-decoration:none;} a.primary.orange {color:white; background:#ee7501; } a.primary.orange:hover {background:black; color:#ee7501;} a.outline {display:inline-block; width:auto; padding:15px 40px; color:white; border:2px solid #8cc84d; margin-top:20px; background: rgba(255, 255, 255, 0); } a.outline:hover {border:2px solid #fff; background: rgba(255, 255, 255, 1); color:#8cc84d; text-decoration:none;} a.outline.g-outline {border:2px solid #ee7501;} a.outline.g-outline:hover {border:2px solid #fff; background: rgba(255, 255, 255, 1); color:#ee7501; text-decoration:none;} a.social { display: inline-block; width: 32px; height: 32px; background: #ee7501; padding: 3px 0 0 2px; text-align: center; font-size: 20px; margin-top: 0px; margin-right: 5px; color: #333; -moz-border-radius: 35px; -webkit-border-radius: 35px; border-radius: 35px; line-height: 1.4em;} a.social:hover { background:#8cc84d; color:#fff;} p.lead { font-size:16px; padding-top:15px;} p { color:#fff; line-height:1.4; letter-spacing:1.2px; } span.pullout {color:#ee7501;} .olive.border-top::before {content:""; width:100%; height:60px; background:red;} #hero .toolbar {padding:10px 0; margin-bottom:30px; background:rgba(0,0,0,0.7);} #hero .toolbar .talk {padding:5px 0 0 0; font-size:18px; dispaly:block; color:#fff; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1); margin:0; } #hero .toolbar .talk span {color:#fff; font-weight:100; font-size:13px;} #hero .logo {float:left; } #hero nav.menu {display:block; float:left; margin:15px 0 0 30px; padding:0; } #hero nav.menu ul.topmenu { display:block; padding:0; margin:0; } #hero nav.menu ul.topmenu li {display:block; width:auto; height:; float:left; list-style-type:none; padding:0 30px 0 0;} #hero nav.menu ul.topmenu li.last:after {content:""; padding:0 0 0 20px;} #hero nav.menu ul li a {color:#fff; text-shadow: 0px 0px 10px rgba(0, 0, 0, .5); font-weight:400;} #hero nav.menu ul li a:hover {text-decoration:none; color:#8cc84d;} #hero nav.menu ul li a.active {color:#8cc84d;} #hero .header {margin-top:30px;} #hero .header .logo {padding-left:30px;} #hero nav.menu .submenu { background: rgba(0,0,0,.7); height: 0px; overflow:hidden; float: none; position: absolute; width: 200px; padding: 10px 0 0 10px; z-index: 999999; border-top: 2px #8cc84d solid; opacity:0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } #hero nav.menu li.sub:hover .submenu {opacity:1; height:auto; } #hero nav.menu ul.topmenu li.sub {padding-bottom:15px;} #hero nav.menu .submenu li { display: block; float: none; width: 100%; clear: both; height: 30px;} #hero nav.menu ul.topmenu li ul.submenu li:after { content:""; font-weight:700; padding:0 0px; color:#fff;} #hero nav.menu .submenu li a { font-weight:100;} #hero .toggle-nav { border:0px none; background:0; display:inline-block; padding: 0px 15px; position:absolute; top:-20px; right:260px;} #hero .toggle-nav i { font-size:46px;} @media screen and (max-width: 580px) { .letstalk {display:none;} #hero .toggle-nav { right:20px;} } #hero.safari {background:url(../img/safari-title-banner.jpg) no-repeat; background-size:cover;} #hero.tech {background:url(../img/n-tech-title-banner.jpg) no-repeat; background-size:cover; background-position:right;} #hero.contact {background:url(../img/contact-title-banner.jpg) no-repeat; background-size:cover; background-position:right; border-bottom:4px solid #ee7501; } #hero.stay {background:url(../img/stay-hero.jpg) no-repeat; background-size:cover;} #hero.experiences {background:url(../img/experiences-title.jpg) no-repeat; background-size:cover;} #hero.about {background:url(../img/about-title.jpg) no-repeat; background-size:cover;} #hero.corporate {background:url(../img/n-corporate-title-banner.jpg) no-repeat; background-size:cover;} #hero.evolved {background:url(../img/evolve-title-banner7.jpg) no-repeat; background-size:cover;} #hero.evolved h1 {margin-bottom:0px; padding-bottom:0; color:#ee7501; font-size:60px; text-shadow:0 none;} #hero.evolved h2 {margin-top:0px; padding-top:0; color:#fff; font-size:38px; text-shadow:0 none;} @media (max-width: 768px) { #hero.safari, #hero.tech {background-position:58% 50%} #hero.evolved {background-position:25% 50%} } #hero p { color:white; } #hero h1 {margin-top:120px; margin-bottom:50px; text-shadow: 0px 0px 18px rgba(0, 0, 0, .5);} #site-menu a.close-nav {color:#fff; font-size:20px;} #site-menu ul { padding:0;} #site-menu ul li { list-style-type:none; padding:10px 0 15px 0;} #site-menu ul li.product {padding:0 0 15px 25px;} #site-menu ul li a { color:#333; font-weight:200;} #site-menu p.lead {color:#333; font-size:24px;} ul.footer-links { padding:0;} ul.footer-links li { list-style-type: none; padding:0px 0 15px 0; line-height:11px; width:100%; font-weight:600; } ul.footer-links li.product {padding:0 0 15px 25px; font-weight:200; } ul.footer-links li a { color:#fff; line-height:18px; } .fullWidthDark {width:100%; background:#282828; margin:-60px 0 0 0; padding:0;} .fullWidthGreen {width:100%; background:#8cc84d; margin:40px 0 0 0; padding:0 0 30px 0; color:#fff;} .fullWidthOrange {width:100%; background:#ee7501; margin:0px 0 0 0; padding:80px 0 80px 0; color:#fff;} .fullWidthBlue {width:100%; background:#2375bb; margin:40px 0 0 0; padding:0 0 30px 0; color:#fff;} .fullWidthYellow {width:100%; background:#ffc807; margin:40px 0 0 0; padding:0 0 30px 0; color:#fff;} .fullWidthGrey {width:100%; background:#444; margin:40px 0 0 0; padding:0 0 30px 0; color:#fff;} .fullWidthOrange.carousel {width:100%; background:#ee7501; margin:40px 0 0 0; padding:0 0 30px 0; color:#fff;} .fullWidthBlue.carousel {width:100%; background:#2375bb; margin:40px 0 0 0; padding:0 0 30px 0; color:#fff;} .letstalk {background:white; padding:20px; width:250px; position:absolute; top:0; right:0; margin-top:-30px;} .letstalk p {color:#171717!important; padding:0; margin:0;} .letstalk p span {color:#ee7501; font-size:24px;} .letstalk p span a {color:#ee7501;} /* HOMEPAGE STYLES -------------------------------------------------- */ /* VIDEO */ .videoContainer { position: absolute; top: 0; bottom: 0; width: 100%; height: 650px; z-index: -900; overflow:hidden; left:0; margin-top:-50px; } .videoContainer.homeherobanner {width:100%; background:url(../img/n-kankku-hero-bg-lakedistrict-offroad-experience.jpg) no-repeat center; background-size:cover;} .videoContainer:after { content:''; display:block; position:abolute; width:100%; height:650px; background:url(../video/black-zig-zag.png); z-index:999; opacity:.5; } .videoContainer video { z-index:-1; } #bgvid { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url('../video/vid-hero-bg.jpg') no-repeat; background-size: cover; transition: 1s opacity; } @media (max-width: 768px) { .videoContainer { background:url('../video/vid-hero-bg.jpg') no-repeat; background-size:cover; background-position:80% 50%; } .videoContainer:after { background: #000; opacity:.5; } #bgvid {display:none;} } #hero { background-color: rgba(0, 0, 0, 0) ; background-size: cover; overflow:hidden; height:500px; } .videoBody #hero { background: rgba(0, 0, 0, .25 ); background-repeat:repeat; height: 600px; } .our-experiences { padding-top:100px; height:600px; background:url(../img/n-kankku-offroad-experience.jpg) no-repeat; background-size:cover; } .masonary {margin-top:30px;} .fifty-fifty {} .fifty-fifty .image {} .fifty-fifty .text { padding:60px 30px; text-align:center;} .fifty-fifty .text.left { padding:60px 30px; text-align:left;} .fifty-fifty .about-us { background:url(../img/50-50-about2.jpg) no-repeat; background-size:cover; background-position: center 70%; min-height:550px;} .fifty-fifty .on-the-day {background:url(../img/n-50-50-on-the-day.jpg) no-repeat; background-size:cover; background-position: center 50%; min-height:550px;} #hero.product-hero { height: 500px; margin-bottom: 0px; background: #222; background-image: none; background-size: cover; overflow:hidden; } #hero.contact-hero { height: 400px; margin-bottom: 0px; background: #222; background-image: url(../img/contact-hero.jpg); background-size: cover; overflow:hidden; } #hero.product-hero .hero-content { height: 500px; padding-top:60px; border-bottom:0px none;} #hero.contact-hero .hero-content { height: 400px; padding-top:60px; border-bottom:0px none; background-image:url(../img/background-pattern.png); background-repeat:repeat; padding-top:60px;} #hero.product-hero .hero-content.safari { background-image:url(../img/safari-hero.jpg);} #hero.product-hero .hero-content.technical { background-image:url(../img/technical-hero.jpg);} #hero.product-hero .hero-content.stay { background-image:url(../img/stay-hero.jpg);} #hero.product-hero .hero-content.team { background-image:url(../img/team-hero.jpg);} #hero.product-hero .hero-content.evolve { background-image:url(../img/evolve-hero.jpg);} #hero.product-hero h1 {font-size:72px; margin-top:0; line-height:72px;} #hero.contact-hero h1 { margin-top:20px; line-height:72px;} /* EXPERIENCES */ .prices {border:1px dashed #8cc84d; padding:10px 30px 30px; margin:0 0 30px 0;} .prices.p-orange {border:1px dashed #ee7501;} .prices.p-blue {border:1px dashed #2375bb;} .price {font-size:1.5em;} .phone {font-size:1.8em} .pad-right {padding-right:30px;} .pad-both {padding-right:50px; padding-left:50px;} iframe {padding:0; margin:5px 5px 0 0 ; border:0 none;} a.videoLink {color:#fff; float:right; display:block; text-align:center;} a.videoLink p {text-align:center;} /* HOW TO STEPS */ .steps {} .steps .how-it-works {} .steps .how-it-works.slick-slider {margin-bottom:0;} .steps .how-it-works .item {height:600px; overflow:hidden;} .steps .how-it-works .item .image {height:600px; width:100%; background-size:cover; } .steps .how-it-works .item .instructions {width:35%; padding:40px; background:rgba(140,200,77,.8); position:relative; top:-550px; left:50px;} .steps.orange .how-it-works .item .instructions { background:rgba(238,117,1,.8); } .steps .how-it-works .item .instructions h4 {color:#111; font-weight:900; padding-bottom:0;} .steps .how-it-works .item .instructions p {color:#111;} .steps .how-it-works .item .instructions .btn { padding:15px 20px; margin-top:15px; background:#333; border-radius:0px; color:#fff; -webkit-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);} .steps .how-it-works .item .instructions .btn:hover {background:#111; border-radius:0px; color:#8cc84d; -webkit-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.0); -moz-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.0); box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.0);} @media (max-width: 850px) { .steps .how-it-works .item .instructions {width:80%; padding:40px; } .steps .how-it-works .item {height:800px; overflow:hidden;} .steps .how-it-works .item .image {height:300px; width:100%; background-size:cover; } .steps .how-it-works .item .instructions {width:100%; padding:30px; background:rgba(140,200,77,.8); position:normal; top:0px; left:0px;} } /* CARDS */ .card {margin-top:30px; padding-bottom:30px; min-height:640px;} .card h3 {padding-left:30px; padding-right:30px; padding-top:30px; margin-top:0;} .card p {padding-left:30px; padding-right:30px;} .card a {margin-left:30px; } .card.white h3, .card.white h3 .light {color:#333;} .contact-strip .strip a {color:#fff;} @media (max-width: 767px) { .card {margin-top:30px; padding-bottom:30px; min-height:auto;} } /* EVOLVE */ .evolve { background:url('../img/about-evolve.jpg') no-repeat center; background-size:cover; height:500px; border-top:5px solid #ee7501; border-bottom:5px solid #ee7501;} @media (max-width: 767px) { .evolve {background:linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3)), url('../img/about-evolve.jpg') no-repeat center ; padding-left:30px; } } /* EVOLVE PAGE */ .evo { background-size:cover; height:500px; transition:.6s all; opacity:1;} .evo .evo-strip {height:500px; widht:100%; transition:.6s all; background:rgba(0,0,0,0);} .evo .evolve-text { opacity:0; transition:.6s all;} .cooper { background:url('../img/cooper.jpg') no-repeat center; background-size:cover;} .isuzu { background:url('../img/isuzu.jpg') no-repeat 80% 60%; background-size:cover;} .kahn { background:url('../img/kahn2.jpg') no-repeat center; background-size:cover;} .nook { background:url('../img/nook-end-farm.jpg') no-repeat center; background-size:cover;} .evo:hover { } .evo:hover .evo-strip{ background:rgba(0,0,0,.7);} .evo:hover .evolve-text { opacity:1; } @media (max-width: 767px) { .evo {height:600px;} .evo .evo-strip{ background:rgba(0,0,0,.55); height:600px;} .evo .evolve-text { opacity:1; padding-left:10%; padding-right:10%; padding-top:35px;} } } /* CONTACT STRIP */ .contact-strip {} .contact-strip .strip a {color:#fff;} /* EXPERIENCES PAGE - PRODUCT OPTIONS */ .products {} .products .product {z-index:1; position:relative; background:#111;} .products .product:hover { z-index:999999; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7);} .products .text {height:450px; padding:30px; z-index:999; background: #000111; /* Old browsers */ background: -moz-linear-gradient(top, #000111 0%, #1a1a1a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #000111 0%,#1a1a1a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #000111 0%,#1a1a1a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000111', endColorstr='#1a1a1a',GradientType=0 ); } .products .image {height:450px; background-size:cover; background-position: right; overflow:hidden;} .products .technical .image { background:url(../img/n-experiences-options-tech.jpg); background-size:cover; background-position: center 90%;} .products .safari .text h3 {color:#8cc84d;} .products .safari .text a.cta {color:#8cc84d; border-color:#8cc84d;} .products .technical .text h3 {color:#ee7501;} .products .technical .text a.cta {color:#ee7501; border-color:#ee7501;} .products .safari .image {background:url(../img/experiences-options-safari.jpg); background-size:cover; background-position: center 90%;} .products h3 {font-size:22px; margin-top:0; margin-bottom:20px;} .products p {font-size:13px;} .products p.quote.small {font-size:24px; color:#ccc; } .products .cta.outline {border-color:#fff;} .products .technical .cta.outline:hover {color:#ee7501;} .products .safari .cta.outline:hover {color:#8cc84d;} .products .rollover { width:100%; cursor:pointer; position:relative; height:100%; background:rgba(238,117,1,0.6); left:-100%; transition: .3s all; z-index:1; } .products .rollover a { width:100%; height:100%; padding:200px 0 0 0; display:block; text-align:center; } .products .safari .rollover { background:rgba(140,200,77,0.6); } .products .product:hover .rollover { left:0%; } .products .rollover a:hover {text-decoration:none;} @media (max-width: 768px) { .products .text {height:auto; } .products .image {height:300px; } .products .rollover { width:100%; cursor:pointer; position:relative; height:100%; background:rgba(238,117,1,0.6); left:0; top:-100%; transition: .3s all; z-index:1; } .products .safari .rollover { background:rgba(140,200,77,0.6); } .products .product:hover .rollover { top:0%; left:0; } .products .rollover a {padding-top:100px;} .products .rollover a:hover {text-decoration:none;} .fullwidth.corporate-cars {padding-bottom:150px; background: url('../img/kankku-corporate-cars.png') no-repeat 70% bottom #282828;} .outline-car {max-width:600px;} } /* SIGNPOSTS -------------------------------------------------- */ .fullWidthDark .container {color:#fff;} .fullWidthDark h2 { color:#ee7501;} .products .fullWidthDark h2 {padding:10px 0 20px;} .signpost {overflow:hidden; background-size:cover; padding:0; margin:0 0 20px 0; border-radius: 3px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); } .signpost a { display:block; margin:0; padding:0; color:#fff; } .signpost.orange a { background: rgba(255,96,0,.0);} .signpost.orange a:hover { background: rgba(255,96,0,.6); -webkit-transition: background 0.4s linear; -moz-transition: background 0.4s linear; -ms-transition: background 0.4s linear; -o-transition: background 0.4s linear; transition: background 0.4s linear; } .signpost.green a { background: rgba(140,200,77,.0);} .signpost.green a:hover { background: rgba(140,200,77,.6); -webkit-transition: background 0.4s linear; -moz-transition: background 0.4s linear; -ms-transition: background 0.4s linear; -o-transition: background 0.4s linear; transition: background 0.4s linear; } .signpost.blue a { background: rgba(35,117,187,.0);} .signpost.blue a:hover { background: rgba(35,117,187,.6); -webkit-transition: background 0.4s linear; -moz-transition: background 0.4s linear; -ms-transition: background 0.4s linear; -o-transition: background 0.4s linear; transition: background 0.4s linear; } .signpost.yellow a { background: rgba(255,200,7,.0);} .signpost.yellow a:hover { background: rgba(255,200,7,.6); -webkit-transition: background 0.4s linear; -moz-transition: background 0.4s linear; -ms-transition: background 0.4s linear; -o-transition: background 0.4s linear; transition: background 0.4s linear; } .signpost.grey a { background: rgba(68,68,68,.0);} .signpost.grey a:hover { background: rgba(68,68,68,.6); -webkit-transition: background 0.4s linear; -moz-transition: background 0.4s linear; -ms-transition: background 0.4s linear; -o-transition: background 0.4s linear; transition: background 0.4s linear; } .signpost a h4 { display:block; padding:15px; margin:0; color:#fff; } .col-md-4 .signpost { height:215px; } .col-md-6 .signpost { height:148px; } .col-md-4 .signpost a {height:215px;} .col-md-6 .signpost a {height:148px;} /* MARKETING CONTENT -------------------------------------------------- */ /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { margin-bottom: 20px; text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; } img.tripAd {padding:0 0 80px 0; text-align:center; max-width:100%} .intro h2 {padding-top:20px;} .intro h4 {margin-top:0; font-weight:bold; padding-bottom:10px;} /* features ------------------------- */ .features-container {width:100%; margin:0; padding:0; overflow:hidden; background:white;} .featured {height:700px; } .feat-content {padding:100px 0 0 0;} .featured h2 {font-weight:bold;} .featured p {} .featured p.price { color:#ee7501;} .featured p.price span { font-size:2em; font-weight:bold;} .featured a.primary {display:inline-block; width:auto; padding:15px; color:white; background:#8cc84d; margin-top:30px;} .featured .cover{ color:white; padding:100px; position:absolute; width:800px;} .featured.left .cover {right:0; margin-right:-15px; text-align:right;} .featured .cover.experience { background-image:url(../img/feat-exp.jpg); background-size:cover; height:700px;} .featured .cover.safari {background-image:url(../img/feat-safari.jpg); background-size:cover; height:700px;} .featured .cover h3 {display:block; } .featured .cover h3 img {float:left; padding-right:15px;} .featured .cover h3 span { display:block; padding:10px;} .featured .cover.safari h3 {float:right; width:250px;} .featured .cover.safari h3 img {float:right; padding-left:15px;} .featured .cover.experience h3 {} /* Featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* Space out the Bootstrap
more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; } /* CAROUSEL TESTIMONIALS */ .testimonial-carousel { background:#8cc84d; height:350px; color:#fff; padding:0; margin:0; border:5px solid #8cc84d; } .testimonial-carousel.carousel-small {height:200px;} .testimonial-carousel .car-text { padding:60px; } .testimonial-carousel .car-text p.quote {font-size:36px;} .testimonial-carousel .car-text p.author { font-size:21px;} .testimonial-carousel .car-image { height:340px; overflow:hidden; } .testimonial-carousel .car-image img {width:100%; height:100%; } .carousel-nav img {cursor:pointer;} .testimonial-carousel:before {content:""; top:345px; position:absolute; display:block; width:0px; height:0px; border-left:30px solid #8cc84d; left:40%; border-bottom:30px solid transparent; } @media (max-width: 768px) { .testimonial-carousel {height:380px; border:0px none;} .testimonial-carousel .car-text { padding:40px 20px; } .testimonial-carousel:before {top:380px; } } /* Footer ------------------------- */ footer {background:#333; color:#fff; padding:100px 0; margin:0px 0 0 0; border-top:5px solid #ee7501; } footer .socialContainer {width:500px; margin:0 auto;} footer .socialContainer a {padding:0 20px;} footer .logo {padding-bottom:20px;} footer a {color:white; display:block; line-height:40px; margin:0 0 0 -15px; padding:0;} .address {padding:40px 0; background:white; color:#1a1a1a;} .address p {color:#1a1a1a;} .address p span {color:#ee7501;} .address a {color:#ee7501;} .address a.nicepond {color:#3ccbda;} img.footer-map {max-width:100%;} /* PRODUCTS -------------------------------------------------- */ .buy {display:block; width:100%; background:#fdfdfd; margin:0 0 30px 0; padding:0; } .orange .buy {border:1px dashed #ee7501;} .green .buy {border:1px dashed #8cc84d;} .blue .buy {border:1px dashed #2375bb;} .yellow .buy {border:1px dashed #ffc807;} .buy h3 {display:block; margin: 30px; text-align:center; font-weight:bold; } .buy h3 span {font-size:1.5em;} .orange .buy h3 {color:#ee7501;} .green .buy h3 {color:#8cc84d;} .yellow .buy h3 {color:#ffc807;} .blue .buy h3 {color:#2375bb;} .buy p {display:block; text-align:center; margin:0 30px 30px 30px;} img.wide {width:100%;} ul.product-details {padding-left:20px;} ul.product-details li {padding-bottom:20px;} /* Carousel */ #csel h3 {font-weight:bold; color:#fff;} /* Video */ .video-container {width:100%; height:650px;} .video-container iframe {width:100%; height:650px;} /* Contact module */ p.contact { font-weight:bold; padding-top:15px; margin-bottom:30px;} p.contact a {color:#ee7501; text-decoration:none;} p.contact a:hover {text-decoration:underline;} p.contact span.phone {color:#ee7501; font-size:28px;} .contactFullWidth {width:100%; margin:0px 0 0 0; padding:80px 0 80px 0; color:#fff; } .contactFullWidth.orange {background:#ee7501;} .contactFullWidth.green {background:#8cc84d;} .contactFullWidth.blue {background:#2375bb;} .contactFullWidth.yellow {background:#ffc807;} .contactFullWidth.grey {background:#444;} .contact-mod p.contact { font-size:1.5em; font-weight:normal; padding-top:0px; margin-bottom:0px; color:#fff} .contact-mod p.contact a {color:#fff;font-weight:bold; } .contact-mod p.contact span.phone {color:#fff; font-weight:bold; } /* Contact -------------------------------------------------- */ p.contact {font-weight:normal; font-size:24px;} p.phone { margin-bottom:0px;} p.email {} .theMap {width:100%; padding:0; margin:0;} .contactDetails {padding:0px 0 100px 0;} /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 768px) { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } } @media screen and (max-width: 991px) { /* TABLET AND MOBILE ONLY -------------------------------------------------- */ #hero .hero-content .logo {max-width:80% } #hero .hero-content .sharing {display:none} #hero {;} h1 {font-size:26px;} .avatar {max-width:60%;} .tall {height: 400px;} #hero { height: auto; min-height:510px; } #hero .hero-content { height: auto; min-height:510px; } .featured {height:auto; } .features-container .covers {display:none; height:1px; overflow:hidden;} .testimonial-carousel .car-image {display:none;} } @media screen and (max-width: 780px) { #hero .toolbar p.talk span {display:none;} #hero .toolbar p.talk { } } @media screen and (max-width: 500px) { #hero .toolbar p.talk { font-size:14px;} a.social { display:inline-block; width: 25px; height: 25px; background: white; padding:0px 0 0 0px; text-align:center; font-size:18px; margin-top:0; margin-right:5px; color:#333; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; } a.social:hover { background:#8cc84d; color:#fff;} }