/* website site made to 1920x1080 resolution, time to change it to another ones */
/* ------ width ----- */

@media screen and (min-width: 1933px){
  .play_now_btn{bottom: -3%}
}
@media screen and (min-width: 1933px){
  .play_now_btn{bottom: -3%}
}
@media screen and (max-width: 1761px){
  .play_now_btn img{width: 20% !important}
}

@media screen and (max-width: 1539px){
  #place_your_bet{right: 0% !important}
}
@media screen and (max-width: 1427px){
  #host_the_games_text{height: 430px}
}
@media screen and (max-width: 1760px){
  #quotes_slide div{height: 200px}
  #host_the_games_text{height: 400px}
  .dots{top: -1vw}
}
@media screen and (max-width: 1330px){
  #quotes_slide div{
    height: 200px;
  }
  #bet_area{width: 70%}
}

@media screen and (max-width: 1000px){
  #screeni{top: 100% !important; margin-left: auto; margin-right: auto; left: 0; right: 0;  }
  #screens{float: right; height: 40vw; width: 100%; }
  #host_the_games_text{ margin-left: auto; margin-right: auto; left: 0; right: 0; width: 100% !important; top: 33vw; height: 450px; margin-top: unset }
  #host_the_games_text p{width: 60%; font-size: 1.6vw}
  #host_the_games_text h1{font-size: 3.4vw}
  #iphone{margin-right: 0%}
  .efect2{top: 215%}
  .efect3{top: 290%; height: 30%; width: 13%}
  #quotes_slide{margin-left: unset; width: 60%; top: 30vh}
  #quotes_slide h2{font-size: 2.5em}
  .quote{ font-size: 1.3em; width: 80%}
  .name_quote{font-size: 0.9em}

  #quotes_slide{display: block ; margin-left: auto; margin-right: auto; left: 0; right: 0; width: 100% !important;}
  #iphone{display: none}

  .inputArea{height: 55px; width: 60px}
  #place_your_bet h3{font-size: 2.1vw !important}
  #bet_area{width: 70% !important; margin-top: 0px}
  #bet_area img{ width: 120px;
    height: 135px;}
    .club_box{width: 120px;}
    .time{font-size: 1.5em}
    #club_names{margin-top: 15px !important}
    #club_names text{font-size: 1em !important}

    #place_your_bet{bottom: 40%; margin-left: auto; margin-right: auto; left: 0; right: 0 !important;}
    #buttons{bottom: 9%; left: 35%; width: 40vw}
    #start_playing h2{line-height: 80px; font-size: 300%;  width: 260px; bottom: 200%}
    .efect5{ height: 20vw; left: 17%}
    
}
@media screen and (max-width: 1220px){
  .background_bottom_piece{height: 190vh}

}
@media screen and (max-width: 1660px){
  #screens{width: 33vw;}
  #quotes_slide ul{bottom: -4vw}
  #screeni{left: 6vw;}
  .what_community_saying{font-size: 2em;}
  .quote{font-size: 1.3em}
  .name_quote{font-size: 0.8em !important}
}
@media screen and (max-width: 1067px){
  #header h1{font-size: 3vw}
  #logotipo{top: 3.5vw}
}
@media screen and (max-width: 1696px){
  #iphone{margin-right: 0}
}

@media screen and (max-width: 651px){
  #place_your_bet{width: 85%}
  #bet_area img{width: 35%; height: 35%}
  .club_box{width: 35%;}
}

/*---------- END WIDTH ------------ */

/*----------- HEIGHT ---------------- */


@media (max-height: 717px) and (max-width: 1539px) {
  #start_playing h2{bottom: 150%}
}
@media (max-height: 715px){
.background_bottom_piece{top: 20vw;}
}

@media (max-height: 788px) and (max-width: 1279px){
  #quotes_slide{top: 50vh !important}
  .background_bottom_piece{height: 170vh; top: 25vw;}
  .efect5{left: 1%}
  #bet_area{width: 60% !important; margin-top: 0px}
  #bet_area img{ width: 100px;
    height: 100px;}
    .club_box{width: 100px}
    .time{font-size: 1.5em}
    #club_names{margin-top: 15px !important}
    #club_names text{font-size: 1em !important}
    #quotes_slide div{height: 200px}
}

