/* ======
GLOBAL
/* ====== */
html, body, #wrapper{
width: 100%;
height: 100%;
position: relative;
}
body{
overflow-x: hidden;
}
#main{
min-height: 100%;
position: relative;
}
/* =======
Z-INDEX
/* ======= */
.site-header{
z-index: 100;
}
#main{
z-index: 50;
}
/* =============
GRID SETTINGS
/* ============= */
.section-inner.strict{
max-width: 1200px;
}
/* Default grid */
.section-inner{
max-width: 1320px;
margin: 0 auto;
position: relative;
}
.half-section{
max-width: 660px;
width: 100%;
}
.half-section.left{
float: right;
}
.half-section.right{
float: left;
}
.no-grid{
padding:0 60px;
}
.grid, .grid-item{
padding-left: 30px;
padding-right: 30px;
position:relative;
}
/* Full grid */
.grid.full{
padding:0;
}
.grid.full, .grid.full .grid-item:not(.grid-item-content) {
padding-left: 0;
padding-right: 0;
}
/* LG grid */
.section-inner.lg{
Xmax-width: 1360px;
}
.grid.lg{
padding-left: 20px;
padding-right: 20px;
}
.grid.lg .grid-item{
padding-left: 40px;
padding-right: 40px;
}
/* SM grid */
.section-inner.sm{
Xmax-width: 1280px;
}
.grid.sm{
padding-left: 40px;
padding-right: 40px;
}
.grid.sm .grid-item{
padding-left: 20px;
padding-right: 20px;
}
/* Square grid */
.grid.square .grid-item{
position: relative;
}
.grid.square .grid-item:after {
content: "";
display: block;
padding-bottom: 100%;
}
.grid.square .grid-item .grid-cont{
position: absolute;
width: 100%;
height: 100%;
}
@media screen and (max-width: 1024px){
.half-section.right, .half-section.left{
float: none;
}
}
@media screen and (min-width: 721px) and (max-width: 1024px){
.tablet-grid-100,
.tablet-grid-50,
.tablet-mt{
margin-top: 40px;
}
.tablet-grid-100:first-of-type,
.tablet-grid-50:nth-of-type(1), .tablet-grid-50:nth-of-type(2){
margin-top: 0;
}
.grid, .grid.lg, .grid.sm,
.grid .grid-item, .grid.lg .grid-item, .grid.sm .grid-item{
padding-left: 20px;
padding-right: 20px;
}
.no-grid{
padding:0 40px;
}
}
@media screen and (max-width: 720px) {
.mobile-grid-100,
.mobile-grid-50,
.mobile-mt{
margin-top: 20px;
}
.mobile-grid-100:first-of-type,
.mobile-grid-50:nth-of-type(1), .mobile-grid-50:nth-of-type(2){
margin-top: 0;
}
.grid, .grid.lg, .grid.sm,
.grid .grid-item, .grid.lg .grid-item, .grid.sm .grid-item{
padding-left: 10px;
padding-right: 10px;
}
.no-grid{
padding:0 20px;
}
}
/* ====
TYPO
/* ==== */
/* Font families */
body, p, li, a, h1, h3, h4{
font-family: 'Lato', sans-serif;
}
body, p, li, a{
font-weight: 300;
}
h2,{
font-family: 'Raleway', sans-serif;
}
/* Font colors */
body, p, li, a, h3, a.btn-grey, .btn-grey{
color: #597A96;
}
h1, .white{
color: #FFF;
}
h4, h2, i,
a.btn, .btn,
.blue{
color: #21B5EA;
}
.blue-md{
color:#0075BF;
}
.blue-dark{
color: #00457B;
}
a.btn-grey, .btn-grey{
color: #597A96;
}
/* Font size */
html {
font-size: 62.5%;
}
body, p, li, h4{
font-size: 18px !important;
font-size: 1.8rem !important;
}
body, p, li, a, h4{
line-height: 30px;
line-height: 3.0rem;
}
.cdpx-sl-slide-content p,
.cdpx-sl-slide-content li{
font-size: 16px !important;
font-size: 1.6rem !important;
line-height: 24px;
line-height: 2.4rem;
}
small{
font-size: 12px;
font-size: 1.2rem;
}
h1{
font-size: 40px;
font-size: 4.0rem;
line-height: 50px;
line-height: 5.0rem;
font-weight: 900;
text-transform: uppercase;
text-align: center;
}
h2{
font-size: 36px;
font-size: 3.6rem;
line-height: 50px;
line-height: 5.0rem;
font-weight: 600;
text-transform: uppercase;
text-align: center;
}
h3{
font-size: 24px;
font-size: 2.4rem;
line-height: 34px;
line-height: 3.4rem;
font-weight: 700;
text-transform: uppercase;
}
h4{
font-weight: 700;
}
a.btn, .btn,
.site-header nav li a{
font-size: 13px;
font-size: 1.3rem;
letter-spacing: 1.5px;
}
i, .italic{
font-style: italic;
}
b, strong, .bold{
font-weight: 700;
}
q{
font-size: 26px;
line-height: 36px;
quotes: "“ " " ”" "‘" "’";
}
q:before {
content: open-quote;
font-size: 50px;
}
q:after {
content: close-quote;
font-size: 50px;
}
/* Margins */
p:not(:first-child){
margin-top: 19px;
}
/* SPECIFIC SETTINGS */
h1 span{
display: block;
font-size: 37px;
font-size: 3.7rem;
line-height: 48px;
line-height: 4.8rem;
}
h2{
position: relative;
padding-bottom: 60px;
margin-bottom: 60px;
background-position: center bottom;
background-repeat: no-repeat;
}
#bureau h2 {
background-image: url(../img/items/sprites.png);
background-position: center -104px;
}
#missions h2 {
background-image: url(../img/items/sprites.png);
background-position: center -214px;
}
#clients h2 {
background-image: url(../img/items/sprites.png);
background-position: center -324px;
}
#etudes h2 {
background-image: url(../img/items/sprites.png);
background-position: center -434px;
}
#contact h2 {
background-image: url(../img/items/sprites.png);
background-position: center -544px;
}
/*
h2::after{
content: '';
display: block;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -40px;
width: 80px;
height: 4px;
background-color: #0075BF;
}
h2.white::after{
background-color: #FFF;
}
*/
@media screen and (max-width: 1024px) and (min-width: 721px) {
body, p, li{
font-size: 17px !important;
font-size: 1.7rem !important;
}
body, p, li{
line-height: 25px;
line-height: 2.5rem;
}
h1{
font-size: 38px;
font-size: 3.8rem;
line-height: 45px;
line-height: 4.5rem;
}
h2{
font-size: 27px;
font-size: 2.7rem;
line-height: 35px;
line-height: 3.5rem;
}
h3{
font-size: 20px;
font-size: 2.0rem;
line-height: 25px;
line-height: 2.5rem;
}
}
@media screen and (max-width: 720px) {
body, p, li{
font-size: 16px !important;
font-size: 1.6rem;
}
body, p, li{
line-height: 23px;
line-height: 2.3rem !important;
}
h1{
font-size: 33px;
font-size: 3.3rem;
line-height: 40px;
line-height: 4.0rem;
}
h2{
font-size: 24px;
font-size: 2.4rem;
line-height: 30px;
line-height: 3.0rem;
}
h3{
font-size: 18px;
font-size: 1.8rem;
line-height: 2.3px;
line-height: 2.3rem;
}
.italic{
font-size: 15px;
font-size: 1.5rem;
}
}
/* =========
BG-COLORS
/* ========= */
/*
ORANGE:
#FF7300;
BLUE:
#21B5EA;#0075BF;
BLUE DARK:
#116798;
BLUE LIGHT:
#36A8E0;
*/
.bg-white {background-color: #FFFFFF;}
.bg-blue {background-color: #21B5EA;}
.bg-blue-md,
a.btn.bg-blue:hover {background-color: #0075BF;}
.bg-blue-dark {background-color: #00457B;}
.bg-grey-light {background-color: #F1F1F1;}
.bg-transparent {background-color: transparent;}
/* ================
LINKS & BUTTTONS
/* ================ */
a, a:visited, a:hover, a:active, a:link{
text-decoration:none;
cursor: pointer;
outline: none;
}
a.btn, .btn{
cursor: pointer;
display: inline-block;
padding: 6px 30px;
border-radius: 8px;
margin: 6px 0;
border: 1px solid #21B5EA;
text-transform: uppercase;
font-weight: bold;
}
a.btn:hover, .btn:hover{
color: white;
background-color: #21B5EA;
}
a.btn-grey, .btn-grey{
border: 1px solid #597A96;
}
a.btn-grey:link:hover{
border: 1px solid #21B5EA;
color: #21B5EA;
background-color: transparent;
}
p + a.btn{
margin-top: 30px;
}
/* =====
LISTS
/* ===== */
li{
list-style: none
}
.bullets li{
display: block;
position: relative;
padding: 9px 20px 8px 20px;
line-height: 23px;
line-height: 2.3rem;
}
.bullets li::before{
content: '';
display: block;
position: absolute;
left: 0;
top: 18px;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: #71706E;
}
@media screen and (max-width: 1024px) and (min-width: 721px) {
.bullet-list li, .bsk-special-pdfs-container li{
padding: 0 0 0 45px;
line-height: 30px;
background-position: 0 5px;
}
.bsk-special-pdfs-container li{
padding: 0 0 0 0px;
background-position: 0 center;
background-size: 25px 32px;
}
}
@media screen and (max-width: 720px) {
.bullet-list li{
padding: 0 0 0 35px;
line-height: 22px;
background-position: 0 1px;
Xborder: 1px solid red;
}
.bsk-special-pdfs-container li{
padding: 0 0 0 0px;
background-position: 0 center;
background-size: 25px 32px;
}
.bsk-special-pdfs-container li a{
padding-left: 35px
}
}
/* =====
FORMS
/* ===== */
label{
display: block;
padding: 20px 0;
}
label span{
color: red;
}
input, textarea{
border: 1px solid #bbb;
width: 100%;
height: 40px;
line-height: 40px;
border-radius: 0;
padding: 0 50px 0 10px;
}
textarea{
padding: 10px;
min-height: 100px;
}
input[type="submit"]{
width: 120px;
height: 40px;
line-height: 40px;
border-radius: 0;
background-color: red;
color: #fff;
text-align: center;
}
.loading{
display: none;
height: 40px;
width: 40px;
background-image: url(assets/img/items/loading.gif);
background-position: center center;
background-size: cover;
}
/* JQUERY FORM STYLE */
form .help-block{
display: none;
}
form .error{
border: 1px solid red !important;
background-image: url(assets/img/items/invalid.png);
background-repeat: no-repeat;
background-position: right top;
}
/* ========
SECTIONS
/* ======== */
section{
padding: 130px 0;
position: relative;
}
section.no-pb{
padding-bottom: 0;
}
section.half-pb{
padding-bottom: 30px;
}
@media screen and (max-width: 1024px) and (min-width: 721px) {
section{
padding: 75px 0;
position: relative;
}
section.half-pb{
padding-bottom: 20px;
}
}
@media screen and (max-width: 720px) {
section{
padding: 50px 0;
position: relative;
}
section.half-pb{
padding-bottom: 10px;
}
}
/* ======
TABLES
/* ====== */
table{
width: 100%;
border-collapse: collapse;
}
table td{
padding: 10px;
border: 1px solid #DDD;
}
.cell{
display: table-cell;
}
.cell.full{
height: 100%;
width: 100%;
vertical-align: middle;
text-align: center;
}
/* ==============
PAGE STRUCTURE
/* ============== */
#main{
Xmargin-top: 80px;
}
/* ============
HEADER & NAV
/* ============ */
.site-header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
box-shadow: 0 0 3px #aaa;
}
.site-header .section-inner{
height: 100%;
}
.logo-header{
position: absolute;
top: 0;
left: 0;
height: 80px;
padding: 10px 0;
}
.logo-header img{
height: 100%;
}
.site-header nav{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.site-header nav li{
float: left;
}
.site-header nav li a{
position: relative;
display: block;
height: 80px;
line-height: 80px;
padding: 0 20px;
text-transform: uppercase;
font-weight: bold;
}
.site-header nav li a:hover, .site-header nav li a.current{
color: #21B5EA;
}
.site-header nav li a:hover::after, .site-header nav li a.current::after{
content: '';
display: block;
position: absolute;
bottom: 0;
left: 20px;
width: calc( 100% - 40px );
height: 6px;
background-color: #21B5EA;
}
.jScrolled .site-header, .site-header,
.jScrolled .logo-header, .logo-header,
.jScrolled .site-header nav li a, .site-header nav li a,
.jScrolled #accueil, #accueil{
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out;
}
@media screen and (max-width: 1024px) {
.menu-trigger{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background-image:url(../img/items/menu-mobile.png);
background-position: 0 0;
}
.menu-trigger.active{
background-position: 0 -60px;
}
.site-header nav{
display:none;
position: absolute;
top: 60px;
right: 0;
height: auto;
width: 100%;
background-color: white;
border: 1px solid #ccc;
}
.site-header nav li{
float: none;
width: 100%;
}
.site-header nav li{
position: relative;
display: block;
height: 60px;
line-height: 60px;
text-align: center;
}
.site-header nav li a{
height: 60px;
line-height: 60px;
font-size: 16px !important;
font-size: 1.6rem !important;
padding: 0 8px;
text-align: center;
color:#fff;
text-transform: uppercase;
font-weight: bold;
background-color: #21B5EA;
transition: none !important;
}
.site-header nav li a.current{
color: #FFF;
}
.site-header nav li a:hover::after, .site-header nav li a.current::after{
display: none;
}
.site-header nav li a:hover, .nav-phone span:hover{
background-color: #0075BF;
color: #FFF;
transition: none;
}
a.nav-phone:hover{
background-color: #21B5EA !important;
}
.site-header{
height: 60px;
}
.logo-header{
height: 60px;
padding: 5px 0;
}
.nav-phone{
height: 90px !important;
line-height: 90px !important;
}
.nav-phone span{
display: inline-block;
margin: 0px auto;
border: 1px solid white;
width: 220px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 8px;
padding: 0;
}
.nav-phone span:hover{
background-color: white;
color: #21B5EA;
}
}
@media screen and (max-width: 720px) {
.site-header nav li a{
transition: none !important;
}
.site-header nav li a:hover, .site-header nav li a.current{
transition: none !important;
}
}
/* ======
FOOTER
/* ====== */
.site-footer{
position: relative;
min-height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
}
.site-footer a{
color: #fff;
}
.site-footer a:hover{
text-decoration: underline;
}
.site-footer, .site-footer a{
font-size: 16px;
font-style: 1.6rem;
}
.site-footer .scroll-nav{
display: block;
position: absolute;
top: 10px;
right: 10px;
height: 40px;
width: 40px;
background-image: url(../img/items/footer-fleche.png);
background-position: 0 0;
}
.site-footer .scroll-nav:hover{
background-position: 0 -40px;
}
@media screen and (max-width: 1024px) {
.site-footer{
line-height: 30px;
padding: 20px 0;
}
}
/* =======
SLIDERS
/* ======= */
/* GENERAL */
.cdpx-sl{
position: relative;
height: 100px;
Xborder: 1px solid grey;
padding: 20px 60px 70px 60px;
margin-top: -20px;
}
/* GRID */
.cdpx-sl-container{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.cdpx-sl-grid{
position: relative;
height: 100%;
width: 100%;
left: 0;
overflow: visible;
}
.cdpx-sl-slide{
Xborder: 1px solid purple;
height: 100%;
width: 100%;
float:left;
padding: 20px 20px;
}
#cdpx-sl-1 .cdpx-sl-slide-content,
#cdpx-sl-3 .cdpx-sl-slide-content{
box-shadow: 0 0.125em 0.5em 0 rgba(4, 49, 64, 0.1);
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#cdpx-sl-1 .cdpx-sl-slide-content:hover,
#cdpx-sl-3 .cdpx-sl-slide-content:hover{
box-shadow: 0 0 20px rgba(4, 49, 64, 0.2);
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
/* NAV */
.cdpx-sl-nav-arrow, .cdpx-sl-nav-bullets{
position: absolute;
cursor: pointer;
}
.cdpx-sl-nav-arrow{
top: 50%;
margin-top: -20px;
height: 40px;
width: 40px;
border: none;
background-color: transparent;
background-image: url(../img/items/slider-fleche.png);
}
.cdpx-sl-nav-prev{
left: 0;
}
.cdpx-sl-nav-next{
right: 0;
}
.cdpx-sl-nav-bullets{
bottom: 0;
left: 50%;
margin-left: -40px;
width: 80px;
height: 20px;
}
.cdpx-sl-nav-bullets-container{
position: relative;
height: 100%;
width: 100%;
}
.cdpx-sl-nav-bullets-cursor{
position: absolute;
top:0 ;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}
.cdpx-sl-nav-bullet{
float: left;
display: block;
}
@media screen and (max-width: 720px) {
.cdpx-sl{
padding: 0;
}
.cdpx-sl-nav-arrow{
top: auto;
bottom: 0;
height: 40px;
width: 40px;
z-index: 9999;
}
.cdpx-sl-nav-prev{
left: 0;
}
.cdpx-sl-nav-next{
right: 0;
}
}
#cdpx-sl-1 .cdpx-sl-nav-bullet, #cdpx-sl-3 .cdpx-sl-nav-bullet{
width: 25px;
height: 20px;
background-image: url(../img/items/slider-puce.png);
background-repeat: no-repeat;
background-position: center 0;
}
#cdpx-sl-1 .cdpx-sl-nav-bullet.visible, #cdpx-sl-3 .cdpx-sl-nav-bullet.visible,
#cdpx-sl-1 .cdpx-sl-nav-bullet:hover, #cdpx-sl-3 .cdpx-sl-nav-bullet:hover{
background-position: center -20px;
}
#cdpx-sl-1 .cdpx-sl-nav-bullets-cursor, #cdpx-sl-3 .cdpx-sl-nav-bullets-cursor{
display: none;
}
/* Content */
/* SLIDER 1 */
#cdpx-sl-1{
height: 730px;
}
#cdpx-sl-1 .cdpx-sl-nav-bullets{
bottom: 0;
left: 50%;
margin-left: -50px;
width: 100px;
height: 15px;
}
#cdpx-sl-1 .cdpx-sl-nav-prev {background-position: 0 -80px;}
#cdpx-sl-1 .cdpx-sl-nav-next {background-position: -40px -80px;}
#cdpx-sl-1 .cdpx-sl-nav-prev:hover {background-position: 0 -120px;}
#cdpx-sl-1 .cdpx-sl-nav-next:hover {background-position: -40px -120px;}
#cdpx-sl-1 .cdpx-sl-slide-content{
width: 360px;
max-width: 360px;
height: 100%;
margin: 0 auto;
background-color: white;
text-align: center;
}
#cdpx-sl-1 .cdpx-sl-slide-content header{
padding: 15px;
min-height: 204px;
}
#cdpx-sl-1 .cdpx-sl-slide-content h3{
text-transform: none;
}
#cdpx-sl-1 .cdpx-sl-slide-content img{
margin: 0 auto 20px auto;
}
#cdpx-sl-1 .cdpx-sl-slide-content p{
padding: 15px;
}
#cdpx-sl-1 .cdpx-sl-slide-content p span:not(:first-child){
margin-top: 10px;
}
@media screen and (max-width: 1024px) {
#cdpx-sl-1{
height: 720px;
}
#cdpx-sl-1 .cdpx-sl-slide-content{
height: 615px;
width: 270px;
max-width: 270px;
}
#cdpx-sl-1 .cdpx-sl-slide-content p{
padding: 12px;
font-size: 15px !important;
font-size: 1.5rem !important;
line-height: 22px;
line-height: 2.2rem;
}
}
@media screen and (max-width: 720px) {
#cdpx-sl-1{
height: 680px;
}
#cdpx-sl-1 .cdpx-sl-slide-content{
height: 590px;
width: 280px;
max-width: 280px;
}
#cdpx-sl-1 .cdpx-sl-slide-content p{
padding: 12px;
font-size: 14px !important;
font-size: 1.4rem !important;
line-height: 20px;
line-height: 2.0rem;
}
#cdpx-sl-1 .cdpx-sl-nav-bullets{
display: none;
}
#cdpx-sl-1 .cdpx-sl-container{
padding-bottom: 40px;
}
#cdpx-sl-1 .cdpx-sl-arrow-container{
position:relative;
margin: 0 auto;
width: 100px;
height: 40px;
}
#cdpx-sl-1 .cdpx-sl-nav-prev {background-position: 0 0;}
#cdpx-sl-1 .cdpx-sl-nav-next {background-position: -40px 0;}
#cdpx-sl-1 .cdpx-sl-nav-prev:hover {background-position: 0 -40px;}
#cdpx-sl-1 .cdpx-sl-nav-next:hover {background-position: -40px -40px;}
}
/* SLIDER 2 */
#cdpx-sl-2{
height: 320px;
padding: 0;
padding: 0;
margin-top: 0;
}
#cdpx-sl-2 .cdpx-sl-container{
padding-left: 20%;
}
#cdpx-sl-2 *{
Xborder: 1px dotted black;
}
#cdpx-sl-2 .cdpx-sl-nav-bullets{
top: 0;
left: 40px;
width: 20%;
height: 320px;
z-index: 999;
}
#cdpx-sl-2 .cdpx-sl-nav-bullet{
Xfloat: right;
width: 100%;
display: block;
Xborder: 1px solid red;
height: 40px;
line-height: 40px;
text-align: right;
padding-right: 20px;
text-transform: uppercase;
font-weight: bold;
font-size: 13px;
font-style: 1.3rem;
letter-spacing: 1px;
}
#cdpx-sl-2 .cdpx-sl-nav-bullet.active, #cdpx-sl-2 .cdpx-sl-nav-bullet:hover{
color: #21B5Ea;
}
#cdpx-sl-2 .cdpx-sl-slide{
border-left: 1px solid #99A2A8;
padding: 0;
}
#cdpx-sl-2 .cdpx-sl-slide li{
}
#cdpx-sl-2 .cdpx-sl-slide li:before{
}
#cdpx-sl-2 .cdpx-sl-nav-bullets-cursor{
left: auto;
right: 0;
width: 20px;
margin-right: -20px;
background-image: url(../img/items/sprites.png);
background-repeat: no-repeat;
background-position: left top;
}
#cdpx-sl-2 .cdpx-sl-nav-arrow{
display: none;
}
#cdpx-sl-2 .cdpx-sl-slide{
visibility: hidden;
}
#cdpx-sl-2 .cdpx-sl-slide.active{
visibility: visible;
}
@media screen and (max-width: 1024px) {
#cdpx-sl-2{
height: 440px;
}
#cdpx-sl-2 .tablet-grid-100{
margin-top: 0;
}
#cdpx-sl-2 .cdpx-sl-container{
padding-left: 30%;
}
#cdpx-sl-2 .cdpx-sl-nav-bullets{
top: 0;
left: 40px;
width: 30%;
height: 320px;
z-index: 999;
}
}
@media screen and (max-width: 720px) {
#cdpx-sl-2{
height: 500px;
padding: 0;
padding-top: 100px;
margin-top: 0;
}
#cdpx-sl-2 .cdpx-sl-container{
padding-left: 0;
margin-top: 0px;
}
#cdpx-sl-2 .cdpx-sl-slide{
border-left: none;
}
#cdpx-sl-2 .cdpx-sl-slide li{
padding: 6px 20px;
}
.bullets li::before{
top: 15px;
}
#cdpx-sl-2 .cdpx-sl-nav-bullets-container{
width: 100%;
Xborder: 1px solid red;
padding-left: 0;
}
#cdpx-sl-2 .cdpx-sl-nav-bullets{
Xborder: 1px solid #597A96;
border-radius: 8px;
width: 100%;
overflow: hidden;
height: 60px;
box-shadow: 0 0.125em 0.5em 0 rgba(4, 49, 64, 0.1);
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#cdpx-sl-2 .cdpx-sl-nav-bullets:hover{
box-shadow: 0 0 15px rgba(4, 49, 64, 0.2);
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#cdpx-sl-2 .cdpx-sl-nav-bullet{
height: 60px;
line-height: 60px;
text-align: center;
padding-right: 0;
}
#cdpx-sl-2 .cdpx-sl-nav-bullet{
display: none;
}
#cdpx-sl-2 .cdpx-sl-nav-bullet.active{
display: block;
font-weight: bold;
}
#cdpx-sl-2 .cdpx-sl-nav-arrow{
display: block;
position: absolute;
top: 5px;
margin-top: 0;
width: 50px;
height: 50px;
background-image: url(../img/items/client-fleche-mobile.png);
z-index: 1000;
Xborder: 1px solid red;
}
#cdpx-sl-2 .cdpx-sl-nav-prev{
left: 8px;
background-position: 0 0;
}
#cdpx-sl-2 .cdpx-sl-nav-next{
right: 8px;
background-position: -50px 0;
}
#cdpx-sl-2 .cdpx-sl-nav-prev:hover{
background-position: 0 -50px;
}
#cdpx-sl-2 .cdpx-sl-nav-next:hover{
background-position: -50px -50px;
}
}
/* SLIDER 3 */
#cdpx-sl-3{
height: 680px;
Xborder: 2px solid red;
Xmargin-bottom: 200px;
}
#cdpx-sl-3 .cdpx-sl-slide{
Xborder: 2px dotted red;
}
#cdpx-sl-3 .cdpx-sl-nav-bullets{
bottom: 0;
left: 50%;
margin-left: -240px;
width: 480px;
height: 20px;
}
#cdpx-sl-3 .cdpx-sl-nav-prev {background-position: 0 0;}
#cdpx-sl-3 .cdpx-sl-nav-next {background-position: -40px 0;}
#cdpx-sl-3 .cdpx-sl-nav-prev:hover {background-position: 0 -40px;}
#cdpx-sl-3 .cdpx-sl-nav-next:hover {background-position: -40px -40px;}
#cdpx-sl-3 .cdpx-sl-slide-content{
background-color: #FFF;
overflow: hidden;
height: 550px;
width: 360px;
max-width: 360px;
margin: 0 auto;
}
#cdpx-sl-3 .cdpx-sl-slide-content img{
display: block;
width: 100%;
}
#cdpx-sl-3 .cdpx-sl-slide-content .content{
position: relative;
padding: 15px;
background-color: #FFF;
transition : margin-top .2s ease;
}
#cdpx-sl-3 .cdpx-sl-slide-content header{
position: relative;
min-height: 90px;
Xborder-bottom: 1px dotted black;
}
#cdpx-sl-3 .cdpx-sl-slide-content h3{
text-transform: none;
color: #0075BF;
}
#cdpx-sl-3 .cdpx-sl-slide-content small{
display: block;
font-style: italic;
color: #21B5EA;
Xtext-align: right;
}
#cdpx-sl-3 .cdpx-sl-slide-content a{
margin: 35px auto 20px auto;
display: inline-block;
}
#cdpx-sl-3 .cdpx-sl-slide-content:hover .content{
margin-top: -100px;
transition : margin-top .3s ease;
}
@media screen and (max-width: 1024px) {
#cdpx-sl-3{
height: 560px;
}
#cdpx-sl-3 .cdpx-sl-slide-content header{
min-height: 70px;
}
#cdpx-sl-3 .cdpx-sl-slide-content{
height: 450px;
width: 270px;
max-width: 270px;
margin: 0 auto;
}
}
@media screen and (max-width: 720px) {
#cdpx-sl-3{
height: 530px;
}
#cdpx-sl-3 .cdpx-sl-nav-bullets{
display: none;
}
#cdpx-sl-3 .cdpx-sl-container{
padding-bottom: 40px;
}
#cdpx-sl-3 .cdpx-sl-arrow-container{
position:relative;
margin: 0 auto;
width: 100px;
height: 40px;
}
#cdpx-sl-3 .cdpx-sl-slide-content:hover .content{
margin-top: 0;
transition : margin-top .3s ease;
}
#cdpx-sl-3 .cdpx-sl-nav-prev {background-position: 0 -80px;}
#cdpx-sl-3 .cdpx-sl-nav-next {background-position: -40px -80px;}
#cdpx-sl-3 .cdpx-sl-nav-prev:hover {background-position: 0 -120px;}
#cdpx-sl-3 .cdpx-sl-nav-next:hover {background-position: -40px -120px;}
}
/* ====
SPEC
/* ==== */
/* Sections Accueil */
#accueil{
display: table;
width: 100%;
height: calc( 100% - 80px) ;
margin-top: 80px;
background-image: url(../img/bg.jpg);
background-size: cover;
background-position: center center;
-webkit-background-attachment: scroll;
background-attachment: fixed;
}
#accueil img{
display: block;
margin: 0 auto;
width: 180px;
}
#accueil .btn-container{
margin: 0 auto;
margin-top: 40px;
display: inline-block;
}
#accueil .btn-container a{
display: inline-block;
height: 70px;
line-height: 70px;
width: 300px;
color: white;
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-size: 1.4rem;
font-weight: 700;
}
#accueil .btn-container a:first-of-type{
border-radius: 8px 0 0 8px;
}
#accueil .btn-container a:hover {
background-color: #FFF;
color: #21B5EA;
}
#accueil .btn-container a:last-of-type{
border-radius: 0 8px 8px 0;
margin-left: -5px;
}
@media screen and (max-width: 720px) {
#accueil .btn-container a{
display: block;
}
#accueil .btn-container a:first-of-type{
border-radius: 8px;
}
#accueil .btn-container a:last-of-type{
border-radius: 8px;
margin-top: 20px;
margin-left: 0px;
}
}
/* Section Bureau d'études */
#bureau{
background-image: url(../img/bg/bureau.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.contact-box{
padding: 25px;
box-shadow: 0 0.125em 0.5em 0 rgba(4, 49, 64, 0.1);
margin-top: 5px;
}
b{
margin-bottom: 10px;
}
.linkedin{
display: block;
height: 32px;
width: 32px;
background-image: url(../img/items/sprites.png);
background-position: 0 -40px;
}
.linkedin:hover{
background-position: 0 -72px;
}
/* Section Missions*/
#missions{
background-image: url(../img/bg/missions.jpg);
background-position: center top;
background-repeat: no-repeat;
}
/* Section clients */
#clients{
background-image: url(../img/bg/etudes-pre.jpg);
background-position: center bottom;
background-repeat: no-repeat;
}
#clients .btn{
margin-top: 60px;
}
/* Section études réalisées */
#etudes{
background-image: url(../img/bg/etudes.jpg);
background-position: center top;
background-repeat: no-repeat;
Xbackground-size: 2800px 800px;
height: 1140px;
Xborder: 2px dotted red;
}
/* Section Contact */
#contact{
background-image: url(../img/bg/etudes-post.jpg);
background-position: center top;
background-repeat: no-repeat;
}
#map-container,
#contact .half-section{
height: 400px;
}
#map-container{
max-width: 800px;
}
#map{
height: 100%;
width: 100%;
}
.half-section img{
margin-left: -10px;
}
@media screen and (max-width: 1024px) {
#accueil{
margin-top: 60px;
-webkit-background-size:auto 800px;
height: calc( 100% - 60px) ;
}
.contact-box{
padding: 0;
box-shadow: none;
margin-top: 30px;
background-color: transparent;
}
#etudes{
height: 800px;
}
}
@media screen and (max-width: 720px) {
#clients .btn{
margin-top: 15px;
}
}
/* ==
JS
/* == */
/* Header resizing */
.jScrolled .site-header{
height: 60px;
}
.jScrolled .logo-header{
height: 60px;
padding: 5px 0;
}
.jScrolled .site-header nav li a{
height: 60px;
line-height: 60px;
}
.jScrolled #accueil{
margin-top: 60px;
}
.jScrolled .site-header, .site-header,
.jScrolled .logo-header, .logo-header,
.jScrolled .site-header nav li a, .site-header nav li a,
.jScrolled #accueil, #accueil{
-webkit-transition: all .4s ease-out;
transition: all .4s ease-out;
}
/* Popup */
#cpx-pop-mask{
z-index: 1000;
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
max-height: 100%;
width: 100%;
background-color: rgba( 0, 0, 0, 0.8);
}
#cpx-pop-container{
display: table-cell;
vertical-align: middle;
height: 100%;
max-height: 100%;
width: 100%;
padding: 60px;
}
#cpx-pop-content{
position: relative;
Xoverflow-y: scroll;
width: 100%;
max-width: 700px;
margin: 0 auto;
background-color: white;
padding: 60px 0;
}
.cpx-pop-close{
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
background-image: url(../img/items/croix-popup.png);
background-position: 0 0;
cursor: pointer;
}
.cpx-pop-close:hover{
background-position: 0 -60px;
}
#cpx-pop-content h2{
text-align: left;
margin-bottom: 5px;
padding-bottom: 0;
text-transform: none;
display: inline-block;
max-width: 400px;
}
#cpx-pop-content h4{
font-weight: 400;
}
#cpx-pop-content .pdf{
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
#cpx-pop-content table{
width: auto;
margin: 40px 0;
}
#cpx-pop-content td{
border: none;
}
#cpx-pop-content td:first-child{
font-weight: bold;
width: 200px;
padding-left: 0
}
#cpx-pop-content td:nth-child(2){
padding-left: 0;
padding-right: 0;
}
#cpx-pop-content td:last-child{
padding-right: 0;
}
#cpx-pop-content img{
width: 100%;
max-width: 600px;
margin-top: 50px;
}
#cpx-pop-content-max{
overflow-y: scroll;
padding: 0 50px;
}
@media screen and (max-width: 720px) {
#cpx-pop-container{
padding: 0px 0px;
}
#cpx-pop-content-max{
padding: 0 20px;
}
#cpx-pop-content table{
margin: 30px 0 20px 0;
}
#cpx-pop-content td:first-child{
display: none
}
#cpx-pop-content td:nth-child(2){
display: none;
}
#cpx-pop-content td:last-child{
padding-right: 0;
padding-left: 0;
}
#cpx-pop-content .pdf{
float: none;
margin-left: 0px;
margin-bottom: 30px;
}
}
/* ==============
GLOBAL CLASSES
/* ============== */
.block {display: block;}
.no-pb {padding-bottom: 0;}
.no-cursor {cursor: default;}
.ta-center {text-align: center;}
.mt-md {margin-top: 30px}
/* ===
RWD
/* === */
@media screen and (min-width: 1025px) {
}
@media screen and (max-width: 1024px) and (min-width: 721px) {
}
@media screen and (max-width: 720px) {
}
/* ===
NEW
=== */