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

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

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


@media screen and (min-width: 768px) {
	
/* ----------------------------------------------- 
//////////////////////////////////////////////////
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:900px; margin:30px auto;}
	
/* ----------------------------------------------- primary nav ----------------------------------------------- */
	nav ul li{ float:left; display:inline; width:177px; position:relative; margin:0; background-color:#CCC;	}
	nav ul li:hover{ background-color:#999;}
	
	/* 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 3px 0 0;
	}

	nav ul li a{ color:#333; padding:15px 10px; display:block; text-align:center;}
	nav ul li a:hover{ background-color:#666;}
	
	/* 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:#999;
	}
	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:#CCC; 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:85px; top:-17px; 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;}

/*fix the placement of sub submenus in Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
   nav ul li ul li ul{ float:left; position:absolute; left:85px; top:-30px; width:0; margin:0 0 0 -28px;}

   /* Safari only override */
    ::i-block-chrome, nav ul li ul li ul{ float:left; position:absolute; left:170px; top:-32px; width:0; margin:0 0 0 -28px;}
}

/*fix the placement of sub submenus in edge*/
@supports (-ms-ime-align:auto) {
    nav ul li ul li ul{ float:left; position:absolute; left:0px; top: 0px; width:0; margin:0 0 0 -20px;}
}
	
/* ----------------------------------------------- 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: 767px) {


/* ----------------------------------------------- 
//////////////////////////////////////////////////
Global styles
//////////////////////////////////////////////////
----------------------------------------------- */

.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
----------------------------------------------- */
	
		
	a.toggleMenu{ padding:10px; margin:20px 10px 0 10px; text-decoration:none;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 0;
	background-color:#232324;
	}
	/*
	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 #555;}
	nav > ul > li{ background-color:#999;}
	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:#232324;
		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:11px;
		display:block;
		overflow:hidden;
		background-position: 50% 3px;
		
		/* 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 #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; } 
}