/*
=====
 ▄▄▄       ███▄    █  ▄▄▄          ██▓     █    ██  ██▓  ██████  ▄▄▄
▒████▄     ██ ▀█   █ ▒████▄       ▓██▒     ██  ▓██▒▓██▒▒██    ▒ ▒████▄
▒██  ▀█▄  ▓██  ▀█ ██▒▒██  ▀█▄     ▒██░    ▓██  ▒██░▒██▒░ ▓██▄   ▒██  ▀█▄
░██▄▄▄▄██ ▓██▒  ▐▌██▒░██▄▄▄▄██    ▒██░    ▓▓█  ░██░░██░  ▒   ██▒░██▄▄▄▄██
 ▓█   ▓██▒▒██░   ▓██░ ▓█   ▓██▒   ░██████▒▒▒█████▓ ░██░▒██████▒▒ ▓█   ▓██▒
 ▒▒   ▓▒█░░ ▒░   ▒ ▒  ▒▒   ▓▒█░   ░ ▒░▓  ░░▒▓▒ ▒ ▒ ░▓  ▒ ▒▓▒ ▒ ░ ▒▒   ▓▒█░
  ▒   ▒▒ ░░ ░░   ░ ▒░  ▒   ▒▒ ░   ░ ░ ▒  ░░░▒░ ░ ░  ▒ ░░ ░▒  ░ ░  ▒   ▒▒ ░
  ░   ▒      ░   ░ ░   ░   ▒        ░ ░    ░░░ ░ ░  ▒ ░░  ░  ░    ░   ▒
      ░  ░         ░       ░  ░       ░  ░   ░      ░        ░        ░  ░
*/

@font-face {
    font-family: "Oswald";
    src: url(fonts/Oswald-Regular.tff) format("truetype");
}

body {
    font-family:"Roboto";
    overflow-x: hidden;
}

a:link, a:visited, a:hover, a:active {
    color: white;
    text-decoration: none;
    font-weight:100;
}

a:hover, a:active {
    font-weight:400;
}

.guia {
    font-family: "Roboto";
    font-size:16px;
    color:white;
    font-weight:100;
    height:100%;
    width:100%;
    top:auto;
    background-color:#6d6e70;
    position:relative;
    display:inline-block;
    padding:20px;
    margin-top:-20px;
    text-align: justify;
}

.guia > p {
    line-height:150%;
    text-indent:30px;
}

.creditos {
    line-height:150%;
    font-family: "Roboto";
    font-size:16px;
    color:white;
    font-weight:100;
    width:100%;
    height:100%;
    top:auto;
    background-color:#6d6e70;
    position:relative;
    display:inline-block;
    padding:20px;
    margin-top:-20px;
    text-align: justify;
}

@media only screen and (max-width: 1050px){

    .vertical-container {
        height:auto;
        display: -webkit-flex;
        display:         flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .center-circle {
        background-color:black;
        font-size:20px;
        color:white;
        text-align:center;
        height:350px;
        left:0;
        top:0;
        width:100%;
        position:absolute;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }

    .mod1 {
        float:none;
        font-family: "Oswald";
        font-size:25px;
        color:white;
        height:80px;
        width:100%;
        background-color:#63bd5a;
        position:relative;
        display:inline-block;
        padding:20px;
        margin:0;
        cursor:pointer;
        top:350px;
        text-align: center;
    }

    .mod2 {
        z-index:999;
        float:none;
        font-family: "Oswald";
        font-size:25px;
        text-align:right;
        color:white;
        height:80px;
        width:100%;
        top:430px;
        left:0;
        position:absolute;
        display:inline-block;
        background-color:#e43e3e;
        padding:20px;
        margin:0;
        cursor:pointer;
        text-align: center;
    }

    .mod3 {
        font-family: "Oswald";
        font-size:25px;
        color:white;
        float:none;
        height:80px;
        width:100%;
        padding:20px;
        margin:0;
        left:0%;
        top:510px;
        display:inline-block;
        background-color:#f6da25;
        position:absolute;
        cursor:pointer;
        text-align: center;
    }

    .bottom-left{
        position:relative;
        bottom:0%;
    }

    .mod4 {
        font-family: "Oswald";
        font-size:25px;
        vertical-align:text-bottom;
        color:white;
        float:none;
        height:80px;
        width:100%;
        padding:20px;
        margin:0;
        left:0%;
        top:590px;
        display:inline-block;
        background-color:#40c0ef;
        position:absolute;
        cursor:pointer;
    }

    .bottom-right{
        position:relative;
        bottom:00%;
        text-align:center;
    }
}