html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, menu, nav, section, main {

    display: block;

}

body {

    line-height: 1;

    overflow-y: scroll !important;

}

:active, :hover, :focus {

    outline: 0;

    outline-offset: 0;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,
q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

a {
    outline: none;
}

a:focus {

    outline: none;

}


@font-face {
    font-family: 'overdoze sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("font/overdozesans.otf") format("opentype");

}

* {
    font-family: 'overdoze sans', sans-serif;
    /*font-family: 'Open Sans', sans-serif;*/
    font-size: 23px;
}

.wrapper {

    margin: 20px auto;

    max-width: 1000px;

    background: linear-gradient(#CECECE, transparent 1px), linear-gradient(90deg, #CECECE, rgb(249, 249, 249) 1px);

    background-size: 20px 20px;

    background-position: center center;

}

.logogo {
    color: #4D4481;
    font-size: 79px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logogo img {
    width: 44px;
    opacity: 0.7;
}

header {

    box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.43);

    height: 67px;

    border-radius: 3px 3px 0 0;

    border-bottom: 2px solid #F18082;

}

.topkrug-wrap {

    height: 50px;

    overflow: hidden;


}

a {

    color: #F18082;

}

p {

    color: #4D4481;

    margin: 10px;

}

.topkrug {

    width: 20px;

    height: 20px;

    margin: 15px 0 0 15px;

    background: url("fon.jpg");

    float: left;

    border-radius: 50%;

    border: 1px solid #b5b5b5;

    box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.43);

}

.telo {

    min-height: 600px;

    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.43);

    margin: -8px 0 0 0;

    padding: 8px 0 1px 0;

}


h1 {

    color: #4D4481;
    text-align: center;
    font-size: 41px;
    margin: 14px 0 0 0;

}

.meimg {
    float: right;
}

h2 {

    color: #4D4481;

    font-size: 33px;

    text-align: center;

}

h3 {

    color: #4D4481;

    font-size: 29px;

}

ol {

    color: #4D4481;

    list-style: none;

    font-size: 17px;

}

ol > li {

    padding-left: 20px;

    position: relative;

    margin: 10px;

}

ol > li::before {

    content: '✓';

    color: #F18082;

    font-size: 26px;

}

body {

    background: url("fon.jpg");

}

.privetstvennoe-slovo {

    max-width: 600px;

    margin: 30px auto;

}

.raboti {

    text-align: center;

}

.rabota {

    display: inline-block;

    width: 230px;

    height: 230px;

    background: linear-gradient(#f9efaf, #f7e98d);

    position: relative;

    box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.5);

    margin: 15px;

}


footer {

    color: #4D4481;

    text-align: center;

    font-size: 42px;

    padding: 30px 0;

}
footer a{
    font-size: 42px;
}
#countdown{
    text-align: center;
    font-size: 74px;
    color: #4d4481;
}
.vajnoezamechanie {

    color: #f18082;

    text-align: center;

    font-size: 31px;

    max-width: 500px;

    margin: 19px auto;

}

form {

    text-align: center;

}

form p {

    text-align: center;

}

.input {

    max-width: 215px;

    width: 100%;

    height: 37px;

    padding: 0 0 0 15px;

    margin: 10px 5px;

    font-size: 18px;

    border: solid #f18082 3px;

    color: #4D4481;

}

.button {

    width: 200px;

    height: 43px;

    background: #fff;

    border: 3px solid #f18082;

    font-size: 18px;

    cursor: pointer;

    color: #4d4481;

}

.button:hover {

    background: #f18082;

    color: #fff;

}


.rabota figure {

    margin: 0;

    position: relative;

}

.rabota figure img {

    max-width: 100%;

    display: block;

    position: relative;

}

.rabota figcaption {

    position: absolute;

    top: 0;

    left: 0;

    padding: 10px 0;

    background: #4D4481;

    color: #f18082;

}

.rabota figcaption h3 {

    margin: 0;

    padding: 0;

    color: #fff;

}


.rabota figcaption a {

    text-align: center;

    padding: 5px 10px;

    border-radius: 2px;

    display: inline-block;

    background: #f18082;

    color: #fff;

}

