/* TODO e
header h1 needs to have left fixed in various resolutions
 


*/
html{background-color: #121212}
html, body, div{padding: 0; margin: 0}
h1, h2 {margin: 0; padding: 0}


/*-----------------FONTS----------------*/

@font-face {
    font-family: 'LeviReBrushed';
    src: url('../fonts/LeviReBrushed.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Rubik-Regular';
    src: url('../fonts/Rubik/Rubik-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Rubik-Light';
    src: url('../fonts/Rubik/Rubik-Light.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Rubik-Bold';
    src: url('../fonts/Rubik/Rubik-Bold.ttf') format('truetype');
  }
  
/*---------------------------------------*/

#background{
    margin-bottom: -2px;
    background-image: url("../images/fundo_1920_1080.png");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 480%;
    background-position-y: 12vh;
}

/*---------- header -------- */
#header{
    height: 76vh;
    z-index: 1;
}
.header_message{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 20vh;
    width: 45vw;
}
#header h1 {
    display: table-cell;
    font-weight: bold;
    font-family: 'Rubik-Light';
    font-size: 1.6vw;
    letter-spacing: 2px;
    position: absolute;
    top: 6.3vw;
    text-align: left;
    left: 12vw;
    color: whitesmoke;
}
.play_now_btn{
        display: table-cell;
        vertical-align: middle;
        width: 25vw;
        position: relative;
        margin: 0 auto;
        text-align: center;
        height: 4.4vw;
        z-index: 2;
        border-radius: 70px;
        font-family: 'Rubik-Bold';
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        background: linear-gradient(to right, rgb(22, 120, 155), rgb(8, 179, 163));      
}
.seta{
    margin: 0 auto;
    left: 0;
    right: 0;
    display: block;
    padding-top: 2vh;
    position: absolute;
    bottom: 1.5vh;
    animation: arrow_unstopable2 1s linear infinite;
}
@keyframes arrow_unstopable_mobile {
    0%, 100% {
      bottom: 1.5vh;
    }
    50% {
        bottom: 0.5vh;
    }
  }
  @keyframes arrow_unstopable2 {
    0%, 100% {
        bottom: 1vh;
      }
      50% {
          bottom: 0vh;
      }
    }
.link{color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; }
.link:visited{ color: transparent}
.center_button{display: table; margin: 4vw auto 0 auto}
.play_now_btn text{color: whitesmoke; letter-spacing:5px; font-size: 1.6vw}
.play_now_btn:hover{
    cursor: pointer;
    transform: scale(1.1);
    background: linear-gradient(to right, rgb(39, 164, 192), rgb(5, 224, 203));
}

.fixedWidth{
    width: 86.5%;
    margin: 0 auto;
}
#logotipo{
    width: 6vw;
    height: 4vw;
    position: absolute;
    top: 5vw;
    left: 4vw;
}

