@import "vars.css";

body, html {
    height: 100%;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

embed{
    pointer-events: none;
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
    /* Navigation styles start here */
    header {
        background: transparent;
        text-align: center;
        position: absolute;
        width: 100%;
        z-index: 999;
        animation: fadeInAnimation ease 2s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .social-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 170px;
        margin-bottom: 1vw;
        position: absolute;
        right: 10%;
        top: 2vh;
    }

    .logo-center {
        display: flex;
        position: absolute;
        top: 30vh;
        justify-content: center;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .logo-container {
        width: 100%;
    }

    .logo {
        width: 100%;
    }

    @keyframes fadeInAnimation {
        0% {
            opacity: 0;
            margin-top: 20vw;
        }
        100% {
            opacity: 1;
            margin-top: 0;
        }
    }

    .nav-toggle {
        display: none;
    }

    .nav-toggle-label {
        position: absolute;
        top: 5vw;
        left: 0;
        margin-left: 1em;
        height: 25%;
        display: flex;
        align-items: center;
    }

    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        display: block;
        background: var(--navigation-color);
        height: 3px;
        width: 2em;
        border-radius: 2px;
        position: relative;
    }

    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
        content: '';
        position: absolute;
    }

    .nav-toggle-label span::before {
        bottom: -14px;
    }

    .nav-toggle-label span::after {
        top: 7px;
    }

    nav {
        position: absolute;
        text-align: left;
        margin-top: 15%;
        left: 0;
        background: transparent;
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav li {
        margin-bottom: 1em;
        margin-left: 1em;
    }

    nav a {
        color: var(--navigation-color);
        text-decoration: none;
        font-size: 5vw;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
        font-family: var(--font-style);
    }

    nav a:hover {
        color: #ffffff;
    }

    .nav-toggle:checked ~ nav {
        transform: scale(1,1);
    }

    .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
    }

    /* Navigation styles end here */
    /* Parallax stuff starts here */
    .parallax {
        height: 75%;

        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .image1 {
        background-image: url("../images/bg1.webp");
    }

    .image2 {
        background-image: url("../images/bg2.webp");
    }

    .image3 {
        background-image: url("../images/bg3.webp");
    }

    .image4 {
        background-image: url("../images/bg4.webp");
    }

    .image5 {
        background-image: url("../images/bg5.webp");
    }

    .image6 {
        background-image: url("../images/bg6.webp");
    }
    /* Parallax stuff ends here */
    /* Content styles start here */
    .items {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .section-img-container {
        width: 80%;
        margin-top: 3.5vh;
    }

    .benifits-img_mobile {
        width: 50%;
        display: block;
        margin-left:auto;
        margin-right:auto;
    }

    .section1 {
        height: auto;
        background-color:var(--section-background1);
        position:relative;
        overflow-x:hidden;
    }
    .section1-textdiv {
        width: 80%;
        text-align: center;
        margin-bottom: 2vw;
    }
    .section1-textdiv h1 {
        font-size: 9vw;
        color: var(--text-color1);
        font-family: var(--font-style), Arial;
    }
    .section1-textdiv ul {
        color: var(--text-color1);
        font-family: var(--font-style2);
        font-size: 2.2rem;
        text-align: center;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .section2_mobile {
        height: auto;
        background-color:var(--section-background2);
        position:relative;
        overflow-x:hidden;
    }

    .section2-textdiv_mobile {
        width: 80%;
        text-align: center;
        margin-bottom: 2vw;
    }

    .section2-textdiv_mobile h1 {
        font-size: 7vw;
        color: var(--text-color2);
        font-family: var(--font-style), Arial;
    }

    .section2-textdiv_mobile p {
        color: var(--text-color2);
        font-family: var(--font-style2);
        font-size: 2.2rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    #logosection_desktop {
        display: none;
    }

    .section3 {
        height: auto;
        background-color:var(--section-background3);
        position:relative;
        overflow-x:hidden;
    }

    .section3-textdiv {
        width: 80%;
        text-align: center;
        margin-bottom: 2vw;
    }

    .section3-textdiv h1 {
        font-size: 9vw;
        color: var(--text-color1);
        font-family: var(--font-style), Arial;
    }

    .section3-textdiv p {
        color: var(--text-color1);
        font-family: var(--font-style2);
        font-size: 2.2rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .lielas_pogas img {
        width: 60%;
        margin-top: 1vh;
    }

    .section4 {
        height: auto;
        background-color:var(--section-background4);
        position:relative;
        overflow-x:hidden;
    }

    .section4-textdiv {
        width: 80%;
        text-align: center;
        margin-bottom: 2vw;
    }

    .section4-textdiv h1 {
        font-size: 9vw;
        color: var(--text-color2);
        font-family: var(--font-style), Arial;
    }

    .section4-textdiv p {
        color: var(--text-color2);
        font-family: var(--font-style2);
        font-size: 2.2rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .section5 {
        height: auto;
        background-color:var(--section-background5);
        position:relative;
        overflow-x:hidden;
    }

    .section5-textdiv {
        width: 80%;
        text-align: center;
        margin-bottom: 2vw;
    }

    .section5-textdiv h1 {
        font-size: 9vw;
        color: var(--text-color1);
        font-family: var(--font-style), Arial;
    }

    .section5-textdiv p {
        color: var(--text-color1);
        font-family: var(--font-style2);
        font-size: 2.2rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .section6 {
        height: auto;
        background-color:var(--section-background4);
        position:relative;
        overflow-x:hidden;
    }

    .section6-textdiv {
        width: 80%;
        text-align: center;
        margin-bottom: 2vw;
    }

    .section6-textdiv h1 {
        font-size: 9vw;
        color: var(--text-color2);
        font-family: var(--font-style), Arial;
    }

    .section6-textdiv p {
        color: var(--text-color2);
        font-family: var(--font-style2);
        font-size: 2.2rem;
        text-align: center;
        margin: 0;
        padding: 0;
    }
    /* Content styles end here */

    /* Footer start */

    footer {
        background: var(--section-background5);
    }

    .footer-vert {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: 30%;
    }

    .footer-text span{
        font-size: 4vw;
        color: var(--text-color1);
        font-family: var(--font-style);
    }

    .footer-text a{
        color: var(--text-color1)
    }

    .credits {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        width: 50%;
    }

    .credits span {
        font-family: 'Bebas Neue', cursive;
        color: var(--text-color1);
    }

    .credits a {
        width: 10%;
    }

    .credits img {
        width: 100%;
    }

    #footer-split {
        display: none;
    }

    /* Footer end */

    /* Scroll wheel style start */
    .scroll4::-webkit-scrollbar {
        width: 10px;
    }

    .scroll4::-webkit-scrollbar-thumb {
        background: #797979;
        border-radius: 20px;
    }

    .scroll4::-webkit-scrollbar-track {
        background: #4e4e4e;
        border-radius: 20px;
    }
    /* Scroll wheel style end */

    /* Scroll to top button style start */
    #button {
        display: inline-block;
        background-color: var(--button-color);
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 4px;
        position: fixed;
        bottom: 30px;
        right: 30px;
        transition: background-color .3s,
        opacity .5s, visibility .5s;
        opacity: 0;
        visibility: hidden;
        z-index: 1000;
    }
    #button::after {
        content: "^";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        font-size: 4.5em;
        line-height: 70px;
        color: #fff;
    }
    #button:hover {
        cursor: pointer;
        background-color: #333;
    }
    #button:active {
        background-color: #555;
    }
    #button.show {
        opacity: 1;
        visibility: visible;
    }
    /* Scroll to top button style end */
    .button-box {
        width: 1000px;
        position: absolute;
        animation: mobile linear infinite;
        animation-duration: 15s;
        display: inline;
    }

    .button-box span {
        color: var(--text-color1);
        font-size: 3rem;
        font-family: var(--font-style2);
    }

    @keyframes mobile {
        0%   {
            left: 110%;
        }
        100% {
            left: -250%;
        }
    }

    .modal-contents2 {
        background-color: var(--section-background1);
        margin: 5% auto; /* 15% from the top and centered */
        padding: 20px;
        border-radius: 0.5vw;
        width: 90%; /* Could be more or less, depending on screen size */
    }

    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-contents {
        background-color: var(--section-background1);
        margin: 5% auto; /* 15% from the top and centered */
        padding: 20px;
        border-radius: 0.5vw;
        width: 80%; /* Could be more or less, depending on screen size */
    }

    .modal-contents p {
        font-size: 2vh;
    }

    .modal-contents2 p {
        font-size: 2vh;
    }

    /* The Close Button start */
    .close2 {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

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

    .close3 {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

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

    /* The Close Button start */
    /* Competition banner style start */

    #konkurssh1 {
        color: var(--text-color2);
        font-size: 3.5vh;
    }

    .konkurss-banner {
        background: var(--section-background2);
        height: 5.5vh;
        position: relative;
        overflow-x: hidden;
        display: none; /* Remove this to enable top modal */
    }
    /* Competition banner style end */
}
@media (min-width:400px) {/* Little bit wider phones */
    #footer-split {
        display: block;
    }
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .footer-vert {
        top: 20%;
    }

    .credits span {
        font-size: 2rem;
    }
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .benifits-img {
        width: 30%;
    }

    .section1-textdiv ul {
        font-size: 3rem;
    }

    .section2-textdiv p {
        font-size: 3rem;
    }

    .section3-textdiv p {
        font-size: 3rem;
    }

    .lielas_pogas img {
        width: 40%;
    }

    .section4-textdiv p {
        font-size: 3rem;
    }

    .section5-textdiv p {
        font-size: 3rem;
    }

    .section6-textdiv p {
        font-size: 3rem;
    }

    .credits span {
        font-size: 3rem;
    }
}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
    .nav-toggle-label {
        top: 2vw;
    }

    nav {
        margin-top: 5%;
    }

    .footer-text span {
        font-size: 3rem;
    }

    .credits a {
        width: 8%;
    }

    .modal-contents2 {
        width: 60%; /* Could be more or less, depending on screen size */
    }
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    .logo-container {
        width: 80%;
    }

    #logosection_mobile {
        display:none;
    }

    #logosection_desktop {
        display:block;
    }

    .social-container {
        right: unset;
        left: 3%;
    }

    .nav-toggle-label {
        display: none
    }

    nav {
        all: unset;
    }

    nav a {
        opacity: 1;
        font-size: 4rem;
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
        margin-right: 1%;
        margin-top: 0.5%;
    }

    header {
        display: grid;
        grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr;
    }

    .items {
        flex-direction: row;
        margin: 0 2vh 0 2vh;
    }

    .section-img-container {
        margin: 3.5vh 1vh 3.5vh 1vh;
    }

    .section1-textdiv h1 {
        font-size: 4vw;
    }

    .section1-textdiv ul {
        font-size: 2rem;
    }

    .section3-textdiv h1 {
        font-size:4vw;
    }

    .section3-textdiv p {
        font-size: 2.2rem;
    }

    .lielas_pogas img {
        width: 30%;
        margin-left: 1vh;
        margin-top: 0;
    }

    .items_section2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 2%;
        margin-right: 2%;
    }

    .section-img-container_section2 {
        width: 32%;
        text-align: center;
        margin-top: 3.5vh;
    }

    .benifits-img_section2 {
        width: 50%;
    }

    .section2_desktop {
        height: auto;
        background-color: var(--section-background2);
        position: relative;
        overflow-x: hidden;
    }

    .section2-textdiv_desktop {
        width: 32%;
        text-align: center;
        margin-bottom: 2vw;
    }

    .section2-textdiv_desktop h1 {
        font-size: 4vw;
        color: var(--text-color2);
        font-family: var(--font-style), Arial;
    }

    .section2-textdiv_desktop p {
        color: var(--text-color2);
        font-family: var(--font-style2);
        font-size: 2.2rem;
        margin: 0;
        padding: 0;
    }

    .section4-textdiv h1 {
        font-size:4vw;
    }

    .section4-textdiv p {
        font-size: 2.2rem;
    }

    .section5-textdiv h1 {
        font-size:4vw;
    }

    .section5-textdiv p {
        font-size: 2.2rem;
    }

    .section6-textdiv h1 {
        font-size:4vw;
    }

    .section6-textdiv p {
        font-size: 2.2rem;
    }

    .footer-text span {
        font-size: 2.2rem;
    }

    .credits {
        width: 20%;
        margin-bottom: 1vh;
    }

    .credits span {
        font-size: 2rem;
    }

    .credits a {
        width: 8%;
    }
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
    .credits {
        width: 15%;
    }

    .modal-contents2 {
        width: 40%; /* Could be more or less, depending on screen size */
    }

    .lielas_pogas img {
        width: 30%;
    }
}