/* bundle.css : concatenation de flexslider.css, animate.css et style.css (audit perf 2026-08-06, crp-03). Les sources restent dans css/ uniquement comme entree de regeneration du bundle, elles ne sont plus referencees par aucune page. Toute modification se fait dans le fichier source puis le bundle est regenere par concatenation dans cet ordre. Penser au bump de version ?v= dans index.html (cache edge 7 jours). */ /* ===== flexslider.css ===== */ /* * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets *********************************/ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-control-thumbs img {cursor:pointer;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {overflow:hidden; position: relative; z-index:2;} .flexslider.top_slider {min-height:564px; background-color:#ccc;} .flexslider.top_slider:before { content:''; position:absolute; z-index:3; left:0; bottom:0; width:100%; height:80px; background-image:url(../images/slider/slide_shadow.png); background-repeat:repeat-x; background-size:auto 100%; -webkit-background-size:auto 100%; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flexslider.top_slider .flex-direction-nav { position:relative; margin:0 auto; } .flexslider.top_slider .flex-direction-nav li a { position:absolute; z-index:300; bottom:50px; display:block; width:70px; height:70px; font-family:inherit; text-align:center; background-color:#fff; } .flexslider.top_slider .flex-direction-nav li a:hover {background-color:#333;} .flexslider.top_slider .flex-direction-nav li a.flex-prev {left:0;} .flexslider.top_slider .flex-direction-nav li a.flex-next {left:71px;} .flexslider.top_slider .flex-direction-nav li a:before { position:absolute; left:0; top:0; width:70px; height:70px; line-height:66px; font-size:32px; color:#333; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .flexslider.top_slider .flex-direction-nav li a.flex-prev:before {content: "\2039";} .flexslider.top_slider .flex-direction-nav li a.flex-next:before {content: "\203A";} .flexslider.top_slider .flex-direction-nav li a:hover:before {color:#fff;} /* __________ Portfolio Post Direction Nav __________ */ .flexslider.portfolio_single_slider {position:relative;} .flexslider.portfolio_single_slider .flex-direction-nav li a { position:absolute; z-index:300; top:0; bottom:0; display:block; width:200px; height:100%; font-family:inherit; text-align:center; opacity:0; } .flexslider.portfolio_single_slider .flex-direction-nav li a:hover {background:none;} .flexslider.portfolio_single_slider .flex-direction-nav li a.flex-prev {left:-50px;} .flexslider.portfolio_single_slider .flex-direction-nav li a.flex-next {right:-50px;} .flexslider.portfolio_single_slider:hover .flex-direction-nav li a.flex-prev {left:0; opacity:1;} .flexslider.portfolio_single_slider:hover .flex-direction-nav li a.flex-next {right:0; opacity:1;} .flexslider.portfolio_single_slider .flex-direction-nav li a:before { position:absolute; top:50%; width:70px; height:70px; margin-top:-35px; line-height:66px; font-size:32px; color:rgba(0,0,0,0.5); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .flexslider.portfolio_single_slider .flex-direction-nav li a.flex-prev:before {content: "\2039"; left:0;} .flexslider.portfolio_single_slider .flex-direction-nav li a.flex-next:before {content: "\203A"; right:0;} .flexslider.portfolio_single_slider .flex-direction-nav li a:hover:before {color:#fff;} /* __________ Control Navigation __________ */ .flex-control-nav { position:absolute; z-index:300; left:0; bottom:30px; width:100%; text-align:center; } .flex-control-nav li { display:inline-block; margin:0 8px; } .flex-control-nav li a { display:block; width:10px; height:10px; border-radius:50%; border:2px solid #333; background-color:#fff; font-size:0; cursor:pointer; transition: none; -webkit-transition: none; } .flex-control-nav li a.flex-active { position:relative; top:-3px; left:-3px; right:-3px; width:16px; height:16px; background-color:#333; cursor:default; } /* Pause/Play */ .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f003'; } /* Works Slider */ .flexslider.works_slider .flex-direction-nav li a { position:absolute; z-index:300; bottom:30px; display:block; width:50px; height:50px; font-family:inherit; text-align:center; background-color:#fff; } .flexslider.works_slider .flex-direction-nav li a:hover {background-color:#333;} .flexslider.works_slider .flex-direction-nav li a.flex-prev {left:20px;} .flexslider.works_slider .flex-direction-nav li a.flex-next {left:70px;} .flexslider.works_slider .flex-direction-nav li a:before { position:absolute; left:0; top:0; width:50px; height:50px; line-height:46px; font-size:32px; color:#333; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .flexslider.works_slider .flex-direction-nav li a.flex-prev:before {content: "\2039";} .flexslider.works_slider .flex-direction-nav li a.flex-next:before {content: "\203A";} .flexslider.works_slider .flex-direction-nav li a:hover:before {color:#fff;} /* Control Nav */ .flex-control-thumbs { position: absolute; z-index:200; left:0; bottom:50px; width:100%; text-align:center; } .flex-control-thumbs li { overflow:hidden; position:relative; display:inline-block; width: 100px; height:70px; margin: 0 5px; } .flex-control-thumbs img { position:asbolute; width: auto; max-width:none; height:100%; display: block; cursor: pointer; } .flex-control-thumbs li img.flex-active:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; border:5px solid #fff; } /* thumb navigation */ #carousel { position:absolute; left:0; bottom:45px; width:100%; } #carousel .slides {text-align:center;} #carousel .slides li { overflow:hidden; z-index:10 !important; float:none !important; display:inline-block !important; padding:5px 0 0; width:105px !important; height:75px !important; margin:0 2px 0 5px !important; opacity:1 !important; cursor:pointer; box-shadow:3px 3px 3px rgba(0,0,0,0.15); } #carousel .slides li.flex-active-slide:before { content:''; position:absolute; left:0; top:5px; right:0; bottom:0; border:5px solid transparent; } #carousel .slides li.flex-active-slide:before {border-color:#fff;} #carousel .slides li.flex-active-slide:after { content:''; position:absolute; left:50%; top:0; margin-left:-2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #fff; } #carousel .slides li img { width:auto; max-width:none; height:100%; } /* Caption */ .top_slider .slide1 { height:100%; background-image:url(../images/slider/slide1_bg.webp); background-size:cover; background-attachment:fixed !important; } .top_slider .slide1 .flex_caption1 { position:absolute; z-index:30; left:50%; top:45%; width:100%; margin-left:-585px; color:#fff; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .top_slider .slide1 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;} .top_slider .slide1 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:300; line-height:80px; font-size:80px;} .top_slider .slide1 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;} .top_slider .slide1 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;} .top_slider .slide2 { height:100%; background-image:url(../images/slider/slide2_bg.webp); background-size:cover; background-attachment:fixed !important; } .top_slider .slide2 .flex_caption1 { position:absolute; z-index:30; left:50%; top:45%; width:100%; margin-left:-585px; color:#fff; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .top_slider .slide2 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;} .top_slider .slide2 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:300; line-height:80px; font-size:80px;} .top_slider .slide2 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;} .top_slider .slide2 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;} .top_slider .slide3 { height:100%; background-image:url(../images/slider/slide3_bg.webp); background-repeat:no-repeat; background-size:cover; } .top_slider .slide3 .flex_caption1 { position:absolute; z-index:30; left:50%; top:45%; width:100%; margin-left:-585px; color:#fff; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .top_slider .slide3 .flex_caption1 .title1 {margin-bottom:15px; display:inline-block; font-weight:500; line-height:80px; font-size:80px;} .top_slider .slide3 .flex_caption1 .title2 {margin-bottom:15px; display:inline-block; font-weight:300; line-height:80px; font-size:80px;} .top_slider .slide3 .flex_caption1 .title3 {margin-bottom:15px; display:inline-block; font-weight:100; line-height:80px; font-size:80px;} .top_slider .slide3 .flex_caption1 .title4 {margin-bottom:15px; width:680px; font-weight:300; line-height:34px; font-size:26px;} .top_slider .slide_btn { position:absolute; z-index:110; bottom:50px; left:50%; width:171px; display:inline-block; margin-left:414px; padding:26px 30px 24px; text-transform:uppercase; font-weight:900; color:#333; background-color:#fff; } .top_slider .slide_btn:hover {background-color:#1c1c1c; color:#fff;} .top_slider .slide_btn:before { position:absolute; content: "\203A"; right:30px; top:0; width:20px; height:20px; font-family:inherit; text-align:right; line-height:66px; font-size:32px; color:#333; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .top_slider .slide_btn:hover:before {color:#fff;} /* __________ Video Slide __________ */ .slide3 .buttonBar {display:none;} #controlBar_P2 {display:none !important;} .slide3.bg { height:100%; background-image:url(../images/slider/slide3_bg.webp); background-size:cover; background-repeat:no-repeat; } #carousel .slides li .video { position:absolute; left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; background-image:url(../images/video.png); background-repeat:no-repeat; background-size:100% auto; -webkit-background-size:100% auto; } /* _________ //Video Slide _________ */ /* Flex Caption Effect */ .FadeIn, .FromTop, .FromRight, .FromBottom, .FromLeft {opacity: 0; transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out;} .captionDelay1 {transition-delay: 0.1s; -webkit-transition-delay: 0.1s;} .captionDelay2 {transition-delay: 0.2s; -webkit-transition-delay: 0.2s;} .captionDelay3 {transition-delay: 0.3s; -webkit-transition-delay: 0.3s;} .captionDelay4 {transition-delay: 0.4s; -webkit-transition-delay: 0.4s;} .captionDelay5 {transition-delay: 0.5s; -webkit-transition-delay: 0.5s;} .captionDelay6 {transition-delay: 0.6s; -webkit-transition-delay: 0.6s;} .captionDelay7 {transition-delay: 0.7s; -webkit-transition-delay: 0.7s;} .captionDelay8 {transition-delay: 0.8s; -webkit-transition-delay: 0.8s;} .captionDelay9 {transition-delay: 0.9s; -webkit-transition-delay: 0.9s;} .captionDelay10 {transition-delay: 1s; -webkit-transition-delay: 1s;} .captionDelay11{transition-delay: 1.1s; -webkit-transition-delay: 1.1s;} .captionDelay12 {transition-delay: 1.2s; -webkit-transition-delay: 1.2s;} .flexslider li.flex-active-slide .FadeIn {opacity: 1;} .flexslider li .FromTop {transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%);} .flexslider li.flex-active-slide .FromTop {opacity: 1; transform: translateY(0); -o-transform: translateY(0%); -ms-transform: translateY(0); -webkit-transform: translateY(0);} .flexslider li .FromBottom {transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%);} .flexslider li.flex-active-slide .FromBottom {opacity: 1; transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0);} .flexslider li .FromLeft {transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%);} .flexslider li.flex-active-slide .FromLeft {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);} .flexslider li .FromRight {transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%);} .flexslider li.flex-active-slide .FromRight {opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0);} /* Responsive Styles */ @media (min-width: 992px) and (max-width: 1199px) { .top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:-485px;} .top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:70px; line-height:70px;} .top_slider .slide_btn {margin-left:314px;} } @media (min-width: 768px) and (max-width: 991px) { .top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:-375px;} .top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:60px; line-height:60px;} .top_slider .slide_btn {margin-left:204px;} .top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {font-size:17px; line-height:24px; width:450px;} } @media (max-width: 767px) { .flexslider.top_slider:before {height:40px;} .top_slider .slide1 .flex_caption1, .top_slider .slide2 .flex_caption1, .top_slider .slide3 .flex_caption1 {margin-left:0; left:15px;} .top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:40px; line-height:40px;} .top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {font-size:13px; line-height:19px; width:420px;} #carousel .slides li {width:70px !important; height:55px !important; margin:0 0 0 2px !important;} .flexslider.top_slider .flex-direction-nav li a {width:50px; height:50px;} .flexslider.top_slider .flex-direction-nav li a.flex-next {left:51px;} .flexslider.top_slider .flex-direction-nav li a:before {width:50px; height:50px; line-height:46px;} .top_slider .slide_btn {padding:15px 20px 15px 5px; width:auto; left:auto; right:15px; margin:0;} .top_slider .slide_btn:before {right:5px; font-size:18px; top:-7px;} } @media (max-width: 479px) { .top_slider .slide1 .flex_caption1 .title1, .top_slider .slide1 .flex_caption1 .title2, .top_slider .slide1 .flex_caption1 .title3, .top_slider .slide2 .flex_caption1 .title1, .top_slider .slide2 .flex_caption1 .title2, .top_slider .slide2 .flex_caption1 .title3, .top_slider .slide3 .flex_caption1 .title1, .top_slider .slide3 .flex_caption1 .title2, .top_slider .slide3 .flex_caption1 .title3 {font-size:26px; line-height:26px;} .top_slider .slide1 .flex_caption1 .title4, .top_slider .slide2 .flex_caption1 .title4, .top_slider .slide3 .flex_caption1 .title4 {width:290px;} #carousel {display:none;} } /* ===== animate.css ===== */ .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.hinge { -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; } /*===================================================================================*/ /* pulse */ /*===================================================================================*/ @-webkit-keyframes pulse { 0% {-webkit-transform: scale(1);} 50% {-webkit-transform: scale(1.1);} 100% {-webkit-transform: scale(1);} } @-moz-keyframes pulse { 0% {-moz-transform: scale(1);} 50% {-moz-transform: scale(1.1);} 100% {-moz-transform: scale(1);} } @-o-keyframes pulse { 0% {-o-transform: scale(1);} 50% {-o-transform: scale(1.1);} 100% {-o-transform: scale(1);} } @keyframes pulse { 0% { transform: scale(1);} 50% { transform: scale(1.1);} 100% { transform: scale(1);} } .animated.pulse { opacity: 1; -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } /*===================================================================================*/ /* flipInX */ /*===================================================================================*/ @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .animated.flipInX { opacity: 1; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; } /*===================================================================================*/ /* fadeIn */ /*===================================================================================*/ @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .animated.fadeIn { opacity: 1; -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } /*===================================================================================*/ /* fadeInUp */ /*===================================================================================*/ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUp { opacity: 1; -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } /*===================================================================================*/ /* fadeInDown */ /*===================================================================================*/ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDown { opacity: 1; -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } /*===================================================================================*/ /* fadeInLeft */ /*===================================================================================*/ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-100px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-100px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeft { opacity: 1; -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } /*===================================================================================*/ /* fadeInRight */ /*===================================================================================*/ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(100px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(100px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRight { opacity: 1; -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } /*===================================================================================*/ /* fadeInUpBig */ /*===================================================================================*/ @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUpBig { opacity: 1; -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } /*===================================================================================*/ /* fadeInDownBig */ /*===================================================================================*/ @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDownBig { opacity: 1; -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } /*===================================================================================*/ /* fadeInLeftBig */ /*===================================================================================*/ @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeftBig { opacity: 1; -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } /*===================================================================================*/ /* fadeInRightBig */ /*===================================================================================*/ @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRightBig { opacity: 1; -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } /*===================================================================================*/ /* bounceIn */ /*===================================================================================*/ @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .animated.bounceIn { opacity: 1; -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } /*===================================================================================*/ /* bounceInUp */ /*===================================================================================*/ @-webkit-keyframes bounceInUp { 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 bounceInUp { 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 bounceInUp { 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 bounceInUp { 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 bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .animated.bounceInUp { opacity: 1; -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } /*===================================================================================*/ /* bounceInDown */ /*===================================================================================*/ @-webkit-keyframes bounceInDown { 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 bounceInDown { 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 bounceInDown { 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 bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .animated.bounceInDown { opacity: 1; -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } /*===================================================================================*/ /* bounceInLeft */ /*===================================================================================*/ @-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; } /*===================================================================================*/ /* bounceInRight */ /*===================================================================================*/ @-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; } /*===================================================================================*/ /* rotateInUpLeft */ /*===================================================================================*/ @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpLeft { opacity: 1; -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } /*===================================================================================*/ /* rotateInDownLeft */ /*===================================================================================*/ @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownLeft { opacity: 1; -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } /*===================================================================================*/ /* rotateInUpRight */ /*===================================================================================*/ @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpRight { opacity: 1; -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } /*===================================================================================*/ /* rotateInDownRight */ /*===================================================================================*/ @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownRight { opacity: 1; -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } /*===================================================================================*/ /* lightSpeedRight */ /*===================================================================================*/ @-webkit-keyframes lightSpeedRight { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedRight { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedRight { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedRight { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .animated.lightSpeedRight { opacity: 1; -webkit-animation-name: lightSpeedRight; -moz-animation-name: lightSpeedRight; -o-animation-name: lightSpeedRight; animation-name: lightSpeedRight; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedRight { opacity: 1; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } /*===================================================================================*/ /* lightSpeedLeft */ /*===================================================================================*/ @-webkit-keyframes lightSpeedLeft { 0% { -webkit-transform: translateX(-100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedLeft { 0% { -moz-transform: translateX(-100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedLeft { 0% { -o-transform: translateX(-100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedLeft { 0% { transform: translateX(-100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .animated.lightSpeedLeft { opacity: 1; -webkit-animation-name: lightSpeedLeft; -moz-animation-name: lightSpeedLeft; -o-animation-name: lightSpeedLeft; animation-name: lightSpeedLeft; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedLeft { opacity: 1; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } /*===================================================================================*/ /* rollin */ /*===================================================================================*/ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .animated.rollIn { opacity: 1; -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } .op0 { opacity: 0.01; } /* Remove lazy for mobile devices */ @media only screen and (max-width: 1024px) { .op0 { opacity: 1; } } /* ===== style.css ===== */ /*-----------------------------------------------------------------------------------*/ /* GENERAL STYLING /*-----------------------------------------------------------------------------------*/ ::selection {background: #000; color:#fff;} ::-moz-selection {background: #000; color:#fff;} footer ::selection {background: #fff; color:#000;} footer ::-moz-selection {background: #fff; color:#000;} .breadcrumbs_block ::selection {background: #fff; color:#000;} .breadcrumbs_block ::-moz-selection {background: #fff; color:#000;} .cleancode_block ::selection {background: #fff; color:#000;} .cleancode_block ::-moz-selection {background: #fff; color:#000;} body { overflow: scroll !important; overflow-x:hidden; position:relative; margin: 0; padding:0; font-family: 'Roboto', sans-serif; font-weight:300; font-size: 13px; line-height: 20px; color: #666; background-color:#fff; } ::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } #page {overflow-x:hidden; position:relative; z-index:5;} section {background-color:#fff;} .container {padding-left:0; padding-right:0;} .parallax { background-position:0 0; width:100%; background-attachment:fixed !important; } a, input, select, textarea { vertical-align:top; outline:none !important; -webkit-appearance: none; -webkit-border-radius: 0; } select:-moz-focusring { color: transparent; outline:none !important; text-shadow: 0 0 0 #000 !important; border:0 !important; } textarea {resize: none;} img { outline:0; vertical-align:top; border:0; max-width:100.1%; height:auto; } a {color:#999; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} a:hover, a:focus {text-decoration:none; color:#333;} .margbot0 {margin-bottom:0;} .margbot5 {margin-bottom:5px !important;} .margbot10 {margin-bottom:10px;} .margbot20 {margin-bottom:20px;} .margbot25 {margin-bottom:25px;} .margbot30 {margin-bottom:30px !important;} .margbot40 {margin-bottom:40px;} .margbot50 {margin-bottom:50px;} .margbot60 {margin-bottom:60px;} .margbot70 {margin-bottom:70px;} .margbot80 {margin-bottom:80px;} .pad0 {padding:0 !important;} .padbot0 {padding-bottom:0 !important;} .padbot10 {padding-bottom:10px !important;} .padbot20 {padding-bottom:20px !important;} .padbot30 {padding-bottom:30px !important;} .padbot40 {padding-bottom:40px !important;} .padbot50 {padding-bottom:50px !important;} .padbot60 {padding-bottom:60px !important;} .padbot70 {padding-bottom:70px !important;} .padbot80 {padding-bottom:80px !important;} .padtop0 {padding-top:0 !important;} .overlay { position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; background-color: rgba(48,166,124,0.5); } .relative_block {position:relative; z-index:5;} /*-----------------------------------------------------------------------------------*/ /* TYPOGRAPHY /*-----------------------------------------------------------------------------------*/ hr {border-color:#ededed;} ul, ol {padding:0; margin:0;} li {padding:0; margin:0; list-style:none;} p {margin:0 0 20px;} h1, h2, h3, h4, h5, h6 { margin-top:0; font-family: 'Roboto', sans-serif; text-transform:none; font-weight:300; color:#333; } h1 {margin:0 0 26px; line-height:46px; font-size:46px;} h2 {margin:0 0 26px; line-height:40px; font-size:40px;} h2 b {font-weight:500;} h3 {margin:0 0 21px; line-height:25px; font-size:22px;} h3 b {font-weight:900;} h4 {margin:0 0 34px; line-height:25px; font-size:20px;} h4 b {font-weight:500;} h5 {margin:0 0 15px; line-height:20px; font-size:15px;} h6 {margin:0 0 15px; line-height:20px; font-size:12px;} .center {text-align:center;} .right {text-align:right;} .color_text {color:#30a67c;} .color_dark {color:#505050;} .color_light {color:#979797;} .color_white {color:#fff;} .color_red {color:#c10707;} .color_yellow {color:#fec400;} .color_bg {background:#30a67c;} /* __________ blockquote __________ */ blockquote {position:relative; margin: 0 0 13px; padding:0 0 0 47px; border:0; font-style:italic; font-size:16px; color:#979797;} blockquote:before {content:'“'; position:absolute; left:15px; top:13px; font-style:italic; font-size:70px; color:#979797;} /*-----------------------------------------------------------------------------------*/ /* SHORTCODES /*-----------------------------------------------------------------------------------*/ /* __________ Buttons __________ */ .btn { margin: 0; padding: 24px 27px 22px; border:2px solid #ccc; border-radius: 0; box-shadow: none; text-transform:uppercase; font-weight: 900; line-height: 20px; font-size: 13px; color:#999; text-shadow: none; background-image: none !important; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .btn:focus, .btn:hover {color:#333; border-color:#333;} .btn-active {background-color:#1c1c1c; color:#fff; border-color:#1c1c1c;} .btn-active:hover {color:#fff;} .btn-lg {padding:19px 30px; font-size:18px;} .btn-sm {padding: 6px 20px 5px; font-size:13px;} .btn-xs {padding: 2px 15px 3px; font-size:11px;} .btn_shortcodes .btn {margin:0 7px 10px 0;} .btn_shortcodes .btn:last-child {margin-right:0;} .ie .btn, .ie .btn-default {filter:none !important;} /* __________ breadcrumb __________ */ .breadcrumbs_block { padding:81px 0; background-image:url(../images/clean_code_bg.jpg); background-repeat:no-repeat; background-size:cover; } .breadcrumbs_block h2 { margin-bottom:15px; line-height:80px; font-size:80px; color:#fff; } .breadcrumbs_block p { margin:0; line-height:34px; font-size:26px; color:#999; } /*-----------------------------------------------------------------------------------*/ /* HEADER /*-----------------------------------------------------------------------------------*/ header { position:relative; height:80px; background-color:#fff; } /* __________ Logo __________ */ .logo {float:left;} .logo a { text-transform:uppercase; line-height:80px; font-size:26px; color:#333; } .logo a span { display:inline-block; padding-right:18px; } .logo a span.b1 {font-weight:900;} .logo a span.b2 {font-weight:700;} .logo a span.b3 {font-weight:400;} .logo a span.b4 {font-weight:300;} .logo a span.b5 {font-weight:100;} /* __________ Menu __________ */ .menu_block { position:fixed; z-index:9999; left:0; top:0; right:0; height:80px; width:100%; background-color:#fff; box-shadow:0 2px 3px rgba(0,0,0,0.1); } .navmenu ul li { position:relative; display:inline-block; } .navmenu ul li a { display:block; margin:0 0 0 -3px; padding:30px 20px; text-transform:uppercase; font-weight:900; line-height:20px; font-size:13px; color:#666; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .navmenu li:hover a, .navmenu li.active a { color:#333; } /* Correction pour le menu mobile */ @media (max-width: 767px) { .menu_block { height: auto; } .navmenu { height: auto; max-height: calc(100vh - 80px); overflow-y: auto; } body.scrolling .navmenu { display: none !important; } } /* Sub menu */ .sub-menu ul { display: none; position: absolute; z-index: 9990; width: 180px; left: 50%; top: 100%; padding: 0; margin: 0 0 0 -90px; } .sub-menu.last ul {right:0; left:auto;} .sub-menu ul:before { content:''; position:absolute; left:50%; top:-6px; margin-left:-5px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 7px solid transparent; border-bottom: 6px solid #1c1c1c; } .sub-menu ul li { margin:0; padding:0; width:100%; border-top: 0; } .sub-menu ul li a { position:relative; margin:0; padding: 15px 5px 14px 21px; font-weight:400; text-align:left; font-size:12px; color:#999 !important; background:#1c1c1c; border-bottom:1px solid #282828; } .sub-menu ul li:last-child a {border-bottom:0;} .sub-menu ul li.active a, .sub-menu ul li a:hover {color:#fff !important; background:#161616;} /*-----------------------------------------------------------------------------------*/ /* SEARCH FORM TOP /*-----------------------------------------------------------------------------------*/ #search-form form { position:relative; height:40px; margin:20px 0 20px 19px; padding-left:49px; border-left:1px solid #ccc; font-family: FontAwesome; } #search-form form:before { content: "\f002"; position:absolute; left:29px; top:-2px; height:40px; line-height:40px; font-size:15px; color:#cccc; } #search-form input { width:42px; margin:0; padding:11px 0; text-transform:none; font-family: 'Roboto', sans-serif; font-weight:300; line-height:20px; font-size: 13px; color: #999; background: none; border: 0; box-shadow: none; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #search-form input:focus { width:140px; padding: 11px 20px 11px 0; } /*-----------------------------------------------------------------------------------*/ /* HOME /*-----------------------------------------------------------------------------------*/ #home {position:relative;} /*-----------------------------------------------------------------------------------*/ /* ABOUT /*-----------------------------------------------------------------------------------*/ #about {padding-top:70px;} /* __________ Services __________ */ .services_block {padding:7px 0 0;} .services_item { display:block; cursor:default; } .services_item p { position:relative; margin-bottom:15px; padding-bottom:19px; text-transform:none; font-weight:300; font-size:20px; color:#333; } .services_item p b {font-weight:400;} .services_item p:before { content:''; position:absolute; left:0; bottom:0; width:30px; height:2px; background-color:#ccc; } .services_item span { display:block; padding-bottom:9px; font-weight:300; font-size:14px; color:#666; } /* __________ Clean Code __________ */ .cleancode_block { padding:96px 0 78px; background-image:url(../images/clean_code_bg.jpg); background-size:cover; background-position:0 0; background-attachment:fixed !important; } .cleancode_block .tab-content { overflow:hidden; padding: 0; margin:0 0 80px; } .cleancode_block p.title { margin:0 0 17px; font-weight:100; line-height:80px; font-size:80px; color:#fff; } .cleancode_block p.title b {font-weight:500;} .cleancode_block span { font-weight:300; line-height:34px; font-size:26px; color:#999; } .cleancode_block .tab-pane { display:block; height:0; transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .cleancode_block .tab-pane.active { height:auto; transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); -webkit-transform:translateY(0); } .ie .cleancode_block .tab-pane {display:none;} .ie .cleancode_block .tab-pane.active {display:block;} .cleancode_block .nav-tabs { margin:0 -15px; border:0; } .cleancode_block .nav-tabs li { margin:0; padding:0 15px; } .cleancode_block .nav-tabs li a { width:170px; height:170px; margin:0; padding:54px 0 0; text-align:center; border:0 !important; border-radius:0; transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; } .cleancode_block .nav-tabs li a i { display:block; width:60px; height:60px; margin:0 auto; background-repeat:no-repeat; background-position:0 -60px; background-size:100% auto; -webkit-background-size:100% auto; transition: transform 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out; } .cleancode_block .nav-tabs li a.i1 i {background-image:url(../images/i1.png);} .cleancode_block .nav-tabs li a.i2 i {background-image:url(../images/i2.png);} .cleancode_block .nav-tabs li a.i3 i {background-image:url(../images/i3.png);} .cleancode_block .nav-tabs li a.i4 i {background-image:url(../images/i4.png);} .cleancode_block .nav-tabs li a.i5 i {background-image:url(../images/i5.png);} .cleancode_block .nav-tabs li a.i6 i {background-image:url(../images/i6.png);} .nav-tabs li a:hover, .nav-tabs li a:focus { background-color:transparent; } .nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus { background-color:#fff; } .nav-tabs li a:hover i { background-position:0 -120px; transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px); } .nav-tabs li.active a i { background-position:0 0; transform:translateY(-16px); -o-transform:translateY(-16px); -ms-transform:translateY(-16px); -webkit-transform:translateY(-16px); } .cleancode_block .nav-tabs li a span { display:block; font-family: 'Roboto', sans-serif; font-weight:400; line-height:20px; font-size:20px; color:#333; opacity:0; transform:translateY(-30px); -o-transform:translateY(-30px); -ms-transform:translateY(-30px); -webkit-transform:translateY(-30px); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .nav-tabs li.active a span { opacity:1; transform:translateY(-6px); -o-transform:translateY(-6px); -ms-transform:translateY(-6px); -webkit-transform:translateY(-6px); } /* __________ Multi Purpose __________ */ .purpose_block {padding:72px 0 0;} .purpose_block p { margin-bottom:26px; font-weight:300; line-height:26px; font-size:17px; color:#666; } .purpose_block .btn {margin-top:30px; margin-right:16px;} .purpose_block .btn-active {overflow:hidden;} .purpose_block .btn-active span:before { content: attr(data-hover); position: absolute; top: 100%; left:0; width:100%; text-transform:uppercase; text-align:center; font-weight: 900; line-height:20px; font-size:13px; color:#1C1C1C; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .purpose_block .btn-active:hover span:before {color:#fff;} .purpose_block .btn-active span { position: relative; display: inline-block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .purpose_block .btn-active:hover span, .purpose_block .btn-active:focus span { color:#1c1c1c; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .purpose_block .ipad_img1 {margin-top:-116px;} /*-----------------------------------------------------------------------------------*/ /* FEATURED WORKS /*-----------------------------------------------------------------------------------*/ #projects {padding-top:47px;} .work_item { position:relative; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .owl-item:hover .work_item { transform:scale(0.95); -o-transform:scale(0.95); -ms-transform:scale(0.95); -webkit-transform:scale(0.95); } .work_item .work_description { position:absolute; z-index:20; left:0; top:0; width:100%; height:100%; text-align:center; opacity:0; background-color:rgba(0,0,0,0.8); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .work_item:hover .work_description {opacity:1;} .work_item .work_description .work_descr_cont { position:absolute; left:0; top:50%; width:100%; opacity:0; transform:translateY(-100%); -o-transform:translateY(-100%); -ms-transform:translateY(-100%); -webkit-transform:translateY(-100%); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .work_item:hover .work_description .work_descr_cont { opacity:1; transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); } .work_item .work_description a { display:block; margin:0 0 6px; font-weight:300; line-height:24px; font-size:24px; color:#fff; } .work_item .work_description span { color:#666; } .work_item a.zoom { position:absolute; z-index:30; left:50%; bottom:0; width:60px; height:36px; margin-left:-30px; opacity:0; background-image:url(../images/zoom.png); background-repeat:no-repeat; background-position:0 0; background-size:100% auto; -webkit-background-size:100% auto; transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; -webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; } .work_item:hover a.zoom { bottom:56px; opacity:1; } .work_item a.zoom:hover {background-image:url(../images/zoom_h.png);} /* __________ WORKS DETAILS __________ */ #project_prev, #project_close, #project_next { position:relative; z-index:1; display: inline-block; width:50px; height:50px; margin:0 -2px 0 -3px; border:2px solid #ccc; font-family: FontAwesome; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } #project_prev:hover, #project_close:hover, #project_next:hover {z-index:2; border-color:#333;} #project_prev i, #project_close i, #project_next i { line-height:46px; font-size:26px; color:#ccc; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } #project_close i {margin:0 -2px;} #project_prev:hover i, #project_close:hover i, #project_next:hover i {color:#333;} #project_prev.first, #project_next.last {cursor:default;} #project_prev.first:hover, #project_next.last:hover {border-color:#ccc;} #project_prev.first:hover i, #project_next.last:hover i {color:#ccc;} ul.project_info li { margin-bottom:3px; font-style:italic; color:#505050; } ul.project_info li span {color:#979797;} ul.project_info li span {color:#979797;} .project_shared {padding:15px 0;} .project_shared a { display:inline-block; width:36px; height:36px; margin-right:5px; border:1px solid #ccc; text-align:center; line-height:34px; font-size:20px; color:#ccc; } .project_shared a:hover {border-color:#333; color:#333;} /* __________ Our Clients __________ */ .our_clients {padding:71px 0 78px;} .our_clients .client_img { opacity:0.5; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .our_clients .client_img:hover {opacity:1;} /*-----------------------------------------------------------------------------------*/ /* OUR TEAM /*-----------------------------------------------------------------------------------*/ #team { padding:75px 0 100px; background-image:url(../images/team_bg.jpg); background-size:cover; background-attachment:fixed !important; } .crewman_item { position:relative; margin:0 15px; } .crewman_item .crewman_descr { position:absolute; z-index:20; left:0; top:0; width:100%; height:100%; text-align:center; opacity:0; background-color:rgba(0,0,0,0.8); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .crewman_item:hover .crewman_descr {opacity:1;} .crewman_item .crewman_descr .crewman_descr_cont { position:absolute; left:0; top:50%; width:100%; opacity:0; transform:translateY(-100%); -o-transform:translateY(-100%); -ms-transform:translateY(-100%); -webkit-transform:translateY(-100%); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .crewman_item:hover .crewman_descr .crewman_descr_cont { opacity:1; transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); } .crewman_item .crewman_descr p { margin:0 0 6px; font-weight:300; line-height:24px; font-size:24px; color:#fff; } .crewman_item .crewman_descr span { color:#ccc; } .crewman_item .crewman_social { position:absolute; z-index:30; left:0; bottom:0; width:100%; opacity:0; text-align:center; transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out; -webkit-transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out; } .crewman_item .crewman_social a { display:inline-block; width:60px; height:60px; margin:0 7px 0 10px; border:2px solid #333; border-radius:50%; line-height:58px; font-size:26px; color:#333; } .crewman_item:hover .crewman_social { bottom:56px; opacity:1; } .crewman_item .crewman_social a:hover { color:#fff; border-color:#fff; } /*-----------------------------------------------------------------------------------*/ /* TESTIMONIALS /*-----------------------------------------------------------------------------------*/ #news {padding:75px 0 50px;} .testimonials{margin-bottom:77px;} .testim_content { font-weight:300; line-height:38px; font-size:26px; color:#333; } .testim_author { padding-top:46px; font-weight:300; font-size:16px; color:#666; } .testim_author b { font-weight:500; color:#333; } /*-----------------------------------------------------------------------------------*/ /* RECENT POSTS /*-----------------------------------------------------------------------------------*/ .post_item_img {position:relative;} .post_item_img:before { content:''; position:absolute; z-index:25; left:0; top:0; width:100%; height:100%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .post_item:hover .post_item_img:before {background-color:rgba(0,0,0,0.8);} .post_item_content {padding:23px 0 0;} .post_item_content a.title { font-weight:300; line-height:34px; font-size:24px; color:#333; } .post_item_inf {padding-top:2px;} .post_item_inf li { display:inline-block; padding-right:12px; color:#ccc; } .post_item_inf a { padding-right:12px; font-weight:300; font-size:14px; } .post_item_img a.link { position:absolute; z-index:30; left:50%; bottom:30%; width:60px; height:36px; margin:0 0 -18px -30px; opacity:0; background-image:url(../images/zoom.png); background-repeat:no-repeat; background-position:0 0; background-size:100% auto; -webkit-background-size:100% auto; transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; -webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; } .post_item:hover .post_item_img a.link { bottom:50%; opacity:1; } .post_item_img a.link:hover {background-image:url(../images/zoom_h.png);} /* __________ Recent Posts Small __________ */ .recent_posts_small {margin-bottom:15px;} .post_item_img_small { overflow:hidden; float:left; width:70px; height:50px; margin:2px 15px 13px 0; } .post_item_img_small img { width:auto; max-width:none; height:100%; transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; } .recent_posts_small:hover .post_item_img_small img {opacity:0.5;} .post_item_content_small a.title { display:block; line-height:17px; font-size:14px; color:#ccc; } .post_item_content_small a.title:hover {color:#666;} .post_item_inf_small li { display:inline-block; padding-top:4px; padding-right:10px; line-height:17px; font-size:11px; color:#666; } /* __________ Recent Posts Sidebar __________ */ .recent_posts_widget {margin-bottom:25px;} .post_item_img_widget { overflow:hidden; width:270px; height:180px; margin-bottom:16px; background-color:#000; } .post_item_img_widget img { width:auto; max-width:none; height:100%; transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; } .recent_posts_widget:hover .post_item_img_widget img {opacity:0.5;} .post_item_content_widget a.title { display:block; line-height:21px; font-size:18px; color:#333; } .post_item_content_widgeta.title:hover {color:#666;} .post_item_inf_widget li { display:inline-block; padding-top:12px; padding-right:10px; line-height:17px; font-size:11px; color:#999; } /*-----------------------------------------------------------------------------------*/ /* FOOTER /*-----------------------------------------------------------------------------------*/ #contacts { position: relative; z-index:0; padding:0; background:transparent; } footer { overflow:hidden; position:fixed; z-index:1; bottom:0; left:50%; width:100%; padding:60px 0 10px; color:#999; background-color:#1c1c1c; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); } footer h4 {color:#fff;} /* __________ Footer About Block __________ */ .foot_about_block p { margin-bottom:24px; padding-right:71px; line-height:24px; font-size:12px; } /*-----------------------------------------------------------------------------------*/ /* MAP /*-----------------------------------------------------------------------------------*/ #map { position:fixed; z-index:3; bottom:-100%; left:0; right:0; height:401px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #map iframe {width:100%; height:399px;} #map.showed {bottom:0;} .map_hide { position:absolute; left:50%; z-index:20; display: block; width:50px; height:50px; margin-left:525px; background-color:#333; font-family: FontAwesome; text-align:center; } .map_hide:hover {background-color:#fff;} .map_hide i { line-height:46px; font-size:26px; color:#fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .map_hide i {margin:0 -2px;} .map_hide:hover i {color:#333;} /*-----------------------------------------------------------------------------------*/ /* SOCIAL BUTTONS /*-----------------------------------------------------------------------------------*/ .social li { display:inline-block; margin:0 7px 10px 0; } .social li a { display:block; width:50px; height:50px; border:1px solid #242424; text-align:center; line-height:46px; font-size:23px; color:#333; } .social li a:hover { color:#ccc; border-color:#ccc; } /*-----------------------------------------------------------------------------------*/ /* CONTACT FORM /*-----------------------------------------------------------------------------------*/ /* __________ Contact Form __________ */ textarea, input[type="text"] { width:100%; margin:0 0 10px; padding: 10px 8px; text-transform:none; font-family: 'Roboto', sans-serif; font-weight:400; line-height:20px; font-size: 12px; color: #333; font-style:normal; border-radius: 0; background: none; border: 2px solid #242424; box-shadow: none; transition: border-color 0.3s ease-in-out; -webkit-transition: border-color 0.3s ease-in-out; } textarea { overflow:hidden; min-height:95px; resize: none; } textarea, input[type="text"].last {margin-right:0; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus { outline: 0; box-shadow: none; color:#666; border-color:#ccc; } .contact_btn { display:inline-block; cursor:pointer; margin: 0 7px 10px 0; padding:13px 30px; border: 2px solid #242424; border-radius: 0; box-shadow: 0; text-shadow:none; text-decoration:none; text-transform:uppercase; font-family: 'Roboto', sans-serif; font-weight:900; line-height:20px; font-size:13px; color:#333; background: none; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .contact_btn.active, .contact_btn:hover {background: none; color:#fff; border-color:#ccc;} .notification_error {color:#30a67c;} /*-----------------------------------------------------------------------------------*/ /* BLOG /*-----------------------------------------------------------------------------------*/ .single_page #blog {padding-top:50px;} .blog_block hr {border-top:2px solid #e9e9e9;} /* __________ Blog Post __________ */ .blog_post_img { overflow:hidden; float:left; position:relative; width:470px; height:369px; margin-right:30px; background-color:#000; } .blog_post_img img { width:auto; max-width:none; height:100%; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .blog_post:hover .blog_post_img img {opacity:0.5;} .blog_post a.zoom { position:absolute; z-index:30; left:50%; bottom:50px; width:60px; height:36px; margin:0 0 -30px -30px; opacity:0; background-image:url(../images/zoom.png); background-repeat:no-repeat; background-position:0 0; background-size:100% auto; -webkit-background-size:100% auto; transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; -webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; } .blog_post:hover a.zoom { bottom:50%; opacity:1; } .blog_post a.zoom:hover {background-image:url(../images/zoom_h.png);} .blog_post_descr hr { border-color:#e9e9e9; margin:25px 0; } .blog_post_date { margin-top:-3px; text-transform:uppercase; line-height:14px; font-size:11px; } .blog_post_title { display:block; padding-bottom:19px; line-height:36px; font-size:30px; color:#333; } .blog_post_title:hover {color:#666;} .blog_post_info li {position:relative; display:inline-block; padding-right:22px;} .blog_post_info li:before {content:''; position:absolute; right:9px; top:4px; height:12px; width:1px; background-color:#d3d3d3;} .blog_post_info li:last-child:before {display:none;} .blog_post_info li a {font-size:14px;} .blog_post_content { padding-bottom:18px; line-height:26px; font-size:17px; } .blog_post .read_more_btn { font-weight:500; font-size:16px; color:#333; } .blog_post .read_more_btn:hover {color:#666;} /* __________ Pagination __________ */ .pagination { display:block; margin:0 0 50px; padding:0; border-radius:0; } .pagination li { float:left; width:68px; height:70px; } .pagination li a { float:none; display:block; margin:0; padding:0; border:0; font-weight:900; text-align:center; line-height:68px; font-size:20px; color:#999; } .pagination li a:focus, .pagination li a:hover { background:none !important; color:#333 !important; } .pagination li.active a { border:2px solid #333 !Important; font-size:26px; color:#333 !important; background:none !important; } /* __________ Single Blog Post __________ */ .single_blog_post_date { margin:-2px 0 -4px; line-height:13px; font-size:11px; color:#999; } .single_blog_post_title { padding-bottom:12px; line-height:60px; font-size:50px; color:#333; } .single_blog_post_info {padding-bottom:20px;} .single_blog_post_info li { position:relative; display:inline-block; padding:0 25px 4px 0; } .single_blog_post_info li:before { content:''; position:absolute; right:9px; top:4px; height:12px; width:1px; background-color:#d3d3d3; } .single_blog_post_info li:last-child:before {display:none;} .single_blog_post_info li a {font-size:14px;} .single_blog_post_img img { margin-bottom:23px; width:100%; } .single_blog_post_content { line-height:26px; font-size:17px; } /* __________ Single Blog Post Tags __________ */ .single_blog_post_tags li { display:inline-block; margin:0 3px 5px 0; } .single_blog_post_tags li a { display:block; padding:9px 19px; font-size:16px; border:1px solid #e9e9e9; transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; } .single_blog_post_tags li a:hover { padding:8px 18px; border:2px solid #333; } /* __________ Comments __________ */ #comments .avatar { overflow:hidden; margin:3px 30px 0 0; width:70px; height:70px; border:1px solid #efefef; } #comments .avatar img {width:100%;} .comment_right {display:table;} .comment_info {padding-bottom:11px;} #comments .comment_author { font-weight:500; font-size:16px; color:#333; } #comments .comment_date {color:#999; font-size:11px;} #comments .comment_inf_sep { padding:0 12px; font-size:16px; color:#ccc; } #comments .comment_right p {font-size:12px;} #comment_form textarea, #comment_form input[type="text"] { padding:10px 8px 11px; border-color:#e9e9e9; text-transform:uppercase; font-size:11px; color:#666; } #comment_form textarea {min-height:140px;} #comment_form .contact_btn { background-color:#1c1c1c; color:#fff; } #comment_form .contact_btn:hover {background-color:#ccc;} .comment_note {padding-top:11px; font-size:12px;} /*-----------------------------------------------------------------------------------*/ /* Portfolio Single /*-----------------------------------------------------------------------------------*/ .single_page #portfolio {padding-top:50px;} .portfolio_block hr {border-top:2px solid #e9e9e9;} /* __________ Single Portfolio Post __________ */ .single_portfolio_post_title { padding-bottom:20px; line-height:40px; font-size:40px; color:#333; } /*-----------------------------------------------------------------------------------*/ /* SIDEBAR /*-----------------------------------------------------------------------------------*/ .sidepanel {margin-bottom:25px;} .sidebar hr { border-color:#e9e9e9; margin:25px 0; } /* __________ Widjet Meta __________ */ .widget_meta li { position:relative; padding:13px 10px 12px 30px; border-top:1px solid #e9e9e9; } .widget_meta li:last-child {border-bottom:1px solid #e9e9e9;} .widget_meta li:before { content:'°'; position:absolute; left:10px; top:20px; font-size:27px; color:#ccc; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .widget_meta li:hover:before {color:#333;} .widget_meta li a { display:inline-block; line-height:24px; font-size:20px; color:#666; } .widget_meta li a:hover {color:#333;} /* __________ Popular Tags __________ */ .widget_tags li { display:inline-block; margin:0 3px 5px 0; } .widget_tags li a { display:block; padding:9px 19px; font-size:16px; border:1px solid #e9e9e9; transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; } .widget_tags li a:hover { padding:8px 18px; border:2px solid #333; } /* __________ Text Widget __________ */ .widget_text p { line-height:26px; font-size:16px; } /* __________ Work Info __________ */ .work_info {padding-bottom:25px;} .work_info li { padding-bottom:6px; font-size:14px; color:#999; } .work_info li a {color:#333;} /* __________ Shared __________ */ .shared li { display:inline-block; margin:0 7px 10px 0; } .shared li a { display:block; width:50px; height:50px; padding:1px; border:1px solid #e9e9e9; text-align:center; line-height:46px; font-size:23px; color:#ccc; transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out; } .shared li a:hover { padding:0; color:#333; border:2px solid #242424; } /*-----------------------------------------------------------------------------------*/ /* RESPONSIVE STYLES /*-----------------------------------------------------------------------------------*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .parallax, .cleancode_block, #team, .top_slider .slide1, .top_slider .slide2, .top_slider .slide3 {background-attachment:scroll !important; background-position:0 0;} .top_slider .slide1, .top_slider .slide2, .top_slider .slide3 {background-size:cover !important;} } @media (max-width: 1024px) { } @media (min-width: 992px) and (max-width: 1199px) { .parallax, .cleancode_block, #team {background-attachment:scroll !important; background-size:100% auto !important; -webkit-background-size:100% auto !important;} h2 {font-size:35px; line-height:35px;} /* __________ Menu __________ */ .navmenu ul li a {padding-left:15px; padding-right:15px;} /* __________ Index __________ */ .cleancode_block p.title {font-size:70px; line-height:70px;} .cleancode_block .nav-tabs li a {width:136px; height:136px; padding-top:35px;} .cleancode_block .nav-tabs li a i {width:45px; height:45px;} .cleancode_block .nav-tabs li a span {font-size:16px;} .cleancode_block .nav-tabs li a i {background-position:0 -45px;} .nav-tabs li a:hover i {background-position:0 -90px; transform:translateY(-5px); -o-transform:translateY(-5px); -ms-transform:translateY(-5px); -webkit-transform:translateY(-5px);} .nav-tabs li.active a i {background-position:0 0; transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);} .purpose_block p {font-size:15px; line-height:22px;} .work_item a.zoom {width:40px; height:24px; margin-left:-20px;} .work_item:hover a.zoom {bottom:30px;} .img_wrapper {width:137px !important;} .post_item_img a.link {width:40px; height:24px; margin:0 0 -12px -20px;} .post_item_img a.link:hover {background-position:0 -24px;} .post_item_content a.title {font-size:19px; line-height:24px;} .owl-theme .owl-controls {top:-69px;} .owl-theme .owl-controls .owl-buttons div {width:50px; height:50px;} .owl-theme .owl-controls .owl-buttons div:before {width:48px; height:48px; line-height:46px;} /* __________ Blog __________ */ .blog_post_descr hr {margin:15px 0;} .blog_post_img {width:400px; height:314px;} .blog_post_title {font-size:24px; line-height:27px;} .blog_post_content {font-size:14px; line-height:22px;} .single_blog_post_title{font-size:44px; line-height:50px;} /* __________ Sidebar __________ */ .widget_meta li a {font-size:17px; line-height:20px;} .post_item_img_widget{width:220px; height:146px;} .post_item_content_widget a.title {font-size:16px; line-height:20px;} /* __________ All Styles __________ */ .breadcrumbs_block {padding:50px 0;} .map_hide {margin-left:435px;} } @media (min-width: 768px) and (max-width: 991px) { .logo a {font-size:22px;} #search-form input:focus {width:42px;} /* __________ Menu __________ */ .navmenu ul li a {padding-left:10px; padding-right:10px; font-size:12px;} /* __________ Index __________ */ .cleancode_block p.title {font-size:60px; line-height:60px;} .cleancode_block span {font-size:20px; line-height:24px;} .cleancode_block .nav-tabs li a {width:100px; height:100px; padding-top:24px;} .cleancode_block .nav-tabs li a i {width:45px; height:45px;} .cleancode_block .nav-tabs li a span {font-size:13px;} .cleancode_block .nav-tabs li a i {background-position:0 -45px;} .nav-tabs li a:hover i {background-position:0 -90px; transform:translateY(-5px); -o-transform:translateY(-5px); -ms-transform:translateY(-5px); -webkit-transform:translateY(-5px);} .nav-tabs li.active a i {background-position:0 0; transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);} .purpose_block {padding-top:35px;} .purpose_block .ipad_img1 {margin-top:-50px;} .purpose_block p {font-size:12px; line-height:20px;} .work_item a.zoom {width:40px; height:24px; margin-left:-20px;} .work_item:hover a.zoom {bottom:30px;} .img_wrapper {width:100px !important;} .post_item_img a.link {width:40px; height:24px; margin:0 0 -12px -20px;} .post_item_img a.link:hover {background-position:0 -24px;} .post_item_content a.title {font-size:15px; line-height:20px;} .post_item_content {padding-top:15px;} .post_item_inf a {font-size:12px; padding-right:5px;} .post_item_inf li {padding-right:5px;} .owl-theme .owl-controls {top:-69px;} .owl-theme .owl-controls .owl-buttons div {width:50px; height:50px;} .owl-theme .owl-controls .owl-buttons div:before {width:48px; height:48px; line-height:46px;} .crewman_item .crewman_social a {width:36px; height:36px; margin:0 2px 0 5px; font-size:17px; line-height:34px;} .crewman_item:hover .crewman_social {bottom:30px;} .testim_content {font-size:17px; line-height:24px;} /* __________ Blog __________ */ .blog_post_descr hr {margin:15px 0;} .blog_post_img {width:400px; height:314px;} .blog_post_title {font-size:24px; line-height:27px;} .blog_post_content {font-size:14px; line-height:22px;} .single_blog_post_title{font-size:44px; line-height:50px;} /* __________ Sidebar __________ */ .widget_meta li a {font-size:17px; line-height:20px;} .post_item_img_widget{width:220px; height:146px; float:left; margin-right:30px;} .post_item_content_widget a.title {font-size:16px; line-height:20px;} /* __________ All Styles __________ */ .breadcrumbs_block {padding:50px 0;} .breadcrumbs_block h2 {font-size:60px; line-height:64px;} .breadcrumbs_block p {font-size:21px; line-height:24px;} /* __________ Footer __________ */ footer {position:static; left:auto; bottom:auto; transform:none; -webkit-transform:none;} .map_hide {margin-left:325px;} .respond_clear {clear:both; height:0; font-size:0;} } @media (max-width: 767px) { .container {padding-left:15px; padding-right:15px;} h2 {font-size:30px; line-height:32px;} .logo a {font-size:22px;} #search-form input:focus {width:42px;} /* __________ Menu __________ */ a.menu_toggler {display:inline-block; float:right; margin: 20px 0 0 20px; width:40px; height:40px; text-align:center; line-height:38px; font-size:23px; color:#fff; background-color:#333;} a.menu_toggler:hover {background-color:#333;} .navmenu {position:absolute; left:0; right:0; top:80px; background-color:#fff;} .navmenu ul {padding:10px 0;} .navmenu ul li {display:block; text-align:left;} .navmenu ul li a {padding:4px 20px;} .sub-menu ul {display:block; position:static; width:100%; box-shadow:none; padding:0; margin:0;} .sub-menu ul:before {display:none !important;} .navmenu li.sub-menu:hover, .navmenu li.sub-menu.active_page {background:none;} .sub-menu ul li a {background:none; border:0; padding-left:30px;} .sub-menu ul li a:hover, .sub-menu ul li.active a {background:none !important; color:#333 !Important;} .sub-menu ul li a:before {content:'-'; position:absolute; z-index:10; left:17px; top:4px; color:#666;} /* __________ Index __________ */ .cleancode_block p.title {font-size:40px; line-height:40px;} .cleancode_block span {font-size:15px; line-height:22px;} .cleancode_block .nav-tabs {margin:0 auto; width:450px;} .cleancode_block .nav-tabs li a {width:120px; height:120px; padding-top:24px;} .cleancode_block .nav-tabs li a i {width:45px; height:45px;} .cleancode_block .nav-tabs li a span {font-size:13px;} .cleancode_block .nav-tabs li a i {background-position:0 -45px;} .nav-tabs li a:hover i {background-position:0 -90px; transform:translateY(-5px); -o-transform:translateY(-5px); -ms-transform:translateY(-5px); -webkit-transform:translateY(-5px);} .nav-tabs li.active a i {background-position:0 0; transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);} .purpose_block {padding-top:35px;} .ipad_img_in {width:350px; margin:0 auto;} .purpose_block .ipad_img1 {margin-top:40px;} .purpose_block p {font-size:12px; line-height:20px;} .work_item a.zoom {width:40px; height:24px; margin-left:-20px;} .work_item:hover a.zoom {bottom:30px;} .our_clients .row {text-align:center; margin:0 auto; width:450px;} .client_img {width:140px; display:inline-block;} .img_wrapper {width:110px !important;} .post_item_img a.link {width:40px; height:24px; margin:0 0 -12px -20px;} .post_item_img a.link:hover {background-position:0 -24px;} .post_item_content a.title {font-size:15px; line-height:20px;} .post_item_content {padding-top:15px;} .post_item_inf a {font-size:12px; padding-right:5px;} .post_item_inf li {padding-right:5px;} .owl-theme .owl-controls {top:-69px;} .testimonials .owl-theme .owl-controls {top:-49px;} .owl-theme .owl-controls .owl-buttons div {width:50px; height:50px;} .owl-theme .owl-controls .owl-buttons div:before {width:48px; height:48px; line-height:46px;} .crewman_item .crewman_social a {width:36px; height:36px; margin:0 2px 0 5px; font-size:17px; line-height:34px;} .crewman_item:hover .crewman_social {bottom:30px;} .testim_content {font-size:17px; line-height:24px;} #news .recent_posts {width:450px; margin:0 auto;} /* __________ Blog __________ */ .blog_post_descr hr {margin:15px 0;} .blog_post_img {width:200px; height:157px; margin-right:20px;} .blog_post_title {font-size:19px; line-height:22px;} .blog_post_descr hr {clear:both; border:0;} .blog_post_content {font-size:14px; line-height:22px;} .blog_post_info li a {font-size:13px;} .blog_post_info li {padding-right:15px;} .blog_post_info li:before {right:6px;} .blog_post_content {padding-top:20px;} .pagination li {width:40px; height:40px;} .pagination li a {font-size:16px; line-height:38px;} .pagination li.active a, .pagination li a:focus, .pagination li a:hover {font-size:18px;} .single_blog_post_title{font-size:44px; line-height:50px;} /* __________ Single Blog Post __________ */ .single_blog_post_date {margin:0;} .single_blog_post_title {font-size:26px; line-height:32px;} .comment_note {padding:0 0 20px;} /* __________ Sidebar __________ */ .widget_meta li a {font-size:17px; line-height:20px;} .post_item_img_widget{width:220px; height:146px; float:left; margin-right:30px;} .post_item_content_widget a.title {font-size:16px; line-height:20px;} /* __________ All Styles __________ */ .breadcrumbs_block {padding:40px 0;} .breadcrumbs_block h2 {font-size:50px; line-height:54px;} .breadcrumbs_block p {font-size:16px; line-height:20px;} /* __________ Footer __________ */ footer {position:static; left:auto; bottom:auto; transform:none; -webkit-transform:none;} .map_hide {margin:0; left:auto; right:15px;} .respond_clear {clear:both; height:0; font-size:0;} } @media (max-width: 479px) { #search-form {display:none;} /* __________ Index __________ */ h2 {font-size:26px; line-height:26px;} .purpose_block .btn {padding:10px; margin:10px 5px 0 0;} .cleancode_block p.title {font-size:26px; line-height:26px;} .cleancode_block .nav-tabs {width:290px;} .cleancode_block .nav-tabs li {padding:0;} .cleancode_block .nav-tabs li a {width:96px; height:96px;} .ipad_img_in {width:290px;} .our_clients .row {width:290px;} .testimonials .owl-theme .owl-controls {top:0;} #news .recent_posts {width:290px;} /* __________ Blog __________ */ .blog_post_img {float:none; margin:0 0 20px; width:290px; height:227px;} .blog_post_descr hr {border-bottom:2px solid #e9e9e9;} .blog_post_content {padding-top:0;} /* __________ Single Blog Post __________ */ .single_blog_post_title {font-size:17px; line-height:22px;} .single_blog_post_content {font-size:13px; line-height:20px;} /* __________ Sidebar __________ */ .post_item_img_widget {float:none; margin-right:0;} /* __________ Bootstrap Style __________ */ .col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11 {float: left;} .col-ss-12 {width: 100%;} .col-ss-11 {width: 91.66666666666666%;} .col-ss-10 {width: 83.33333333333334%;} .col-ss-9 {width: 75%;} .col-ss-8 {width: 66.66666666666666%;} .col-ss-7 {width: 58.333333333333336%;} .col-ss-6 {width: 50%;} .col-ss-5 {width: 41.66666666666667%;} .col-ss-4 {width: 33.33333333333333%;} .col-ss-3 {width: 25%;} .col-ss-2 {width: 16.666666666666664%;} .col-ss-1 {width: 8.333333333333332%;} } /* * * ========================================== * Pricing Table * ========================================== * */ .rounded-lg { border-radius: 1rem !important; } .text-small { font-size: 0.9rem !important; } .custom-separator { width: 5rem; height: 6px; border-radius: 1rem; } .text-uppercase { letter-spacing: 0.2em; } .background-img-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.2; background: no-repeat center; background-size: cover; z-index: -1; } .background-img-container { overflow: hidden; position: relative; z-index: -2; } .btn_linkedin { background-color: #0e76a8; border: 0 solid #E5E7EB; box-sizing: border-box; color: #ffffff; display: flex; font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 700; justify-content: center; line-height: 1.75rem; padding: .75rem 1.65rem; position: relative; text-align: center; text-decoration: none #ffffff solid; text-decoration-thickness: auto; width: 100%; max-width: 460px; position: relative; cursor: pointer; transform: rotate(-2deg); user-select: none; -webkit-user-select: none; touch-action: manipulation; } .btn_linkedin:focus { outline: 0; } .btn_linkedin:after { content: ''; position: absolute; border: 1px solid #000000; bottom: 4px; left: 4px; width: calc(100% - 1px); height: calc(100% - 1px); } .btn_linkedin:hover:after { bottom: 2px; left: 2px; } @media (min-width: 768px) { .btn_linkedin { padding: .75rem 3rem; font-size: 1.25rem; } } /* === Sans JavaScript : le premier slide du hero (et son h1) reste visible. La regle .no-js .slides > li:first-child {display:block} vient de flexslider.css, on neutralise ici les animations de captions (revue adversariale 2026-08-07). === */ .no-js .top_slider, .no-js .top_slider .slides li:first-child {height: auto; min-height: 480px;} .no-js .flexslider .slides > li:first-child .FadeIn, .no-js .flexslider .slides > li:first-child .FromTop, .no-js .flexslider .slides > li:first-child .FromRight, .no-js .flexslider .slides > li:first-child .FromBottom, .no-js .flexslider .slides > li:first-child .FromLeft {opacity: 1; transform: none; -webkit-transform: none;} /* === Rendu immediat du hero avant l'init flexslider : sans ces regles la page se peint d'abord sans le slider (li en display:none, hauteur nulle) puis tout le contenu saute quand flexslider s'initialise (retour utilisateur 2026-08-07). Flexslider pose ensuite ses styles inline et reprend la main, homeHeight() ajuste la hauteur au resize. === */ .top_slider, .top_slider .slides > li:first-child {height: calc(100vh - 80px);} .flexslider .slides > li:first-child {display: block;}