*{margin:0px; padding:0px;}
 

.clear{clear:both;}
.bgOrange{ background-color: #fe5f1e; color: #fff; }
.btn{ padding: 15px 25px; border-radius: 50px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}
.btn:hover{ transform: scale(1.2); }
.copy{ font-size: 0.8em; }

a{ text-decoration: none;  }

body {
    font-family: "Outfit", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #1d382b;
    font-size: 1.3em;
    line-height: 1.5;
}

header {
    color: #1d382b;
    padding: 1rem 0;
    text-align: center;
}

main {
    text-align: center;
}

footer {
    text-align: center;
    padding: 1rem 0;
    width: 100%;
    bottom: 0;
    font-size: 0.9em;
}
p{
    margin-top: 20px;
}
li{margin-left:20px; margin-top: 10px;}



.logo{
    width: 8%;
    position: absolute;
    top: 5%; left: 10%; 
}
.logo img{ width: 100%; }

.headerInner{
    width: 80%;
    max-width: 1400px !important;
    margin: 15% auto 0% auto;
    position:relative;
    text-align: center;
}
.headerTitle{
    width: 50%;
    margin: 5% auto 1% auto;
}
.headerPrizes{
    width: 100%;
    margin: 5% auto;
}

.headerTitle img, .headerPrizes img, .headerDate img, .prize img{ width: 100%; }
.prize{ width: 40%; margin: 2%; 
    display: inline-block; 
    vertical-align: top; 
}
.prize:nth-child(7){
    margin-top: 0%;
}

.headerDate{
    width: 100%;
}
.headerBtn2{
    border:#1d382b solid 2px;
}
.headerBtn1{
    margin-top: 0px; font-weight: bold;
    font-size: 1.5vw; display: inline-block;
}


.arrow{
    text-align: center;
    margin: 2% auto 0% auto;
    clear:both; 
    position: fixed;
    left: 0; 
    bottom: 10px;
    z-index: 10;
    width: 100%;
}
.arrow img{
    width: 100%; 
    max-width: 80px; 
}




.left, .right{
    display: inline-block;
    vertical-align: middle;
    width: 30%;
}
.right{margin-left: 2%; }
.left img, .right img{width: 100%; }


.sectionTitle{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin: 5% auto;
}
.sectionContent{
    width: 70%; 
    margin: auto;
    padding-bottom: 5%;
    position:relative; 
}
.secBlock{
    margin: 10% auto;
}


.section{
    position:relative;
}
.sectionbg{
    position:absolute;
    top: 0px; 
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}



.alRight{ text-align:right; }
.alLeft{ text-align:left; }



/* backgrounds */
#wrap{
    width: 100%; height: 100%;
    z-index: 0;
    overflow:hidden;
    position: absolute;
}
.decor img{ width:100%; }
.decor{ position: absolute; z-index: 0; }
.decor1{ width: 10%; left: 0%; top: -7%; max-width: 200px; }
.decor2{ width: 10%; left: 45%; top: -7%; max-width: 200px; }
.decor3{ width: 13%; right: 5%; top: -3%; max-width: 250px; }

.decor4{ width: 13%; left: -5%; top: 60%; max-width: 250px; }
.decor5{ width: 15%; right: 2%; top: 65%; max-width: 300px; }

.decor11{ width: 9%; left: 32%; top: -10%; max-width: 150px; }
.decor10{ width: 12%; left: 25%; top: 110%; max-width: 200px; }

.decor6{ width: 13%; left: -3%; top: 15%; max-width: 300px; }
.decor8{ width: 13%; right: -5%; top: 25%; max-width: 300px; }

.decor9{ width: 13%; left: 15%; top: 35%; max-width: 300px; }
 
.decor61{ top: 65%; }
.decor51{ width: 13%; right: -5%; top: 70%; max-width: 300px; }
.decor91{ top: 85%; }
.decor81{ top: 90%; right: 5%; left: auto; width: 10%; max-width: 200px; }


.decor7{ width: 15%; left: 42%; bottom: -5%; max-width: 350px; }


.contacts{ width: 100%; clear:both; margin: 40px auto 10px; text-align:center;}
.contactsTitle{font-weight: bold; }
.contactsContent{font-size: 0.8em; }
.contacts a{color: #333; text-decoration: underline;}
.contel:first-child{margin-right: 20px; }

.noteikumi{
    text-align: left;
}

/* Modal styles */
.modal {
    display: none; 
    position: fixed; 
    z-index: 100000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.8); 
}
 
