*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; } h1, .strap, .social-shares, .date,.location-name, .key-points, .sources, .nav-text, .explore-all, .navbar{ font-family: 'PT Mono', serif; } .copy a{ color: #94090d; } .location-name{ width: 90%; margin: 1em auto; text-align: right; color: #94090d; font-size: 1.1em; } .map-attribution{ width: 95%; margin: 0.2em auto; text-align: left; font-size: 0.8em; font-family: "Open Sans"; } .map-attribution a{ color: #94090d; } .navbar{ background-color: #000; color: white; width: 100%; height: 50px; position: fixed; top: 0; z-index: 100; font-family: "PT Mono"; } .navbar .right-container{ position: absolute; text-align: right; top: 15px; right: 5px; } .navbar .right-container a{ color: inherit; text-decoration: none; } .navbar .right-container a:hover{ text-decoration: underline; } .navbar .right-container p{ display: inline-block; margin: 0 1.2em; } .navbar .right-container.desktop{ position: absolute; text-align: right; top: 15px; right: 5px; } .navbar .right-container.desktop p{ display: inline-block; margin: 0 1.2em; } .navbar .right-container.mobile{ display: none; } .map .mobile-map{ display: none } .description{ font-family: 'Open Sans'; } .strap{ padding-top: 0.2em; font-weight: bold; color: #000; font-size: 1.1em; } .container, .logo-container{ max-width: 800px; margin: 0 auto; } .logo-container a{ text-decoration: none; } .container:first-child , .logo-container{ margin-top: 3em; margin-bottom: 3em; } .map img{ width: 100%; } .hc-logo{ max-width: 300px; width: 100%; margin: 2em auto 0 auto; } .social-shares{ margin:1.5em 0 1.5em auto; font-size: 1.1em; } .date{ color: #94090d; font-size: 1.2em; padding-bottom: 0.8em; } .description{ max-width: 700px; font-size: 1.1em; padding-top: 2em; line-height: 1.6em; } .key-points{ padding: 2em 2em; font-size: 1.1em; } .key-points li, .sources li{ list-style-type:square; color: #94090d; line-height: 1.6em; } .key-points li span{ color: #000 } .key-points li span b{ color: #94090d; font-weight: bold; } .social-shares .social{ padding:.2em 0.6em; width:150px; display:inline-block; text-align:left; color:#000; font-size:1.2em; margin:0 10px 0 0; cursor:pointer; border:3px solid #000; } .social-shares .social i{ font-size:1.2em; vertical-align:middle; margin-right:20px } .social-shares .social.whatsapp{ display:none } .social-shares .social:hover{ background-color:#000!important; color: white!important; } .sources h2{ font-size: 1.4em; text-transform: uppercase; padding-bottom: 1em; } .sources a{ color: inherit; text-decoration: none; } .sources a { color: #000 } .sources a .source-name{ color: #94090d; font-weight: bold; } .sources a .source-headline{ font-size: 1.1em; text-decoration: underline; } .sources a:hover .source-headline{ opacity: 0.7; } .sources a i{ padding-left: 0.7em; } .explore-all a, .tell-us a{ color: inherit; text-decoration: none; display: inline-block; font-family: "PT Mono"; padding: 0.4em; border: solid 2px #000; max-width: 350px; width: 100%; margin-right: 20px; font-size:1.1em; } .explore-all, .tell-us{ display: inline-block; text-align: center; margin-top: 3em; font-weight: bold; vertical-align: top; } .tell-us{ margin-left: 2em; } .previous a, .next a{ color: inherit; text-decoration: none; } .explore-all a:hover, .tell-us a:hover{ color: white; background-color: #000; } .previous,.next{ display: inline-block; } .nav-button{ background-color: #000; font-size: 2.1em; color: white; padding: 0.1em 0.3em; margin: 0.2em; } .prev-next{ margin-top: 3em; } .previous, .next{ width: 48%; } .next{ text-align: right; } .previous:hover,.next:hover{ opacity: 0.8; cursor: pointer; } .nav-text, .nav-button{ display: inline-block; vertical-align: middle; } .nav-text{ width: 70%; } .nav-headline{ font-size: 1.1em; } .nav-date{ color: #94090d; } .footer-basic-centered { background-color: #000; color: #fff; width: 100%; text-align: center; font: 300 20px; padding: 30px; padding-bottom: 50px; font-family: "PT Mono"; margin-top: 8em; } .footer-basic-centered .footer-links{ float: right; } .footer-basic-centered .footer-company-name{ float: left; } .footer-basic-centered .footer-links,.footer-basic-centered .footer-company-name{ vertical-align: middle; padding-bottom: 20px; } .footer-basic-centered a{ margin-left: 5px; margin-right: 5px; text-decoration: none; color: inherit; } .footer-basic-centered a:hover{ text-decoration: underline; } .copy{ font-family: "Open Sans"; font-size: 1.1em; line-height: 1.4em; } .copy p{ margin-bottom: 1em; margin-top: 1em; } .copy h2{ margin-top: 2em; margin-bottom: 0.5em; font-family: "PT Mono"; } #hamburger{ font-size: 2em; position: absolute; top: -6px; right: 15px; cursor: pointer; } #hamburger:hover{ opacity: 0.7; } .right-container.mobile .mob-menu.inactive{ display: none; } .right-container.mobile .mob-menu{ background-color: black; position: fixed; top: 50px; width: 100%; text-align: right; left: 0; } .right-container.mobile .mob-menu p{ padding: 0.8em 0.6em; display: block; } @media (max-width:800px){ .footer-basic-centered .footer-links, .footer-basic-centered .footer-company-name{ float: none; text-align: center; } .container, .logo-container{ width: 90%; } .social-shares { font-size: 1em; text-align: center; }.social-shares .social.whatsapp{ display:inline-block }.social-shares .social{ width: 33.33%; padding: .2em .8em; margin: 0; border-left: none; border-right: none; text-align: center; }.social-shares .social i{ margin-right:0 } .social-shares .social.twitter{ border-right: solid; border-left: solid; } .social-shares .social span{display:none} h1{ font-size: 1.7em; } .description{ padding-top: 0.8em; } .explore-all a, .sources a{ width: 100%; } .sources a{ margin-bottom: 0.5em; } .sources h2{ padding-bottom: 0.4em; } .previous, .next{ width: 100%; } .previous{ margin-bottom: 2.5em; } .tell-us{ margin-left: 0; } .navbar .right-container p{ display: none; } .map .mobile-map{ display: block } .map .desktop-map{ display: none } .navbar .right-container.desktop{ display: none; } .navbar .right-container.mobile{ display: block; } } .nav-logo { padding-left: 0.8em; vertical-align: middle; height: 50%; margin-top: 10px; } .nav-logo.mobile { display: none; } .nav-logo.desktop { vertical-align: middle; display: inline-block; } .copy{ line-height: 1.6em; } .copy p{ margin-bottom: 1.5em; margin-top: 1.5em; } .copy h2{ margin-top: 3em; } .copy img{ width: 100% }