/* feuille de style du site de Senja */

/* élément commun à toute la page: police, couleur du texte, background */

@font-face {
    font-family: 'pt_serifregular';
    src: url('police/PTF55F-webfont.eot');
    src: url('police/PTF55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/PTF55F-webfont.woff') format('woff'),
         url('police/PTF55F-webfont.ttf') format('truetype'),
         url('police/PTF55F-webfont.svg#pt_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    
@font-face {
    font-family: 'pt_serifbold';
    src: url('police/PTF75F-webfont.eot');
    src: url('police/PTF75F-webfont.eot?#iefix') format('embedded-opentype'),
         url('police/PTF75F-webfont.woff') format('woff'),
         url('police/PTF75F-webfont.ttf') format('truetype'),
         url('police/PTF75F-webfont.svg#pt_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}



 html {
	font-size: calc(0.6em + 1vw);
	 box-sizing: border-box;
	 scroll-behavior: smooth;
	}
	
	*, *:before, *:after {
  box-sizing: inherit;
}
	
body {
	margin:0;
	font-family: 'pt_serifregular';
	background-color: rgb(216, 133, 101);
	}

p {
	font-size: 0.8rem;
	}
	
a {
	text-decoration:none;
	color:black;
	}


	

h1 {
	font-family: 'pt_serifbold','PT Serif', serif;
	font-size: 2rem;
	}
	
h2 {
	font-size: 1.3rem;
	}
	
img {
	width:100%;
	
	}

li {
	list-style:none;
	}
	
ul {
	padding:0;
	margin:0;
	}
	
.inline-block {
	display:inline-block;
	}

/* classes de dimensions */
	
.vhfullsize {
	height: 100vh;
	}
	
.demi {
	width:50%;
	}
	
.cent {
	width:100%
	}
	
hcent: {
	height:100%;
	}
	
/* classes pour flexbox */
	
.containerC{
	display:-ms-flexbox;
	display:flex;
	flex-direction:column;
	}
	
.containerR {
	display:-ms-flexbox;
	display:flex;
	flex-wrap: wrap;
	}
	
.evenly {
	-ms-flex-pack: space-evenly;
	    justify-content: space-evenly;
	}
	
.center {
	-ms-flex-pack: center;
	    justify-content: center;
	}
	
.itemsstart {
	-ms-flex-align: start;
	    align-items: flex-start;
	}
	
.itemscenter {
	-ms-flex-align: center;
	    align-items: center;
	}
	
.itemsend {
	-ms-flex-align: end;
	    align-items: flex-end;
	}

	
.end {
	-ms-flex-item-align: end;
	    align-self: flex-end;
	}

.selfstart {
	-ms-flex-item-align: start;
	    align-self: flex-start;
	}
	
.nowrap {
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	}

.wrap: {
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	}
	
/* le loader */
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* définir l'affichage de la page */

#mainwrapper {
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	background-color: #e8dab2;
	overflow-y:hidden;
	}

#bloc-page  {
	width: 95%;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-direction:column;
	    flex-direction:column;
	
	}

/* la barre de navigation */


#navvertical {
	display:-ms-flexbox;
	display:flex;
	width: 5%;
	writing-mode: vertical-rl;
  	-ms-flex-align: end;
  	    align-items: flex-end;
  	
  	}

.menuitems { 
	margin:3em 0 0 0;
	font-family: 'Indie Flower', 'cursive';
	font-size: 1em;
	position:-webkit-sticky;
	position:sticky;
	top:3em;
	}
	
.menuitems li {
	display: inline-block;
	padding:0.7em 0;
	}
	
	@media (max-width: 750px) {
		#navvertical {
			display:none;
			}
		#bloc-page {
			width:100%;
			}
		}	
	#navvertical a {
	
	padding:0.2em; }
	
	#navvertical a:hover {
	background-color: #cecae8;
	padding:0.2em; }
/* l'accueil en pleine page */

#landing {
	display:-ms-flexbox;
	display:flex;
	-ms-flex-align: center;
	    align-items: center;
	-ms-flex-pack:center;
	    justify-content:center;
	}
	
	/* crée l'effet parallax */
.parallax {
	background: url(images/landing.jpg) 80% top;
	background-color: transparent;
	background-size:cover;
	-webkit-background-size: cover;
	background-attachment: fixed;
	}
	
 /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-width: 750px) {
  .parallax {
    background-attachment: scroll;
  }
} 

