#navWrap{
width: 100%;
min-height: 60px;
margin: 0;
padding: 0;
background: #2196f3;
}
#headerInner{
position: relative;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#headerLeft{
float: left;
width: 300px;
margin: 0;
padding: 0;
}
#headerLeft h1{
margin: 0;
padding: 15px 0 0 0;
color: #f1f1f1;
font-family: "Open Sans", arial, "Trebuchet MS", sans-serif;
font-size: 1.9em;
font-weight: bold;
}
#headerLeft h1 span{
margin: 0 0 0 3px;
padding: 1px 5px;
font-family: "Open Sans", arial, "Trebuchet MS", sans-serif;
font-weight: bold;
border: 1px solid #d32f2f;
border-radius: 5px;
background: #d32f2f;
}
#headerLeft h1 a, #topHeader h1 a:hover{
text-decoration: none;
color: inherit;
}
#headerNav{
position: relative;
float: right;
width: 600px;
margin: 0 auto;
padding: 0;
}
.menuToggle{
display: none;
position: absolute;
top: 5px;
right: 10px;
text-decoration: none;
color: #fff;
font-size: 40px;
}
/* start of first level */
#headerNav > ul{
margin: 0;
padding: 0;
}
#headerNav > ul > li{
position: relative;
list-style: none;
float: left;
height: 60px;
margin: 0;
padding: 0;
border-right: 1px dotted #fff;
box-sizing: border-box;
}
#headerNav > ul > li:last-of-type{
border: none;
}
#headerNav > ul > li > a{
display: block;
height: 40px;
margin: 0;
padding: 20px 10px 0 10px;
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: normal;
font-family: "Open Sans", arial, tahoma, sans-serif;
}
#headerNav > ul > li > a:hover{
background: #1976d2;
}
/* end of first level navigation styles */
/* start of second level navigation styles */
#headerNav > ul > li > ul{
display: none;
position: absolute;
top: 60px;
z-index: 100;
width: 200px;
margin: 0;
padding: 0;
background: #448aff;
}
#headerNav ul li:hover > ul{
display: block;
}
#headerNav ul li > ul li{
margin: 0;
padding: 0;
border-bottom: 1px solid #1976d2;
box-sizing: border-box;
}
#headerNav ul li > ul li:last-of-type{
border: none;
}
#headerNav ul li > ul li a{
display: block;
text-decoration: none;
text-align: center;
height: 40px;
margin: 0;
padding: 20px 0 0 0;
font-size: 18px;
font-weight: normal;
font-family: "Open Sans", arial, tahoma, sans-serif;
color: #fff;
}
#headerNav ul li > ul li a:hover{
background: #1976d2;
}
/* end of second level navigation styles */
/* start of styles for the buttons below the slider */
#buttons{
width: 350px;
height: auto;
margin: 25px auto 10px auto;
padding: 0;
}
#buttons ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#buttons ul li{
display: inline-block;
margin: 0;
padding: 0;
}
#buttons ul li:first-of-type{
margin-right: 25px;
}
#buttons ul li a{
position: relative;
display: block;
width: 150px;
height: auto;
margin: 0;
padding: 10px 5px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 1.2em;
font-weight: bold;
font-family: arial, helvetica, sans-serif;
border-radius: 5px;
background: #01346b;
}
#buttons ul li a:hover{
top: 1px;
left: 1px;
box-shadow: 2px 2px 2px #777;
}
/* end of styles for the buttons below the slider */
/* start of the styles for the more information section */
#infoWrap{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.info{
width: 1000px;
height: auto;
margin: 50px auto;
padding: 0;
}
.box{
position: relative;
float: left;
width: 230px;
height: 300px;
margin: 0 10px;
padding: 0;
}
.moneyIcon{
background: url("../images/moneyIcon.png") center top no-repeat;
}
.contactIcon{
background: url("../images/contactIcon.png") center top no-repeat;
}
.shoppingCartIcon{
background: url("../images/shoppingCartIcon.png") center top no-repeat;
}
.applicationIcon{
background: url("../images/applicationIcon.png") center top no-repeat;
}
.box h1{
margin: 100px 0 0 0;
padding: 0;
text-align: center;
font-family: "Open Sans", arial, helvetica, sans-serif;
font-size: 1.3em;
font-weight: normal;
color: #01346b;
}
.box p{
margin: 10px 0;
padding: 0;
line-height: 1.3em;
font-family: "Open Sans", arial, helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #3c3c3c;
}
.box .button{
position: absolute;
bottom: 5px;
left: 50px;
width: 125px;
border: 1px solid #01346b;
border-radius: .25em;
}
.box .button a{
display: block;
height: 30px;
margin: 0 auto;
padding: 10px 0 0 0;
text-decoration: none;
text-align: center;
font-size: 1.1em;
font-weight: bold;
}
.box .button a:hover{
color: #fff;
background: #01346b;
}
/* end of the styles for the more information section */
/* start of the styles for the hosting plans tables */
.plans{
clear: both;
display: block;
width: 100%;
height: auto;
margin: 0 auto;
padding: 25px 0;
text-align: center;
}
.plans > section{
clear: both;
display: block;
width: 100%;
height: auto;
max-width: 1092px;
margin: 0 auto;
}
.plan{
position: relative;
display: inline-block;
width: 32%;
margin: 0 2px;
-webkit-transition: all .075s ease-out;
-moz-transition: all .075s ease-out;
-o-transition: all .075s ease-out;
transition: all .075s ease-out;
cursor: pointer;
overflow: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-right: 1px solid #2196f3;
border-bottom: 1px solid #2196f3;
border-left: 1px solid #2196f3;
box-sizing: border-box;
vertical-align: baseline;
background: white;
}
.plans > section h1{
margin: 20px 0;
padding: 0;
text-align: center;
font-family: "Open Sans", arial, helvetica, sans-serif;
font-size: 2.5em;
font-weight: bold;
color: #01346b;
}
.plan.standout{
border: 1px solid #c80032;
box-sizing: border-box;
}
.plan:hover{
top: -8px;
-webkit-box-shadow: 0 2px 6px #777;
-moz-box-shadow: 0 2px 6px #777;
box-shadow: 0 2px 6px #777;
}
.plan h3{
margin: 0 0 30px;
padding: 18px 0 15px;
color: white;
font-size: 1.4em;
font-family: arial, helvetica, sans-serif;
background: #2196f3;
}
.plan.standout h3{
background-color: #c80032;
}
.plan.standout h4{
width: 100%;
padding: 15px 0 14px;
background: #d32f2f;
font-family: arial, helvetica, sans-serif;
color: #fff;
font-size: 1.5em;
}
.plans sup{
vertical-align: top;
}
.plan .price{
font-size: 5em;
font-weight: 300;
letter-spacing: -3px;
}
.plan sub{
vertical-align: bottom;
position: relative;
bottom: .875em;
}
.plan sup{
position: relative;
right: -9px;
}
.plan ul{
margin: 30px 0 0;
border-top: 2px solid #e7f2f0;
}
.plan ul li{
height: 30px;
margin: 0;
padding: 15px 0 0 0; /* padding: 18px 0; */
font-size: 1.25em;
color: #212121;
border-bottom: 2px solid #e7f2f0;
}
.plan ul li a{
text-decoration: underline;
}
.plan ul li a:hover{
text-decoration: none;
}
/* end of the styles for the hosting plans tables */
/* start of styles for the content area */
#contentWrap{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#contentWrap #content{
width: 950px;
height: auto;
margin: 0 auto;
padding: 10px 0;
}
#contentWrap #content h1{
margin: 15px 0 10px 0;
padding: 0;
color: #000;
font-family: "Open Sans", arial, helvetica, sans-serif;
font-size: 1.5em;
font-weight: normal;
}
#contentWrap #content p{
margin: 5px 0 10px 0;
padding: 0;
color: #000;
font-family: "Open Sans", arial, helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
}
#contentWrap #content p a{
text-decoration: underline;
color: #000;
}
#contentWrap #content p a{
text-decoration: none;
}
#contentWrap #content ul.listFloatLeft{
float: left;
width: 30%;
height: auto;
margin: 0;
padding: 10px;
}
#contentWrap #content ul.listFloatLeft li
{
list-style-type: none;
margin: 0;
padding: 0 0 0 25px;
line-height: 1.3em;
height: 25px;
color: #000;
font-size: 1em;
font-weight: normal;
font-family: "Open Sans", arial, helvetica, sans-serif;
background: url("../images/blueCheckMark.png") 0 0 no-repeat;
}
#contentWrap #content ul.listFloatLeft li a
{
text-decoration: underline;
color: #333;
}
#contentWrap #content ul.listFloatLeft li a:hover
{
text-decoration: none;
color: #333;
}
#contentWrap #content img.imgLeft{
float: left;
margin: 0 5px 5px 0;
padding: 0;
border: none;
}
#contentWrap #content img.imgRight{
float: right;
margin: 0 0 5px 5px;
padding: 0;
border: none;
}
/* end of styles for the content area */
/* start of styles for the social media icons at the bottom */
#followWrap{
width: 100%;
height: auto;
margin: 15px 0;
padding: 0;
}
#followWrap #follow{
width: 200px;
height: auto;
margin: 0 auto;
padding: 0;
}
#followWrap #follow h1{
text-align: center;
width: 100%;
margin: 0 auto;
padding: 0;
color: #000;
font-size: 1.3em;
font-weight: normal;
font-family: "Open Sans", arial, helvetica, sans-serif;
}
#followWrap #follow a img{
float: left
margin: 0 0 0 5px;
padding: 0;
opacity: .4;
border: 1px solid #fff;
border-radius: 100%;
transition: all 0.5s;
}
#followWrap #follow a img:hover{
opacity: 1;
transform: scale(1.5);
}
/* end of styles for the social media icons at the bottom */
/* start of the styles for the bottom columns */
#bottomWrap{
width: 100%;
height: 250px;
margin: 0;
padding: 0;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
background: #efefef;
}
#bottomWrap #bottom{
width: 950px;
height: auto;
margin: 15px auto;
padding: 0;
}
#bottomWrap #bottom .bottomBox{
float: left;
width: 25%;
height: auto;
margin: 0;
padding: 0;
}
#bottomWrap #bottom .bottomBox h1{
margin: 5px;
padding: 0;
color: #000;
font-size: 1.2em;
font-weight: normal;
font-family: "Open Sans", arial, helvetica, sans-serif;
}
#bottomWrap #bottom .bottomBox p{
margin: 5px 5px 10px 5px;
padding: 0;
color: #000;
font-size: 1em;
font-weight: normal;
font-family: "Open Sans", arial, helvetica, sans-serif;
}
#bottomWrap #bottom .bottomBox ul{
display: block;
margin: 0 5px 0 0;
padding: 0;
}
#bottomWrap #bottom .bottomBox ul li{
list-style-type: none;
margin: 0;
padding: 0 0 0 25px;
line-height: 1.3em;
height: 25px;
color: #000;
font-size: .9em;
font-weight: normal;
font-family: "Open Sans", arial, helvetica, sans-serif;
background: url("../images/blueCheckMark.png") 0 0 no-repeat;
}
#bottomWrap #bottom .bottomBox img{
float: left;
margin: 0 2px 0 0;
padding: 0;
opacity: .4;
border: 5px solid #efefef;
border-radius: 100%;
outline: none;
transition: all 0.5s;
}
#bottomWrap #bottom .bottomBox img:hover{
opacity: 1;
border: 5px solid #4e6379;
}
/* end of the styles for the bottom columns */
/* start of the footer styles */
#footer{
width: 100%;
height: 30px;
margin: 0;
padding: 0;
background: #65768a;
}
#footer .innerFooter{
width: 950px;
height: auto;
margin: 0 auto;
padding: 5px;
}
#footer .leftFooter{
float: left;
width: 425px;
margin: 0;
padding: 0;
}
#footer .rightFooter{
float: right;
width: 425px;
margin: 0;
padding: 0;
}
#footer .leftFooter p, #footer .rightFooter p{
margin: 0;
padding: 0;
color: #bdbcbc;
font-size: .9em;
font-family: arial, helvetica, sans-serif;
font-weight: normal;
}
#footer .rightFooter p{
text-align: right;
font-size: .6em;
}
#footer .leftFooter a, #footer .rightFooter a{
text-decoration: underline;
color: #bdbcbc;
}
#footer .leftFooter a:hover, #footer .rightFooter a:hover{
text-decoration: none;
}
/* end of the footer styles */
@media screen and (max-width: 1000px){
	#navWrap{
		height: auto;
	}
	#headerInner{
		width: 100%;
		margin: 0;
	}
	#headerNav{
		position: absolute;
		top: 60px;
		z-index: 100;
		width: 100%;
		background: #2196f3;
	}
	.menuToggle{
		display: block;
	}
	#headerNav ul{
		display: none;
		height: auto;
		padding: 0;
	}
	#headerNav ul li{
		float: none;
		height: auto;
		margin: 0;
		border-right: none;
		border-bottom: 1px dotted #bbdefb;
		box-sizing: border-box;
	}
	#headerNav ul li:last-of-type{
		border: none;
	}
	#headerNav ul li a{
	}
	#headerNav ul li ul{
		position: static;
		width: 90%;
		margin: 0 auto;
		padding: 0;
	}
	#headerNav ul li ul li{
		margin: 0;
		padding: 0;
		border-bottom: 1px dotted #bbdefb;
		box-sizing: border-box;
	}
	#headerNav ul li ul li:last-of-type{
		border: none;
	}
	#headerNav ul li ul li a{
		text-align: left;
		padding: 20px 0 0 5px;
		color: #fff;
	}
	.info{
		width: 100%;
		margin: 15px auto;
	}
	.box{
		position: relative;
		float: left;
		width: 40%;
		height: 330px;
		margin: 0 5% 60px 5%;
		padding: 0;
	}
	.box .button{
		position: absolute;
		left: 20%;
		width: 60%;
	}
}
@media screen and (max-width: 950px){
	#contentWrap #content{
		width: 96%;
		margin: 0 auto;
		padding: 0;
	}
	#bottomWrap{
		height: 250px;
	}
	#bottomWrap #bottom{
		width: 100%;
		height: auto;
	}
	#footer{
		min-height: 40px;
	}
	#footer .innerFooter{
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}
	#footer .leftFooter{
		float: left;
		width: 45%;
	}
	#footer .rightFooter{
		float: right;
		width: 45%;
	}
	#footer .leftFooter p, #footer .rightFooter p{
		padding: 10px;
	}
}
@media screen and (max-width: 850px){
	#bottomWrap{
		height: 400px;
	}
	#bottomWrap #bottom .bottomBox{
		float: left;
		width: 45%;
		padding: 10px;
	}
}
@media screen and (max-width: 800px){
	#contentWrap #content ul.listFloatLeft{
		float: left;
		width: 30%;
		margin: 0 0 10px 0;
	}
	#bottomWrap{
		clear: both;
	}
	#bottomWrap #bottom{
		width: 100%;
	}
	#bottomWrap #bottom .bottomBox{
		float: left;
		width: 45%;
		padding: 10px;
	}
}
@media screen and (max-width: 758px) {
	.plan{
		position: relative;
		display: block;
		width: 80%;
		margin: 10px auto 20px auto;
	}
}
@media screen and (max-width: 700px){
	#contentWrap #content ul.listFloatLeft{
		float: left;
		width: 45%;
	}
}
@media screen and (max-width: 600px){
	#footer{
		height: 100px;
	}
	#footer .leftFooter{
		float: none;
		width: 100%;
	}
	#footer .rightFooter{
		float: none;
		width: 100%;
	}
	#footer .leftFooter p, #footer .rightFooter p{
		text-align: center;
		margin: 0 auto;
	}
}
@media screen and (max-width: 550px){
	#contentWrap #content ul.listFloatLeft{
		float: none;
		width: 70%;
		margin: 0 auto 10px auto;
	}
}
@media screen and (max-width: 524px) {
	.plan{
		width: 94%;
	}
}
@media screen and (max-width: 500px){
	.box{
		width: 90%;
		height: 275px;
	}
}
@media screen and (max-width: 450px){
	#bottomWrap{
		height: 700px;
	}
	#bottomWrap #bottom .bottomBox{
		float: none;
		width: 70%;
		margin: 0 auto 10px auto;
		padding: 10px;
	}
}
@media screen and (max-width: 380px){
	#buttons{
		width: 100%;
	}
	#buttons ul{
		width: 150px;
		margin: 0 auto;
	}
	#buttons ul li{
		display: block;
		margin: 0 auto;
	}
	#buttons ul li:last-of-type{
		margin: 20px auto 0 auto;
	}
}