@charset "UTF-8";

@font-face {
    font-family: 'Raleway';
    src: url(fonts/Raleway/Raleway-VariableFont_wght.ttf);
}

* {
    margin: 0px;
    padding: 0px;
    font-family: 'Raleway', sans-serif;
}

body {
    background-color: #F1F1F1;
}

#cinque_terre {
    background-image: url(imagens/cinqueterre.jpg);
    background-size: cover;
}

#new_york {
    background-image: url(imagens/newyork.jpg);
    background-size: cover;
}

#san_francisco {
    background-image: url(imagens/sanfran.jpg);
    background-size: cover;
}

#pisa {
    background-image: url(imagens/pisa.jpg);
    background-size: cover;
}

#paris {
    background-image: url(imagens/paris.jpg);
    background-size: cover;
}

header {
    width: 100%;
}

#up_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 0px 15px 0px 20px;
}

#up_header i .orange {
    padding: 10px;
    width: 15px;
}

#up_header > div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#up_header > div > p {
    padding: 10px 0px;
    font-size: 22px;
    font-weight: bold;
}

.orange {
    color: #f44336;
    justify-self: start;
}

#up_header> i:not(.orange) {
    cursor: pointer;
    color: rgb(134, 134, 134);
}

#main_header {
    background-image: url(imagens/london.jpg);
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#box {
    width: 65%;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

nav>a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 8px;
    width: 100%;
    text-decoration: none;
    font-size: 15px;
}

nav>a:hover {
    background-color: #f44336;
}

nav>a>i {
    padding: 5px 15px 5px 0px;
}

section {
    width: 100%;
}

form {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 25px 15px;
}

form>p {
    font-size: 28px;
    padding: 10px 0px 15px 0px;
}

label {
    padding-bottom: 4px;
}

form>div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 15px;
    font-size: 18px;
}

form>div>div {
    display: flex;
    flex-direction: column;
    width: 49%;
}

.text, .submit {
    padding: 10px;
    font-size: 15px;
}

.text::placeholder {
    color: rgb(143, 143, 143);
}

form>a>input {
    width: 180px;
    background-color: #616161;
    border: none;
    color: white;
    font-weight: 300;
    cursor: pointer;
}

form>a>input:hover {
    background-color: #3b3b3b;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1024px;
    width: 95%;
    margin: 0px auto;
}

main section {
    width: 100%;
    padding-top: 15px;
}

#section_one > div {
    display: grid;
    grid-template-areas: "main_image main_image image image"
                         "main_image main_image image image";
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
    min-height: 420px;
}

.imagem {
    display: flex;
    flex-direction: column;
    justify-content: end;
    cursor: pointer;
}

#cinque_terre {
    grid-area: main_image;
    min-width: 100%;
}

.imagem div:not(#cinque_terre) {
    grid-area: image;
    max-width: 100%;
}

.img_text {
    color: white;
    font-size: 18px;
    padding: 12px;
    font-weight: 300;
    justify-self: end;
}

h1 {
    font-size: 25px;
    font-weight: 300;
    padding: 10px 0px;
}

h3 {
    font-size: 15px;
    font-weight: 300;
    padding: 10px 0px;
}

#section_one span {
    font-weight: bold;
}

#section_two>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

#section_two>div>div {
    width: 100%;
}

#section_two>div>div>div {
    width: 100%;
    background-color: white;
    margin-top: -5px;
    padding: 10px 0px 0px 0px;
}

#section_two img {
    width: 100%;
    cursor: pointer;
}

.section_two_content {
    padding: 8px 15px;
}

h3.section_two_content {
    color: rgb(145, 145, 145);
    font-size: 15px;
}

p.section_two_content {
    font-size: 15px;
}

#p_footer {
    margin: 0px 0px 0px 20px;
    font-size: 15px;
    padding-bottom: 20px;
}

#section_tree {
    margin-top: 30px;
}

#section_tree, #section_tree form {
    background-color: #606060;
}

