/*
Project:  Delta Air Lines
Century of Flight
(c) Delta Air Lines.  All Rights Reserved.
*/



@font-face {
    font-family: Whitney;
    src: url("../fonts/Whitney-Book.otf") format("opentype");
}

@font-face {
    font-family: WhitneyCondensed;
    font-weight: 300;
    src: url("../fonts/WhitneyCondensed-Light.otf") format("opentype");
}

@font-face {
    font-family: WhitneyCondensed;
    font-weight: 400;
    src: url("../fonts/WhitneyCondensed-Book.otf") format("opentype");
}

@font-face {
    font-family: WhitneyCondensed;
    font-weight: 500;
    src: url("../fonts/WhitneyCondensed-Medium.otf") format("opentype");
}

@font-face {
    font-family: WhitneyCondensed;
    font-weight: 600;
    src: url("../fonts/WhitneyCondensed-Semibold.otf") format("opentype");
}

@font-face {
    font-family: WhitneyCondensed;
    font-weight: 800;
    src: url("../fonts/WhitneyCondensed-Black.otf") format("opentype");
}

:root {
    --deltadkblue: #10172d;
    --deltablue: #0b1f66;
    --deltared: #f5253e;
    --deltadkgray: #7d8388;
    --deltaltgray: #ccc;
    --white: #ffffff;
    --black: #000000;
    --ltblack: #333333;
}

body {
	background-color: var(--black);
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Whitney', verdana, arial, sans-serif;
	color: #333;
	font-size: 16px;
}

.clear { clear: both;}

.imgfade { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
.imgfade:hover {opacity: 0.5;}

img.imgFull {width: 100%;}

.alignright {text-align: right;}
.alignleft {text-align: left;}
.aligncenter {text-align: center; margin: 0 auto;}

/* MOBILE SIDENAV */

#sidenav {
	 position: fixed; 
	 /* switch "right" to "left" to switch sides: */
	 left: calc(-100vw - 10px); transition: left 0.5s;
	 top:0; bottom: 0;
	 width: 100vw; max-width: 500px; /* full screen on small screens */
	 z-index: 999999999999; box-shadow: 0 0 10px #0008;
	 background: var(--deltadkblue); color: #fff;
	 font-size:1.5em;
	 
	 display: grid; grid-template-rows: auto auto 1fr auto;
	 
 }
 #sidenav.active { left: 0; } /* switch "right" to "left" */
 #sidenav-header { width: 100%; display:grid; grid-template-columns: 160px auto; align-items:center; column-gap: 10px; margin: 0; background-color:var(--deltadkblue); padding: 20px 0 20px 0;}
 #sidenav-header img { display: block; width:60px; margin: 0px 0 0 20px;}
 #sidenav-title {font-size: 18px; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; margin: 0; padding: 0; margin: 30px auto; text-align: center;}
 .sidenavHeading {margin: 0 0 0 20px; font-size: 1.2rem; color: var(--deltared);}
 
 #sidenavLinks { 
	 padding: 10px 0 0 0; 
	 /* add some bottom padding to allow scrolling lower */ 
	 padding-top: 30px;
	 padding-bottom: 120px;  
	 margin: 0px 0 0 0px; 
	 overflow: auto; 
	 border-top: 1px solid #444; 
 }
 #sidenav ul {margin: 10px 0 10px 10px; padding: 0;}
 #sidenav li { list-style-type: none; border-bottom: 0px solid #444; margin: 0; padding: 5px 2rem; font-size: 1rem;}
 
 #sidenav a, #sidenav a:visited, #sidenav a.active { color: var(--white,white); text-decoration: none; }
 #sidenav-close { 
	 /* reposition within the sidenav as needed */
	 position: absolute; 
	 top: 20px; right: 20px; 
	 cursor: pointer; 
	 font-size:1em;
	 transition: all 0.2s; 
	 color: var(--wso-blue);
 }
 #sidenav-close:hover, #sidenav-close:active { color: var(--wso-blue); text-shadow: 2px 2px 8px #0008; transform: translate(-2px, -2px); }
 #sidenav-footer { position:absolute; bottom:0; left:0; right:0; height: 100px; display: flex; justify-content: center; align-items: center; background: var(--wso-ltblack); font-size: 12px;}

/* TEXT */
	.textdkgray {color: var(--deltadkgray);}
	.textltgray {color: var(--deltaltgray);}
	.textred {color: var(--deltared);}
	.textwhite {color: var(--white);}
	
	.textFeature {font-size: 1.5rem; line-height: 1.5;}
	.textFeature2 {font-size: 1.2rem; line-height: 1.5;}

