/* Afonso Benedito 54937 */
/* Afonso Teles da Silva 54945 */
/* Tomás Ndlate 54937 */

/* JOIN BOX CHARACTERISTICS */

.carac{
    top: 280px;
    display: inline;
    text-align: center;
    position: absolute;
    font-family: burbank, sans-serif;
    transition: 0.05s;
}

/*-----------------------------------------------*/

/* JOIN BOX NAMES */

.carac h1{
    text-transform:uppercase;
    color: white;
    font-weight: 500;
}

.carac h4{
    color: white;
    font-weight: 500;
}

.carac p{
    color: white;
    font-weight: 500;
}

.carac a {
    text-decoration: none;
}

/*-----------------------------------------------*/

/* JOIN BOX - TEXT AND PASSWORD BOXS CHARACTERISTICS */

.carac input[type="text"],.carac input[type="password"],.carac input[type="email"],.carac input[type="date"],.carac input[list] {
    
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid ;
    border-color: white;
    color: white;
    width: 200px;
    height: 30px;
    border-radius: 24px;
    transition: 0.05s;
    outline: none;
    background: none;
}

.carac input[type="date"],.carac input[list]{
    cursor: pointer;
}

.carac input[type="text"]:focus,.carac input[type="password"]:focus,.carac input[type="email"]:focus,.carac input[type="text"]:hover,.carac input[type="password"]:hover,.carac input[type="email"]:hover{
    width: 280px;
    border-color: #2ecc71;
    text-align: center;
    
}

/*-----------------------------------------------*/

/* JOIN BOX - BUTTONS BOXS CHARACTERISTICS */

.carac input[type="submit"]{
    background: none;
    display: block;
    margin: 20px auto;
    border: 2px solid white;
    width: 125px;
    height: 35px;
    color: white;
    border-radius: 24px;
    transition: 0.05s;
    cursor: pointer;
    text-align: center;
}

.carac input[type="submit"]:hover{
    width: 160px;
    border-color: #2ecc71;
    background: #2ecc71;
    color: aliceblue;
}

.carac button{
    background: none;
    display: block;
    margin: 20px auto;
    border: 2px solid white;
    width: 125px;
    height: 35px;
    color: white;
    border-radius: 24px;
    transition: 0.05s;
    cursor: pointer;
    text-align: center;
}

.carac button:hover{
    width: 160px;
    border-color: #2ecc71;
    background: #2ecc71;
    color: aliceblue;    
}
/*-----------------------------------------------*/

/* JOIN BOX - REGISTER, LOGIN and GUEST POSITIONS */


.Register{
    width: 20%;
    left:7.5%;
}

.Login{
    left:40%;
    width: 20%;
    visibility: visible;
}

.Recuperation{
    left:40%;
    width: 20%;
    visibility: hidden;  
}

.Guest{
    left: 72.5%;
    width: 20%;
}

.Opacity{
    position: absolute;
    background:#d54200;
    width:100%;
    height: 100%;
    opacity: .8;
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 15px;
}

/*-------------------------------*/

.Jogar{
    left:40%;
    width: 20%;
    visibility: hidden;
}

.Jogar img{
    width: 50%;
    height: auto;
}

/*-------------------------------*/
/*-------------------------------*/

@media(max-width:1450px){

    .Register{
        width: 25%;
        left:5%;
    }

    .Login{
        left:37.5%;
        width: 25%;  
    }
    
    .Recuperation{
        left:37.5%;
        width: 25%;  
    }

    .Guest{
        left: 70%;
        width: 25%; 
    }
    
    .carac input[type="text"]:focus,.carac input[type="password"]:focus,.carac input[type="text"]:hover,.carac input[type="password"]:hover{
        width: 210px;
    }
    
}

/*-------------------------------*/

@media(max-width:920px){

    .Login{
        top: 280px;
        left: 25%;
        width: 50%;
    }
    
    .Recuperation{
        top: 195px;
        left: 25%;
        width: 50%;
    }

    .Register {
        top: 600px;
        left: 25%;
        width: 50%;
    }

    .Guest{
        top: 1160px;
        left: 25%;
        width: 50%;
    }
    
    .carac input[type="text"]:focus,.carac input[type="password"]:focus,.carac input[type="text"]:hover,.carac input[type="password"]:hover{
        width: 235px;
    }

    .line {
        background:rgba(35,115,193,1);
        box-shadow: 0 0 10px #363636;
        border-radius: 5px;
        width: 60%;
        height: 2px;
        left: 20%;
        position: absolute;
        transition: 1s;
    }
    
    .line.first {
        top: 590px;
    }

    .line.second {
        top: 1135px;
    }


    /*--------------BACKGROUND---------------*/
    
    .BoxBackground.Three {
        top: 1420px;  
    }
        
    .BoxBackground.Four {
        top:1500px;
    }



/*------------------EXTRA LANGUAGES-------------------*/


    .Language{
        top:1423px;
    }
    
    .Language:hover{
        top:1333px;
        height: 160px;
    }

}

@media(max-width: 600px){
    .Login {
        left: 12.5%;
        width: 75%;
    }
    .Guest {
        left: 12.5%;
        width: 75%;
    }
    .Register{
        left: 12.5%;
        width: 75%;
    }
    .Recuperation{
        left: 12.5%;
        width: 75%;
    }
}