/*
RESPONSIVE MEDIA QUERIES
=============================== */

/*screen max-width 767px*/
@keyframes width-1 {
	0%{
    	bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
}
/*screen max-width 767px opera*/
@-o-keyframes width-1 {
  	0%{
    	bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
/*screen max-width 767px explorer*/
@-ms-keyframes width-1 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
/*screen max-width 767px mozilla*/
@-moz-keyframes width-1 {
    0%{
    	bottom: 0;
    	left: 0;
	}
	
	100%{
    	bottom: 0;
    	left: 0px;
	}
}
/*screen max-width 767px chrome safari*/
@-webkit-keyframes width-1 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
}

/*screen min-width 767 and max-width 966px*/
@keyframes width-2 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-o-keyframes width-2 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-ms-keyframes width-2 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-moz-keyframes width-2 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-webkit-keyframes width-2 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
}

/*screen normal dimension*/
@keyframes width-4 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-o-keyframes width-4 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-ms-keyframes width-4 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-moz-keyframes width-4 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
} 
@-webkit-keyframes width-4 {
    0%{
   		bottom: 0;
    	left: 0;
	}

	100%{
    	bottom: 0;
    	left: 0px;
	}
}

@media (min-width: 768px) and (max-width: 966px) {

    
     .side-nav:after {
       	content: 'devicescreen-tablet';
        display: none;
     }
     
     .side-nav{

		-webkit-animation: width-2 0.001s;
		 animation: width-2 0.001s;
		-o-animation: width-2 0.001s;
		-ms-animation: width-2 0.001s;
		-moz-animation: width-2 0.001s;

  	}
  	
  	div#generalContent div.office-main {
  		width: 73%;
  	}
  	
  	
}
@media only screen and (max-width: 767px) {

	#generalContent h2{
		text-align : initial;
	}
	#generalContent div[class^="parsys_column cq-colctrl-"]{
		width : 100%;		
		margin-left : auto;
		margin-right : auto;
	}

	#generalContent div[class^="parsys_column cq-colctrl-"] iframe{
		width : 90%;
		display: block;
		margin: 0px auto;
	}
	#generalContent div.utube.section embed{
		width : 100%;
	}
	#generalContent iframe{
		width : 98%;
	}
	
	#generalContent .office-main div.office-main-wrap div.office-nav,
	#generalContent div.mainBody.col2 .title.section{
	text-align : initial;
	width: 100%;
	}
	#generalContent div.office-main{
	width: 98%;
	padding: 10px;
	text-align : justify;
	}
	/* ALL COLUMN STYLES
	======================= */
	div.col-01,  div.col-02, div.col-03 {
		width: 100%!important;
		padding: 10px 10px 0px 10px!important;
	}
	div.editorialpage div.col-01{
		visibility :hidden;
	}
	/**
	*Need to have both side-nav styles. This one for responsive detection due to html5 animation
	*/
	.side-nav{
		
		margin-top: -8px;
  		-webkit-animation: width-1 0.001s;
  		animation: width-1 0.001s;
  		-o-animation: width-1 0.001s;
  		-ms-animation: width-1 0.001s;
  		-moz-animation: width-1 0.001s;  		
  	}
  	
  	/**
	*Need to have both side-nav styles.This one for override styles
	*/
  	#bo-menu div.side-nav{
		
		
  		position: relative;
  		border: none;
  		padding: initial;
  		padding-left: 12px;
  		-webkit-border-radius: 0%;
  		border-radius: 0%;
  		border-bottom: 1px solid #CCCCCC;
  		padding-top: 7px;
  		padding-bottom: 6px;  	
		background-color: #ffffff;
}

  	 .side-nav:after {
       	content: 'devicescreen';
        display: none;
     }

 	.activepage_li{
        border-bottom: none !important;
    }
    
    .activepage.header{
      	font-size: 15px;
  		font-weight: bold;
  		text-decoration: none;
  		color: #008AB0;
  	}
  	
  	#officeMenuOverlay.PopupScreen{
		position: absolute;
		display: block;
		visibility: visible;
		top: 0px;
		left: 0px;
		opacity: 0.6;
		z-index: 798;
		background-color: #000;
		width: 100%;
		
    }
 
    .editorialpage #bo-menu{
	  	position: fixed;
	  	width: 100%;
	  	z-index: 799;
	  	top: 65px;
	  	padding: 8px 0px 0px 0px;
	}
	 #bo-menu{
	  	position: fixed;
	  	width: 100%;
	  	z-index: 799;
	}
	
	#bo-menu div ul li{
		width: 99%;
	}
	
    .menubo-scrollable{
        overflow-y: auto;
  		left: 0px;
  		padding: 8px 0px 0px 0px;
  		top: 65px;
    }
    
    div.editorialpage div#bo-menu.menubo-scrollable-adjusted{
    	 top: 64px;
    }
    
    .menubo-scrollable-adjusted{
        overflow-y: auto;
        left: 0px;
        padding: 9px 0px 0px 0px;
        top: 64px;
    }
    div.editorialpage .boResponsiveMenuSectionMargins{
    	margin-top: 50px;
    }
    .boResponsiveMenuSectionMargins{
    	margin-top: 40px;
    	display: inline-block;
    	width: 100%;
    }
    .boResponsiveMenuSectionMargins.moreMargins{
    	margin-top: 70px;
    }

    div.editorialpage .boResponsiveMenuSectionMargins.moreMargins{
    	margin-top: 70px;
    }
    
    div#bo-menu li a,
    div#bo-menu .sub-side-nav.open > a{
    	background-position: right;
    	background-position-x: 99%;
    	padding-bottom: 5px;  
    	padding-top: 5px;
	}
    
     .sub-side-nav.close > a{
    	background-position: right;
    }
    body .container{
    	margin-top : 1px;
    }
    div#bo-menu .sub-side-nav > a.header.opened {
    	background-position: right;
    	background-position-x: 99%;
    }
    
    div#header {
 		height: 65px;
	}

}
@media only screen and (max-width: 966px) {
	
	.scrollLock{
  		overflow: hidden;
  	}
  	
  	 #subNavigation.PopupScreen{
		position: absolute;
		display: block;
		visibility: visible;
		top: 0px;
		left: 0px;
		opacity: 0.6;
		z-index: 1000;
		background-color: #000;
		width: 100%;
		height: 100%;
    }
    
    div.editorialpage .office-nav .scrollSubMenuEditorial{
    	overflow-y: auto;
    	overflow-x : hidden;
    	border-top-left-radius: 0px ;
    	border-top-right-radius: 0px ;
    	border: none;
    	position: initial;
    	height: 100%;
    	visibility: visible !important;
    }  	
    #closeBreadCrumb{
    	height: 25px;
    	border-top-left-radius: 6px;
    	border-top-right-radius: 6px;
    } 
	#topBreadCrumb.closed{
		display : none;
	}   
	#topBreadCrumb{
	    width: 90%;
	    z-index: 1051;
	    position: fixed;
	    background-color: #ffffff;
	    left: 5%;
	    border-radius: 6px;
	    padding-bottom: 20px;
	}
	 a#closeSubMenuResponsiveId {  	
		height: 24px;  	
		background: url("../../../hello/packaged/img/global/btnClose.png") 0 0 no-repeat;  	
		width: 15px;
		float: right;
		margin-right: 11px;
		border-radius: 6px;
  	} 
	
	li#uldropdown{
		width: 95%;
    margin-left: 10px;
    margin-top: 10px;
	}
	
	.breadCrumbTitle{
	    padding-top: 5px;
	    padding-bottom: 5px;
	    font-size: 14px;
	    font-weight: bold;
	    color: rgb(51,51,51);
	  }
	  li.blockline100 li,
	.blockline100{
		display: inline-block !important;
		width: 100%;
		margin-bottom: 5px;
	}
	.breadCrumbArrow.arrowbutton{
		display: inline-block;
		width: 20px;
		height: 20px;
		float: right;
		margin-right: 20px;
		margin-top: 2px;
	}
	
	.breadCrumbArrow.arrowbutton-open{
		display: inline-block;
		width: 20px;
		height: 20px;
		float: right;
		margin-top: -6px;
		margin-right: 10px;
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	
	.blockline100 a{
		display: inline-block;
		float: left;
	}
	
	div#breadCrumDivContainer .mCSB_scrollTools{
	    margin-top: 25px;
	}
	
	.editorialpage .office-nav{
		display : none;
	}		
	
	
}
@media  (min-width: 967px) {
	 .side-nav {
    	-webkit-animation: width-4 0.001s;
    	animation: width-4 0.001s;
		-o-animation: width-4 0.001s;
		-ms-animation: width-4 0.001s;
		-moz-animation: width-4 0.001s;
  	}
  	
}