body {
    background-color: black;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
}

.template {
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0vw 0vw 1.5vw white;
    background-color: white;
    text-align: center;
    margin: auto;
    width: 40vw;
}

.upper {
    background-color: #641E16;
    padding: 1vw;
}

.upper .u {
    border-radius: 3vw;
    padding-top: 3vw;
    width: 8vw;
}

.upper .navbar {
    justify-content: center;
    padding-bottom: 1.5vw;
    cursor: pointer;
    font-size: 1.1vw;
    color: white;
    display: flex;
    margin: auto;
    width: 25vw;
}

.upper .navbar a {
    transition: 0.5s ease-in-out;
    list-style-type: none;
    letter-spacing: 0.2vw;
    margin: 0.9vw;
}

.upper .navbar a:hover {
    letter-spacing: 0.3vw;
    color: #F39C12;
}

.upper h1 {
    text-transform: uppercase;
    letter-spacing: 0.3vw;
    font-size: 2.3vw;
    color: white;
}

.upper p {
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 1vw;
    padding-top: 1vw;
    font-weight: 100;
    color: white;
    font-size: 1vw;
    margin: auto;
    width: 33vw;
}


.upper-img .building {
    border-top: 0.01vw solid gray;
    width: 40vw;
}


.promote {
    background-color: white;
    margin-top: 5vw;
    width: 40vw;
}

.promote h2 {
    text-transform: uppercase;
    letter-spacing: 0.5vw;
    padding-bottom: 2vw;
    color: #641E16;
    font-weight: 100;
    font-size: 2vw;
}

.promote .row-1 {
    display: flex;
    margin-bottom: 3vw;
}

.promote .row-1 img {
    width: 20vw;
}

.promote .row-1 .right-box {
    width: 19vw;
}

.promote .row-1 .right-box h3 {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 1.8vw;
    color: #641E16;
}

.promote .row-1 .right-box p {
    padding-bottom: 0.5vw;
    font-weight: 100;
    font-size: 1.1vw;
    color: #641E16;
}

.promote .row-1 .right-box button {
    background-color: #F39C12;
    transition: 0.5s ease-in-out;
    letter-spacing: 0.2vw;
    border-radius: 0.3vw;
    cursor: pointer;    
    color: #641E16;
    font-weight: 100;
    font-size: 1.1vw;
    width: 12vw;
    padding: 1vw;
    border: none;
}

.promote .row-1 .right-box button:hover {
    letter-spacing: 0.4vw;
    background-color: black;
    color: white;
}

.promote .row-2 {
    display: flex;
    margin-bottom: 3vw;
}

.promote .row-2 img {
    width: 20vw;
}

.promote .row-2 .left-box {
    padding: 1vw;
    width: 19vw;
}

.promote .row-2 .left-box h3 {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 1.8vw;
    color: #641E16;
}

.promote .row-2 .left-box p {
    padding-bottom: 0.5vw;
    font-weight: 100;
    font-size: 1.1vw;
    color: #641E16;
}

.promote .row-2 .left-box button {
    background-color: #F39C12;
    transition: 0.5s ease-in-out;
    letter-spacing: 0.2vw;
    border-radius: 0.3vw;
    cursor: pointer;    
    color: #641E16;
    font-weight: 100;
    font-size: 1.1vw;
    width: 12vw;
    padding: 1vw;
    border: none;
}

.promote .row-2 .left-box button:hover {
    letter-spacing: 0.4vw;
    background-color: black;
    color: white;
}

.bottom-img h2 {
    text-transform: uppercase;
    letter-spacing: 0.5vw;
    padding-bottom: 2vw;
    color: #641E16;
    font-weight: 100;
    font-size: 2vw;
}

.bottom-img .building {
    border-bottom: 0.01vw solid gray;
    width: 40vw;
}

.information {
    background-color: #641E16;
    border-top: 0.01vw solid gray;
    display: flex;
}

.information .left-box {
    width: 20vw;
}

.information .left-box img {
    padding-bottom: 1.3vw;
    padding-top: 1.3vw;
    width: 4vw;
}

.information .left-box li {
    letter-spacing: 0.1vw;
    font-weight: 100;
    font-size: 1.2vw;
    color:#F39C12;
}

