body {
	/* Verdana-based sans serif stack */
font-family: Oswald, Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
}

/* changes to font colors, sizes and such (addtional font changes in the media queries below as well) */
h1 {
	font-size: 150px;
	color: #002e56;
	line-height: 0.9;
}
h1 span{
	color: #555;
	font-size: 100px;
}

/*new typo classes to fix the problem with heading 508 compliance*/

.smallTitles {
	font-size: 15px;
	text-transform: uppercase;
	position: relative;
	text-align: left;
	font-weight: bold;
	color:#990000;
}


.bigtitles {
	color: #002e56;
	font-size: 250px;
	text-transform: uppercase;
	position: relative;
	letter-spacing: -2px;
	text-align: left;
	line-height: 0.9;
	margin-bottom: 35px;
	padding-top: 15px;
}

.bigtitles span {
	color: #555;
	font-size: 150px;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.bigtitles {font-size: 200px;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.bigtitles {font-size: 110px;}
.bigtitles span{font-size: 80px;}
}

@media only screen and (max-width: 479px) {
.bigtitles {font-size: 80px;}
.bigtitles span{font-size: 60px;}
}



#services h1{font-size: 210px;} /* to accomodate large words like geography. for other sections, just change ID */

/*special styles for text colors on light parralax images - change makes no difference on dark images*/
.parallax h3 span{
	text-shadow: 0px 0px 11px #000;
	color: #fff;
}	

.closeout {
	margin:10px auto 10px auto;
	text-align:center;

}

/* portfolio section modifications
--------------------------------------------------------*/	

.gallerySelectorList li.current  {
	background: #000;
	border-bottom: 3px solid #fff;
}

.gallerySelectorList li:hover {
	background: #676161;
}

.gallerySelectorList li:hover a {
	color: #fff;
}

.thumbLink {
	display: block;
	width: 100%;
}
.thumbLink {
	background:#fff;
	color: #002e56;
	font-size: 20px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	opacity: 0.5;
	margin: 0 auto;
}

.thumbImage .thumbTextWrap {
	position: absolute;
	top: 0;
    height: 100%;
	opacity: 0;
	max-width: 100%;
	min-width: 100%;
	background: #000;
	text-align: center;
    transition: all 1s ease-in-out;
	-webkit-user-select: none;
}

.thumbImage .thumbText h3 {
	margin-bottom: 10px;
	padding-top: 10px;
	color: #fff;
	border-bottom: 1px solid #fff;
    transition: all 1s ease-in-out;
}
.thumbImage .thumbText p {
	margin-bottom: 10px;
	color: #fff;
	padding-left: 5px;
	padding-right: 5px;
    transition: all 1s ease-in-out;
}


/* makes all hover link classes the same color of Navy gold */
a:hover{color:#e8b010;}

nav ul li a:hover {
	color: #e8b010;
	transition: color 0.5s;
}

/* used for creating shadows on the text of large text items

#folio .small {font-size: 36px; font-weight:300; text-shadow: 250px -65px 6px rgba(0,0,0,.1);}
#folio .smallBold {font-size: 36px; font-weight:700; text-shadow: 250px -65px 6px rgba(0,0,0,.1);}
#folio .medium {font-size: 44px; text-transform: uppercase; text-shadow: 250px -65px 6px rgba(0,0,0,.1);}
#folio .mediumBold {font-size: 44px; font-weight:700; text-transform: uppercase; text-shadow: 250px -65px 6px rgba(0,0,0,.1);}
#folio .large {font-size: 56px; text-transform: uppercase; text-shadow: 250px -65px 6px rgba(0,0,0,.1);}
#folio .largeBold {font-size: 56px; font-weight:700; text-transform: uppercase; text-shadow: 250px -65px 6px rgba(0,0,0,.1);}
#folio .author {font-size: 18px; font-weight:300; text-shadow: 250px -65px 6px rgba(0,0,0,.1);}
*/

#folio {
	background: none;
	padding-top:25px;
	clear: left;
}

.closemargin{
	background: none;
	padding-top:4px;
	clear: left;
}
/* used for giving the map styles */
.map{
	background:url(/ah_online/maersk/images/gallery/map.png) center 80px no-repeat;
}

a .mapthumb:hover {
	cursor:pointer;
}

.attkmap{
	margin-top: 20px;
}	

/* stat info circle style mods (color only for now) */
.statInfo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #002e56;
    border-radius: 50%;
	text-align: center;
}

/* styles for the news accordion*/

.accTrigger {
	cursor: pointer;
	display: block;
	margin: 10px 0;
	background: #e5e5e5;
	border-radius: 6px;
	border-left: 3px solid #002e56;
}

.accTrigger.active p {
	cursor: default;
	color: #002e56; 
}

.accTrigger p {
	display: block;
	color: #222;
	outline: none;
	padding: 10px;
	text-decoration: none;
	font-size: 24px;
}

.accTrigger.alabama  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #008fff; 
}

.accTrigger.orion  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #990000;
}


