html {
	height:100%;
    font-size: 16px;
    font-family: Helvetica, sans-serif
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  html {font-size: 15px}
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  html {font-size: 14px}
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  html {font-size: 13px}
}

@media screen and (min-width: 850px) and (max-width: 1000px) {
    html {font-size: 12px}
}

@media screen and (min-width: 780px) and (max-width: 850px) {
  html {font-size: 11px}
}

@media screen and (min-width: 710px) and (max-width: 780px) {
  html {font-size: 10px}
}

@media screen and (min-width: 650px) and (max-width: 710px) {
  html {font-size: 9px}
}

@media screen and (min-width: 560px) and (max-width: 650px) {
  html {font-size: 8px}
}

body {height: 100%;}

a {text-decoration: none;}
img {border: none;}

.colorlogo_otis {background-color: rgba(243,181,75,1);}
.colorlogo_delta {background-color: rgba(60,51,92,1);}
.colorlogo_chubb {background-color: rgba(230,61,124,1);}
.colorlogo_carrier {background-color: rgba(46,163,215,1);}

.colorbg_1_otis {background-color: rgba(230,170,69,1);}
.colorbg_2_otis {background-color: rgba(243,190,102,1);}
.colorbg_3_otis {background-color: rgba(255,238,209,1);}
.colorbg_4_otis {background-color: rgba(253,245,230,1);}
.colorfont_otis {color: rgba(243,181,75,1);}

.colorbg_1_chubb {background-color: rgba(228,27,102,1);}
.colorbg_2_chubb {background-color: rgba(240,171,197,1);}
.colorbg_3_chubb {background-color: rgba(240,171,197,1);}
.colorbg_4_chubb {background-color: rgba(251,221,232,1);}
.colorfont_chubb {color: rgba(223,34,104,1);}

.colorbg_1_carrier {background-color: rgba(74,172,216,1);}
.colorbg_2_carrier {background-color: rgba(109,196,234,1);}
.colorbg_3_carrier {background-color: rgba(193,233,250,1);}
.colorbg_4_carrier {background-color: rgba(225,242,250,1);}
.colorfont_carrier {color: rgba(46,163,215,1);}

.colorbg_1_delta {background-color: rgba(87,78,117,1);}
.colorbg_2_delta {background-color: rgba(125,115,153,1);}
.colorbg_3_delta {background-color: rgba(227,221,245,1);}
.colorbg_4_delta {background-color: rgba(228,227,233,1);}
.colorfont_delta {color: rgba(87,78,117,1);}


/************* PRESENTATION ************/
div.presentation {position: relative;min-height: 100%;font-size: 1.25rem;}
div.presentation div.menu {text-align: right;margin-right: 6%;}
div.presentation div.menu div.section {width: 8.2%;display: inline-block;margin: 0 0.7%;box-shadow: -0.2rem 0.2rem 2.5rem rgba(0,0,0,0.2);}
div.presentation div.menu div.links {width: 6.9%;display: inline-block;margin: 0 0.5%;background-color: rgba(255,255,255,0.9);}
div.presentation div.menu div.section img, div.presentation div.menu div.links img, div.presentation div.logo img {width: 100%;}
div.presentation div.logo {position: absolute;top: 5%;left: 2.5%;width: 17%;}
div.presentation div.text {width: 37%; padding-left: 3%; padding-top: 12%;/*27%;*/line-height: 1.4em;padding-bottom: 3em;}

div.otis, div.chubb, div.delta, div.carrier {height: 100%;}

