/* start of styles for top, responsive navigation menu */
nav#nav-main a, nav#nav-main a:hover, nav#nav-mobile a, nav#nav-mobile a:hover{
text-decoration: none;
}
#nav-trigger{
display: none;
text-align: center;
}
#nav-trigger span{
color: #fff;
background: #af002c;
}
#nav-trigger span{
display: inline-block;
width: 100%;
padding: 10px 0;
cursor: pointer;
text-transform: uppercase;
color: white;
background: #c80032;
display: inline-block;
}
#nav-trigger span:hover{
}
nav{
margin-bottom: 30px;
}
nav#nav-main{
padding: 10px 0;
background: #c80032;
}
nav#nav-main ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
nav#nav-main li{
display: inline-block;
padding: 0 5px;
border-right: solid 1px #950025;
}
nav#nav-main li:last-child{
border-right: none;
}
nav#nav-main a{
display: block;
padding: 10px 30px;
color: white;
font-family: arial, helvetica, sans-serif;
font-weight: normal;
}
nav#nav-main a:hover{
color: #fff;
background: #af002c;
}
nav#nav-mobile{
position: relative;
display: none;
}
nav#nav-mobile ul{
display: none;
position: absolute;
left: 0;
right: 0;
list-style-type: none;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #c80032;
}
nav#nav-mobile li{
display: block;
margin: 0 5px;
padding: 0;
border-bottom: solid 1px #950025;
}
nav#nav-mobile li:last-child{
border-bottom: none;
}
nav#nav-mobile a{
display: block;
padding: 10px 30px;
color: white;
}
nav#nav-mobile a:hover{
color: #fff;
background: #af002c;
}
/* end of styles for top, responsive navigation menu */
/* start of styles for header logo and title */
#header{
width: 100%;
height: 105px;
margin: 0;
padding: 0;
}
#header .innerHeader{
width: 950px;
height: 105px;
margin: 0 auto;
padding: 0;
background: url('../images/globeIcon.png') 0px 0px no-repeat;
}
#header #leftHeader{
float: left;
width: 545px;
height: 105px;
}
#header #rightHeader{
float: right;
width: 400px;
height: 105px;
margin: 0;
padding: 0;
}
#header .rightLeft{
float: left;
width: 240px;
height: 100px;
background: url('../images/chatIcon.jpg') 0 10px no-repeat;
}
#header .rightLeft:hover
{
background: url('../images/chatIconHover.jpg') 0 10px no-repeat;
}
#header .rightLeft p
{
width: 150px;
margin: 16px 0 0 0;
padding: 0 0 0 77px;
color: #fafafa;
font-size: 15px;
font-weight: normal;
font-family: "Trebuchet MS", arial, tahoma, sans-serif;
}
#header .rightLeft a
{
text-decoration: none;
color: #fafafa;
}
#header .rightLeft a:hover{
text-decoration: underline;
}
#header .rightRight{
float: right;
width: 160px;
height: 100px;
margin: 10px 0 0 0;
padding: 0;
}
#header .rightRight p
{
width: 150px;
margin: 0;
padding: 0;
color: #000;
font-size: 15px;
font-weight: normal;
font-family: "Trebuchet MS", arial, tahoma, sans-serif;
}
#header .rightRight p a
{
color: #fafafa;
text-decoration: none;
}
#header .rightRight p a:hover
{
color: #fafafa;
text-decoration: none;
}
#header h1{
margin: 0;
padding: 0 0 0 105px;
color: #b53300;
font-size: 3em;
font-weight: bold;
font-family: arial, "Trebuchet MS", tahoma, sans-serif;
text-shadow: 2px 2px 1px #333;
}
#header h1 a{
color: #af002c;
text-decoration: none;
}
#header h1 a:hover{
color: #b53300
text-decoration: none;
}
#header h1 span{
color: #000099;
font-weight: bold;
font-size: 1.1em;
text-shadow: 2px 2px 1px #333;
}
#header h2{
margin:0;
padding:0 0 0 120px;
color:#282844;
font-size: 2em;
font-weight:normal;
font-family:"Trebuchet MS", arial, tahoma, sans-serif;
}
/* end of styles for header logo and title */
/* start of pricing table styles */
#pricingTable{
margin: 20px auto 10px auto;
padding: 0;
text-align: center;
width: 928px; /* total width */
zoom: 1;
}
#pricingTable:before, #pricingTable:after
{
content: "";
display: table
}
#pricingTable:after
{
clear: both
}
#pricingTable .centerPlans{
}
#pricingTable .plan
{
font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;     
background: #fff;      
border: 1px solid #ddd;
color: #333;
padding: 20px;
width: 180px;
float: left;
position: relative;
margin: 0 5px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);		
}
#pricingTable .free
{
position:absolute;
top: -33px;
left: -34px;
margin: 0;
padding: 0;
z-index: 5;
}
#pricingTable .plan:after
{
z-index: -1; 
position: absolute; 
content: "";
bottom: 10px;
right: 4px;
width: 80%; 
top: 80%; 
-webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);   
-moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
-webkit-transform: rotate(3deg);    
-moz-transform: rotate(3deg);   
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);	
}	
#pricingTable .popular-plan
{
top: -20px;
padding: 40px 20px;
}
#pricingTable .header
{
position: relative;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
padding: 40px;
margin: -20px -20px 20px -20px;
border-bottom: 8px solid;
background-color: #eee;
background-image: -moz-linear-gradient(#fff,#eee);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
background-image: -webkit-linear-gradient(#fff, #eee);
background-image: -o-linear-gradient(#fff, #eee);
background-image: -ms-linear-gradient(#fff, #eee);
background-image: linear-gradient(#fff, #eee);
}
#pricingTable .header:after
{
position: absolute;
bottom: -8px;
left: 0;
height: 3px;
width: 100%;
content: '';
background-image: url("images/bar.png");
}	
#pricingTable .popular-plan .header
{
margin-top: -40px;
padding-top: 60px;		
}
#pricingTable .plan1 .header
{
border-bottom-color: #b3e03f;
}
#pricingTable .plan2 .header
{
border-bottom-color: #7bd553;
}
#pricingTable .plan3 .header
{
border-bottom-color: #3ad5a0;
}
#pricingTable .plan4 .header
{
border-bottom-color: #45d0da;
}
#pricingTable .price
{
font-size: 45px;
}
#pricingTable .monthly
{
font-size: 13px;
margin-bottom: 20px;
text-transform: uppercase;
color: #999;
}
#pricingTable ul
{
margin: 20px 0;
padding: 0;
list-style-type: none;
}
#pricingTable li
{
padding: 5px 0;
font-size: 16px;
}
#pricingTable .sign_up
{
margin: 5px auto;
padding: 10px 20px;
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #ff0000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 -1px 0 rgba(0,0,0,.15);
opacity: .9;
}
#pricingTable .sign_up:hover
{
opacity: 1;
color: #000;
-webkit-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
}
#pricingTable .sign_up:active
{
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
}
#pricingTable .learn_more
{
margin: 5px auto;
padding: 10px 20px;
color: #fff;
font: bold 14px Arial, Helvetica;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
background-color: #72ce3f;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 -1px 0 rgba(0,0,0,.15);
opacity: .9;
}
#pricingTable .learn_more:hover
{
opacity: 1;
color: #000;
box-shadow: 0 0 3px #000;
}
#pricingTable .learn_more:active
{
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
}
#pricingTable .plan1 .learn_more
{
background: #b3e03f;
}
#pricingTable .plan2 .learn_more
{
background: #7bd553;
}
#pricingTable .plan3 .learn_more
{
background: #3ad5a0;
}
#pricingTable .plan4 .learn_more
{
background: #45d0da;
}
/* end of pricing table styles */
/* start of styles for info boxes */
.center{
width: 98%;
height: auto;
margin: 0 auto;
padding: 0;
}
/* #info */
#info
{
float: left;
width: 66%;
margin: 15px auto;
padding: 0;
background:#fff;
}
#info h1
{
clear:both;
margin:0;
padding: 0;
color:#1a1a1a;
font-size: 1.5em;
font-weight:normal;
font-family:helvetica, "Trebuchet MS", tahoma, arial, sans-serif;
}
#info .more
{
float:left;
width: 48%;
margin: 0 0 15px 0;
padding: 0;
}
#info .more:first-of-type{
margin: 0 10px 0 0;
padding: 0;
}
#info .more h2
{
margin: 0;
padding: 0 0 0 5px;
color: #1a1a1a;
font-size: 20px;
font-weight: normal;
font-family: helvetica, "Trebuchet MS", tahoma, arial, sans-serif;
}
#info .more img
{
float: left;
margin: 0 5px 5px 5px;
padding: 0;
border: none;
}
#info .more p
{
margin: 3px 0 0 0;
padding: 0;
color: #000;
font-size: 15px;
font-weight:normal;
font-family:arial, tahoma, sans-serif;
}
#info .more p a
{
color:#000;
text-decoration:underline;
}
#info .more p a:hover
{
color:#000;
text-decoration:none;
}
/* end of styles for info boxes */
/* start of styles for the login form */
section#loginBox{
float: right;
width: 30%;
margin: 15px auto;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
background: #444;
}
section#loginBox .loginboxinner
{
background: #fff;
padding: 20px;
border: 1px solid #333;
-moz-box-shadow: inset 0 1px 0 #444;
-webkit-box-shadow: inset 0 1px 0 #444;
box-shadow: inset 0 1px 0 #444;
}
section#loginBox h1{
font-size: 24px;
}
section#loginBox .radius{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
section#loginBox .loginform{
margin: 20px 0 0 0;
}
section#loginBox #login{
}
section#loginBox h1{
font-size: 1.2em;
letter-spacing: 1px;
color: #555;
font-weight: normal;
padding-top: 10px;
}
section#loginBox p{
margin: 10px 0 15px 0;
font-size: 1em;
}
section#loginBox label{
display: block;
color: #555;
letter-spacing: 1px;
font-size: 1em;
}
section#loginBox input
{ 
padding: 10px;
background: #282828;
color: #ccc; 
margin-top: 8px;
font-size: 1em;
border: 0;
width: 98%;
-moz-box-shadow: 0 1px 0 #444;
-webkit-box-shadow: 0 1px 0 #444;
box-shadow: 0 1px 0 #444;
outline: none; 
}
section#loginBox input:focus{
background: #ccc;
color: #000;
}
section#loginBox button{
margin: 8px 0 0 0;
background: #999;
padding: 10px;
font-size: 1em;
border: 0;
letter-spacing: 1px;
color: #333;
width: 98%;
-moz-box-shadow: 1px 1px 3px #222;
-webkit-box-shadow: 1px 1px 3px #222;
box-shadow: 1px 1px 3px #222;
cursor: pointer;
}
section#loginBox button:hover{
background: #ccc;
color: #000;
box-shadow: 2px 2px 2px #191919;
}
/* end of styles for the login form */
/* start of styles of bottom images */
#bottomImagesWrap{
clear: both;
width: 100%;
height: 125px;
margin: 0;
padding: 0;
}
.bottomImages
{
width: 880px;
height: 125px;
margin: 25px auto;
padding: 0;
}
.bottomImages img
{
float: left;
margin: 0 10px 0 0;
padding: 0;
border: none;
outline: none;
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .50;
}
.bottomImages img:last-of-type{
margin: 0;
}
.bottomImages img:hover
{
-khtml-opacity: 1;
-moz-opacity: 1;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity: 1;
}
/* end of styles of bottom images */
/* start of bottom navigation/columns styles */
#bottomNav{
width: 100%;
margin: 15px 0 0 0;
padding: 10px 0 0 0;
background: #e0e0e0;
}
.bottomNavInner{
padding: 0px;
width: 960px;
height: 200px;
margin: 0 auto;
}
.bottomNavBox{
float: left;
padding: 0 0 0 10px;
margin: 0;
width: 23%;
height: 200px;
}
.bottomNavBox h1{
margin: 0;
padding: 5px 0;
color: #202020;
font-size: 1.5em;
font-weight: normal;
font-family: arial, helvetica, sans-serif;
}
.bottomNavBox ul{
margin: 10px auto;
padding: 0 0 0 5px;
list-style-type: none;
width: 98%;
position: relative;
float: left;
}
.bottomNavBox ul li{
margin: 0;
padding: 0;
line-height: 1.7em;
color: #202020;
}
.bottomNavBox ul li a{
text-decoration: underline;
color: #202020;
}
.bottomNavBox ul li a:hover{
color: #202020;
text-decoration: none;
}
.bottomNavBox p{
margin: 0;
padding: 5px 0;
color: #202020;
font-size: .9em;
font-weight: normal;
font-family: arial, helvetica, sans-serif;
}
.bottomNavBox p a{
text-decoration: underline;
color: #202020;
}
.bottomNavBox p a:hover{
text-decoration: none;
color: #202020;
}
.bottomNavBox img{
position: relative;
float: left;
margin: 10px auto 20px 0px;
}
/* end of bottom navigation/columns styles */
/* start of the footer styles */
#footer{
width: 100%;
height: 30px;
margin: 0;
padding: 0;
background: #e8e8e8;
}
#footer .innerFooter{
width: 950px;
height: auto;
margin: 0 auto;
padding: 5px 0;
}
#footer .leftFooter{
float: left;
width: 425px;
margin: 0;
padding: 0;
}
#footer .rightFooter{
float: right;
width: 425px;
margin: 0;
padding: 0;
}
#footer .leftFooter p{
margin: 0;
padding: 0;
font-size: .9em;
font-family: arial, helvetica, sans-serif;
font-weight: normal;
color: #808080;
}
#footer .rightFooter p{
text-align: right;
margin: 0;
padding: 0;
font-size: .6em;
font-family: arial, helvetica, sans-serif;
font-weight: normal;
color: #b4b4b4;
}
#footer .leftFooter a{
text-decoration: underline;
color: #808080;
}
#footer .rightFooter a{
text-decoration: underline;
color: #b4b4b4;
}
#footer .leftFooter a:hover, #footer .rightFooter a:hover{
text-decoration: none;
}
/* end of the footer styles */
@media screen and (max-width: 960px){
	.bottomNavInner{
		width: 100%;
	}
}
@media screen and (max-width: 950px){
	#header{
		height: 200px;
	}
	#header .innerHeader{
		width: 100%;
		height: 200px;
		background-image: none;
	}
	#header #leftHeader{
		float: none;
		width: 600px;
		height: 105px;
		margin: 0 auto;
		background: url('../images/globeIcon.png') 0px 0px no-repeat;
	}
	#header #rightHeader{
		float: none;
		width: 400px;
		height: 95px;
		margin: 0 auto;
	}
	#footer .innerFooter{
		width: 100%;
	}
	#footer .leftFooter{
		float: left;
		width: 50%;
		margin: 0;
		padding: 0;
	}
	#footer .rightFooter{
		float: right;
		width: 45%;
		margin: 0;
		padding: 0;
	}
	#footer .leftFooter p{
		margin: 0;;
	}
	#footer .rightFooter p{
		margin: 0;
	}
}
@media screen and (max-width: 928px){
	#pricingTable{
		width: 100%;
	}
	#pricingTable .centerPlans{
		width: 94%;
		margin: 0 auto;
		padding: 0;
	}
	#pricingTable .plan:first-of-type{
		margin-right: 5px;
	}
	#pricingTable .plan{
		width: 44%;
		float: left;
		margin: 0;
	}
	#info{
		float: left;
		width: 98%;
		margin: 15px auto;
	}
	section#loginBox{
		float: right;
		width: 96%;
		margin: 15px auto;
	}
	section#loginBox .loginboxinner{
		padding: 20px;
	}
}
@media screen and (max-width: 900px){
	#nav-trigger{
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		height: auto;
		background: #c80032;
	}
	nav#nav-main{
		display: none;
	}
	nav#nav-mobile{
		display: block;
		z-index: 100;
	}
	#header{
		margin: 0 auto;
		padding: 20px 0;
	}
	#bottomImagesWrap{
		height: 250px;
	}
	.bottomImages{
		width: 440px;
		height: 225px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 800px){
	#pricingTable .centerPlans{
		width: 60%;
	}
	#pricingTable .plan{
		width: 100%;
		float: none;
		margin: 5px auto 25px auto;
	}
	#pricingTable .popular-plan{
		top: 0;
		padding: 40px 20px;
	}
	#info{
		float: none;
		width: 98%;
		margin: 15px auto;
	}
	#info .more{
		float: left;
		width: 100%;
		margin: 0 25px 0 0;
		padding: 0;
	}
	#info .more:first-of-type{
		margin: 0;
	}
	.bottomNavInner{
		width: 100%;
		height: 400px;
	}
	.bottomNavBox{
		float: left;
		width: 47%;
		margin: 0;
		padding: 0 0 0 15px ;
	}
	.bottomNavBox:last-of-type{
		padding: 0;
	}
}
@media screen and (max-width: 758px){
	#nav-trigger{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		background: #c80032;
	}
	nav#nav-main{
		display: none;
	}
	nav#nav-mobile{
		display: block;
		z-index: 100;
	}
	#header{
		margin: 0 auto;
		padding: 20px 0;
	}
}
@media screen and (max-width: 600px){
	#header #leftHeader{
		width: 100%;
	}
	.slideshowContainer h2{
		font-size: 3em;
	}
	.slideshowContainer p{
		display: none;
	}
}
@media screen and (max-width: 524px){
	#header{
		height: 185px;
	}
	#header .innerHeader{
		width: 100%;
		height: 185px;
		background: url('../images/globeIcon.png') 0px 0px no-repeat;
		background-size: 15%;
	}
	#header #leftHeader{
		float: none;
		width: 100%;
		height: 105px;
		margin: 0 auto;
		background-image: none;
	}
	#header h1{
		padding: 0;
		text-align: center;
		font-size: 2.3em;
	}
	#header h2{
		margin: 5px 0 0 0;
		padding: 0;
		text-align: center;
		font-size: 1.5em;
	}
	#pricingTable{
		margin: 10px auto 10px auto;
	}
	#info .more{
		margin: 0 0 25px 0;
	}
	#info .more:first-of-type{
		margin: 0 0 25px 0;
	}
	section#loginBox{
		float: right;
		width: 96%;
		margin: 10px 0;
		padding: 5px;
	}
	section#loginBox .loginboxinner{
		padding: 5px;
	}
	section#loginBox button, section#loginBox input, section#loginBox label{
		padding: 5px 0;
		font-size: .9em;
	}
	section#loginBox input{
		width: 96%;
		margin: 0;
	}
	section#loginBox button{
		width: 96%;
		margin: 0;
	}
	.bottomNavBox{
		float: left;
		padding: 0 0 0 1px;
		margin: 0;
		width: 49%;
		height: 200px;
	}
	#footer{
		height: 90px;
	}
	#footer .innerFooter{
		width: 100%;
	}
	#footer .leftFooter{
		float: none;
		width: 98%;
		margin: 0 auto 15px auto;
	}
	#footer .rightFooter{
		float: none;
		width: 98%;
		margin: 0 auto;
	}
	#footer .leftFooter p, #footer .rightFooter p{
		width: 100%;
		text-align: center;
	}
	#footer .rightFooter p{
		padding: 20px 0 0 0;
		font-size: .6em;
	}
}
@media screen and (max-width: 450px){
	#bottomImagesWrap{
		height: 425px;
	}
	.bottomImages{
		width: 220px;
		height: 425px;
	}
}
@media screen and (max-width: 425px){
	#header{
		padding: 0;
		background-size: 15%;
	}
	#header .innerHeader{
		margin: 0;
		padding: 15px 0 0 0;
		background: url('../images/globeIcon.png') 0px 15px no-repeat;
		background-size: 12%;
	}
}
@media screen and (max-width: 400px){
	#header{
		height: 140px;
	}
	#header .innerHeader{
		width: 100%;
		height: 140px;
		background: url('../images/globeIcon.png') 0px 15px no-repeat;
		background-size: 12%;
	}
	#header #rightHeader{
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#header .rightLeft{
		display: none;
	}
	#header .rightRight{
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#header .rightRight p{
		width: 90%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		font-size: 1.1em;
		font-weight: bold;
	}
}