* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html, body, main {
    height: 100%;
    width: 100%;
}
body {
    font-size: .9vw;
    background-color: #b7b4aa;
    font-family: sans-serif;
}
main {
    display: -webkit-box;
    display: -ms-flexbox;
    grid-template-columns: 2fr 15fr;
    display: grid;
}
/*navigation bar*/
aside {
    background: #080808ab;
    width: 100%;
    height: 100%;
    overflow: none;
    z-index: 1;
    text-align: center;
    padding: 0;
}
nav {
    display: block;
}


/*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;
}


section {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.info_div {
    font-size: 1.2vw;
    width: 85%;
    color: #353531;
}
.info_div h1 {
    font-size: 3vw;
    text-align: center;
    margin-bottom: 2vw;
}
#front_back_side_container {
    height: auto;
    width: 85%;
    display: -ms-flexbox;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}
.box_container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: grid;
    grid-gap: 1vw;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-template-rows: 1fr 3fr;
}
.vahan_image {
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    height: 13vw;
    width: 13vw;
    background-color: #fff;
    cursor: pointer;
    -webkit-transition: .5s;
    transition: .5s;
}
.box_container h1 {
    font-size: 1.8vw;
    text-align: center;
    color: #353531;
}
#front_vahan {
    background-image: url(../products/images/front.jpg);
}
#back_vahan {
    background-image: url(../products/images/back.jpg);
}
#side_vahan {
    background-image: url(../products/images/side.jpg);
}
#shields_vahan {
    background-image: url(../products/images/shield.jpg);   
}
#vehicle_vahan {
    background-image: url(../products/images/vehicle.jpg);   
}

.top_nav .icon {
    display: none;
}



@media (max-width: 1400px) {
    aside a {
        padding: 3vw 0 0 0;
        font-size: 17px;
    }
    .info_div {
        font-size: 1.5vw;
        width: 90%;
    }
    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;
    }
}

@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%;
    }
    #front_back_side_container {
        width: 90%;
        grid-gap: 2vw 0;
        grid-template-columns: auto auto;
    }
    .box_container h1 {
        font-size: 2.5vw;
    }
    .vahan_image {
        height: 17vw;
        width: 17vw;
    }
    .info_div {
        font-size: 2vw;
    }
}
@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;
    }
    .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;
    }
    #front_back_side_container {
        width: 95%;
        grid-gap: 4vw 0;
        grid-template-columns: auto auto;
        margin-bottom: 5vw;
    }

    .info_div {
        font-size: 3vw;
        margin-bottom: 5vw;
    }
    .info_div h1 {
        font-size: 6vw;
        text-align: center;
        margin: 3vw 0;
    }
    .box_container h1 {
        font-size: 4vw;
    }
    .vahan_image {
        height: 25vw;
        width: 25vw;
    }

}