@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('/templates/newsol/fonts/font-awesome1.css?v=1766682066');
@import url('/templates/solution/fonts/stylesheet.css?v=1766682066');

@import url('bootstrap.css?v=1766682066');
@import url('style1.css?v=1766682066');
@import url('style2.css?v=1766682066');
@import url('style_one.css?v=1766682066');
@import url('style_two.css?v=1766682066');
@import url('style_three.css?v=1766682066');


@import url('style_sdg.css?v=1766682066');
@import url('paid_tasks.css?v=1766682066');
@import url('mystyles.css?v=1766682066');

@import url('newsol.css?v=1766682066');



.with_code table tr td {
    word-break: normal;
}

#copy-promo {
    display: inline-block;
    color: var(--military-accent);
    text-decoration: none;
    font-size: 14px;
    margin-top: 5px;
}

#copy-promo:hover {
    color: var(--military-light);
    text-decoration: underline;
}

/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
    display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
    position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none;
}

/* Expanded CSS Variables */

.splitting {
    /* The center word index */
    --word-center: calc((var(--word-total) - 1) / 2);

    /* The center character index */
    --char-center: calc((var(--char-total) - 1) / 2);

    /* The center character index */
    --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
    /* Pecent (0-1) of the word's position */
    --word-percent: calc(var(--word-index) / var(--word-total));

    /* Pecent (0-1) of the line's position */
    --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
    /* Percent (0-1) of the char's position */
    --char-percent: calc(var(--char-index) / var(--char-total));

    /* Offset from center, positive & negative */
    --char-offset: calc(var(--char-index) - var(--char-center));

    /* Absolute distance from center, only positive */
    --distance: calc((var(--char-offset) * var(--char-offset)) / var(--char-center));

    /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
    --distance-sine: calc(var(--char-offset) / var(--char-center));

    /* Distance from center where 1 is far left/far right, 0 is center */
    --distance-percent: calc((var(--distance) / var(--char-center)));
}

@import url("https://fonts.googleapis.com/css?family=Oswald:700");

.clock {
    --time-offset: 0;
    width: 100%;
    height: 100%;
    background: rgb(57 72 51 / 80%);
    border-radius: 0 13px 13px 0;
    text-align: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    height: 6em;
    color: var(--military-gold);
    text-shadow: 0 0 10px rgba(201, 176, 55, 0.5);

    font-size: 2vmin;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    -webkit-perspective: 500px;
    perspective: 500px;
    --h1: 1;
    --h2: 2;
    --m1: 3;
    --m2: 4;
    --s1: 5;
    --s2: 6;
}

.clock,
.clock:before,
.clock * {
    box-sizing: border-box;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.clock:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear,
            left top,
            left bottom,
            color-stop(20%, rgba(34, 34, 34, 0.9)),
            color-stop(transparent),
            color-stop(transparent),
            color-stop(80%, rgba(34, 34, 34, 0.9)));
    background: linear-gradient(to bottom, rgb(43 58 46 / 90%) 20%, transparent calc(50% - 0.4ch), transparent calc(50% + 0.4ch), rgb(35 52 40 / 90%) 80%);

    -webkit-transform: translateZ(2.6em);
    transform: translateZ(2.6em);
    border-radius: 0 13px 13px 0;
    border-left: 3px solid var(--border-color);
}

@media (max-width: 768px) {
    .clock {
        font-size: 3vmin;
    }
}

.colon {
    display: inline-block;
    opacity: 0.8;
    -webkit-transform: translateZ(2.5em);
    transform: translateZ(2.5em);
    width: 1ch;
    margin: 0;
    text-align: center;
}

.cog {
    position: relative;
    width: 1ch;
    height: 1ch;
    margin: -0.25ch 0.1ch 0;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1),
        -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
    -webkit-transform: rotateX(calc(-1turn * (var(--unit) / var(--char-total))));
    transform: rotateX(calc(-1turn * (var(--unit) / var(--char-total))));
}

.cog .word,
.cog .char {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 1ch;
    height: 1ch;
}

.cog .char {
    -webkit-transform: rotateX(calc(4deg + (360deg * var(--char-percent)))) translateZ(2.5em);
    transform: rotateX(calc(4deg + (360deg * var(--char-percent)))) translateZ(2.5em);
}

.tens {
    text-align: right;
}

.hours.tens {
    --unit: var(--h1);
}

.hours {
    --unit: var(--h2);
}

.minutes.tens {
    --unit: var(--m1);
}

.minutes {
    --unit: var(--m2);
}

.seconds.tens {
    --unit: var(--s1);
}

.seconds {
    --unit: var(--s2);
}


/*.view-index-wrapper {
       position: absolute;
      top: 200px;
      right: 0px;
      max-width: 300px;
      padding: 15px;
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      z-index: 100;
      margin-right: 10px;
  }*/

.view-index-wrapper {
    position: absolute;
    right: 0;
    max-width: 300px;
    padding: 20px;
    background: #313e34;
    border: 1px solid #4f6052;
    border-radius: 20px;
    box-shadow: 0 10px 5px 1px rgb(66 96 74 / 18%);
    margin-right: 10px;
    z-index: 100;
}

.view-index-wrapper1 {
    position: absolute;
    right: 0;
    max-width: 300px;
    margin-right: 10px;
    z-index: 100;
}

.view-index-wrapper2 {
    /*position: absolute;*/
    /*right: 0;*/
    /*max-width: 300px;*/
    /*margin-right: 10px;*/
    display: none;
    /* z-index: 1;*/
}


.reviews_mobile {
    display: none;
    padding: 15px;
    background: #313e34;
    border: 1px solid #4f6052;
    border-radius: 20px;
    box-shadow: 0 10px 5px 1px rgb(66 96 74 / 18%);
    margin-top: 70px;
    margin-bottom: 15px;
}

@media (max-width: 768px) {

    /* .view-index-wrapper {
        position: static; 
        margin: 20px auto; 
        max-width: 90%; 
        box-shadow: none; 
    }*/
    .view-index-wrapper {
        display: none;
    }

    .view-index-wrapper1 {
        position: static;
        margin: 15px auto;
        max-width: 90%;
        box-shadow: none;
        z-index: 10;
    }

    .view-index-wrapper2 {
        /*position: static;*/
        margin: 5px auto;
        /* max-width: 90%;*/
        box-shadow: none;
        display: block;
    }

    .reviews_mobile {
        display: block;
    }
}