/*-----------------------------------------------

Name:     Responsive Navigation responsive styles
Designer: responsive-navigation.com
Copyright 2014 Responsive-Navigation.com, All rights reserved.

----------------------------------------------- */




@media screen and (min-width: 920px) {
	
/* ----------------------------------------------- 
//////////////////////////////////////////////////
Global styles
//////////////////////////////////////////////////
----------------------------------------------- */

.main-container{ width:900px;}


#header{ width:900px;}



/* ----------------------------------------------- 
nav styles
----------------------------------------------- */
			
	.main-nav { display: block !important;} /* this style is needed in case a user hides the main nav in the mobile view then expands the window */
	#nav-container{ width:947px; margin:28px auto;}
	
/* ----------------------------------------------- primary nav ----------------------------------------------- */
	nav ul li{ float:left; display:inline; width:152px; position:relative; margin:0; background-color:#99CCFF;	}
	nav ul li:hover{ background-color:#FD0276;}
	
	/* style the first level slightly different */
	nav > ul > li{
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	margin:0 0 0 5px;
	}

	nav ul li a{ color:#05446D; padding:10px 5px 6px 5px; display:block; text-align:center; font-family:'Edwardian'; font-size:2.1em; font-weight:bold;}
	nav ul li a:hover{ background-color:#05446D;}
	
	/* style the first level slightly different */
	nav > ul > li {
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	background-color:#99CCFF;
	}
	nav > ul > li > a{
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	}

	
/* ----------------------------------------------- secondary nav ----------------------------------------------- */
	nav ul li ul{-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease; position:absolute;max-height:0; overflow:hidden; 
		margin:-20px 0 0 0; opacity:0;
		-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);
		-moz-box-shadow:    1px 1px 2px rgba(50, 50, 50, 0.35);
		box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.35);
	}
	nav ul li:hover > ul{ max-height:1000px; overflow:visible; margin:0; opacity:1;}
	nav ul li ul li{ background-color:#99CCFF; border-top:1px dashed #FFFFFF;}
	
	/* add arrow to parent items */
	ul li ul li a.parent{ background: url(../_images/arrow-parent.gif) no-repeat 97% 50%;}
	
/* ----------------------------------------------- tertiary nav ----------------------------------------------- */
	nav ul li ul li ul{ float:left; position:absolute; left:175px; top:0; width:0; margin:0 0 0 -20px;}
	nav ul li ul li:hover > ul{ margin:0; width:175px;}
	nav ul li ul li ul li{ background-color:#eef;}
	
/* ----------------------------------------------- quaternary nav ----------------------------------------------- */
	nav ul li ul li ul li ul li{ background-color:#eef;}
	
	}



@media screen and (min-width: 768px) and (max-width: 919px) {
	
/* ----------------------------------------------- 
//////////////////////////////////////////////////
Global styles
//////////////////////////////////////////////////
----------------------------------------------- */
h1{ font-size:35px;}
.main-container{ width:758px; min-height:420px;}

#header{ width:758px;}



/* ----------------------------------------------- 
nav styles
----------------------------------------------- */
			
	.main-nav { display: block !important;} /* this style is needed in case a user hides the main nav in the mobile view then expands the window */
	#nav-container{ width:803px; margin:28px auto;}
	
/* ----------------------------------------------- primary nav ----------------------------------------------- */
	nav ul li{ float:left; display:inline; width:130px; position:relative; margin:0; background-color:#99CCFF;	}
	nav ul li:hover{ background-color:#FD0276;}
	
	/* style the first level slightly different */
	nav > ul > li{
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	margin:0 0 0 3px;
	}

	nav ul li a{ color:#05446D; padding:10px 5px 6px 5px; display:block; text-align:center; font-family:'Edwardian'; font-size:1.8em;}
	nav ul li a:hover{ background-color:#05446D;}
	
	/* style the first level slightly different */
	nav > ul > li {
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	background-color:#99CCFF;
	}
	nav > ul > li > a{
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	}

	
/* ----------------------------------------------- secondary nav ----------------------------------------------- */
	nav ul li ul{-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease; position:absolute;max-height:0; overflow:hidden; 
		margin:-20px 0 0 0; opacity:0;
		-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);
		-moz-box-shadow:    1px 1px 2px rgba(50, 50, 50, 0.35);
		box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.35);
	}
	nav ul li:hover > ul{ max-height:1000px; overflow:visible; margin:0; opacity:1;}
	nav ul li ul li{ background-color:#99CCFF; border-top:1px dashed #FFFFFF;}
	
	/* add arrow to parent items */
	ul li ul li a.parent{ background: url(../_images/arrow-parent.gif) no-repeat 97% 50%;}
	
/* ----------------------------------------------- tertiary nav ----------------------------------------------- */
	nav ul li ul li ul{ float:left; position:absolute; left:148px; top:0; width:0; margin:0 0 0 -20px;}
	nav ul li ul li:hover > ul{ margin:0; width:148px;}
	nav ul li ul li ul li{ background-color:#99CCFF;}
	
/* ----------------------------------------------- quaternary nav ----------------------------------------------- */
	nav ul li ul li ul li ul li{ background-color:#99CCFF;}
	
	}
	

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {


/* ----------------------------------------------- 
//////////////////////////////////////////////////
Global styles
//////////////////////////////////////////////////
----------------------------------------------- */
body{ 
background: #aaddFF; background-image: none; 
}

.large-screen {
	display:none;
	
}

.mobile-only {
	display:block;
}

h1{ font-size:35px;}

.shadow{ padding:20px;}
.main-container{ width:auto; padding:0; background-image:none;}

#header{ padding:20px;font-size:30px; height:auto;}
#header a.buy-btn{ display:none;}


.right-column-container{ float:none; margin:auto; width:100%;}
.right-column{ margin:20px 0;}
.right-column-photo{ margin:20px 0;}
a.lightbox-right {    
        pointer-events: none;
    }

ul.browsers li{width:75px; height:40px; padding:75px 5px 5px 5px; margin:0 10px 0 0;}
ul.browsers li.ie{ background-size:75px auto;}
ul.browsers li.ff{ background-size:75px auto;}
ul.browsers li.safari{ background-size:75px auto;}
ul.browsers li.chrome{ background-size:75px auto;}
ul.browsers li.opera{ background-size:75px auto;}

	
/* ----------------------------------------------- 
nav styles
----------------------------------------------- */
#nav-container{ width:auto; margin:120px auto 10px auto;}	
		
	a.toggleMenu{ padding:10px; margin:10px 10px 0 10px; text-decoration:none;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background-color:#99CCFF;
	}
	/*
	a.toggleMenu.active > span.touch-btn{ display:inline; float:right; transition:all .2s ease; -webkit-transition:all .2s ease;
	-webkit-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
	}*/
	
	nav{ margin:0 10px 10px 10px;}
	nav ul li{list-style:none; border-top:dashed 1px #666666;}
	nav > ul > li{ background-color:#99CCFF;}
	nav ul li a{  padding:10px; display:block;}
	nav ul li ul{ 
		max-height:0; 
		overflow:hidden;
		padding:0 20px 0px 20px; 
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-o-transition: all .5s ease;
		transition: all .5s ease;
	}
	nav > ul{  
		max-height:0; 
		overflow:hidden; 
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-o-transition: all .5s ease;
		transition: all .5s ease;
	}
	nav ul li ul li a{ background:url(../_images/bullet-sub.gif) no-repeat 6px 8px; padding:5px 5px 5px 18px; }
	nav > ul.active{ max-height:1000px;}
	nav ul li.active > ul{ max-height:1000px;}
	span.touch-btn{ 
		display:inline; 
		float:right; 
		transition:all .2s ease; 
		-webkit-transition:all .2s ease;
		background-color:#05446D;
		width:20px;
		height:20px;
		margin:-2px 0 0 0px;
		padding:2px;
		-webkit-border-radius: 30px;
		border-radius: 30px;
		text-align:center;
		font-family:arial, sans-serif;
		font-size:14px;
		display:block;
		overflow:hidden;
		
		/* comment these lines to change the +/- to an arrow (see also comments below)*/
		text-indent:-9999px;
		background:url(../_images/plus-minus.gif) no-repeat 50% 2px #05446D; 
	}


/* Rotate arrow on click/tap */
nav ul li.active > a.parent span.touch-btn{
	-webkit-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
	background-position:50% -18px; /* this line is only needed if +/- is used instead of arrows */

}

a.toggleMenu span.touch-btn{
	-webkit-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
	background-position:50% -18px; /* this line is only needed if +/- is used instead of arrows */
}

a.toggleMenu.active span.touch-btn{
	background-position:50% 2px; /* this line is only needed if +/- is used instead of arrows */
	-webkit-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
}

#logo {
	width:40%;
}


    }

/* css rules for ipad portrait */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
	/* This fixes drop menus so they work on ipads */
	nav ul li ul{ display:none;}
	nav ul li:hover > ul{ display:block; }
	body{ 
background: #aaddFF; background-image: none; 
}

#nav-container{ width:768px; margin:28px auto;}
	
/* ----------------------------------------------- primary nav ----------------------------------------------- */
	nav ul li{ float:left; display:inline; width:124px; position:relative; margin:0; background-color:#99CCFF;	}
	nav ul li:hover{ background-color:#FD0276;}
	
	/* style the first level slightly different */
	nav > ul > li{
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	margin:0 2px 0 2px;
	}

	nav ul li a{ color:#05446D; padding:10px 5px 6px 5px; display:block; text-align:center; font-family:'Edwardian'; font-size:1.7em;}
	nav ul li a:hover{ background-color:#05446D;}
	
	.main-container{ width:auto; padding:0; margin-left:10px; margin-right:10px;}
}

/* css rules for ipad landscape */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
	/* This fixes drop menus so they work on ipads */
	nav ul li ul{ display:none;}
	nav ul li:hover > ul{ display:block; } 
}


@media screen and (max-width: 480px) {
	
h1{ font-size:45px;}	

#tel {
	float:left;
	font-size:0.6em;
	color:#FFF;
	background:#05446D;
    background: -moz-linear-gradient(#05446D 0%, #0755b2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #05446D), color-stop(100%, #0755b2));
    background: -webkit-linear-gradient(#05446D 0%, #0755b2 100%);
    background: linear-gradient(#05446D 0%, #0755b2 100%);	
	padding:10px 10px 10px 10px;	
	width:100%;
	border-radius:4px;
	border: 1px solid #99ccff;	
	text-align:center;
	margin:10px 10px 10px -11px;
	height:auto;
}

#skipTo {
		display: block;
		width:102%;
		border-top: none;
		border-bottom: none;
		margin:0 0 0 -25px;
		}
		
#skipTo li {
			margin: 0;
			background:#05446D;
    background: -moz-linear-gradient(#05446D 0%, #0755b2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #05446D), color-stop(100%, #0755b2));
    background: -webkit-linear-gradient(#05446D 0%, #0755b2 100%);
    background: linear-gradient(#05446D 0%, #0755b2 100%);
			border-radius:4px;
			border: 1px solid #99ccff;
			display: block;
			font-size:1.2em;
			margin-bottom: 3px;
			}
					
			
			#skipTo a {
				display: block;
				padding: 10px;
				text-align: center;
				color:#FFF;

				}
		
		#skipTo a:link {
    font-weight: bold;
	text-decoration:none;
	font-size:1em;
	color:#FFF;
	
    }		

a.top-link:link {
	color:#fff;
	text-decoration:none;
	
}

a.top-link:visited {
	color:#fff;
	text-decoration:none;
}

a.top-link:hover {
	color:#111;
	text-decoration:underline;
	
}

a.top-link:active {
	color:#111;
	text-decoration:underline;
}

#logo {
	width:100%;
	height:50px;	
	float:left;
	top:-10px;
}

#header{ height:110px;}

#header-container{ background:#aaddFF;}

.pic-border {
	
	margin:0px 0px 7px 0px;
	width:100%;
}

.id-photo {
	width:100%;
	max-width:100%;
}

a.lightbox {    
        pointer-events: none;
    }


}