#videoContainer{
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
}
.worldcup_bar{
    width: 100vw;
    height: 4vw;
    position: fixed;
    top: 0;
    z-index: 999;
    background: linear-gradient(#274758, #1E3641);
}
.topbarText{
    line-height: 4vw; 
    font-family: 'Rubik-Light';
    margin-left: 12vw;
    color: whitesmoke;
    font-size: 1.8vw;
    font-weight: 100;
}
#world_cup_time{
    font-family: 'Rubik-Bold';
    color: whitesmoke;
    font-size: 1.8vw;
    left: 9vw;
    position: absolute;
    line-height: 4vw;
}
.left{
    font-size: 0.8vw;
    line-height: 4vw;
    position: absolute;
    left: 17vw;
    font-family: 'Rubik-Light';
    color: whitesmoke;
}
#wcLogo{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0.4vw;
}
#wcLogo:hover{
    cursor: pointer;
}
.buttonWC{
    background-color: transparent;
    display: block; 
    border-radius:45px; text-align:center;  border: 0.2vw aqua solid;
    width:11vw; height:2.5vw;
    display: table;
    position: absolute;
    top: 0.6vw;
    font-family: 'Rubik-Light';
    z-index: 400;
    -webkit-transform: all ease 0.8s;
	-moz-transition: all ease 0.8s; 
    transition: all ease 0.8s;
    box-shadow: inset 0 0 0 0 aqua;
}
.buttonWC1:hover{
    background-color: aqua;
    cursor: pointer;
    box-shadow: inset 200px 0 0 0 aqua;
}
.buttonWC2:hover{
    background-color: aqua;
    cursor: pointer;
    box-shadow: inset -200px 0 0 0 aqua;
}
.buttonWC:hover .text1{
    color: #121212;
}
.buttonWC:hover .wcbar_text2{
    color: #121212;
}
.buttonWC1{
    right: 15vw
}
.buttonWC2{
    right: 2vw;
}
.buttonWC3{
    right: 27vw;
}
.wcbar_text{
    color: whitesmoke;
}
.wcbar_text2{
    color: whitesmoke;
    font-size: 1vw;
    margin: 0;
    line-height: 2.5vw;
    font-weight: 800;
}
.wcbar_text3{
    color: whitesmoke;
    font-size: 0.7vw;
    margin: 0;
    line-height: 2.5vw;
    font-weight: 800;
}
.text1{
    font-size: 0.6vw;
    margin: 0;
    line-height: 1vw;
    margin-top: 0.3vw;
}
.text2{
    font-weight: 900;
    margin: 0;
    font-size: 0.9vw;
}

#headerVideo {
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/*--------- HOST GAMES ---- */
#host{
    width: 100%;
    height: 145vh
}

#host_the_games_text{
    height: 480px; 
    display: block;  
    float: right; 
    margin-top: 15%;  
    text-align: center !important;
    width: 40vw;
    position: relative;
}
#host_the_games_text li:hover{
    transform: scale(1.5);
}
#host_the_games_text ul{
    display: inline-table;
    position: absolute;
    bottom: 0vw;
    padding: 0;
    right: 45%;
    margin-right: auto;
    margin-left: auto;
}
#host_the_games_text h1{
    font-family: 'Rubik-Regular';
    letter-spacing: 4px;
    display: inline-block; 
    font-size: 3vw; 
    color:white; 
    margin: 0.7em auto 0 auto;
}
#host_the_games_text h3{
    font-family: 'LeviReBrushed';
    display: inline-block;  
    font-size: 4vh; 
    color: aqua;
}
#host_the_games_text p{
    font-family: 'Rubik-Regular';
    font-size: 1.2vw; 
    color: white; 
    display: inline-block;
    line-height: 30px;
    width: 85%;
    z-index: 4;

}

.screen{
    clear: both; 
    position: absolute; 
    width: 37vw; 
    height: 30vw;
}
/*#screen1{left: 28vh; top: 120vh; transform: rotateZ(25deg);} #screen2{top: 128vh; left: 15vh; transform: rotateZ(-10deg)} #screen3{top: 145vh; left: 12vh; transform: rotateZ(-25deg)}*/
#screens{
    height: 130vh; 
    background-color: transparent;  
    display: block; 
    width: 42vw; 
    float: left;   
}
#screeni{
    position: absolute; 
    left: 7vw; 
    top: 110%;
    width: 44%;
}
#video{
    clear: both;
    width: 100%; 
    height: 400px;
    display: block; 
}

/* ------- VIDEO FRIENDS 
#video_friends{
    width: 100%; 
    height: 500px
}
#video h1{
    position: relative; 
    top: -10%; 
    left: 10%; 
    font-size: 150%; 
    color:aqua; 
    text-align: center; 
    display: table;
}
------*/

/* -------- big-iphone ------- */
#big-iphone{
    height: 115vh; 
    clear: both
}

.efect2{
    position: absolute; 
    right: 4%; 
    top: 192%; 
    height: 22vw
}
.efect3{
    position: absolute; 
    left: 4%; 
    top: 260%; 
    height: 18vw
}
.efect4{
    position: absolute; 
    right: 6vw; 
    top: -25%; 
    height: 20vw; 
    width: 17vw
}
.efect5{
    position: absolute; 
    left: 8%; 
    bottom: 7%; 
    height: 15vw
}
.efect6{
    position: absolute; 
    left: 6%; 
    top: 90%; 
    height: 30% 
}


