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

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

a {color: #ff6464;font-family: NeueHaasUnicaW1G-Regular,sans-serif;}
a:hover, a:focus {color: #002649;text-decoration: underline }
a:active {color: #002649}

.wrapper {width: 100%;max-width: 1900px; padding-right: 15px;padding-left: 15px;margin-right: auto; margin-left: auto;}

header, section, footer  {max-width: 1900px; 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;}

html, body {font-family: NeueHaasUnicaW1G-Light, sans-serif;color: #002649;}
.regular {font-family: NeueHaasUnicaW1G-Light, 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.6rem;font-family: font-family: NeueHaasUnicaW1G-Bold, sans-serif;}
h2, .h2 {font-size: 1.75rem;}
h3 {font-size: 1.4rem;}

.lh-condensed {line-height: 1.25;}
.nowrap {white-space: nowrap}

/* 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.35rem;}
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-section {background-color: #ff6464}
.header-bottom {background-color: #fff; position: relative}
.intro-text {background-color: #ff6464;}
.header-bottom-img{width: calc(100vw + 2px);margin-left: -1px; margin-right: -1px; margin-top:-1px }
.content-bottom-img{width: calc(100vw + 2px); margin-left: -1px; margin-right: -1px; margin-bottom:-1px;max-width:102% }


/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.intro-text p.lead {position: relative; top:2rem; max-width:30rem; margin-left:auto; margin-right:auto;}
}


/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.header-bottom-img,.content-bottom-img{width: 100%;max-width: 100%; }
   
}	

/* Top-header
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.top-header {background-color:#fff; color:#002649}
.header-logo-img{margin-bottom: .2rem}
.lukuviikko img{width: 8rem}

/* Banner
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
.banner {background-color:#002649}
/*.banner {background: url(../img/pattern-2022.jpg);background-repeat:repeat;background-size: contain}*/
.banner-img img {width: 26rem; margin-top:3rem; margin-bottom: 3rem}

	

/* 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: #9cfff8;color:#002649}
.magazine-flex{width: 100%;margin: .5rem auto;position: relative;display: flex;flex-wrap: wrap;justify-content: center;}

.magazine-block { width: 80%; margin: 1rem 1.5rem 1.5rem;padding: 0;display: flex;}

a.magazine-link {color:#fff; text-decoration: none;}

a.magazine-link img {border:4px solid #fff}

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;}
    
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
.magazine-block {width: 10rem;padding: 0;}
.magazine-img {max-height:200px}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
.magazine-block {width: 14rem;}
.magazine-img {max-height:280px}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.magazine-block {width: 15rem;margin: 2rem 1.5rem;}
}
	
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
.magazine-block {width: 14rem;}
}

/* Extra large devices and retina (extra large desktops, 1920px and up)*/
@media (min-width: 1920px) {
.magazine-block {width: 16rem;}  
.magazine-img {max-height:450px}
}

/* Footer
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {background-color: #9cfff8; color:#002649}
footer.dblue-bg{background-color: #002649;color:#fff}
.footer-text {max-width: 50rem }
footer .logo-img {width: 25rem }
footer a {color:#ff6464; text-decoration: none }
footer  a:hover, a:focus {color: #ff6464;text-decoration: underline }
footer a:active {color: #ff6464}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */