@font-face{
     font-family: "GreatVibes-Regular";
     src: url("../fonts/GreatVibes-Regular.eot?"), /* pour IE */
            url("../fonts/GreatVibes-Regular.woff"), /* pour Firefox, Chrome*/
            url("../fonts/GreatVibes-Regular.ttf"), /* pour Safari et Opéra*/
            url("../fonts/GreatVibes-Regular.svg"); /* pour iPhone, iPad */
     font-weight: normal;
}
@font-face{
     font-family: "Courgette-Regular";
     src: url("../fonts/Courgette-Regular.eot?"), /* pour IE */
            url("../fonts/Courgette-Regular.woff"), /* pour Firefox, Chrome*/
            url("../fonts/Courgette-Regular.ttf"), /* pour Safari et Opéra*/
            url("../fonts/Courgette-Regular.svg"); /* pour iPhone, iPad */
     font-weight: normal;
}
.intro h1 {
  font-size: 60px;
  font-weight: 300;
  letter-spacing: 2px;
  font-family: "GreatVibes-Regular";
  color:#c2ad82;
  margin-top:-180px;
}

.intro p {
  letter-spacing: 1px;
  line-height: 24px;
  margin-left:-150px;
  margin-top:-20px;
  font-family: "Courgette-Regular";
}

.logo p {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 2px;
  font-family: "GreatVibes-Regular";
  color:#c2ad82;
}

.titre_top{
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 2px;
  font-family: "GreatVibes-Regular";
  color:#c2ad82;
  padding-bottom:10px;
  width: 200px;
}

.titre_header{
  font-size: 54px;
  font-weight: 300;
  letter-spacing: 2px;
  font-family: "GreatVibes-Regular";
  color:#c2ad82;
  padding-bottom:30px;
  margin-top:-20px;
}

.titre_footer {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 2px;
  font-family: "GreatVibes-Regular";
  color:#c2ad82;
  padding-bottom:10px;
  text-align:left;
}

.text_titre_footer {
font-size: 12px;
    font-weight: 300;
    letter-spacing: 2px;
    font-family: Arial, Helvetica, sans-serif;
    color: #d5d5d5;
    text-align: left;
    padding-bottom: 20px;
}


/*iPhone 5 & 5S in portrait & landscape*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
body:before {
  background: url(images/1.jpg);
}
.titre_top{
  font-size: 27px;
}
.intro h1 {
  display:none;
}

.intro p {
display:none;}

.logo p {
  font-size: 27px;
}
.js-footer-section{ 
    padding-top: 20px;
}
}




/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
.js-footer-section{ 
padding-top: 20px;
}
#js-play-song {
width: 240px;
} 
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
.js-footer-section{ 
padding-top: 200px;
}
#js-play-song {
width: 240px;
} 
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
.js-footer-section{ 
padding-top: 20px;
}
#js-play-song {
width: 240px;
} 
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
.js-footer-section{ 
padding-top: 200px;
}
#js-play-song {
width: 240px;
} 
}

/* ----------- iPad Pro 10.5" ----------- */
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
.js-footer-section{ 
padding-top: 20px;
}
#js-play-song {
width: 240px;
} 
}