@font-face {
        font-family: 'dropcontest';
        src: url('font/dropcontest.eot?53430010');
        src: url('font/dropcontest.eot?53430010#iefix') format('embedded-opentype'),
             url('font/dropcontest.woff2?53430010') format('woff2'),
             url('font/dropcontest.woff?53430010') format('woff'),
             url('font/dropcontest.ttf?53430010') format('truetype'),
             url('font/dropcontest.svg?53430010#dropcontest') format('svg');
        font-weight: normal;
        font-style: normal;
      }
      /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
      /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
      /*
      @media screen and (-webkit-min-device-pixel-ratio:0) {
        @font-face {
          font-family: 'dropcontest';
          src: url('../font/dropcontest.svg?53430010#dropcontest') format('svg');
        }
      }
      */
       
       [class^="icon-"]:before, [class*=" icon-"]:before {
        font-family: "dropcontest" !important;
        font-style: normal;
        font-weight: normal;
        speak: never;
       
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        margin-right: .2em;
        text-align: center;
        /* opacity: .8; */
       
        /* For safety - reset parent styles, that can break glyph codes*/
        font-variant: normal;
        text-transform: none;
       
        /* fix buttons height, for twitter bootstrap */
        line-height: 1em;
       
        /* Animation center compensation - margins should be symmetric */
        /* remove if not needed */
        margin-left: .2em;
       
        /* you can be more comfortable with increased icons size */
        /* font-size: 120%; */
       
        /* Font smoothing. That was taken from TWBS */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
       
        /* Uncomment for 3D effect */
        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
      }
       
      .icon-close:before { content: '\e800'; } /* '' */
:root
{
        --base-text-color: #3a4d61;
}
html, body {
        font-family: sans-serif;
        margin:0;
        padding:0;
}
header img{
        width:100%;
}
main {
        max-width: 1366px;
        width: 100%;
        margin: 0 auto;
        color:var(--base-text-color);
}
main h2 {
        text-align: center;
        font-weight: 100;
        font-size:2.5rem;
}
#prizes {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}
#prize-img img {
        width:100%;
}
#prize-description{
        width:100%;
        margin-left: 50px;
        font-size: 1.3rem;
}
@media screen and (max-width:768px)
{
        #prizes {flex-direction: column;}
        #prize-img {display: flex; justify-content: center;}
        #prize-img img {width:100%;}
        #prize-description p {text-align: center;}
}
form {
        max-width: 1100px;
        margin: 0 auto;
        font-size: 1.4rem;
        text-align: justify;
        margin-bottom:250px;
}
form label h3.heading {
        margin-bottom:10px;
        font-weight:normal;
}
form li {
        margin:150px 0;
}
form #first-part span.choice {
        width:100%;
        display:flex;
        align-items: center;
        margin:20px 0;
}
form #first-part span.choice label 
{
        margin-left:15px;
}
form input[type="text"] {
        border:none;
        outline:none;
        border-bottom:1px solid var(--base-text-color);
        color: var(--base-text-color);
        font-size:1.2rem;
}
#button-container
{
        width:100%;
        display:Flex;
        justify-content: center;
        align-items: center;
        margin-top:50px;
}
.button
{
        background-color:var(--base-text-color);
        color:white;
        display:Block;
        border-radius:50px;
        text-align: center;
        padding:10px 45px;
        font-weight: 100;
        cursor: pointer;
        transition: all 0.3s;
        border: 1px solid var(--base-text-color);
        font-size: 1.4rem;
}
a.button:hover {
        background-color:White;
        color:var(--base-text-color);
}
.two-columns
{
        display:Flex;
        flex-direction: column;
        max-width: 800px;
        margin: 0 auto;
}
.two-columns .row
{
        display:Flex;
        flex-direction: row;
        justify-content: space-between;
        margin:35px 0;
}

.two-columns .row span {width:50%;}
.two-columns .row span input {
        width:90%;
}
#second-part > h4 {
        text-align: center;
        font-weight:100;
}
span.final-check {
        text-align: left !important;
        font-size:1rem;
        display:flex;
        flex-direction: column;
        margin-top: -60px;
}
span.final-check span {
        margin:15px 0;
        width:100% !important; 
}
span.final-check input {
        width:auto !important;
        margin-right:25px;
}
#third-part > h4,#third-part > h5  {
        text-align: center;
        font-weight:100;
}
#third-part .two-columns a {
        width:45%;
}
#third-part .two-columns img{
        width:100%;
}
@media screen and (max-width:768px)
{
        .two-columns .row
        {
                flex-direction: column;
                margin:0;
        }
        .two-columns .row span 
        {
                margin-bottom: 35px;
                width:100%;
        }
        .two-columns .row span input[type="text"]
        {
                margin:0 auto;
                display:block;
        }
        span.final-check 
        {
                margin-top:0px;
        }
        span.final-check span
        {
                margin: 15px auto;
                width: 90% !important;
        }
        main h2
        {
                font-size:1.7rem;
        }
        #prize-description
        {
                margin-left:0px;
        }
        form
        {
                width:95%;
        }
        #first-part ol {
                padding-inline-start: 22px;
        }
        #third-part .two-columns a {
                width:100%;
                text-align: center;
        }
        #third-part .two-columns img {
                width:60%;
                margin:25px 0;
        }
}
.hidden
{
        display:none;
}
.active
{
        display:unset;
}
div.error
{
        text-align: center;
        border:1px solid red;
        background-color:lightcoral;
        color:White;
        font-weight:Bold;
        margin:0 auto;
        padding:10px;
        max-width:650px;
        display:none;
}
.buttons 
{
        position: absolute;
        right: 0;
        top: 35px;
        display: flex;
        flex-direction: column;
        text-align: right;
        align-items: flex-end;
}
.buttons a,.buttons:visited, .buttons a:active, .buttons a:focus 
{
        padding: 2px 15px;
        margin: 4px 0;
        background-color: #EEE;
        width: fit-content;
        text-decoration: none;
        color: #6b829a;
        font-family: Arial, sans-serif;
        transition:all 0.2s;
        cursor: pointer;
}
.buttons a:hover
{
        padding-right:30px;
}
.overlay
{
        background-color: #fafafa;
        padding: 30px;
        position: fixed;
        max-width: 550px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden auto;
        box-sizing: border-box;
        max-height: 80vh;
        box-shadow: 5px 5px 55px;
        display:none;
}
.overlay .close
{
        position: sticky;
        top: 0px;
}
.overlay .close i
{
        background-color: #fafafa;
        padding: 10px;
        font-size: 20pt;
        cursor: pointer;
}
div#prizes-overlay {
        max-width: 90vw;
        width: 90vw;
        background-color: White;
}
div#prizes-overlay img
{
        width:100%;
}
#prizes-overlay.overlay .close i {background-color:White;}
@media screen and (max-width:425px)
{
        .overlay
        {
                left: 17%;
                transform: translate(-10%, -50%);
        }
}