/* CSS FOR THE WEBSITE LANDING PAGE */

/* DEFAULTS */
section {
    padding: 50px 0;

}

.max-width {
    padding: 0 100px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;

}

#webLP .flex.wrap {
    flex-wrap: wrap;
}

#webLP .flex {
    display: flex;
    align-items: center;
}

#webLP .flex.space {
    justify-content: space-between;

}

#webLP .flex.center {
    justify-content: center;
}

#webLP .flex.column {
    flex-direction: column;
}

:root {
    --web1: #D64B41;

}

#s1 .wpcf7-not-valid-tip {
    color: #FFF;
}

#s1 .wpcf7 form.invalid .wpcf7-response-output,
#s1 .wpcf7 form.unaccepted .wpcf7-response-output {
    color: var(--red);
    background-color: #FFF;
}

/*************/
/*FONTS*/

html {
    font-size: 20px;
}

h1 {
    font-size: 4em;
    text-transform: uppercase;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 1.5em;
}

#webLP h1,
#webLP h2,
#webLP h3,
#webLP p {
    margin: unset;

}

body {
    background-color: #F8F5EE;
}

/*Section 1*/
#s1 {
    background: linear-gradient(257.44deg, #D64B41 1.02%, #C9392E 82.74%, #A90D02 97.88%);
    border-radius: 0 0 100px 100px;
    padding: 100px 0 150px;
}

#s1 .left {
    color: #FFF;
    font-size: 1em;
}

#s1 .left h1 {
    line-height: 1em;
    margin-bottom: 20px;
}

#s1 .left p {
    font-size: 1.5em;
    font-weight: lighter;
    width: 600px;
}

#s1 .left .dark {
    background-color: #a90d02;
    width: 600px;
    margin: 15px 0;
    border-radius: 15px;
    padding: 15px 25px;
}

#s1 .left .dark ul {
    margin: 0 0 0 25px;
}

#s1 .left .dark ul li {
    width: 50%;
    font-weight: lighter;
    font-size: 1.15em;
}

#s1 .left a {
    color: #FFF;
    font-size: 1.5em;

}

#s2 svg {
    width: 75px;
}

#s2 svg path {
    fill: #d64b41;

}

#s2 p {
    width: 100%;
}

#s1 .right {
    padding: 25px 35px;
    margin: 0 0 0 25px;
    border: 2px solid #A90D02;
    border-radius: 20px;
    color: #FFF;
    width: 400px;
    min-width:400px;
}

#s1 .right input {
    margin: 5px 0 0 0;
    width: 100%;
    padding: 5px 10px;
}

#s1 .right h2 {
    font-size: 1.7em;
    text-align: center;
}

#s1 .right .opt {
    margin: 15px 0;

}

#s1 .right form p {
    font-weight: bold;
}

#s1 .right .opt span {
    margin: unset;
}

#s1 .right .opt label {
    display: flex;
    align-items: center;
    width: 100%;
    font-weight: normal;
}

#s1 .right .wpcf7-list-item {
    display: flex;
}

#s1 .right .opt label input {
    margin: 0 5px 0 0;
    width: auto;
}

#s1 .right input[type="submit"] {
    background-color: #333;
    color: #FFF;
    border: unset;
}

#s2 .slider .item {
    background-color: #FFF;
    padding: 25px;
    border-radius: 15px;
    margin: 0 20px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

#s2 .slider .item svg {
    margin: 0 15px 0 0;
}

#s2 .slider {
    margin: -125px 0 0 0;
    position: relative;
}

#s2 .slider .item h3 {
    width: 200px;
    line-height: 1em;
}

#s2 .slider .item .flex {
    margin-bottom: 15px;
}

#s4 .slider .nextArrow,
#s2 .slider .nextArrow {
    position: absolute;
    right: -25px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;


}

#s4 .slider .nextArrow::after,
#s2 .slider .nextArrow::after {
    content: " ";
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
}

#s4 .slider .prevArrow,
#s2 .slider .prevArrow {
    position: absolute;
    left: -25px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

#s4 .slider .prevArrow::after,
#s2 .slider .prevArrow::after {
    content: "";
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    width: 20px;
    height: 20px;
    transform: rotate(-45deg)
}

section.benefit h2 {
    line-height: 1em;
    font-size: 2.5em;
    margin-bottom: 25px;

}

section.benefit {
    padding: 150px 0 100px;
}

section.benefit .right {
    width: 450px;
    margin-left: 50px;
}

section.benefit .left {
    width: 450px;
    margin-right: 50px;
}

section.b1 h2 span {
    color: var(--red);
}

section.b2 h2 span {
    color: var(--green);
}

section.b3 h2 span {
    color: #E5830D;
}

section.b4 h2 span {
    color: #09F
}

section.benefit img {
    width: 60%;
    max-width: 750px;
}

