@charset 'utf-8';


/**************/
/*** Resets ***/
/**************/

html, body, p, div, img, h1, h2, h3, h4, h5, li, ul, ol, dl, dd, dt, form, table, td, tr, a {margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px;}
.clear-div {clear: both;}

html {font-size: 100%;}

body {width: 100%; color: #ffffff; background: #f3f3f3; font-size: 12px; font-weight: 300; font-family: "Neuzeit Grotesk", neuzeit-grotesk, sans-serif; height: 100vh; max-height: 100vh; overflow: hidden;}


* {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}


input:focus, textarea:focus, select:focus {outline: none;}




:root
{
    --dark-blue: #0f344c;
    --bright-blue: #00aeef;

    --heading-font: "Atrament", atrament-web, sans-serif;
    --content-font: "Neuzeit Grotesk", neuzeit-grotesk, sans-serif;
}




/***************/
/*** General ***/
/***************/

.clearDiv {clear: both;}


.container {width: 100%; min-width: 100%; margin: auto; font-size: 0rem;}

.content {width: 100%; font-size: 0rem; padding: 20px; margin: auto;}





.mapBg {position: fixed; z-index: 0; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #0d344c;}


main.holder {position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; margin-top: 90px; max-height: calc(100vh - 90px); overflow-x: hidden; overflow-y: scroll; padding-bottom: 90px;}



.navMenu {position: fixed; z-index: 3001; display: block; width: 100%; height: 0vh; background-color: #082840; padding: 100px; padding-top: 0px; padding-bottom: 0px; overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
.navMenu::-webkit-scrollbar {display: none;}

.navMenu.anim {animation-duration: 1.0s; animation-name: navShow; animation-fill-mode: forwards;}
.navMenu.animReverse {animation-duration: 1.0s; animation-name: navShowReverse; animation-fill-mode: forwards;}


@keyframes navShow
{
    from
    {
        height: 0vh;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    to
    {
        height: 100vh;
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@keyframes navShowReverse
{
    from
    {
        height: 100vh;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    to
    {
        height: 0vh;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}



.navMenu .close {position: absolute; top: 35px; right: 40px; width: 30px; height: 30px; cursor: pointer;}

.navMenu ul {list-style-type: none; font-size: 0px; width: calc(25% - 53px); display: inline-block; margin-left: 25px; margin-right: 25px; margin-top: 50px; vertical-align: top;}
.navMenu ul li {font-size: 1.0rem; text-align: left;}
.navMenu ul li:first-child {font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #00aeef;/*rgba(255, 255, 255, 0.15)*/; font-weight: 500; font-family: "Atrament", atrament-web, sans-serif;}

.navMenu ul li a {color: #ffffff; text-decoration: none; display: block; font-size: 0rem; margin-top: 40px;}

.navMenu ul li a .icon {width: 25px; height: 25px; text-align: center; font-size: 2.0rem; display: inline-block; vertical-align: top;}
.navMenu ul li a .icon img {width: 100%;}
.navMenu ul li a .text {width: calc(100% - 25px - 25px); display: inline-block; vertical-align: top; margin-left: 25px; margin-top: 3px;}
.navMenu ul li a .text h3 {width: 100%; font-weight: 500; font-size: 0.70rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 5px;}
.navMenu ul li a .text p {display: block; width: 100%; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); width: 75%;}





.headerContainer {position: fixed; z-index: 3000;}
.header {}
.header > .logo {float: left; width: 400px; font-family: "Atrament", atrament-web, sans-serif; font-size: 1.6rem; text-align: left; color: #ffffff; text-transform: uppercase; padding-top: 6px;}
.header > .logo a {color: #ffffff; text-decoration: none;}
.header > .logo img {width: 32px; margin-right: 8px; vertical-align: middle; margin-top: -6px;}
.header > .logo span {padding-top: 6px; font-weight: 500;}
.header > .links {float: right; width: calc(100% - 400px);}

.header > .links ul {font-size: 0rem; list-style-type: none; text-align: right; margin-top: 10px;}
.header > .links ul li {display: inline-block; margin-left: 20px; margin-right: 20px; font-size: 0.9rem; text-align: center;}
.header > .links ul li a {color: #ffffff; text-decoration: none;}
.header > .links ul li a:hover {text-decoration: underline; color: #ffffff;}

.header > .links ul li.menu {font-size: 2.0rem; cursor: pointer;}

.header > .links ul li.blueButton {background-color: #00aeef; padding-top: 11px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; border-radius: 3px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);}
.header > .links ul li.blueButton a {color: #ffffff;}


@media (min-width: 300px) and (max-width: 799px)
{

.navMenu {padding: 50px; padding-top: 0px; padding-bottom: 0px;}
.navMenu ul {width: 100%; margin-left: auto; margin-right: auto;}
.navMenu ul:first-of-type {margin-top: 0px;}

.navMenu .close {top: 25px; right: 15px;}

@keyframes navShow
{
    from
    {
        height: 0vh;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    to
    {
        height: 100vh;
        padding-top: 50px;
        padding-bottom: 150px;
    }
}

@keyframes navShowReverse
{
    from
    {
        height: 100vh;
        padding-top: 50px;
        padding-bottom: 150px;
    }

    to
    {
        height: 0vh;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}



.header > .logo {width: auto;}
.header > .links {width: auto;}

.header > .links ul {text-align: right;}
.header > .links ul li {display: none;}
.header > .links ul li.menu {display: inline-block; font-size: 1.4rem; margin-top: -3px; margin-left: 0px; margin-right: 0px;}



}

@media (min-width: 800px) and (max-width: 1199px)
{

.navMenu ul {width: calc(50% - 53px);}

}










.preambleContainer {position: relative; padding-bottom: 150px;}
.preamble {max-width: 1200px;}
.preamble:last-of-type {padding-bottom: 150px;}

.preamble.major:first-of-type {margin-top: 30vh;}
.preamble.major {margin-top: 30vh;}

.preamble > .text {width: 100%; text-align: center; padding-left: 0px;}
.preamble > .text.left {float: left; width: calc(50% - 25px); text-align: left;}
.preamble > .text.right {float: right; width: calc(50% - 25px); text-align: left;}

.preamble > .text h1 {font-family: "Atrament", atrament-web, sans-serif; font-size: 2.4rem; color: #ffffff; font-weight: 600; margin: auto; letter-spacing: 1px; text-transform: uppercase; border-bottom: 6px solid #00aeef; padding-bottom: 5px; margin-bottom: 10px; max-width: 900px; width: 100%;}
.preamble > .text h5 {font-weight: 300; font-size: 1.1rem; color: #efefef; margin-top: 20px; line-height: 30px; margin-bottom: 30px; margin: auto; margin-bottom: 20px;}
.preamble > .text h2 {font-size: 1.9rem; color: #ffffff; font-weight: 600; margin: auto; letter-spacing: 1px; text-transform: uppercase; border-bottom: 6px solid #00aeef; padding-bottom: 5px; max-width: 900px; width: 100%; margin-bottom: 10px;}
.preamble > .text h6 {font-size: 1.0rem; color: #efefef; margin: auto; margin-top: 20px; line-height: 30px; font-weight: 300;}
.preamble > .text p {display: block; font-weight: 300; font-size: 1.1rem; color: #efefef; margin-top: 20px; line-height: 25px; margin-bottom: 20px; max-width: 600px;}
.preamble > .text .blueButton {display: inline-block; width: 180px; height: 60px; text-align: center; color: #ffffff; line-height: 58px; font-size: 1.0rem; background-color: #00aeef; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); margin-right: 20px; border: 3px solid #00aeef; cursor: pointer; text-decoration: none; border-radius: 2px;}
.preamble > .text .blueButton.active {background-color: transparent;}
.preamble > .text .blueButton:hover {background-color: #00aeef; border: 3px solid #00aeef; text-decoration: underline;}
.preamble > .text .button {display: inline-block; width: 180px; height: 60px; text-align: center; color: #ffffff; line-height: 58px; font-size: 1.0rem; color: #ffffff; border: 3px solid #00aeef; cursor: pointer; border-radius: 2px;}
.preamble > .text .mini {height: 40px; line-height: 38px; width: 120px; margin: auto; margin-left: 5px;}

.preamble > .text a {color: #00aeef; text-decoration: none;}
.preamble > .text a:hover {text-decoration: underline;}

.preamble > .text select {display: inline-block; vertical-align: top; height: 40px; line-height: 38px; width: auto; max-width: 500px; font-size: 0.9rem; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #30495c; color: #ffffff; padding-left: 10px; padding-right: 50px; border: 1px solid #00aeef; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-position: right 10px top 50%; background-size: 0.65rem; background-repeat: no-repeat; backdrop-filter: blur(5px); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.75); margin-left: 5px; margin-right: 5px; border-radius: 3px;}

.preamble > .text select:disabled {color: rgba(255, 255, 255, 0.25); box-shadow: none; border: 1px solid rgba(0, 174, 255, 0.2); background-color: rgba(255, 255, 255, 0.0); background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23557c8e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');}

.preamble > .text select option:disabled {-webkit-appearance: none; appearance: none; color: rgba(255, 255, 255, 0.1); }

.preamble > .text .client {width: calc(25% - 25px); height: 120px; display: inline-block; margin-left: 12.5px; margin-right: 12.5px; border-radius: 3px; background-color: rgba(8, 41, 64, 0.5); padding: 50px; text-align: center; cursor: pointer; margin-top: 12.5px; margin-bottom: 12.5px; vertical-align: top;}
.preamble > .text .client:hover {background-color: rgba(23, 102, 155, 0.5);}

.preamble > .text .client img {width: 100%;}
.preamble > .text .client svg {width: 100%; max-width: 100%;}

.preamble > .text .client h3 {font-size: 1.0rem; color: #ffffff; font-weight: 600; margin: auto; letter-spacing: 1px; text-transform: uppercase;}


.preamble > .text .feature {width: calc(33% - 50px); display: inline-block; margin-left: 25px; margin-right: 25px; text-align: center; cursor: pointer; margin-top: 50px; vertical-align: top; border-radius: 0px; border-top: 3px solid #00aeef; padding: 25px; padding-bottom: 50px; background-color: rgba(8, 41, 64, 0.8);}
.preamble > .text .feature:hover {background-color: rgba(23, 102, 155, 0.5);}

.preamble > .text .feature img {width: 100%;}

.preamble > .text .feature p {font-size: 1.0rem; margin-top: 5px;}

.preamble > .text .feature h3 {font-size: 1.0rem; color: #ffffff; font-weight: 600; margin: auto; letter-spacing: 1px; text-transform: uppercase;}

.preamble > .text .feature .icon {font-size: 2.4rem; color: #ffffff; text-align: center; margin-bottom: 10px;}



.preamble > .graphic {text-align: center;}
.preamble > .graphic.left {float: left; width: calc(50% - 25px);}
.preamble > .graphic.right {float: right; width: calc(50% - 25px);}

.preamble > .graphic img {width: 100%; max-width: 350px;}



.preamble > .text .report-filters {text-align: left; width: 100%; max-width: 1000px; margin: auto;}
.preamble > .text .report-filters a {display: inline-block; width: calc(33% - 50px); margin: 25px; margin-top: 10px; margin-bottom: 10px; text-align: center; color: #ffffff; font-size: 1.3rem; vertical-align: top; text-decoration: none;}
.preamble > .text .report-filters a:hover {text-decoration: underline;}





#reportForm h1 {font-size: 1.9rem;}


@media (min-width: 300px) and (max-width: 799px)
{

.preambleContainer {padding-bottom: 150px;}

.preamble {}
.preamble:last-of-type {padding-bottom: 100px;}

.preamble.major:first-of-type {margin-top: 10vh;}
.preamble.major {margin-top: 30vh;}


.preamble > .text h1 {font-size: 1.5rem;}
.preamble > .text h2 {font-size: 1.5rem;}
.preamble > .text p {font-size: 1.0rem;}

.preamble > .text select {width: 100%; display: block; margin: auto; margin-top: 15px; margin-bottom: 5px;}

.preamble > .text.left {width: 100%; float: none; text-align: center;}
.preamble > .text.right {width: 100%; float: none; text-align: center;}


.preamble > .text .blueButton {width: 100%; max-width: 500px; margin-top: 15px;}
.preamble > .text .button {margin-top: 20px; width: 100%;}

.preamble > .text .mini {margin-left: auto;}

.preamble > .graphic {margin-bottom: 50px;}
.preamble > .graphic.left {float: none; width: 100%;}
.preamble > .graphic.right {float: none; width: 100%;}

.preamble > .text .client {width: calc(50% - 25px); padding-left: 25px; padding-right: 25px;}

.preamble > .text .feature {width: calc(100% - 50px);}

.preamble > .text .report-filters a {display: block; width: 100%; margin: auto; margin-top: 10px; margin-bottom: 10px;}


}

@media (min-width: 800px) and (max-width: 1199px)
{

.preamble > .text .feature {width: calc(50% - 50px);}

}


.ctaForm {max-width: 500px; text-align: left; margin: auto; margin-top: 50px;}
.ctaForm .ctaFrame {margin-bottom: 50px;}
.ctaForm .ctaFrame h3 {font-size: 1.2rem; letter-spacing: 1px; color: #ffffff; text-align: left; font-weight: 100; margin-bottom: 15px; margin-top: 40px;}
.ctaForm .ctaFrame h3:first-of-type {margin-top: 0px;}
.ctaForm .ctaFrame input {display: block; width: 100%; border: none; border-bottom: 1px solid #00aeef; height: 25px; background-color: transparent; color: #ffffff; font-size: 1.2rem; font-weight: 100; font-family: "Neuzeit Grotesk", neuzeit grotesk, sans-serif;}
.ctaForm .ctaFrame input::placeholder {color: rgba(255, 255, 255, 0.5);}
.ctaForm .ctaFrame .blueButton {margin-top: 50px;}




.ctaForm .messages {margin: auto; font-size: 0px; width: 100%: max-width: 500px; color: #ffffff; list-style-type: none; margin-bottom: 50px;}
.ctaForm .messages li {text-align: center; font-size: 1.0rem; margin-bottom: 5px;}
.ctaForm .messages li:first-child {font-weight: 600;}
.ctaForm .messages.success {color: #00dd00;}
.ctaForm .messages.error {color: #ff0000;}




.endCtaContainer {}
.endCta {padding-top: 200px; padding-bottom: 100px;}
.endCta > h2 {font-size: 2.0rem; font-family: atrament-web, sans-serif; text-align: center; color: #000000; text-transform: uppercase; font-weight: 600;}
.endCta > h3 {font-size: 1.1rem; text-align: center; font-weight: 300; margin-top: 20px; margin-bottom: 30px;}

.endCta > .button {width: 100%; max-width: 500px; height: 60px; line-height: 60px; text-align: center; font-weight: 600; color: #ffffff; font-size: 1.1rem; background-color: #ee7162; margin: auto; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1); cursor: pointer;}


.footerContainer {}
.footer {padding-bottom: 50px;}

.footer > ul {list-style-type: none; font-size: 0rem; text-align: center;}
.footer > ul li {display: none; margin-left: 10px; margin-right: 10px; font-size: 0.9rem;}
.footer > ul li.copyright {margin-right: 50px; display: inline-block;}
.footer > ul li > a {color: #ffffff; text-decoration: none;}
.footer > ul li > a:hover {text-decoration: underline;}





.reportsContainer {}
.reports {}
.reports > .reportSearch {width: 100%; max-width: 1200px; margin: auto; margin-top: 120px;}
.reports > .reportSearch > input {width: 100%; height: 40px; border-radius: 3px; border: none; font-size: 1.0rem; line-height: 40px; padding-left: 10px; padding-right: 10px;}
.reports > .reportHolder {max-width: 1200px; margin: auto; margin-top: 120px;}
.reports > .reportHolder > .report {margin-left: 20px; margin-right: 20px; width: calc(20% - 40px); display: inline-block; margin-top: 20px; margin-bottom: 20px; vertical-align: top; position: relative;}
.reports > .reportHolder > .report > .graphic {width: 100%; height: 240px; background-color: #ffffff;}
.reports > .reportHolder > .report > h2 {margin-top: 20px; text-align: center; font-size: 1.1rem; font-family: "Atrament", atrament-web, sans-serif; font-weight: normal; text-transform: uppercase; overflow: none; text-overflow: ellipsis; whitespace: no-wrap;}
.reports > .reportHolder > .report > h2:nth-of-type(n+2) {margin-top: 0px;}
.reports > .reportHolder > .report > h3 {font-weight: 100; text-align: center; font-size: 1.0rem; position: absolute; top: 7px; left: -25px; background-color: #00aeef; padding-bottom: 5px; padding-top: 10px; transform: rotate(-45deg); overflow: hidden; width: 100px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);}





.tourContainer {}
.tour {padding-top: 100px; padding-bottom: 100px;}



.tour > .card {max-width: 1000px; margin: auto; opacity: 0.1; transition: opacity 0.75s;}
.tour > .card.reducedWidth {max-width: 750px;}
.tour > .card.active {opacity: 1.0;}

.tour > .card > .info {float: left; width: calc(100% - 290px - 50px); margin-right: 50px;}
.tour > .card > .info.solo {float: none; width: 100%; margin-right: 0px; margin: auto;}

.tour > .card > .info h2 {font-size: 1.7rem; font-family: "Atrament", atrament-web, sans-serif; text-transform: uppercase; color: #ffffff; text-align: left; font-weight: 100; letter-spacing: 0px; padding-top: 15px; padding-bottom: 10px; border-bottom: 1px solid #00aeef;}
.tour > .card > .info > .icon {float: left; width: 150px;}
.tour > .card > .info > .icon .iconHolder {padding: 25px; width: 0px; height: 90px; background-color: rgba(4, 20, 32, 0.5); border-radius: 100px; margin: auto; box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.0); transition: width 0.35s, box-shadow 0.35s;}
.tour > .card > .info > .icon .iconHolder.active {width: 90px; box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.15);}
.tour > .card > .info > .icon .iconHolder img {width: 100%;}
.tour > .card > .info > .icon .line {width: 1px; background-color: #00aeef; height: 300px; margin: auto; margin-top: 25px; margin-bottom: 25px;}

.tour > .card > .info > .text {float: right; width: calc(100% - 150px);}

.tour > .card > .info > .text p {display: block; font-size: 1.0rem; color: #ffffff; text-align: left; margin-top: 20px; line-height: 1.2rem;}

.tour > .card > .info > .text .ctaButton {background-color: rgba(4, 20, 32, 0.5); width: auto; min-width: 180px; height: 60px; text-align: center; color: #ffffff; display: inline-block; margin-top: 20px; font-size: 0.8rem; line-height: 60px; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; transition: background-color 0.35s; padding-left: 20px; padding-right: 20px; display: none;}
.tour > .card > .info > .text .ctaButton:hover {background-color: #00aeef;}

.tour > .card > .graphic {float: right; width: 290px; height: 200px; text-align: right;}
.tour > .card > .graphic .fake {display: inline-block; width: 100%; height: 310px; margin: auto; background-color: rgba(255, 255, 255, 0.35);}



@media (max-width: 799px)
{

.tour > .card > .info h2 {font-size: 1.6rem; padding-top: 5px;}

.tour > .card > .info > .icon {width: 50px;}
.tour > .card > .info > .text {width: calc(100% - 110px);}

.tour > .card > .info > .icon .iconHolder {height: 40px; padding: 10px;}
.tour > .card > .info > .icon .iconHolder.active {width: 40px; box-shadow: 0px 12px 12px rgba(0, 0, 0, 0.15);}

.tour > .card > .info > .text {width: calc(100% - 60px);}

}





.messageBoxContainer {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 2000; display: none;}
.messageBoxContainer.active {display: block;}

.messageBox {width: 100%; max-width: 400px; border-top: 4px solid #00aeff; margin-top: 250px; padding: 40px; background-color: #082840; color: #ffffff; text-align: left; position: relative;}

.messageBox .close {position: absolute; right: 15px; top: 19px; width: 18px; display: none;}
.messageBox .close img {width: 18px;}

.messageBox .title {}
.messageBox .title > .icon {float: left; width: 25px;}
.messageBox .title > .icon img {width: 25px;}
.messageBox .title > h4 {width: calc(100% - 25px - 10px); border-bottom: 0px solid #00aeff; font-weight: 600; font-size: 1.0rem; float: right; margin-left: 10px; line-height: 27px;}

.messageBox ul {list-style-type: none; font-size: 0rem; width: 100%; margin-top: 10px;}
.messageBox ul li {display: block; font-size: 0.95rem; text-align: center; color: rgba(255, 255, 255, 0.75);}
.messageBox ul li:nth-child(1) {margin-bottom: 8px;}
.messageBox ul li:nth-child(n+2) {font-style: italic; margin-top: 5px;}

.messageBox .button {background-color: rgba(4, 20, 32, 0.5); width: auto; min-width: 180px; height: 40px; text-align: center; color: #ffffff; display: block; margin: auto; margin-top: 20px; font-size: 0.8rem; line-height: 40px; text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; transition: background-color 0.35s; padding-left: 20px; padding-right: 20px; cursor: pointer;}
.messageBox .button:hover {background-color: #00aeef;}



@media (max-width: 799px)
{

.messageBox {max-width: 90%; padding: 20px;}
.messageBox .title > .icon {float: none; margin: auto; margin-bottom: 10px; width: 40px;}
.messageBox .title > .icon img {width: 40px;}
.messageBox .title > h4 {width: 100%; text-align: center;}

}





/**************/
/*** Report ***/
/**************/

.marketReportCoverContainer {background-color: var(--dark-blue); height: 100vh;}
.marketReportCover {padding: 50px; position: relative; height: 100%;}

.marketReportCover .info {position: absolute; top: calc(50% - 100px); width: 500px; left: calc(50% - 250px);}
.marketReportCover .logo {text-align: center; width: 100%;}
.marketReportCover .logo img {width: 50px;}

.marketReportCover .info h1 {font-size: 1.8rem; font-family: var(--heading-font); text-transform: uppercase; font-weight: 100; margin-top: 20px;}
.marketReportCover .info h2 {font-size: 0.7rem; font-family: var(--content-font); font-weight: 100; margin-top: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500;}
.marketReportCover .info .blueBar {width: 300px; height: 4px; background-color: var(--bright-blue); margin: auto; margin-top: 20px; margin-bottom: 20px;}




.marketReportContainer {min-height: 100vh; background-color: #ffffff;}
.marketReport {height: 100%; position: relative;}

.marketReport .banner {position: absolute; background-color: var(--dark-blue); width: 100%; max-width: 1000px; height: 70px; top: 50px; left: 0px; padding-left: 10%; z-index: 1000;}

.marketReport .banner img.logo {width: 25px; margin-top: 20px; margin-left: 10px; vertical-align: top;}

.marketReport .banner h3 {font-size: 1.6rem; font-family: var(--heading-font); text-transform: uppercase; font-weight: 100; display: inline-block; margin-left: 20px; margin-top: 20px;}

.marketReport .banner .bar {position: absolute; top: 67px; left: 15%; height: 6px; width: 50%; background-color: var(--bright-blue);}

.marketReport .marketInfo {position: absolute; top: 150px; left: 250px; padding-left: 10px; font-size: 0.7rem; font-family: var(--content-font); text-transform: uppercase; letter-spacing: 2px; font-weight: 500; color: #555555; z-index: 300;}
.marketReport .marketInfo i {margin-left: 10px; color: var(--dark-blue);}
.marketReport .marketInfo i:first-of-type {margin-left: 0px;}
.marketReport .marketInfo img {width: 10px;}

.marketReport .dataSection {position: absolute; width: 1200px; height: 100vh; top: 0px; left: calc(50% - 600px); background-color: #fafafa; padding-top: 200px; padding-left: 20px; padding-right: 20px;}

.marketReport .dataSection p {font-size: 1.0rem; text-align: left; max-width: 440px; color: #222222; margin-bottom: 50px; letter-spacing: 0.5px; line-height: 1.4rem; text-align: justify;}

.marketReport .dataSection ul.stats {display: flex; font-size: 0rem; width: 440px; justify-content: space-around; flex-wrap: wrap;}
.marketReport .dataSection ul.stats li {display: inline-block; vertical-align: top; flex-grow: 0; border-top: 5px solid var(--bright-blue); color: #222222; padding-top: 10px; width: 150px; margin-bottom: 50px;}

.marketReport .dataSection ul.stats li .label {font-family: var(--heading-font); font-size: 1.0rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 100; margin-bottom: 5px;}
.marketReport .dataSection ul.stats li .value {font-family: var(--content-font); font-size: 2.0rem; font-weight: bold;}
.marketReport .dataSection ul.stats li .delta {font-family: var(--content-font); font-size: 0.8rem; font-weight: 100; color: #00aa00;}

.marketReport .dataSection .chart {width: 400px; height: 300px; background-color: #ff9999; position: absolute;}

.marketReport .dataSection .chart.sales {top: 0px; right: 0px;}



@media (min-width: 1500px)
{

.marketReport .dataSection ul.stats {width: 440px;}

}

@media (min-width: 1000px) and (max-width: 1499px)
{

.marketReport .banner {padding-left: 10px;}

.marketReport .dataSection ul.stats {}

}