@media only screen 
and (min-device-width : 751px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {  
	.parallax {
    background-attachment: scroll;
  	}
}
	
#landing-titre {
	display:-ms-flexbox;
	display:flex;
	position:relative;
	right:2.5%;
	-ms-flex-direction:column;
	    flex-direction:column;
	-ms-flex-line-pack:center;
	    align-content:center;
	-ms-flex-pack:center;
	    justify-content:center;
	color: #d88565;
	min-width:14.7vw;
	min-height: 9.11vw;
	text-align:center;
	
	}
	
	
#landing-titre h1 {
	margin:0;
	line-height:1em;
	}

@media screen and (max-width:750px) {
	#landing-titre {
	right: 3em;
	}
	#landing-titre h1, #landing-titre h2 {
		position:relative;
		color:#c75022;
		
	}

}	

/* la navigation de la page d'accueil */

#navlanding {
	position: absolute;
	left:2em;
	bottom:1em;
	font-family: 'Indie Flower', 'cursive';
	background: radial-gradient(circle, rgba(140,71,76,0.3) 4%, rgba(0,0,0,0) 90%);
	
	}	
#navlanding li {
	display: inline-block;
	}
	
#navlanding a {
	color:rgb(216, 133, 101);
	font-size:1.5em;
	margin-right:2em;
	}

#navlanding a:hover {
	color: rgb( 227, 102, 54);
	font-size:1.5em;
	margin-right:2em;
	}



@media screen and (max-width:750px) {
	#navlanding {
		display:none;
		}
}

/* mise en page de la bannière d'accueil */

#introduction {
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    align-items:center;
	width:100%;
	min-height:50vh;
	background-color:#003049;
	color:rgba( 216, 133, 101, 1);
	padding:2em;
	
	}
	
@media screen and (max-width:750px) {
	#introduction {
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-ms-flex-pack:start;
		    justify-content:flex-start;
		}
}

#introduction p {
	font-size:1.1em;
	line-height:1.5em;
	}
	
#slogan {
	position:relative;
	width: 60%;
	}
	

#overlay {
	width:30%;
	position:relative;
	font-size: 0.9em;
	text-align:center;
	line-height: 130%;
	}
	
#overlay span {	
	font-size: 1.5em;
	}
	
@media screen and (max-width:750px) {
	#overlay {
		width:70%;
		margin: 0 auto;
	}
	#slogan {
	position:relative;
	margin: 0 auto;
	width: 80%;
	z-index:0;
	}
}
		
#petitos {
	width:8em;
	position:relative;
	}
	
.borderblanc{
 	border: 2px solid rgba(216, 133, 101, 1);
 	color: rgba( 216, 133, 101, 1);
 	background:#003049;
 	}

/* style des boutons */


.btnlanguage {	
	position:absolute;
	width:50%;
	left: 40%;
	top: 50%;
	}
	

.btnlanguage1 {
	width:80%;
	padding:0 1em;
	
	}

	

.btn-flip {
	 opacity: 1;
	 outline: 0;
	 color: rgba(216, 133, 101, 1);
	 line-height: 35px;
	 position: relative;
	 text-align: center;
	 letter-spacing: 3px;
	 text-decoration: none;
	 font-family: 'Open Sans';
	 text-transform: uppercase;
	 font-size:0.7em;
	 z-index:1;
}
 .btn-flip:hover:after {
	 opacity: 1;
	 transform: translateY(0) rotateX(0);
}
 .btn-flip:hover:before {
	 opacity: 0;
	 transform: translateY(50%) rotateX(90deg);
}
 .btn-flip:after {
	 top: 0;
	 left: 0;
	 opacity: 0;
	 border-radius: 40px;
	 width: 100%;
	 color:#000000;
	 display: block;
	 transition: 0.5s;
	 position: absolute;
	 background: rgba(216, 133, 101,0.9);
	 content: attr(data-back);
	 transform: translateY(-50%) rotateX(90deg);
}
 .btn-flip:before {
	 top: 0;
	 left: 0;
	 opacity: 1;
	 border-radius: 40px;
	 color: rgba(216, 133, 101, 1);
	 display: block;
	 transition: 0.5s;
	 position: relative;
	 background: #323237;
	 content: attr(data-Front);
	 transform: translateY(0) rotateX(0);
}
 
