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

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

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


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

.main-container{ width:900px;}

#header{ width:900px;}

.navresponsive {
	position: fixed;
	z-index: 1002;
	top: 0px;
	left: 0px;
	right: 0px;
	background-color: #C9C9C9;
	text-align: center;
	
}
UL.navrespsubmenu {
	padding-left: 0px !important;
	margin: 0px !important;	
}
.navrespsubmenu LI {
	width: 100%;	
}
ul#navres {
	margin: 0px;
	padding-left: 0px;
	text-align: center;
}

span.touch-btn{
	padding-left: 5px;
}

.navrespsubmenu {
	width: 175px;
}

/* ----------------------------------------------- 
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:900px; margin:30px auto;}
	
/* ----------------------------------------------- primary nav ----------------------------------------------- */
	nav ul li{ display:inline-block; position:relative; margin:0;	}
	nav ul li:{ background-color:#999; color:#fff;}
	
	/* style the first level slightly different */
	nav > ul > li{
	margin:0 1px 0 0;
	}

	nav ul li a{ color:#fff; padding:15px 10px; display:block; text-align:center;}
	nav ul li a:{ color:#fff;} /*change background color here*/
	
	/* style the first level slightly different */
	nav > ul > li {
	/*background-color:#999;*/
	}
	nav > ul > li > a{
	}

	
/* ----------------------------------------------- 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:#CCC; border-top:1px solid #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:200px; 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:#CCC;}
	
/* ----------------------------------------------- quaternary nav ----------------------------------------------- */
	nav ul li ul li ul li ul li{ background-color:#CCC;}
	
	}
	


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

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

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


/* ----------------------------------------------- 
//////////////////////////////////////////////////
Global styles
//////////////////////////////////////////////////
----------------------------------------------- */
UL.navrespsubmenu {
	padding-left: 0px !important;
	margin: 0px !important;	
	padding-right: 0px;
}
.navresponsive {
	background-color: #C9C9C9;
	z-index: 1002;
	position: relative;
}
.shadow{ padding:20px;}
.main-container{ width:auto; padding:0;}

/*img{ max-width:250px; height:auto !important;}*/

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

.hero-pic{ background-size:85%; height:200px;}

.right-column-container{ float:none; margin:auto; width:auto;}
.right-column{ margin:20px 0;}

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
----------------------------------------------- */
.toggleMenu {
	position: relative;
	z-index: 1002;
	top: 0px;
	left: 0px;
	right: 0px;
	color: #FFFFFF;
}
.toggleMenu:hover {
	color: #FFFFFF;
}
.navresponsive {
	margin: 0px;
}
#navres {
	padding-left: 0px !important;
	}	
		
	a.toggleMenu{ padding:10px; margin:0px 0px 0 0px; text-decoration:none;
	background-color:#C9C9C9;
	}
	/*
	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:solid 1px #ffffff;}
	nav > ul > li{ background-color:#C9C9C9;}
	nav ul li a{  padding:10px; display:block; color:#ffffff;}
	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:10px 5px 10px 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:#666;
		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-minuus3.png) no-repeat 50% 2px #666; 
	}


/* 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);
}



    }

/* 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; } 
}

/* 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; } 
}