.modal-content {
    color: #fff; 
    margin: 10% auto 0% auto; 
    padding: 20px;
    width: calc(80% - 40px); 
    height: calc(80% - 40px); 
    overflow-y: auto; 
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute; right: 20px; top: 20px; 
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.modal-content table{ border-collapse:collapse; }
.modal-content table td{ border: solid 1px #fff; padding : 10px; }
.modal-content a{color: #fff; text-decoration: underline; }


.winnerList ul{list-style: none;}
.winnerList ul li{list-style: none;}
.winnerList{text-align:left;}
.winnerList{width: 60%; margin: auto;}
.over{width: 100%; text-align:center; font-weight: bold; color: #fe5f1e; }



.gameBlock{
    margin: 5% auto 5% auto;
}
.game{ display: none;}
.gameIntro{ display:block; width: 40%; margin: auto; position:relative; text-align: center; }
.gameIntroBg{
    width: 50%; margin:auto;
}
.gameIntroBtn{
    margin-top: 20%; 
    display: inline-block; 
    width: 50%;
    position:absolute; left: 20%; top: 0%;
}
.gameData{text-align: center;}
.gameData .gameInput{ width: 40%; margin: 20px auto 0px auto; }
.gameData .gameInput input{ width: calc(100% - 80px); padding: 20px 40px; border-radius: 100px; background-color: #f1f2f2; border: none; outline: none; font-size: 1.2vw; }
.gameDataBtn{width: 100%; padding: 10px 0px; }
.checkbox{
    width: 32px; height: 32px; border-radius: 32px; cursor: pointer;
    border: solid 1px #666; transform: all 0.3s; float:left;
    margin-left: 20px;
}
.check{width: 16px; height: 16px; border-radius: 16px; display: none; background-color: #666; margin: 8px 0px 0px 8px; }
.checkbox.active .check{ display: block; }
.checkboxText{ float:left; margin-left: 10px; width: calc(90% - 62px); text-align: left; font-size: 1vw; }
.formError{
    border: solid 1px #ff0000; color: #ff0000; display:none; border-radius: 50px; padding: 15px 0px;
}

.gameMainProgress{width: 40%; margin: auto;}

.gameMainAnswers, .gameMainQuestion{margin-top: 5%; }
.gameMainAnswer{ width: calc(60% - 80px); padding: 20px 40px; border-radius: 100px; background-color: #f1f2f2; cursor: pointer; margin: 10px auto 0px auto; text-align: left; border: solid 2px #fff; }
.gameMainAnswer.active{ border: solid 2px #a3c500;  }
.gameMainQuestion{font-size: 1.1em;}
.gameQuestionAnswer{ width: calc(60% - 80px); padding: 20px 40px; margin: 10px auto;  }
.ligumsBtn{font-size: 1.2vw; padding: 10px 30px;}

.winnerstitle{margin-bottom: 1%; }
.noteikumiSec{margin-top: 5%;}
.winnerBlock{
    clear:both; width: 50%;
    margin: 30px auto 0px auto; 
}
.winnerLeft{ width: 40%; margin-right: 3%; display: inline-block; vertical-align:middle; }
.winnerRight{ width: 55%;  text-align:left; display: inline-block; vertical-align:middle;}
.decor100{left: -2%; top: 0%;}
.decor101{ right: -5%; top: 10%;  }




@media all and (min-width: 1920px){
    .headerInner{
        margin: 190px auto 0px auto;
    }
    .logo{ width: 150px; }
    .headerBtn1{font-size: 25px;}
}



@media all and (max-width: 980px){
    .btn{padding: 5px 15px; }
    .winnerList{width: 90%; }
    .headerLeft, .headerRight{
        width: 100%;
        display: block;
        margin: 3% auto;
    }
    .headerLeft{ width: 60%; }
    .logo{
        width: 20%; left: 40%; top: 3%;
    }
    .headerInner{ margin: 30% auto 0% auto; width: 90%; }
    .prize{ margin:0%; }
    .headerBtn1{ font-size: 1em; }
    .left, .right{
        width: 90%; 
        display: block;
        float:none;
        margin: auto;
    }
    .secBlock {
        display: flex;
        flex-direction: column;
    }
    div.alLeft, div.alRight {
    order: 2;
    text-align:center;
    }
    .secBlock img{ max-width: 640px !important; width: 100%; }
    .headerTitle{width: 100%; }
    .gameData .gameInput{width: 100%;}
    .gameData .gameInput input{font-size: 4vw; }
    .gameMainProgress{width: 80%;}
    .gameMainAnswer{width: calc(100% - 60px); padding: 10px 30px;}
    .checkboxText{font-size: 2vw;}
    .gameIntroBtn{margin-top: 15%; left: 20%;}

}


@media all and (max-width: 480px){
    .prize{ width:80%; }
    .headerLeft{ width: 90%; }
    .sectionContent{ width: 90%; }
    .secBlock img{width: 50%; }
    .gameIntroBtn{margin-top: 15%; left: 15%;}
    
}