.accTrigger.boxer  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #002e56;
}

.accTrigger.bainbridge  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #e8b010; 
}

.accTrigger.lifeboat  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #ff8000; 
}

.accTrigger.haly  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #585858; 
}

.accTrigger.alabama.active  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #008fff; 
}

.accTrigger.orion.active  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #990000;
}

.accTrigger.boxer.active  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #002e56;
}

.accTrigger.bainbridge.active  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #e8b010; 
}

.accTrigger.lifeboat.active  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #ff8000; 
}

.accTrigger.lifeboat.haly  {
	cursor: default;
	border-radius: 6px;
	border-left: 10px solid #585858; 
}

.accTrigger.active p{
	font-weight:bold;

	
}

.accTrigger p:hover {
	color: #990000; 
}

.accTrigger.bainbridge p .icon-location{
	color:#e8b010;
}	

.accTrigger.lifeboat p .icon-location{
	color:#ff8000;
}

.accTrigger.boxer p .icon-location{
	color:#002e56;
}

.accTrigger.orion p .icon-location{
	color:#990000;
}

.accTrigger.alabama p .icon-location{
	color:#008fff;
}

.accTrigger.haly p .icon-location{
	color:#585858;
}

.accContent p:hover{color:#990000;}

.accContent p{
	font-weight:bold;	
}

.mapaccord {
	position: absolute;
}

@media only screen and (max-width: 767px) {
	.mapaccord {position:relative;}
}


.mapaccord .accContainer{
	margin: 10px 0;
	background: #e5e5e5;
	border-radius: 6px;	
}


.accContainer .final{ 
	margin-bottom: 35px; 
	
}

.fightContainer {
	padding-bottom: 100px;
}

/* text selection highlight and text color */
::-moz-selection {background: #990000;color: white; }
::selection {background: #990000;color: white; }

/*Mods to contactContainer*/
.contactContainer {
	padding-bottom: 20px;
}
/*social media icons mods*/

.socialLinks li {
    background-color: #002e56;
    border-radius: 50% 50% 50% 50%;
    float: left;
    height: 60px;
    margin: 10px 5px;
    transition: all 0.6s ease-in-out 0s;
    width: 60px;
}
/* Media Queries copied right from the main stylesheet
--------------------------------------------------------*/

/* Smaller than standard 1199 (devices and browsers) */
@media only screen and (max-width: 1199px) {
	
	.parallax.fixed{background-attachment:scroll; background-position: center center;}
}


/* Higher than 960 (desktop devices) */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
	.teamImage h2 {margin-top: 105px; font-size:40px;}
	input[type="text"], input[type="password"], input[type="email"], textarea, select {width: 290px;}
}


/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	.small {font-size: 30px; font-weight:300;}
	.smallBold {font-size: 30px; font-weight:700;}
	.medium {font-size: 38px; text-transform: uppercase;}
	.mediumBold {font-size: 38px; font-weight:700; text-transform: uppercase;}
	.large {font-size: 50px; text-transform: uppercase;}
	.largeBold {font-size: 50px; font-weight:700; text-transform: uppercase;}
	.author {font-size: 16px; font-weight:300;}
	
}


/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	h1 {font-size: 200px;}
	#services h1 {font-size: 175px;} /* to accomodate the longer words such as geography. just change ID if needed in another section */
	.teamImage h2 {margin-top: 75px; font-size:32px;}
	input[type="text"], input[type="password"], input[type="email"], textarea, select {width: 226px;}
	.parallax.fixed{background-attachment:scroll; background-position: center center;}
	.blogTitle {margin-top: -40px;}
}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	.dropmenu { display: block; margin-top: 5px; }
	#nav {display: none;}
	#slidecaption { display:none;}
	#prevslide, #nextslide{top:120px;}
	.parallax.fixed{background-attachment:scroll; background-position: center center;}
	.logo {margin-top: 10px; transform: scale(.5);}
	#prevslide {right: 45px; transform: scale(.5);}
	#nextslide {right: 22px; transform: scale(.5);}
	.homepage {margin-bottom: -50px;}
	.thumbImage .thumbTextWrap {padding: 0 10px;}
	.thumbImage .thumbText p {font-size: 12px;}
	.thumbImage .thumbText h3 {font-size: 21px;}
	.blogTitle {margin-top: 0px;}
}


/* to attempt to handle the background video */
#ah-video_wrapper{
	position:absolute !important;
	top: 0px !important;
	left: 0px !important;
}

#ah-video1_wrapper{
	position:absolute !important;
	top: 0px !important;
	left: 0px !important;
}

#ah-video2_wrapper{
	position:absolute !important;
	top: 0px !important;
	left: 0px !important;
}			

.logo {
	position: absolute;
	z-index: 105;
	margin-top: 0;
	margin-left:-75px;

}	

/*bunch of new stuff*/
.flex-video {
	position: relative;
	padding-top: 0;
	padding-bottom: 67.5%;
	height: 0;
	overflow: hidden;
	border: 4px solid #fff;
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.25);
	box-shadow: 0px 1px 1px rgba(0,0,0,.25);
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}







