/****************************************************************************************************************************** HEADER *******************************************************************************************************************************/ .cs-bg { background: url("../img/slider/1.jpg") no-repeat scroll 0 0 / cover; } #header .container{ color: #FFF; text-align: center; position: relative; z-index: 2; padding: 80px 0; } .timer_box{ margin: 35px 24px; display: inline-block; padding: 16px 12px; text-align: center; width: 130px; border-radius: 10%; border: 1px solid rgba(255, 255, 255, .6); } .timer_box h1{ font-size: 48px; margin-top: 5px; margin-bottom: 0px; font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; color: white; } .timer_box p{ margin-top: 0px;} #layer{ background-color: rgba(0, 0, 0, .2); left: 0; top: 0; width: 100%; height: 100%; position: fixed; z-index: 1; } #slider{ width: 100%; position: fixed; background-color: #2c3e50; top: 0; left: 0; z-index: 0; padding:0; } .mt { margin-top: 30px; } .centered { text-align: center; } .floatless { float: none !important; font-size: 35px !important; color: #fff !important; } /****************************************************************************************************************************** RESPONSIVE *******************************************************************************************************************************/ @media only screen and (max-width: 520px) { .timer_box{ margin: 0 12px 12px 0;} .tp-bullets{display: none;} #header .container{padding: 20px 0px 20px 0} #header-button{ display: none;} #appendedInputButtons{ border-radius: 20px; margin-bottom: 25px; } #slider{display: none;} .btn-subscribe{border-radius: 20px;} #contact-informations{margin-top: 24px;} body { background-color: #2c3e50; } } @media only screen and (max-width: 740px) { .timer_box{ width: 100px; padding: 16px 0 0 0; margin: 35px 12px; } #layer{display: none;} .timer_box h1{ font-size: 28px;} h1{ font-size: 36px;} } /****************************************************************************************************************************** ANIMATIONS *******************************************************************************************************************************/ .animated { opacity: 0; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.GoIn { opacity: 1; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-name: GoIn; -moz-animation-name: GoIn; -o-animation-name: GoIn; animation-name: GoIn; } .animated.FadeIn { opacity: 1; -webkit-animation-duration: .8s; -moz-animation-duration: .8s; -ms-animation-duration: .8s; -o-animation-duration: .8s; animation-duration: .8s; -webkit-animation-name: FadeIn; -moz-animation-name: FadeIn; -o-animation-name: FadeIn; animation-name: FadeIn; } @-webkit-keyframes GoIn { 0% {opacity: 0;-webkit-transform: translateY(-2000px);} 60% {opacity: 1;-webkit-transform: translateY(30px);} 80% {-webkit-transform: translateY(-10px);} 100% {-webkit-transform: translateY(0);} } @-moz-keyframes GoIn { 0% {opacity: 0; -moz-transform: translateY(-2000px);} 60% {opacity: 1; -moz-transform: translateY(30px);} 80% {-moz-transform: translateY(-10px);} 100% {-moz-transform: translateY(0);} } @-o-keyframes GoIn { 0% {opacity: 0; -o-transform: translateY(-2000px);} 60% {opacity: 1; -o-transform: translateY(30px);} 80% {-o-transform: translateY(-10px);} 100% {-o-transform: translateY(0);} } @keyframes GoIn { 0% {opacity: 0; transform: translateY(-2000px);} 60% {opacity: 1; transform: translateY(30px);} 80% {transform: translateY(-10px);} 100% {transform: translateY(0);} } @-webkit-keyframes FadeIn { 0% {opacity: 0} 30% {opacity: .3;} 60% {opacity: .6;} 100% {opacity: 1;} } @-moz-keyframes FadeIn { 0% {opacity: 0} 30% {opacity: .3;} 60% {opacity: .6;} 100% {opacity: 1;} } @-o-keyframes FadeIn { 0% {opacity: 0} 30% {opacity: .3;} 60% {opacity: .6;} 100% {opacity: 1;} } @keyframes FadeIn { 0% {opacity: 0} 30% {opacity: .3;} 60% {opacity: .6;} 100% {opacity: 1;} } @-webkit-keyframes InfiniteTurn { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}; } @-moz-keyframes InfiniteTurn { 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}; } @-o-keyframes InfiniteTurn { 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}; } @-keyframes InfiniteTurn { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .animated.bounceInLeft { opacity: 1; -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .animated.bounceInRight { opacity: 1; -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInTop { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInTop { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInTop { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @-ms-keyframes bounceInTop { 0% { opacity: 0; -ms-transform: translateY(2000px); } 60% { opacity: 1; -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px); } 100% { -ms-transform: translateY(0); } } @keyframes bounceInTop { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .animated.bounceInTop { opacity: 1; -webkit-animation-name: bounceInTop; -moz-animation-name: bounceInTop; -o-animation-name: bounceInTop; animation-name: bounceInTop; } @-webkit-keyframes bounceInBottom { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInBottom { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInBottom { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInBottom { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .animated.bounceInBottom { opacity: 1; -webkit-animation-name: bounceInBottom; -moz-animation-name: bounceInBottom; -o-animation-name: bounceInBottom; animation-name: bounceInBottom; } /****************************************************************************************************************************** PLUGINS *******************************************************************************************************************************/ /* Preloader */ #preloader { position:absolute; top:0; left:0; right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */ z-index:99999; /* makes sure it stays on top */ } #status { width:200px; height:200px; position:absolute; left:50%; /* centers the loading animation horizontally one the screen */ top:50%; /* centers the loading animation vertically one the screen */ background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; /* is width and height divided by two */ } /* SLIDER */ .rev_slider_wrapper{ position:relative;} .rev_slider_wrapper >ul { visibility:hidden;} .rev_slider img{ max-width:none !important; -moz-transition: none 0 !important; -webkit-transition: none 0 !important; -o-transition: none 0 !important; transition: none 0 !important; margin:0px !important; padding:0px !important; border-width:0px !important; border:none; visibility:visible !important; } .rev_slider .no-slides-text{ font-weight:bold; text-align:center; padding-top:80px; } .rev_slider ul{ margin:0px !important; padding:0px !important; list-style: none !important; list-style-type: none !important; background-position:0px 0px !important; } .rev_slider ul li,.rev_slider >ul >li,.rev_slider >ul >li:before{ list-style:none !important; position:absolute; visibility:hidden; margin:0px !important; padding:0px !important; overflow-x: visible; overflow-y: visible; list-style-type: none !important; background-image:none !important; background-position:0px 0px !important; text-indent: 0em !important; } .tp-bannertimer{ width: 100%; border-radius: 0 5px 5px 0; height: 2px; z-index: 200; position: absolute; visibility: visible !important; bottom: 0; background-color: rgba(255, 255, 255, .6); } .tp-bullets { z-index:1000; position:absolute; left: 90% !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out; } .tp-bullets.simplebullets.round .bullet { cursor:pointer; position:relative; border: 3px solid rgba(255, 255, 255, .6); width:20px; height:20px; margin-right:0px; float:left; border-radius: 50%; margin-top:-10px; margin-left:3px; } .tp-bullets.simplebullets.round .bullet.selected{ background: #FFF; border-color: #FFF; } .tp-bullets.simplebullets.round .bullet:hover{ border-color: #FFF; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } .tp-bullets.simplebullets.round .bullet.last { margin-right:3px;}