/*** BODY + ELEMENTS ***/
HTML{-webkit-text-size-adjust: 100%; /* https://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landscape */}
HTML,BODY{margin: 0px; padding: 0px; background: #fff}
H1,H2,H3,H4,H5,DIV,TABLE,TR,TH,TD,P,SPAN,A,UL,OL,LI,PICTURE,IMG,FORM,FIELDSET,INPUT,TEXTAREA,SELECT,OPTION,TABLE,TR,TD{color: #000; font-family: 'Roboto', Arial, sans-serif; font-size: 0px; line-height: 0px; font-weight: normal; margin: 0px; padding: 0px}
IMG, FIELDSET, INPUT{border: none}
UL{list-style-type: none}
TABLE{border-spacing: 0px; border-collapse: collapse}

:root{--border-color: #d0d0d0}

/*** FONTS ***/
H1, H1 SPAN, H2, H2 SPAN, H3, H3 SPAN, H4, H4 SPAN{color: #0070a8; font-size: 28px; line-height: 34px; letter-spacing: -1px; padding: 0px 0px 20px 0px}
H1, H1 SPAN{font-size: 32px; line-height: 38px}
H2{padding-top: 20px}
H2.no-padding{padding-top: 0px}
H2.border-top{margin-top: 50px; padding-top: 45px; border-top: solid 5px #e8e8e8}

H3{color: #000; font-size: 22px; line-height: 28px; padding: 10px 0px 10px 0px}
H4, H4 SPAN{color: #303030; font-size: 18px; line-height: 18px; font-weight: bold; letter-spacing: 0px; padding: 10px 0px 10px 0px}


P.main, P.main SPAN, P.main A, P.main-strong{color: #404040; font-size: 16px; line-height: 24px}
P.main SPAN.italic{font-style: italic}
P.main STRONG{color: #303030}
P.main A, P.main SPAN.link{color: #3366bb; cursor: pointer}
P.main SPAN.link:hover{text-decoration: underline}
P.main{padding: 0px 0px 20px 0px}
P.main-strong, P.main STRONG, P.main STRONG SPAN{font-weight: bold}


/*** LATO TYPEFACE ***/
@font-face{font-family: 'LatoLatinWebLight'; src: url('../fonts/LatoLatin-Light.eot'); src: url('../fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/LatoLatin-Light.woff2') format('woff2'), url('../fonts/LatoLatin-Light.woff') format('woff'), url('../fonts/LatoLatin-Light.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility}
H1.lato, H2.lato, H2.lato A, H3.lato, H3.lato A, P.lato, P.lato A, P.lato SPAN, P.lato STRONG, TH{font-family: 'LatoLatinWebLight', sans-serif !important; color: #000; font-size: 26px; line-height: 34px; letter-spacing: 0px}
H2.lato A, H3.lato A, P.lato A{color: #3366bb; text-decoration: none}
H2.lato A:hover, H3.lato A:hover, P.lato A:hover{text-decoration: underline}
P.lato SPAN{font-style: italic}
P.lato{padding: 0px 0px 30px 0px}


/*** FONTS: BULLETS / INDENTS ***/
DIV.dash-bullet{padding: 10px 0px 25px 0px}
DIV.dash-bullet P:last-child, DIV.dash-bullet P SPAN:last-child{padding-bottom: 0px}

P.dash, P.dash A, P.dash SPAN{color: #303030; font-size: 16px; line-height: 22px}
P.dash A{color: #3366bb; text-decoration: none}
P.dash A:hover{text-decoration: underline}
P.dash SPAN.italic{font-style: italic}
P.dash{padding: 0px 0px 10px 20px; background: url(../images/backgrounds/bg-dash.png) no-repeat 0px 9px}
P.dash-margin{margin: 0px 0px 0px 25px}
P.dash STRONG, P.dash STRONG SPAN{font-weight: bold}

P.bullet, P.bullet-link, P.bullet A, P.bullet SPAN{color: #303030; font-size: 16px; line-height: 22px}
P.bullet-link, P.bullet A{color: #0070a8; text-decoration: none; cursor: pointer}
P.bullet-link:hover, P.bullet A:hover{text-decoration: underline}
P.bullet SPAN.italic{font-style: italic}
P.bullet{padding: 0px 0px 12px 25px; background: url(../images/backgrounds/bg-bullet.png) no-repeat 0px 7px}

P.bullet SPAN.dash{padding: 0px 0px 8px 20px; display: block; background: url(../images/backgrounds/bg-dash.png) no-repeat 0px 9px}
P.bullet STRONG, P.bullet STRONG SPAN{font-weight: bold}

P.indent, P.indent A{color: #303030; font-size: 16px; line-height: 22px}
P.indent A{color: #3366bb; text-decoration: none}
P.indent A:hover{text-decoration: underline}
P.indent{padding: 0px 0px 12px 25px}
P.indent STRONG, P.indent STRONG SPAN{font-weight: bold}


/*** NUMBERED / ORDERED LISTS ***/
OL{margin: 0px 0px 25px 0px; padding: 0px 0px 0px 20px}
OL LI, OL LI A, OL LI SPAN.link{color: #303030; font-size: 16px; line-height: 22px}
OL LI A, OL LI SPAN.link{color: #3366bb; text-decoration: none; cursor: pointer}
OL LI A:hover, OL LI SPAN.link:hover{text-decoration: underline}
OL LI{padding: 0px 0px 12px 10px}
OL LI:last-child{padding-bottom: 0px}


/*** COMMON CLASSES ***/
#body .border{text-decoration: none; border: none; cursor: pointer; transition: background-size .2s; background: linear-gradient(to bottom, #0070a8 0%, #0070a8 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 1px 1px}
#body .border:hover{color: #fff; background-size: 4px 26px}

#body .clear{width: 100%; clear: both; font-size: 0px; line-height: 0px}
#body .black{color: #101828}

#body .margin-bottom-zero{margin-bottom: 0px}

#body .padding-bottom-zero{padding-bottom: 0px}
#body .padding-bottom-twenty{padding-bottom: 20px}
#body .padding-bottom-twenty-five{padding-bottom: 25px}
#body .padding-bottom-thirty{padding-bottom: 30px}
#body .padding-bottom-forty{padding-bottom: 40px}
#body .padding-top-ten{padding-top: 10px}
#body .padding-top-twenty{padding-bottom: 20px}


/*** HEADER ***/
#header{height: 126px; border-bottom: solid 1px var(--border-color)}	
#logo{width: 470px; height: 106px; display: block; position: absolute; left: 0px; top: 10px; background: url(../images/header.png)}
#logo SPAN{display: none}


/*** CONTAINER ***/
DIV.container{width: 90%; max-width: 1400px; margin: 0px auto; position: relative}
DIV.container-inner{max-width: 1200px; padding: 50px 0px 30px 0px}
DIV.container-inner-single-column{max-width: 950px; padding: 50px 0px 30px 0px}
DIV.container-no-padding{padding-bottom: 0px}


/*** HEADER: ICONS ***/
#nav-icons{height: 126px; cursor: pointer; position: absolute; right: 0px}
#nav-icons LI, #nav-icons #icon-menu-wrapper{float: right; border-left: solid 1px var(--border-color)}
#nav-icons LI.home{border-right: solid 1px var(--border-color)}
#nav-icons LI A, #nav-icons LI P{text-decoration: none; height: 27px; padding: 49px 35px 50px 35px; display: block; transition: .3s ease-in-out}
#nav-icons LI A:hover, #nav-icons LI P:hover{background: #e2f8ff}


/*** HEADER: HAMBURGER MENU ICON ***/
#icon-menu-wrapper{display: none; height: 17px; padding: 54px 30px 55px 30px; border: none; border-right: solid 1px var(--border-color); transition: .3s ease-in-out}
DIV.icon-menu-wrapper:hover{background: #e2f8ff}

#icon-menu{width: 25px; height: 16px; position: relative}
DIV.icon-menu-inner{width: 25px; height: 2px; background: #000}
DIV.icon-menu-inner-2{margin: 4px 0px 4px 0px}
			
DIV.icon-menu-wrapper-active DIV.icon-menu-inner{position: absolute; left: 0px; top: 7px; transition: .3s ease-in-out; background: #ff0000}
DIV.icon-menu-wrapper-active DIV.icon-menu-inner-1{-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg)}
DIV.icon-menu-wrapper-active DIV.icon-menu-inner-3{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg)}
DIV.icon-menu-wrapper-active DIV.icon-menu-inner-2{display: none}


/*** HEADER: LOGIN ***/
#modal{width: 100%; height: 100%; position: fixed; z-index: 999; display: none; background-color: rgba(255,255,255,0.7)}

#login{width: 250px; margin: 150px auto 0px; padding: 30px; z-index: 100; position: relative; background: #265986}
#login IMG.cursor-pointer{cursor: pointer}
#login IMG.bg-login-or{margin: 25px 0px 20px 0px}

#login P, #login P SPAN{color: #fff; font-size: 16px; line-height: 22px}
#login P SPAN{color: #fff; font-weight: bold}

#login P.login-register{padding: 0px 0px 10px 0px}
#login P.login-dialogue{font-size: 16px; line-height: 22px; padding: 5px 0px 10px 0px; display: none}
#login INPUT{font-size: 16px; line-height: 16px; width: 238px; margin-bottom: 15px; padding: 5px; border: solid 1px #fff; background: #fff}

#login DIV.login-button{width: calc(250px - 4px); height: 44px; margin-top: 20px; border: solid 2px #fff; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
#login DIV.login-button P{font-family: 'LatoLatinWebLight'; color: #fff; font-size: 18px; line-height: 18px}

#login-throbber{margin: 10px auto 5px; display: none}
DIV.spinner{font-size: 10px;  text-align: center; width: 50px; height: 40px; cursor: wait}
.spinner > div{width: 6px; height: 100%; display: inline-block; background-color: #fff; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out}
.spinner .rect2{-webkit-animation-delay: -1.1s; animation-delay: -1.1s}
.spinner .rect3{-webkit-animation-delay: -1.0s; animation-delay: -1.0s}
.spinner .rect4{-webkit-animation-delay: -0.9s; animation-delay: -0.9s}
.spinner .rect5{-webkit-animation-delay: -0.8s; animation-delay: -0.8s}
@-webkit-keyframes sk-stretchdelay{0%, 40%, 100% {-webkit-transform: scaleY(0.4) ;transform: scaleY(0.4)}  20%{-webkit-transform: scaleY(1.0); transform: scaleY(1.0)}}
@keyframes sk-stretchdelay{0%, 40%, 100% {-webkit-transform: scaleY(0.4); transform: scaleY(0.4)} 20%{-webkit-transform: scaleY(1.0); transform: scaleY(1.0)}}

#login-close{width: 34px; height: 34px; border: solid 2px #fff; border-radius: 50%; position: absolute; right: -18px; top: -18px; z-index: 1001; cursor: pointer; background: #265986}
#login-close DIV{width: 2px; height: 22px; position: absolute; left: 16px; top: 6px; transition: all 0.5s; background: #fff}
#login-close DIV.close-1{-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg)}
#login-close DIV.close-2{-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg)}							


/*** HEADER: SEARCH ***/
#search{text-align: center; width: calc(100% - 62px); padding: 70px 30px 45px 30px; border: solid 1px var(--border-color); border-top: none; border-bottom: none; display: none; position: absolute; left: 0px; top: 127px; z-index: 50; overflow: hidden; box-shadow: 0px 5px 2px -2px #c8c8c8; background: #fff}					
#search INPUT.search-query{font-family: 'LatoLatinWebLight'; font-size: 28px; line-height: 28px; width: 50%; padding: 10px; border: solid 1px var(--border-color); background: #fff}
#search INPUT.search-query::-webkit-input-placeholder{color: #888; opacity: 1}
#search INPUT.search-query:-ms-input-placeholder{color: #888; opacity: 1}
#search INPUT.search-query::placeholder{color: #888; opacity: 1}

#search P.header{font-size: 22px; line-height: 22px; margin: 40px auto 30px}

#top-searches{max-width: 700px; margin: 0px auto}
#top-searches FORM.top-searches{margin: 0px 0px 20px 0px; padding: 0px; width: 33%; display: inline-block}
#top-searches FORM.top-searches INPUT{font-size: 16px; line-height: 22px; padding: 0px}
#top-searches FORM.left{text-align: left}
#top-searches FORM.center{text-align: center}
#top-searches FORM.right{text-align: right}


/*** MAIN NAV ***/
#nav{width: 100%; height: 50px; border-bottom: solid 1px var(--border-color)}
#nav UL{text-align: justify}
#nav UL:after{content: ""; width: 100%; display: inline-block}
#nav UL LI{display: inline-block} 
#nav UL LI.login, #nav UL LI.account{display: none} 
#nav UL A.top-nav{font-size: 16px; line-height: 16px; text-decoration: none; height: 34px; padding: 18px 0px 0px 0px; display: block; cursor: pointer; position: relative}


/*** NAV SUB ***/
#nav-sub{width: 100%; border-bottom: solid 1px var(--border-color); padding: 20px 0px 15px 0px}
#nav-sub P, #nav-sub P A{font-size: 14px; line-height: 14px; text-align: right}


/*** BACK TO TOP ***/
#back-to-top{padding: 25px 0px 25px 0px; height: 50px; border: solid 1px var(--border-color); border-left: none; border-right: none}
#back-to-top P{color: #fff; font-size: 14px; line-height: 14px; font-weight: bold; text-align: center; width: 50px; height: 25px; margin: 0px auto; padding: 25px 0px 0px 0px; cursor: pointer; border-radius: 25px; transition: .3s ease-in-out; background: #265986 url(../images/backgrounds/bg-back-to-top.png) no-repeat center 12px}
#back-to-top P:hover{background: #1b6ebe url(../images/backgrounds/bg-back-to-top.png) no-repeat center 12px}	
	
	
/*** FOOTER ***/
#footer{padding: 30px 0px 40px 0px; clear: both}
P.footer-link{line-height: 20px; text-align: center}
P.footer-link A, P.footer-link SPAN{font-size: 16px; line-height: 16px}	
P.footer-link SPAN{margin: 0px 10px 0px 10px}

P.copyright{font-size: 14px; line-height: 19px; text-align: center; padding: 10px 0px 15px 0px}
P.design-credit A{font-size: 14px; line-height: 14px}
P.design-credit{text-align: center}


/*** HOME BANNER ***/
#banner{border-bottom: solid 1px var(--border-color)}
#banner PICTURE, #banner IMG{width: 100%; height: auto; aspect-ratio: attr(width) / attr(height)}


/*** HOME INTRO ***/
#home-intro{padding: 60px 0px 60px 0px}
#home-intro DIV.container{text-align: center; max-width: 1300px}
#home-intro H1{color: #0070a8; font-size: 40px; line-height: 52px; letter-spacing: -1px; max-width: 1200px; margin: 0px auto; padding: 0px 0px 50px 0px}
#home-intro P{color: #0070a8; font-size: 20px; line-height: 32px; max-width: 1050px; margin: 0px auto; padding: 0px}


/*** HOME ICONS  ***/
#home-icons{text-align: center; border: solid 1px var(--border-color); border-left: none; border-right: none}
#home-icons DIV.container{max-width: 1300px; border-right: solid 1px var(--border-color); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex}
#home-icons DIV.placeholder{width: calc(33.33% - 1px); padding: 50px 0px; border-left: solid 1px var(--border-color)}

#home-icons DIV.placeholder P.header{color: #303030; font-size: 18px; line-height: 18px; font-weight: bold; padding: 0px 25px 0px 25px}
#home-icons DIV.placeholder P.text{color: #303030; font-size: 16px; line-height: 24px; padding: 0px 30px 35px 30px}
#home-icons DIV.placeholder P.link A{font-size: 14px; line-height: 22px; letter-spacing: 1px; text-transform: uppercase}
#home-icons DIV.placeholder IMG{width: 120px; height: auto; aspect-ratio: attr(width) / attr(height); margin: 30px auto}


/*** HOME FEATURED ARTICLE  ***/
#home-featured-article{border-bottom: solid 1px var(--border-color); background-image: url(../images/backgrounds/abstract.png); background-position: left bottom; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover}
#home-featured-article DIV.container{max-width: 1280px; padding: 85px 0px 90px 0px}

#home-featured-article P.quote{color: #202020; font-size: 60px; line-height: 76px; font-weight: bold; letter-spacing: -1px; padding: 0px 0px 0px 120px; background: url(../images/backgrounds/quote-dark.png) no-repeat 0px 5px}
#home-featured-article P.text{font-size: 34px; line-height: 44px; letter-spacing: -1px; padding: 50px 0px 55px 120px}
#home-featured-article P.learn-more{padding-left: 120px}
#home-featured-article P.learn-more A{font-size: 22px; line-height: 22px}


/*** HOME NEWS  ***/
#home-news{padding: 80px 0px 80px 0px; background: #fff}
#home-news DIV.container{max-width: 1300px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex}

SPAN.arrow-container{width: 26px; height: 14px; position: absolute; right: 0px; overflow: hidden}
SPAN.arrow{width: 26px; height: 2px; position: absolute; background: #0070a8}
SPAN.arrow-1{left: 0px; top: 6px}
SPAN.arrow-2{left: 2px; top: 15px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg)}
SPAN.arrow-3{left: 2px; top: -4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg)}

DIV.home-news-left{width: 220px; padding: 0px 0px 0px 20px}
DIV.home-news-left H2, DIV.home-news-left H2 SPAN{font-size: 40px; line-height: 54px}
DIV.home-news-left H2 SPAN{display: block}

A.home-news-article{text-decoration: none; width: calc(50% - 201px); padding: 5px 40px 65px 40px; border-left: solid 1px var(--border-color); position: relative}
A.home-news-article P.news-title{color: #202020; font-size: 22px; line-height: 30px; font-weight: bold; padding-bottom: 25px}
A.home-news-article P.main{font-size: 16px; line-height: 24px; padding: 0px}
A.home-news-article P.news-link{color: #0070a8; font-size: 14px; line-height: 14px; font-weight: bold; padding-right: 40px; position: absolute; left: 40px; bottom: 10px; display: inline-block; transition: all .3s ease}
A.home-news-article P.news-link SPAN.arrow-container{top: -1px}
A.home-news-article:hover P.news-link{padding-right: 45px}


/*** HOME SUMMARY  ***/
#home-summary{padding: 80px 0px 85px 0px; background: #383838}
#home-summary DIV.container{max-width: 1400px}
#home-summary P.summary-header, #home-summary P.summary-header SPAN{color: #fff; font-size: 34px; line-height: 44px; letter-spacing: -1px; text-align: center; text-transform: uppercase}
#home-summary P.summary-header SPAN{color: #b8b8b8; white-space: nowrap}
#home-summary P.summary-header{padding: 0px 0px 70px 0px}

#home-summary-inner{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex}
DIV.summary{width: calc(33.33% - 1px); border-right: solid 1px #888}
DIV.summary-3{border-right: solid 1px #383838}

DIV.summary P.number{font-family: 'LatoLatinWebLight', sans-serif !important; color: #f0f0f0; font-size: 75px; line-height: 75px; text-align: center}
DIV.summary P.number-kern:first-letter{letter-spacing: -5px}
DIV.summary P.summary{color: #e8e8e8; font-size: 16px; line-height: 24px; text-align: center; padding: 30px 50px 10px 50px}


/*** HOME MAP  ***/
#home-map{padding: 70px 0px 60px 0px; border-bottom: solid 1px var(--border-color)}
#home-map H2{color: #303030; font-size: 30px; line-height: 38px; letter-spacing: -1px; text-align: center; padding: 0px 0px 25px 0px}
#home-map P.main, #home-map P.main A{color: #303030; font-size: 16px; line-height: 24px}
#home-map P.main{text-align: center; margin: 0px auto; padding: 0px; max-width: 900px}

#map IMG{width: 100%; height: auto; aspect-ratio: attr(width) / attr(height)}


/*** HOME QUOTE  ***/
#home-quote{text-align: center; padding: 85px 0px 75px 0px; background: #265986}
#home-quote P.quote{font-family: 'LatoLatinWebLight', sans-serif !important; color: #f0f0f0; font-size: 40px; line-height: 52px; letter-spacing: -1px}
#home-quote P.quote:before{padding-right: 3px; content: url(../images/backgrounds/quote-before.png); opacity: .85}
#home-quote P.quote:after{padding-left: 3px; content: url(../images/backgrounds/quote-after.png); opacity: 0.85}
#home-quote IMG{width: 250px; height: auto; aspect-ratio: attr(width) / attr(height); margin: 35px auto; border: solid 2px #5090b0; border-radius: 50%}
#home-quote P.author{color: #f0f0f0; font-size: 18px; line-height: 26px; text-align: center}