@charset "UTF-8";

/* --------------------------------------------------
Media Query Exemplos
-----------------------------------------------------
@media only screen and (min-width: 320px) {}
@media only screen and (min-width: 480px) {}
@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 830px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1382px) {}


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


@media only screen and (min-width: 320px) {
    .display-desktop {display: none;}
    .display-mobile {display: block;}
}
@media only screen and (min-width: 768px) {
    .display-desktop {display: block;}
    .display-mobile {display: none;}
}


html,
body {
    width: 100%;
    height: 100%;
    margin:0;
    padding: 0;
    background-color: #223c42;  
}
main {
    width: 100%;
    height: 100%;  
    background-color: #223c42;  
    position: relative;
}
main .display-desktop img {
    max-width: 100%;
}
main .display-desktop h1 {
    display: block;
    position: absolute;
    width:352px;
    top: 40px;
    left: calc(50% - 176px);
    text-align: center;
}
main .display-desktop .jacaranda {
    float: left;
    width: 50%;
    display: block;
    margin: 80px 0 0 0;
}
main .display-desktop .jacaranda .esq {
    float: left;
    width: 45%;
    padding: 0 0 0 3%;
}
main .display-desktop .jacaranda .dir {
    float: right;
    width: 40%;
    margin: 150px 5% 0 30px;
    text-align: left;  
}
main .display-desktop .jacaranda .dir img {
    width: 80%;
}
main .display-desktop .figueira {
    float: right;
    width: 50%;
    display: block;
    margin: 80px 0 0 0;
}
main .display-desktop .figueira .esq {
    float: left;
    width: 40%;
    text-align: right;
    margin:150px 30px 0 5%;
}
main .display-desktop .figueira .esq img {
    width: 80%;
}
main .display-desktop .figueira .dir {
    float: right;
    width: 45%;
    padding: 0 3% 0 0;
}


main .display-mobile {
    height: 100%;
}
main .display-mobile h1 {
    display: block;
    width:233px;
    margin: 30px  auto;
}
main .display-mobile .jacaranda img,
main .display-mobile .figueira img {
    width: 100%;
}
main .display-mobile .jacaranda {
    float: left;
    width: 50%;
    display: block;
    margin: 0px 0 0 0; 
}
main .display-mobile .figueira {
    float: right;
    width: 50%;
    display: block;
    margin: 0px 0 0 0;
}