/*###########################################################################*/
/*################################### Reset #################################*/
/*###########################################################################*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
html{ /* Remove 300 ms delay on touchscreens - IE */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
address{
font-style: normal;
}
body{
line-height: 1;
-webkit-text-size-adjust: none; /* avoid automatic text adjustement in safari on mobiles */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* remove clicked menu hightlight in iphone */
}
ul{
padding:0px;
}
ul li{
list-style-type: none;
}
a:link, a:visited{
text-decoration:none;
}
a img{
border:none;
display:block;
}
a{
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
iframe{
display:block;
}
/*###########################################################################*/
/*################################# Sprites #################################*/
/*###########################################################################*/
ul.icon li:before,
blockquote:before,
blockquote:after,
.phone:before,
.email:before,
.time:before,
.location:before,
.tripAdvisor,
.facebook,
.wifi,
.qr:before,
.collapsible div,
.inputWrap .label div,
.labelRadio div,
.labelCheck div,
.owl-theme .owl-controls .owl-buttons div,
#topArrow,
.imagelightbox-arrow,
#imagelightbox-close,
.moButton div,
.moArrowR,
.moArrowL,
.spriteIcon,
#offMenuButton div,
#offMenuClose,
.closingCross,
.menuIcon,
.offPanel ul > li.menuFooter > a,
.varGraphics,
#awardsLayer a.taWinner{
background: url('img/sprite.png');
background-size:800px 800px;
background-repeat: no-repeat;
}
.supplier{
background: url('img/suppliers.png');
background-size:1200px 1200px;
background-repeat: no-repeat;
}
/*.spriteIcon{
width: 25px; height: 25px;
background-position: -75px -25px;
}*/
/*###########################################################################*/
/*################################ Preloader ################################*/
/*###########################################################################*/
#preloadingPage,
#contentPreloader{
width: 0;
height: 0;
line-height: 0;
border: 30px solid transparent;
border-radius: 30px;
border-top: 30px solid;
border-bottom: 30px solid;
position: fixed;
z-index: 999;
right: 50%;
top: 50%;
margin-right: -30px;
margin-top: -30px;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
visibility:collapse;
}
#preloadingPage.activity{
/*display:block;*/
visibility:visible;
}
#contentPreloader{
visibility:visible;
z-index: 0;
position: absolute;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
/*###########################################################################*/
/*################# Graphic Acceleration, Font Flickering ###################*/
/*###########################################################################*/
/*.touchscreen .container,*/
.touchscreen .slice,
/*.site-wrap,*/
#offCanevas{ /* Graphic acceleration on touchscreens */
-webkit-transform: translate3d(0, 0, 0); /* Can make Chrome Mobile to crash */
/*-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);*/
transform: translate3d(0, 0, 0);
/*-webkit-transform: translateZ(0);*/
/*-webkit-font-smoothing: antialiased;*/
/*-webkit-transform: rotateZ(360deg);*/
}
body{
-webkit-font-smoothing: antialiased; /* Fix Font Flickering With Slideshow, CSS and JS Animations */
/*-webkit-backface-visibility: hidden; /* Fix Flickering With Animations */
}
/* Background attachment */
/*.touchScreen .fixedBackgroundContainer{
background-attachment:scroll;
}
.touchScreen .backgroundCoverContainer{
background-size: 100% auto;
background-repeat:no-repeat;
}*/
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}
/*###########################################################################*/
/*################################## Grid ###################################*/
/*###########################################################################*/
.megaContainer{
max-width:1920px;
margin:0 auto;
position:relative;
}
.touchScreen .megaContainer{ /* Any Touch Screens */
overflow:hidden; /* Avoid horizontal touch scroll on mobiles (with off canevas menu opened) */
}
#contentStartAnchor{
display:block;
position:absolute;
width:10px;
height:10px;
}
.displayNone{
display:none;
}
/* ----- container */
.container{
width:100%;
float:left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.slice{
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.slice:after{ /* Fix float parent collapsing */
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.limited{
/*max-width:1300px;*/
/* max-width:1190px; /* for testing purpose */
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
max-width:1174px; /* 1191 - scoll bar width 17px */
}
.limitedLarge{
max-width:1350px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
.limitedSmall{
max-width:850px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
.limitedMedium{
max-width:980px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
.limitedTiny{
max-width:600px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
.limitedMicro{
max-width:500px;
width:100%; /* In case of imbricated limited sections, or when it is in a smaller container */
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.limited{
max-width:963px; /* 980 - scoll bar width 17px */
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ----------------------------------------- Flex Column System - Equal Height */
.flexCol{
display: flex;
align-items: stretch;
flex-flow:row wrap;
}
.flexCol > div{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flexCol.twoCol > div{
width:50%;
}
.flexCol.threeCol > div{
width:33%;
}
.flexCol.threeCol > div:nth-child(2){
width:34%;
}
.flexCol.fourCol > div{
width:25%;
}
/* Demo */
#columnLayout .flexCol > div:nth-child(1){
background-color: #009966;
}
#columnLayout .flexCol > div:nth-child(2){
background-color: #006699;
}
#columnLayout .flexCol > div:nth-child(3){
background-color: #996666;
}
#columnLayout .flexCol > div:nth-child(4){
background-color: #CC9933;
}
/* Special Cases */
#imgGal > div:nth-child(1){
width:60%; /* 300px */
}
#preFooterF > div:nth-child(1){
width:60%; /* 300px */
}
#preFooterG > div:nth-child(2){
width:60%; /* 300px */
}
#preFooterF > div:nth-child(2),
#imgGal > div:nth-child(2),
#preFooterG > div:nth-child(1),
#preFooterG > div:nth-child(3){
flex: 1;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.flexCol.fourCol > div{
width:50%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.flexCol.fourCol > div{
width:50%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.flexCol.twoCol > div,
.flexCol.threeCol > div,
.flexCol.threeCol > div:nth-child(2),
.flexCol.fourCol > div,
#imgGal > div:nth-child(1){
width:100%;
}
#imgGal > div:nth-child(1),
#preFooterF > div:nth-child(1),
#preFooterG > div:nth-child(2),
#preFooterG > div{
width:100%;
}
}
/* ----------------------------------------- CSS3 Column System - Text and inline elements */
#cssColumnLayout{
text-align:left;
}
.cssCol{
column-gap: 60px;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-rule: 1px solid lightblue;
-webkit-column-rule: 1px solid lightblue;
-moz-column-rule: 1px solid lightblue;
text-align:left;
}
.cssCol.twoCol{
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
.cssCol.threeCol{
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
}
.cssCol.fourCol{
column-count: 4;
-webkit-column-count: 4;
-moz-column-count: 4;
}
.cssCol > h2 {
-webkit-column-span: all;
column-span: all;
/* Not supported in Firefox */
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.cssCol.twoCol,
.cssCol.threeCol,
.cssCol.fourCol{
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.cssCol.twoCol,
.cssCol.threeCol,
.cssCol.fourCol{
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
}
/*###########################################################################*/
/*################################ Global Styles ############################*/
/*###########################################################################*/
body{
font-family: 'Open Sans', sans-serif; /* Google Font Imported */
font-size: 1.1em;
line-height: 1.6;
color: #FFFFFF;
background-color: #2f3437;
overflow-x: hidden; /* Fix bug in IE */
background-image: url(img/asfalt-light.png);
}
/* --------------------------- typo + paragraphs */
a,
.collapsible{
color: #F1CA24;
}
a:hover,
.collapsible:hover{
color: #F1CA24;
text-decoration:underline;
}
p{
margin-bottom:1em;
}
h1, h2, h3, h4{
font-size:1.8em;
font-weight:normal;
}
h2{
font-size:1.6em;
}
h3{
font-size:1.4em;
}
h4{
font-size:1.2em;
}
/* --------------------------- colors */
.colorA{
background-color: #707A85;
}
.colorB{
background-color: #474E54;
}
.colorC{
background-color: #F1CA24;
}
.colorD{
background-color: #67CCF7;
}
.colorE{
background-color: #E07A30;
}
/* --------------------------- dough */
/* Columns dough */
.doughCol{
padding:0 30px;
}
/* Double dough (with color change from one slice to the next) */
.doubleDoughH1{
padding:40px 0 100px 0;
}
.doubleDoughH2{
padding:70px 0 100px 0;
}
.doubleDough{
padding:100px 0;
}
/* Single dough (just regular spacing between slices) */
.singleDough{
padding:100px 0 0 0; /* better at top for auto-scrolling buttons */
}
.singleDoughBottom{
padding:0 0 100px 0;
}
.singleDoughH2{
padding:70px 0 0 0;
}
.singleDoughH1{
padding:40px 0 0 0;
}
/* Latteral dough (default latteral margin starts on mobiles) */
.latDough{
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.latDough{
padding-left:30px;
padding-right:30px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.latDough{
padding-left:30px;
padding-right:30px;
}
.doughCol{
padding:0;
}
}
/* ------ special mobile */
.mobOnly{ /* usage:
*/
display:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.noTab{ /* usage:
*/
display:none;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.mobOnly{
display:inline-block;
}
.noMob{ /* usage:
*/
display:none;
}
}
/*###########################################################################*/
/*######################## Page to Page Transitions #########################*/
/*###########################################################################*/
/* --- content + transitions */
#main{
position:relative;
}
#main .ctTemp{
position: absolute;
top: 0;
left: 0;
margin-top:0px;
opacity:1;
width: 100%;
z-index: 2;
-webkit-transition: opacity 500ms ease; /* use the exact name of the animated property -> fix IE bug flickering during transitions */
transition: opacity 500ms ease; /* easeInQuad cubic-bezier(0.550, 0.085, 0.680, 0.530) */
}
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*####################################################### Frame + Persistent Elements ########################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/* ------------------------------------------------------------------------------ Logo */
.logo{
width:200px;
margin: auto;
display:block;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
transform: translate3d(0, 0, 0);
line-height:0;
}
.logo img,
.mobileLogo img{
width:100%;
}
/* special page */
.videopage .logo,
.imagepage .logo,
.homepage .logo{
width: 280px;
}
/* when scrolled */
.scrolledPage .logo,
.imagepage .scrolledPage .logo,
.videopage .scrolledPage .logo,
.homepage .scrolledPage .logo{
width:130px;
}
/* ---- On mobiles */
.mobileLogo{
width: 200px;
display: none;
position: absolute;
top: 80px;
left: 50%;
transform: translate(-50%,0);
-webkit-transform: translate(-50%, 0);
z-index:800;
}
/* special page */
.imagepage .mobileLogo{
width: 280px;
top: 130px;
}
.videopage .mobileLogo{
}
.homepage .mobileLogo{
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.logo{
display:none;
}
.mobileLogo{
display:block;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.logo{
display:none;
}
.mobileLogo{
display:block;
max-width:80%;
top: 80px;
}
.imagepage .mobileLogo{
top: 80px;
}
.homepage .mobileLogo{
top: 140px;
}
}
/* ------------------------------------------------------------------------------ Header */
#header{
position: fixed;
z-index: 999; /* need a high Z-index to avoid repaint on page change */
background-color: rgba(63,69,75,0);
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
max-width: 1920px;
transform: translate3d(0, 0, 0);
padding: 20px 0;
}
/* special page */
.homepage #header{
padding-top: 50px;
}
.videopage #header{
padding-top: 100px;
}
.imagepage #header{
padding-top: 130px;
}
/* when scrolled */
#header.scrolledPage,
.imagepage #header.scrolledPage,
.videopage #header.scrolledPage,
.homepage #header.scrolledPage{
padding: 5px 0;
background-color: rgba(63,69,75,1); /*background-image: url(img/60-lines.png);*/
/*background: url(img/60-lines.png), linear-gradient(to bottom, #4B5055 0%,#3F454B 100%);*/
}
/* social buttons */
.socialTop{
position:absolute;
top:10px;
right:10px;
}
.socialTop a{
display:inline-block;
width: 41px; height: 41px;
background-position: -324px -424px;
margin:0 0 0 10px;
}
.socialTop a.faceb{
background-position: -375px -425px;
}
.socialTop a.loc{
background-position: -426px -473px;
}
.socialTop a.phon{
background-position: -374px -475px;
}
.socialTop a.tripa{
width: 69px; height: 41px;
background-position: -426px -425px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#header{
min-height: 60px;
background-color: #2f2f2f;
padding:0;
}
.imagepage #header{
padding-top: 0px;
background-color: #2f2f2f;
}
/* special page */
.homepage #header,
.videopage #header,
.imagepage #header{
padding-top: 0;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#header{
min-height: 60px;
background-color: #2f2f2f;
padding:0;
}
.imagepage #header{
padding-top: 0px;
background-color: #2f2f2f;
}
/* special page */
.homepage #header,
.videopage #header,
.imagepage #header{
padding-top: 0;
}
}
/* ------------------------------------------------------------------------------ Main (Frame) */
#main{
}
.homePage #main{
}
/* ------------------------------------------------------------------------------ Suppliers Layer */
.simpson-bay-shoppage #suppliersLayer,
.marigot-shoppage #suppliersLayer{
display:none;
}
#suppliersLayer{
background-color: #F1CA24;
padding: 90px 0 120px 0;
background: url(img/60-lines.png), radial-gradient(ellipse at center, #f1ca24 0%, #fca400 100%);
/*background-image: url(img/60-lines.png);*/
}
#suppliers{
text-align:center;
}
.supplier{
display: inline-block;
width: 125px;
height: 125px;
background-position: 0px -899px;
padding: 10px;
border-radius: 50%;
background-origin: content-box;
margin:5px;
}
#suppliersLayer .supplier{
background-color: rgba(238,215,123,0.2);
}
#suppliersLayer .supplier:hover{
background-color: rgba(238,215,123,0.6);
}
.supplier:hover{
}
.supplierText{
display: inline-block;
color: #FFFFFF;
padding: 60px 0 0 0;
}
.supplierText a{
color: #E29703;
background-color: #FFFFFF;
padding: 2px 10px;
border-radius: 4px;
}
.supplierText a:hover{
color: #FFFFFF;
text-decoration: none;
background-color: #313539;
}
.supplier.treck{
background-position: -750px -149px;
}
.supplier.specialized{
background-position: -751px 0px;
}
.supplier.giant{
background-position: -600px -524px;
}
.supplier.cannondale{
background-position: 0px 0px;
}
.supplier.scott{
background-position: -152px -150px;
}
.supplier.look{
background-position: -449px -525px;
}
.supplier.cube{
background-position: -152px -301px;
}
.supplier.bontrager{
background-position: -1px -301px;
}
.supplier.mavic{
background-position: -299px -524px;
}
.supplier.rockshox{
background-position: -151px -601px;
}
.supplier.fox{
background-position: -749px -300px;
}
.supplier.camelbak{
background-position: -1px -150px;
}
.supplier.perlizumi{
background-position: -450px -375px;
}
.supplier.desoto{
background-position: -299px -375px;
}
.supplier.tyr{
background-position: -450px -225px;
}
.supplier.gu{
background-position: -152px -450px;
}
.supplier.cliff{
background-position: -151px 0px;
}
.supplier.garneau{
background-position: -749px -448px;
}
.supplier.giro{
background-position: -600px -373px;
}
.supplier.kask{
background-position: -300px -224px;
}
.supplier.salomon{
background-position: 0px -601px;
}
.supplier.evoc{
background-position: -600px -224px;
}
.supplier.continental{
background-position: -1px -450px;
}
.supplier.azr{
background-position: -751px -599px;
}
.supplier.roval{
background-position: -750px -750px;
}
.supplier.rolf{
background-position: -600px -825px;
}
.supplier.bell{
background-position: -450px -826px;
}
.supplier.sidi{
background-position: -449px -674px;
}
.supplier.campagnolo{
background-position: -600px -674px;
}
.supplier.sram{
background-position: -299px -825px;
}
.supplier.shimano{
background-position: -300px -674px;
}
.supplier.opticnerve{
background-position: -149px -750px;
}
.supplier.zipp{
background-position: -149px -899px;
}
.supplier.garmin{
background-position: 0 -751px;
}
.supplier.hoka{
background-position: -300px -974px;
}
.supplier.treckBig{
width: 200px; height: 200px;
background-position: -525px 0px;
}
.supplier.specializedBig{
width: 200px; height: 200px;
background-position: -300px 0px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#suppliersLayer{
/*padding: 60px 0 40px 0;*/
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#suppliersLayer{
/*padding: 60px 0 40px 0;*/
}
.supplierText{
line-height:2;
padding-left:30px;
padding-right:30px;
}
}
/* ------------------------------------------------------------------------------ Cards Layer */
#cardsLayer{
background-color: #FFFFFF;
padding: 0; /*background: radial-gradient(ellipse at center, #ffffff 0%,#363C41 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*background-image:url(conti/blury/bg-26.jpg);
background-size:cover;*/
background-image: url(img/60-lines.png);
}
.cleargrey{
background-color: #707A85;
}
.darkgrey{
background-color: #474E54;
}
.blue{
background-color: #67CCF7;
}
.flexCard{
display: flex; /* flex, inline-flex */
/* flex-direction: row; /* row, column, row-reverse, column-reverse */
/* flex-wrap: wrap; /* wrap ( multi line, left to right), nowrap (force single line, left to right), wrap-reverse (multi line, right to left) */
flex-flow:row wrap; /* join 2 previous properties in one line */
justify-content: center; /* flex-start, flex-end, center, space-between, space-around (repartition on main axis) */
align-items: flex-start; /* flex-start, flex-end, center, baseline, stretch (repartition on cross axis)*/
align-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, stretch (on multi lines -> the way multilines are packed ) */
}
.flexCard > a{ /* default - "justify-content", "flex-wrap", "" can influence size of items */
width: 25%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*margin: 0.5%;
/*margin: 1.7vw 2% 1.7vw 2%;*/
/*border-radius:4px;*/
text-decoration:none;
color:inherit;
background-image: url(img/60-lines.png);
}
.flexCard > a:nth-child(4){
display:block;
}
.flexCard > a .imgCt img{
width:100%;
max-width:100%;
display:block;
/*border-top-left-radius:4px;
border-top-right-radius:4px;*/
}
.flexCard > a:hover .imgCt img{
opacity:0.8;
}
.flexCard > a .textCt{
padding: 25px 30px;
height:180px;
display:flex;
align-items: center;
}
/* colors + styles */
.flexCard{
color:#FFFFFF;
}
.flexCard h2{
font-family: 'Anton', sans-serif;
font-size: 2.4em;
font-weight: normal;
line-height: 1.4;
text-transform: uppercase;
}
.flexCard .colorA:hover{
background-color: #646F79;
}
.flexCard .colorD:hover{
background-color: #40BEF4;
}
.flexCard .colorC:hover{
background-color: #EABE0F;
}
.flexCard .colorB:hover{
background-color: #3D4247;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
/*.flexCard > a .textCt{
height:340px;
}*/
.flexCard > a{
width:33.33%;
}
.flexCard > a:nth-child(4){
display:none;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.flexCard > a{
width:50%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.flexCard > a{
width:100%;
margin: 0;
}
.flexCard > a:nth-child(4){
display:none;
}
}
/* ------------------------------------------------------------------------------ News Layer */
#newsLayer{
padding: 160px 0;
text-align: center;
color: #363C41;
position:relative;
overflow:hidden;
background-color:#ffffff;
}
.newsLayerBG{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
/*width:100%;
height:100%;*/
}
.newsLayerBG > div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url(conti/tom.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#newsLayer h2{
margin:0 0 20px 0;
font-family: 'Anton', sans-serif;
font-size: 3em;
font-weight: normal;
line-height: 1;
text-transform: uppercase;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
/*#newsLayer{
padding: 60px 0 90px 0;
}*/
.newsLayerBG > div{
opacity:0.7;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.newsLayerBG > div{
opacity:0.8;
}
#newsLayer{
padding: 90px 0 90px 0;
}
}
/* ------------------------------------------------------------------------------ Contact / Shops Layer */
#shopsLayer{
background-color: #586169;
text-align: center;
position:relative;
}
.shopsContact{
/*background-image: url(img/60-lines.png);*/
background: url(img/60-lines.png), radial-gradient(ellipse at center, #586169 0%, #313539 100%);
padding: 100px 0 70px 0;
}
.toursContact{
padding: 60px 0 40px 0;
position:relative;
overflow:hidden;
}
.toursContactBG{
position:absolute;
bottom:0;
left: 0;
right:0;
top:0;
}
.toursContactBG > div{
position:absolute;
bottom:0;
left: 0;
background-image: url(conti/various/pic-27.jpg);
background-size: cover;
width:100%;
min-height: 871px; /* 641 + 230 (scroll effect margin) */
}
.toursContactTexture{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width:100%;
height:100%;
background-image: url(img/dark-wall.png);
}
/*.parallax{
-webkit-transition:background-position .1s linear;
-moz-transition:background-position .1s linear;
-o-transition:background-position .1s linear;
transition:background-position .1s linear;
}*/
#shopsLayer h1,
#shopsLayer h2{
font-family: 'Anton', sans-serif;
font-size: 2em;
font-weight: normal;
line-height: 1;
color: #FFFFFF;
text-transform: uppercase;
}
#shopsLayer h1{
font-size: 2.4em;
}
#shopsLayer h2{
line-height: 0.9;
margin-top: -25px;
color: #F1CA24;
}
#shopsLayer .twoCol > div:first-child{
border-right-color: #3F464B;
border-right-style: solid;
border-right-width: 1px;
position: relative;
}
/*#shopsLayer .twoCol > div:first-child:after{
content: '';
display: block;
width: 1px;
position: absolute;
height: 100%;
top: 0;
right: 0;
background-color: #40464D;
}*/
#shopsLayer a.mainTitleLk:hover{
text-decoration:none;
}
.titleSlice{
margin-bottom:80px;
}
.logotxt{
display:inline-block;
max-width:300px;
}
.logotxt img{
max-width:100%;
}
#shopsLayer h2 span{
font-size: 0.8em;
text-transform:capitalize;
}
/* contact box */
.contactInfo{
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 35px;
text-align: center;
width:auto;
}
.email,
.location{
position: relative;
display: inline-block;
padding-left: 35px;
}
/* ---------------- Phone(s) */
.phone{
line-height:1.2;
display:inline-block;
position: relative;
}
.phone span{
font-size: 1.5rem;
vertical-align:0px;
display:inline-block;
}
.phone span:first-child{
font-size: 1rem;
vertical-align: 2px;
margin-right: 0.4rem;
font-style: italic;
}
/*.phone:before{
position:absolute;
content:'';
background-position: -225px -150px;
width:25px;
height:50px;
left:0;
top:0;
}*/
.phone.secondary{
font-size:0.9em;
}
.phone.secondary:before{
display:none;
}
/* ----------------- Email */
.email{
margin-top:1.5em;
}
.email:before{
position:absolute;
content:'';
background-position: -225px -225px;
width:25px;
height:25px;
left:0;
top:2px;
}
/* ------------- Time */
.time{
margin-top:2.5em;
position:relative;
display:inline-block;
}
.time:before{
position:absolute;
content:'';
background-position: -275px -225px;
width:26px;
height:26px;
left:50%;
top:-27px;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
}
/* ---------------- Location */
.location{
margin-top:2.5em;
}
.location:before{
position:absolute;
content:'';
background-position: -275px -150px;
width:25px;
height:59px;
left:0;
bottom:-9px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.logotxt{
max-width:240px;
}
.toursContactBG > div{
background-position: 60% 10px;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#shopsLayer{
padding: 0;
}
.toursContactBG > div{
background-position: 60% 140px;
}
.logotxt{
max-width:240px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#shopsLayer{
padding: 0;
}
.logotxt{
max-width:240px;
margin-bottom:5px;
}
.flexCol > div:first-child .contactInfo{
padding: 35px 35px 100px 35px;
}
.toursContactBG > div{
background-position: 40% 180px;
}
.email{
padding: 0;
margin:0 0 10px 0;
}
.email:before{
display:none;
}
}
/* ------------------------------------------------------------------------------ Jersey Layer */
#jerseyLayer{
background-color: #67CCF7;
padding: 90px 0;
/*background-image: url(img/60-lines.png);*/
background: url(img/60-lines.png), radial-gradient(ellipse at center, #67CCF7 0%, #0CA0E0 100%);
}
/* Flex Cols */
#jerseyLayer > .slice > div:nth-child(1){
width:60%;
min-width:60%;
}
#jerseyLayer > .slice > div:nth-child(2){
flex: 1;
padding:0 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display:flex;
align-items: center;
}
.jerseyImage img{
display:inline-block;
margin-left:-100px;
margin-top:-20px;
max-width:100%;
}
#jerseyLayer h2{
font-family: 'Anton', sans-serif;
font-weight: normal;
color: #FFFFFF;
text-transform: uppercase;
font-size:2.4em;
line-height:1;
margin:0 0 15px 0;
}
#jerseyLayer b{
font-size:1.4em;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
#jerseyLayer > .slice > div:nth-child(1){
width:50%;
min-width:50%;
}
.jerseyImage img{
margin-left:-70px;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#jerseyLayer > .slice > div:nth-child(1){
width:100%;
min-width:100%;
}
#jerseyLayer > .slice > div:nth-child(2){
padding:30px 60px 90px 60px;
}
#jerseyLayer{
padding: 0;
}
.jerseyImage img{
margin-left:0;
margin-top:40px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#jerseyLayer > .slice > div:nth-child(1){
width:100%;
min-width:100%;
}
#jerseyLayer > .slice > div:nth-child(2){
padding:30px 40px 60px 40px;
}
#jerseyLayer{
padding: 0;
}
.jerseyImage img{
margin-left:-10px;
margin-top:40px;
}
}
/* ------------------------------------------------------------------------------ Strava Layer */
#stravaLayer{
text-align: center;
position: relative;
padding: 150px 0 300px 0;
overflow: hidden;
background: url(img/60-lines.png), radial-gradient(ellipse at center, #586169 0%, #313539 100%);
}
#stravaLayer h2{
font-family: 'Anton', sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 2.6em;
line-height: 1;
margin: 10px 0 20px 0;
color: #FFFFFF;
}
.stravaLayerBG,
.stravaLayerTexture{
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-image: url(conti/sxm-strava-i.png);
background-size:cover;
background-position:50% 100%;
}
.stravaLayerTexture{
background-image: none;
background-size: auto;
background-repeat: repeat;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#stravaLayer{
padding: 120px 0 200px 0;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#stravaLayer{
padding: 100px 0 130px 0;
}
}
/* ------------------------------------------------------------------------------ Trip Advisor Layer */
#awardsLayer{
background-color: #F1CA24;
padding: 90px 0;
/*background-image: url(img/60-lines.png);*/
background: url(img/60-lines.png), radial-gradient(ellipse at center, #586169 0%, #313539 100%);
text-align: center;
}
.kayakLink{
display:inline-block;
margin:0 0 70px 0;
}
/* --------------- circles*/
a.ratingCircles{
display: inline-block;
margin:10px 0 30px 0;
}
a.ratingCircles span{
display:inline-block;
}
.circles{
display:inline-block;
margin:0;
padding:0;
}
.circle{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
padding: 3px;
border-radius: 50%;
list-style: none;
border: 3px solid #4EA029;
overflow: hidden;
}
.circle.full:before{
content: '';
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
vertical-align: top;
background-color: #4EA029;
}
.circle.half:before{
content: '';
display: inline-block;
width: 100%;
height: 130%;
margin: -3px 0 0 -50%;
vertical-align: top;
background-color: #4EA029;
}
.circle:after{
content:'';
position:absolute;
top:0;
left:0;
width:calc(100% - 6px);
height:calc(100% - 6px);
border:3px solid #fff;
border-radius:50%;
}
/* ------------- TA awards*/
#awardsLayer h2{
font-family: 'Anton', sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 2.6em;
line-height: 1;
margin: 10px 0 20px 0;
color: #FFFFFF;
}
#awardsLayer a.taWinner{
display: inline-block;
margin: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1.55rem;
padding: 0;
background-color: #499A27;
border-radius: 3px;
color: #FFFFFF;
width: 207px;
height: 121px;
background-position: -574px -150px;
}
#awardsLayer a.taWinner:hover{
text-decoration: none;
background-color: #448E24;
color: #FFFFFF;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/* ------------------------------------------------------------------------------ Eco Layer */
#ecoLayer{
padding: 100px 0 130px 0;
position: relative;
text-align: center;
color: #FFFFFF;
overflow:hidden;
background-color:#373b40;
}
.ecoLayerBG{
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
}
.ecoLayerBG > div{
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
background: url(conti/various/treck-c.jpg);
background-size: cover;
background-position: 50% bottom;
}
.ecoLayerTexture{
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
background-image: url(img/subtle-dots.png);
}
#ecoLayer h2{
font-family: 'Anton', sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 2.6em;
line-height: 1;
margin: 10px 0 20px 0;
color: #F1CA24;
}
.iconPic{
max-width:400px;
display: inline-block;
width: 100%;
}
.iconPic img{
max-width:100%;
}
.illustration.sxm{
background-position: -424px -1075px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.ecoLayerBG > div{
opacity:0.5;
}
}
/* ------------------------------------------------------------------------------ Share Layer */
#shareLayer{
padding: 100px 0;
position: relative;
text-align: center;
color: #FFFFFF;
overflow: hidden;
background-color:#373b40;
}
.shareLayerBG{
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
}
.shareLayerBG > div{
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
background: url(conti/various/pic-25.jpg);
background-size: cover;
background-position: 50% bottom;
/*background-position: 50% 50%;*/
}
.shareLayerTexture{
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
background-image: url(img/subtle-dots.png);
}
#shareLayer h2{
font-family: 'Anton', sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 2.6em;
line-height: 1;
margin: 10px 0 20px 0;
color: #F1CA24;
}
.iconPic{
max-width:400px;
display: inline-block;
width: 100%;
}
.iconPic img{
max-width:100%;
}
.illustration.sxm{
background-position: -424px -1075px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.shareLayerBG > div{
background-position: 0;
opacity:0.5;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.shareLayerBG > div{
background-position: 0;
opacity:0.5;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.shareLayerBG > div{
background-position: 0;
opacity:0.5;
}
}
/* ------------------------------------------------------------------------------ Newsletter Layer */
#newsletterLayer{
background-color: #67CCF7;
padding: 90px 0;
/*background-image: url(img/60-lines.png);*/
background: url(img/60-lines.png), radial-gradient(ellipse at center, #67CCF7 0%, #0CA0E0 100%);
}
#newsletterLayer > .slice > div{
width:50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#newsletterLayer > .slice > div:nth-child(1){
text-align:right;
}
#newsletterLayer > .slice > div:nth-child(2){
text-align:left;
padding:5px 0 0 30px;
}
#newsletterLayer > .slice > div form{
text-align:left;
}
#newsletterLayer > .slice > div form input[type=text]{
margin:10px 0 0 0;
border-radius:4px;
}
#newsletterLayer > .slice > div form .displayErrorMargins{
margin:10px 0 0 0;
}
#newsletterLayer > .slice > div form input[type=submit]{
margin:10px 0 0 0;
}
#newsletterLayer h2{
font-family: 'Anton', sans-serif;
font-weight: normal;
text-transform: uppercase;
font-size: 2.4em;
line-height: 1;
margin: 10px 0 20px 0;
color: #FFFFFF;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#newsletterLayer > .slice > div:nth-child(1){
padding:0 0 0 90px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#newsletterLayer > .slice > div{
width:100%;
}
#newsletterLayer > .slice > div:nth-child(1){
text-align:center;
}
#newsletterLayer > .slice > div:nth-child(2){
text-align:center;
padding:10px 0 0 0;
}
#newsletterLayer > .slice > div form{
text-align:center;
}
}
/* ------------------------------------------------------------------------------ Footer Menu */
#footerMenu{
position: relative;
background-color: #425763;
padding: 150px 0 60px 0;
text-align: center;
}
.footerMenuBack{
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-image: url(conti/fred.jpg);
background-size: cover;
background-position: top;
background-color: #47575E;
}
.footerMenuTexture{
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-image: url(img/txture.png);
}
#footerMenu a.inPageButtons{
background-color: transparent;
color: #FFFFFF;
}
#footerMenu a.inPageButtons:hover{
background-color: #F1CA24;
color: #363C41;
/*color: rgba(88,97,105,1);*/
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.footerMenuBack {
background-position:-760px 50%;
}
#footerMenu a.inPageButtons{
background-color:rgb(44, 55, 62);
}
#footerMenu{
text-align: left;
}
}
/* ------------------------------------------------------------------------------ Footer */
#footer{
background-color: #F1CA24;
padding: 30px 0 80px 0;
text-align: center;
/*background-image: url(img/60-lines.png);*/
background: url(img/60-lines.png), radial-gradient(ellipse at center, #f1ca24 0%, #fca400 100%);
}
.logoFooter{
width:200px;
display:inline-block;
}
.logoFooter img{
max-width:100%;
}
#realFooter{
padding-top:40px;
line-height:1.2;
}
#realFooter a{
color: #FFFFFF;
}
#realFooter a:hover{
color: #FFFFFF;
}
#realFooter a.litemoon{
color: #eed68c;
text-decoration:none;
transition: color 0.4s ease;
}
#realFooter a.litemoon:hover{
color: #ffffff;
}
.litemoonFooter{
}
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/*############################################################# In-Pages Styles ##############################################################*/
/*############################################################################################################################################*/
/*############################################################################################################################################*/
/* ------------------------------------------------------------------------------ Typical Pages */
.ctWrapper{
background-color: #586169;
background-image: url(img/60-lines.png);
color: #FFFFFF;
}
.pageHeading{
padding-top: 190px; /* Size of the header when not scrolled down */
padding-bottom:50px;
background-image: url(img/60-lines.png);
color: #FFFFFF;
}
.pageHeadingBg{
background: url(img/60-lines.png), radial-gradient(ellipse at center, #586169 0%, #313539 100%);
background-size: cover;
background-position: center center;
}
.headingLong{
min-height: 600px;
}
/* bgPics heading variations */
.pageHeadingBg.variationA{
background-image: url(conti/blury/bg-14.jpg);
background-position: top center;
}
.pageHeadingBg.variationB{
background-image: url(conti/blury/bg-25.jpg);
background-position: top center;
}
.pageHeadingBg.variationC{
background-image: url(conti/various/Cover-photo.jpg);
background-position: top center;
}
.pageHeadingBg.variationD{
background-image: url(conti/blury/bg-48.jpg);
}
.pageHeadingBg.variationE{
background-image: url(conti/blury/bg-16.jpg);
}
.pageHeadingBg.variationF{
background-image: url(conti/blury/bg-21.jpg);
}
.pageHeadingBg.variationG{
background-image: url(conti/blury/bg-45.jpg);
}
.pageHeadingBg.variationH{
background-image: url(conti/blury/bg-49.jpg);
}
.pageHeadingBg.variationDark .pageHeading{
min-height:600px;
}
.pageHeadingBg.variationE{
background-image: url(conti/blury/bg-16.jpg);
}
/* regular pages section (slices) colors */
.blueBack{
background: url(img/60-lines.png), radial-gradient(ellipse at center, #67CCF7 0%, #0CA0E0 100%);
}
.blackBack{
background: url(img/60-lines.png), radial-gradient(ellipse at center, #586169 0%, #313539 100%);
}
.yellowBack{
background: url(img/60-lines.png), radial-gradient(ellipse at center, #f1ca24 0%, #fca400 100%);
}
.regularPage{
text-align: center;
min-height: 600px;
}
/* titles */
.regularPage h1,
.regularPage h2,
.regularPage h3,
.regularPage h4{
color: #FFFFFF;
font-family: 'Anton', sans-serif; /* Google Font Imported */
font-weight: normal;
line-height: 1;
text-transform: uppercase;
}
.regularPage h1{
width: 100%;
font-weight: bold;
margin: 40px 0 30px 0;
font-size: 2.6em;
}
.pageHeading h1,
.pageHeading h2{
margin: 0;
color: #FFFFFF;
}
.regularPage h2{
font-size: 2.3em;
}
/* font sizes */
.smallerInfo{
font-size:0.9em;
}
.tinyInfo{
font-size:0.8em;
}
sup{
font-size: 0.7em;
vertical-align: super;
}
sub{
font-size: 0.7em;
vertical-align: sub;
}
/* paragraph alignement */
.textAlignLeft{
text-align:left;
}
.textAlignRight{
text-align:right;
}
.textAlignCenter{
text-align:center;
}
/* buttons */
a.inPageButtons,
a.inPageButtonsB{
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
color: #363C41;
margin: 20px 10px 0 10px;
background-color: #F1CA24;
/*background: -webkit-repeating-linear-gradient(-50deg,#F1CA24,#F1CA24 25px,#E1B70F 25px,#E1B70F 50px);*/
/*background: repeating-linear-gradient(-50deg,#E07A30,#E07A30 20px,#E38A48 20px,#E38A48 40px);*/
font-weight: bold;
}
/* tours */
#topTourMenu a.inPageButtons{
background-color: #f1ca249c;
}
#topTourMenu a.inPageButtons.isoActive {
background-color:#F1CA24;
}
#topTourMenu a.inPageButtons.isoActive:hover {
background-color:#F1CA24;
}
#toursMenu,
#rentalsMenu{
display:none;
}
a.inPageButtons:hover,
a.inPageButtonsB:hover{
text-decoration: none;
background-color: #E3B90F; /*background: repeating-linear-gradient(-50deg,#D86F21,#D86F21 20px,#DF782D 20px,#DF782D 40px);*/
}
a.inPageButtonsB{
background-color: #2E3438;
color: #FFFFFF;
}
a.inPageButtonsB:hover{
background-color: #262B2F;
}
a.inPageButtons.alignLeftButton,
a.inPageButtonsB.alignLeftButton{
margin:20px 20px 0 0;
}
a.inPageButtons > div.menuIcon,
a.inPageButtonsB > div.menuIcon{
vertical-align:center;
display:inline-block;
margin:0 8px -7px 0;
width: 26px; height: 26px;
background-position: -33px -725px;
}
a.inPageButtonsB > div.menuIcon.chain{
background-position: -33px -725px;
}
a.inPageButtonsB > div.menuIcon.wheel{
background-position: 0 -724px;
}
a.inPageButtonsB > div.menuIcon.tshirt{
background-position: -66px -725px;
}
a.inPageButtonsB > div.menuIcon.shoe{
background-position: -99px -725px;
}
a.inPageButtonsB > div.menuIcon.gear{
background-position: -132px -725px;
}
a.inPageButtonsB > div.menuIcon.paddle{
background-position: -164px -725px;
}
a.inPageButtonsB > div.menuIcon.geartwo{
background-position: -196px -725px;
}
a.inPageButtonsB > div.menuIcon.hiking{
background-position: -254px -725px;
}
a.inPageButtonsB > div.menuIcon.loc{
background-position: -254px -757px;
}
a.inPageButtonsB > div.menuIcon.swim{
background-position: 0 -755px;
}
a.inPageButtonsB > div.menuIcon.cyclist{
background-position: -33px -755px;
}
a.inPageButtonsB > div.menuIcon.helmet{
background-position: -225px -725px;
}
a.inPageButtonsB > div.menuIcon.energy{
background-position: -225px -756px;
}
a.inPageButtonsB > div.menuIcon.run{
background-position: -66px -755px;
}
a.inPageButtonsB > div.menuIcon.kayak{
background-position: -99px -755px;
}
a.inPageButtonsB > div.menuIcon.race{
background-position: -131px -756px;
}
a.inPageButtonsB > div.menuIcon.calendar{
background-position: -163px -756px;
}
a.inPageButtonsB > div.menuIcon.compass{
background-position: -196px -756px;
}
a.inPageButtonsB > div.menuIcon.specials{
background-position: -284px -725px;
}
a.inPageButtonsB > div.menuIcon.price{
background-position: -313px -725px;
}
a.inPageButtonsB > div.menuIcon.contact{
background-position: -284px -757px;
}
a.inPageButtonsB > div.menuIcon.strava{
background-position: -313px -757px;
}
a.inPageButtonsB > div.menuIcon.trailforks{
background-position: -343px -725px;
}
a.inPageButtonsB > div.menuIcon.paddleboard{
background-position: -343px -757px;
}
a.inPageButtonsB > div.menuIcon.subscribe{
background-position: -343px -695px;
}
a.inPageButtonsB > div.menuIcon.clock{
background-position: -313px -695px;
}
a.inPageButtonsB > div.menuIcon.print{
background-position: -283px -696px;
}
a.inPageButtonsB > div.menuIcon.cup{
background-position: -254px -696px;
}
a.inPageButtonsB > div.menuIcon.faceb{
background-position: -224px -696px;
}
a.inPageButtonsB > div.menuIcon.clip{
background-position: -195px -696px;
}
a.inPageButtonsB > div.menuIcon.email{
background-position: -164px -696px;
}
a.inPageButtonsB > div.menuIcon.paddleboat{
background-position: -373px -669px;
}
/* Dark Versions */
a.inPageButtons > div.menuIcon.chain{
background-position: -408px -725px;
}
a.inPageButtons > div.menuIcon.wheel{
background-position: -375px -725px;
}
a.inPageButtons > div.menuIcon.tshirt{
background-position: -441px -725px;
}
a.inPageButtons > div.menuIcon.shoe{
background-position: -474px -725px;
}
a.inPageButtons > div.menuIcon.gear{
background-position: -506px -725px;
}
a.inPageButtons > div.menuIcon.paddle{
background-position: -538px -725px;
}
a.inPageButtons > div.menuIcon.geartwo{
background-position: -570px -725px;
}
a.inPageButtons > div.menuIcon.hiking{
background-position: -628px -725px;
}
a.inPageButtons > div.menuIcon.loc{
background-position: -628px -757px;
}
a.inPageButtons > div.menuIcon.swim{
background-position: -375px -755px;
}
a.inPageButtons > div.menuIcon.cyclist{
background-position: -407px -756px;
}
a.inPageButtons > div.menuIcon.helmet{
background-position: -599px -725px;
}
a.inPageButtons > div.menuIcon.energy{
background-position: -599px -756px;
}
a.inPageButtons > div.menuIcon.run{
background-position: -441px -756px;
}
a.inPageButtons > div.menuIcon.kayak{
background-position: -474px -756px;
}
a.inPageButtons > div.menuIcon.race{
background-position: -506px -756px;
}
a.inPageButtons > div.menuIcon.arrowD{
background-position: -506px -666px;
}
a.inPageButtons > div.menuIcon.calendar{
background-position: -538px -756px;
}
a.inPageButtons > div.menuIcon.compass{
background-position: -570px -756px;
}
a.inPageButtons > div.menuIcon.specials{
background-position: -659px -725px;
}
a.inPageButtons > div.menuIcon.price{
background-position: -689px -725px;
}
a.inPageButtons > div.menuIcon.contact{
background-position: -659px -757px;
}
a.inPageButtons > div.menuIcon.strava{
background-position: -689px -757px;
}
a.inPageButtons > div.menuIcon.trailforks{
background-position: -717px -724px;
}
a.inPageButtons > div.menuIcon.paddleboard{
background-position: -717px -757px;
}
a.inPageButtons > div.menuIcon.business{
background-position: -506px -697px;
}
a.inPageButtons > div.menuIcon.subscribe{
background-position: -717px -695px;
}
a.inPageButtons > div.menuIcon.clock{
background-position: -658px -695px;
}
a.inPageButtons > div.menuIcon.print{
background-position: -688px -695px;
}
a.inPageButtons > div.menuIcon.cup{
background-position: -628px -696px;
}
a.inPageButtons > div.menuIcon.faceb{
background-position: -599px -697px;
}
a.inPageButtons > div.menuIcon.clip{
background-position: -569px -697px;
}
a.inPageButtons > div.menuIcon.clip{
background-position: -538px -697px;
}
a.inPageButtons > div.menuIcon.paddleboat{
background-position: -688px -665px;
}
/*.pageHeading a.inPageButtons{
background-color: #FFFFFF;
color: #2E3438;
}*/
/* standalone images */
.standAloneImg{
width:100%;
}
.standAloneImg img{
max-width:100%;
}
.mainTextHeading{
display:inline-block;
max-width:600px;
padding:10px 0 20px 0;
}
/* Horizontal parallax page picture */
#pageMainPic{
padding: 90px 0 100px 0;
text-align:center;
position:relative;
overflow:hidden;
padding:0;
min-height:500px;
}
#pageMainPic > .bg{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#pageMainPic > .fg{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background: url(img/subtle-dots.png);
}
#pageMainPic > .bg > div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
/*background: url(conti/sample/02618_jellyfiesta_2560x1600.jpg);*/
background-size: cover;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.pageHeading{
padding-top:250px; /* Size to include the mobile logo */
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.pageHeading{
padding-top:250px; /* Size to include the mobile logo */
}
}
/* ------------------------------------------------------------------------------ QR + Social Icons */
.tripAdvisor,
.facebook,
.wifi,
.qr{
display:inline-block;
}
/* ----- icon boxes */
.tripAdvisor{
width: 199px; height: 37px;
background-position: -550px -41px;
}
.facebook{
width: 125px; height: 30px;
background-position: -625px -102px;
}
.wifi{
width: 75px; height: 75px;
background-position: -625px -175px;
}
/* ----- qr code */
.qr:link, .qr:visited{
position: relative;
width: 110px;
height: 110px;
background-color: #F96;
}
.qr img{
max-width:100%;
}
.qr:before{
content:'';
width: 25px; height: 59px;
background-position: -325px -150px;
position:absolute;
top:26px;
right:-27px;
}
/* ------------------------------------------------------------------------------ Home Page */
.bottomButtons{
position: absolute;
bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
width: 900px;
max-width: 100%;
}
.bottomButtons > div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.bottomButtons > div > a:first-child{
width:100%;
height:auto;
margin-bottom:10px;
position:relative;
}
.bottomButtons > div > a{
width:32%;
display:block;
text-align:center;
margin:0;
height:190px;
overflow:hidden;
position:relative;
border-radius:10px;
transform: translate3d(0, 0, 0);
}
.bottomButtons > div > a .mask{
content: '';
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: rgba(241,202,36,0.4);
transition: all 0.2s;
-webkit-transition: all 0.2s;
}
.bottomButtons > div > a:nth-child(2) .mask{
background-color: rgba(224,122,48,0.4);
}
.bottomButtons > div > a:nth-child(3) .mask{
background-color: rgba(103,204,247,0.4);
}
.bottomButtons > div > a:hover .mask{
background-color: rgba(241,202,36,0);
}
.bottomButtons > div > a:first-child > h2{
display:block;
position:absolute;
top:50%;
left:52%;
margin:0;
width:100%;
background-color:transparent;
transform: rotate(0deg) translate3d(-50%, -50%, 0);
font-size:3rem;
}
.bottomButtons > div > a:first-child > div img{
transition:transform 0.3s ease;
width:100%;
}
.bottomButtons > div > a:first-child:hover > div img{
transform:scale3d(1.05,1.05,1);
}
.bottomButtons > div > a:hover{
text-decoration:none;
}
.bottomButtons h2{
font-family: 'Anton', sans-serif; /* Google Font Imported */
font-size: 2.3em;
font-weight: normal;
line-height: 1;
margin: 10px 0;
transform: rotate(-15deg) translate3d(0, 0, 0);
background-color: #F1CA24;
margin-left: -60px;
padding: 6px 0;
width: 125%;
color: #FFFFFF;
text-transform: uppercase;
}
.bottomButtons h2 span{
font-size:0.6em;
}
.bottomButtons a:nth-child(2) h2{
background-color: #E07A30;
}
.bottomButtons a:nth-child(3) h2{
background-color: #67CCF7;
}
.bottomButtons > div > a .illustration{
position:absolute;
top:0;
left:0;
width:110%;
transition: all 0.2s;
-webkit-transition: all 0.2s;
z-index:0;
}
.bottomButtons > div > a:hover .illustration{
width:120%;
/*transform: translate(-5%, 0);
-webkit-transform: translate(-5%, 0);*/
}
.bottomButtons > div > a:nth-child(1) .illustration{
width:100%;
}
.bottomButtons > div > a:nth-child(1):hover .illustration{
width:110%;
}
.bottomButtons > div > a .illustration img{
width:100%;
}
/* More! button */
a.moreButton{
display: block;
position: absolute;
bottom: 0;
transform:translate3d(0,-110px,0);
right: -60px;
}
a.moreButton > div{
width: 46px; height: 46px;
background-position: -199px -425px;
display:inline-block;
}
a.moreButton > span{
font-family: 'Anton', sans-serif; /* Google Font Imported */
font-size: 2.4em;
font-weight: normal;
line-height: 1;
display: block;
transform: rotate(90deg) translate3d(0, 0, 0);
color: #FFFFFF;
position: absolute;
top: 90px;
left: 0;
margin-left: -28px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.bottomButtons{
bottom: 20px;
}
a.moreButton{
display:none;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.bottomButtons h2{
font-size: 1.8em;
width: 130%;
}
.bottomButtons > div{
flex-wrap:no-wrap;
/*flex-wrap:wrap;*/
}
.bottomButtons{
/*position:static;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);*/
bottom:0;
width: 100%;
max-width: 100%;
box-sizing:border-box;
padding:0 10px 10px 10px;
}
.bottomButtons > div > a{
margin:0;
height:160px;
}
.bottomButtons > div > a:hover .illustration,
.bottomButtons > div > a:nth-child(1):hover .illustration{
width:100%;
}
a.moreButton{
display:none;
}
.bottomButtons > div > a:first-child > h2{
left:50%;
font-size:2.5rem;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.bottomButtons > div{
display:block;
}
.bottomButtons h2{
/*font-size: 2.em;*/
margin-left: -100px;
margin-top:-10px;
text-align:left;
padding-left:28%;
}
.bottomButtons{
bottom:0;
position:static;
bottom: 0px;
left: 0px;
transform: translate(0, 0);
}
.bottomButtons > div > a{
margin:0;
display:block;
height:auto;
min-height:120px;
width:100%;
flex:none;
}
.bottomButtons > div > a .illustration img{
transform: translate3d(0, -80px, 0);
}
a.moreButton{
display:none;
}
.bottomButtons > div > a:first-child{
width:100%;
height:auto;
margin-bottom:0px;
min-height:100px;
background-color:#474e54;
}
.bottomButtons > div > a:first-child:hover > div img,
.bottomButtons > div > a:first-child > div img{
width:170%;
position:absolute;
left:50%;
bottom:0;
transform:translate3d(-50%,0,0);
}
}
/* ------------------------------------------------------------------------------ Shop Pages */
#selectionSection{
text-align: center;
color: #FFFFFF;
}
#selectionSection h2{
color: #FFFFFF;
}
.suppliersControls{
padding:40px 0;
}
#brandSelection{
margin: 0 auto;
}
.supplier-item{
background-color: rgba(116,128,137,0.1);
}
.supplier-item:hover{
background-color: rgba(116,128,137,0.3);
}
/* Simpson Bay */
.simpson-bay-shoppage #pageMainPic > .bg > div{
width:130%;
background: url(conti/shop-sb-1.jpg);
background-size: cover;
background-position: 50% 50%;
}
/* Marigot */
.marigot-shoppage #pageMainPic > .bg > div{
width:120%;
background: url(conti/shop-m-1.jpg);
background-size: cover;
background-position: 50% 50%;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.simpson-bay-shoppage #pageMainPic > .bg > div,
.marigot-shoppage #pageMainPic > .bg > div{
width:1800px;
}
#pageMainPic{
overflow:auto;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.simpson-bay-shoppage #pageMainPic > .bg > div,
.marigot-shoppage #pageMainPic > .bg > div{
width:1800px;
}
#pageMainPic{
overflow:auto;
}
}
/* ------------------------------------------------------------------------------ All Year's Planning Page */
.downloadFile span{
font-size: 0.8em;
font-style: italic;
}
/* ------------------------------------------------------------------------------ Results Page */
#allResults{
text-align: center;
}
#allResults a span{
font-size: 0.8em;
font-style: italic;
}
#allResults h3{
color: #F1CA24;
font-size:2.6em;
}
#allResults > div{
display: inline-block;
text-align: left;
}
#allResults .resultSubBlock{
margin: 30px 0 25px 0;
border-left-color: #F1CA24;
border-left-style: solid;
border-left-width: 10px;
padding: 0 0 20px 20px;
}
/* ------------------------------------------------------------------------------ Tours Rentals Directory */
#tourDirectory{
}
#tourDirectory .isotope-item{
background: url(img/60-lines.png), radial-gradient(ellipse at center, #67CCF7 0%, #0CA0E0 100%);
}
#tourDirectory .isotope-item .subContainer{
padding:0 30px 40px 30px;
}
#tourDirectory .isotope-item h2{
font-size: 2em;
margin: 10px 0 20px 0;
}
#tourDirectory .isotope-item h2 a{
text-decoration: none;
color: #FFFFFF;
}
#tourDirectory .isotope-item .mainPic{
display:inline-block;
position:relative;
overflow:hidden;
}
/* Rental / Tours */
#tourDirectory .isotope-item .listingType{
display:block;
font-family: 'Anton', sans-serif;
font-size: 2em;
font-weight: normal;
line-height: 1;
text-transform: uppercase;
transform: rotate(30deg) translate3d(0, 0, 0);
background-color: #E07A30;
padding: 6px 0 6px 35px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #FFFFFF;
position:absolute;
top:0;
right:-90px;
width:300px;
}
#tourDirectory .isotope-item.Rental .listingType{
background-color: #F1CA24;
}
#tourDirectory .level,
#tourDirectory .times,
#tourDirectory .duration{
font-size:0.8em;
}
#tourDirectory .level b{
font-size: 1.4em;
color: #F1CA24;
}
#tourDirectory .pricing b{
font-size: 1.4em;
}
#tourDirectory .shortDescription{
display:inline-block;
margin: 20px 0 0 0;
}
/* Categories */
.SUP a.inPageButtons > div.menuIcon.placeholder{
background-position: -717px -757px;
}
.Biking a.inPageButtons > div.menuIcon.placeholder{
background-position: -407px -756px;
}
.Kayaking a.inPageButtons > div.menuIcon.placeholder{
background-position: -474px -756px;
}
.Other a.inPageButtons > div.menuIcon.placeholder{
background-position: -570px -756px;
}
.Paddleboat a.inPageButtons > div.menuIcon.placeholder{
background-position: -688px -665px;
}
a.bikepreview{
display:inline-block;
width:100%;
max-width:600px;
}
a.bikepreview img{
display:block;
width:100%;
height:auto;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.tourspage .doubleDoughH1{
padding-top: 10px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.tourspage .doubleDoughH1{
padding:0;
}
}
/* ------------------------------------------------------------------------------ Tours Rental Page */
h1 .activityType{
display: inline-block;
background-color: #F1CA24;
padding: 10px 20px;
vertical-align:middle;
font-size:0.8em;
}
.type-Tour h1 .activityType{
background-color: #E07A30;
}
.tourRental .price,
.tourRental .level,
.tourRental .times,
.tourRental .duration{
display:inline-block;
font-size:0.9em;
}
.tourRental .price{
font-size:1.3em;
}
.tourRental .level b{
font-size: 1.4em;
color: #F1CA24;
}
.tourRental .level i{
font-size:0.9em;
}
/* ------------------------------------------------------------------------------ Event Details Page */
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.eventPage .singleDoughH2{
padding-top:0px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.eventPage .singleDoughH2{
padding-top:0px;
}
#upcomingEvents{
text-align:left;
}
}
/* ------------------------------------------------------------------------------ Listings */
.listingsContainer{
display: flex; /* flex, inline-flex */
/* flex-direction: row; /* row, column, row-reverse, column-reverse */
/* flex-wrap: wrap; /* wrap ( multi line, left to right), nowrap (force single line, left to right), wrap-reverse (multi line, right to left) */
flex-flow: row wrap; /* join 2 previous properties in one line */
justify-content: center; /* flex-start, flex-end, center, space-between, space-around (repartition on main axis) */
align-items: stretch; /* flex-start, flex-end, center, baseline, stretch (repartition on cross axis)*/
align-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, stretch (on multi lines -> the way multilines are packed ) */
}
.listingItem{
-webkit-box-sizing: border-box;
box-sizing: border-box;
position:relative;
overflow:hidden;
margin:40px 2%;
width:29.33%;
}
/*.listingItem:before{
position: absolute;
top: 0;
left: 0;
z-index: 10;
content: '';
display: block;
width: 100%;
bottom: 0;
background-color: rgba(51,51,51,0);
}*/
.touchScreen .listingItem:before{
display:none;
}
.listingItem:hover{
text-decoration:none;
}
.listingItem:hover:before{
background-color: rgba(51,51,51,0.2);
}
/* item content */
.listingItem .subContainer{
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #FFFFFF;
width:100%;
text-align:left;
display:inline-block;
padding: 0;
}
.listingItem .illustration{
display:inline-block;
}
.listingItem .illustration img{
width:100%;
}
.listingItem h2{
font-family: 'Anton', sans-serif;
color: #FFFFFF;
line-height:1.2;
font-size:2em;
}
.listingItem .date{
font-size:0.9em;
}
.listingItem .shortDescription,
.listingItem .pr{
display:inline-block;
}
.listingItem .pr{
font-weight:bold;
width:100%;
}
.listingItem .shortDescription{
width:100%;
margin:0;
}
/* Badge */
.listingItem .badge{
font-family: 'Anton', sans-serif;
font-size: 1.6em;
font-weight: normal;
line-height: 1;
text-transform: uppercase;
transform: rotate(30deg) translate3d(0, 0, 0);
background-color: #E07A30;
padding: 6px 0 6px 35px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #FFFFFF;
position: absolute;
top: 0;
right: -90px;
width: 300px;
display:none;
}
.listingItem .badge.Crazy{
display: block;
background-color: #FF0000;
}
.listingItem .badge.Sales{
display: block;
background-color: #E07A30;
}
.listingItem .badge.New{
display: block;
background-color: #3F454B;
}
.listingItem .badge.OnlyAFewLeft{
display: block;
background-color: #FF0000;
right: -30px;
padding: 6px 0 6px 100px;
}
.listingItem .badge.Free{
display: block;
background-color: #67CCF7;
}
.listingItem .badge.Special{
display: block;
background-color: #F1CA24;
}
.listingItem .badge.SimpsonBay{
display: block;
background-color: #E07A30;
right: -40px;
padding: 6px 0 6px 90px;
}
.listingItem .badge.Marigot{
display: block;
background-color: #E07A30;
right: -40px;
padding: 6px 0 6px 90px;
}
.listingItem .badge.Tours{
display: block;
background-color: #E07A30;
right: -40px;
padding: 6px 0 6px 90px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.listingItem{
width: 46%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.listingItem{
width: 46%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.listingItem{
width: 100%;
margin:40px 30px;
}
}
/* ------------------------------------------------------------------------------ Listings Template Page */
.blockSection{
display: flex; /* flex, inline-flex */
/* flex-direction: row; /* row, column, row-reverse, column-reverse */
/* flex-wrap: wrap; /* wrap ( multi line, left to right), nowrap (force single line, left to right), wrap-reverse (multi line, right to left) */
flex-flow: row wrap; /* join 2 previous properties in one line */
justify-content: center; /* flex-start, flex-end, center, space-between, space-around (repartition on main axis) */
align-items: stretch; /* flex-start, flex-end, center, baseline, stretch (repartition on cross axis)*/
}
.imgGalleryCol{
width:70%;
}
.blockCtCol{
flex:1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:25px 30px;
text-align:left;
color: #FFFFFF;
}
.blockCtCol h1{
margin:0;
font-family: 'Anton', sans-serif;
color: #FFFFFF;
line-height:1.2;
font-size:2.2em;
font-weight:normal;
}
.blockCtColDate{
display:inline-block;
font-size:0.9em;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.imgGalleryCol{
width:100%;
}
.blockCtCol{
padding:30px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.imgGalleryCol{
width:100%;
}
.blockCtCol{
padding:30px;
}
}
/* ------------------------------------------------------------------------------ Routes Page */
.routeListings{
}
.routeListings a.routeLink{
text-align:left;
box-sizing:border-box;
-webkit-box-sizing: border-box;
padding:30px;
background-color:#2E3438;
color:white;
background: linear-gradient(to bottom, #4a4e51 0%,#2e3438 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.routeListings a.routeLink:hover{
background: none;
background-color: #262B2F;
text-decoration:none;
}
.routeListings a.routeLink h2{
font-size:1.8em;
line-height:1.2;
color:#f1ca24;
}
.stravaLogo{
display:inline-block;
width:100px;
height:100px;
background-position: -575px -299px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.strava-routespage .doubleDoughH1{
padding-top: 10px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.strava-routespage .doubleDoughH1{
padding: 0;
}
}
/* ------------------------------------------------------------------------------ Ken Burns Page */
/*.kenburnspage .regularPage,
#kbImages{
min-height:750px;
}*/
#textureTop{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width:100%;
background: url(img/60-lines.png);
/* background-image: url(img/60-lines.png); */
}
#kbImages{
transform: translate3d(0, 0, 0);
position:relative;
min-height:650px;
max-height:900px;
overflow:hidden;
height:100dvh;
width:100%;
}
#kbImages a{
display: block;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
/*transform: rotate(2deg);
-webkit-transform: rotate(2deg);*/
}
#kbImages.kbActivated a{
-webkit-transition-property: all, -webkit-transform;
-webkit-transition-duration: 4s, 8s;
transition-property: all, transform;
transition-duration: 4s, 8s;
}
#kbImages > a > div{
background-size:cover;
background-position:50% 50%;
width: 100%;
height:100%; /* set to fit width on large screens - because of gap created by ken burns */
}
#kbImages a:nth-child(2n+1){
-webkit-transform-origin: top right;
transform-origin: top right;
}
#kbImages a:nth-child(3n+1){
-webkit-transform-origin: top left;
transform-origin: top left;
}
#kbImages a:nth-child(4n+1){
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
#kbImages a.fx{
opacity:1;
-webkit-transform: scale(1.05);
transform: scale(1.08);
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
#kbImages{
max-height:800px;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
#kbImages{
min-height:600px;
max-height:400px;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#kbImages{
max-height:400px;
min-height:auto;
height:50dvh;
}
#kbImages > a > div{
width:140%;
background-position:70% 50%;
}
}
/*###########################################################################*/
/*################################# Lists ###################################*/
/*###########################################################################*/
ul.icon{
display:inline-block; /* allow lists with floating objects */
}
ul.icon li{
position: relative;
padding-left:1.9em;
text-align:left;
}
ul.icon li:before{
position: absolute;
top:1px; left:0;
width: 25px; height: 25px;
content: '';
}
/* -------------------------------------- lists variations */
ul.icon.check li:before{
background-position: -75px -25px;
}
ul.icon.hand li:before{
background-position: -25px -25px;
}
ul.icon.arrow li:before{
background-position: -125px -25px;
}
ul.icon.thinArrow li:before{
background-position: -225px -50px;
}
ul.icon.star li:before{
background-position: -25px -75px;
}
ul.icon.play li:before{
background-position: -224px 0px;
}
ul.icon.roundCheck li:before{
background-position: -175px -75px;
}
ul.icon.info li:before{
background-position: -125px -75px;
}
ul.icon.smile li:before{
background-position: -275px -50px;
}
ul.icon.file li:before{
background-position: -175px -25px;
}
ul.icon.heart li:before{
background-position: -75px -75px;
}
ul.icon.present li:before{
background-position: -325px 0px;
}
ul.icon.bright li:before{
background-position: -375px 0px;
}
/* ------------------------------------------- more list variations */
ul.icon.leftArrow li:before{
background-position: -375px -50px;
}
ul.icon.arrowRight li,
ul.icon.arrowUp li,
ul.icon.arrowDown li {
padding-left:0;
padding-right:1.9em;
display:inline-block;
}
ul.icon.arrowRight li:before{
background-position: -125px -25px;
left:auto;
right:0;
}
ul.icon.arrowUp li:before{
background-position: -250px -100px;
left:auto;
right:0;
top:-0.2em;
}
ul.icon.arrowDown li:before{
background-position: -325px -50px;
left:auto;
top:0.5em;
right:0;
}
/* --------------------------------------------- number lists */
ol{
display:inline-block;
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
}
ol li{
display: block;
float:left;
clear:both;
position:relative;
margin-bottom:2.9em;
padding-left:2.8em;
}
ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: -0.2em;
left: 0;
font-size: 1.3em;
height: 1.6em;
width: 1.6em;
border-radius: 0.8em;
background-color: #FF9966;
color: #FFFFFF;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
}
/*###########################################################################*/
/*########################### Content Adjusters #############################*/
/*###########################################################################*/
.vOne{
margin-top:1em;
}
.vTwo{
margin-top:2em;
}
.vThree{
margin-top:3em;
}
.vFour{
margin-top:4em;
}
.vHalf{
margin-top:0.5em;
}
.vZero{
margin-top:0;
}
.vNeg{
margin-top:-0.5em;
}
.pileOne, .pileTwo, .pileHalf{
margin-top:0;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.pileOne{
margin-top:1em;
}
.pileTwo{
margin-top:2em;
}
.pileHalf{
margin-top:0.5em;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.pileOne{
margin-top:1em;
}
.pileTwo{
margin-top:2em;
}
.pileHalf{
margin-top:0.5em;
}
}
/*###########################################################################*/
/*################################ Chunk Bite ###############################*/
/*###########################################################################*/
/* Chunk Bites */
.chunkBite{
display:block;
border-radius:5px;
background-color: #000;
padding:40px 50px;
}
.numberChunk{
display: block;
border-radius: 5px;
background-color: #999;
position:relative;
padding:50px 50px 40px 50px;
margin:60px 0;
}
.numberChunk .number{
position:absolute;
top:0;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
font-size: 1.6em;
height: 2em;
width: 2em;
border-radius: 1em;
line-height:1;
padding:0.45em 0 0 0;
background-color: #FF9966;
color: #FFFFFF;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
}
/*###########################################################################*/
/*################################ Forms ####################################*/
/*###########################################################################*/
/* ---------- Blocks */
.form{
display: inline-block;
text-align:center;
}
.legend{
display:inline-block;
font-style: italic;
font-size:0.8em;
margin:10px;
}
.hiddenForm,
#cellCont{ /* Honey Pot - Anti Spam */
display:none;
}
/* ------------- Inputs */
input[type=text],
textarea,
input[type=submit],
.trigger,
.activetrigger{
padding: 9px 14px;
font-family:inherit;
font-size:inherit;
border: 2px solid;
-webkit-appearance: none;
margin:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius:0px;
}
input[type=text],
textarea{
width:100%;
}
textarea{
height:180px;
resize: none;
overflow: auto;
display:block;
}
input[type=submit]{
cursor: pointer;
padding: 8px 16px;
background-color: #2E3438;
border-color: #2E3438;
color: #FFFFFF;
margin: 10px;
border-radius: 4px;
font-weight: bold;
}
input[type=submit]:hover{
background-color: #262B2F;
border-color: #262B2F;
}
/* On Focus */
input[type=text]:focus,
textarea:focus{
outline: none;
}
/* ----------- Ckeck Boxes / Radio / Form Box / File */
.labelRadio,
.labelCheck{
display:inline-block;
cursor:pointer;
position:relative;
margin:10px;
}
.labelRadio span,
.labelCheck span{
/*display: inline-block;*/
line-height:1;
vertical-align: middle;
}
.labelRadio div,
.labelCheck div{
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
.labelRadio input,
.labelCheck input{
position:absolute;
top:0;
left:0;
z-index:-1; /* Forces IE 8 to behave - instead of hidden */
}
.labelRadio div{
background-position: -200px -351px;
}
.labelRadio.checked div{
background-position: -250px -351px;
}
.labelCheck div{
background-position: -100px -351px;
}
.labelCheck.checked div{
background-position: -150px -351px;
}
/* ----------------- Wrappers */
.inputWrap{
width:100%;
max-width:260px;
display:inline-block;
margin: 10px;
position:relative;
vertical-align:top;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
}
/* Labeling */
.inputWrap .label{
display:block;
text-align:left;
padding:3px 10px;
}
.inputWrap .label,
.labelRadio,
.labelCheck{
padding:8px 12px;
}
.formDate{
max-width:220px;
}
.formPeople{
max-width:200px;
}
.formPhone{
max-width:180px;
}
.formEmail{
max-width:220px;
}
.formComment{
max-width:460px;
}
.inputWrap .label div{
display:inline-block;
vertical-align:middle;
margin:0 2px 0 0;
width: 26px; height: 26px;
background-position: -325px -350px;
}
.inputWrap .label span{
display: none;
vertical-align: middle;
margin-left:4px;
}
.formPeople .label div{
background-position: -375px -250px;
}
.formEmail .label div{
background-position: -375px -300px;
}
.formPhone .label div{
background-position: -100px -300px;
}
.formComment .label div{
background-position: -375px -350px;
}
.formDate .label div{
background-position: -325px -300px;
}
.formBirthM .label div{
background-position: -175px -300px;
}
.formCrowd .label div{
background-position: -275px -300px;
}
.formAddress .label div{
background-position: -225px -300px;
}
.formCCard .label div,
.ccExpirationM .label div,
.ccExpirationY .label div{
background-position: -425px -225px;
}
.formCVV .label div{
background-position: -425px -325px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.inputWrap{
margin: 20px 0 0 0;
}
}
/*###########################################################################*/
/*############## Form Colors Quick Handle + Error Handling ##################*/
/*###########################################################################*/
input[type=text],
textarea,
.gldp-default .border,
.trigger[data-darkText],
.activetrigger[data-darkText],
.trigger[data-darkText]:hover,
.activetrigger[data-darkText]:hover,
.dropcontainer ul{
border-color: #242424;
color: #333;
border-radius: 0 0 4px 4px;
}
input[type=text].emptyField,
textarea.emptyField,
.trigger,
.activetrigger{
border-color: #1091c9;
color: #BBB;
}
.labelRadio,
.labelCheck,
.inputWrap .label,
.gldp-default .dow,
.gldp-default .noday{
background-color: #242424;
color: #CCCCCC;
border-radius: 4px;
}
.inputWrap .label{
border-radius: 4px 4px 0 0;
}
/* ---------------------- Errors Handling */
input[type=text].error,
textarea.error,
.error,
div.inputWrap.error .trigger{
background-color: #FFA466;
border-color: #F60;
color: #B74900;
}
div.inputWrap.error .label{
background-color: #F60;
color: #FFF;
}
.errors{
color: #FFA466;
font-size:0.95em;
}
.displayErrorMargins{
margin:10px;
}
/*###########################################################################*/
/*############################## Google Maps ################################*/
/*###########################################################################*/
/* --------------- Map General -------------- */
.google-map{
width:100%;
height:600px;
float:left;
}
.mapControls{ /* Controls Positioning */
display:block;
position:absolute;
right:0px;
}
/* -------------- Info Windows ------------- */
.google-map .gm-style,
.google-map .gm-style .gm-style-iw,
.google-map .gm-style .gm-style-iw a,
.google-map .gm-style .gm-style-iw span,
.google-map .gm-style .gm-style-iw label,
.google-map .gm-style .gm-style-iw div{ /* Prevent "Roboto" font default loading + Reset from Google Maps default settings */
font-family:inherit;
font-weight:normal;
font-size:inherit;
}
.google-map .gm-style .gm-style-iw div.infoWindow{
font-size:0.9em;
}
.google-map .infoWindow{
padding: 10px 0px; /* px fix scroll bar in IE */
min-width: 200px; /* px fix width in IOS */
max-width: 260px;
color: #363C41;
}
/* ------- Title & Paragraph */
.google-map .infoWindow h1{
font-size: 2em;
margin: 0 0 0 0;
color: #363C41;
}
.google-map .infoWindow p{
margin-top:15px;
margin-bottom:0;
display:block;
}
.google-map .mapPic{
display:inline-block;
}
.google-map .mapPic img{
max-width:100%;
}
/* -------- Links */
.google-map .infoWindow a{
color: #363C41;
background-color: #F1CA24;
}
.google-map .infoWindow a:hover{
color: #E3B90F;
}
/* ----------- Zoom Buttons */
.google-map div.zoomButton{
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
color: #363C41;
background-color: #F1CA24;
margin: 0px 10px 0 10px;
cursor: pointer;
}
.google-map div.zoomButton:hover{
text-decoration: none;
background-color: #E3B90F;
}
.google-map .gm-style .gm-style-iw div.zoomButton{
font-weight: bold;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
/*.google-map{
height:400px;
}*/
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
/*.google-map{
height:400px;
}*/
}
/*###########################################################################*/
/*############################### Top Arrow #################################*/
/*###########################################################################*/
#topArrow{
position: fixed;
bottom: 0px;
left: 50%;
width: 88px;
height: 50px;
background-position: -50px -425px;
z-index: 10;
display: none;
transform: translate(-50%, 0) rotate(180deg);
background-color: rgba(255,255,255,0.1);
-webkit-transform: translate(-50%, 0) rotate(180deg);
}
#topArrow.visible{
display:block;
}
#topArrow:hover{
cursor: pointer;
/*opacity: 1;*/
}
.touchScreen #topArrow{
/*display:none;*/
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
/*#topArrow{
display:none;
}*/
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#topArrow{
display:none;
}
}
/*###########################################################################*/
/*######################## Isotope Customization ############################*/
/*###########################################################################*/
.isotope{
/*background-color: #0CF;*/
}
/* -------- Elements */
.isotope .isotope-item{
width: 31.3%;
margin: 1%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* background-color: #09F; */
text-decoration:none;
color:inherit;
}
.isotope .isotope-item img{
max-width:100%;
display:inline-block;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.isotope .isotope-item{
width: 48%;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.isotope .isotope-item{
width: 48%;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.isotope .isotope-item{
width: 100%;
margin: 0%;
}
}
/*###########################################################################*/
/*############################# Off Canevas Menu ############################*/
/*###########################################################################*/
.offMenu{
width: 260px; /* Hidding Scroll Bar 17px */
height: 100%;
position: fixed;
top: 0;
bottom: 0;
z-index: 0;
overflow: hidden;
overflow-y: scroll; /* Creates "overflow: scroll;" on Android Mobiles */
padding-right: 17px; /* Hidding Scroll Bar 17px -> Not on touch screens */
background-color: #313539;
background-image: url(img/asfalt-light.png);
display:none;
}
.openMenu .offMenu{
display:block;
}
.touchScreen .offMenu{
padding-right:8px; /* Small scroll bar in Android default browser */
}
.site-wrap{ /* no horizontal positionning! - bug in Safari & Firefox */
min-height: 100%;
min-width: 100%;
position: relative;
bottom: 100%;
margin-left: 0;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
overflow: hidden;
/* background-color: #4ea029; */
/*-webkit-overflow-scrolling: auto;*/
}
.openMenu .site-wrap{
/*margin-left:260px;*/
transform:translateX(260px);
/*left:260px;*/
/*box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);*/
height:100%;
}
.openMenu #header{
transform:translateX(260px);
}
/* button */
#offMenuButton{
position:absolute;
top:0;
left:0;
display:block;
}
#offMenuButton div{
float:left;
width: 60px; height: 60px;
background-position: -25px -500px;
}
.openMenu #offMenuButton div{
background-position: -100px -500px;
}
#offMenuButton span{
float: left;
font-size: 1.2em;
margin: 13px 0 0 0;
font-weight: bold;
color: #FFFFFF;
}
/* Actual Menu */
.offMenu ul{
width:100%;
position:absolute;
left:100%;
top:0;
}
.offMenu .offPanel > ul{
right:auto;
left:0;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
}
.offMenu li a{ /* normal button - color handle */
display: block;
padding: 16px;
border-top-color: #363A3F;
border-bottom-color: #292D30;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
color: #FFF;
text-decoration: none;
font-size:1rem;
}
.offMenu li.moBackB a{ /* back button - color handle */
padding-left: 10px;
}
.offMenu li a:hover{
border-top-color: #F1CA24;
/*background-image: url(img/texture-b.png);*/
background-image: none;
background-color: #F1CA24;
color: #586169;
}
.offPanel ul{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #363A3F;
}
.offPanel > ul{
border-bottom-width: 0px;
}
/* Menu Footer */
.offPanel ul > li.menuFooter,
.offPanel ul > li.menuHeader{
width:100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #363A3F;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:30px;
text-align:center;
}
.offPanel ul > li.menuHeader{
border-bottom-color: #292D30;
border-bottom-width: 1px;
border-bottom-style: solid;
padding:20px 30px 0 30px;
}
.offPanel ul > li.menuHeader img{
max-width:100%;
}
.offPanel ul > li.menuFooter > a,
.offPanel ul > li.menuHeader > a{
display:inline-block;
margin:0 5px;
width: 41px; height: 41px;
background-position: -324px -424px;
border:none;
padding:0;
}
.offPanel ul > li.menuFooter > a.tripa{
width: 69px;
background-position: -426px -425px;
}
.offPanel ul > li.menuFooter > a.faceb{
background-position: -375px -425px;
}
.offPanel ul > li.menuFooter > a.phon{
background-position: -374px -475px;
}
/* Menu Arrows */
.moArrowL,
.moArrowR{
float:right;
width: 26px; height: 26px;
background-position: -225px -50px;
margin-top:2px;
}
.moArrowL{
float:left;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
margin-right:10px;
margin-top:0px;
}
/* Various Graphics */
.varGraphics{
display: inline-block;
}
.varGraphics.shta{
width: 102px; height: 81px;
background-position: -688px -300px;
vertical-align:middle;
}
.shtafooter{
margin:20px 0 10px 0;
}
.shtafooter a{
display:inline-block;
text-decoration:none;
transform:scale3d(1,1,1);
transition:transform 0.4s ease;
}
.shtafooter a:hover{
transform:scale3d(1.2,1.2,1.2);
}
.shtafooter span{
vertical-align:middle;
}
/* Menu Icons */
.offPanel .menuIcon{
float:left;
/*display:inline-block;*/
margin:-4px 8px 0 0;
width: 36px; height: 36px;
background-position: -25px -200px;
}
.offPanel .shop{
background-position: -50px -649px;
}
.offPanel .shoptwo{
background-position: 0px -599px;
}
.offPanel .shopthree{
background-position: -100px -600px;
}
.offPanel .kayak{
background-position: -200px -649px;
}
.offPanel .kayaktwo{
background-position: -149px -649px;
}
.offPanel .calendar{
background-position: -250px -600px;
}
.offPanel .accessories{
background-position: -26px -200px;
}
.offPanel .shoe{
background-position: -25px -300px;
}
.offPanel .race{
background-position: -100px -649px;
}
.offPanel .repair{
background-position: -50px -649px;
}
.offPanel .rental{
background-position: -149px -649px;
}
.offPanel .rentaltwo{
width: 64px;
background-position: -250px -650px;
}
.offPanel .tour{
background-position: 0px -650px;
}
.offPanel .about{
background-position: -25px -150px;
}
.offPanel .map{
background-position: -150px -600px;
}
.offPanel .shoponline{
background-position: -221px -559px;
}
.offPanel .news{
background-position: -25px -350px;
}
.offPanel .service{
background-position: -25px -300px;
}
.offPanel .bodyshop{
background-position: -25px -250px;
}
.offPanel .parts{
background-position: -25px -250px;
}
.offPanel .contact{
background-position: -25px -350px;
}
.offPanel .printer{
background-position: -175px -517px;
}
.offPanel .clock{
background-position: -25px -388px;
}
.offPanel .locationB{
background-position: -290px -600px;
}
.offPanel .cup{
background-position: -221px -517px;
}
.offPanel .mail{
background-position: -175px -559px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
}
/*###########################################################################*/
/*############################## Popup Messages #############################*/
/*###########################################################################*/
.popup{
display:block;
background-color:#2e3438;
max-width:100%;
position:absolute;
width:320px;
top:40px;
left:80px;
z-index:999;
color:#ffffff;
padding:20px;
font-size:0.9rem;
transition:transform 0.4s ease;
transform:translate(0, -200px);
animation:none;
border-radius:10px;
}
.popup.open{
transform:translate(0, 0);
}
.closingCross{
position:absolute;
top:0;
right:0;
width: 60px; height: 60px;
background-position: -100px -500px;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
.popup{
width:240px;
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.popup{
top:280px;
left:40px;
transform:translate(0, -600px);
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.popup{
top:250px;
left:20px;
width:280px;
transform:translate(0, -600px);
}
}
/*###########################################################################*/
/*################################ Owl ######################################*/
/*###########################################################################*/
/*
* Core Owl Carousel CSS File
* v1.24
*/
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
/*-webkit-transform: translate3d(0px, 0px, 0px);*/
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
/*-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;*/
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
/*.grabbing {
cursor:url(img/grab.png) 8 8, move;
}*/
/* CSS3 Transitions */
.owl-origin {
-webkit-perspective: 1200px;
-webkit-perspective-origin-x : 50%;
-webkit-perspective-origin-y : 50%;
-moz-perspective : 1200px;
-moz-perspective-origin-x : 50%;
-moz-perspective-origin-y : 50%;
perspective : 1200px;
}
/* fade */
.owl-fade-out {
z-index: 10;
-webkit-animation: fadeOut .7s both ease;
-moz-animation: fadeOut .7s both ease;
animation: fadeOut .7s both ease;
}
.owl-fade-in {
-webkit-animation: fadeIn .7s both ease;
-moz-animation: fadeIn .7s both ease;
animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out {
-webkit-animation: backSlideOut 1s both ease;
-moz-animation: backSlideOut 1s both ease;
animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
-webkit-animation: backSlideIn 1s both ease;
-moz-animation: backSlideIn 1s both ease;
animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out {
-webkit-animation: scaleToFade .7s ease both;
-moz-animation: scaleToFade .7s ease both;
animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
-webkit-animation: goDown .6s ease both;
-moz-animation: goDown .6s ease both;
animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in {
-webkit-animation: scaleUpFrom .5s ease both;
-moz-animation: scaleUpFrom .5s ease both;
animation: scaleUpFrom .5s ease both;
}
.owl-fadeUp-out {
-webkit-animation: scaleUpTo .5s ease both;
-moz-animation: scaleUpTo .5s ease both;
animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
0% {opacity: 1}
}
@keyframes empty {
0% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
@keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes backSlideOut {
25% { opacity: .5; -webkit-transform: translateZ(-500px); }
75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideOut {
25% { opacity: .5; transform: translateZ(-500px); }
75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@-webkit-keyframes backSlideIn {
0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
75% { opacity: .5; -webkit-transform: translateZ(-500px); }
100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@keyframes backSlideIn {
0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
75% { opacity: .5; transform: translateZ(-500px); }
100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@-webkit-keyframes scaleToFade {
to { opacity: 0; -webkit-transform: scale(.8); }
}
@keyframes scaleToFade {
to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes goDown {
from { -webkit-transform: translateY(-100%); }
}
@keyframes goDown {
from { transform: translateY(-100%); }
}
@-webkit-keyframes scaleUpFrom {
from { opacity: 0; -webkit-transform: scale(1.5); }
}
@keyframes scaleUpFrom {
from { opacity: 0; transform: scale(1.5); }
}
@-webkit-keyframes scaleUpTo {
to { opacity: 0; -webkit-transform: scale(1.5); }
}
@keyframes scaleUpTo {
to { opacity: 0; transform: scale(1.5); }
}
/*###########################################################################*/
/*################################ Owl Theme ################################*/
/*###########################################################################*/
.owl-theme .owl-controls{
margin-top: 0px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
display: block;
width: 50px; height: 100px;
background-position: -500px -125px;
position:absolute;
left:0;
opacity:0.4;
}
.owl-theme .owl-controls .owl-buttons div.owl-next{
background-position: -500px -249px;
left:auto;
right:0;
}
.owl-buttons{
position:absolute;
top:50%;
margin-top:-50px;
width:100%;
}
.owl-theme .owl-controls .owl-buttons div:hover{
opacity:1;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
text-decoration: none;
}
/* Styling Pagination */
.owl-theme .owl-controls .owl-page{
display: inline-block;
zoom: 1;
}
.owl-theme .owl-controls .owl-page span{
display: block;
width: 20px;
height: 20px;
margin: 10px 10px;
border-radius: 20px;
border-color: #FFF;
border-style: solid;
border-width: 2px;
background-color:transparent;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
background-color: #FFF;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
/************************************ Customization *******/
/* --------- General */
.owl-carousel .owl-item img{ /* Makes the image fit its container */
display: block;
width: 100%;
height: auto;
}
.contentSlide .owl-item a{
display:block;
}
.owlCaption{
width: 100%;
text-align: center;
background-color: #000000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0.8em;
}
.owl-pagination{
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
/* --------- imgGal */
.imgGal .owl-item > a{
display:block;
margin-right: 0; /* Spacing betwen images when necessary */
}
.owl-carousel.imgGal .owl-wrapper-outer{ /* Fix overlaping images on the sides sometimes - depending on the width - for multiple images */
padding-left:1px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.imgGal .owl-pagination{
position:static;
}
/* --------- contentslide (testimonials) */
.contentSlide .owl-pagination{
position:static;
}
/* --------- fullImg */
/* --------- by ID */
#imageGallery .owl-item img{
/*max-height: 334px; /* Avoid gallery stretching on load - see settings max width + crop ratio */
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
/*.owl-buttons{
display:none;
}*/
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
/*.owl-buttons{
display:none;
}*/
}
/*###########################################################################*/
/*################################ Lightbox #################################*/
/*###########################################################################*/
/* IMAGE LIGHTBOX SELECTOR */
#imagelightbox{
cursor: pointer;
position: fixed;
z-index: 10000;
-ms-touch-action: none;
touch-action: none;
}
/* WITH ACTIVITY INDICATION (Preloader) */
#imagelightbox-loading,
#imagelightbox-loading div{
-webkit-border-radius: 50%;
border-radius: 50%;
}
#imagelightbox-loading{
width: 20px; /* 40 */
height: 20px; /* 40 */
position: fixed;
z-index: 10003;
top: 50%;
left: 50%;
padding: 10px; /* 10 */
margin: -20px 0 0 -20px; /* 20 */
/*box-shadow: 0 0 40px rgba( 0, 0, 0, .75 ); /* 40 */
}
#imagelightbox-loading div{
width: 20px; /* 20 */
height: 20px; /* 20 */
-webkit-animation: imagelightbox-loading .5s ease infinite;
-moz-animation: imagelightbox-loading .5s ease infinite;
-o-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading{
from { opacity: .5; -webkit-transform: scale( .75 ); }
50% { opacity: 1; -webkit-transform: scale( 1 ); }
to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@-o-keyframes imagelightbox-loading{
from { opacity: .5; -o-transform: scale( .75 ); }
50% { opacity: 1; -o-transform: scale( 1 ); }
to { opacity: .5; -o-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading{
from { opacity: .5; transform: scale( .75 ); }
50% { opacity: 1; transform: scale( 1 ); }
to { opacity: .5; transform: scale( .75 ); }
}
/* WITH OVERLAY */
#imagelightbox-overlay{
position:absolute;
background-color: #fff;
background-color: rgba( 255, 255, 255, .9 );
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* WITH "CLOSE" BUTTON */
#imagelightbox-close{
width: 46px; /* 40 */
height: 46px; /* 40 */
text-align: left;
text-indent: -9999px;
position: fixed;
z-index: 10002;
top: 30px; /* 40 */
right: 30px; /* 40 */
opacity:0.6;
background-position: -275px -500px;
}
#imagelightbox-close:hover{
opacity:1;
}
/* WITH CAPTION */
#imagelightbox-caption{
text-align: center;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
}
#imagelightbox-caption span{
display:inline-block;
padding: 1em; /* 10 */
background-color: #FFF;
}
/* --- ARROWS --- */
.imagelightbox-arrow{
display: block;
position: fixed;
top: 50%;
left: 30px;
z-index:99999;
width: 50px; height: 100px;
background-position: -500px -125px;
margin-top:-50px;
border-radius:5px;
opacity:0.6;
}
.imagelightbox-arrow:hover{
opacity:1;
}
.imagelightbox-arrow-right{
left: auto;
right:30px;
background-position: -500px -249px;
}
/***************************** Lightbox Customization Handles ***************/
#imagelightbox-loading{
background-color: rgba(255, 255, 255, 0.4);
}
#imagelightbox-loading div{
background-color: #FFFFFF;
}
#imagelightbox-overlay{
background-color: rgba(0,69,112,0.8);
}
#imagelightbox-caption span{
background-color: rgba(0,105,170,0.9);
color: #FFF;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
#imagelightbox-close{
top: 10px;
right: 10px;
}
.imagelightbox-arrow{
left: 10px;
}
.imagelightbox-arrow-right{
left:auto;
right:10px;
}
}
/*###########################################################################*/
/*################################## Timeline ###############################*/
/*###########################################################################*/
ul.timeline{
display:inline-block;
width:100%;
}
ul.timeline li{
margin: 0;
padding-left: 3.6em;
margin-left: 18em; /************ handle *******/
border-left-color: #F1CA24;
border-left-style: solid;
border-left-width: 10px;
padding-bottom: 2em;
position: relative;
text-align: left;
}
ul.timeline li:before{
content: '';
width: 20px;
height: 20px;
border-radius: 15px;
position: absolute;
top: -2px;
left: -20px;
background-color: #FFFFFF;
border-color: #F1CA24;
border-width: 5px;
border-style: solid;
}
ul.timeline li .eventDate{
display: block;
position: absolute;
top: -2px;
left: -14em; /************ handle *******/
width: 10em;
text-align: right;
color: #FFFFFF;
font-weight: bold;
}
ul.timeline li .eventDetails{
display:inline-block;
}
ul.timeline li .eventInfo{
display: inline-block;
background-color: #34383D;
position: relative;
padding: 20px;
margin-top: -1em;
border-radius: 3px;
background-image: url(img/60-lines.png);
color: #FFFFFF;
text-decoration: none;
}
ul.timeline li .eventInfo:before{
content:'';
position:absolute;
top:20px;
left:-18px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right:20px solid #2E3236;
}
.eventImage{
display:inline-block;
}
.eventImage img{
max-width:100%;
margin:0 0 15px 0;
}
ul.timeline li h2{
margin:0 0 15px 0;
}
ul.timeline li h2 a,
ul.timeline li h2 a:hover{
text-decoration: none;
color: #FFFFFF;
}
/* Buttons */
ul.timeline li h2 a,
ul.timeline li h2 a:hover{
text-decoration:none;
}
/* One line */
ul.timeline li.oneLine .eventInfo{
margin-top:-0.5em;
}
ul.timeline li.oneLine .eventInfo:before{
top:9px;
}
/* Separator */
ul.timeline li.separator{
padding-top:4em;
}
ul.timeline li.separator .eventDate{
font-size: 1.6em;
left: -12.4em; /************ handle *******/
font-weight: bold;
color: #F1CA24;
top: 10px;
}
ul.timeline li.separator .eventInfo,
ul.timeline li.separator:before{
display:none;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
ul.timeline li{
margin-left:16em; /************ handle *******/
}
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
ul.timeline li{
margin-left:16em; /************ handle *******/
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
ul.timeline li{
margin-left:0.5em;
}
ul.timeline li.separator .eventDate{
left:2.5em;
top:1.5em;
text-align:left;
margin-bottom:0;
}
ul.timeline li .eventDate{
position:static;
text-align: left;
font-weight:bold;
margin-bottom:0.5em;
width:auto;
}
ul.timeline li .eventInfo,
ul.timeline li.oneLine .eventInfo{
margin-top:0;
}
ul.timeline li .eventInfo:before,
ul.timeline li.oneLine .eventInfo:before{
display:none;
}
ul.timeline li{
padding-left:1.5em;
}
ul.timeline li h2{
font-size:2.2em;
}
}
/*###########################################################################*/
/*################################ Social Stream ############################*/
/*###########################################################################*/
.dcsns-content {
position: relative;
padding: 0;
}
/* Stream Boxes */
.stream p {
/*margin: 0;
padding: 0;*/
}
.stream li a {
/*color: #2DB6E8;*/
}
ul.stream li.isotope-item{
background-color: #FFFFFF;
position: relative;
padding: 0;
color: #333;
overflow:hidden;
}
.stream li .inner {
padding: 1.5em;
display:block;
float:left;
padding-top:3em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:100%;
}
/*.stream li .icon {
position: absolute;
left: 3px;
bottom: 0;
z-index: 3;
}*/
.stream li .section-intro {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0.6em;
color: #FFF;
padding-left:3em;
text-align:left;
}
.stream li .clear {
clear: both;
}
.stream li > a {
display: block;
position: absolute;
top: 4px;
left: 4px;
width: 2.4em;
height: 2.4em;
}
.stream li > a img{
width:100%;
}
/* Content blocks */
.stream li .inner > span {
display: block;
float:left;
width:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.stream li .section-intro a {
color: #FFF;
text-decoration: underline;
margin-right:0.5em;
}
.stream li .section-title {
margin-top:1em;
}
.stream li .section-title a {
}
.stream li .section-title a:hover {
}
.stream li .section-thumb {
margin-top:1em;
}
.stream li .section-thumb img {
}
.stream li .section-text {
margin-top:1em;
}
.stream li .section-text br {
}
.stream li .section-user {
margin-top:1em;
}
.stream li .section-user:before {
content:'Author:';
margin-right:0.3em;
}
.stream li .section-share {
}
/* ------------------------------------ Sharing Buttons */
.stream li .section-share a {
display: block;
width: 20px;
height: 20px;
float: left;
margin: 0 2px 0 0;
background-color: #413A33;
}
/* --------------------------- Toolbar */
.dcsns-toolbar {
padding: 0;
width: 100%;
position: relative;
display:none;
}
/* ------------------------- Filter */
.dcsns-toolbar .filter {
padding: 40px 0 33px 0;
width:100%;
text-align:center;
}
.dcsns-toolbar .filter li {
display:inline-block;
padding: 0;
margin:0 10px;
}
.dcsns-toolbar ul.filter li:before{
display:none;
}
.dcsns-toolbar .filter .link-all {
color: #fff;
text-align: center;
padding-top:0.7em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.dcsns-toolbar .filter li a {
width: 50px;
height: 50px;
display: block;
float: left;
background-color: #33373D;
border-radius: 4px;
}
.dcsns-toolbar .filter li img{
width:40px;
margin:5px 0 0 0;
}
/* ------------------------------------------------------ Feeds network specific styles */
.dcsns-toolbar .filter a.link-all:hover {
background-color: #FF9800;
text-decoration:none;
}
.stream li.dcsns-rss .section-intro, .filter .f-rss a:hover {
background-color: #FF9800;
}
.stream li.dcsns-flickr .section-intro, .filter .f-flickr a:hover {
background-color: #f90784;
}
.stream li.dcsns-delicious .section-intro, .filter .f-delicious a:hover {
background-color: #3271CB;
}
.stream li.dcsns-twitter .section-intro, .filter .f-twitter a:hover {
background-color: #4ec2dc;
}
.stream li.dcsns-facebook .section-intro, .filter .f-facebook a:hover {
background-color: #3b5998;
}
.stream li.dcsns-google .section-intro, .filter .f-google a:hover {
background-color: #2d2d2d;
}
.stream li.dcsns-youtube .section-intro, .filter .f-youtube a:hover {
background-color: #DF1F1C;
}
.stream li.dcsns-pinterest .section-intro, .filter .f-pinterest a:hover {
background-color: #CB2528;
}
.stream li.dcsns-lastfm .section-intro, .filter .f-lastfm a:hover {
background-color: #C90E12;
}
.stream li.dcsns-dribbble .section-intro, .filter .f-dribbble a:hover {
background-color: #F175A8;
}
.stream li.dcsns-vimeo .section-intro, .filter .f-vimeo a:hover {
background-color: #4EBAFF;
}
.stream li.dcsns-stumbleupon .section-intro, .filter .f-stumbleupon a:hover {
background-color: #EB4924;
}
.stream li.dcsns-deviantart .section-intro, .filter .f-deviantart a:hover {
background-color: #EB4924;
}
.stream li.dcsns-tumblr .section-intro, .filter .f-tumblr a:hover {
background-color: #365472;
}
.stream li.dcsns-instagram .section-intro, .filter .f-instagram a:hover {
background-color: #413A33;
}
/* ---------------------------------------------- Facebook */
.stream li.dcsns-facebook .section-text img {
margin: 0;
float: left;
border: none;
padding: 0;
width: 48%;
margin-right: 2%;
margin-bottom: 2%;
}
/*.stream li.dcsns-facebook .section-text a:first-of-type img {
width: 100%;
max-width: 100%;
margin-right: 0;
}*/
.stream li.dcsns-facebook .section-text .fbBigImageReplaced{
width: 100%;
max-width: 100%;
margin-right: 0;
}
/* ---------------------------------------------- Tumblr */
.stream li.dcsns-tumblr figure {
margin-bottom:1em;
}
/* -------------------------------------------- Twitter */
.stream li.dcsns-twitter .section-thumb{
display:none;
}
.stream li.dcsns-twitter .section-user {
padding: 0;
background: none;
}
.stream li.dcsns-twitter .section-text img {
width:100%;
margin-top:1em;
}
.stream li.dcsns-twitter a {
color: #38AEAE;
}
/*.stream li.dcsns-twitter a:nth-last-child(2) {
display:none;
}*/
.stream li.dcsns-twitter .section-intro span a {
text-decoration: none;
}
.stream li.dcsns-twitter .section-intro a{
color: #FFF;
}
.stream li.dcsns-twitter a:hover {
text-decoration: underline;
}
.stream li.dcsns-twitter .twitter-user { /* Hack to remove the author */
display:none;
}
.stream li.dcsns-twitter .twitter-user a {
display:inline-block;
margin-right:1em;
}
.stream li.dcsns-twitter .twitter-user a:hover {
}
.stream li.dcsns-twitter .twitter-user a strong{
}
.stream li.dcsns-twitter .twitter-user a:hover strong {
}
/* --------------------------------------------- Google */
.stream li.dcsns-google .section-title {
}
.dcsns .stream li.dcsns-google .section-thumb img {
}
.stream li.dcsns-google .meta span.plusones {
}
/* ------------------------------------------------- Rss */
.stream li.dcsns-rss .section-text img {
}
/* ------------------------------------------------- Stumbleupon */
.dcsns .stream li.dcsns-stumbleupon .section-title {
}
.dcsns .stream li.dcsns-stumbleupon .section-thumb img {
}
/* -------------------------------------------- Youtube */
.stream li.dcsns-youtube .section-thumb img {
width: 100%;
}
/* ---------------------------------------------- Vimeo */
.stream li.dcsns-vimeo .section-thumb img {
width: 100%;
}
.dcsns .stream li.dcsns-vimeo .section-title {
display: block;
clear: both;
}
.stream li.dcsns-vimeo .section-text {
}
.stream li.dcsns-vimeo .section-text .meta {
}
.stream li.dcsns-vimeo .logo {
}
/* --------------------------------------------- Flickr */
.stream li.dcsns-flickr .section-thumb {
}
.stream li.dcsns-flickr .section-thumb img{
}
/* --------------------------------------------- Pinterest */
.stream li.dcsns-pinterest .section-thumb {
display: block;
}
.stream li.dcsns-pinterest .section-text {
clear: both;
}
.stream li.dcsns-pinterest .section-thumb img {
width: 100%;
}
/* ------------------------------------------ Dribbble */
.stream li.dcsns-dribbble .inner img {
}
/* -------------------------------------------- Lastfm */
.stream li.dcsns-lastfm .section-title {
}
/* -------------------------------------------- Deviantart */
.stream li.dcsns-deviantart .section-thumb {
}
.stream li.dcsns-deviantart .section-thumb img {
}
/* ------------------------------------------ Tumblr */
.stream li.dcsns-tumblr .section-text img {
}
.stream li.dcsns-tumblr .track {
}
/* ------------------------------------------ Instagram */
.stream li.dcsns-instagram .section-thumb img {
width: 100%;
max-width: 100%;
margin-right: 0;
}
@media only screen and (min-width: 980px) and (max-width: 1190px) { /* Normal Screens */
}
@media only screen and (min-width: 720px) and (max-width: 979px) { /* Tablet Devices */
.socialpage .doubleDoughH1 {
padding: 10px 0 100px 0;
}
}
@media only screen and (max-width: 719px) { /* Mobile Devices */
.socialpage .doubleDoughH1 {
padding: 0;
}
}
/*###########################################################################*/
/*############################### CSS Animations ############################*/
/*###########################################################################*/
/* Looping ------------------------------------------------------- */
@-webkit-keyframes LoopingAnim {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-ms-keyframes LoopingAnim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes LoopingAnim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Appear from deep ------------------------------------------------- */
@-webkit-keyframes zoomIn {
0% {
-webkit-transform: scale(0.5); /* Safari and Chrome */
opacity:0;
}
100% {
-webkit-transform: scale(1); /* Safari and Chrome */
opacity:1;
}
}
@-ms-keyframes zoomIn {
0% {
-ms-transform: scale(0.5); /* IE 9 */
opacity:0;
}
100% {
-ms-transform: scale(1); /* IE 9 */
opacity:1;
}
}
@keyframes zoomIn {
0% {
transform: scale(0.5);
opacity:0;
}
100% {
transform: scale(1);
opacity:1;
}
}
/* Appear big and zoom down ----------------------------------------- */
@-webkit-keyframes zoomOut {
0% {
-webkit-transform: scale(1.5); /* Safari and Chrome */
opacity:0;
}
100% {
-webkit-transform: scale(1); /* Safari and Chrome */
opacity:1;
}
}
@-ms-keyframes zoomOut {
0% {
-ms-transform: scale(1.5); /* IE 9 */
opacity:0;
}
100% {
-ms-transform: scale(1); /* IE 9 */
opacity:1;
}
}
@keyframes zoomOut {
0% {
transform: scale(1.5);
opacity:0;
}
100% {
transform: scale(1);
opacity:1;
}
}
/******************************************* End Of CSS ********************************************/