.information .left-box p {
    letter-spacing: 0.1vw;
    padding-top: 1.5vw;
    font-weight: 100;
    font-size: 1.2vw;
    color: white;
    margin: auto;
    width: 15vw;
}

.information .right-box {
    width: 20vw;
}

.information .right-box p {
    font-weight: 100;
    font-size: 1.2vw;
    color: white;
    padding: 3vw;
}


.tutorial {
    border-top: 0.24vw solid white;
    background-color: #641E16;
    padding-bottom: 3vw;
    padding-top: 1vw;
}

.tutorial h2 {
    text-transform: uppercase;
    letter-spacing: 0.3vw;
    padding-bottom: 2vw;
    color: white;
    font-weight: 100;
    font-size: 2vw;
}

.tutorial button {
    background-color: #F39C12;
    transition: 0.5s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.2vw;
    border-radius: 0.3vw;
    cursor: pointer;    
    color: #641E16;
    font-weight: 100;
    font-size: 1vw;
    width: 15vw;
    padding: 1vw;
    border: none;
}

.tutorial button:hover {
    letter-spacing: 0.4vw;
    background-color: black;
    color: white;
}


.tutorial p {
    width: 36vw;
    margin: auto;
    margin-top: -3vw;
    font-weight: 100;
    font-size: 1.2vw;
    color: white;
    padding-top: 2vw;
    padding-bottom: 2vw;
}


.courses {
    padding: 1vw;
}

.courses h2 {
    text-transform: uppercase;
    letter-spacing: 0.3vw;
    padding-bottom: 2vw;
    color:#641E16;
    font-weight: 100;
    font-size: 2vw;
}

.courses .container {
    justify-content: space-around;
    display: flex;
}

.courses .container .box-1 {
    width: 12vw;
}

.courses .container .box-1 img {
    border: 0.3vw solid #641E16;
    border-radius: 100%;
    padding: 0.3vw;
    width: 8vw;
}

.courses .container .box-1 h2 {
    letter-spacing: 0.1vw;
    font-size: 1.3vw;
}

.courses .container .box-1 p {
    letter-spacing: 0.1vw;
    padding-top: -1vw;
    font-size: 1.1vw;
    color: #641E16;
    margin: auto;
    width: 10vw;
}

.courses .container .box-1 button {
    background-color: #F39C12;
    transition: 0.5s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.2vw;
    border-radius: 0.3vw;
    margin-bottom: 2vw;
    margin-top: 2vw;
    cursor: pointer;    
    color: #641E16;
    font-weight: 100;
    font-size: 0.7vw;
    width: 10vw;
    padding: 1vw;
    border: none;
}

.courses .container .box-1 button:hover {
    letter-spacing: 0.3vw;
    background-color: black;
    color: white;
}

.courses button {
    background-color: #641E16;
    transition: 0.5s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.2vw;
    border-radius: 0.3vw;
    margin-bottom: 3vw;
    margin-top: 2vw;
    cursor: pointer;    
    color: white;
    font-weight: 100;
    font-size: 0.7vw;
    width: 13vw;
    padding: 1vw;
    border: none;
}

.courses button:hover {
    letter-spacing: 0.34vw;
    background-color: black;
    color: white;
}


.footer {
    padding: 1vw;
}

.footer img {
    width: 6vw;
}

.footer p {
    padding-bottom: 1vw;
    padding-top: 2vw;
    font-size: 1.2vw;
    color: #641E16;
    margin: auto;
    width: 35vw;
}

.footer .text {
    background-color: #641E16;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    margin: auto;
}

.footer .text h3 {
    transition: 0.5s ease-in-out;
    letter-spacing: 0.2vw;
    font-weight: 100;
    color: white;
    font-size: 0.8vw;
    padding: 0.5vw;
}

.footer .text h3:hover {
    letter-spacing: 0.3vw;
    color:#F39C12
}

.footer .text h4 {
    border-right: 0.1vw solid white;
    border-left: 0.1vw solid white;
    transition: 0.5s ease-in-out;
    letter-spacing: 0.2vw;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size: 0.8vw;
    font-weight: 100;
    color: white;
}

.footer .text h4:hover {
    letter-spacing: 0.3vw;
    color:#F39C12
}