:root {
    --blue: #0c9fda;
    --dark-blue: #00375f;
    --black: #1b1b1b;
    --light-gray: #f5f5f5;
}

body {
    font-size:16px;
    margin:0px;
    padding:0px;
    color:var(--black);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Fjalla One", sans-serif;
    font-weight: 400; 
    font-style: normal;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:2em;
}

h1 {
    display:none!important;
}

h2, h3 {
    font-size:clamp(1.7em, 2.6vw, 2.8em);
}
h4 {
    font-size:clamp(1.4em, 2.2vw, 2.3em);
}

h3:after, h4:after {
    content:"";
    width:8%;
    background:#d9d9d9;
    height:2px;
    display:block;
    position:relative;
    top:0.7em;
    left:46%;
}

a {
    color: var(--blue)!important;
    text-decoration:underline;
}

p, a, em {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing:0.04rem;
    font-size:clamp(1rem, 1.4vw, 1.4rem);
    color:#5E5E5E;
    text-align:center;
}
em {
    font-style:italic;
}
strong {
    font-weight:bold;
}

.blue {
    color: var(--blue);
}

p.left, a.left {text-align:left;} 

p.big-text {
    color:var(--black);
    font-size:clamp(1.5rem, 1.8vw, 2.3rem);
}
p.med-text {
    color:var(--black);
    font-size:clamp(1.3rem, 1.3vw, 1.7rem);
}

.section {
    padding-top:2%;
    padding-bottom:2%;
    padding-left:clamp(2em, 25vw, 30em);
    padding-right:clamp(2em, 25vw, 30em);
    width:100%;
    box-sizing:border-box;
}


/*-- 1__HASHTAG SECTION start --*/
#hashtag {
    width:100%;
    padding:1.5rem;
    box-sizing:border-box;
    text-transform:uppercase; 
}

#hashtag>a{
    color:var(--blue);
    font-family: "Fjalla One", sans-serif;
    font-size:clamp(0.9rem, 2vw, 1.3rem);
    margin:0 auto;
    display:block;
    width:auto;
    text-align:center;
    text-decoration:none;
    letter-spacing:0.08em;
}
/*-- 1__HASHTAG SECTION end --*/


/*-- 2__HASHTAG SECTION start --*/
.img.section {
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    box-sizing:border-box;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding-top:clamp(12em, 10%, 30em);
    padding-bottom:clamp(12em, 10%, 30em);
}
.img.section#heroImg {
    background-image:url("img/hero.webp");
}

.img.section#heroImg div {
    padding:2.4rem;
    background-color:rgba(46, 163, 242, 0.9);
    width: clamp(14rem, 40vw, 28rem);
    text-align:center;
}
.section#heroImg h2 {
        margin:0px;
}
/*-- 1__HASHTAG SECTION end --*/


/*-- 3__GRAY SECTION 1 start --*/
.text.section.gray {
    background-color:var(--light-gray);
}
/*-- 3__GRAY SECTION 2 start --*/


/*-- 3__SOCIAL ICONS (blue) start --*/
.social.section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.social.section {
    background-color:var(--blue);
    padding:4%;
}
.section.blue .social-icon:hover>svg{
    fill:#fff;
}

a.social-icon {
    text-decoration:none;
    margin:0 1em;
    width:2em;
}

a.social-icon>svg{
    width:100%;
    height:100%;
}
/*-- 3__SOCIAL ICONS (blue) end --*/


/*-- 4__IMAGE GALLERY SECTION start --*/
.img.section.masonry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding:5% 10vw;
}
.img.section.masonry img{
    width:100%;
    padding:4px;
    box-sizing:border-box;
}
/*-- 4__IMAGE GALLERY SECTION end --*/


/*-- 5__CTA SECTION start --*/
.section#cta {
    padding-top:0px;
    padding-bottom:0px;
}
#cta.section {
    width:auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    padding-right:0px;
}
#cta h4, #cta p, #cta a {
    text-align:left;
}
#cta h4:after {
    left:0px;
}

#cta p {
    text-wrap:balance;
}

#cta>.col{
    width:50%;
    /* min-width:40em; */
}
#cta>.col:first-child {
    padding-top:4%;
    padding-bottom:10%;
    padding-right:5%;
    box-sizing:border-box;
}

#cta>.col>img {
    height:100%;
    /* max-height: 74em; */
    width: 100%;
    object-fit: cover;
}

a#ctaBtn {
    text-decoration:underline;
    text-underline-offset:0.4em;
    letter-spacing:0.1em;
    text-transform:uppercase;
    font-weight:bold;
    display:inline-flex;
}

a#ctaBtn span{
    margin-right:0.3em;
}
a#ctaBtn svg{
    margin:auto 0;
}

a#ctaBtn:hover span, a#ctaBtn:hover svg {
    color:var(--dark-blue);
    fill:var(--dark-blue);
    /* text-decoration-color:var(--dark-blue); */
}

/*-- 5__CTA SECTION end --*/


/*-- 6__SOCIAL ICONS (black) start --*/
.social.section.black {
    background-color:var(--black);
}

.section.black .social-icon:hover>svg{
    fill:var(--blue);
}
/*-- 6__SOCIAL ICONS (blue) end --*/


/*-- 7__COPYRIGHT start --*/
.copyright p {
    font-size:clamp(0.8rem, 1vw, 1rem);
}
/*-- 7__COPYRIGHT end --*/



@media only screen and (max-width:980px) {

    .section {
        padding: 6% 10%;
        width:100%;
        box-sizing:border-box;
    }

/*-- 5__CTA SECTION start --*/

    #cta.section {
        padding-left:10%;
        padding-right:10%;
        /* box-sizing:border-box; */
        display: flex;
        flex-direction: column-reverse !important;
        width: auto;
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
    }

    a#ctaBtn {
        display:flex;
        justify-content: center!important;
    }



    #cta h4, #cta p, #cta a {
        text-align:center;
    }
    #cta h4:after {
        left:46%;
    }
    #cta>.col{
        width:100%;
        /* min-width:40em; */
    }
    #cta>.col:first-child {
        padding-right:0px;
    }

    #cta>.col>img {
        height:20em;
        width: 100%;
        object-fit: cover;
    }

}
/*-- 5__CTA SECTION end --*/