div.otis div.presentation {
    background: url(../images/background-otis.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */
}

div.chubb div.presentation {
    background: url(../images/background-chubb.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */
}

div.carrier div.presentation {
    background: url(../images/background-carrier.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */
}

div.delta div.presentation {
    background: url(../images/background-delta.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */
}

div.carrier div.presentation div.text {width: 50%;}
div.delta div.presentation div.text {width: 25%;}
div.delta div.presentation div.logo {width: 27%;}

/************* HEADER **********/
div.header {position: absolute;bottom: 0;width: 85.8%; padding: 1rem 0 1rem 14.2%;height: 2.25rem; z-index: 10}
div.header div {display: inline-block; position: relative;}
div.header div.logo {position: absolute; left: 0; top: 0; width: 12.5%; text-align: center; height: 100%;}
div.header div.icon {width: 2rem;}
div.header img {width: 100%;}
div.header div.logo img {height: 3rem; width: auto; padding-top: 0.62rem}
div.header div.list {vertical-align: top;}
div.header div.list ul {text-transform: uppercase; font-size: 1.5rem;}
div.header div.list li {display: inline-block; padding: 0.25rem 1.5rem;}
div.header div.list li a {color: #fff; }

div.otis div.header div.list li:hover, div.otis li.active {background-color: rgba(230,170,69,1);}
div.chubb div.header div.list li:hover, div.chubb li.active {background-color: rgba(240,171,197,1);}
div.carrier div.header div.list li:hover, div.carrier li.active {background-color: rgba(109,196,234,1);}
div.delta div.header div.list li:hover, div.delta li.active {background-color: rgba(125,115,153,1);}

div.delta div.header div.logo img {height: auto; max-width: 80%}

div.header .hamburger {
    background: rgba(0,0,0,0.1);/* url(../images/icon-hamburger.png) no-repeat center fixed; 
    /*-webkit-background-size: cover; 
    background-size: cover; */
    width: 2.2rem; height: 2.2rem; 
    border-radius: 0.5rem; border: 1px #fff;
    float: right;
    margin-right: 1.5rem;
    display: none;
}

/*********** POLITIQUE RH *************/
div.politique {padding: 13% 9% 0 9%; }
div.politique div.title {font-size: 1.5rem; margin-bottom: 3rem;line-height: 1.3em;}
div.politique div.text {font-size: 1.2rem; line-height: 1.2em;}
div.politique div.icon {width: auto; text-align: center;padding-bottom: 4rem;padding-top: 4rem;}
div.politique div.icon img {width: 6%;}

div.delta div.politique {padding: 9% 9% 0 9%; }
div.delta div.politique div.title {font-size: 1.8rem; margin-bottom: 0.5rem;}
div.delta div.politique div.text {font-size: 1.2rem; line-height: 1.2em; margin-bottom: 2.5rem;}


/********** TEMOIGNAGES **********/
div.temoignages {background-color: #fff; padding: 8% 23%; text-align: left; position: relative;}
div.temoignages div.temoignage {width: 53vw; height: 30vw; display: none;}
div.temoignages div.temoignage div.title {font-size: 1.5rem; padding-bottom: 2rem;}
div.temoignages div.next {font-family:monospace ; position: absolute; top: 35%; right: 5%; font-size: 20rem; cursor: pointer;}
div.temoignages div.prev {font-family:monospace ; position: absolute; top: 35%; left: 5%; font-size: 20rem; cursor: pointer; display: none;}


/********** OFFRES ********/
div.offres {padding: 10rem 2% 0 2%; min-height: 100%;}
div.offres div.procedure {width: 35%; display: inline-block; text-align: center; }
div.offres div.procedure div.etapes {text-align: left;  margin: auto; width: 70%;}
div.offres div.procedure div.etape {margin-bottom: 1rem; font-size: 0.9rem; font-weight: 300;  line-height: 1.3rem; box-sizing: border-box;  padding-right: 1rem;}
div.offres div.procedure div.title {font-size: 1.3rem; margin-bottom: 1.5rem; line-height: 1.7rem; }
div.offres div.procedure div.number {/*display: inline-block; vertical-align: top; */ float: left; width: 1.1rem; height: 1.1rem; font-size: 1.1rem; font-weight: bold; color: #fff; padding: 0.7rem 0.6rem; text-align: center; margin: 0 1rem 0.2rem 0;} 
div.offres div.procedure div.text {display: inline-block; vertical-align: top; width: 80%;  padding-left: 1rem; }
div.offres iframe {width: 64%; height: 40vw; display: inline-block; vertical-align: top; border: none; min-width: 675px;}

@media screen and (min-width: 560px) and (max-width: 1100px) and (orientation : landscape) {
    div.offres div.procedure {width: 100%;}
    div.offres div.procedure div.etapes {width: 80%;}
    div.offres div.procedure div.etape {display: inline-block; vertical-align: top; width: 24%;}
    div.offres iframe {width: 100%; margin-top: 1rem;}
}

@media only screen (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
    html {font-size: 30px}
}

@media only screen and (orientation : portrait) {
    div.presentation div.menu {text-align: right;margin-right: 0%;}
    div.presentation div.menu div.section {width: 14%;display: inline-block;margin: 0 0.7%;box-shadow: -0.2rem 0.2rem 2.5rem rgba(0,0,0,0.2);}
    div.presentation div.menu div.links {width: 12%;display: inline-block;margin: 0 0.5%;background-color: rgba(255,255,255,0.9);}
    div.presentation div.logo {position: absolute; top: 2.5%;left: 2.5%;width: 17%;}
    div.presentation div.text {width: 80%; padding-left: 10%; padding-top: 10%; line-height: 1.4em;padding-bottom: 3em;}
    
    div.carrier div.presentation div.text {width: 80%;}
    div.delta div.presentation div.text {width: 80%; color: #FFF;}
    div.delta div.presentation div.logo {width: 17%;}
    
    div.header div.logo {position: absolute; left: 0; top: 0; width: 20%; text-align: center; height: 100%;}
    div.header {position: absolute;bottom: 0; width: 72%; padding: 1rem 0 1rem 28%;height: 2.25rem; z-index: 10}
    div.header div.list {vertical-align: top; position: absolute;  left: 0; top: 4.25rem; width: 100%; box-sizing: border-box; display: none;}
    div.otis div.header div.list { background-color: rgba(243,181,75,1);}
    div.chubb div.header div.list { background-color: rgba(230,61,124,1);}
    div.carrier div.header div.list { background-color: rgba(46,163,215,1);}
    div.delta div.header div.list { background-color: rgba(60,51,92,1);}
    div.header div.list ul {text-transform: uppercase; font-size: 1.7rem; padding: 1rem 0;}
    div.header div.list li {display: block; padding: 1rem 1.5rem;}
    div.header .hamburger {display: block;}
    
    div.politique div.icon {width: auto; text-align: center;padding-bottom: 4rem;padding-top: 4rem;}
    div.politique div.icon img {width: 20%;}
    
    div.temoignages {background-color: #fff; padding: 5% 10%; text-align: left; position: relative;}
    div.temoignages div.temoignage {width: 80vw; height: 45vw; display: none;}
    div.temoignages div.next {display: none;}
    div.offres div.procedure {width: 100%;}
    
    div.offres div.procedure div.etapes {text-align: left;  margin: auto; width: 85%;}
    div.offres div.procedure div.etape {margin-bottom: 1.5rem; font-size: 1.2rem; font-weight: 300;  line-height: 1.3rem; box-sizing: border-box;  padding-right: 1rem;}
}