@font-face {
    font-family: 'CenturyGothic';
    src: url('./polices/GOTHIC.TTF');
   }
   
a { color:#6699cc; text-decoration: none}

.ecran {	background-color: rgba(255,255,255,0.9);
			position: absolute;
			top: 0em;
			left: 0em;
			width: 100%;
			height: 100%;
			align-content: center;
			text-align: center;
			vertical-align: middle;
			z-index:998; 
			display: none;
			}
			
.ecran:target {	display: block; }
			
.poster{		margin: 2em;
				max-width: 90%; max-height: 90%;
				z-index: 1000;
				}

.bouttonclose {	position: absolute;
						top:2em;
						right: 2em;
						display: inherit;
						}
						
.bouttonclose>img {width: 30px; height: 30px}
			
.close:target .ecran {display: none;} 
			
#conteneur {	display: flex; 
					flex-direction: column;
					justify-content: center;
					margin: 0px;padding: 0px;
					height: 100%;
					z-index: 800;
}
#baniere {		display: flex; 
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: center;
					margin: 0px;
					padding: 0px;
					}
					
#platzhalter { background-color: #6699cc;
					flex:1;height: 2em;
					margin: 0em 0em;
					padding: 0em}
					
#nom {color: white; 
		font: 1.5em CenturyGothic bold, sans-serif;
		letter-spacing: .3em; 
		background: #6699cc; 
		margin: 0em;
		padding: 0em}
		
#orange {color: white;
			background-color: #6699cc; 
			text-align: center;
			font: 1.5em CenturyGothic, sans-serif; 
			letter-spacing: .3em; 
			flex: 2;
			margin: 0em;
			padding: 0em}

#blockimage {display: flex; 
					flex-direction: row;
					flex-wrap: wrap; 
					justify-content: flex-start;}
					
.polaroid {	background-color: #99ccff;
				height: 240px;
				margin: 1em;
				border-radius: 8px;
				color: white;
				font: 1.2em bold CenturyGothic, sans-serif;
				padding: .2em;
				box-shadow: 2px 2px 2px #aaa;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				}
			
.apercu {width: 183px;
			height: 189px;}

.polaroid p {margin: 0px;}
					
.couple {position: relative; width: 250px;}

.carton {margin: 1em .5em;width: 196px;height: 247px}

#blockimage a {position: relative;}

.logo {	position: absolute; 
			transform: rotate(-20deg); 
			z-index: 850;}

.textlegal {margin: 3em;
				padding: 2em;
				text-align: left;
				color: #6699cc;
				font: 1em bold CenturyGothic, sans-serif;
				background: white;
				}
				
#tcommun {	text-align: center;
				color: #6699cc;
				font: 1em bold CenturyGothic, sans-serif;
				background: white;
				bottom: 0px;
				left:0px; 
				width: 100%;
				letter-spacing: .3em; 
				padding-top: 2px;
				height: 15%}
				
.milieu {bottom: 1em;
			right: .5em;
			text-align: right;
			position: fixed;
			z-index:1000;
			}

.lien {	margin-left: 1px;
			margin-right: 1px;
			border-radius: 8px;
			color: white;
			background-color: #bb1100; 
			font: 1em CenturyGothic, sans-serif; 
			letter-spacing: 0em; 
			padding: .3em}
			
#vitabild {	float: right;
				width: 375px; 
				height: 500px;
				}

#portrait {	float: right;
				width: 240px; 
				height: 320px;
				}

.comment{	position: absolute;
				text-align: left;
				left: 2em;
				bottom: 2em;
				color: white;
				font: 1em bold CenturyGothic, sans-serif;
				background: #6699cc;
				padding: 1em;
				display: block;}
				
.comment>a {text-decoration: underline;color: #bb1100;}