@charset "UTF-8"; @font-face { font-family : 'FontAwesome'; src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0"); src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format('embedded-opentype'), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0") format('woff2'), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0") format('woff'), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0") format('truetype'), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format('svg'); font-weight : normal; font-style : normal; } /* ############################################################################# connecter et header */ div.connecter {position: relative; top: 0px; background-color : #ffffff; width : 100%; /*border: 1px solid #FD0004;*/} div.connecter p {color : #FFF; width : 1150px; margin : 0 auto 0 auto; text-align : right; padding : 8px 4px 4px 15px;} div.connecter p a {color : #D80000; font-size : 0.9em;} div.connecter p img.logo {float : left;} div.banniere, div.pasbanniere {margin: auto; display: block;} div.banniere img, div.pasbanniere img { border-bottom: 1px solid #000000;} .tab-js {display : none;} .tab-active-js {display : block;} .tabs-buttons {font-size : 14px; display: flex; align-items: flex-end; justify-content: flex-start; margin-left: 5%;} .tabs-buttons img {margin-right: 1.2em;} .tabs-buttons a {color : #FFF; text-decoration : none;} .tabs-buttons__btn {display : block; width : auto; text-decoration : none; font-weight : bold; border : #999 solid 2px; color : #fff; background-color : #868686; outline : none; padding : 12px 20px; cursor : pointer; transition : background-color 0.3s; margin-right : 2px;} .tabs-buttons__btn:hover, .tabs-buttons__btn--active {color : #fff; background-color : #D80000;} .tabs-sections {padding : 0; border : #CCC solid 1px;} .tabs-header {font-size : 25px; text-align : center; margin : 3rem auto;} .centering-layer {width : 85%; margin : 2rem auto;} div#cookies {background-color: #A30A0A; color: #FFF; position: fixed; bottom: 50px; padding: 1%; display: flex; justify-content: space-around; width: 100%;} div#cookies a {color: #FFF;} div#cookies .button { padding: 3px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 0.9em; font-weight: bold; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer;} div#cookies .button1 {background-color: #FFF; color: #A30A0A; border: none;} div#cookies .button1:hover {background-color: #A30A0A; color: #FFF; border: 1px solid #FFF;} div#cookies .button2 {background-color: #FFF; color: #090; border: none; border-radius: 4px;} div#cookies .button2:hover {background-color: #090; color: #FFF; border: 1px solid #FFF;} /* liste déroulante Langue */ .custom-dropdown--large {font-size: 0.8em; font-weight:bold} .custom-dropdown--small {font-size: 0.7em;} .custom-dropdown__select {font-size: inherit; margin: 0; width: auto;} .custom-dropdown__select--white {background-color: #fff; color: #333; font-weight: bold;} @supports (pointer-events: none) and (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) { .custom-dropdown {position: relative; display: inline-block; vertical-align: middle;} .custom-dropdown__select {padding-right: 1.8em; border: 0;border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .custom-dropdown::before, .custom-dropdown::after {content: "";position: absolute; pointer-events: none;} .custom-dropdown::after {content: "\25BC"; height: 0.8em; font-size: .625em; line-height: 1; right: 0.8em;top: 40%; margin-top: -.2em;} .custom-dropdown::before {width: 1.5em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0;} .custom-dropdown__select[disabled] {color: rgba(0,0,0,.3);} .custom-dropdown.custom-dropdown--disabled::after {color: rgba(0,0,0,.1);} .custom-dropdown--white::before {top: .5em; bottom: .5em; background-color: #FFF; border-left: 1px solid rgba(0,0,0,.1);} .custom-dropdown--white::after {color: rgba(0,0,0,.9);} } @-moz-document url-prefix() { .custom-dropdown__select {padding-right: .9em;} .custom-dropdown--large .custom-dropdown__select {padding-right: .8em} .custom-dropdown--small .custom-dropdown__select {padding-right: .5em} } /* connecter et header #############################################################################*/ /* ############################################################################# oModal */ .oModal {position : fixed; z-index : 1; top : 0; right : 0; bottom : 0; left : 0; background : rgb(0, 0, 0, 0.8); opacity : 0; transition : opacity 400ms ease-in; pointer-events : none; width : 100%; height : 100%;} .oModal:target {opacity : 1; pointer-events : auto;} .oModal:target > div {margin : 10% auto; transition : all 0.4s ease-in-out; border : #DA9C17 solid 4px;} .oModal > div {max-width : 40%; position : relative; margin : 1% auto; padding : 0; border-radius : 7px; background : #eee; transition : all 0.4s ease-in-out;} .oModal > div form fieldset {text-align : left; padding : 20px;} .oModal > div form input[type="text"], .oModal > div form input[type="password"] {width : 100%; padding : 12px 20px; margin : 8px 0; display : inline-block; border : #ccc solid 1px; box-sizing : border-box;} .oModal > div form button {background-color : #333; color : white; padding : 10px 10px; margin : 8px 0; border : none; cursor : pointer; width : 100%;} .oModal > div header, .oModal > div footer {border-bottom : 1px solid #e7e7e7; border-radius : 5px 5px 0 0;} .oModal .footer {border : none; border-top : 1px solid #e7e7e7; border-radius : 0 0 5px 5px;} .oModal > div h2 {margin : 0; background-color : #E1470B; color : #FFF; padding : 10px;} .oModal > div ul li {list-style-type : none;} .oModal > div p {font-size : 0.9em; text-align : left;} .oModal > div p a {color : #666;} .oModal > div .btn {float : right;} .oModal > div section, .oModal > div > footer {padding : 15px;} .oModal .close {background : #BB0339; color : #FFFFFF; line-height : 25px; position : absolute; right : -12px; text-align : center; top : -10px; width : 24px; text-decoration : none; font-weight : bold; border-radius : 12px; box-shadow : 1px 1px 3px #000;} .oModal .close:hover {background : #00d9ff;} /* oModal #############################################################################*/ /* ############################################################################# modal_inscription */ .modal_inscription {position : fixed; z-index : 99999; top : 0; right : 0; bottom : 0; left : 0; background : rgb(0, 0, 0, 0.8); opacity : 0; transition : opacity 400ms ease-in; pointer-events : none; width : 100%; height : 100%; overflow-y : auto;} .modal_inscription:target {opacity : 1; pointer-events : auto;} .modal_inscription:target > div {margin : 10% auto; transition : all 0.4s ease-in-out; border : #DA9C17 solid 4px;} .modal_inscription > div {max-width : 60%; position : relative; margin : 1% auto; padding : 10px; border-radius : 7px; background : #FFFFFF; transition : all 0.4s ease-in-out;} .modal_inscription > div button {background-color : #DA9C17; color : #FFF; font-weight : bold; padding : 10px 10px; margin : 8px auto; cursor : pointer; width : 50%; border-radius : 5px;} .modal_inscription > div button:hover {background-color : #C28A14;} .modal_inscription > div h2 {margin : 0; background-color : #A30A0A; color : #FFF; padding : 10px;} .modal_inscription > div h3 {margin : 0; color : #333; padding : 10px;} .modal_inscription > div p {font-size : 0.9em; text-align : left; color : #333; padding : 10px;} .modal_inscription > div p a {color : #A30A0A;} .modal_inscription .close {background : #BB0339; color : #FFFFFF; line-height : 25px; position : absolute; right : -12px; text-align : center; top : -10px; width : 24px; text-decoration : none; font-weight : bold; border-radius : 12px; box-shadow : 1px 1px 3px #000;} .modal_inscription .close:hover {background : #00d9ff;} /* modal_inscription #############################################################################*/ /* ############################################################################# menu toggle */ nav.site-nav {display: none;} /* menu toggle #############################################################################*/ /* ############################################################################# principale */ div#principale {margin: auto 5%; padding : 15px; /*border: 1px solid #FB0105;*/} div#principale div#accueil {margin: 2% 2% 5% 2%;} div#globe {margin: 0 20%;} div#principale p, div#principale li {font-size: 0.85em;} div#principale ul#menu {display: flex; flex-wrap: no-wrap; justify-content: space-between; padding : 20px; border-radius : 10px; background-color : #F4ECEE; margin : 5% 20% 2%; list-style: none;} div#principale ul#menu a:link, div#principale ul#menu a:visited {text-decoration: none; color: #000000; font-weight: bold;} div#principale ul#menu a:hover, div#principale ul#menu a:active {text-decoration: underline; color: #D80000; font-weight: bold;} div#edition_pays {margin: 0 10%;} .container {display : flex; flex-wrap : wrap; margin: 2% 10%; justify-content: space-around;} div.qrcode {display : flex; flex-wrap : wrap; justify-content: space-around;} div.qrcode figure {flex: 1 1 300px;} div.qrcode div {flex: 1 1 600px;} .item {width : 150px; height : 75px; border : #060 solid 1px; border-radius : 5px; text-align : center; display: flex; align-items: center; justify-content: center;} .item a {display: block; text-decoration: none; color: inherit;} .item:hover {cursor : pointer;} .content1 {background-color : #c10001; color: #FFFFFF;} .content1:hover {background-color : #f3d4d9; color: #000000;} .content2 {background-color : #d86c79; color: #FFFFFF;} .content2:hover {background-color : #c10001; color: #FFFFFF;} .content3 {background-color : #e59fa7; color: #000000;} .content3:hover {background-color : #c10001; color: #FFFFFF;} .content4 {background-color : #f2aab6; color: #000000;} .content4:hover {background-color : #c10001; color: #FFFFFF;} .content5 {background-color : #F4ECEE; padding : 10px; height : auto; margin: auto 10% 5%; border : #060 solid 1px; border-radius : 5px;} .content5:hover {background-color : #f2aab6;} .content5 h2 {text-align : center; color : #000;} .content5 input[type="submit"] {background-color : #333; color : white; padding : 10px 10px; margin : 8px auto; border : none; cursor : pointer; width : auto;} .content5 input[type="submit"]:hover {background-color : #AA3138;} header {text-align : left; width : 1000px; margin : auto; background-color : #F4ECEE; padding : 20px; border : #CCC solid 1px;} div#livesearch {width : 95%;} div#livesearch li {list-style-type : none; margin-left : 0; padding : 5px; font-size : 0.8em; text-align : justify;} div#livesearch li:hover {background-color : #EFF5F8; border-top : 1px solid #036; border-bottom : 1px solid #036;} div#livesearch a:link, div#livesearch a:visited {text-decoration : none; color : #666;} div#livesearch a:hover, div#livesearch a:active {text-decoration : none; color : #cf033c;} form#selection_produit {text-align : left; padding : 0; margin : auto;} form#selection_produit fieldset {font-weight : bold; border : none; padding : 0;} form#selection_produit legend, form#selection_produit label {font-size : 0.8em; color : #000000;} form#selection_produit input[type="text"] {margin-left : 15px; border : #999 solid 1px; padding : 10px; font-size : 0.8em;} form#selection_produit input[type="submit"] {margin-left : 0; padding : 10px; font-size : 0.9em; color : #FFF; font-weight : bold; background-color : #D80000; border-radius : 0 5px 5px 0; cursor : pointer;} form#selection_produit select {border : #999 solid 1px; padding : 8px; font-size : 0.9em;} form#selection_produit input[type="text"] {width : 60%;} form#selection_produit select {width : auto;} form#selection_produit input[type="submit"] {background-color : #333; color : white; padding : 10px 10px; margin : 8px auto; border : none; cursor : pointer; width : auto;} form#selection_produit input[type="submit"]:hover {background-color : #AA3138;} div#apidpm_sites {display : flex; flex-wrap : wrap;} div#apidpm_sites a {text-decoration : none;} div#apidpm_sites figure {margin : 1em 2em; text-align : center;} div#apidpm_sites figure figcaption {font-size : 0.8em; color : #0088cc; font-weight : 600; max-width : 250px;} div#apidpm_sites figure img { border-width : 1px 2px 2px 1px; border-style : solid; border-color : #000; border-radius : 5px; box-shadow : 2px 2px 4px #000000;} div#apidpm_sites figure img:hover {border-width : 2px 1px 1px 2px;} form#contact textarea {background : url(https://www.santetropicale.com/club/images/logos_labos/logo_bg_apidpm.png) center center no-repeat #FFF;} form#contact {text-align: left;} .bodyCopy {max-width: 1200px; margin: auto;} .bodyCopy h1, .bodyCopy h2 {color : #cf033c;} .bodyCopy h2, .bodyCopy h3, .bodyCopy h2, .bodyCopy h4 {text-align: left;} .bodyCopy h3 {color : #333;} .bodyCopy p {text-align: justify;} .bodyCopy ul, .bodyCopy ol {text-align: left;} .bodyCopy li {margin: 5px 0;} .bodyCopy ul ul li, .bodyCopy ol ol li {font-size: 0.9em;} .bodyCopy ul.normal {list-style-type : disc;} .bodyCopy li.produit {padding : 10px; margin : 20px 0; background-color : #F4ECEE; border : #000 solid 1px; box-shadow : 2px 2px 4px #000000; border-radius : 7px;} .bodyCopy li.produit a {display : block; color : #000; text-decoration : none;} .bodyCopy li.produit a span {color : #cf033c; text-decoration : underline;} /* principale #############################################################################*/ /* ############################################################################# fiche_produit */ div.fiche_produit {float : left; min-height : 400px; color : #000; background-color : #FFF; line-height : 1.5em; width: 26%;} div.fiche_produit h1 {color : #D80000; line-height : normal; text-align : center;} div.fiche_produit h2 {font-size : 1.35em; color : #D80000;} div.fiche_produit ul {list-style-type : none; font-size : inherit; margin-left : 10px; padding : 0; font-size : 0.8em;} div.fiche_produit li {margin : 10px 0;} div.fiche_produit select {max-width : 250px; background-color : #fbe3ea; border : #D80000 solid 1px;} div.fiche_produit p {font-size : 0.8em;} div.fiche_produit div.adresse_labo {text-align : center; border : #D80000 solid 1px; background-color : #fbe3ea; padding : 3%; line-height : 1.5em; margin: auto;} div.fiche_produit a:link {text-decoration : none; color : #D80000;} div.fiche_produit a:hover {text-decoration : underline; color : #D80000;} div.adresse_labo_sm {display: none;} div#rcp {padding : 20px; color : #000; border : #000 solid 1px; box-shadow : 3px 3px 3px #000000; width: 68%; float: right;} div#rcp h1 {text-align : center; font-size : 1.35em; padding : 10px; margin : 5px 0; color : #000;} div#rcp h2 {text-align : left; padding : 5px; font-size : 1.1em; color : #cf033c; margin : 5px 0; background-color : #dfddde; box-shadow : 2px 2px 4px #000;} div#rcp p {text-align : left; font-size : 0.8em; line-height : 1.5em;} div#rcp p.centrer {text-align : center;} div#rcp p.encadre, div#rcp div.encadre {border : #cf033c solid 2px; border-radius : 10px; padding : 15px;} div#rcp h3 {text-align : left; font-size : 1em; color : #cf033c;} div#rcp h4 {text-align : left; font-size : 0.95em; color : #000;} div#rcp h5 {text-align : left; font-size : 0.9em; color : #000; font-style : italic; font-weight : bold;} div#rcp h6 {text-align : left; font-size : 0.85em; color : #000; font-style : italic;} div#rcp ul, div#rcp ol {text-align : left; font-size : 0.8em; line-height : 1.5em;} div#rcp ul {list-style : disc;} div#rcp ul ul {font-size : inherit;} div#rcp li {text-align : left; margin : 5px 0; font-size : inherit;} div#rcp dl {background-color : #fbe3ea; margin : 0; padding : 10px;} div#rcp dt {font-weight : normal; color : #cf033c; font-size : 0.8em;} div#rcp em {font-style : italic; font-weight : inherit;} div#rcp .div_table {margin : 10px; padding : 10px; overflow-x : auto;} div#rcp table {padding : 0; font-family : inherit; color : #000; border : #666 solid 1px; margin : 0 1%; display : table;} div#rcp table p {font-size : inherit;} div#rcp table h5 {font-size : 1em;} div#rcp table caption {font-weight : bold; padding : 10px 0; font-size : 0.85em;} div#rcp table tfoot {padding : 10px;} div#rcp table th {padding : 10px; margin : 0; border : #666 outset 1px; background-color : #fbe3ea; font-size : 0.85em;} div#rcp table td {padding : 5px; margin : 0; border : #666 solid 1px; font-size : 0.8em;} /* fiche_produit #############################################################################*/ /* ############################################################################# footer */ footer {text-align : center; padding-top: 10px; border-top: 5px solid #D80000; margin: 3% 20%;} footer ul {margin : auto 0px; padding : 3px 0px 0px 0px; font-size : 0.8em;} footer li {list-style-type : none; display : inline; color : #D80000; font-weight : bold; padding : 0;} footer a:link, footer a:visited {color : #333333; margin : 0; padding : 0; text-decoration : none;} footer a:focus, footer a:hover, footer a:active {color : #333333; margin : 0; padding : 0; text-decoration : underline;} footer p {margin-top : 10px; padding : 5px; font-size : 0.8em;} footer img {border : none 0; vertical-align : middle; padding-left : 5px; padding-right : 5px;} /* footer #############################################################################*/ .fa {display : inline-block; font : normal normal 14px/1 FontAwesome; font-size : inherit; text-rendering : auto;} .fa-twitter-square:before {content : "\f081"; font-size : 27px; margin-right : 5px;} .fa-facebook-square:before {content : "\f082"; font-size : 27px; margin-right : 5px;} .fa-linkedin-square:before {content : "\f08c"; font-size : 27px; margin-right : 5px;} .fa-youtube-square:before {content : "\f166"; font-size : 27px; margin-right : 20px;} .fa-user-circle-o {content : "\f166"; font-size : 27px; margin-right : 20px;} .fa-twitter-square:hover, .fa-facebook-square:hover, .fa-linkedin-square:hover, .fa-youtube-square:hover, .fa-user-circle-o:hover {color : #FE5247;} html {position: relative; min-height: 100%; font-size: 100%} body {color : #000; font-family : 'Open Sans', sans-serif; background-color : #fff; font-size: 1em; line-height : 1.5em; margin : 0; padding : 0;} .important {color : #AA3138; font-weight : bold;} p {font-size : 0.9em;} ul li, ol li {font-size : 0.9em; line-height : 1.5em;} input.securite, .display_none, div#header, div.sm, div#oubli {display : none;} a {color : #2489CE;} hr {visibility : hidden;} hr.clear_left {clear : left;} hr.clear_both {clear : both;} address {text-align : center; margin : 10px; font-style : normal; font-weight : bold; font-size : 0.8em; line-height : 1.5em;} .strong {font-weight : bold;} .nb {font-size : 70%; font-weight : normal;} .search {color : #333; font-weight : bold;} .search span {color : #cf033c; font-weight : bold;} .centrer {text-align : center;} .right {text-align : right;} .float_left {float : left;} .float_right {float : right;} .justify {text-align : justify;} h1 {font-size : 1.5em; text-align : center; color : #AA3138; line-height: 1.8em;} h2 {font-size : 1.4em; text-align : center; margin : auto; color : #AA3138; line-height: 1.6em;} div.mainmenu, div.mainmenu_pays {display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap;} div.mainmenu span {display: block; margin: 1em; max-width: 280px; flex: 1 1 280px; font-size: 0.95em;} div.mainmenu_pays span {display: block; margin: 1em; max-width: 180px; flex: 1 1 180px; font-size: 0.95em;} div.mainmenu span a, div.mainmenu_pays span a {color : #000; background-color : #F4ECEE; height : auto; display : block; text-decoration : none; font-weight : bold; padding : 5px 10px;} div.mainmenu span a:hover, div.mainmenu_pays span a:hover {color : #FFFFFF; background-color : #cf033c;} div.mainmenu_produit {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;} div.mainmenu_produit div.bloc_produit {display: block; width: 500px; margin: 1em; flex: 0 0 500px; text-align: center;} div.mainmenu_produit div.bloc_produit p {text-align: left;} div.mainmenu_produit div.nom_produit {display: flex; justify-content: space-between; align-items: flex-end;} div.mainmenu_produit div.nom_produit img {/*float: right; margin-right: 0px;*/ max-width: 75px; max-height: 50px;} div.mainmenu_produit div.nom_produit h3 {font-size : 1.5em; text-align : left; margin : 0; color : #AA3138;} div.mainmenu_produit div.bloc_produit p {color : #000; background-color : #F4ECEE; font-weight : bold; padding : 5px 10px; border: 1px solid #000; font-size: 0.85em;} div.mainmenu_produit div.bloc_produit p:hover {color: #FFFFFF; background-color: #cf033c;} div.mainmenu_produit div.bloc_produit p a {color: #000; text-decoration : none; display : block;} div.mainmenu_produit div.bloc_produit a:hover {color : #FFFFFF; background-color: #cf033c;} div.mainmenu_produit div.bloc_produit p a span {color: #AA3138;} div.mainmenu_produit div.bloc_produit a:hover span {color : #FFFFFF;} div.mainmenu_produit div.nom_produit h3 a {color : #AA3138; text-decoration : none;} div.mainmenu_produit div.nom_produit h3 a:hover {color :#000000; background-color: #FFFFFF;} div.initiales {display : flex; flex-wrap : wrap; justify-content: center; margin: auto;} div#nav {display : flex; flex-wrap : wrap; justify-content: flex-start;} div.initiales span, div#nav span, div#nav a {display : block; padding : 0.3em 0.5em; font-weight : bold; color : #000000; margin-right: 0.5em; border: 1px solid #CCC; background-color : #F4ECEE;} div#nav a {color : #AA3138; background-color : #F4ECEE; text-decoration : none;} div.initiales span:hover, div#nav a:hover {background-color : #AA3138;} div.initiales span a {display : block; color : #AA3138; text-decoration : none;} div.initiales span:hover a, div#nav a:hover {color: #FFF;} section#loginBox {background-color : rgb(255, 255, 255); border : rgb(0, 0, 0, 0.15) solid 1px; border-radius : 10px; box-shadow : 0 1px 0 rgb(255, 255, 255, 0.2) inset, 0 0 4px rgb(0, 0, 0, 0.2); margin : 10px auto 20px; padding : 10px;} .modalDialog {position : fixed; overflow-y : scroll; font-family : Arial, Helvetica, sans-serif; top : 0; right : 0; bottom : 0; left : 0; background : rgb(0, 0, 0, 0.8); z-index : 99999; opacity : 0; transition : opacity 400ms ease-in; pointer-events : none; max-width : 100%;} .modalDialog:target {opacity : 1; pointer-events : auto;} .modalDialog > div {width : 70%; position : relative; border-radius : 10px; background : #fff; margin : 10% auto 10% auto; padding : 3%;} .modalDialog .close {background : #BB0339; color : #FFFFFF; line-height : 25px; position : absolute; right : -12px; text-align : center; top : -10px; width : 24px; text-decoration : none; font-weight : bold; border-radius : 12px; box-shadow : 1px 1px 3px #000;} .modalDialog .close:hover {background : #00d9ff;} form#recherche {max-width: 800px; margin: auto;} form.minimal {margin : 0 15%; background-color : #F4ECEE; border : #f2aab6 solid 1px; padding : 10px;} form.minimal label {margin : 0; font-weight : bold; font-size : 0.8em; text-align : left;} form.minimal input {width : 90%; padding : 6px 10px; margin : 8px 0; border : #ccc solid 1px; border-radius : 4px; box-sizing : border-box;} form.minimal legend {display : block; font-size : 0.9em; font-weight : bold; color : #932647; margin-bottom : 10px; font-family : Arial, Helvetica, sans-serif; max-width : 80%;} form.minimal input, form.minimal select, form.minimal textarea {color : #932647; font-weight : bold;} form.minimal input[type="text"], form.minimal input[type="password"], form.minimal input[type="email"], form.minimal textarea, form.minimal select {border : #999 solid 1px; margin : 0 10px;} form.minimal input[type="checkbox"] {border : #99CCFF solid 1px; margin : 0 10px; display : inline-block;} form.minimal input.btn-minimal {color : #FFF;} p.button {background-color : #333; color : #FFFFFF; padding : 10px 10px; margin : 8px auto; border : none; cursor : pointer; max-width : 50%;} p.button:hover {background-color : #AA3138;} p.button a {color : #FFFFFF; text-decoration: none; display: block;} fieldset {border : none;} fieldset#submit {text-align: center; margin: auto;} input[type="text"], input[type="password"], select, textarea {width : 90%; display : inline-block; border : #ccc solid 1px; border-radius : 4px; box-sizing : border-box; margin : 10px 0 8px 0; padding : 6px 10px 6px 10px;} input[type="submit"], input[type="button"], button[type="submit"] {background-color : #333; color : white; padding : 10px 10px; margin : 8px auto; border : none; cursor : pointer; width : auto;} input[type="submit"]:hover, input[type="button"]:hover, button[type="submit"]:hover {background-color : #AA3138;} @media only screen and (min-width: 1710px) { .bodyCopy, div#principale, div.mainmenu_produit {max-width: 1200px; margin: 0 auto;} .tabs-buttons {margin-left: 20%;} div.mainmenu span {display: block; margin: 1em; max-width: 325px; flex: 1 1 325px; font-size: 0.95em;} } @media only screen and (min-width: 1300px) and (max-width: 1700px) { .bodyCopy, div#principale, div.mainmenu_produit {max-width: 1200px; margin: 0 auto;} .tabs-buttons {margin-left: 15%;} div.mainmenu span {display: block; margin: 1em; max-width: 325px; flex: 1 1 325px; font-size: 0.95em;} } @media only screen and (max-width: 600px) { /* ############################################################################# menu toggle */ nav.site-nav { display: block; margin: 0; padding: 0; position: relative; z-index: 2000; background-color: #FFF;} nav.site-nav ul {display: flex; flex-direction: column; list-style-type: none; padding: 2em 0 0 0; margin: 0; display: none;} nav.site-nav ul.opening {display: block; height: 30px;} nav.site-nav li {border-bottom: 1px solid #f6f4e2;} nav.site-nav li:last-child {border-bottom: none;} nav.site-nav a {color: #333; background-color: #f2aab6; display: block; padding: 1.5em 4em 1.5em 3em; text-transform: uppercase; text-decoration: none; font-weight: bold;} nav.site-nav a:hover, nav a:focus {color: #932647; background: #fff; font-weight: bold;} .site-nav--icon {font-size: 1.4em; margin-right: 1em; width: 1.1em; text-align: right; color: #C0C0C0;} .menu-toggle {position: absolute; padding: 0.6em; right: .5em; cursor: pointer;} .hamburger,.hamburger::before,.hamburger::after {content: ''; display: block; background: #cf033c; height: 3px; width: 2em; border-radius: 3px; -webkit-transition: all ease-in-out 350ms; transition: all ease-in-out 350ms;} .hamburger::before {-webkit-transform: translateY(-7px); transform: translateY(-7px); background: #cf033c;} .hamburger::after {-webkit-transform: translateY(4px); transform: translateY(4px); background: #cf033c;} .open .hamburger {-webkit-transform: rotate(45deg); transform: rotate(45deg); background: rgba(238,242,249,0.4);} .open .hamburger::before {display: none; background-color: rgba(238,242,249,0.4);} .open .hamburger::after {-webkit-transform: translateY(-1px) rotate(-90deg); transform: translateY(-1px) rotate(-90deg); background: #1597AD;} /* menu toggle #############################################################################*/ img {max-width: 100%;} .bodyCopy {max-width: 100%; margin-top : 0px; padding-top : 0px;} div#principale {margin: auto; width: 98%; padding : 0 5px;} div.connecter, .ordi, div.pasbanniere, .tabs-buttons, .oModal, div.fiche_produit {display: none;} div.sm {display : block;} div#rcp {float : none; overflow-x : auto; width: 96%; border: none; margin: auto; padding: 10px; box-shadow : none;} div.adresse_labo_sm {display : block; text-align : center; border : #D80000 solid 1px; background-color : #fbe3ea; padding : 1%; line-height : 1.5em; width: 96%; margin: 2em auto;} div.adresse_labo_sm h2 {font-size : 1.35em; color : #D80000;} div.adresse_labo_sm p {font-size : 0.8em;} div.adresse_labo_sm a:link {text-decoration : none; color : #D80000;} div.adresse_labo_sm a:hover {text-decoration : underline; color : #D80000;} div#header {display: block; width: 100%; margin: 1% auto; padding: 0 1%;} div#header h2 {color : #cf033c; text-align : center; font-size : 1em; margin: auto;} div#header h2 span {color : #666;} p.link a {color : #cf033c; text-decoration : underline;} .recherche {height : 50px; margin : 0 auto; padding : 0; display : inline-block;} header {max-width : 80%;} .container {margin: auto auto;} .item {width : 75px; height : 50px; font-size: 0.8em;} .content5 {height: auto; margin: 5% 0;} .item a {padding-top: 20%;} div#principale ul#menu {display: none;} div.mainmenu {display: block; margin : 0 1em;} div.mainmenu span {margin : 0.5em 0; font-size: 0.85em;} div.mainmenu_pays span {max-width: inherit; flex: 1 1 30%;} ul.mainmenu {margin : 0px; padding: 0px;} ul.mainmenu li {margin : 0.3em;} div.mainmenu_produit {display: block; font-size: 0.85em;} div.mainmenu_produit div.bloc_produit {display: block; width: 95%; margin: auto; flex: 0 0 250px;} footer {margin: 2em 5% 0;} div#edition_pays {margin: 0px 10%;} div.initiales {justify-content: flex-start;} div.initiales span {background-color : #F4ECEE; border: none; padding : 0.3em 0.5em; margin: 0.3em; border : #666 solid 1px;} div.initiales span:hover {background-color: #AA3138; color: #FFFFFF;} div.initiales a {display : block; text-decoration : none; font-weight : bold;} form#selection_produit {text-align : left; padding : 0; margin : auto;} form#selection_produit input[type="text"] {width : 90%;} form#selection_produit fieldset { text-align: center;} .btn_vert, .button1, .button2 {padding : 10px 22px; text-align : center; text-decoration : none; display : inline-block; font-size : 0.9em; font-weight : bold; transition-duration : 0.4s; cursor : pointer; border-radius : 4px;} .btn_vert {background-color : #fff; color : #1597AD; border : #1597AD solid 2px;} .btn_vert > a {color : #1597AD; text-decoration : none;} .btn_vert > a:hover {color : #fff;} .btn_vert:hover {background-color : #1597AD; color : #FFFFFF;} .button1 {margin : 2%; background-color : #1597AD; color : #000;} .button2 {margin : 2%; background-color : #141D2C; color : #000; } .button1:hover, .button2:hover {background-color : #FF0000; color : #FFF; border : #FFF solid 1px;} .button1:active {background-color : #1597AD; color : #FFF;} div.labos {width : 90%; border : #333 solid 1px; border-radius : 7px; padding : 10px; background-color : #FFF;} div.labos ul {font-size : inherit;} div.labos li {line-height : 1.5em; margin-left : 20px; margin-bottom : 20px;} div.labos img.logo_labo {max-width : 100%; max-height : 100%;} div.liste_produit {width : 90%; border : #333 solid 1px; border-radius : 7px; padding : 10px; display : none;} #inscription li {list-style-type : none;} #inscription span, #inscription .manelec {color : #AA3138; font-weight : bold;} #inscription .magelec {color : #3a3a76; font-weight : bold;} #inscription img {float : left; vertical-align : middle; padding : 5px; background-color : #FFF; border : #999 solid 1px; margin-right : 10px;} .cadre_msg_bt_valider {margin : 0; background-color : #F1F4FA; border : #99CCFF solid 1px; padding : 10px;} .modalDialog { position : fixed; overflow-y : scroll; font-family : Arial, Helvetica, sans-serif; top : 0; right : 0; bottom : 0; left : 0; background : rgb(0, 0, 0, 0.8); z-index : 99999; opacity : 0; transition : opacity 400ms ease-in; pointer-events : none; } .modalDialog:target { opacity : 1; pointer-events : auto; } .modalDialog > div { width : 70%; position : relative; border-radius : 10px; background : #fff; margin : 10% auto 10% auto; padding : 3%; } .modalDialog > div .securite { display : none; } .modalDialog .close { background : #BB0339; color : #FFFFFF; line-height : 25px; position : absolute; right : -12px; text-align : center; top : -10px; width : 24px; text-decoration : none; font-weight : bold; border-radius : 12px; box-shadow : 1px 1px 3px #000; } .modalDialog .close:hover { background : #00d9ff; } div#cookies {bottom: 0px; display: block; text-align: center;} div#cookies .button1 {background-color: #FFF; color: #A30A0A; border: none;} div#cookies .button1:hover {background-color: #A30A0A; color: #FFF; border: 1px solid #FFF;} }