﻿	/*Layout Section*/
	@media (max-width: 420px) and (orientation: portrait), (max-device-width: 640px) and (orientation: landscape)
/*@media all and (max-width: 400px) and (orientation: portrait) , all and  (max-width: 400px) and (device-aspect-ratio: 16/10) and (orientation: landscape)*/{
	body {
		width: 100%;
	}

	.twitter-share-button {
		position: relative;
		top: -1px;
	}

	.newsletter-signup-container {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.newsletter-signup-container span{
		padding-left: 2px;
		padding-right: 5px;
	}

	.area-field-office {
		/* display: none; */
		width: auto;
		text-align: left;
		margin-top: 0px;
		padding-left: 8px;
	}
	.office-list{
		display: none;
	}
	.area-field-office > .office-list{
		display: none;
	}	
	
	.area-field-office > .dl-arrow{
		display: none;
	}
	
	#area-field-office-header{
		width: 100%;
		float: left;
		line-height: 40px;
	}
	#area-field-office-name{
		width: 100%;		
		line-height: 20px;
	}
	
	
	#search{
		display: none;
	}
	
	.area-field-office > .dl-office-listMob{
		display: none;
		margin-left: -16px;
	}
	
	.dl-office-listMob > ul > li {
		background-color: #484848;
		border-bottom: 1px solid #666666;
		/*text-align: center;*/
		margin-left: 8px;
		padding-left: 8px;
		/*line-height: 40px;*/
		height: 60px;
	}
	
	.dl-fo-name{
		height: 40px;
		line-height: normal;
		padding-top: 5px;
	}
	
	.dl-fo-area{
		margin-top: -15px;
		height: 20px;
		line-height: normal;
	}
	
	
	.field-office-territory {
		display: none;
	}	
	.header {
		display: none;
	}

	.header > ul > li:first-child {
		display: none;
	}
	
	.header:first-child{
		display: none;
	}

	header > ul > li {
		margin-right: 0;
	}

	#top-navigation {
		display: none;
	}
	.top-nav {
		margin: -13px 0px 0px;
	}

	.top-nav li {
		font-size: 13px;
		line-height: 5px;
		padding-right: 10px;
	}
	.main-image {
		/*display: none;*/
		margin-left: 0;
		margin-top: 0;
		height: auto;
	}

	.main-image-caption {
		padding: 0;
		font-size: 1.2em;
		line-height: 20px;
	}

	.main-image > img {
		/*display: none;
		height: 200px;*/
		width: 100%;
	}

	.accreditations {
		float: left;
		margin-left: 10%;
	}
	.accreditation-image {
		height: 80px;
	}

	.social-icons {
		height: 10px;
		top: -20px;
	}

	.left-col {
		display: none;
	}
	#left-column{
		display: none;
	}
	#right-column{
		width: 100%;
	}
	
	/*HEADER*/
	
	.headerMob{
		display: none;
	}
	
	#headerMobile{
		display: inline-block;
		width: 100%;
		background-color: #333333;
		color: white;
	}
	
	#headerMobile > .headerMob{
		background-color: #333333;
		color: white;
		/* margin-top: 80px; */
		text-align: left;
		width: 100%;
		font-size: 1.3em;
		margin-top: 5px;		
	}	
	
	#headerMobile > .headerMob > ul > li > a {
		color: white;	
		font-size: 15px;
		margin-left: 8px;
	}
	
	#headerMobile > .headerMob > ul > li {
		min-height: 60px;
		border-bottom: 1px solid #666666;
		line-height: 60px;
	}	
	.submenuMob > a {
		color: white;	
		font-size: 15px;
		margin-left: 8px;
	}	
	
	.submenuMob > li{
		display: none;
		background-color: #484848;
		color: white;
		/*text-align: center;*/
		font-size: 15px;
		/*margin-top: 5px;
		margin-left: 8px;*/
		padding-left: 8px;
		border-bottom: 1px solid #666666;		
	}
	
	.submenuMob > li > a{
		background-color: #024E82;
		color: white;
	}	
	.menu-mobile-dropdown{
		float: right;
		padding: 22px;
	}
	
	.menu-mobile-dropdown-active{
		float: right;
		padding: 25px;		
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	
	#mobileLogo{
		/*background: url('../images/oh_logo_dkbkgd250Mobile.png') no-repeat 0 0;*/
		background: url('../images/scaled.png') no-repeat 0 0;
		
		height: 80px; 
		width: 40%;
		margin-left: 5px;
		float: left;
		margin-top: 10px;
	}