a.btn-flip:nth-child(1) {
	min-width:100px;
	position: relative;
	margin-bottom:1.3em;
	}

a.btn-flip:nth-child(2) {
	min-width:100px;
	position:relative;
	margin-bottom:1.3em;
	left:30%;
	}

a.btn-flip:nth-child(3) {
	min-width:100px;
	position: relative;
	left:50%;
	}

.btn-flip:focus,.btn-flip:active {
	
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}



/* mise en page du bloc bio */

.taillephoto {
	width: 60%;
	}
	
@media screen and (max-width:750px) {
	.taillephoto {
		width:70%;
		-ms-flex-item-align:center;
		    align-self:center;
		}
	}

#bio span {
	font-family: 'pt_serifbold','PT Serif', serif;
	font-size: 1em;
	}
	
#bio article{
	-ms-flex-pack:center;
	justify-content:center;
	text-align:justify;
	width: 50%;
	padding:0 1em 0 4em;
	color:#003049;
	
	}
	
#bio aside {
	width: 50%;
	-ms-flex-order:2;
	    order:2;
	padding:0 0 0 1em;
	}
	
#cpostale {
	position:relative;
	left: 7.84vw;
	bottom: 7.84vw;
	}

#bio {
padding-top: 4em;
}	

@media (min-width: 900px) {
 #bio aside {
 padding: 3em 0 0 1em;
 }

}	
	
@media (max-width:750px) {
	#bio aside {
		width:100%;
		-ms-flex-pack:center;
		justify-content:center;
		padding:2em;
		}
		
	#slogan {
		width:80%;
		padding:3.5em 0 2em 0;
		}
	
	
	.demi {
		width:80%;
		}
	
	#bio article {
		width:100%;
		font-size: 1.3em;
		padding: 2em;
		-ms-flex-pack:center;
		justify-content:center;
		
		}
		#bio article p{
		
		font-size: 0.8em;
		
		
		}
		
	
	}
	

/* mise en page de CV */	



 


/* mise en page de gallery */

#gallery {
	display:-ms-flexbox;
	display:flex;
	flex-wrap: wrap;
	width:100%;
	margin: 3em 0;
	}

#gallery a {
padding:0.3em;
}

 #gallery a:focus, #gallery a:visited{
outline:0;
color:rgb(0, 48, 73);
}

 #gallery a:hover{
outline:0;
color:rgb(0, 48, 50);
background-color: #cecae8;
padding:0.2em;
}
	
	
.videoframe {
		width:60%;
		
		
		}
		
	.texts {
		width: 40%;
		padding:2em;
		font-size:1em;
		}
		
.jw-breakpoint-5 .jw-display .jw-icon {
	position:relative;
	font-size:0.5em;
	width: 0.7em;
	height:0.7em;
	}

@media screen and (max-width:750px) {

	#gallery {
		margin:0;
	}
	
	.videoframe {
		width:100%;
		}
	
	
	.texts {
		width: 100%;
		padding:0 2em;
		font-size:1.1em;
		order: -1;
		padding-bottom:2em;
		}
	}
	
	article.texts:nth-child(1) {
	 padding-top: 2em;
	 }
	
	.texts p {
			font-size:1em;
			}