section.benefit ul {
    margin: 0 0 0 20px;
}

section.benefit .btn {
    padding: 10px 25px;
    display: inline-block;
    color: #FFF;
    margin-top: 20px;
    cursor: pointer;
}

section.benefit .btn:hover {
    background-color: #333 !important;
}

section.benefit.b1 .btn {
    background-color: var(--red);
}

section.benefit.b2 .btn {
    background-color: var(--green);
}

section.benefit.b3 .btn {
    background-color: #E5830D;
}

section.benefit.b4 .btn {
    background-color: #0099FF;
}

#webLP section.benefit p {
    margin: 15px 0;
    display: block;
}

section.benefit.b4 b {
    width: 300px;
    display: block;
}

section.benefit.b4 a {
    display: block;
    font-size: 1.5em;
    color: #09F
}


/* PORTFOLIO SECTION */
#s3 {
    position: relative;
    overflow-y: hidden;
    text-align: center;
    padding-bottom: 100px;
    border-radius: 0 0 100px 100px;
}

#s3 h2 {
    margin-bottom: 20px;

}

#s3 .accentBack {
    background: linear-gradient(248.91deg, #0099FF 12.34%, #007ACC 77.93%);
    border-radius: 100px 100px 0 0;
    height: 90%;
    z-index: 1;
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
}

#s3 .max-width {
    position: relative;
    z-index: 2;


}

#s3 #newposts {
    flex-wrap: wrap;
}

#s3 .websample {
    width: 350px;
    height: 198px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top;

    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
    margin: 10px;
}

#s3 .websample:hover {
    transform: scale(1.2);
    background-position: bottom;
    transition: 10s all;
}

#s3 .loadmore.misha_loadmore {
    background-color: #000;
    display: inline-block;
    margin: 0 auto;
    color: #FFF;
    width: auto;
    padding: 10px 25px;
    cursor: pointer;
    margin: 20px 0 0 0;

}

#s3 .loadmore.misha_loadmore:hover {
    background-color: #FFF;
    color: #333;
}


/* SERVICES PRICING */
#s4 h2 {
    text-align: center;
    margin-bottom: 50px;
}

#s4 .item {
    border-radius: 20px;
    background-color: #FFF;
    overflow: hidden;
    width: 300px;
    margin: 0 25px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

#s4 .btm {
    padding: 25px;

}

#s4 h3 {
    padding: 25px 25px 10px;
    width: 100%;
    color: #FFF;
    text-align: center;
    font-size: 1.75em;
}

#s4 .item .price {
    text-align: center;
    font-size: 1.5em;
    padding: 0 25px 25px;
}

#s4 .item hr {
    margin: 25px 0;
}

#s4 .item .scrollForm {
    font-size: 1.5em;
    text-align: center;
}

#s4 .item ul {
    margin: 0 0 0 0;
}

#s4 a {
    color: #000;
    font-weight: bold;
    text-align: center;
    margin: 50px;
    display: block;
    font-size: 2.5em;
    transition: 2s ease all;
}

#s4 a:hover {
    color: var(--red);
}

#s4 .creditkey {
    width: 728px;
    height: auto;
    margin: 0 auto;
}

#s5 {
    color: #FFF;
    background-color: var(--red);
    padding: 100px 0;
}

#s5 h2 {
    font-size: 3em;
}

#s5 form .row {
    display: flex;
    justify-content: space-between;
}

#s5 form {
    width: 450px
}

#s5 form textarea {
    height: 150px;
    top: unset !important;
}

#s5 form textarea,
#s5 form input {
    width: 100%;
    padding: 10px 15px;
    margin-top: 10px;

}

#s5 form input[type="submit"] {
    display: inline-block;
    background-color: #333;
    color: #FFF;
    padding: 10px 25px;
    width: auto;
    margin-top: 15px;
    cursor: pointer;
}

#s5 form .row span {
    width: 49%
}

#s5 .right {
    width: 500px;
    padding: 25px 50px;
    margin: 0 0 0 50px;
    border: 2px solid #FFF;
    border-radius: 20px;
    text-align: center;
}

#s5 ul {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
    font-weight: lighter;

}

#s5 ul li {
    width: 50%;
    text-align: left;
}

#s5 .right a {
    border: 2px solid #FFF;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    padding: 10px 25px;
    cursor: pointer;

}

#s5 .right a:hover {
    background-color: #333;
}

footer {
    background-color: #FFF;
}

#bb {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 100000000000;
    display: none;

}

#samplePickup {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000000001;
    display: none;
}

#xO {
    position: absolute;
    top: 0;
    right: 50px;
    color: #FFF;
    font-size: 5em;
    font-weight: bold;
    cursor: pointer;
}

