/*Responsive Styles*/
@media screen and (min-width : 1150px){
#mainnav ul#menu {
    display: block;
}
}

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

	#mainnav { float: right; margin: 10px 10px 0 0; width:275px; z-index:1 }
  	#nav-toggle, .r-logo { display:block; }
	#mainnav { width: 40px; }
	#mainnav ul#menu {	position: absolute; z-index:2; }
	#mainnav ul { display:none;    top: 0; right: 0; width: 275px; }
	#mainnav ul li { width:100%; clear:both; list-style:square;  }
	#mainnav ul li a { padding: 0 20px 0 40px; background:url(../images/inactivesquare.jpg) no-repeat 30px center; text-align:left; }
	#mainnav ul li { position:relative; }
	#mainnav ul li ul { left:100%; top:0; position:relative; left:0; box-shadow: none; }
	#mainnav ul li:hover > a { color:#ffffff; background: #1470bd url(../images/activesquare.jpg) no-repeat 30px center; }
	/*#mainnav ul li:hover > ul { display:block;}*/
	#mainnav ul ul ul { border:0; }
	#mainnav ul li ul.subnav li a { padding:0 40px; }
	#mainnav ul li ul.subnav li ul li a { padding:0 50px;background:#eeeeee; }
	#mainnav ul ul ul li a, #mainnav ul ul li a { background: none; }
  	#mainnav ul ul ul li a { font-size: 12px; }
  	#mainnav ul ul li:hover > a, #mainnav ul ul li:hover > ul { color:#1470bd; background: #dddddd; }
	.iconCenterBox { width: 85%; margin: 0 auto; }
	.icon h2 {
		font-size: 17px;
		}
	.centerFull { width: 100%; }	

}

@media screen and (max-width : 1000px){
	.centerFull, #resources { width:100%; }
	.resources .one-third  {     width: 46%; text-align: center; float: left; clear: none;    padding: 2% 2% 0 2%;
    margin-bottom: 2%;}
	.resources .one-third.last  { width: 96%; text-align: center; float: none; clear: both; }
	.one-third a.lb-vimeo { float:none; }
}
@media screen and (max-width : 976px){
	.tab, .tab.last { margin: 0 3% 3em 0; width: 30%; }
	
}

@media screen and (max-width : 760px){
	body, ul.ticklist li { font-size:14px; }
	.left, .right {
			width: 75%;
			margin: 0 auto;
			clear: both;
			float: none;
			padding: 0;
			margin-bottom: 3em;
		}
	h3 {     font-size: 17px; font-family: 'Flama-Medium'; }	
	.logo { width:75%; float: right; margin: 20px -0px 20px 0px; }
  	#mainnav { float: right; margin: 10px 10px 0 0; width:275px; z-index:1 }
  	#nav-toggle, .r-logo { display:block; }
	#mainnav { width: 40px; }
	#mainnav ul#menu {	position: absolute;}
	#mainnav ul { display:none;    top: 0; left: 0; width: 275px; }
	#mainnav ul li { width:100%; clear:both; list-style:square;  }
	#mainnav ul li a { padding: 0 20px 0 40px;    font-size: 15px; background:url(../images/inactivesquare.jpg) no-repeat 30px center;text-align:left; }
	#mainnav ul li { position:relative; }
	#mainnav ul li ul { left:100%; top:0; position:relative; left:0; box-shadow: none; }
	#mainnav ul li:hover > a { color:#ffffff; background: #1470bd url(../images/activesquare.jpg) no-repeat 30px center; }
	/*#mainnav ul li:hover > ul { display:block;}*/
	#mainnav ul ul ul { border:0; }
	#mainnav ul li ul.subnav li a { padding:0 40px; }
	#mainnav ul li ul.subnav li ul li a { padding:0 50px; }
	#mainnav ul ul ul li a, #mainnav ul ul li a { background: none; }
  	#mainnav ul ul ul li a { font-size: 12px; }
  	#mainnav ul ul li:hover > a, #mainnav ul ul li:hover > ul { color:#1470bd; background: #dddddd; }
	
	.products p { margin: 10px 0; }
	.iconCenterBox { width: 100%; margin: 0 auto; }
	#footer h3 { font-size: 16px; }
	#footer .footer-text {  width: 100%; }
	.cnt { margin-top: 25px; }
	.cnt a { padding:8px 35px 8px 15px; }
	
	
	/*utm page*/
  	.row .video, .row .videotext  { width: 100%;}
	.row h2 { margin:0px; }
	.icon {   text-align: center;  width: 100%; }
	.icon h2 {
		padding-left: 0;
		line-height: 27px;
  		text-align: center;
  		padding-top: 55px;
		font-size: 17px;
		}
		
	.icon h2.lightning, .icon h2.shield { background-position: top center; padding-left:0; }
	
	
	h2.lightning, h2.shield {     padding: 12px 0 12px 65px; font-size: 20px; }
	h2.lightning { background: url('../images/icon-lightning.png') 12px center no-repeat; }
	.tab, .tab.last { 
		width: 100%;
		float: left;
		font-size: 11px;
		clear: both;
		margin-bottom: 12px;

	 }
	.tab-content { 
		display: block;
		position: relative;
		float: right;
		right: 0;
		width: 70%;
		font-size: 13px;
		padding: 0;
	 }
	 
	 .tab img { width: 24%; }
	 
	h1.title {
		font-size: 1.5em;
		margin-bottom: 20px;
	}
	.one-third .sub {
	min-height: auto;
    margin-bottom: 30px;
	}
    
    #free-foot .dashed {border-right: 0;}
#free-foot .half { width: 100%; padding: 5% 0%; text-align: center; }
#free-foot h2 {  margin: 0; float: left;  clear: none;}
#free-foot a.butt {      float: none;
    margin: 15px auto 0px;
    clear: both;
    display: inline-block;
    padding: 10px;
    width: auto; }
#free-foot .half.right { padding-left:0; }
.tab img { height:auto; }
.left, .right { margin-bottom:0px; }
/*hamburger icon*/

#nav-toggle {
    width: 24px;
    height: 24px;
    position: relative;
    margin: 10px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
	float: right;
}

#nav-toggle span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: #0077C5;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0px;
}
#nav-toggle span:nth-child(2), #nav-icon span:nth-child(3) {
    top: 9px;
}
#nav-toggle span:nth-child(4) {
    top: 18px;
}

#nav-toggle.active span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#nav-toggle.active span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#nav-toggle.active span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-toggle.active span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}
	
}


@media screen and (max-width : 690px){
		.iconCenterBox {
			width: 60%;
			margin: 0 auto;
		}

}

@media screen and (max-width : 321px){
		
}