/* Large desktop */
@media (min-width: 1200px) {
	
}

@media (max-width: 1200px) {
	
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	
}

@media (max-width: 768px) {
	*{
		box-sizing:border-box;	
	}
	body{
		-webkit-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-moz-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-o-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-ms-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
	}
	
	img{
		max-width: 100%;
		height: auto;	
	}
	
	.main-menu .parent, .back_btn, .nextBtn{
		display: inline-block;	
	}
	
	/*=== nav ===*/

	body.nav_open{
		margin: 0 270px 0 -270px;
	}

	.hamburger-nav{
		position: fixed;
		display: block;
		top: 20px;
		right: 20px;
		font-size: 30px;
		cursor: pointer;
		z-index: 10000;
		-webkit-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-moz-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-o-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-ms-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		padding: 9px 11px;
		line-height: 100%;
		color:#fff;
		background-color: #00458a;
	}

	.nav_open .hamburger-nav{
		right: 290px;
	}
	
	.menu_wrapper{
		position: fixed;
		top:0;
		right: -270px;
		width: 270px;
		height: 100%;
		margin-top: 0;
		border-left: 1px solid #f2f2f2;
		-webkit-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-moz-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-o-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-ms-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		background-color: #004488;
	}
	
	.nav_open .menu_wrapper{
		right: 0;
	}

	.main-menu ul li{
		display: block;
		float: none;
		height: auto !important;
		margin-bottom: 15px;
	}
	
	.main-menu ul.level-1 > li ~ li {
		border:none;
	}
	


	.main-menu ul li a{
		font-size:15px;
		padding: 8px 15px !important;	
	}

	.nextBtn{
		display: block;
		position: absolute;
		top:0;
		right: 0;
		background-color: #b0b0b0;
		padding: 6px 16px;
		color: #fff;
	}

	.nextBtn i{
		font-size: 25px;
		float: none;
	}

	.main-menu li a{
		display: block;
		font-size: 16px;
		padding: 15px;
	}

	.main-menu li a:hover{
		background-color: transparent;
	}


	.main-menu li .level-2{
		position: fixed;
		width: 270px;
		height: 100%;
		padding: 0;
		left: inherit;
		right: -270px;
		background-color: #004488;
		top: 0;
		display: block;
		z-index: 20;
		-webkit-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-moz-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-o-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		-ms-transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
		transition: all .6s cubic-bezier(0.7,0.01,0.3,1);
	}

	.nav_open .main-menu li .level-2.subnav_active{
		right: 0;
	}
	
	.main-menu ul.level-2 li a{
		color: rgb(150, 163, 200);	
	}

	.main-menu li .parent,
	.main-menu li .back_btn{
		color:#fff;
		display: block;
		font-size: 18px;
		padding: 15px;
		font-weight:bold;
	}

	.main-menu li .back_btn{
		color:#fff;
		background-color: #002d6a;
	}

	.main-menu li .level-2 li a{
		padding: 15px;
		font-size: 16px;
	}
	
	.main-menu ul.level-2 li a:hover{
		color: #fff;	
	}

	.main-menu ul li .level-2 li{
		margin-bottom: 0;	
	}
	
	.main-menu ul li.active a{
		color: #fff;	
	}

	/*=== end of nav ===*/
	
	#headerdiv1{
		background-image: url("/images/layout/mobile-header.jpg");	
		background-color: #00458a;
		border-bottom: 1px solid #b2a06c;
		height: 100px;
	}
	
	#footerdiv{
		background-image: none;
		background-color: #00458a;	
		height: auto;
		padding-bottom: 20px;
	}
	
	#sitewrapper, .container, .span-24, div.span-24, #menudiv, #contentdiv{
		width: 100%;	
	}
	
	.douglas-logo{
		display: block;	
		margin-top: 20px;
	}
	
	.douglas-logo img{
		max-width:100%;	
	}
	
	.tinsoldier-footer-link{
		display: none;		
	}
	
	#home-content-wrapper{
		  background-position: right 40px center;
	}
	
	.hidemobile, #home-content-wrapper #leftmenudiv{
		display: none;	
	}
	
	.homeheading{
		padding: 20px 15px;
		text-transform:none;	
	}
	
	.homeheading a:hover{
		text-transform:none;	
		padding-top: 20px;
		padding-bottom: 20px;	
	}
	
	#footerdivtext{
		text-align:center;	
		width: 100%;
		padding-right: 20px;
	}
	
	.copy-right{
		float: none;	
	}
	
	#footerdiv a, #footerdiv a:hover, .copy-right{
		font-size:14px;	
	}
	
	a.homeheading{
		position: relative;
	}
	
	a.homeheading .fa{
		position: absolute;
		right: -10px;
		color: #b2a06c;
		font-size: 40px;
		top: 50%;
		margin-top: -20px;
	}
	
	#mobile-menu{
		display: block;	
	}
	
	#contentdiv{
		left: inherit;	
	}
	
	#leftmenudiv{
		right: inherit;	
		width: 100%;
	}
	
	#content-wrapper{
		background-image: none;	
	}
	
	.leftmenunavHeader, ul.leftmenunav li.act{
		display: none;	
	}
	
	#leftmenucontent{
		text-align: left;	
	}
	
	div.leftmenunav ul li a, div.leftmenunav ul li a:visited{
		padding: 8px 50px 8px 30px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 30px;
		color: #004488;
		font-weight: bold;
		text-transform: uppercase;
		/*border-bottom: 1px solid #b2a06c;*/
		text-decoration: none;
		position: relative;
	}	
	
	div.leftmenunav ul > li:not(.act){
		border-bottom: 1px solid #b2a06c;
		border-top: 1px solid #b2a06c;
	}
	
	div.leftmenunav ul > li:not(.act) ~ li{
		border-top: none;	
	}
	
	div.leftmenunav ul li a:after{
		content:"\f105";	
		font-family:"fontawesome";
		position: absolute;
		right: 30px;
		color: #b2a06c;
		font-size: 36px;
		top: 50%;
		margin-top: -28px;
	}
	
	.btt{
		display: block;
		font-size: 30px;
		color: #004389;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		float: right;
		border: 3px solid #004389;
		line-height: 1em;
		width: 36px;
		text-align: center;
		height: 36px;
		margin-right: 30px;
		cursor:pointer;
		margin-bottom: 10px;
	}
	
	.btt .fa{
		position: relative;
		top: -2px;	
	}
	
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

}
 
/* Landscape phones and down */
@media (max-width: 480px) {
	a.homeheading {
		padding-right: 25px;
		font-size: 28px;
	}
	
	a.homeheading:hover {
		font-size: 28px;
	}
	
	table td{
		display: block;
		width: 100%;	
	}
	
	table td img{
		margin: 0 26px;	
	}
}