/* Page Defaults */
* {margin:0; padding:0;}
body {background-color:#333;}

/* Cell Phone View */
.menu{display:none;}
.headbar{width:100%;}
.cont2 h2 {display:none;}
.cont2 h3 {display:none;}
.headbar h2 {padding:20px 30px 0px; font-family:Orbitron; font-size:30px; color:#ffffff;background-color:#333333;}
.headbar h3 {padding:0px 50px 10px; font-family:Orbitron; font-size:20px; color:red;background-color:#333333;}
p {padding:0px 0px 0px 30px; font-family:arial; font-size:20px;}
h2 {display:block; padding-top:30px; font-family:orbitron;}
h3 {display:block; padding:0px 110px 10px; font-family:orbitron;}
h4 {padding:24px; color:#111; line-height:42px; font-family:Permanent Marker; font-size:44px;}

.img-home {width:90%; border-radius:15px;}
.page-content {background-color:#fff;}
.subtitle {font-family:Permanent Marker; padding-top:20px; padding-bottom:10px; font-size:34px;}
.ServiceTitle{font-family:Orbitron; font-size:18px;}


.top-grid-container {
    width:100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-row-gap: 40px;
}

.cont1 { grid-row: 2 / 3; grid-column: 1 / 2;align-self:start;}
.cont2 { grid-row: 1 / 2; grid-column: 1 / 2;align-self:start;}

.BtnWrap{padding-top:5px;padding-bottom:35px;}
.Btn{width:50%;border-radius:25px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);border:3px solid;border-color:red;}

.footer {padding-top:15px; }
.footer-grid {padding-top:25px; font-family:Roboto Condensed; font-size:16px;color:#fff; display:grid;background-color:#333; width:100%; height:100%;}

/* Tablet View */
@media only screen and (min-width:768px) {
    .top-grid-container {width:65%;}
    .img-home {width:75%;}
    .Btn{width:65%;}

    .mid-grid-container {
        width:100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:auto auto auto auto;
        align-items:end;
    }
    .subtitle {grid-row: 1 / 2; grid-column: 1 / 4;}
    .serv1 { grid-row: 2 / 3; grid-column: 1 /2;}
    .serv2 { grid-row: 2 / 3; grid-column: 2 / 3;}
    .serv3 { grid-row: 3 / 4; grid-column: 1 / 2;}
    .serv4 { grid-row: 3 / 4; grid-column: 2 / 3;}
    .serv5 { grid-row: 4 / 5; grid-column: 1 / 2;}
    .serv6 { grid-row: 4 / 5; grid-column: 2 / 3;}

}

/* Desktop View */
@media only screen and (min-width:1200px) {
    .headbar {display:none;}
    .menu {display:block;position:fixed; width:100%; }
    .cont2 h2 {display:block;}
    .cont2 h3 {display:block;}
    p {padding:0px 20px 0px; font-family:arial; font-size:20px;}
    h2{font-size:42px;}
    h3 {font-size:20px;}

    .img-home {width: 100%;}
    .navbar {overflow: hidden; background-color: #333; font-family:Roboto Condensed; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);}
    .navbar-info {padding-left:19%;}
    .navbar a {float:left;font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; background-color: #333;}
    .dropdown {float:left;overflow: hidden; background-color:#333;}
    .dropdown .dropbtn {font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0;}
    .navbar a:hover, .dropdown:hover .dropbtn {background-color: red; border-radius:5px 5px 0px 0px;}
    .dropdown-content {border-radius: 0px 0px 15px 15px;display: none; position: absolute; background-color: #3d3d3d; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
    .dropdown-content a {float: none; color: #ffffff; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
    .dropdown-content a:hover {border-radius: 0px 0px 15px 15px; color:#ffffff; font-weight:bold;background-color: red;}
    .dropdown:hover .dropdown-content {display: block;}

    .top-grid-container {
        padding:75px 200px 0px;
        width:1000px;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 1fr;
        align-items: center;
        grid-column-gap: 20px
    }

    .cont1 { grid-row: 1 / 2; grid-column: 1 / 2; align-self:start;}
    .cont2 { grid-row: 1 / 2; grid-column: 2 / 3;align-self:start;}

    .mid-grid-container {
        width:1200px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows:0.4fr 1fr 1fr auto;
    }

    .subtitle {grid-row: 1 / 2; grid-column: 1 / 4;}
    .BtnWrap{padding-top:5px;padding-bottom:35px;}
    .Btn{width:85%;}
    .ServiceTitle {font-size:20px;}
    .serv1 { grid-row: 2 / 3; grid-column: 1 /2;}
    .serv2 { grid-row: 2 / 3; grid-column: 2 / 3;}
    .serv3 { grid-row: 2 / 3; grid-column: 3 / 4;}
    .serv4 { grid-row: 3 / 4; grid-column: 1 / 2;}
    .serv5 { grid-row: 3 / 4; grid-column: 2 / 3;}
    .serv6 { grid-row: 3 / 4; grid-column: 3 / 4;}


}