#section_tree form {
    padding: 10px 20px 20px 20px;
}

#section_tree h1, #section_tree h3, #section_tree label, #section_tree .submit {
    color: white;
}

#section_tree h1 {
    font-size: 26px;
    padding-left: 20px;
}

#section_tree h3 {
    padding-left: 20px;
}

#section_tree label {
    font-size: 15px;
}

#section_tree .text {
    border: none;
}

#section_tree .text::placeholder {
    color: rgb(194, 194, 194);
}

#section_tree .submit {
    background-color: #F38981;
    border: none;
    width: 110px;
    margin-top: 20px;
    cursor: pointer;
}

#section_tree .submit:hover {
    background-color: #c05952;
}

footer {
    max-width: 1024px;
    width: 95%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
}

footer>section {
    width: 100%;
}

footer h1 {
    font-size: 40px;
}

footer h3 {
    padding-bottom: 20px;
    font-size: 18px;
}

footer>section>div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

footer>section>div>p {
    padding: 5px 0px 5px 20px;
    font-size: 18px;
}

.fa-location-dot {
    padding-right: 3.5px;
}

footer form {
    width: 100%;
    background-color: #F1F1F1;
    padding: 5px 0px 0px 0px;
    margin-bottom: 35px;
}

footer .text {
    margin: 10px 0px 10px 0px;
    border: 1px solid rgb(190, 190, 190);
    padding: 18px 10px;
}

footer .submit {
    background-color: black;
    color: white;
    border: none;
    width: 170px;
    padding: 15px;
    cursor: pointer;
    margin-top: 10px;
}

footer .submit:hover {
    background-color: rgb(53, 53, 53);
}

footer>section>p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    font-size: 20px;
    color: rgb(109, 109, 109);
}

#block_icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 35px 0px;
}

#block_icons > a > i {
    padding: 5px;
    color: rgb(66, 66, 66);
    cursor: pointer;
}

#block_icons > a > i:hover {
    padding: 5px;
    color: rgb(172, 172, 172);
    cursor: pointer;
}

#last_line {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#last_line p {
    font-size: 17px;
    color: rgb(109, 109, 109);
    padding: 10px 0px;
}