@media (max-height: 895px) and (max-width: 1223px ){
#place_your_bet{bottom: 36%}
#start_playing h2{line-height: 60px;}
#quotes_slide{top: 10vh}
}
@media (max-height: 870px){
  #quotes_slide div p{margin: 10% auto 0 auto;}
  #quotes_slide ul{bottom: 2vw;}
  }

/* ----------- END HEIGHT ---------- */
/* ----------- MOBILE ---------- */
@media (max-width: 1280px){
  #quotes_slide{top: 5vh !important}
  #place_your_bet {
    bottom: 14vw;
}
}
@media (max-width: 500px){
  .buttonWC3{
    left: 3vw;
  }
  .wcbar_text3 {
    font-size: 1.5vw;
    line-height: 5.5vw;
}
  .worldcup_bar{
    height: 11vw;
  }
  .topbarText{
    line-height: 9vw;
    margin-left: 12vw;
    font-size: 4vw;
  }
  #world_cup_time{
    font-size: 4vw;
    line-height: 11vw;
    left: 5vw;
  }
  .left{
    font-size: 2vw;
    line-height: 15vw;
    left: 12vw;
  }
  #wcLogo{
    height:65%;
    top: 1.8vw;
  }
  .buttonWC2{
    display: none;
  }
  .buttonWC{
    width: 27vw;
    height: 6vw;
    right: 1vw;
    top: 2.5vw;
    border: 0.4vw aqua solid;
    padding: 0;
  }
  .text1{
    font-size: 1.7vw;
    line-height: 2vw;
    margin-top: 0.8vw;
    padding: 0;
  }
  .text2{
    font-size: 2vw;
    padding: 0;
  }
  #hours{
    width: 60px
  }
}
/* IPHONE PLUS */
@media (max-width: 500px) and (max-height: 680px) {
 
.background_mid_piece {
  height: 80vh;
  top: 190vh;
  background-position-x: -49vw;
}
.background_bottom_piece {
  height: 165vh;
  top: 27vw;
}
  .timeboard{margin-top: 20px}
  #videoContainer{height: 100%}
  #logotipo{left: 0; right: 0; margin-right: auto; margin-left: auto;  width: unset !important;
    height: 15vw;
    top: 18vw;}
  #header h1{font-size: 5vw; text-align: center; width: 100vw; top: 36vw; font-weight: bold; left: unset !important}
  .header_message{width: 95vw; top: 39vh}
  .center_button{width: 85vw}
  .play_now_btn{height: 15vw; width: 85vw;}
  .play_now_btn text{font-size: 5vw}

  #screens{height: 0}
  .efect2{top: 199vh !important}
  .efect6{height: 17%; top: 87vh}
  #screeni{width: 90%; top: 105vh !important; height: unset !important; left: 0}
  #host_the_games_text{top: 70vh; height: 286px}
  #host_the_games_text p {width: 100%; font-size: 1em; line-height: 25px}
  #host_the_games_text h1 {font-size: 5.4vw;}
  #host_the_games_text h3{position: relative;
    top: -62vh;}
    #host_the_games_text ul{right: 40%}
  .efect2{top: 215%}
  #quotes_slide{top: 49vh !important}
  #quotes_slide h2 {font-size: 3vh;}
  .quote{margin-top: 15vw !important; width: 100%}
  #quotes_slide div p{font-size: 1em; line-height: 25px;}
  #quotes_slide div {height: 160px;}
  .marks{font-size: 1em}

