@import url('https://fonts.googleapis.com/css?family=Poppins');

/* ================================================
 * Reset
 * ================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html {
    height: 100%;
    font-size: calc(15px + 0.390625vw); 
    /* 
        62.5% de 16px(taille de police par default des navigateurs) = 10px 
        donc maintenant 1rem = 10px ;) c est plus simple pour tout 
    */
}

body {
    height: 100%;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    background-color: #cdc09d;
    background-image: url(../img/feuillehg.gif), url(../img/feuillehd.gif), url(../img/feuillebg.gif), url(../img/feuillebd.gif), url(../img/background1.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top -3% left -1%, top -1% right, bottom left -1%, bottom -1% right -4%, center;
    background-attachment: fixed fixed fixed fixed fixed;
    -webkit-background-size: 15%, 26%, 20%, 20%, cover; /* pour anciens Chrome et Safari */
    background-size: 15%, 26%, 20%, 20%, cover; /* version standardisée */
}

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

main {
    height: 100%;
}

.container-fluid{
    margin: 0;
/*    padding: 15px 0 15px 0;*/
}

.row{
    margin: 0;
/*    padding-top: 10px;*/
}



/*
#site-vertical{
    height: 100%;
    color: #fff;
    padding-top: 20%;
    text-align: center;
    font-family: 'Lauren';
    font-size: 5vw;
    background-image: url(../img/feuillehg.gif), url(../img/feuillehd.gif), url(../img/feuillebg.gif), url(../img/feuillebd.gif), url(../img/background.png);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top -3% left -1%, top -2% right, bottom left -1%, bottom -1% right -4%, center;
    background-attachment: fixed fixed fixed fixed fixed;
    -webkit-background-size: 15%, 26%, 23%, 30%, cover; 
    background-size: 15%, 28%, 23%, 25%, cover; 
}
*/


/*
@media screen and (orientation: portrait) {

    #site-vertical{display:block;}
    #site-horizontal{display:none;}
       
}

@media screen and (orientation: landscape) {

    #site-horizontal{display:block;}
    #site-vertical{display:none;}

}
*/




/* ================================================
* HOME
* ================================================ */

@font-face {
    font-family: 'Quentin';
    src: url('../fonts/webfontkit-quentin/quentin-webfont.woff'),
         url('../fonts/webfontkit-quentin/quentin-webfont.ttf') format('truetype'),
         url('../fonts/webfontkit-quentin/quentin-webfont.svg#Quentin') format('svg');
}

@font-face {
    font-family: 'Lauren';
    src: url('../fonts/webfontkit-lauren/laurenscript-webfont.woff'),
         url('../fonts/webfontkit-quentin/laurenscript.ttf') format('truetype'),
         url('../fonts/webfontkit-quentin/laurenscript-webfont.svg#Lauren') format('svg');
}

@font-face {
    font-family: 'Bestvalentina';
    src: url('../fonts/BestValentinaTTF.ttf') format('truetype');
}

/*
.quart {
    height: 15%;
}
*/


h1, h2, h3 {
    margin: 0;
}


.titre {
    padding-top: 4vh;
/*    height: 15%;*/
}


h1{
    font-family: 'Quentin';
    font-size: calc(60px + 0.390625vw);
}


.entête {
/*    height: 10%;*/
    padding-top: 2vh;
    color: #838729;
/*    font-weight: bold;*/
}


h2{
    font-size: calc(35px + 0.390625vw); 
    font-family: 'Bestvalentina';
}


.compteur {
/*    height: 10%;*/
    padding-top: 6vh;
    font-family: 'Quentin';
    font-size: 2.5vw;
}


h3{
    color: #fff;
    font-family: 'Quentin';
    font-size: calc(30px + 0.390625vw); 
}


.texte {
/*    height: 50%;*/
    padding-top: 6vh;
    color: #fff;
}

.texte, p {
    font-family: 'Bestvalentina';
/*    font-size: 1.8vw;*/
}


.bi-suit-heart {
    font-size: calc(10px + 0.390625vw);
}


.contacter {
    height: 7rem;
    width: 5rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
/*    display: none;*/
/*    height: 10%;*/
/*    padding-top: 4vw;*/
    background-image: url("../img/enveloppe2.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.contacter:hover {
    background-image: url("../img/enveloppeouverte1.png");
    background-repeat: no-repeat;
    background-size: contain;
}


/*
.bi-envelope-paper-heart {
    height: 15px;
}
*/


/*
.contact {
    position: relative;
    max-height : 100%;
    width : auto;
}

.contactopen{
    position: absolute;
    top: -122px;
    margin-bottom: -99px;
    opacity: 0;
}
*/


.lecteur {
    padding-top: 1vh;
    padding-bottom: 3vh;
/*    height: 3%;*/
}

audio {
/*    height: 15px;*/
}

a:hover .contact{
    opacity: 0;
}

a:hover .contactopen{
    opacity: 1;
}


audio {
    width: 200px;
    height: 20px;
}

a{
    color: #838729;
}

a:hover {
    color: #838729;
}

a:visited {
  color: #838729;
}

a:active {
  color: #838729;
}


.pic {
/*    text-align: center;*/
    margin: auto;
    width: calc(500px + 0.390625vw);;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.pic img { 
    max-width: 100%;
}

.signature {
    color: #838729;
    font-family: 'Quentin';
    font-size: calc(40px + 0.390625vw);
}

.intro {
    padding-top: 5vh;
    width: calc(400px + 0.390625vw);
/*    text-align: center;*/
    margin: auto;
}

.intro img{
    max-width: 100%;
}



/* ================================================ 
* MEDIA QUERIES
* ================================================ */
/*
@media all and (min-height:674px) {

}
*/

@media all and (min-width:1920px) {


    
}



@media all and (min-width:144Opx) and (max-width:1919px) {


    
}



@media all and (min-width:1366px) and (max-width:1439px) {
    


    
}


@media all and (min-width:1280px) and (max-width:1365px) {


    
}



@media all and (min-width:1024px) and (max-width:1279px) {

    
    
}



@media all and (max-width:1024px) {
    

}



@media all and (min-width:801px) and (max-width:812px) {


    
}



@media all and (min-width:480px) and (max-width:736px) {
    
   

    
}


@media all and (min-width:321px) and (max-width:480px) {

     .pic {
/*    text-align: center;*/
    margin: auto;
    width: calc(350px + 0.390625vw);;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.pic img { 
    max-width: 100%;
}

.signature {
    color: #838729;
    font-family: 'Quentin';
    font-size: calc(40px + 0.390625vw);
}

.intro {
    padding-top: 5vh;
    width: calc(300px + 0.390625vw);
/*    text-align: center;*/
    margin: auto;
}

.intro img{
    max-width: 100%;
}
    
}

@media all and (max-width:320px) {

     .pic {
/*    text-align: center;*/
    margin: auto;
    width: calc(280px + 0.390625vw);;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.pic img { 
    max-width: 100%;
}

.signature {
    color: #838729;
    font-family: 'Quentin';
    font-size: calc(40px + 0.390625vw);
}

.intro {
    padding-top: 5vh;
    width: calc(250px + 0.390625vw);
/*    text-align: center;*/
    margin: auto;
}

.intro img{
    max-width: 100%;
}
    
}