.cs-style-2 figure img {

    z-index: 10;

    transition: transform 0.4s;

}


.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {

    transform: translateY(-90px);

}

.cs-style-2 figcaption {

    height: 50px;

    width: 100%;

    top: auto;

    bottom: 0;

}


.cs-style-2 figure img {

    z-index: 10;

    -webkit-transition: -webkit-transform 0.4s;

    -moz-transition: -moz-transform 0.4s;

    transition: transform 0.4s;

}


.cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {

    -webkit-transform: translateY(-90px);

    -moz-transform: translateY(-90px);

    -ms-transform: translateY(-90px);

    transform: translateY(-90px);

}


.cs-style-2 figcaption {

    height: 70px;

    width: 100%;

    top: auto;

    bottom: 0;

    font-size: 14px;

}


.cs-style-2 figcaption a {

    position: absolute;

    right: 46px;

    bottom: 6px;

    text-decoration: none;

}

.rabota .name {

    text-align: center;

    display: block;

}

#result_calc_page {

    max-width: 500px;

    margin: 33px auto;

    text-align: center;

}

#result_calc_page p {

    text-align: left;

}

#result_calc_page select {

    height: 37px;

    padding: 0 0 0 15px;

    margin: 10px 5px;

    font-size: 18px;

    border: solid #f18082 3px;

    color: #4D4481;

}

.result {

    font-size: 26px;

    margin: 0 0 30px 0;

    color: #f18082;

    text-align: center !important;

    font-weight: bold;

}

.sure_field_char {

    color: #f18082;

}


#result_calc_page button, button {

    max-width: 250px;

    height: 43px;

    background: #fff;

    border: 3px solid #f18082;

    font-size: 18px;

    cursor: pointer;

    color: #4d4481;

    display: block;

    text-align: center;

    margin: 20px auto;

}

#result_calc_page button:hover, button:hover {

    background: #f18082;

    color: #fff;

}

.m1 {

    background: url(img/m1.png);

    width: 130px;

    height: 74px;

    position: absolute;

    margin: 0 0 0 -150px;

}

.m2 {

    background: url(img/m2.png);

    width: 97px;

    height: 93px;

    position: absolute;

    margin: 31px 0 0 216px;

}


.m4 {

    background: url(img/m4.png);

    width: 69px;

    height: 61px;

    margin: -117px 0 0 87px;

    position: absolute;

}

.m5 {

    background: url(img/m5.png);

    width: 62px;

    height: 90px;

    margin: -124px 0 0 71px;

    position: absolute;

}

.m6 {

    background: url(img/m6.png);

    width: 70px;

    height: 77px;

    margin: -130px 0 0 78px;

    position: absolute;

}

.m7 {

    background: url(img/m7.png);

    width: 80px;

    height: 70px;

    margin: -124px 0 0 78px;

    position: absolute;

}

.m8 {

    background: url(img/m8.png);

    width: 60px;

    height: 119px;

    margin: 16px 0 0 118px;

    position: absolute;

}

.kakmiwork {

    text-align: center;

}

.kakmiwork .kak {

    color: #4d4481;

    margin: 20px;

    display: inline-block;

}

.kak span {

    font-size: 110px;

    font-weight: bold;

    color: #f18082;

}


.overlay {

    background: #000;

    position: fixed;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    z-index: 1000;

    opacity: .5;

}

.visible {

    background: linear-gradient(#f9efaf, #f7e98d);

    position: fixed;

    text-align: center;

    left: 41%;

    top: 20%;

    overflow: hidden;

    z-index: 2000;

    max-width: 500px;

    padding: 12px;

}


@media (max-width: 1010px) {

    .wrapper {
        max-width: 800px;
    }

    .m8, .m2, .m1 {
        display: none;
    }

}


@media (max-width: 813px) {

    .wrapper {
        max-width: 625px;
    }

}


@media (max-width: 640px) {

    .wrapper {
        max-width: 475px;
    }

    .privetstvennoe-slovo {

        padding: 0 10px;
    }

}


@media (max-width: 490px) {

    .wrapper {
        max-width: 360px;
    }

    .visible {
        left: 19%;
    }

}


@media (max-width: 360px) {

    .wrapper {
        max-width: 320px;
    }

}