#bet_area img {
  width: 90px;
  height: 90px;
}
.club_box{width: 90px}
  .name_quote {font-size: 0.7em !important;}

  #big-iphone{height: 60vh}
  .efect3{height: 20%; width: 25%; top: 305vh}
  .efect4{top: -35vh ; right: 2vw}
  

  .expandable_video{left: 0vw; width: 100%; top: -110vw}
  #start_playing h1{top: -85vh; font-size: 3.5vw; right: 5%; line-height: 15px;}

  #place_your_bet{bottom: 45%}
  #place_your_bet h3 { font-size: 3vw !important}
  .timeboard{width: 80%}
  #bet_area{width: 100% !important}
  .place_your_bet_button{width: 40vw; height: 10vw; margin-top: 20px; border: 4px aqua solid}
  .place_your_bet_button text{line-height: 10vw; font-size: 4vw}
  #start_playing h2{line-height: 50px; font-size: 200%; text-align: center; left: 20%; bottom: 150%}
  #hours{margin-right: 14%}
  #minutes{margin-right: 17%}
  .margin_minutes{margin-right: 25%}
  .margin_hours{margin-right: 21.5%; margin-left: 4%}
  .inputArea{margin-top: 60px; height: 40px; width: 45px; font-size: 2em}
  .time_name{font-size: 1em !important}
  .dots{font-size: 12vw; position: relative; top: -3vw}
  #buttons{left:unset; width: 100%}
  .button{display: block}
  .button img {width: 40vw; height: 11vw; margin-right: 0 !important}
  #gglPlay{padding-top: 3%}
.logo { width: 4.5vw; height: 4.5vw;}
#start_playing h1{font-size: 5.5vw; line-height: 30px; margin-left: auto; margin-right: auto; left: 0; 
  right: 5vw; top: -86vh; text-align: right;}
.play_button{width: 15vw; height: 15vw; top: 70%}
.circle{width: 14px; height: 14px}
 #club_names{margin-top: 0 !important}
}
/* IPHONE X */
@media (max-width: 381px) and (max-height: 641px) {
  .background_mid_piece{top: 195vh}
  .header_message{top: 45vh !important}
  #hours{margin-right: 11% !important}
  #minutes{margin-right: 9vw !important}
  .margin_hours{margin-right: 19% !important}
  .margin_minutes{margin-right: 15vw !important}
  .background_bottom_piece {height: 170vh !important;}
  .inputArea{width: 40px; height: 35px}
  #host_the_games_text{height: 290px !important}
  #place_your_bet{bottom: 45% !important}
  #start_playing h1{top: -70vh}
  .efect4{top: -31vh}
  .dots{top: -4vw} 
}
/* IPHONE */
@media (max-width: 390px) and (max-height: 600px) {
  #quotes_slide h2{font-size: 1.3em}
  #hours{margin-right: 11%}
  #minutes{margin-right: 13%}
  .margin_hours{margin-right: 19%}
  .margin_minutes{margin-right: 22%}
  .inputArea{margin-top: 45px}
  #club_names{margin-top: unset !important}
  #bet_area img{width: 80px !important; height: 80px !important}
  .club_box{width: 80px}
  #start_playing h2{left: 17% }
  .dots{top: -4vw}
  .background_bottom_piece {
    height: 190vh !important;
}
#start_playing h1 {
  top: -79vh;
}
.seta{
  animation: arrow_unstopable_mobile 1s linear infinite;  
  }
}
/* GALAXY S5 */
@media (max-width: 370px) and (max-height: 650px) {
  #headervideo{
    width: 180vw;
  }
  #big-iphone{height: 69vh}
  #hours{margin-right: 12% !important}
  #minutes{margin-right: 11.5% !important}
  .margin_hours{margin-right: 20% !important}
  .margin_minutes{margin-right: 21% !important}
  .inputArea{margin-top: 45px}
  #club_names{margin-top: unset !important}
  #bet_area img{width: 80px !important; height: 80px !important}
  .club_box{width: 80px}
  #start_playing h2{bottom: 140%}
  #host_the_games_text{height: 290px}
  .dots{top: -4vw}
}
@media (max-width: 320px) and (max-height: 580px) {
  #quotes_slide{top: 15vh !important}
  #big-iphone{height: 69vh}
  #place_your_bet{bottom: 43%}
  #start_playing h2{left: 12%; letter-spacing: 4.5px; bottom: 130%}
  #hours{margin-right: 2%}
  #minutes{margin-right: 8%}
  .margin_hours{margin-right: 13%;margin-left: 4%}
  .margin_minutes{margin-right: 18%}
  .inputArea{height: 38px; width: 40px;}
  .timeboard{margin-top: 30px}
}