#quotes_slide{ 
    position: relative; 
    float: left; 
    margin-left: 8vw;
    height: 450px; 
    width: 50%;
    text-align: center; 
    vertical-align: middle; 
    z-index: 4;
    top: 5vh;
}
.quote{
    font-size: 2em
}
.name_quote{
    margin: 5vh 0 0 0 !important;
}
#quotes_slide div p{
    font-family: 'Rubik-Regular';
    font-weight: normal;
    color: white; 
    margin:15% auto 0 auto; 
    position:relative; 
}
#quotes_slide ul{
    margin: 0 auto; 
    display: table;
    height: 20px; 
    padding: 0; 
    position: relative; 
    bottom: 0; 
    z-index: 1;
}
#quotes_slide div{
    height: 300px; 
    width: 100%; 
    position: inherit
}
#quotes_slide li:hover{
    transform: scale(1.5);
}
.marks{
    color: aqua;
    font-family: 'LeviReBrushed';
    font-size: 1.5em;
    margin-top: 4px;
}
#iphone{
    top: -19vh;
    position: relative;
    width: 30%;

    float: right;
    /*transform: perspective( 4000px ) rotateY( -35deg );*/
}
.what_community_saying{
    font-family: 'LeviReBrushed';
    font-weight: normal;
    font-size: 3em;
    color: aqua;
    position: relative;
    top: 5vh;
    display: inline-block;
}

/*----------- SLIDER ----------*/
.circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: gray;
    float: left;
    list-style: none;
    margin-right: 15px;
}
.selected{
    background-color: aqua;
}
#slideOne, #slideTwo, #slideThree, #slideFour{
    position: relative; 
    display: none; 
}
/* ------------ compete ---------- 
#compete{
    top: -10%;
    position: absolute;  
    z-index: 1; 
    height: 190px; 
    right: 13%
}
#compete h3{
    display: table; 
    float: right; 
    margin-right: 15%; 
    color: aqua
}
#compete ul{
    clear:both; 
    padding: 0; 
    height: 50px; 
    position: relative;  
    float: right; 
    margin-right: 0%
}
#compete li{
    display: inline-block; 
    list-style: none; 
    margin-top: 18px; 
    margin-left: 30px
}
.league_icon{
    width: 80px; 
    height: 60px
}
/*

/* ---- start_playing ------- */
#play{
    width: 100%; 
    height: 100%; 
    position: relative;
}
.play_button{
position: absolute;
top: 38%;
left: 40%;
height: 9vw;
width: 9vw;
}
.play_button:hover{
    cursor: pointer;
}
#start_playing{
    width: 100%;
    height: 140vh;
}
#start_playing h1{
    text-align: center;
    z-index: 1; 
    position: absolute; 
    right: 17%; 
    top: 21vw;
    color: aqua;
    font-weight: normal;
    font-family: 'LeviReBrushed';
    font-size: 2.1vw;
    z-index: 4;
}
#start_playing h2{
    text-align: left;
    font-weight: normal;
    font-family: 'LeviReBrushed';
    z-index: 1; 
    position: absolute;
    bottom: 260%;
    left: 6%;
    color: aqua;
    letter-spacing: 8.5px;
    line-height: 100px;
    font-size: 400%;
    width: 320px;
}
.button {
    display: table-cell;
}
.button img{
    width: 14vw;
    height: 4vw;
}
#buttons{
    z-index: 1; 
    position: absolute; 
    bottom: 15%;
    text-align: center; 
    width: 80vw; 
    display: block;
    left: 12vw;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

.inputArea{ 
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: textfield; 
    border: none; 
    text-align: center;  
    outline: none; 
    font-size: 3em; 
    width: 60px;
    height: 60px;
    background-color: gray; 
    color: white;
    border-radius: 0;
    border-bottom: 0.3vw aqua solid; 
    z-index: 1;
    margin-top: 60px;
    vertical-align: 17px;
}
#place_your_bet{
    position: absolute; 
    width: 650px; 
    right: 11%; 
    display: block;
    text-align: center;
    bottom: 15%;
    z-index: 4;
}
.time{
    float: left;
    font-size:3em;
    color: whitesmoke;
    font-family: 'Rubik-Bold';
}
#hours{
    text-align: center; 
    height: 100%; 
    margin-right: 20%; 
    margin-left: 2.5%;
    width: 80px;
} 
#minutes{
    text-align: center; 
    width: 60px; 
    height: 100%; 
    margin-right: 25%
} 
#seconds{
    text-align: center;
    width: 60px; 
    height: 100%
} 

