/*STRUCTURE*/ 

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

.wrapper{max-width: 1140px; width: 100%; margin:0 auto;}
.spacer{clear: both;}
.spacer2{clear: both; margin: 50px 0; height: 1px; background-color: #DDD;}
.spacer3{clear: both; margin: 30px 0;}

.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.5%; float: left;}
.cinq{width: 17%; float: left; margin-left: 3%;}

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

.border{border: 1px solid #CCC; border-radius: 5px;}

.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: 30.333%; float: left; margin-right: 3%;}
.wrapper li.tri:first-child{margin-right: 3%;}

.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: 150px;}


/*TYPO*/ 

h1{margin: 5px 0; padding: 0; font-size: 38px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 1px 2px 1px #052b3c;}

h2{margin: 15px 0;}
h2 span{font-size: 34px;}

h3{margin: 0;}
h3.BigText{margin-bottom: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: -1px; text-align: center; color: #272727; font-size: 38px; width: 100%; display: block;}
h3.BigText span{color:#353966;}

h4{text-align: left; font-size: 20px; margin: 0 auto 15px;}

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

h5{font-weight: 700; text-transform: uppercase; text-align: left; color: #272727; font-size: 15px; width: 100%; display: block; margin: 0 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;}

p{color: #666666; line-height: 26px; margin: 0 0 15px; display: block;}
.CenterText{margin: 0 auto 20px; text-align: center; width: 80%;}
p.CenterText{margin: 20px auto 0; text-align: center; width: 80%;}
p.Intro{margin: 0 auto 50px; font-size: 20px; line-height: 32px;}
p.justif{text-align: justify;}
.centre{text-align: center;}
.signature {color: #555; font-style: italic; font-weight: 700; margin: 0;}
p.tagline{text-shadow: 1px 2px 1px #052b3c; line-height: 1; color: #ffeccf; margin-bottom: 0; font-size: 16px; letter-spacing: 0.5px;}

a{text-decoration: none; color:#353966;}
a:hover{color: #ffffff;}

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

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

/*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: 660px;}
.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;}
.topMenu ul li a:hover{color: #0b111e;}

.Logo{text-align: center; margin-bottom: 20px;}

/*CONTENU*/

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

iframe{width: 100%; display: block; margin-bottom: 15px;}

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

.actu{border-bottom: 1px solid #ddd; margin: 0 0 20px; padding-bottom: 5px; text-align: center;}

#ProchaineEdition h2,
#ProchaineEdition h2 span{margin-top: 0; font-size: 24px !important;}
.rdvibut{max-width: 200px; margin: 0 auto 20px; width: 100%; display: block;}
.photordvi{width: 100%; margin: 10px 0 20px;}

.EspaceContact{text-align: center;}
.EspaceContact h4{font-size: 35px; line-height: 30px; margin: 30px 0 20px;}

.CallOut{color: #FFFFFF; background: url("../images/stars.svg") no-repeat center center / 100% auto #353966;}
.CallOut p {color: #ffffff; font-size: 30px; letter-spacing: -1px; line-height: 30px; margin: 0 auto; text-align: center; width: 310px;}
.CallOut .fb {transition: all 0.2s ease 0s; border: 2px solid #ffffff; display: block; font-size: 20px; margin: 18px auto 0; text-align: center;  width: 100%; max-width: 310px; background-color: #3b5998; box-shadow:6px 6px 0 rgba(0,0,0,0.5); letter-spacing: 0.3px;}
.CallOut .fb:hover {background-color: #293e6a}
.CallOut .fb a {color: #ffffff; padding: 12px 10px; display: block;}

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

.ResponsiveHand{background: url("../photos/Hand.png") no-repeat center bottom; width: 100%; height: 285px; padding-top: 95px;}

.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: #353966; color: #ffffff; font-size: 14px; letter-spacing: 1px; margin: 0; text-transform: uppercase;}

.opti,
.design,
.contenu{padding-left: 40px;}

.opti{background: url("../images/opti.svg") no-repeat scroll left 5px center / auto 28px transparent;}
.design{background: url("../images/design.svg") no-repeat scroll left 5px center / auto 24px transparent;}
.contenu{background: url("../images/contenu.svg") no-repeat scroll left 5px center / auto 24px transparent;}

/*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;}

.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;}
.icoTwitter{background: url("../images/twitter.svg") no-repeat scroll left center / 24px auto transparent;}

.tri.comete{background: url("../images/comete.svg") no-repeat scroll left center / 24px auto transparent;}

.burn{text-align: center;}
.burn img{height: 190px; opacity: 0.2;}

.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: #353966; 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;}

.ui-front #submit_btn {background-color: #353966; 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;}

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

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


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


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

@media screen and (max-width: 999px) {
	.killerzone{width: 95%; min-width: 95%;width: 95%; margin: 0 auto;}
	.center{width: 100%;}
	.center2{width: 100%;}
	.ctrltxtborder,
	.textbloc,
	.toplogoanadore,
	.toplogoulule{display: none;}
}

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

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

	.Amis img { margin: 0 2px; width: 120px;}

	.Meunier p {display: block; float: none; margin: 0 0 0 190px; width: auto;}
	.Meunier ul {list-style: outside none none; margin: 20px 0 0 190px; padding: 0;}

	.Partenaires .tri{width: 31.333%; float: left; margin-left: 2%;}
	.Partenaires li img {width: 100%;}

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

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

@media screen and (max-width: 728px) {
	h1 {margin: 0 0 5px; padding-top: 20px; font-size: 30px;}
	h2 span{font-size: 30px;}
	h3.BigText {font-size: 26px;}

	h2, h3 {text-align: center;}

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

	.globalheader {height: 380px;}

	.rdvipresente,
	#Optimisation .mail{display: none;}
	
	.MiniGal li {float: none; margin: 5% 0; width: 100%;}
	.Meunier img{display: block; float: none; margin: 0 auto;}
	.Meunier p {display: block; float: none; margin: 20px 0; width: auto;}
	.Meunier ul {margin: 0;}

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

	@-moz-keyframes stars {
	    0% { background-position: 0 0; }
	    100% { background-position: 0 0; }
	}
	@-webkit-keyframes stars {
	    0% { background-position: 0 0; }
	    100% { background-position: 0 0; }
	}
	@keyframes stars {
	    0% { background-position: 0 0; }
	    100% { background-position: 0 0; }
	}
}

@media screen and (max-width: 480px) {
	.globalheader {height: 210px;}
	h1 {padding-top: 20px; font-size: 26px;}
	p.tagline {line-height: 1.5em; margin-top: 10px;}
	p.Intro {margin: 0 auto 30px; font-size: 16px; line-height: 25px; width: 100%;}
	iframe{max-height: 200px;}
	.rdvilogo{display: none;}
	.facebook {margin-left: 15px;}
	.twitter {margin-left: -175px;}
	.Partenaires .tri{width: 100%; float: none; margin: 0;}
	.Partenaires li img {width: 80%;}
}