/*STRUCTURE*/ 

body{color:#438e00; font-family: 'Montserrat', sans-serif; background-color: #FFFFFF; padding: 0; margin: 0; font-size: 14px;}

.wrapper{max-width: 1140px; width: 100%; margin:0 auto;}
.wrapper:after{content: ""; display: block; clear: both;}
.spacer{clear: both;}

.mid{width: 48%; float: left; margin-left: 2%;}
.double{width: 64.666%; float: left; margin-left: 2%;}
.tri{width: 31.333%; float: left; margin-left: 2%;}
.quart{width: 23%; float: left; margin-left: 2%;}
.cinq{width: 18%; float: left; margin-left: 2%;}

.mid img,
.double img,
.tri img,
.quart img,
.cinq img{width: 100%; height: auto;}

.globalheader .double{width: 66.666%; float: left; margin: 0;}
.globalheader .tri{width: 33.333%; float: left; margin: 0;}

.wrapper .mid:first-child,
.wrapper .double:first-child,
.wrapper .tri:first-child,
.wrapper .quart:first-child,
.wrapper .cinq:first-child{margin: 0;}

.wrapper li.tri{width: 28.333%; float: left; margin-right: 3%;}
.wrapper li.tri:first-child{margin-right: 3%;}

.deuxcol {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
} 

article.panorama{padding: 0; margin: 0; text-align: center;}
article.panorama img{width: 100%; padding: 0; display: block;}

.hidden{display: none;}

#scrollToTop {bottom: 20px; opacity: 0.3; position: fixed; right: 20px; z-index: 1000; transition: all 0.2s ease 0s;}
#scrollToTop:hover{opacity: 1;}

.contactButton{cursor: pointer;}
.telephone {background: url("../images/phone2.svg") no-repeat scroll left center / 24px auto rgba(0, 0, 0, 0); display: block; float: right; font-size: 22px; height: 28px;  margin: -5px 20px 0 0; padding-left: 35px; width: 170px;}

/*TYPO*/ 

h1, h2, h3{margin: 0;}
h1{margin-bottom: 30px; font-weight: 700; letter-spacing: -1px; text-align: center; color: #272727; font-size: 38px; width: 100%; display: block;}
h2{margin-bottom: 25px; font-weight: 700; letter-spacing: -1px; text-align: center; color: #272727; font-size: 34px; width: 100%; display: block;}
h3{margin-bottom: 20px; font-weight: 700; letter-spacing: -1px; text-align: center; color: #272727; font-size: 28px; width: 100%; display: block;}
h4{margin:0 auto 20px; font-weight: 700; letter-spacing: 0; text-align: center; color: #438e00; font-size: 20px; width: 100%; display: block;}
h5{font-weight: 700; text-transform: uppercase; letter-spacing: -1px; text-align: center; color: #005d34; font-size: 20px; width: 100%; display: block; margin: 10px 0;}
#Marques h5{font-weight: 700; text-transform: uppercase; letter-spacing: 0; text-align: left; color: #005d34; font-size: 16px; width: 100%; display: block; margin: 15px 0 5px;}
footer h5{border-bottom: 1px dotted rgba(255, 255, 255, 0.2); color: #ddd; font-weight: normal; letter-spacing: 0; padding-bottom: 5px; text-align: left; margin-bottom: 10px;}
h6 { font-size: 16px; margin: 0 0 10px;}

.BigText{text-transform: uppercase;}

h1 span, h2 span, h3 span, h3.BigText span{color:#438e00;}

.CallOut h4{text-align: center; margin: 0; font-size: 34px; color: #FFF;}

p{color: #666666; line-height: 26px; margin: 15px 0;}
.CenterText{margin: 0 auto 20px; text-align: center; width: 80%;}
p.CenterText{margin: 20px auto 30px; text-align: center; width: 80%; font-size: 16px;}
.signature {color: #555; font-style: italic; font-weight: 700; margin: 0;}

img.Doctipharma {width: auto; display: block; margin: 0 auto;}

.CenterButtons{text-align: center; clear: both;}
.CenterButtons span{display: block;}
.CenterButtons .button{display: inline-block; margin: 10px 10px 0; background-color:#438e00; color: #EEE; padding: 6px 15px; border-radius: 5px;}
.CenterButtons .button:hover{background-color:#006d3d;}

.CenterButtons2{text-align: center; clear: both;}
.CenterButtons2 span{display: block;}
.CenterButtons2 .button{display: inline-block; margin: 5px; background-color:#DDDDDD; color: #555555; padding: 4px 10px; border-radius: 5px;}
.CenterButtons2 .button:hover{background-color:#BBB;}

em{font-size: 13px; text-align: center; display: block;}

a{text-decoration: none; color:#438e00;}
a:hover{color: #00575e;}

ul{list-style: none; margin: 0; padding:0;}
li{color: #666666; line-height: 26px;}
li h3{display: block; font-size: 19px; color:#438e00; margin: 10px 0 5px;}
li span{text-align: justify; display: inline-block;}
li span strong{display: inline; font-size: inherit; color:inherit; margin: 0;}
li strong{font-size: 16px;}

.compare p{font-size: 18px; color:#438e00; margin: 20px;}

.marques{text-transform: uppercase; letter-spacing: 1px;}

/*HEADER*/ 

header .wrapper{padding-top: 70px;}

.topMenu{border-bottom: 1px solid #ddd; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 25px 0 22px; height: 20px; position: fixed; width: 100%; background-color: rgba(255,255,255,0.85); z-index: 100;}
.topMenu ul{margin: 0 auto; padding: 0; list-style: none; width: 650px;}
.topMenu ul li{float: left; margin: 0 15px; line-height: 20px;}
.topMenu ul li a{font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}

.globalheader{text-align: center; padding-top: 68px; border-bottom: 2px solid #438e00; height: 350px;}
.globalheader .LogoPharma{width: 140px; height: 140px; margin: 10% auto 10px; border-radius: 100%; border: 1px solid #555; background: url(../images/LogoPharma.jpg) no-repeat center center / 100% auto transparent;}
.globalheader h1{margin: 0 10px; font-weight: 700; letter-spacing: 0; text-align: center; color: #272727; font-size: 24px; width: auto; display: block;}
.globalheader h1 span{display: block; font-weight: normal; color: #FFF; font-size: 14px; background-color: rgba(67,142,0,0.7); padding: 10px; width: 70%; margin: 6px auto 0;}

.pharmaheader{background: url(../images/PharmaHeader.jpg) no-repeat center center transparent; position: relative; background-size: cover; height: 350px;}
.pharmaheader:after{content: ""; width: 2px; height: 100%; background-color: white; position: absolute; top: 0; right: 0;}

/*CONTENU*/

article{padding: 50px 10px; clear: both;}
article.nopadding{padding: 60px 10px 0; clear: both;}

iframe{width: 100%; border:5px solid #FFFFFF;}

.grey{background-color: #f6f6f6;}
.white{background-color: #ffffff;}

.actu{border-bottom: 1px solid #ddd; margin: 0 0 20px; padding-bottom: 5px; text-align: center;}
.mail img{border: 1px solid #d6d6d6; overflow: hidden; border-radius: 5px; margin: 15px 0;}
.EspaceContact{text-align: center;}
.EspaceContact h4{font-size: 35px; line-height: 30px; margin: 30px 0 20px;}

.g-module{width: 300px; margin: 0 auto;}

.tablettesmobile{display: block; margin: 25px auto 0; max-width: 730px; width: 100%;}

.CallOut{color: #FFFFFF; background-color:#438e00;}
.CallOut p {color: #ffffff; font-size: 30px; letter-spacing: -1px; line-height: 30px; margin: 0 auto; text-align: center; width: 310px;}
.CallOut .tel {border: 2px solid #ffffff; display: block; font-size: 30px; margin: 18px auto 0; padding: 12px 10px 12px 40px; text-align: center; width: 240px; background: url("../images/phone.svg") no-repeat scroll left 14px center / 24px auto #438e00; box-shadow:6px 6px 0 rgba(0,0,0,0.5); letter-spacing: 1px;}
.CallOut .tel a {color: #ffffff;}
.CallOut .mail {border: 2px solid #ffffff; display: block; font-size: 18px; margin: 18px auto 0; padding: 12px 10px 12px 45px; text-align: center; width: 100%; max-width: 340px; background: url("../images/mail.svg") no-repeat scroll left 14px center / 24px auto #438e00; box-shadow:6px 6px 0 rgba(0,0,0,0.5); letter-spacing: 1px; }
.CallOut .mail a {color: #ffffff;}

#Applications img{width: auto; margin: 10px auto; border: 5px solid #FFF;}

.BTNfacebook{padding: 10px 0;}
.BTNtwitter{padding: 5px 0 1px;}
.BTNgoogleplus{padding: 8px 0 4px;}

.input-field,
input,
textarea {border: 1px solid #ddd; display: block; margin: 3px 0 20px; padding: 1.5%; width: 96%;}
input[type="submit"] {width:100%; background-color: #438e00; color: #ffffff; font-size: 14px; letter-spacing: 1px; margin: 0; text-transform: uppercase;}

.photos img{max-width: 600px; display: block; margin: 0 auto;}

.promo{border: 1px solid #CCC; padding: 20px; box-sizing: border-box;}
.promo .product {margin: 0 auto 10px; display: block;}
.promo h3{margin-bottom: 10px; letter-spacing: 2px; font-size: 24px;}
.promo .description {text-align: center; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; font-style: italic; color: #FFA500; }
.promo .offer {text-align: center; text-transform: uppercase; font-size: 18px; padding: 0 5%; }
.promo img{width: 100%;}

/*FOOTER*/

footer{background-color: #222222; padding: 60px 0 0; color: #DDDDDD;}
footer .wrapper{padding: 0 3%; width: 94%;}
footer a{color: #DDDDDD;}
footer a:hover{color: #FFFFFF;}
footer ul li{color: #888;}
footer .quart{float: right;}

.LogoPharma2{margin: 0 auto; border-radius: 100%; max-width: 300px; border: 1px solid #555; overflow: hidden; background-color: #FFF;}

.Findus li,
.Postal li{padding:8px 0 8px 40px; margin: 5px 0;}

.icoAdr{background: url("../images/adresse.svg") no-repeat scroll left center / 24px auto transparent;}
.icoTel{background: url("../images/phone.svg") no-repeat scroll left center / 24px auto transparent;}
.icoMail{background: url("../images/mail.svg") no-repeat scroll left center / 24px auto transparent;}
.icoSite{background: url("../images/web.svg") no-repeat scroll left center / 24px auto transparent;}
.icoFB{background: url("../images/facebook.svg") no-repeat scroll left center / 24px auto transparent;}
.icoGoogle{background: url("../images/google.svg") no-repeat scroll left center / 24px auto transparent;}

.credits{background-color: #000000; width: 100%; text-align: center; font-size: 11px; padding: 16px 0; margin-top: 60px; letter-spacing: 1px;}

/*CONTACT*/

.ui-front {background: none repeat scroll 0 0 #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); padding: 40px;}

.ui-dialog-titlebar-close {background-color: #438e00; border: 0 none; color: #ffffff; opacity: 0.5; padding: 3px 5px; position: absolute; right: 10px; top: 10px; transition: all 0.2s ease 0s;}
.ui-dialog-titlebar-close:hover{opacity: 1;}
.ui-dialog-title {border-bottom: 1px solid #eee; display: block; font-weight: 700; margin-bottom: 10px; padding-bottom: 10px; text-align: center; width: 100%;}

.ui-front input,
.ui-front textarea{margin: 2px 0 10px; padding: 5px; width: 95%; border: 1px solid #ddd; max-width: 286px;}
.ui-front #contact_body span{font-size: 12px;}
#message{min-height: 85px;}

.ui-front #submit_btn {background-color: #438e00; border: 0 none; border-radius: 5px; color: #ffffff; display: block; font-size: 12px; letter-spacing: 1px; margin: 0 auto; padding: 7px; text-transform: uppercase; width: 50%;}
.ui-front #submit_btn:hover {background-color: #0b2b4d;}

.ui-front .error {border: 1px solid red; color: red; font-size: 10px; margin-bottom: 10px; padding: 7px;}

.quart.footer{text-align: center;}
.quart.footer img{margin-top: 75px; max-width: 276px;}

/********************************************/
/**********Shit Just Got Real !*************/
/******************************************/

/****************/
/*MEDIA QUERIES*/
/**************/


@media screen and (max-width: 1280px) {
	h3.BigText:before,
	h3.BigText:after{display: none;}
	.topMenu ul {margin: 0 0 0 20px;}

	.promo h3 {font-size: 18px;}
}


@media screen and (max-width: 1080px) {
	.telephone{display: none;}
	.topMenu ul {margin: 0 auto;}
}

@media screen and (max-width: 920px) {
	.mid,
	.tri,
	.double,
	.cinq,
	.wrapper li.tri{width: 100%; float: none; margin: 0;}

	.wrapper .quart{width: 48%; float: left; margin-left: 2%;}
	.wrapper .quart:nth-child(2n+1){margin-left: 0%;}

	.deuxcol {
	    -webkit-column-count: 1; /* Chrome, Safari, Opera */
	    -moz-column-count: 1; /* Firefox */
	    column-count: 1;
	} 

	#Presentation ul{margin-bottom: 10px;}

	iframe{width: 100%; border:0 none;}

	.burn {margin-top: -180px; position: absolute; right: 20px; width: 140px;}
	.Postal{margin-bottom: 30px;}

	.display{display: none;}

	.promo h3 {font-size: 16px;}
}

@media screen and (max-width: 840px) {
	.topMenu{background-color: rgba(255, 255, 255, 0.85); height: auto; padding: 10px 0; position: relative; width: 100%;}
	.topMenu ul{margin: 0 auto; padding: 0; list-style: none; width: 100%; text-align: center;}
	.topMenu ul li{float: none; margin: 5px 0; width: 100%;}
	.topMenu ul li a {font-size: 14px;}
	.globalheader {padding-top: 0; height: auto;}
	.globalheader .tri,
	.globalheader .double{width: 100%; float: none; height: 220px;}
	.globalheader .double iframe{height: 220px;}
	.globalheader .tri{padding-top: 15px;}
	.globalheader .LogoPharma{margin-top: 0;}
	.pharmaheader {height: auto;padding: 25px 0; border-bottom: 2px solid #FFF;}
	.pharmaheader:after{display: none;}
}

@media screen and (max-width: 728px) {
	h2 span{font-size: 30px;}
	h3.BigText {font-size: 20px;}

	h2, h3 {text-align: center;}

	article {clear: both; padding: 30px 10px;}

	#Optimisation .mail{display: none;}

	article.nopadding{padding: 40px 0;}
	.tablettesmobile{display: none;}

	.mail img{margin: 0;}

	.ResponsiveHand {background: none repeat scroll 0 0 transparent; height: 145px; padding-top: 25px; width: 100%;}
}

@media screen and (max-width: 480px) {
	.globalheader .pharmaheader{height: 210px}
	.globalheader .LogoPharma{width: 100px; height: 100px; margin: 10px auto; border-radius: 100%; border: 1px solid #555; background: url(../images/LogoPharma.jpg) no-repeat center center / 100% auto transparent;}
	.wrapper .quart{width: 100%; float: none; margin-left: 0%;}
	.wrapper .quart h5,
	.wrapper .quart ul{text-align: center !important;}
	.tagline {width: 70%;}
	.facebook {margin-left: 15px;}
	.twitter {margin-left: -175px;}
	.Partenaires .tri{width: 100%; float: none; margin: 0;}
	.Partenaires li img {width: 80%;}
	.globalheader h1 {font-size: 18px;}
	.CallOut .mail {font-size: 14px; width: 80%; background: none; padding-left: 12px;}

}