/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	h1 {font-size: 110px;}
	h1 span{font-size: 80px;}
	input[type="text"], input[type="password"], input[type="email"], textarea, select {width: 418px;}
	
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	h1 {font-size: 80px;}
	h1 span{font-size: 60px;}
	.thumbImage .thumbText p {font-size: 10px;} /*to fix mobile portrait text issue on iphone*/
	.thumbImage .thumbText h3 {font-size: 14px;}/*to fix mobile portrait text issue on iphone*/
	.teamImage h2 {margin-top: 105px; font-size:40px;}
	input[type="text"], input[type="password"], input[type="email"], textarea, select {width: 298px;}

}

/* Disqus stuff
-----------------------------------------------*/
@media only screen and (min-width: 1025px){
.disqus {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		margin-bottom: 2em;
		padding: 2em;
		background-color: #FFF;
		width: 75%;
		margin-left: auto;
		margin-right: auto;
		height: 400px;
		overflow-y: scroll !important;
		box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.65);
		-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0,.65);
		-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0,.65);
		filter:alpha(opacity=100); /* For IE8 and earlier */
	}
}

@media only screen and (max-width: 1024px) {
	.disqus{
		height:auto;
		width: auto;
		background-color: #FFF;
		padding: 2em;
	}
}


/* this whole section createdfor the h3 elements 508 issue - created ayche3 class 
================================================================================*/

.parallax .ayche3 span{
	text-shadow: 0px 0px 11px #000;
	color: #fff;
}

.thumbImage .thumbText .ayche3 {
	margin-bottom: 10px;
	padding-top: 10px;
	color: #fff;
	border-bottom: 1px solid #fff;
    transition: all 1s ease-in-out;
}

@media only screen and (max-width: 767px) {
.thumbImage .thumbText .ayche3 {font-size: 21px;}
}

@media only screen and (max-width: 479px) {
.thumbImage .thumbText .ayche3 {font-size: 14px;}/*to fix mobile portrait text issue on iphone*/
}

.ayche3 {
	font-weight: 300;
	font-family: 'Oswald',sans-serif;
	color: #222;
	margin: 0 0 6px;
}

.lead{
	z-index:100;
	position:absolute;
	float:right;
	padding-left:9%;
	padding-top:33%;
}
.ayche3 {font-size: 22px; line-height: 1; color: #555;}

.lead.ayche3 {
	font-weight: 300;
	font-family: 'Oswald',sans-serif;
	color: #fff;
	margin: 0 0 6px;
}

.lead p .largeBold {
	font-size: 3.2em;
}

.lead p .medium {
	font-size: 3.2em;
}

.sectionTitle .ayche3 {
    border-bottom: 1px solid #cacaca;
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 26px 0 6px;
}

.sectionTitle .chart {
    border-bottom: 1px solid #cacaca;
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 0px 0 6px;
}

.breaking .ayche3 {
     padding: 21px 0 6px;
}	


#gallery .ayche3  {
	margin-bottom: 20px;
}


.touch-device .thumbImage .thumbText .ayche3, {
    transition: none;
}

.serviceInfo .ayche3 {
    color: #FFFFFF;
    font-size: 18px;
    margin: 0 15px;
    padding: 0 0 10px;
    text-align: center;
    text-transform: uppercase;
}

.post-title .ayche3{
	font-size: 30px;
}

#fight p a {color:#222;text-decoration:underline;}
#about p a {color:#222;text-decoration:underline;}
.charts {
	margin:0 auto;
}

 a:hover.ayche3 span{
	color:#e8b010;
	cursor: pointer;

}
/* END OF STYLES FOR 508 h3 issue ==========================================
===========================================================================*/


/*responsive styles for hidden phone and such*/

@-ms-viewport {
  width: device-width;
}


.hidden {
  display: none;
  visibility: hidden;
}

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

.visible-desktop {
  display: inherit !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

/*Removal of inline styles */
#homepage .container{
	position:static;
}

.mainVid {
	margin-top:30px;
}

#parallax-1 {
	background-image: url(../images/parallax/lcs0b.jpg);
}

#parallax-2  {
	background-image: url(../images/parallax/lcs8b.jpg);
}

#parallax-3   {
	background-image: url(../images/parallax/lcs7b.jpg);
}

#parallax-4  {
	background-image: url(../images/parallax/lcsb.jpg);
}

#parallax-5   {
	background-image: url(../images/parallax/lcs14b.jpg);
}
/* end of old inline styles*/


/* to handle the isMobile display of 360 section */
.noFlash {
	display:none;
}

/* for the header image on phones */
.phoneTopImage {
	width: 100%;
}

/* handling for LCS video issue */
html.aho_video{
	margin-top: -17.5px;
}

.embed-container{
	padding-top:0px;
}

/* handling top image sizing since custom-video-js now makes homepage the size of the pic and pic is pushed down*/
 .homepage{
 	overflow:visible;
 }