@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;}


}