/* 	#menuMob{
		float: left;
		padding: 8px; 
		border: 2px solid white;
		margin-left: 10px; 
		margin-top: 10px;
		margin-bottom: 5px;
		text-align: center;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	} */
	
	#menuMob {
	  border: 2px solid white;
	  border-radius: 5px;
	  float: right;
	  margin-bottom: 10px;
	  margin-right: 17px;
	  margin-top: 8px;
	  padding: 8px;
	  text-align: center;
	  height: 14px;
	  width: 22px;
	  -webkit-box-sizing: content-box !important;
	  -moz-box-sizing: content-box !important;
	  box-sizing: content-box !important;
	}	
	
	#menuMobContainer{
		background-color: #005C91;
		margin-top: 10px;
	}
	
	#headerRight{
		float: right;
		margin-right: 15px;
		margin-top: 10px;
	}
	
	#headerRight > a{
		color: white;
	}
	
	
	#donateButton{
		padding: 10px 16px;
		background-color: #E31736;
		color: white;
		text-align: center;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;	
		margin-top: 12px;
		font-weight: bold;
	}
	.menuLine{
		height: 3px; 
		width: 100%;
		background-color: #ffffff;
		content: " ";
		float: left;
	    -webkit-box-sizing: content-box !important;
        -moz-box-sizing: content-box !important;
        box-sizing: content-box !important;
	/*transition:  transform .5s;
	-webkit-transition:  -webkit-transform .5s;	*/
	} 
    /*.menuLine::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }*/
	 /*.menuLine::before {
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	 }*/
	.menuLineActive{
		/*-webkit-transform: rotate(90deg);
		transform: rotate(90deg);*/
	}

	.menuLineTop{
		margin-bottom: 3px;
	}

	.menuLineTop.menuLineActive{
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);	
		position: relative;
		top: 6px;
		left: -4px;
		width: 125%;
	}	
	
	.menuLineBottom.menuLineActive{
		-webkit-transform: rotate(45deg);
		transform: rotate(-45deg);	
		position: relative;
		top: -6px;
		left: -4px;
		width: 125%;
	}	
	
	.menuLineMiddle.menuLineActive{
		visibility: hidden;
	}	
	.menuLineMiddle{
		margin-bottom: 3px;
	}	
	.menuLineBottom{
		margin-bottom: 3px;
	}		
	/*Search Form*/
	
		.search-form{
			display: inline-block;
			background-color: #333333;
			padding: 0px;
			position: auto;
			right: 0;
			height: auto;
		}
		
		#SearchString{
			padding: 0;
			height: 25px;
			font-size: 1.2em;
		}
		
	/*Search Form*/		
	
	#supporters {
		float: none;
		margin: auto;
		width: 100%;
	}
	
	.supporters-title{
		text-align: left;
	}
	
	#other-oh-sites {
		/*width: auto;*/
		width: 100%;
		border-bottom: 1px solid #7a7a7a;
		margin-bottom: 8px;
	}

	#other-oh-sites table{
		/*width: auto;*/
		width: 100%;
	}
	.program-logo {
		max-width: 105px;
	}

	.feature-group-container {
		overflow: hidden;
		overflow-x: scroll;
	}

	.hp-container {
		margin-left: 10px;
		margin-right: 18px;
	}	
	

	
	/*Office List Item*/
	.area-field-office{
		
	}
	/*Office List Item*/
	/*HEADER*/
	/*Layout Section*/

	.headerPartialContainer{
		margin-top: 0px;
	}
	

	.headerPartialContainerHidden{
	display: none;
	color: white;
	font-size: xx-small;
	}
	#top-of-col-photo > img {
		/*height: 200px;
		height: 100%;*/
		width: 100%;
		height: auto;
	}

	/*Footer*/
	.newsletter-signup-status {
		width: 90%;
		margin-left: 10px;
		margin-top: -60px;
		/*margin-top: -55px;*/

	}

	    #right-col-below-photo {
        margin: 0 !important;
    }

    .form-panel {
        padding: 0px !important;
    }
	.section-name { 
	    margin-left: 0px; 
	    margin-right: 0px; 
	    padding-left: 10px;
	}
	#right-column {
	    /*margin-left: 0px !important;
	    margin-right: 0px !important;*/
	}
	    .right-column {
	        padding: 0px !important;
	    }
        .container {
            margin-left: 0px !important;
            margin-right: 0px !important;
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
}

@media (min-width: 360px) and (max-width: 360px) and (orientation: portrait) {
	
	.newsletter-signup-container span {
		padding-left: 23px;
	}
    #right-col-below-photo {
        margin: 0 !important;
    }
    .form-panel {
        padding: 0px !important;
    }
    .section-name { 
        margin-left: 0px; 
        margin-right: 0px; 
        padding-left: 10px;
    }
    #right-column {
        /*margin-left: 0px !important;
	    margin-right: 0px !important;*/
    }
    .right-column {
        padding: 0px !important;
    }
    .container {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

@media (min-width: 375px) and (max-width: 375px) and (orientation: portrait) {
	
	.newsletter-signup-container span {
		padding-left: 33px;
		padding-right: 27px;
	}
    #right-col-below-photo {
        margin: 0 !important;
    }
    .form-panel {
        padding: 0px !important;
    }

    .section-name { 
        margin-left: 0px; 
        margin-right: 0px; 
        padding-left: 10px;
    }
    #right-column {
        /*margin-left: 0px !important;
	    margin-right: 0px !important;*/
    }
    .right-column {
        padding: 0px !important;
    }
    .container {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

/*  iPhone Viewports (6 Plus, 7s Plus  */
@media (min-width: 414px) and (max-width: 414px) and (orientation: portrait) {
	
	.newsletter-signup-container span {
		padding-left: 55px;
		padding-right: 22px;
	}
    #right-col-below-photo {
        margin: 0 !important;
    }
    .form-panel {
        padding: 0px !important;
    }
    .section-name { 
        margin-left: 0px; 
        margin-right: 0px; 
        padding-left: 10px;
    }
    #right-column {
        /*margin-left: 0px !important;
	    margin-right: 0px !important;*/
    }
    .right-column {
        padding: 0px !important;
    }
    .container {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}


	


	