body {
    margin: 0px;
    padding: 0px;
    font: 15px/1.5 Arial, Helvetica,sans-serif;
    background-color: #f4f4f4;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.container3 {
    width: 100%;
    margin: auto;
    overflow: hidden;
}
.text-right {
    text-align: right !important
}

.container2 {
    width: 80%;
    margin: auto;
    overflow: hidden;
    
}
header {
    color: #ffffff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #e8491d 3px solid;
}

    header a {
        color: darkblue;
        text-decoration: none;
        
        font-size: 20px;
    }

    header h1 {
        color: royalblue;
        text-decoration: solid;
        
        font-size: 27px;
    }

    header li {
        float: left;
        display: inline;
        padding: 0 20px 0 20px;
    }

    header #branding {
        float: left;
    }

        header #branding h1 {
            margin: 0;
        }

    header nav {
        float: right;
        margin-top: 10px;
    }

    header .highlight, header .current a {
        color: darkblue;
        font-weight: bold;
    }

    header a:hover {
        color: red;
        font-weight: bold;
        font-size:20px;
    }
#showcase {
    min-height: 400px;
    background-color: darkblue;
    text-align: center;
    color: #ffffff;
    align-items: center;
}

    #showcase h1 {
        margin-top: 2px;
        font-size: 40px;
        margin-bottom: 0px;
        color:darkblue;
        text-transform:uppercase;
       text-shadow:20px;
    }
    #showcase h2 {
        margin-top: 0px;
        font-size: 15px;
        margin-bottom: 3px;
        color: black;
        text-transform: uppercase;
        text-shadow: 20px;
    }

    #showcase p {
        font-size: 15px;
    }
a{
    text-decoration: none;

}



.container1 {
    overflow: hidden;
    width: 90%;
    height: 100vh;
    display: flex;
    background-color:transparent;
    justify-content: center;
    align-items: flex-start;
   margin:auto;
}
.box1 {
width:230px;
height:300px;
background-color:transparent;
border-radius:10px;
box-shadow:2px 10px 12px rgba(0,0,0,0.5);
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
box-sizing:border-box;
margin:10px 10PX;

}
.model {
height:320px;
max-height:80%;
max-width:100%;
}
.details{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:200px;
}
    .details p {
        font-family:Calibri;
        font-weight:bold;
        color:blue;
        text-align:center;
        margin-top:10px;
        font-size:5px;
    }
    .box1:hover{
        background-color:transparent;
        transform-style:preserve-3d;
        transform:scale(1.02);
        transition:all ease 0.3s;
    }
.box1:hover .details p{
   color:red;
   transition:all ease 0.5s;
}
@media(max-width:720px){
    .box1{
        width:94%;
        height:300px;
    }
    .model{
height:250px;
    }
    header #branding,
    header nav,
    header nav li,
    #newsletter h1,
    #newsletter form,
    #boxes .box,
    article#main-col,
    aside#sidebar {
        float: none;
        text-align: center;
        width: 100%;
    }

    header {
        padding-bottom: 20px;
    }

    #showcase h1 {
        margin-top: 40px;
    }  

}