.time_name{
    font-family: 'Rubik-Light';
    font-size: 1.5em !important;
    color: whitesmoke;
    float: left;
    margin-top: 2%;
}
.margin_hours {
    margin-right: 20%;
    margin-left: 4%;
}
.margin_minutes{
    margin-right: 26% 
}
.timeboard{
    width: 60%;
    height: 10vh;
    margin: 50px auto 20px auto;
}

#place_your_bet h3{
    text-align: center;
    color: white; 
    letter-spacing: 4px; 
    font-size: 1.1vw;
    font-family: 'Rubik-Regular';
    font-weight: 500;
}
.dots{
    color: gray;
    font-size: 4vw;
    margin: 0 5px;
    position: relative;
    top: -0.5vw;
}
.place_your_bet_button {
    background-color: transparent;
    display: block; 
    margin: 80px auto 0 auto;
    border-radius:45px; text-align:center;  border: 6px aqua solid;
    width:14vw; height:3.5vw;
    -webkit-transform: all ease 0.8s;
	-moz-transition: all ease 0.8s; 
    transition: all ease 0.8s;
    box-shadow: inset 0 0 0 0 aqua;
}
.place_your_bet_button:hover{
    background-color: aqua;
    cursor: pointer;
    box-shadow: inset 500px 0 0 0 aqua;
}
.place_your_bet_button:hover text{
    color: #121212;
}
.place_your_bet_button text{
    display: inline-block; line-height: 3.5vw;   
    color: whitesmoke; font-size: 1.3vw; font-family: 'Rubik-Bold'
}
#club_names{
    height: 20px; 
    width: 100%; 
    text-align: center; 
}

#club_names text{
    padding: 0;
    font-size: 1.5em; 
    color: white;
    font-family: 'Rubik-Regular';
}

#bet_area{ 
    margin: 0 auto; 
    width: 80%; 
    text-align: center !important;
    margin: 50px auto 0 auto;
}
.club_box{
    width: 140px; 
    text-align: center; 
    height: 25px; 
    display: table-cell;
    margin-top: 10px;
}

/* ------------ footer ------*/
footer{
    position: relative; 
    bottom: 0; 
    clear: both
}
#marginLi{
    margin-left:5%; 
    margin-right:5%
}
#footerContainer{
    position: absolute; 
    text-align: center; 
    bottom: 0;
    width: 87%;
    left: 7%;
}
#footerContainer ul{
    padding: 0; 
    height: 50px; 
    position: relative; 
    display: inline-block; 
    bottom: 2vw;
}
#footerContainer li{
    display: inline-block; 
    list-style: none; 
    margin-top: 18px;
}
#footerContainer a{
    width: 40px; 
    height: 40px;
}
.logo{
    width: 2.5vw; 
    height: 2.5vw;
}
.logo:hover{
    transform: scale(1.1)
}
.expand{
    margin-left: 4vw;
    margin-right: 4vw;
}
.expandable_video{
    height: 30vw; 
    width: 60vw; 
    position: absolute; 
    top: -11.5vw;
    left: 13vw; 
    z-index: 3; 
}
.expandable_video_backpiece{
    height: 30vw; 
    width: 50vw; 
    position: absolute; 
    top: -14vw; 
    left: 10vw; 
    background-color: aqua;
    z-index: 3;
} 
.background_mid_piece{
    position: absolute;
    background-image: url("../images/background_mid.png");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
    width: 100%;
    height: 155%;
    top: 170%;
    z-index: 0;
}
.background_bottom_piece{
    position: relative;
    bottom: -13%;
    background-image: url("../images/background_bottom.png");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
    width: 100%;
    height: 158vh;
    background-position-y: -30%;
    z-index: 2;
}