*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body{
    
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    height: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
    color: #303030;
    
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Arvo', serif;
    color: #404040;
}
p {
    letter-spacing: 0.02em;
    margin: 0 0 1em;
}
a{
    text-decoration: none;
}
a:focus{
    text-decoration: underline;
}
img{
    max-width: 100%;
    height: auto;
}
/* Mobile */
.container {
    padding: 0 10vw;
}
/*Header*/
header{
    background: url(../images/mob-background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}
header h1{
    background: linear-gradient(90deg,#FC655B,#FFC95F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 2.625rem;
    line-height: 3rem;
    text-align: center;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}
header a{
    color: #FFF;
}
header .container {
    align-items: flex-end;
    display: flex;
    flex: 1;
    padding-bottom: 15vw;
}
header .text{
    letter-spacing: 0.02em;
    line-height: 1.5rem;
    text-align: center;
}

.header-menu{
    margin-top: 10vw;
    text-align: right;
}
.header-menu ul{
    list-style: none;
    display: flex;
    flex-direction: column;
}
.header-menu ul li{
    margin: .25em 0;
    display: flex;
    justify-content: flex-end;
}
.header-menu ul li a{
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1.5rem;
    text-transform: uppercase;
    display: flex;
    align-content: center;
    padding: .5em 0;
}

.header-menu ul li a::after{
    content: url(../images/icons/btn-arrow-icon-light.svg);
    padding: 0 1em;
    transition: all 0.6s ease-in-out;
}
.header-menu ul li a:hover::after{
    transform: translatex(12px);
}
header .media{
    display: none;
}
/*Scroll down*/
.scrloll-down {
    margin-bottom: 10vw;
}
.scrloll-down-icon {
    text-align: center;
}
.scrloll-down-icon::after{
    content: '';
    background-image: url(../images/icons/icon-scroll.svg);
    background-size: 32px 32px;
    display: inline-block;
    height: 32px;
    width: 32px;
    animation-duration: 0.8s;
    animation-iteration-count: 5s infinite;
    animation-name: scroll;
    transition-timing-function: ease-in-out;
    animation: scroll 5s infinite;
}
@keyframes scroll{
  0%{
    transform: translateY(0px);
    }
  20%{
    transform: translateY(12px);
    }
    100%{
        transform: translateY(0px);
    }
}

/*Activities*/
.activities{
    background-color: #E5E5E5;
}
.activities .container{
    padding: 15vw 10vw;
}
.activities h1, .activities h2, .activities h3, .activities h4, .activities h5,
.activities h6{
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: -0.03em;
    margin: 0 0 2rem;
}
.activities p{
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.313;
    margin: 0 0 2rem;
}
/*Activities links*/
.activities-menu{
    padding-top: 5vw;
    padding-bottom: 5vw;
    transform: translateX(10vw);
}
.activities-menu ul{
    list-style: none;
}
.activities-menu ul li{
    margin: 1em 0 0 -10vw;
}
.activities-menu ul li a{
    color: #303030;
    font-size: .75rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .8em 1.5em .8em 0;
}
.activities-menu ul li a:after{
    content: '';
    background-image: url(../images/icons/btn-arrow-icon-dark.svg);
    background-size: 24px 24px;
    display: inline-block;
    height: 24px;
    width: 24px;
    margin: 0 .7em 0 .7em;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.vabaaeg{
    background-color:#F3956F;
}
.sport{
 background-color: #F6C86D;
}
.kunst{
    background-color: #F4A86F;
}
.tants{
 background-color: #F5C16E;
}
.tervis{
    background-color: #F38F6F;
}
.koolitus{
    background-color: #F2886E;
}
.loodus{
    background-color: #F49B6F;
}
.muusika{
    background-color: #F4B46F;
}
.kirjandus{
    background-color: #F3A16F;
}
.teater{
    background-color: #F5BB6E;
}
.tehnika{
    background-color: #F4AF70;
}

.muu{
    background-color: #F3826E;
}
.activities .scrloll-down {
    text-align: center;
    padding-bottom: 10vw;
    margin-bottom: initial;
}
/*Videod*/
.videos .container{
    padding: 0;
}
.videos .media {
    margin-bottom: 1.2rem;
}
.videos .container:last-child .media {
    margin-bottom: 0;
}
.videos:last-child .card .media {
    margin-bottom: 0;
}
.card-text{
    padding: 10vw 10vw;
}
.card-text p{
    font-weight: 300;
    line-height: 1.313rem;
    margin: 0 0 2rem;
}
.card-text .heading{
    color: #404040;
    font-family: 'Arvo', serif;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}
.card-text .quote p{
    font-weight: 600;
    line-height: 1.313rem;
    letter-spacing: 0.02em;
}
.card-text .person{
    text-align: right;
    font-style: italic;
    font-weight: 300;
    line-height: 1.313rem;
    letter-spacing: 0.02em;
}
.person p {
    margin: 0;
}
/*Deskdop*/
@media screen and (min-width: 780px){
    .container{
        padding: 7.5vw 7.5vw;
    }
    .card.no-deskdop{
        display: none;
    }
    header{
        background: url(../images/desk-background.jpg) no-repeat center center fixed;
    }
    header .container {
        align-items: center;
        padding-bottom: 5vw;
    }
    header .media{
        display: block;
        padding: 0 0 0 2.5vw;
        text-align: right;
        width: 55vw;
    }
    header h1{
        text-align: left;
        font-size: 3rem;
        line-height: 3.5rem;
    }
    header .text {
        font-size: 1.125rem;
        padding-right: 2.5vw;
        text-align: left;
        width: 25vw;
    }
    .header-menu{
        margin-top: 2.5vw;
    }
    .header-menu ul li a{
        padding: .2em 0;
    }
    .scrloll-down {
        margin-bottom: 5vw;
    }
    /*Activities*/
    .activities {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .activities .container {
        padding: 7.5vw 7.5vw 5vw;
        display: flex;

    }
    .activities .text{
        padding-right: 2.5vw;
        width: 25vw;
    }
    .activities h1, .activities h2, .activities h3, .activities h4, .activities h5, .activities h6{
        font-size: 3rem;
        line-height: 3.5rem;
    }
    .activities p{
        font-size: 1.125rem;
        line-height: 1.625rem;
    }
    /*Activites menu*/
    .activities-menu{
        padding-left: 2.5vw;
        padding-top: 0;
        padding-bottom: 0;
        transform: initial;
        width: 55vw;
    }
    .activities-menu ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .activities-menu ul li {
        margin: .3em 0;
        padding: 0 0 0 .6em;
    }
    .activities-menu ul li a{
        padding: 2em 1.5em;
        font-size: 1em;
    }
    .activities-menu ul li a:hover:after{
        background-size: 24px 24px;
        height: 24px;
        width: 24px;
        transform: translatex(12px);
    }
    .activities .scrloll-down {
        text-align: center;
        padding-bottom: initial;
        margin-bottom: 5vw;
    }
    /*Videos*/
    .videos {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }
    .videos .container {
        padding: 7.5vw 7.5vw;
    }
    .card {
        display: flex;
        padding-bottom: 7.5vw;
    }
    .card .media{
        padding: 0 0 0 2.5vw;
        margin-bottom:0;
        width: 55vw;
    }
    .card.media-left .media{
        order: 1; 
        padding: 0 2.5vw 0 0;
    }
  
    .videos .container:last-child {
        padding-bottom: 0;
    }
    
    .card-text{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-size: 1.125rem;
        padding: 0 2.5vw 0 0;
        width: 25vw;
    }
    .card.media-left .card-text{
        order: 2;
        padding: 0 0 0 2.5vw;
    }
    .card-text._align_s {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .card-text._align_s .heading{
        align-self: flex-start;
    }
    .card-text .heading, .card-text .heading p{
        font-size: 3rem;
        line-height: 3.5rem;
        letter-spacing: -0.03em;
    }
    .card-text p, .card-text .quote p{
        line-height: 1.625rem;
    }
    .card-text p{
        margin: 0 0 1.8rem;
    }
    .card-text._align_s .person, .card-text._align_s .text, .card-text._align_s .quote {
        align-self: flex-end;
    }
    .card-text._align_s .text {
        transform: translateY(2rem);
    }
    .card-text._align_s .quote{
        transform: translateY(1rem);
    }
    .card-text .person p{
        margin: 0;
    }
}