/* mise en page du bloc gallerie photos */
			
	#petitgallery {
	width: 6em;
	position:relative;
	}
	
	#character-gallery {
	position: relative;
	bottom:6em;
	width:6em;
	
	}
	
	#bulle {
		position:relative;
		border-radius:50%;
		font-size:0.8em;
		width: 13em;
  		height:8em;
  		padding-top:1.4em;
  		padding-left:1em;
  		left:7em;
		}
		
	#bulle > .circle5 {
		top:-1em;
	}
	#bulle > .circle6 {
		top:-1.2em;
	}
	
	#photogallery {
		position: relative;
		font-size: 1.4vw;
		margin-bottom:16em;
		width:80%;
		
		}
		
	#bio img, #photogallery img{
	filter:drop-shadow(8px 8px 10px gray)}
		
	#gallery h1, #gallery p {
	font-family: 'Indie Flower', 'cursive';
	}
	
	#gallery h1 {
		width:100%;
		text-align:center;
		padding:24px;
	}
		
	
	
	#accessibility-img {
	position: relative;
	width: 19em;
	overflow:hidden;
	z-index: 12;
	left:3em;
	bottom:1em;
	}
	
	#universality-img{
	position: relative;
	 width: 24em;
	 z-index: 10;
	 left: 6.5em;
	 top:1em;
	}
	
	#naive-img{
	width: 22em;
	position: absolute;
	left: 15em;
	top: 14em;
	z-index:11;
	}
	
	#truth-img{
	position: relative;
	width: 26em;
	z-index:10;
	top:9em;
	right:2em;
	
	
	}
	
	#bizzarre-img{
	 position: relative;
	 width: 20em;
	 z-index:12;
	 left:4em;
	 top:9em;
	
	}
	
	#travel-img{
	position: relative;
	width: 26em;
	z-index:10;
	top:4em;
	left:7em;
	
	
	}
	
	#p2-img{
	 position: relative;
	 width: 23em;
	 z-index:9;
	 left:0em;
	 top:17em;
	
	}
	
	.quote {
		display:none;
		background-color: white;
		padding:1.3em;
		}
	
	.img-selector {
	transition: transform .7s ease;
	}
		
	.img-selector:hover {
	
    transform: scale(1.1);
    z-index:13 !important;
    
   
	}
	
	@media screen and (max-width:750px) {
		#gallery h1 {
		margin-bottom:3em;
		}
		
	 	#photogallery img:nth-child(odd) {
	 		width: 25em;
	 	}
		#photogallery img:nth-child(1) {
		margin-top: 3em;
		}
		#photogallery img:nth-child(5) {
		top:16em;
		}
		#photogallery img:nth-child(7) {
		top:11em;
		}
		#photogallery img:nth-child(9) {
		top:11em;
		}
		#photogallery img:nth-child(13) {
		top:19em;
		}
		#photogallery img:nth-child(2n+3) {
		width:28em;
		}
		
		
	}
	
	@media screen and (max-width:410px) {
		#photogallery img:nth-child(1) {
		margin-top: 0;
		}
	}
	
/* mise en page du bloc chaussette */

	#chaussette {
		font-size: 1rem;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	
	#PetitChauss {
		width: 8em;
		align-self:center;
		
	}

	

#slider {
display: flex;
flex-direction:column;
width: 50%;
background: #e8dab2;
margin-right: 2em;
}

@media screen and (max-width:750px) {

	#chaussette{
	 margin: 7em 0;
	 }
	 #slider {
	 width: 65%;
	 margin-right:1.7em;
	 }

}	

#slider a, #slider p {
	display: block;
	text-align: center;
	color: #003049;
}

#slider a:hover {
	background-color: #cecae8;
	}

#chaussette > div:nth-child(1) > div:nth-child(1) {
	align-self: flex-end;
	width: 75%;
	position: relative;
	padding:3em 3em;
	margin-bottom: 1em;
	font-size:0.8em;
	text-align: center;
	border: 1px solid black;
	border-radius: 50%;	
}

.circle {
position: absolute;
padding: 1.5em;
border: 1px solid black;
right:-1em;
top: 5em;
border-radius: 50%;
background-color: #e8dab2;
}

.circle:lang(fr) {
    position: absolute;
    padding: 1.5em;
    border: 1px solid black;
    right: -1em;
    top: 7em;
    border-radius: 50%;
    background-color: #e8dab2;
}

.circle:nth-child(2) {
padding: 1em;
right: -3em;
top: 8em;
}

.circle:nth-child(2):lang(fr) {
    padding: 1em;
    right: -3em;
    top: 9.5em;
}

.my-chaussette-arrow {
	background: #d88565 !important;
	}
/* mise en page de contact */
/* styling overlay maison */

#overlay-maison { 
	position:relative;
	font-size: 1em;
	width: 10em;
	
	}
	

	
#overlay-maison > div {
	font-size: 0.8em;
	position:absolute;
	top:42%;
	left:20%;
	}
	


#contact {
	width:100%;
	font-family: 'Indie Flower', 'cursive';
	margin:1em 0;
	}
	
#contact > div:nth-child(1) {
	margin-bottom:1.5em;
}

#contact > div:nth-child(3) {
	position:relative;
}

.formulaire {
	position:relative;
	width: 18em;
	font-size:1em;
	
	}

.formulaire > img {
	display:block; 
	position: absolute;
}


	
#contact h4 {
	margin-bottom:0.5em;
	}

form {
	
	position:relative;
	width: 18em;
	top:-1em;
	left:1em;
	font-size:1em;
	}

