* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html, body, main {
    height: 100%;
    width: 100%;
}
body {
    font-size: .9vw;
    font-family: sans-serif;
}
main {
    display: -webkit-box;
    display: -ms-flexbox;
    grid-template-columns: 2fr 15fr;
    display: grid;
}
/*slider*/
.slide_div {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    display: none;
}
.slider_img_1 {
    background-image: url(../images/image1.jpg);
}
.slider_img_2 {
    background-image: url(../images/image2.jpg);
}
.slider_img_3 {
    background-image: url(../images/image3.jpg);
}
.slider_img_4 {
    background-image: url(../images/image4.jpg);
}
.slideshow_container {
    height: 100%;
    position: absolute;
    width: 100%;
}
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 2s;
    animation-name: fade;
    animation-duration: 2s;
}
@-webkit-keyframes fade {
    from {opacity: .5} 
    to {opacity: 1}
}
@keyframes fade {
    from {opacity: .5} 
    to {opacity: 1}
}



/*information box*/

.info_box {
    position: absolute;
    width: 30%;
    top: 28%;
    left: 55%;
    padding: .5vw 2vw;
    text-align: justify;
    background-color: #232323ad;
}
.caption_h1 {
    font-family: serif;
    font-size: 3.5vw;
    letter-spacing: .2vw;
    font-weight: normal;
    top: 18%;
    left: 52%;
    width: 36%;
    padding: 0 2vw;
    position: absolute;
    text-align: center;
    color: #fff;
}
.info_box p {
    color: #fff;
}




/*navigation bar*/
aside {
    background: #080808ab;
    width: 100%;
    height: 100%;
    overflow: none;
    z-index: 1;
    text-align: center;
    padding: 0;
}
nav {
    display: block;
}
aside nav img {
    width: 100%;
}
aside a {
    display: block;
    padding: 1.7vw 0 0 0;
    color: #fff;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    text-transform: uppercase;
    font-size: 19px;
    letter-spacing: .1vw;
}
aside a i {
    margin-bottom: 0.2vw;
    font-size: 1.8vw !important;
}
.top_nav .icon {
    display: none;
}



@media (max-width: 1400px) {
    aside a {
        padding: 3vw 0 0 0;
        font-size: 17px;
    }
    .info_box {
        font-size: 19px;
        position: absolute;
        width: 40%;
        top: 28%;
        left: 50%;
    }
    aside a i {
        font-size: 2.5vw !important;
    }
}

@media (max-width: 1100px) {
    main {
        grid-template-columns: 3fr 15fr;
    }
    aside a {
        padding: 4vw 0 0 0;
        font-size: 19px;
    }
    .info_box {
        font-size: 21px;
        position: absolute;
        width: 55%;
        top: 28%;
        left: 40%;
        padding: 2vw 3vw;
    }
    .caption_h1 {
        font-size: 5vw;
        top: 18%;
        left: 42%;
        width: 50%;
    }
}

@media screen and (max-width: 800px) {
    main {
        grid-template-columns: 5fr 15fr;
    }
    aside a i {
        font-size: 5vw !important;
    }
    aside a {
        font-size: 20px;
    }
    .caption_h1 {
        font-size: 7vw;
        left: 34%;
        width: 65%;
        top: 5%;
    }
    .info_box {
        font-size: 22px;
        width: 60%;
        top: 13%;
        left: 35%;
    }
}
@media screen and (max-width: 600px) {
    main {
        grid-template-columns: unset;
        height: auto;
    }
    aside {
        background: #080808d9;
    }
    aside a i {
        font-size: 8vw !important;
    }
    aside nav img {
        width: 100%;
        max-width: 120px;
        height: auto;
    }
    aside nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .caption_h1 {
        font-size: 8vw;
        left: 16%;
        width: 70%;
        top: 14%;
    }

    .info_box {
        width: 96%;
        font-size: 21px;
        width: 96%;
        top: 20%;
        left: 2%;
        padding: 1vw 2vw;
    }
    .top_nav a:not(:first-child) {display: none;}
    .top_nav a.icon {

        float: right;
        display: block;
    }
    .top_nav.responsive {position: relative;}
    .top_nav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .top_nav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

}