@font-face { font-family:"sp"; src: url("/fonts/Sans Mateo 2 Regular.ttf"); }
@font-face { font-family:"sp"; src: url("/fonts/Sans Mateo 2 Bold.ttf");  font-weight:bold; }

html, body { font-family:"sp"; margin: 0px; padding:0px; }

strong { color:#407ae0; font-weight:bold; }

.big { font-size:1.2em; }
.bold { font-weight:bold; }

.blue {color:#407ae0;}
.orange {color:#ff8000;}
.gris {color:808080;}

.topmenu {margin:0 auto; }
.topmenu .menu {font-weight:bold; font-size:1.1em; text-align:center;  padding:5px; }
.topmenu a { color:#000000; text-decoration:none; }

.bandeau { height:170px;  z-index:-1; }
.bandeau .logo { position:absolute; top:10px; left:0px; height: 100px; width:78vw; background-image: url("/images/logo-wonder-woman-shadow.png"); background-repeat: no-repeat; background-position: top; background-size: auto 100px;  transition:1s;  }
.bandeau .logo .societe {position: absolute; top: 50%; left: 50%; transform: translate(-50%, 15%); background-color: #ffffff; padding:2px 10px 2px 10px; width:180px;  color:#407ae0; font-weight:bold; font-size:1.1em; text-align:center; text-shadow: 4px 4px 6px rgba(40,40,40, 0.6); }
.bandeau .left { display:inline-block; height: 100%; background-size: 98px auto; width:98px; }
.bandeau .center { display:inline-block;height: 100%; background-size: auto 150px; width:calc(100vw - 312px); }
.bandeau .right {position: absolute; top:0px; right:0px; height: 100%; background-image: url("/images/bandeau-right-mobile.png"); background-repeat: no-repeat; background-position: top; background-size: auto 180px; width:114px; }
.bandeau .contact { position:absolute; top:100px; left: 0px; color:#407ae0; text-align:center;  width:77vw; text-shadow: 4px 4px 6px rgba(80,80,80, 0.6); transition:1s;  }
.bandeau .contact a { color:#407ae0; text-decoration:none; }
.bandeau .contact .mail { display:inline-block;  font-size:5vw; font-weight:bold; transition:1s;  }
.bandeau .contact .tel { display:inline-block; font-size:5vw; font-weight:bold; transition:1s;  }
.bandeau .contact img { display:none; height:16px; vertical-align:middle; margin-right:10px; }
.bandeau .contact img:not(:first-child) { margin-left:10px; }
.bandeau .animation { display:none; }

.footer { width:100%; background-color: #407ae0; text-align:center; }
.footer .block { display:block; vertical-align:middle; line-height:40px; margin:0 auto;}
.footer .block .icon { height:24px; vertical-align:middle; margin-right:8px; }
.footer a { text-decoration: none; color:#ffffff; }
.footer .cgv { }

/*.maintitle { width:100vw; margin:0 auto; height:150px; text-align:center;  background-image:url('/images/business-desktop-with-office-elements.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }*/
.maintitle { width:100vw; margin:0 auto; text-align:center; }
.maintitle h1 { font-size:calc(1em + 7vw); color:#407ae0; text-shadow: 4px 4px 6px #808080; }

.body { width:95vw; text-align:center; margin:0 auto; font-size:1.3em; text-align:center; }
h2 { color:#407ae0; font-size:2em; line-height:1.2em; }
h3 { color:#ff8000; font-size:2.5em; line-height:1.2em; }

.blocktxtimg { display:inline-block; width:90vw; margin-bottom:100px;  text-align:center; }
.blocktxtimg .padleft img { margin-left:0px; }
.blocktxtimg .padright img { margin-right:0px; }
.blocktxtimg .txt {  display:inline-block; width:100%; text-align:left; vertical-align:middle; margin:0 auto;}
.blocktxtimg .img {  display:block; width:100%; vertical-align:middle; text-align:center; margin:0 auto;}
.blocktxtimg .img img { width:90%; vertical-align:middle;}
.block { display:inline-block; vertical-align:middle; }
.block .image { width: 50px; display: inline-block; vertical-align:top;  text-align:center; }
.block .image img { height: 20px; }
.block .other {  display: inline-block; color:#407ae0; }
.block .other a { text-decoration:none; color:#407ae0; }


.postitblock { width:100%; max-width:700px; display:inline-block;  margin-top: 50px;  }
.postitblock .titre { font-weight:bold; color:#407ae0; text-align:left;  padding-bottom:10px; font-size:1.2em;}
.postitblock .content { text-align:left; line-height:26px; }
.postitblock .postit { margin:30px auto 30px auto; background-image:url('/images/assistante-administrative-independante-rambouillet-postit.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;  width:10vw; min-width:150px; height:10vw; min-height:150px; text-align:center; }
.postitblock .postit .txt { padding-top:40%; padding-right: 15%;  transform: rotate(-3deg);  font-size:calc(0.6em + 0.5vw); }

.postit2block { background-color:#f8f8f8; width:95vw; height:300px; text-align:center;  border-radius: 20px; border: 1px solid #407ae0; box-shadow:10px 10px 15px #407ae0; }
.postit2block .image { vertical-align:middle; }
.postit2block .image img { height:150px; }
.postit2block .titre { font-weight:bold; color:#407ae0; font-size:1.5em; margin:55px 20px 15px 20px; }
.postit2block .content { font-size:1.2em); margin:0px 50px 0px 50px;}

.menuservices { width:90vw; margin:10px auto 0px auto; border-bottom:#407ae0 solid 2px; padding:10px; }
.menuservices .block { margin:10px 0px 10px 0px; display:block; }
.menuservices .block a { padding:10px; text-decoration:none; transition:1s;  border-radius:10px; }
.menuservices .notselected a { }
.menuservices .selected a { text-decoration:none; background-color:#407ae0; color:#ffffff; transition:0.25s;  }
.menuservices .notselected a:hover { text-decoration:none; background-color:#d0d0d0; transition:0.25s;  }

.services { display:inline-block; width:95vw; vertical-align:top;  margin-top:100px;}
.services .illus { margin-left:50px; text-align:left;  }
.services .illus img {height:150px; width:auto;  }
.services h2 { text-align:left; font-weight:bold; color:#407ae0; margin-left:00px; font-size:1.6em; }
.services .content { text-align:left; font-size:0.8em; }
.services .content ul {  list-style: none;  padding:0px; }
.services .content li {  padding-left: 20px;   position: relative; margin-bottom:20px; }
.services .content li:before {  content: "";   position: absolute;   left: 0;   top: 30%;   transform: translateY(-50%);   width: 15px;   height: 21px;   background: url('/images/punaise.png') no-repeat;  background-size: cover; }

.formcontact { text-align:center; border-radius: 10px; background-color: #f8f8f8;  width:95%; border: #407ae0 1px solid;  font-size:0.8em;}
.formcontact .input input, .formcontact .input textarea { width:100%; padding: 6px 10px;  box-sizing: border-box; background-color:#e0e0e0; color: #407ae0; border: 1px solid #407ae0;  transition: 0.5s;}
.formcontact .input input[type='submit'] { cursor:pointer; background-color:#407ae0; color:#ffffff; }
.formcontact .input input[type='submit']:hover { background-color:#0080ff; border-color:#407ae0; }
.formcontact .input:hover input, .formcontact .input:hover textarea {border-color:#0080ff;  }
.formcontact .input input:focus,  .formcontact .input textarea:focus { border-color:#0080ff;  }
.formcontact .field { text-align:center; display:block; width:200px; vertical-align:middle; margin: 6px auto; }
.formcontact .input { text-align:center; display:block;  width:90%; vertical-align:middle; margin: 6px auto; }

.cgv { text-align:left; }
.cgv ol li { margin-top: 30px; color:#ff8000; font-weight:bold; }


@media screen and ( min-width : 600px ) and ( max-width : 1150px ) {		/* tablettes et mobile landscape	*/
	.bandeau { height:300px; }
	.bandeau .logo { top:60px; left:-20px; height: 80px; width:300px; background-image: url("/images/logo-wonder-woman-white.png"); background-size: auto 80px; }
	.bandeau .logo .societe { padding:2px 10px 2px 10px; width:230px; font-size:1.2em; background-color: #407ae0; color:#ffffff; text-shadow: 4px 4px 4px rgba(0,0,0, 0.7);}
	.bandeau .left { background-image: url("/images/bandeau-left.png"); background-repeat: no-repeat; background-position: top; background-size: 197px auto; width:197px; }
	.bandeau .center {background-image: url("/images/bandeau-center.png"); background-repeat: repeat-x; background-position: top; background-size: auto 300px; width:calc(100vw - 533px); }
	.bandeau .right { background-image: url("/images/bandeau-right.png");  background-size: 336px auto; width:336px; }
	.bandeau .contact { top:10px; left:unset; right: 200px; color:#ffffff; text-align:unset;  width:unset; text-shadow: 4px 4px 4px rgba(0,0,0, 0.7); transition:1s;  }
	.bandeau .contact a { color:#ffffff; text-decoration:none; }
	.bandeau .contact .mail { display:block;  font-size:1.1em; margin-top:10px; transition:1s;  }
	.bandeau .contact .tel { display:block;  font-size:1.1em; margin-top:10px; transition:1s;  }
	.bandeau .contact img { display:initial; height:24px;}
	.bandeau .contact img:not(:first-child) { margin-left:100px; }

	.topmenu {position: absolute; top: 180px; left: 20px; transition:1s;   }
	.topmenu .menu { display: inline-block; font-weight:bold; font-size:1em; text-align:center;}
	.topmenu a { color:#000000; text-decoration:none; }
	.topmenu .menu:not(:first-child) { margin-left:30px; }

	.maintitle { width:80vw;}

	.blocktxtimg { width:50vw; }
	.blocktxtimg .img {  display:inline-block; width:34%;}
	.blocktxtimg .txt {   width:66%; }
	.blocktxtimg .padleft img { margin-left:40px; }
	.blocktxtimg .padright img { margin-right:40px; }

}

@media screen and ( min-width : 1150px )  {
	.bandeau { height:300px; }
	.bandeau .logo { top:20px; left:50px; width:200px; height: 130px; background-image: url("/images/logo-wonder-woman-white.png"); width:300px; background-size: auto 130px; }
	.bandeau .logo .societe { padding:2px 10px 2px 10px; width:250px; font-size:1.5em; background-color: #407ae0;color:#ffffff;  text-shadow: 4px 4px 4px rgba(0,0,0, 0.7);}
	.bandeau .left { background-image: url("/images/bandeau-left.png"); background-repeat: no-repeat; background-position: top; background-size: 197px auto; width:197px; }
	.bandeau .center {background-image: url("/images/bandeau-center.png"); background-repeat: repeat-x; background-position: top; background-size: auto 300px; width:calc(100% - 533px); }
	.bandeau .right {background-image: url("/images/bandeau-right.png");   background-size: 336px auto; width:336px; }
	.bandeau .contact { top:10px; left:unset; right: 200px; color:#ffffff; text-align:unset; width:unset; text-shadow: 4px 4px 4px rgba(0,0,0, 0.7); transition:1s;  }
	.bandeau .contact a { color:#ffffff; text-decoration:none; }
	.bandeau .contact .mail { display:block;  font-size:1.3em; transition:1s;  }
	.bandeau .contact .tel { display:block;  font-size:1.3em; margin-top:20px; transition:1s;  }
	.bandeau .contact img {display:initial;  height:24px;}
	.bandeau .contact img:not(:first-child) { margin-left:100px; }
	.bandeau .animation { display:unset; position:absolute; top:100px; right:135px; height:auto; z-index:-1; }
	.bandeau .animation img { width:140px; }

	.topmenu {position: absolute; top: 130px; left: 50%; transform: translateX(-50%); transition:1s;  }
	.topmenu .menu { display: inline-block;  font-weight:bold; font-size:calc(0.7em + 0.5vw); text-align:center;}
	.topmenu a { color:#ffffff; text-decoration:none; }
	.topmenu .menu:not(:first-child) { margin-left:calc(8vw - 60px); }

	.maintitle { position:relative; top:-100px; width:70vw;}
	.maintitle h1 { font-size:calc(0.5em + 3vw); }

	.body { position:relative; top:-50px;}

	/*{ position:relative; top:-120px; width:100vw; }*/
	.blocktxtimg { width:50vw; }
	.blocktxtimg .img {  display:inline-block; width:34%;}
	.blocktxtimg .txt {   width:66%; }
	.blocktxtimg .padleft img { margin-left:40px; }
	.blocktxtimg .padright img { margin-right:40px; }

	.postitblock{ margin:20px 50px 20px 50px; }
	.postit2block { width:1000px; height:300px; max-width:unset; }
	.postit2block .titre { margin:60px 20px 15px 20px; }
	.postit2block .content { font-size:1.2em; line-height:1.5em; }
	.postit2block .image img { height:300px; }

	.services { width:30vw; min-width:600px; }
	
	.formcontact { width:40vw;}
	.formcontact .field { text-align:right; display:inline-block; width:200px; vertical-align:middle; margin: 6px 6px 6px 0px; }
	.formcontact .input { text-align:left; display:inline-block;  width:65%; vertical-align:middle; margin: 6px 0px 6px 0px; }

	.menuservices .block { margin:0px 20px 0px 20px;  display:inline-block;}
	.menuservices .block a { padding:10px; text-decoration:none; transition:1s;  border-bottom-right-radius:unset; border-bottom-left-radius:unset;}

	.footer { height:75px; padding-top:25px; }
	.footer .block { display:inline-block; margin:unset; margin:0px 30px 0px 30px; }

	.cgv { width:80vw; margin: 0 auto;}

}