label {
	position: relative;
	width: 45%;
	font-size:0.8em;
	
	}
 	
 #name  {
 	width:22%;
 	margin-right:23%;
 	position: relative;
 	top: -0.6em;
 	border:none;
 	background:transparent;
 	font-size:0.5em;
 	 }
 	 
 #email {
 	position: relative;
 	width:45%;
 	top: -0.3em;
 	border:none;
 	background:transparent;
 	font-size:0.5em;
 	 }
 	 
 #message {
 	position: relative;
	width:90%;
	background:transparent;
 	border:none;
 	resize: none; 
 	height: 16em;
 	margin-bottom:3em;
 	padding-bottom:3em;
 	font-size:0.5em;
	}
 
 textarea:focus, input:focus {
 	outline:0;
 	}

.messages {
background-color: #cecae8;
padding: 0.3em;
display:none;
}
 
 #mess {
 	position: relative;
 	font-size:0.8em;
 	margin-bottom:0em;
 	top: -0.2em;
 	}
 	


#textbutton {
	width:100%;
	
	
	}

#envoyer {
	line-height:1.4em;
	border:1px solid black;
	background: #e8dab2;
	font-family: 'Indie Flower', 'cursive';
	width:30%;
	min-width:100px;
	font-size:0.7em;
	margin-bottom: 0.5em;
	}
	
#envoyer:hover {

	background: rgba(216, 133, 101, 0.7);
	
	}

.form-control {
	display:none;
	}

.grecaptcha-badge {
  display: none; }
 
 
  
.captcha {
	display:block;
	position:relative;
	}
	
.g-recaptcha {
    transform:scale(0.5);
    transform-origin:0 0;
}


.captcha-fake-field {
  background: transparent;
  top: 1.7em;
  border: none;
  display: block;
  height: 1px;
  left: 7px;
  width: 1px;
  position: absolute;
  z-index: -1;
}

#ici {
	font-size:0.7em;
	min-height:1.7em;
	}

#contact-form input:required, #contact-form textarea:required {
	box-shadow:none;
	}
	
#contact-form input:focus, #contact-form textarea:focus {
	box-shadow:none;
	}

/* styling overlay fille */

.overlay-character {
	width:20em;
	font-size: 0.7em;
	position:relative;
	margin-left:4em;
	}
	
.overlay-character > img {
	width: 10em;
	position:relative;
	z-index: 0;
	}

.circular-sb1 {
  position: relative;
  transform: translate(82%,0);
  width: 11em;
  height:7em;
  padding: 1em 2em;
  border-radius: 50%;
  
}

.circular-sb1:lang(en) {
 position: relative;
  transform: translate(82%,0);
  width: 10em;
  height:6em;
  padding: 1.5em;
  border-radius: 50%;

}

.circular-sb1.bordernoir:lang(fi) {
    position: relative;
    transform: translate(82%,0);
    width: 10em;
    height: 7.5em;
    padding: 2.5em 2em;
    border-radius: 50%;
}



.circle5 {
  position: relative;
  width: 1em;
  height:1em;
  padding:1em;
  left:-1.5em;
  border-radius: 50%;
  
  
  
}

.circle6 {
  position: relative;
  width: 1em;
  height:1em;
  padding:0.7em;
  top:0;
  left: -2.5em;
  border-radius: 50%;
}	

.bordernoir{
 	border: 1px solid black;
 	color: black;
 	background: #e8dab2;
 	
 	}
 
@media screen and (max-width: 750px) {
	.formulaire {
		-ms-flex-order: 5;
		    order: 5;
		}
	
	.overlay-character {
		-ms-flex-order: 4;
		    order: 4;
		margin-bottom: 2em;
	}
	
	
}
 
	
/* footer */

footer {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align:center;
	    align-items:center;
	-ms-flex-pack:center;
	    justify-content:center;
	width: 100%;
	background-color: #e8dab2;
	}
	
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  margin: auto;
  width: 50%;
  animation-name: animatefadein;
  animation-duration: 0.6s
}

@media screen and (max-width:750px) {
.modal-content {
width: 90%;
	}
.close {
display: none;
	}
}

/* Add Animation */
 @keyframes animatefadein {
  from { opacity: 0}
  to { opacity: 1}
}



/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 30px;
  padding:0 0.3em;
  background-color: rgba(105, 105,105,0.8);
  font-weight: bold;
  margin-bottom: 10px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}