body{
margin: 0;
    padding: 0;
    box-sizing: border-box;
background-color: grey;
}

header{
background-color: ghostwhite;
min-height: 200px;
font-family: sans-serif;
}


.slider img{
    width: 100%;
}

footer img{
    width: 4%;
}

footer{
    text-align: center;
    background-color: ghostwhite;
    display: inline-block;
    width: 100%
    
}
button{
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.3em 0.3em 0;
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color: black;
    background-color: lightcyan;
    text-align:center;
    transition: all 0.2s;
}

footer p{
    margin-left: 100px;
    text-align: right;
    display: inline-block;
    font-size: 24px;
}



.logo{
    padding: 30px;
    min-height: 100px;
    min-width: 300px;
}

.title{
    font-size: 72px;
    text-align: center;
    text-decoration: underline;

}

.homeTextCMS{
    text-align: center;
    padding: 50px;
    margin: 50px;
    
}

.login{
    text-align: right;
    border: none;
    font-size: 32px;

}


.adminLogin{
    display: inline-block;
    text-align: right;
    padding-left: 75px;
}

.loginButton{
    transition-duration: 0.2s;
}

.loginButton:hover {
    background-color: aqua;
    color: white;
}

img{
    max-height: 100%;
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.box_1 img{
    width: 90%;
    display: inline-block;
}


.box_1{
    background-color: lightgray;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
    
}

.box_2 img{
    width: 90%;
    display: inline-block;
    max-height: 300px;
}
.box_2{
    background-color: lightgray;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
}

.box_3 img{
    width: 70%;
    display: inline-block;
}

.box_3{
    background-color: lightgray;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
}

.box_4 img{
    width: 70%;
    display: inline-block;
}

.box_4{
    background-color: lightgray;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
}
.vl
{
    vertical-align: top;
    
}


main{
    text-align: center;
    width: 100%;   
}



.about{
    background-color: grey;
}

.aboutBoxes{
    display: inline-block;
    text-align: center;
    margin: 0;
    
}



.AboutBox1 img{
    width: 37.5%;
    display: inline-block;
}

.AboutBox1{
    background-color: white;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
    width: 47%;
}

.AboutBox2 img{
    width: 44.5%;
    display: inline-block;
}

.AboutBox2{
    background-color: white;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
    width: 47%
}

.AboutBox3 img{
    width: 40%;
    display: inline-block;
}

.AboutBox3{
    background-color: white;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
    width: 47%
    
}

.ServicesBoxes{
    display: inline-block;
    text-align: center;
    margin: 0;
    
}

.ServiceBox1 img{
    width: 37.5%;
    display: inline-block;
}

.ServiceBox1{
    background-color: white;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
    width: 47%;
}

.ServiceBox2 img{
    width: 56%;
    display: inline-block;
}

.ServiceBox2{
    background-color: white;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
    width: 47%;
}

.ServiceBox3 img{
    width: 37.5%;
    display: inline-block;
}

.ServiceBox3{
    background-color: white;
    display: inline-block;
    min-height: 400px;
    width: 800px;
    margin: 20px;
    text-align: center;
    box-sizing: border-box;
    border-width:3px;
    border-style:solid;
    border-color:black;
    width: 47%;
}

.AboutText{
    text-align: left;
    width: 49%;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;

    
}

.AboutPicture{
    width: 50%;
    display: inline-block;
    

}

.AboutBody{
    background-color: white;
}

.homeButton{
    display: inline-block;
    width: 46.5%;
}

.ourPortfolioButton{
    display: inline-block;
    width: 46.5%;
}

.contactUsButton{
    display: inline-block;
}

.aboutHeader{
    background-color: grey;
}

.ServicesHeader{
    background-color: grey;
}

.adminHeader{
    background-color: grey;
}



.ourPortfolioBody{
    background-color: ghostwhite;
}

.ourPortfolioTitle{
    text-decoration: underline;
}

.ourPortfolioText{
    font: bold;
    text-align: center
}

.picture-grid{
    display: inline-grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.pic1{
    
}
.pic2{

}
.pic3{

}
.pic4{

}
.pic5{

}
.pic6{

}
.pic7{

}
.pic8{

}
.pic9{

}


nav
{
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    padding-bottom: 20px;

    
}

.nav_button
{
    display: inline-block;
    width: 180px;
    padding: 10px;
    text-align: center;
    font-size: 24pt;
    color: aliceblue;
    text-decoration: none;
    margin: 0 auto;
    vertical-align: top;
}

.nav_button a
{
    
}

.nav_button:hover
{
        background-color:darkgray; 
}



.loginFooter img{
    width: 4%;
}

.loginHeader{
    background-color: grey;
    width: 20%;
}


.login_ourPortfolioButton{
    display: inline-block;
}
.login_aboutUsButton{
    display: inline-block;

}
.login_homeButton{
    display: inline-block;

}
.login_contactUsButton{
    display: inline-block;

}


.contactForm{
    vertical-align: top;
    margin-top: 50px;
    width: 49%;
    display: inline-block;
}

.formControl{
    width: 600px;
    border: none;
    outline: none;
    border-bottom: 1px solid black;
    font-size: 16px;
    margin-bottom: 16px;
}

intput
{
    height: 45px;
}

form .submit
{
    background-color: lightblue;
    border-bottom-color: transparent;
    font-size: 20px;
    height: 50px;
    margin-top: 20px;
    cursor: pointer;
}

iframe{
    display: inline-block;
    width: 49%
}

.adminLoginForm{
    text-align: right;
}


.ServicesPicture
{
    width: 50%;
    height: 300px;
    display: inline-block;
}

@media only screen and (max-width: 600px){
    .box_1{
    width: 400px;
    min-height: 200px;
    display: inline-block;
}
    
    .box_2{
    width: 400px;
    min-height: 200px;
    display: inline-block;
}
    
    .box_3{
    width: 400px;
    min-height: 200px;
    display: inline-block;
}

  .nav_button
    {
        display: block;
        margin: 0 auto;
        width: 100%;
    }
    
    
    
    .picture-grid{
    display: inline-grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
    iframe{
    width: 99%
}
    .contactForm{
    vertical-align: top;
    margin-top: 50px;
    width: 500px;
}
    .formControl{
        width: 475px;
    }
    
}