﻿body {
    font-size: 20px !important;
    margin: 0;
    padding: 0;
    font-family: Roboto, Arial, sans-serif;
}

*:focus {
    outline: none;
}

@media all and (min-width:1601px) {
    body {
        font-size: 20px !important;
    }
}

@media all and (max-width:1600px) and (min-width:1281px) {
    body {
        font-size: 15px !important;
    }
}

@media all and (max-width:1280px) and (min-width:1021px) {
    body {
        font-size: 14px !important;
    }
}

@media all and (max-width:1020px) and (min-width:1px) {
    body {
        font-size: 12px !important;
    }
}



.background-header{
width:28%;
position:relative;
top:0;
left:0;
margin-top:2%;
margin-bottom:3%;
}

.background-phonenumber{
width:85%;
position:relative;
top:0;
left:0;
margin-top:2%;
}

.background-login{
width:85%;
position:relative;
top:0;
left:0;
margin-top:2%;
}

.nav-background {
width:100%;
margin: 1% 0;
}


.nav-table {
 position:absolute; 
 top:0; 
 left:9%;
 }
 

.stretch {
width:100%;
}

.background-top-home {
width:100%;
position:relative;
top:0;
left:0;
}

.background-nav {
width:70%;
position:relative;
top:0;
left:0;
margin-top:5%;
}


.top-text-section {
position:absolute;
right:1%;
top:30%;
width:30%;
}

.top-text-title {
font-family:'Roboto', arial, sans-serif;
font-size:140%;
text-transform:uppercase;
display:none;
}

.top-text {
font-family:'Roboto Light', arial, sans-serif;
font-size:140%;
font-weight:lighter;
display:none;
}

.box-section {
width:90%;
position:relative;
text-align:center;
padding:5% 0;
float:left;
}

.box1 {
width:17%;
border: 1px solid #ececec;
float:left;
margin-right:5%;
margin-left:13.5%;
background-color:white;
}


.box2, .box3 {
width:17%;
border: 1px solid #ececec;
float:left;
margin-right:5%;
background-color:white;
}


.box4 {
width:17%;
border: 1px solid #ececec;
float:left;
background-color:white;
}

.box1:hover, .box2:hover, .box3:hover, .box4:hover {
background-color:#bae7f6;
border:1px solid #33a7ce;
cursor:pointer;

}


.background-boximage {
width:100%;
position:relative;
top:0;
left:0;
}

.box-title-section {
font-family:'Roboto', arial, sans-serif;
font-size:80%;
text-transform:uppercase;
padding: 5% 0 2%;
}

.box-text-section {
font-family:'Roboto Light', arial, sans-serif;
font-size:80%;
font-weight:lighter;
padding: 3%;
height:11em;
text-align:left;
}

.learnmore-section {
font-family:'Roboto', arial, sans-serif;
font-size:75%;
text-transform:uppercase;
color:#11b2ed;
text-align:right;
padding: 0 6% 2% 0;
}

.background-bottom-home {
width:100%;
position:relative;
top:0;
left:0;
clear:left;
margin-top:5%;
}

.bottom-text-section {
position:absolute;
left:2%;
top:30%;
width:35%;
text-align:left;
}

.bottom-text-title {
font-family:'Roboto', arial, sans-serif;
font-size:150%;
text-transform:uppercase;
}

.bottom-text {
font-family:'Roboto Light', arial, sans-serif;
font-size:100%;
font-weight:lighter;
padding-top:2%;
}

.background-quotebutton {
width:28%;
position:relative;
top:0;
left:0;
padding-top:4%;
}

.circles-section {
width:24%;
float:left;
margin-top:5%;
margin-left:11%;
}

.background-features {
width:100%;
position:relative;
top:0;
left:0;
}


.benefits-section {
width:55%;
float:left;
margin-top:5%;
margin-left:10%;
}

.background-benefiticon {
width:3%;
float:left;
top:0;
left:0;
margin-top:4.7%;
}

.features-line {
font-family:'Roboto', arial, sans-serif;
font-size:110%;
margin-top:4.2%;
margin-left:2%;
float:left;
}

.footer-section {
width:100%;
clear:left;
float:left;
background-color:#3d3d3d;
}

.footer-text {
font-family:'Roboto', arial, sans-serif;
font-size:70%;
color:white;
margin-top:1.5%;
margin-bottom:1.5%;
}

.links-text {
font-size:110%;
color:white;
text-decoration:none;
}

.links-text:hover {
text-decoration:underline;
}

.reserved {
margin-top:3% !important;
}

a {
font-size:auto;
}

.text-nav {
font-family:'Roboto', arial, sans-serif;
font-size:90%;
color:black;
text-transform:uppercase;
}

.text-nav:hover {
color:#00a4ff; 
}

.border{
    position:relative;
}


.border:hover::after{
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom:-20%; /*Change this to increase/decrease distance*/
    border-bottom: 3px solid #00a4ff;  
}

.nav-home {
color:#00a4ff; 
}