@font-face {
    font-family:textecourant;
    src:url("medias/DarkerGrotesque-Regular.ttf"); 
}
}
@font-face {
    font-family:textecontact;
    src:url("medias/DarkerGrotesque-Medium.ttf"); 
}

.p, .p:visited{
	color:#9a8a93;
	text-decoration: underline
}

.p:hover, .p:focus, .p:active{
	text-decoration: underline;
	color: black;
}
a, a:visited{
    color: black;
    text-decoration: black;
	/*font-family: lien;
	font-size: 16px;*/
}
a:hover, a:focus, a:active{
    color: #9a8a93;
}


h{
	color:black;
}
header{
    display:block;
    background-color:white;
	opacity: 75%;
    width:95%;
    position:fixed;
    padding-left:0%;
    margin-right:0%;
        top:0;
    z-index:1500;
    font-family: textecourant;
    font-size:16px;
    transition: top 0.3s;
}
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
.header{
    display: flex;
    margin-top:0px;
    margin-bottom:-5px;
    align-items: center;
    justify-content: space-between;
}
footer{
    background-color:white;
    z-index:2500;
    display: table-footer-group;
    position:fixed;
    bottom:0;
    right:0;
    padding-right:4.5%;
    font-family: textecourant;
    text-align:right;
    font-size:16px;
}

section{
    display: block;
    margin : auto;
    margin-top:8%;
}

.blocimages{
    display: block;
    position:relative;
    max-width: 50%;
    margin:auto;
}
.blocimages:hover{
    z-index:1000;
}
.blocarticles{
	display: block;
	position: relative;
	max-width:65%;
	margin: auto;
	margin-top:15%;
	font-family: textecourant;
}

img{
    padding:1%;
}              /*les images par colonnes de 2*/

/*img:active{
	 -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); 
}*/


/*.echelle:hover{
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); 
}*/

#bluefall1{max-width:60%;}
#bluefall2{max-width:28%;
position: absolute;}
#bluefall3{max-width:28%;}

#stift{max-width: 90%;}

#eden1{max-width: 90%;}
#eden2{max-width: 28%;
margin-top:-6%;}
#eden3{max-width: 60%;
margin-top:-3%;}

#music1{max-width:44%;}
#music2{max-width:44%;
position:absolute;}
#music3{max-width:44%;}

#tattoo1{max-width:28%;}
#tattoo2{max-width:28%;
margin-left: 1%;}
#tattoo3{max-width: 44%;}
#tattoo4{max-width: 43%;
margin-left:1%;}

#typo1{max-width: 59%;}
#typo2{max-width: 59%;
margin-top:-1%;}
#typo3{max-width: 29%;
position:absolute;}

#window{max-width: 250px;
max-height:250px;
margin: 40px;}



.texte{
    display:block;
    max-width:92%;
    padding-left:1%;
    padding-right:5%;
	margin-top:-2%;
    /*display:inline-block;*/
    position:relative;
    font-family: textecourant;
    font-size: 24px;
    line-height: 26px;
}
.texteapropos{
	display:block;
    max-width:65%;
    
    /*display:inline-block;*/
    position:relative;
	margin-left:5%;
    font-family: textecourant;
    font-size: 24px;
    line-height: 30px;
	text-align: left;
}
.textearticle{
	font-family: textecourant;
	font-size:20px;
}
.h2{
    font-size: 28px;
}
#texteP3{
	margin-top: -8%;
}

.blocwindows{
	
	display:inline-block;
    position:relative;
    max-width: 60%;
    margin:auto;
	padding-top:10%;
}













@media screen and (max-width: 1280px) and (orientation: portrait){
body{
    overflow-x:hidden;
    font-family:textecourant;
}
@font-face {
    font-family:textecourant;
    src:url("medias/DarkerGrotesque-Regular.ttf"); 
}

@font-face {
    font-family:textecontact;
    src:url("medias/DarkerGrotesque-Medium.ttf"); 
}
	.p, .p:visited{
	color:#9a8a93;
	text-decoration: underline
}

.p:hover, .p:focus, .p:active{
	text-decoration: underline;
	color: black;
}
a, a:visited{
    color: black;
    text-decoration: black;
	/*font-family: lien;
	font-size: 16px;*/
}
a:hover, a:focus, a:active{
    color: #9a8a93;
}

h{
	color:black;
}
header{
    display:block;
    background-color:white;
	opacity: 75%;
    width:95%;
    position:fixed;
    padding-left:0%;
    margin-right:0%;
        top:0;
    z-index:1500;
    font-family: textecourant;
    font-size:20px;
    transition: top 0.3s;
}
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
.header{
    display: flex;
    margin-top:0px;
    margin-bottom:-5px;
    align-items: center;
    justify-content: space-between;
	font-size: 20px;
}
footer{
    background-color:white;
    z-index:2500;
    display:block;
	position:sticky;
	margin: auto;
	padding-bottom: 0.5%;
	max-width: 100%;
    font-family: textecourant;
    text-align:center;
    font-size:16px;
}

section{
    display: block;
    margin : auto;
    margin-top:8%;
}

.blocimages{
    display: block;
    position:relative;
	padding-top: 5%;
    max-width: 95%;
    margin:auto;
}
.blocimages:hover{
    z-index:1000;
}
.blocarticles{
	display: block;
	position: relative;
	max-width:65%;
	margin: auto;
	margin-top:15%;
	font-family: textecourant;
}

img{
    padding:1%;
}              /*les images par colonnes de 2*/

/*img:active{
	 -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); 
}*/


/*.echelle:hover{
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); 
}*/
	
#bluefall1{max-width:60%;}
#bluefall2{max-width:28%;
position: absolute;}
#bluefall3{max-width:28%;}

	#stift{max-width: 90%;}

	
#eden1{max-width: 90%;}
#eden2{max-width: 28%;
margin-top:-6%;}
#eden3{max-width: 60%;
margin-top:-3%;}

#music1{max-width:44%;}
#music2{max-width:44%;
position:absolute;}
#music3{max-width:44%;}

#tattoo1{max-width:28%;}
#tattoo2{max-width:28%;
margin-left: 1%;}
#tattoo3{max-width: 44%;}
#tattoo4{max-width: 43%;
margin-left:1%;}

#typo1{max-width: 59%;}
#typo2{max-width: 59%;
margin-top:-1%;}
#typo3{max-width: 29%;
position:absolute;}

#window{max-width: 250px;
max-height:250px;
margin: 40px;}



.texte{
    display:block;
    max-width:92%;
    padding-left:1%;
    padding-right:5%;
	margin-top:-2%;
    /*display:inline-block;*/
    position:relative;
    font-family: textecourant;
    font-size: 24px;
    line-height: 26px;
}
.texteapropos{
	display:block;
    max-width:65%;
    
    /*display:inline-block;*/
    position:relative;
	margin-left:5%;
	padding-top: 5%;
    font-family: textecourant;
    font-size: 26px;
    line-height: 30px;
	text-align: left;
}
.textearticle{
	font-family: textecourant;
	font-size:20px;
}
.h2{
    font-size: 28px;
}
#texteP3{
	margin-top: -8%;
}

.blocwindows{
	
	display:table;
    position:unset;
    width: 80%;
    margin:auto;
	padding-top:10%;
}

}