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

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

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



	


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

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




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