/*
 Theme Name: Salient Child
 Template: salient
 Version: 1.0.0
*/

@font-face {
    font-family: 'Raleway';
    src: url('campaign/raleway-reg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url('campaign/raleway-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrushUp Too';
    src: url('campaign/BrushUp-Too.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.page-template-template-campaign, .page-template-template-campaign p, .page-template-template-campaign li {
    line-height: 1.5;
    font-family: 'Raleway';
    margin-bottom: 20px;
    padding-bottom: 0;
}
.page-template-template-campaign a.underline {
    color: #146958;
}
.page-template-template-campaign a.underline:hover {
    text-decoration: underline;
}

.page-template-template-campaign a.rules {
    color: #fffad6;
    font-weight: 700;
    text-decoration: underline;
}
.page-template-template-campaign strong, .page-template-template-campaign b {
    font-family: 'Raleway';
    font-weight: 700;
}

.page-template-template-campaign a.regular-button {
    background-color: #146958;
    font-family: 'Raleway';
    font-size: 21px;
}

.page-template-template-campaign #header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:before, 
.page-template-template-campaign #header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:after, 
body.material.mobile.page-template-template-campaign  #header-outer.transparent:not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, 
body.page-template-template-campaign  #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines-button:after, 
body.page-template-template-campaign  #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:before, 
body.page-template-template-campaign  #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:after, 
.page-template-template-campaign #header-outer[data-lhe="animated_underline"].transparent .nectar-header-text-content a:after
{
    background-color: #000000 !important;
}
.page-template-template-campaign #header-outer.transparent #top nav > ul > li > a {
    color: #000000 !important;
}


.page-template-template-campaign h1, .page-template-template-campaign h2 {
    font-family: 'BrushUp Too';
    font-weight: 700;
    font-size: 55px;
    margin:0 auto 30px;
    max-width: 750px;
    line-height: 1.1;
    text-transform: uppercase;
}

.page-template-template-campaign h3 {
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 21px;
    line-height: 1.1;
    text-transform: uppercase;    
}

.campaign-ingress {
    text-align: center;
}

.campaign-ingress, .campaign-info, .campaign-rules {
    padding: 100px 0;
    position: relative;
}

.campaign-ingress:after, .campaign-info:after {
    position: absolute;
    display: block;
    content: "";
    z-index: 1;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
}

.campaign-ingress:after {
    background-image: url(campaign/kana_makuu.png);  
    width: 310px;
    height: 245px;
    right: -30px;
    bottom: -170px;
    
}

.campaign-info:after {
    background-image: url(campaign/kana_noja.png);
    width: 280px;
    height: 196px;
    left: -25px;
    bottom: -70px;
}

.page-template-template-campaign li{
    margin-bottom: 20px;
}

ol.main-rules {
    counter-reset: section;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

ol.main-rules > li {
    counter-increment: section;
    counter-reset: subsection;
    list-style: none;
}

ol.main-rules > li::before {
    content: counter(section) ". ";
}

ol.main-rules ol {
    list-style: none;
    padding-left: 20px;
    margin-top: 20px;
}

ol.main-rules ol > li {
    counter-increment: subsection;
    list-style: none;
}

ol.main-rules ol > li::before {
    content: counter(section) "." counter(subsection) ". ";
}


.campaign-ingress > .container-wrap, .campaign-info > .container-wrap, .campaign-rules > .container-wrap {
    background: transparent;   
    font-size: 21px;
}

.campaign-ingress, .campaign-rules {
    background-color: #0e0d07;
    color: #fffad6;
    
}

.campaign-ingress h1, .campaign-rules h3 {
    color: #fffad6;
    line-height: 1.1;
}

.campaign-info {
    background-color: #fffad6;
    color: #0B0A08;
}

.campaign-header {
    background-color: #fff9d6;    
    padding-top: 35%;
    position: relative;
}
    .campaign-header .house {
        background: url(campaign/header_kukko_ja_lato.png) no-repeat top center;
        background-size: cover;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }
    
    .campaign-header .sun {
        width: 21%;
        padding-top: 21%;
        background: url(campaign/header_aurinko.png) no-repeat center center;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        top: 54%;
        transform: translate(-50%, -50%) rotate(180deg);
        transform-origin: 50% 110%;
        animation: sunrise 1.5s ease-out forwards;
        animation-delay: .7s;
    }

@keyframes sunrise {
    0% {
        transform: translate(-50%, -50%) rotate(180deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
   
    .campaign-header .clouds1 {
        position: absolute;
        bottom: -50%;
        left: -200%;
        width: 300%;
        height: 100%;
        animation: cloudsAnim 240s linear infinite;
    }
        .campaign-header .clouds1_1 {
            position: absolute;
            top: 0;
            left:0;
            width: 33.33333%;
            height: 100%;
            background: url(campaign/header_pilvet_taka.png) no-repeat top center;
            background-size: 100% auto;
        }
        
        .campaign-header .clouds1_2 {
            position: absolute;
            top: 0;
            left:33.33333%;
            width: 33.33333%;
            height: 100%;
            background: url(campaign/header_pilvet_taka.png) no-repeat top center;
            background-size: 100% auto;
            transform: scaleX(-1);              
        }
        .campaign-header .clouds1_3 {
            position: absolute;
            top: 0;
            left:66.6666%;
            width: 33.33333%;
            height: 100%;
            background: url(campaign/header_pilvet_taka.png) no-repeat top center;
            background-size: 100% auto;            
        }
    .campaign-header .clouds2 {
        position: absolute;
        bottom: -75%;
        left: -200%;
        width: 300%;
        height: 100%;
        animation: cloudsAnim 220s linear infinite;
    }
        .campaign-header .clouds2_1 {
            position: absolute;
            top: 0;
            left:0;
            width: 33.33333%;
            height: 100%;
            background: url(campaign/header_pilvet_etu.png) no-repeat top center;
            background-size: 100% auto;           
        }
        
        .campaign-header .clouds2_2 {
            position: absolute;
            top: 0;
            left:33.33333%;
            width: 33.33333%;
            height: 100%;
            background: url(campaign/header_pilvet_etu.png) no-repeat top center;
            background-size: 100% auto;
            transform: scaleX(-1);       
        }
        .campaign-header .clouds2_3 {
            position: absolute;
            top: 0;
            left:66.6666666%;
            width: 33.33333%;
            height: 100%;
            background: url(campaign/header_pilvet_etu.png) no-repeat top center;
            background-size: 100% auto;           
        }
        
@keyframes cloudsAnim {
    from {
        left: -200%;
    }
    to {
        left: 0%;
    }
}

.campaign-rules .row_col_wrap_12_inner {
    align-items: center;
}

.page-template-template-campaign .video-container {
    position: relative;
    margin-top: 50px;
}

.page-template-template-campaign .video-container .play-btn {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:url(campaign/play_btn.png) no-repeat center center;
    background-size: 75px 75px;       
    cursor: pointer;
}

.page-template-template-campaign .video-container .video-player-container {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color:#000;
    display: none;
}
.page-template-template-campaign .video-container img {
    width: 100%;
}
.page-template-template-campaign .video-player-container video, .page-template-template-campaign .video-player-container iframe {
    width: 100%;
    height: 100%;
}

@media all and (max-width:1000px){
    .campaign-ingress:after {
        width: 150px;
        height: 119px;
        bottom: -70px;
    }
    
    .campaign-info:after {
        width: 140px;
        height: 98px;
        bottom: -30px;
    }
    
    .campaign-rules img {
        max-width: 100%;
    }
    
    .page-template-template-campaign .video-container {
        margin: 0 auto;
    }
}

@media all and (max-width:600px){
    .page-template-template-campaign h1, .page-template-template-campaign h2 {
        font-size: 40px;
    }
}