/*---------- IPAD LANDSCAPE ----------------*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
and (orientation : landscape) { 
  .dots {
    top: -2vw;
}
#background{
  background-position-y: 7vh;
}
.efect2 {
  top: 180%;
}
.efect3 {
  top: 246%;
}
#place_your_bet {
  bottom: 40%;
}
.background_mid_piece{    height: 135%;
  top: 160%;}
#buttons{left: 31%}
.button img {
  width: 17vw;
  height: 5vw;
}
.place_your_bet_button{margin: 50px auto 0 auto;}
 #screeni{top: 105% !important; width: 59vw !important;}
 .header_message{width: 55vw; top: 25vw}
 #host_the_games_text{top: 42vw}
 #host_the_games ul{right: 45%}
 #start_playing h1{font-size: 3.1vw; top: 16.5vw; right: 13.5%}
 #start_playing h2{text-align: center; left: 18%}
 #bet_area{width: 85% !important}
 #bet_area img{width: 140px; height: 140px}
 .club_box{width: 140px}
}
/*---------- IPAD PORTRAIT ----------------*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
and (orientation : portrait) {
  .background_mid_piece{height: 85%; top: 151%}
  #logotipo{width: 16vw; height: 10vw; top: 5vw}
  #header h1{font-size: 5vw; left: 27vw; top: 7.5vw}
  .header_message{width: 70vw; top: 30vh}
  .efect6{height: 20%; width: 25%;}
  #host_the_games_text{top: 59vh;  height: 350px}
  #host_the_games_text h1 {
    font-size: 6.4vw;
}
  #quotes_slide { top: 10vw;}
  #host_the_games_text p{font-size: 3vw; width: 95%}
  #host_the_games_text h3{top: -220%;
    position: absolute;
    left: 0;
    right: 0;}
  #screeni{width: 70vw !important; top: 120% !important; left: 0; right: 0}
  #quotes_slide{top: unset}
  #buttons{left: 20%}
  #big-iphone{height: 70vh}
  .button img {width: 27vw; height: 7vw;}
  .efect5{left: 5%; bottom: 2%}
  .efect6{height: 20%; width: 35%; top: 88%}
  
  .logo {width: 3.5vw; height: 3.5vw;}
  #start_playing h2{ text-align: center; left: 33% !important}
  #place_your_bet{bottom: 38%}
  #place_your_bet h3{font-size: 3.1vw !important}
  .place_your_bet_button{height: 5vw; width: 20vw; margin-top: 40px; }
  .place_your_bet_button text{line-height: 5vw; font-size: 2vw }
  .background_bottom_piece {height: 150vh;}
  .play_now_btn{bottom: 40%;}
  .play_now_btn text{font-size: 2.6vw}
  .seta{margin: 8vh auto; width: 10vw}
  .center_button{width: 50vw; height: 10vw;     position: relative;
    top: -7%;}
  .expandable_video_backpiece{width: 75vw; height: 45vw; left: 4vw}
  .expandable_video {height: 30vw; width: 85vw; top: -10vw; left: 8vw;}
  .play_button {height: 15vw; width: 15vw; top: 50%}
  #start_playing h1{ font-size: 4.1vw; top: 35vw; right: 3% }
  .dots{font-size: 8vw; top: -2vw}
}  

/* retina */
@media
  only screen and (-webkit-min-device-pixel-ratio: 4),
  only screen and (   min--moz-device-pixel-ratio: 4),
  only screen and (     -o-min-device-pixel-ratio: 4/1),
  only screen and (        min-device-pixel-ratio: 4),
  only screen and (                min-resolution: 540dpi),
  only screen and (                min-resolution: 4dppx),
  only screen and (                min-height: 1300px) and (orientation: portrait){ 
  #background{
    background-position-y: 63vw
  }
  #videoContainer {
    width: 100vw;
    height: 170vw;
}
  .worldcup_bar{height: 11vw}
  #world_cup_time{font-size: 4.5vw; line-height: 11vw; left: 3.5vw}
  .left{line-height: 11vw; font-size: 3vw; left: 22vw}
  .topbarText{line-height: 11vw; font-size: 4.5vw; margin-left: 10vw}
  #wcLogo{height: 70%; top: 1.3vw;}
  .buttonWC2{display: none}
  .buttonWC1{right: 3vw; height: 5vw; width: 18vw; top: 2vw; border: 0.4vw aqua solid;}
  .text1{line-height: 1.5vw; margin-top: 1.1vw; font-size: 1.7vw}
  .text2{font-size: 1.6vw}

  #logotipo {top: 20vw; height: 9vw; width: 15vw;}
  #header h1{font-size: 3vw; top: 23vw; left: 23vw}
  .header_message{width: 90vw; top: 90vw}
  .play_now_btn{
    width: 50vw;
    height: 10vw;
  }
  .play_now_btn text {
    font-size: 3.3vw
  }
  .center_button {
    display: table;
    margin: 20vw auto 0 auto;
}
.seta {
  margin: -2vw auto !important;
  width: 10vw;
}
  .efect6 {
    top: 168vw;
    height: 15%;
    height: 20vw;
    width: 30vw;
}
#screeni {
  top: 210vw !important;
  width: 80vw;
}
  #host_the_games_text h3{position: absolute; top: -115vw; left: 0; right: 0; font-size: 7vw}
  #host_the_games_text{top: 95vw; height: 45vw; width: 90vw !important;}
  #host_the_games_text ul {
    right: 40vw;
}
  #host_the_games_text h1 {
    font-size: 5vw;
}
#host_the_games_text p {
  width: 80vw;
  font-size: 3.6vw;
  line-height: 45px;
}
.background_mid_piece {
  top: 318vw !important;
  height: 140vw !important;
}

  #quotes_slide {
    top: -45vw !important;
}
#quotes_slide h2{
  font-size: 5.5vw !important
}
.quote{font-size: 3vw !important}
.name_quote{font-size: 2.3vw !important; margin: 5vw 0 0 0 !important;}
#quotes_slide ul {
  bottom: -10vw;
}
.efect2 {
  top: 347vw;
}
.efect3 {
  top: 400vw;
  height: 28vw;
  width: 20vw;
}
#place_your_bet {
  bottom: 82vw; width: 80vw
}
#place_your_bet h3 {
  font-size: 3vw !important;
  letter-spacing: 0.3vw;
}
.circle{
  width: 3vw;
  height: 3vw;
}
#hours{
  width: 8vw;
  margin-left: 1.5vw
}
#minutes{
  width: 7vw;
  margin-right: 11vw;
}
.margin_hours{
  margin-left: 2vw;
  margin-right: 9.5vw
}
.margin_minutes {
  margin-right: 12vw;
}
#bet_area img {
  width: 13vw;
  height: 13vw;
}
#bet_area {
  width: 65vw !important;
}
.inputArea {
  height: 6vw;
  width: 7vw;
  margin-top: 6vw
}
.club_box {
  width: 14vw;
}
.dots {
  font-size: 6vw;
  margin: 0 1vw;
  top: -1.5vw
}
#club_names {
  margin-top: 2vw !important;
}
#seconds{
  width: 6vw
}
.place_your_bet_button{
  width: 20vw;
    height: 5vw;
    margin: 5vw auto 0 auto
}
#club_names text {
  font-size: 2vw !important;
}
#start_playing h1 {
  right: 10vw;
  top: 29vw;
  font-size: 4vw;
}
.efect4 {
  top: 45vw;
  height: 20vw;
  width: 18vw;
}
.play_button{
  top: 18vw;
  left: 35vw;
}
.expandable_video{
  width: 80vw
}
.timeboard{
  height: 7vw;
}
#start_playing h2 {
  left: 10vw !important;
  bottom: 25vw;
  font-size: 7vw;
  width: 35vw;
  line-height: 9vw
}
.time_name {
  font-size: 2.5vw !important;
}
.time {
  font-size: 2.5vw;
}
.efect5 {
  height: 25vw;
  left: 5vw;
  bottom: 10vw
}
.place_your_bet_button{
  border: 0.6vw aqua solid;
}

.place_your_bet_button text {
  line-height: 5vw;
  font-size: 2vw;
}
.button img {
  width: 24vw;
  height: 7vw;
}
#buttons {
  left: 25vw;
}
#big-iphone{
  height: 40vw;
}
.background_bottom_piece {
  height: 200vw;
  top: 20vw;
}
#start_playing{
  height: 150vw;
  width: 100vw
}
#footerContainer{
  height: 8vw
}
.logo {
  width: 4vw;
  height: 4vw;
}

}