/*------------------MAIN-----------------*/
body {
	min-width:1100px;
	max-width:1400px;
	margin: 0 auto 0 auto;
	font-family:'Times New Roman',Calibri,Arial;
	background-image: url("media/Cabourg-optic_jonc_de_mer.jpg");
	background-position: center;
	background-repeat: no-repeat;
    background-size : cover;
    background-attachment : fixed;
}
a:link, a:visited {/*delete classic underline on url*/
  color:white;
}
/*------------------HEADER----------*/
header{
	min-width:1100px;
	position:fixed;
	top:0;
	left:0;right:0;
	background-color:rgb(63,63,63);
	height:100px;
	color:white;
	text-align:center;
	z-index:100;
	border-bottom:2px solid white;
}
header #logo_Cabourg-Optic{
	position:absolute;
	left:10px;top:10px;
	height:80px;
	border-radius:15px;
	
	animation : eclairage 3s infinite;
}
header #Logo_Cabourg{
	position:absolute;
	right:10px;top:10px;
	height:80px;
}
header #votreOpticienMOBILE{
	display:none;
}
@keyframes eclairage{
	from{
		box-shadow: 0px 0px 15px white;
	}
	50%{
		box-shadow: 0px 0px 15px transparent;
	}
	to{
		box-shadow: 0px 0px 15px white;
	}
}
/*--NAV BAR--*/
.navBar{
	margin: 25px 20px auto auto;
	text-align:center;
}
.navBar a{
	margin:0 25px 0 0;
	color:white;
	font-size:30px;
	font-style:italic;
	
	transition: color 500ms ease-in-out;
	-webkit-transition: color 500ms ease-in-out;
}
.navBar a:hover{
	color:red;
	cursor:pointer;
}
/*------------------Fenetre principale----------*/
.fenetrePrincipale{
	min-width:1100px;
	width:90%;
	margin: 150px auto 90px auto;
	color:white;
	text-align:center;
}
.leCanvas{
	width:90%;
	height:10px;
	border:1px solid white;
	border-radius:5px;
	background-image: linear-gradient(135deg,rgb(208,208,208),rgb(63,63,63));
}
 .fenetrePrincipale h1{
	background-color:rgb(63,63,63);
	border: red solid 2px;
	font-size:75px;
	font-family:Calibri;
	padding-bottom:10px;
}
.fenetrePrincipale .lunetteDeco{
	width:10%;
	margin-bottom:15px;
}
.imageIllustration{
	max-height:200px;
	max-width:27%;
	margin: 15px;
	border: rgb(63,63,63) solid 10px;
}
/*-- texte zone --*/
.fenetrePrincipale .txtZone{
	background-color:rgb(63,63,63);
	border: red solid 2px;
	border-radius: 15px 15px 0 0;
	font-size:1.25em;
	padding:10px;
	opacity:0.9;
}
.fenetrePrincipale .txtZone h2{
	font-size:2em;
}
.fenetrePrincipale .txtZone h2 .slogan{
	font-size:.75em;
	font-style:italic;
}

.fenetrePrincipale .txtZone .texte{
	margin-left:auto;
	margin-right:auto;
	width:90%;
	padding:10px;
	text-align:justify;
}
/*-- texte zone collections--*/
.fenetrePrincipale .imgCollections{
	display: inline-block;
	background-color:rgb(63,63,63);
	border: white solid 2px;
	border-radius: 15px;
	width:30%;
	height:200px;
	margin: 15px;
	overflow:hidden;
	vertical-align:middle;
}
.fenetrePrincipale .marques table{
	width:100%;
	overflow-x:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.fenetrePrincipale .marques table tr th{
/* border:solid blue 1px; */
	padding:5px;
	width:125px;
	
}
.fenetrePrincipale .imgCollections img{
	width:100%;
	
	transition: opacity 1s ease-in-out , width 500ms ease-in-out;
	-webkit-transition: opacity 1s ease-in-out , width 500ms ease-in-out;;
}
.fenetrePrincipale .imgCollections img:hover{
	width:110%;
}
.fenetrePrincipale .txtZone .horaires table{
	margin-left:auto;
	margin-right:auto;
}
.fenetrePrincipale .txtZone {
	text-align:center;
}
.fenetrePrincipale .txtZone .horaires table td{
	padding: 5px;
	text-align:left;
}
.fenetrePrincipale iframe{
	border: red solid 2px;
	width:99%;
	height:500px;
}
/*------------------FOOTER----------*/
footer {
	position:fixed;
	min-width:1100px;
	bottom:0;
	left:0;right:0;
	height:65px;
	text-align:center;
	color:white;
	font-size:16px;
	background-color:rgb(63,63,63);
	z-index:100;
}
footer h1{
	margin:5px 0 0 0;
	font-size:16px;
}
/* footer button{ */
	/* position:fixed; */
	/* right:10px; bottom:10px; */
	/* background-color:transparent; */
/* } */
/*--------FENETRE MODAL----------*/
.fenetreModal{
	position:fixed;
	z-index:99;
	left:0;right:0;
	top:0;bottom:0;
	background-color:rgba(0,0,0,.75);
	text-align:center;
	color:black;
	overflow-y:auto;
}
.fenetreModal .boutonFermeture{
	z-index:150;
	position:fixed;
	top:105px;right:25px;
	font-size:1.5em;
	border-radius:10px;
}
/*-- CONTACT FORMULAIRE --*/
#formulaireContact, #imgAremp{
	margin: 150px auto 0 auto;
	width:1000px;
	min-height:350px;
	background-color:rgba(245,245,220,.95);
	border-radius: 15px;
}
#formulaireContact h3{
	font-size:2em;
}
#formulaireContact button, #boutonEnvoyer{
	font-size:2em;
	border-radius:20px;
	border:solid white 2px;
	margin: 0 10px 0 10px;
}
#formulaireContact button:hover{
	border:solid black 2px;
}
#formulaireContact div{
	display:inline-block;
	max-width:45%;
	vertical-align:top;
}
#formulaireContact .informations{
	text-align:left;
	font-size:1.25em;
}
#formulaireContact .informations a{
	color:black;
}
#formulaireContact table, #imgAremp table{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#formulaireContact table th{
	color:black;
	width:100px;
	padding:15px;
	text-align:right;
}
#formulaireContact table td{
	width:300px;
	padding:15px;
}
#formulaireContact table td input{
	width:90%;
}
#formulaireContact table .rdv input{
	display:inline-block;
border:solid 1px red;
	width:initial;
}
/*-------------FIN CSS ----------------------*/