@import "vars.css"; /* Importējam mainīgos no vars.css */

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

embed{
    pointer-events: none;
}

@media (min-width:320px)  { /* Viedierīces, iPhones, telefoni protreta režīmā 480x320 */
    /* Paralakses stili sākas šeit. */
    .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");
    }
    /* Paralakses stili beidzas šeit. */
    /* Satura stili sākas šeit. */
    .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;
    }
    /* Satura stili beidzas šeit. */

    /* Ritināmā stili sākas šeit. */
    .scroll4::-webkit-scrollbar {
        width: 10px;
    }

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

    .scroll4::-webkit-scrollbar-track {
        background: #4e4e4e;
        border-radius: 20px;
    }
    /* Ritināmā stili beidzas šeit. */

    /* Ritināt līdz augšai pogas sākums. */
    #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;
    }
    /* Ritinat līdz augšai pogas stilu beigas. */

    .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;
        padding: 20px;
        border-radius: 0.5vw;
        width: 90%;
    }

    /* Uznirstošā loga fons. */
    .modal {
        display: none; /* Pēc noklusējuma izslēgts. */
        position: fixed;
        z-index: 1; /* Būt virs citiem elementiem. */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0); /* Rezerves krāsa, ja nu gadienā pārlūks neatbalsta caurspīdīgumu. */
        background-color: rgba(0,0,0,0.4); /* Fona krāsa ar caurspīdīgumu. */
    }

    /* Uznirstošā loga saturs. */
    .modal-contents {
        background-color: var(--section-background1);
        margin: 5% auto;
        padding: 20px;
        border-radius: 0.5vw;
        width: 80%;
    }

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

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

    /* Aizvēršanas pogas sākums. */
    .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;
    }

    /* Aizvēršanas pogas beigas. */
    /* Atlaižu banera sākums. TODO: Uzlabot, kad notiks nākošais konkurss. */

    #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;
    }
    /* Atlaižu banera beigas. */
}

@media (min-width:641px)  { /* Portreta planšetes, e-lasītāji, telefoni (horizontāli) 800x480 vai 854x480. */
    .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;
    }
}
@media (min-width:961px)  { /* Planšetes, maza izmēra personīgie datori un klēpjdatori. */
    .modal-contents2 {
        width: 60%;
    }
}
@media (min-width:1025px) { /* Visparastākie ekrāni, kas ir datoriem, klēpjdatoriem. */
    #logosection_mobile {
        display:none;
    }

    #logosection_desktop {
        display:block;
    }

    .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;
    }

}
@media (min-width:1281px) { /* Lieli datora ekrāni. */
    .modal-contents2 {
        width: 40%;
    }

    .lielas_pogas img {
        width: 30%;
    }
}