#s5 form .row span.wpcf7-not-valid-tip {
    width: 100%;
    color: #FFF;
    font-size: 10px;
}


@media screen and (max-width:1400px) {
    html {
        font-size: 18px;
    }

    #s1 .left {
        font-size: 1em;
    }

    #s1 {
        padding: 50px 0 125px;
    }
}

@media screen and (max-width:1200px) {
    #webLP .flex.space {
        flex-wrap: wrap;
        justify-content: center;

    }

    #s1 .left h1 {
        text-align: center;
        width: 600px;
    }

    #s1 .left .dark {
        margin: 15px auto;
    }

    #s1 .left p {
        margin: 0 auto;
    }

    #s1 .left a {
        text-align: center;
        margin: 0 0 25px 0;
        display: block;
    }

    #s1 .right {
        margin: 25px 0 0 0;
    }

    .max-width {
        padding: 0 50px;
    }

    section.benefit {
        padding: 100px 0 80px;
    }

    #s5 h2 {
        text-align: center;
    }

    #s5 .flex {
        flex-direction: column;
        width: 100%;
    }

    #webLP .flex {
        flex-direction: column;
    }

    #s5 .right {
        margin: 50px 0 0 0;
    }

    #webLP #s2 .flex.benefit:nth-child(even) {
        flex-direction: column-reverse;
    }

    section.benefit img {
        margin: 0 0 50px;
    }

    section.benefit .right {
        margin: unset;
    }

    #s2 #s3 #newposts {
        flex-direction: row;
    }

    #s3 .websample {
        width: 300px;
        height: 168px;
    }

    #s2 .slider .item h3 {
        width: 100%;
        margin: 10px 0 0;
    }

    #s1 .left .dark ul {
        flex-direction: row;
    }

    section.benefit .left {
        margin: unset;
    }
}

@media screen and (max-width:700px) {

    #s4 .item,
    #s2 .slider .item {
        margin: 0 10px;
    }

    #s1 .left h1 {
        width: 100%;
    }

    #s1 .left p {
        width: 100%;
    }

    #s1 .left .dark {
        width: 100%;
    }

    #s1 .left h1 {
        font-size: 2.5em;
    }

    #s2 .slider {
        padding-bottom: 100px;
    }

    section.benefit {
        padding: 0 0 100px;
    }

    #s1 .right {
        width: 100%;
        min-width: unset;
    }

    #s1 .left p {
        text-align: center;
    }

    #s5 .right {
        width: 100%;
    }

    #s5 form {
        width: 100%;
    }

    #s5 {
        padding: 50px 0;
    }

    #s4 a {
        margin: 50px 0 0 0;
    }

    #s4 {
        padding: 0 0 50px;
    }

    #s3 {
        padding: 0 0 50px;
        border-radius: 0 0 50px 50px;
    }

    #s3 .accentBack {
        border-radius: 50px 50px 0 0;
    }

    #s1 {
        border-radius: 0 0 50px 50px;
    }

    section.benefit img {
        width: 100%;
    }

    #s4 h2 {
        margin-bottom: 25px;
    }
}

@media screen and (max-width:500px) {
    #s5 ul {
        display: block;
        width: 100%;
    }

    #s4 .max-width {
        padding: 0 0;
    }

    #s4 {
        padding: 0 0 0;
    }

    #s4 .slider {
        padding: 0 50px;
    }

    #s4 .slider .prevArrow {
        left: 20px;
    }

    #s4 .slider .nextArrow {
        right: 20px;
    }

    #s2 .slider .nextArrow,
    #s2 .slider .prevArrow {
        display: none;
    }

    #s2 .slider .nextArrow::after,
    #s2 .slider .prevArrow::after {
        display: none;
    }

    section.benefit .left {
        width: 100%;
    }

    section.benefit .right {
        width: 100%;
    }

    #s1 .left p {
        font-size: 1.2em;
    }

    #s5 ul li {
        width: 100%;
    }

    .max-width {
        padding: 0 25px;
    }

    #s1 .left h1 {
        font-size: 2em;
    }

    #s1 .left .dark ul {
        list-style: none;
        margin: unset;
    }

    #s1 .left .dark ul li {
        width: 100%;
        padding: 5px 0;
        text-align: center;
    }

    #s2 .slider {
        padding-bottom: 50px;
    }

    .slick-dots {
        display: flex;
        justify-content: center;
    }

    .slick-dots li {
        padding: 15px;
    }

    .slick-dots li.slick-active::marker {
        color: var(--red);
    }

    .slick-dots button {
        display: none;
    }
}

@media screen and (max-width:375px) {
    #s4 .slider {
        padding: 0 25px;
    }

    #s4 .slider .nextArrow,
    #s4 .slider .prevArrow,
    #s4 .slider .nextArrow::after,
    #s4 .slider .prevArrow::after {
        display: none;
    }
}