/* GERAIS */

@font-face {
    font-family: "Montserrat";
    src:url("./font/Montserrat-Regular.ttf");
}

@font-face{
    font-family: "SourceSansPro";
    src:url("./font/SourceSansPro-Regular.ttf");
}

@font-face{
    font-family: "SourceSansPro-Light";
    src:url("./font/SourceSansPro-Light.ttf");
}

body{
    background-image: url("background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    text-align: -webkit-center;
    font-family: "Montserrat";
}

h4{
    top:10%;
    display: block;
    position: relative;
}

/* CARD 1 */

.card-1{
    background-image: url("card-1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 45%;
    height: 36%;
    margin-top: 5%;
    background-color: white;
}

.card-1 img{
    position: relative;
    margin-bottom: 2%;
}

.card-1 img:nth-of-type(1){
    margin-right: 2%;
}

.card-1 img:nth-of-type(2){
    margin-left: 2%;
}

.card-1 a{
    position: relative;
    display: block;
    width: 34%;
    height: 9%;
    background-color: #27ae60;
    margin-top: 1%;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    box-shadow: 1px 5px 7px rgba(0,0,0,0.1);
    padding-top: 1%;
}

.card-1 a:hover{
    background-color: #2bba67;
}

/* CARD 2 */

.card-2{
    background-image: url("card-2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 35%;
    height: 20%;
    margin-top: 3%;
    background-color: white;
}

.card-2 p{
    margin:0;
    margin-bottom: 1%;
    font-size: 13px;
}

.card-2 p:nth-of-type(1){
    margin-top: 6%;
}

/* CARD 3 */

.card-3{
    width: 56%;
    height: 20%;
    margin-top: 3%;
    color: white;
    font-family: "SourceSansPro" !important;
}

.card-3 h1 {
    font-size: 50px;
    margin: 0;
}

.card-3 h1 span{
    font-size: 35px;
}

.card-3 p{
    font-family: "SourceSansPro-Light";
}

.card-3 p:nth-of-type(1){
    font-size: 30px;
    margin: 0;
}

/* Telefones em paisagem e abaixo */
@media (max-width: 479px) {
     .card-1, .card-2, .card-3{
        width: 100%;
     }

     .card-1 img{
        margin-right: 0;
        margin-left: 0;
        margin-top:2%;
     }

     .card-1{
        height: 50%;
     }

     .card-1 a{
        height: 11%;
     }

     .card-2{
        height: 18%;
     }
 }

/* Telefones em paisagem a tablet em retrato */
@media (min-width: 480px) and(max-width: 767px) {
     .card-1, .card-2, .card-3{
        width: 100%;
     }

     .card-1 img{
        margin-right: 0;
        margin-left: 0;
        margin-top:2%;
     }

     .card-1{
        height: 38%;
     }

     .card-1 a{
        height: 15%;
     }

     .card-2{
        height: 18%;
     }
}

/* Tablet em retrato a paisagem e desktop */
@media (min-width: 768px) and (max-width: 979px) {

     .card-1{
        height: 51%;
     }

     .card-1 a{
        height: 11%;
     }

     .card-2{
        height: 17%;
     }
}