/* Base
 –––––––––––––––––––––––––––––––––––––––––––––––––– */

html {width: 100%;height: 100%;min-height: 100%;background-color: #9cfff8;overflow-x: hidden;}
body {padding: 0;margin: 0;background-color: #9cfff8;height: 100%;}

a {color: #ff6464;}
a:hover, a:focus {color: #002649;text-decoration: underline }
a:active {color: #002649}

header, section, footer, div  {max-width: 2200px; margin-left: auto; margin-right: auto}

/* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.NeueHaasUnicaW1G-Bold {font-family: NeueHaasUnicaW1G-Bold;}
.NeueHaasUnicaW1G-Medium {font-family: NeueHaasUnicaW1G-Medium;}
.NeueHaasUnicaW1G-Light {font-family: NeueHaasUnicaW1G-Light;}
.NeueHaasUnicaW1G-Regular{font-family: NeueHaasUnicaW1G-Regular, sans-serif;}

html, body {font-family: NeueHaasUnicaW1G-Light, sans-serif;color: #002649;}
.light {font-family: NeueHaasUnicaW1G-Light, sans-serif;}
.regular {font-family: NeueHaasUnicaW1G-Regular, sans-serif;}
.semibold {font-family: NeueHaasUnicaW1G-Medium, sans-serif;}
.bold, strong {font-family: NeueHaasUnicaW1G-Bold, sans-serif;}

.uppercase {text-transform: uppercase !important;}

h1, h2, h3, h4, h5, .h1, .h2, .h3 {font-family: NeueHaasUnicaW1G-Bold, sans-serif;}
h1, .h1 {font-size: 1.75rem;font-family: Nazare-Bold, NeueHaasUnicaW1G-Bold, sans-serif;}
h2, .h2 {font-size: 1.75rem;}
h3 {font-size: 1.4rem;}
lead {font-family: NeueHaasUnicaW1G-Light, sans-serif;}
.intro-text {font-size: 1.05rem;font-family: NeueHaasUnicaW1G-Medium;}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
h1, .h1 {font-size: 2rem;}
h2, .h2 {font-size: 2rem;}
}


/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
h1, .h1 {font-size: 2.85rem;}
html {font-size: 18px;}    
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
html {font-size: 22px;}
}





/* Header
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
header {background-color: #fff; background-color: #9cfff8}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  
.logo-img  {width: 18rem}
}

/* Shapes
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-intro { background-color: #ff6464; background-color: #9cfff8;}
.shape1  {position: absolute; bottom: 10%; left: -5rem;width: 8rem;}
.shape2  {position: absolute; top: 0; right:-3rem;width: 6rem;}
.shape3  {position: absolute;right:0; bottom: 1rem; width: 6rem }


/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.shape1  {width: 20rem;left: -10rem;bottom:13%;}
.shape2  {right: 5%}
.shape3  { width: 10rem; bottom: 5% }     
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  
/*.shape1  {width: 20rem;bottom:13%;left:-10%}*/
.shape2  {width: 20rem;right: 0}
.shape3  { width: 15rem;}
}  

/* Extra large devices and retina (extra large desktops, 1600px and up)*/
@media (min-width: 1600px) {
.shape1  {width: 30rem;left:-15%}
}

/* Extra large devices and retina (extra large desktops, 2200px and up)*/
@media (min-width: 2200px) {
.shape1  {top: 50%; left: -10%;}
.shape2  {width: 20rem;right: 0;}
.shape3  {  width: 20rem;top: 50rem;bottom: 10%;right: 0}
}

/* Extra large devices and retina (extra large desktops, 3300px and up)*/
@media (min-width: 3300px) {
    html, body {background-color: #fff}
    .shape1, .shape2,.shape3  {display: none}


}


/* Content-block
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn-primary{color: #fff;background-color: #ff6464;border-color: #ff6464; text-decoration: none; border-radius: 0}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active {color: #fff;background-color: #002649;border-color: #002649;}
.content-block {max-width: 20rem}
.text-container {max-width: 900px}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
.text-container {max-width: 1140px}
}


/* Magazine
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.magazines-section{background-color: #f4cf67;background-color: #9cfff8; color:#002649;}

a.magazine-link {color:#fff; text-decoration: none;}
a.magazine-link img {border:4px solid #fff; max-height: 60vh; margin-bottom: 2rem}
a.magazine-link img:hover
{border:4px solid #fff;box-shadow: 0 0 0 2rem rgba(255,255,255,.3);-webkit-transition: all .35s ease;-moz-transition: all .35s ease;-o-transition: all .35s ease;transition: all .35s ease;}

a.magazine-link .caption {margin-top:.35rem;color:#002649!important;}
.caption:hover {color:#002649 !important;}

a.magazine-link:hover .caption {color:#fff;-webkit-transition: all .35s ease;-moz-transition: all .35s ease;-o-transition: all .35s ease;transition: all .35s ease;}
    

/* Footer
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {background-color:#ff6464; color:#fff}
.footer-text {max-width: 50rem }
footer a {color: #fff; text-decoration: none }
footer  a:hover, a:focus {color:  #9cfff8;text-decoration: underline }
footer a:active {color: #fff}