/* LINKS */

	a {cursor: pointer !important;}
	a:hover {cursor: pointer !important;}
	
	a.topnav {font-family: 'WhitneyCondensed', sans-serif; letter-spacing: 1px; font-size: 1rem; color: var(--white); text-decoration: none; font-weight: 600; text-transform: uppercase;}
	a.topnav:visited {text-decoration: none;}
	a.topnav:hover {border-bottom: 3px solid var(--deltared); padding-bottom: 8px;}
	
	a.active {border-bottom: 3px solid var(--deltared); padding-bottom: 8px;}

/* HEADINGS */

	h1.maintitle {font-size: 5rem; line-height: auto; margin: 20px 0;}
	h2.subtitle {font-size: 2.5rem; line-height: auto; margin: 20px 0 40px 0;}
	
	h3.blocktitle {text-transform: uppercase; font-size: 1.4rem; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; line-height: auto; letter-spacing: 1px; padding: 20px 0;}
	h4.blocktitle {text-transform: uppercase; font-size: 1.2rem; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: 1px; padding: 10px 0;}
	h4.blocktitle2 {text-transform: uppercase; font-size: 1.2rem; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; line-height: 1.4rem; margin: 0; padding: 0; letter-spacing: 1px;}
	
/* BUTTONS */

	button.buttonRed {font-size: 20px; color: #fff; background-color: #f5253e; padding: 20px 50px; text-transform: uppercase; border: 0px; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 400; letter-spacing: 1px;}
	button.buttonRed:hover {background-color: #0b1f66; color: #fff; text-decoration: none; cursor: pointer;}
	
	button.buttonRed2 {font-size: 20px; color: #fff; background-color: #f5253e; padding: 10px 40px; text-transform: uppercase; border: 0px; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 400; letter-spacing: 1px;}
	button.buttonRed2:hover {background-color: #0b1f66; color: #fff; text-decoration: none; cursor: pointer;}
	
	button.buttonRed3 {font-size: 16px; color: #fff; background-color: #f5253e; padding: 10px 20px; text-transform: uppercase; border: 0px; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 400; letter-spacing: 1px;}
	button.buttonRed3:hover {background-color: #0b1f66; color: #fff; text-decoration: none; cursor: pointer;}
	
	button.buttonWhite1 {font-size: 1rem; color: var(--white); background-color: var(--deltadkblue); padding: 15px 50px; text-transform: uppercase; border: 2px solid var(--white); font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 400; letter-spacing: 1px;}
	button.buttonWhite1:hover {background-color: var(--white); color: var(--deltadkblue); text-decoration: none; cursor: pointer;}
	
	a.buttonExplore {display: block; padding: 20px 30px; text-align: center; background-color: var(--deltared); color: #fff; text-transform: uppercase; border: 0px; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; letter-spacing: 1px; font-size: 1rem;  text-decoration: none;}
	a.buttonExplore:visited {display: block; padding: 20px 30px; text-align: center; background-color: var(--deltared); color: #fff; text-transform: uppercase; border: 0px; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; letter-spacing: 1px; font-size: 1rem;  text-decoration: none;}
	a.buttonExplore:hover {cursor: pointer; background-color: var(--deltablue);}
	
/* LIGHTBOX */

	.lightbox {display: none; padding: 30px 50px; border: 5px solid #4b69b1; margin: 0 0 25px 0;}
	h1.lbtitle {margin: 0; padding: 0;}
	.lbcontent {margin: 20px 0 0 0; padding: 0;}	
	
/* HEADER */
	.headerWrapper {position: fixed; top: 0; z-index: 99999; width: 100%;}
	.headerContainer {width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 100px auto 200px; transition: .2s all; height: 60px;}
	.headerLogo {width: 100px; margin: 20px 0 0 0;}
	.headerLogo-holder {position: absolute; width: 100px; transition: .2s all;}
	.headerLogo img {width: 100px; transition: .2s all;}
	
	.headerTopnav-mobile {display:none;}
	
	.headerTopnav {text-align: right; margin: 20px 20px 0 0;}
	.headerTopnav a {margin: 0 20px;}
	
	.scrolled .headerWrapper {background-color: var(--deltadkblue);}
	.scrolled .headerContainer {background-color: var(--deltadkblue);}
	.scrolled .headerLogo-holder {background-color: var(--deltadkblue); text-align: center; width: 80px; padding: 0 0 10px 0;}
	.scrolled .headerLogo img {width: 60px; margin: 0 0 0 0;}
	
	.content-headerWrapper {position: fixed; top: 0; z-index: 99999; width: 100%;  transition: .2s all;}
	
	.scrolled .content-headerWrapper {background-color: var(--deltadkblue);}
	
	.sectionpicContainer {width: 100%; background: var(--deltadkblue) url('/images/header-contentbg-1.jpg') no-repeat top; height: 250px; min-height: 250px;}
	.contentHeader-coflogo {width: 90%; max-width: 1440px; margin: 0 auto; text-align: right;}
	.coflogo-holder {width: 100%; text-align: right; padding: 90px 0 0 0;}
	.coflogo-holder img {width: 90px; }
	
/* FOOTER */

	.footerBlueBar {width: 100%; height: 275px; min-height: 275px; background: #000 url('/images/footer-bluebar.jpg') no-repeat top right;}

	.wrapperFooter {width: 100%; background-color: var(--black); padding: 80px 0;}
	.containerFooter {width: 90%; margin: 0px auto; padding: 0px 0 50px 0; display: grid; grid-template-columns: 1.5fr 1fr; align-items: center;}
	.holderFooterLinks {width: 100%; margin: 20px auto; display: grid; grid-template-columns: auto auto auto; }
	.footerLinks {margin: 0 0px 0 0px;}
		.footerLinks ul {list-style-type: none; margin: 30px 0 0 0; padding: 0;}
		.footerLinks li {margin: 6px 0 0 0; padding: 0; font-size: 1rem;}
	a.footerlink {color: #fff; text-decoration: none;}
	a:visited.footerlink {color: #fff; text-decoration: none;}
	a:hover.footerlink {color: var(--deltared); text-decoration: none;}
	
	.footerLogos {text-align: right;}
	
	.copyright {width: 90%; margin: 0 auto; font-size: .8rem; text-align: left;}
	
/* LAYOUT */
	
	.fpHero-wrapper {width: 100%; height: 1230px; min-height: 1230px; background: #fff url('/images/fp-hero-bg1.jpg') no-repeat top; background-size: cover; position: relative; z-index: 8888;}
	.fpPlayer-container {width: 100%; max-width: 1440px; position: absolute; top: 175px; left: 50%; transform: translate(-50%, 0%);}
	.fpPlayer-image {width: 100%;}
	.fpPlayer-image img {width: 100%;}
	.fpPlayer-clockholder {position: absolute; top: 70%; left: 50%; transform: translate(-50%, 0%); text-align: center;}
	.fpPlayer-clocktimer {background-color: #000; padding: 10px 20px; text-align: center; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; letter-spacing: 1px; color: #fff; font-size: 1.4rem; margin: 5px 0;}
	.fpPlayer-clocklabel {text-align: center;}
	
	.fpPlayer-watchbuttons {position: absolute; top: 70%; left: 50%; transform: translate(-50%, 0%); text-align: center;}
	.m-fpPlayer-watchbuttons {display: none;}
	
	.m-fpPlayer {display: none;}
	.m-fpPlayer-clockholder {display: none;}
	.m-fpPlayer-image {display: none;}
	
	.fpSect2-wrapper {width: 100%; background-color: var(--deltadkblue); padding: 20px 0;}
	.fpSect2-container {width: 80%; margin: 0 auto}
	.contentGrid-1-1 {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; width: 100%; margin: 50px auto; align-items: center;}
	.contentGrid-1-1-top {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; width: 100%; margin: 50px auto;}
	.contentGrid-top {align-items: top;}
	
	.quote-wrapper {width: 100%; padding: 80px 0; background: var(--deltadkblue) url('/images/flydelta-bg.jpg') no-repeat top;}
	.quoteicon {font-family: 'PT Serif', times, serif; font-size: 20rem; color: #418fde; position: absolute; top: 100px; left: -200px;}
	.quoteicon2 {font-family: 'PT Serif', times, serif; font-size: 20rem; color: #418fde; position: absolute; bottom: 0px; right: -150px;}

	.quote-holder {width: 50%; max-width: 1440px; margin: 0 auto; font-size: 1.6rem; font-weight: 400; line-height: 2.2rem; color: var(--white); position: relative;}
	.quote-person {margin: 30px 0 0 0;}
	
	.pageContainer {border-top: 50px solid var(--deltadkblue); background-color: var(--deltadkblue);}
	
/* VIDEO GLOBAL */
	
	.videoHolder {width: 100%; }
	.video-container-yt { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
	.video-container-yt iframe, .video-container-yt object, .video-container-yt embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
/* TABS */
	.tabs-nav {width: 100%;}
	.tabNav {display: inline-block; width: 30%; text-align: center; font-size: 14px; font-weight: bold;  padding: 10px 1%; background-color: #d8d8d8;}
	.tabactive {background-color: #f2f2f2;}
	.tabcontent {padding: 20px; background-color: #f2f2f2;}


@media only screen and (max-width: 1440px) {
.headerWrapper {position: fixed; top: 0; z-index: 99999; width: 100%; background: var(--deltadkblue) url('/images/m-headerbg.jpg') no-repeat top; height: 175px; min-height: 175px; transition: .2s all;}
.content-headerWrapper {position: fixed; top: 0; z-index: 99999; width: 100%; transition: .2s all;}
.headerLogo {margin: 20px 0 0 20px;}

.pageContainer {border-top: 50px solid var(--deltadkblue);}

.scrolled .headerWrapper {background-image: none; height: 60px; min-height: 60px;}
.scrolled .content-headerWrapper {background-image: none; height: 60px; min-height: 60px;}

.fpHero-wrapper {display: none;}

.m-fpPlayer {width: 100%; display: block; border-top: 175px solid var(--deltadkblue); position: relative;}
.fpPlayer-clockholder {top: 47%; }
.fpPlayer-watchbuttons {top: 48%;}
.audienceHolder {width: 100%;}
.audienceHolder img {width: 100%;}

.footerBlueBar {width: 100%; height: 150px; min-height: 150px; background: #000 url('/images/footer-bluebar.jpg') no-repeat top right; background-size: cover;}

}

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



}

@media only screen and (max-width: 1023px) {
.fpPlayer-clockholder {top: 45%;}
.fpPlayer-clocktimer {font-size: 1rem; }
h4.blocktitle2 {font-size: 1rem;}

.fpPlayer-watchbuttons {top: 48%; width: 100%;}

.contentGrid-1-1 {display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 60px; width: 100%; margin: 50px auto; align-items: center;}
.gridContent-text {order: 0;}
.gridContent-photo {order: 1;}

.contentGrid-1-1-top {display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 60px; width: 100%; margin: 50px auto;}

	@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	
	}

}

@media only screen and (max-width: 767px) {
.headerContainer {width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 100px auto; transition: .2s all; height: 60px;}
.headerExplore {display: none;}

.headerTopnavLinks {display: none;}
.headerLogo-holder {width: 80px;}
.headerLogo img {width: 80px;}

.headerTopnav-mobile {display: block; color: #fff; font-size: 1.4rem; margin: -4px 0 0 0;}

.fpPlayer-clockholder {display: none;}
.fpPlayer-image {display: none;}
.fpPlayer-watchbuttons {display: none;}

.m-fpPlayer-image {display: block; width: 100%;}
.m-fpPlayer-image img {width: 100%;}

.m-fpPlayer-clockholder {display: block; width: 100%; background-color: var(--deltadkblue); padding: 20px 0; text-align: center; color: #fff;}
.fpPlayer-clocktimer {background-color: none; padding: 10px 20px; text-align: center; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; letter-spacing: 1px; color: #fff; font-size: 2rem; margin: 5px 0;}

.m-fpPlayer-watchbuttons {display: block; width: 100%; background-color: var(--deltadkblue); padding: 20px 0; text-align: center; color: #fff;}

.footerBlueBar {width: 100%; height: 100px; min-height: 100px; background: #000 url('/images/footer-bluebar.jpg') no-repeat top right; background-size: cover;}

.quote-wrapper {width: 100%; padding: 80px 0; background: var(--deltadkblue) url('/images/flydelta-bg.jpg') no-repeat top;}
.quoteicon {font-family: 'PT Serif', times, serif; font-size: 12rem; color: #418fde; position: absolute; top: 0px; left: -80px;}
.quoteicon2 {font-family: 'PT Serif', times, serif; font-size: 12rem; color: #418fde; position: absolute; bottom: 0px; right: -80px;}

.quote-holder {width: 60%; max-width: 1440px; margin: 0 auto; font-size: 1.2rem; font-weight: 400; line-height: 1.8rem; color: var(--white); position: relative;}
.quote-person {margin: 30px 0 0 0;}

.containerFooter {width: 90%; margin: 0px auto; padding: 0px 0 50px 0; display: grid; grid-template-columns: 1fr; grid-row-gap: 60px; align-items: center;}
.footerLogos {text-align: left;}

.holderFooterLinks {width: 100%; margin: 20px auto; display: grid; grid-template-columns: 1fr; grid-row-gap: 30px; }

h2.subtitle {font-size: 2.2rem; line-height: auto; margin: 20px 0 40px 0;}
	
h3.blocktitle {text-transform: uppercase; font-size: 1.2rem; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; line-height: auto; letter-spacing: 1px; padding: 20px 0;}
h4.blocktitle {text-transform: uppercase; font-size: 1.0rem; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: 1px; padding: 10px 0;}
h4.blocktitle2 {text-transform: uppercase; font-size: 1rem; font-family: 'WhitneyCondensed', verdana, arial, sans-serif; font-weight: 600; line-height: 1.4rem; margin: 0; padding: 0; letter-spacing: 1px;}

}

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