footer a {
    text-decoration: underline;
    color: rgb(109, 109, 109);
}

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

    #main_header {
        height: 400px;
        background-size: cover;
    }
    
    #section_one > div {
        min-height: 230px;
    }

}

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

    header {
        padding: 0px;
        width: 100%;
    }

    #up_header > div > p {
        font-size: 35px;
        padding: 20px 0px;
    }

    #up_header i {
        transform: scale(1.8);
    }
    
    nav > a {
        font-size: 20px;
        padding: 15px 0px;
    }

    #main_header {
        background-image: none;
        height: 100%;
    }

    #box {
        width: 100%;
    }

    form {
        padding-left: 15px;
        padding-right: 15px;
    }

    form > div {
        flex-direction: column;
    }

    form > div > div {
        width: 100%;
        font-size: 30px;
    }
    
    form > p {
        font-size: 30px;
        padding: 10px 15px 25px 0px;
    } 
    
    label {
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 20px;
    }
    
    .text, .submit {
        padding: 15px 5px;
        font-size: 20px;
    }

    form > a {
        padding-top: 10px;
        padding-bottom: 20px;
    }
    
    form > a > input {
        width: 250px;
    }

    main {
        width: 94%;
    }
    
    main section {
        padding-top: 60px;
    }

    #section_one > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .imagem {
        width: 100%;
        height: 370px;
    }

    #section_one {
        width: 100%;
    }
    
    .img_text {
        font-size: 25px;
        padding: 15px;
    }
    
    h1 {
        font-size: 25px;
        padding: 0px;
    }
    
    h3 {
        font-size: 18px;
        padding: 20px 0px;
    }

    #section_two > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #section_two>div>div {
        width: 100%;
        margin-bottom: 5px;
    }
    
    .section_two_content {
        padding: 15px;
    }
    
    h3.section_two_content {
        font-size: 18px;
    }
    
    p.section_two_content {
        font-size: 18px;
    }
    
    #p_footer {
        font-size: 18px;
        padding-bottom: 30px;
    }
    
    #section_tree form {
        padding: 10px 30px 30px 30px;
    }
    
    #section_tree h1 {
        font-size: 30px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #section_tree h3 {
        padding: 20px 0px 20px 15px;
        font-size: 18px;
    }

    #section_tree > form {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #section_tree label {
        font-size: 20px;
        font-weight: 500;
    }
    
    #section_tree .submit {
        width: 140px;
        font-size: 20px;
        margin: 20px 0px 0px 0px;
        padding: 15px;
    }

    footer {
        width: 94%;
    }
    
    footer h1 {
        font-size: 40px;
    }
    
    footer h3 {
        padding-bottom: 20px;
        font-size: 18px;
    }

    footer > section {
        width: 100%;
    }
    
    footer > section > div > p {
        padding: 5px 0px 5px 20px;
        font-size: 18px;
    }
    
    footer form {
        padding: 20px 0px 0px 0px;
        margin-bottom: 35px;
    }
    
    footer .text {
        margin: 8px 0px;
        padding: 15px 10px;
        font-size: 18px;
    }
    
    footer .submit {
        width: 190px;
        padding: 16px;
        margin-top: 5px;
        font-size: 18px;
    }
    
    footer > section > p {
        padding: 0px;
        font-size: 25px;
    }
    
    #block_icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 25px 0px;
    }
    
    #last_line > p {
        font-size: 20px;
        padding: 10px 0px;
    }
}

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

    #up_header > div > p {
        font-size: 30px;
    }

    #up_header i {
        transform: scale(1.5);
    }
    
    nav > a {
        font-size: 18px;
    }

    form {
        padding-left: 10px;
        padding-right: 10px;
    }

    form > div > div {
        width: 100%;
        font-size: 30px;
    }
    
    form > p {
        font-size: 27px;
        padding: 10px 15px 25px 0px;
    } 
    
    label {
        padding-top: 3px;
        padding-bottom: 3px;
        font-size: 17px;
    }
    
    .text, .submit {
        padding: 12px 5px;
        font-size: 17px;
    }

    form > a {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    
    form > a > input {
        width: 200px;
    }

     main {
        width: 92%;
    } 

    .imagem {
        width: 100%;
        height: 250px;
    }
    
    .img_text {
        font-size: 22px;
    }
    
    #section_tree form {
        padding: 10px 15px 20px 15px;
    }
    
    #section_tree label {
        font-size: 18px;
    }

    #section_tree .text {
        padding: 15px 10px;
    }
    
    #section_tree .submit {
        width: 130px;
        font-size: 20px;
        margin: 20px 0px 0px 0px;
        padding: 15px 10px;
    }

    footer {
        width: 92%;
    }
    
    footer h1 {
        font-size: 40px;
    }
    
    footer h3 {
        padding-bottom: 20px;
        font-size: 18px;
    }

    footer > section {
        width: 100%;
    }
    
    footer > section > div > p {
        padding: 5px 0px 5px 20px;
        font-size: 18px;
    }
    
    footer form {
        padding: 20px 0px 0px 0px;
        margin-bottom: 35px;
    }
    
    footer .text {
        margin: 8px 0px;
        padding: 15px 10px;
        font-size: 18px;
    }
    
    footer .submit {
        width: 175px;
        padding: 16px;
        margin-top: 5px;
        font-size: 18px;
    }
    
    footer > section > p {
        padding: 0px;
        font-size: 20px;
    }
    
    #block_icons {
        padding: 20px 0px;
    }

    #block_icons > a > i {
        padding: 0px 1px;
        transform: scale(0.8);
    }
    
    #last_line > p {
        font-size: 18px;
    }

}