@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, /*em,*/ img, ins, kbd, q, s, samp,
small, strike, /*strong,*/ sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong{font-weight:bold;}

/**************************************************************/
body{font-family: 'Quicksand', sans-serif; font-size:1em; color:#333; font-weight:lighter;}
@keyframes apparition { 0%{opacity:0;} 30%{opacity:0.3} 100%{opacity:1;} }
#section1{background : url(images/29psychologue-lyon5.jpg) no-repeat left center fixed; background-size:cover; animation-name : apparition; animation-duration : 1.5s; }
header{color:#fff; text-align:center; font-size:3em; }
article{ text-align:left; background-color:rgba(250,250,250,0.8); font-size:1.9em;}
#verbatim{background-color:rgba(250,250,250,0.9); }
#localisation{background-color:rgba(0,0,0,0.5);}

article h1{padding-top:5%;}
h1{margin:auto;}
#bandeau{background-color: rgba(0, 0, 0, 0);
position: absolute;
margin-left: 25%;
color: #fff;
width: 50%;
padding: 20px;
margin-top:15%;
}
h2{font-size:0.5em; font-weight:bold;}
article h2{font-size:1em;}
#presentation{margin-top:18%;}
#contenu1, #contenu2, #contenu3{width:50%; margin:auto; padding-top:50px; padding-bottom:100px;}
#contenu2{padding-bottom:250px; color:#fff;}
#contenu3{text-align:center; display:none;}
#contenu3 img{/*border-radius:100px;*/
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
iframe{max-width:100%; width:100%; height:500px;}
a, a:visited{text-decoration:none; color:#111;}
footer{font-size:1.2em; text-align:center; background-color:#333; color:#ccc; padding:10px;}
footer a, footer a:visited{color:#ccc;}
footer h1{padding:0;padding-top:10px;color:#ccc;}
.ecran{height:calc(20vh);min-height:480px;}
#contenu1 p{font-size:0.8em; font-weight:bold;}
#pourcelot{text-align:right; margin-top:-96px; opacity:0.8; margin-right:-9px;/*filter:alpha(opacity=50);*/}
#pourcelot:hover{opacity:1;}
#tel{padding:5px 10px 10px 10px; border: solid 1px #333; border-radius:5px; margin-top:10px; width:170px; font-weight:bold; 
transition: all 0.5s ease-out;}
#tel:hover{border-radius: 10px 20px; border-color: #654654; background-color:rgba(255,255,255,0.5);}
#retourTop{position:fixed;right:3%; bottom:3%; cursor:pointer; display:none;}
#liens, #liens a{color:#757575; font-size:0.9em;}
.psy{font-size:0.6em; line-height:1.2em; display:block;}
.picto{border:none;border-radius:50%; height:85px; width:85px;}
.phone{background:url(images/phoneN.png) no-repeat;height:80px; width:80px; margin-left:-17px; }
.marker{background:url(images/markerN.png) no-repeat; margin-left:-22px;}
.carte{background:url(images/carteB.png) no-repeat;margin-left:-9px; height:75px;}
.handi{background:url(images/handi.png) no-repeat; margin-left:-17px;}
.metro{margin-left:-12px; margin-bottom:-10px;}
.texte{background:url(images/verbatim2.png) no-repeat; margin-left:-17px; margin-bottom:-20px;}
.calendrier{background:url(images/calendrier.png) no-repeat; margin-left:-17px;margin-top:50px; margin-botttom:-50px;}
.sticky, .sticky2{color:#fff; /*-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;*/
/*transition: background-color 0.5s ease-out;
transition: font-size 0.5s ease-out;
transition: color 0.5s ease-out;*/
 transition-property:background-color,color;
 transition-duration:0.8s;
/*-moz-transition:margin-left 0s;*/}
.entete{color:#000!important;}
.sticky2{font-weight:normal;}
.enteteFixe {position: fixed!important; z-index:3; top:0; left:0; width: 100%; margin-top:0!important; background-color:rgba(0,0,0,0.8)!important;font-size: 0.5em;width: 100% !important;margin: auto !important;border-radius: 0px !important; padding:5px!important;}
.enteteFixe2{display:none;}
.entetePsy{display:inline-block; margin-left:20px;}
.footerPetit{font-size:0.8em; font-weight:normal;}
/*.enteteSticky2{display:none;}*/
#verbatimTexte{font-size:0.8em; background-color:transparent;}
.bouton a{text-align:center; border-radius:5px; background-color:#107aca; width:120px; margin:auto; display:block; padding:10px 20px 10px 20px; color:#fff;}
#portrait{text-align:center; padding-left:10px; margin:0;border-radius:200px;}
#portrait img{border-radius:200px;}
@media screen and (max-width:1490px){
	/*.psy{font-size: 0.8em; display: inline-block; line-height: 1em; margin-top: 20px; margin-bottom: 10px;}*/
	.enteteFixe{margin:auto!important;}
	#presentation{margin-top:10%;}
}


@media screen and (max-width:1000px){
	#contenu1, #contenu2, #contenu3{width:75%;}
	#header{font-size:2em;}
	h2{font-size:0.4em;}
	#section1{background : url(images/29psychologue-lyon5-moyen.jpg) no-repeat left center fixed; background-size:cover; animation-name : apparition; animation-duration : 1.5s; }
	#presentation{margin-top:5%;}
}
@media screen and (max-width:800px){
	.marker{transform:scale(0.9); margin-left:-55px;}
	.phone{transform:scale(0.9); margin-left:-48px;}
	.carte{transform:scale(0.9); margin-left:-41px;}
	.handi{transform:scale(0.9); margin-left:-50px;}
	.texte{transform:scale(0.9); margin-left:-41px;}
	.calendrier{transform:scale(0.9); margin-left:-41px;}
	#presentation{margin-top:0%;}
	
	/*.psy{font-size:0.6em; font-weight:bold; }*/
}
@media screen and (max-width:660px){
	#bandeau{background-color:rgba(168,127,73,1); border-radius:10px;}
}
@media screen and (max-width:500px){
	#contenu1, #contenu2, #conteneu3{width:80%;}
	#contenu2{padding-bottom:50px;}
	header{font-size:2.5em;}
	article{font-size:1.2em;}
	footer{font-size:0.8em;}
	#tel{font-size:1.3em!important;}
	.ecran{height:calc(40vh);min-height:380px;}
	body{color:#000;}
	.marker{transform:scale(0.8); margin-left:-55px;}
	.phone{transform:scale(0.8); margin-left:-48px;}
	.carte{transform:scale(0.8); margin-left:-41px;}
	.handi{transform:scale(0.8); margin-left:-50px;}
	.texte{transform:scale(0.8); margin-left:-41px;}
	.calendrier{transform:scale(0.8); margin-left:-41px;}
#section1{background : url(images/29psychologue-lyon5-petit.jpg) no-repeat left center fixed; background-size:cover; animation-name : apparition; animation-duration : 1.5s; }

}

@media screen and (max-width:400px){
	header{font-size:1.8em;}
	article{font-size:1em;}
	#tel{font-size:1.5em!important; width:165px;}
}