@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700,900);

body {
    font-family: Montserrat, sans-serif;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    color: #4b4b4b;
    background-position: top
}

.form-control {
    background-color: hsla(0, 0%, 100%, .7);
    border: 1px solid #eee
}

.form-control::-webkit-input-placeholder {
    color: #4b4b4b
}

.form-control::-moz-placeholder {
    color: #4b4b4b
}

.form-control::-ms-input-placeholder {
    color: #4b4b4b
}

.form-control::placeholder {
    color: #4b4b4b
}

.form-control:focus {
    border-color: #009dfd;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: hsla(0, 0%, 100%, .7) !important
}

.form-control:disabled:hover {
    cursor: no-drop
}

textarea {
    background-color: hsla(0, 0%, 100%, .7);
    border: 1px solid #eee
}

textarea::-webkit-input-placeholder {
    color: #4b4b4b
}

textarea::-moz-placeholder {
    color: #4b4b4b
}

textarea::-ms-input-placeholder {
    color: #4b4b4b
}

textarea::placeholder {
    color: #4b4b4b
}

textarea:focus {
    border-color: #009dfd;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: hsla(0, 0%, 100%, .7) !important
}

.green-gradient-header {
    background-color: #ddd;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD 0, endColorstr=#00DBDE);
    color: #000;
    border: none;
    outline: none;
    font-size: 16px;
    text-align: center;
    padding: 5px 20px;
    border-radius: 30px;
    -webkit-transition: all .3s;
    transition: all .3s;
    line-height: 20px;
    width: auto;
    display: inline-block
}

.big-headline {
    -webkit-background-clip: text;
}

.big-headline,
.big-white-headline {
    font-size: 40px;
    font-weight: 600;
    margin: 10px 0 20px
}

.big-white-headline {
    color: #000
}

.big-black-headline {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    margin: 10px 0 20px
}

.about-header {
    -webkit-background-clip: text;
    font-size: 20px;
    font-weight: 600;
    margin: 15px 0 5px
}

.small-headline {
    color: #000;
    font-size: 16px;
    margin-bottom: 5px;
    text-transform: uppercase
}

.all-templates {
    background-color: #f8f9fa;
    padding: 90px 0
}

.all-templates .temp-wrapper {
    border: 1px solid #eee
}

.modal,
.modal-open {
    padding-right: 0 !important
}

.modal {
    background-color: rgba(0, 0, 0, .6);
    z-index: 9999
}

.modal-backdrop {
    position: static
}

button,
button:focus {
    outline: none
}

.media-grid .media-list-item .media-image-wrapper .media-board-info .caption {
    color: red !important;
    color: red
}

.header-div {
    position: relative
}

.header-div header {
    position: absolute;
    z-index: 9000;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header-div header h1 {
    display: inline-block
}

.header-div header ul {
    text-align: right;
    margin-bottom: 5px;
    padding-left: 0;
    padding-bottom: 4px;
    margin-top: 10px
}

.header-div header ul .dropdown {
    display: inline-block;
    position: relative
}

.header-div header ul .dropdown:hover .dropdown-content {
    display: block
}

.header-div header ul .dropdown .dropbtn {
    margin: 0;
    color: #fff
}

.header-div header ul .dropdown .dropbtn i {
    color: #fff;
    margin-left: 5px
}

.header-div header ul .dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    text-align: left;
    width: 100px;
    z-index: 1;
    padding-top: 17px;
    border-bottom: 1px solid #fff
}

.header-div header ul .dropdown .dropdown-content img {
    width: 18%;
    margin-left: 5px
}

.header-div header ul .dropdown .dropdown-content span {
    color: #fff;
    margin: 0 10px
}

.header-div header ul .dropdown .dropdown-content a {
    display: inline-block;
    padding: 0;
    line-height: 1.5;
    text-align: left;
    border-bottom: 2px solid transparent
}

.header-div header ul .dropdown .dropdown-content a:hover {
    border-bottom: 2px solid #4b4b4b;
    background: transparent
}

.header-div header ul li {
    list-style: none;
    display: inline-block;
    padding: 5px 20px;
    text-transform: uppercase
}

.header-div header ul li a {
    color: #ffffff;
    font-size: 14px
}

.header-div header ul li a:hover {
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    padding-bottom: 7px;
    text-decoration: none
}

.header-div header ul li a i {
    margin-right: 5px
}

.header-div header ul .blue-gradient-btn a {
    color: #000;
    font-size: 16px
}

.header-div header ul .blue-gradient-btn a:hover {
    border-bottom: none;
    color: #000
}

.header-div header .active-nav a {
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    padding-bottom: 7px
}

.header-div header h1 {
    text-align: center
}

.header-div header h1 a {
    color: #fff;
    display: block;
    background-image: url("../images/WzrlXTP.png");
    text-indent: -99999px;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    width: 190px;
    height: 70px;
    margin: 10px auto 4px;
    background-position: 50%
}

.header-div header h1 a:hover {
    color: #f5f5f5;
    text-decoration: none
}

.modal-content {
    background-color: #fff;
    position: relative;
    border-radius: 0;
    color: #4b4b4b
}

.modal-content .modal-header {
    position: absolute;
    right: -10%;
    top: -20%;
    border-bottom: none
}

.modal-content .modal-header button {
    outline: none;
    text-shadow: none
}

.modal-content .modal-header button:focus {
    outline: none
}

.modal-content .modal-header button span {
    opacity: 1;
    color: #fff;
    font-size: 45px;
    font-weight: 700;
    text-shadow: none
}

@media (max-width:584px) {
    .modal-content .modal-header button span {
        color: #aaa
    }
}

.modal-content .close {
    opacity: 1
}

.modal-content .modal-body {
    padding: 50px
}

.modal-content .modal-body h2 {
    margin-bottom: 18px
}

.modal-content .modal-body label {
    color: #4b4b4b;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0
}

.modal-content .modal-body input {
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    border: 1px solid #ced4da;
    color: #4b4b4b
}

.modal-content .modal-body input:focus {
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #4b4b4b;
    border: 1px solid #009dfd
}

.modal-content .modal-body input::-webkit-input-placeholder {
    color: #4b4b4b
}

.modal-content .modal-body input::-moz-placeholder {
    color: #4b4b4b
}

.modal-content .modal-body input::-ms-input-placeholder {
    color: #4b4b4b
}

.modal-content .modal-body input::placeholder {
    color: #4b4b4b
}

.modal-content .modal-body .holder {
    text-align: center;
    padding-top: 20px
}

.modal-content .modal-body .register {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.modal-content .modal-body .register a {
    color: #4b4b4b
}

.modal-content .modal-body .register a:hover {
    color: #009dfd
}

.transprarent-footer {
    background: #272532
}

.transprarent-footer .top-footer .logo-part {
    text-align: center
}

.transprarent-footer .top-footer .logo-part img {
    margin-bottom: 70px
}

.transprarent-footer .top-footer .social-part {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.transprarent-footer .top-footer .social-part a,
.transprarent-footer .top-footer .social-part a:hover {
    text-decoration: none
}

.transprarent-footer .top-footer .social-part .social {
    margin: 0 15px;
    border: 1px solid #fff;
    width: 60px;
    height: 60px;
    border-radius: 200px;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-decoration: none
}

.transprarent-footer .top-footer .social-part .social:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background: #fff;
    text-decoration: none
}

.transprarent-footer .top-footer .social-part .social:hover i {
    color: #009dfd
}

.transprarent-footer .top-footer .social-part .social i {
    color: #fff;
    font-size: 22px
}

.transprarent-footer .top-footer .external-links {
    text-align: center
}

.transprarent-footer .top-footer .external-links ul {
    padding: 0;
    margin: 0
}

.transprarent-footer .top-footer .external-links ul li {
    display: inline-block;
    font-size: 15px;
    margin: 10px
}

.transprarent-footer .top-footer .external-links ul li a {
    text-decoration: none;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s
}

.transprarent-footer .top-footer .external-links ul li a:hover {
    text-decoration: none;
    color: #4b4b4b
}

.transprarent-footer .bottom-footer {
    color: #fff;
    text-align: center;
    font-size: 14px
}

.transprarent-footer .bottom-footer .wrapp {
    padding: 10px 0;
    border-top: 1px solid #fff
}

.transprarent-footer .bottom-footer .wrapp img {
    width: 60px;
    margin-left: 20px
}

@media (max-width:1200px) {
    .footer-logo {
        height: 56px !important
    }

    .transprarent-footer {
        margin: 0;
        padding: 150px 0 0
    }

    .transprarent-footer .top-footer .social-part {
        margin-bottom: 40px
    }

    .transprarent-footer .top-footer .external-links ul {
        padding: 0;
        margin: 0
    }

    .transprarent-footer .top-footer .external-links ul li {
        margin: 10px
    }
}

@media (max-width:991px) {
    .transprarent-footer {
        background: #272532;
        background: #272532;
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD 0, endColorstr=#00DBDE);
        padding: 90px 0 0
    }
}

.color-footer {
    padding: 80px 0 0;
    background: -webkit-gradient(linear, left top, right bottom, from(#009dfd), to(#00dbde));
    background: linear-gradient(to right bottom, #AAFFA9 0% 0%, #11FFBD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD 0, endColorstr=#00DBDE)
}

.color-footer .top-footer .logo-part {
    text-align: center
}

.color-footer .top-footer .logo-part img {
    margin-bottom: 70px
}

.color-footer .top-footer .social-part {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.color-footer .top-footer .social-part a,
.color-footer .top-footer .social-part a:hover {
    text-decoration: none
}

.color-footer .top-footer .social-part .social {
    margin: 0 15px;
    border: 1px solid #fff;
    width: 60px;
    height: 60px;
    border-radius: 200px;
    background: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-decoration: none
}

.color-footer .top-footer .social-part .social:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background: #fff;
    text-decoration: none
}

.color-footer .top-footer .social-part .social:hover i {
    color: #009dfd
}

.color-footer .top-footer .social-part .social i {
    color: #fff;
    font-size: 22px
}

.color-footer .top-footer .external-links {
    text-align: center
}

.color-footer .top-footer .external-links ul {
    padding: 0;
    margin: 0
}

.color-footer .top-footer .external-links ul li {
    display: inline-block;
    font-size: 15px;
    margin: 10px
}

.color-footer .top-footer .external-links ul li a {
    text-decoration: none;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s
}

.color-footer .top-footer .external-links ul li a:hover {
    text-decoration: none;
    color: #4b4b4b
}

.color-footer .bottom-footer {
    color: #fff;
    text-align: center;
    font-size: 14px
}

.color-footer .bottom-footer .wrapp {
    padding: 10px 0;
    border-top: 1px solid #fff
}

.color-footer .bottom-footer .wrapp img {
    width: 60px;
    margin-left: 20px
}

@media (max-width:1200px) {
    .color-footer {
        margin: 0;
        padding: 150px 0 0
    }

    .color-footer .top-footer .social-part {
        margin-bottom: 40px
    }

    .color-footer .top-footer .external-links ul {
        padding: 0;
        margin: 0
    }

    .color-footer .top-footer .external-links ul li {
        margin: 10px
    }
}

@media (max-width:991px) {
    .color-footer {
        padding: 90px 0 0
    }
}

.blue-gradient-btn {
    background: -webkit-gradient(linear, left top, right bottom, from(#009dfd), to(#00dbde));
    background: linear-gradient(to right bottom, #AAFFA9 0% 0%, #11FFBD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD 0, endColorstr=#00DBDE);
    color: #000;
    border: none;
    outline: none;
    padding: 5px 20px;
    font-size: 17px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    line-height: 30px;
    width: 160px;
    text-transform: uppercase
}

.blue-gradient-btn:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    color: #000
}

.blue-btn,
.blue-gradient-btn:focus {
    outline: none;
    border: none
}

.blue-btn {
    background: linear-gradient(to right bottom, #AAFFA9 0% 0%, #11FFBD 100%);
    color: #000;
    padding: 5px 20px;
    font-size: 17px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    line-height: 30px;
    width: 160px;
    text-transform: uppercase
}

.blue-btn:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    color: #000
}

.blue-btn:focus {
    outline: none;
    border: none
}

.outline-btn {
    border: 1px solid #fff;
    color: #fff;
    font-size: 25px;
    text-decoration: none;
    padding: 5px 35px;
    text-align: center;
    border-radius: 10px;
    outline: none;
    cursor: pointer
}

.outline-btn:focus {
    outline: none
}

.outline-btn:hover {
    text-decoration: none;
    color: #fff
}

.sign-up {
    color: #4b4b4b;
    background: #fff;
    font-size: 20px;
    border: none;
    outline: none;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    padding: 5px 35px;
    display: block;
    margin: 0 auto;
    -webkit-transition: all .3s;
    transition: all .3s
}

.sign-up:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    text-decoration: none;
    color: #4b4b4b
}

.sign-up:focus {
    outline: none;
    border: none
}

.green-header {
    background: -webkit-gradient(linear, left top, right bottom, from(#aaffa9), to(#11ffbd));
    background: linear-gradient(to right bottom, #aaffa9 0 0, #11ffbd);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#AAFFA9 0, endColorstr=#11FFBD);
    color: #58595b;
    padding: 5px 20px;
    width: auto;
    display: inline-block
}

.gray-btn,
.green-header {
    border: none;
    outline: none;
    font-size: 20px;
    text-align: center;
    border-radius: 30px;
    -webkit-transition: all .3s;
    transition: all .3s;
    line-height: 20px
}

.gray-btn {
    background-color: #595959;
    color: #fff !important;
    padding: 9px 20px !important;
    display: block
}

.profile-btn {
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: none;
    color: grey;
    outline: none;
    font-size: 22px;
    text-align: center;
    padding: 5px 30px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.profile-btn:hover {
    border-top: 1px solid #009dfd;
    border-right: 1px solid #009dfd;
    border-left: 1px solid #009dfd;
    border-bottom: none;
    color: grey
}

.profile-btn:focus {
    outline: none
}

.form-button {
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: none;
    color: grey;
    outline: none;
    font-size: 15px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: hsla(0, 0%, 100%, .7);
    -webkit-transition: all .3s;
    transition: all .3s;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.form-button:hover {
    border-top: 1px solid #009dfd;
    border-right: 1px solid #009dfd;
    border-left: 1px solid #009dfd;
    border-bottom: none;
    color: grey
}

.form-button:focus,
.next-btn {
    outline: none
}

.next-btn {
    border: 1px solid #fff;
    padding: 5px 30px;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s
}

.next-btn,
.next-btn i {
    color: #000
}

.next-btn:hover {
    color: #000;
    border: 1px solid #fff
}

.next-btn:hover i {
    color: #000
}

.back-btn {
    outline: none;
    border: 1px solid #fff;
    padding: 5px 30px;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s
}

.back-btn,
.back-btn i {
    color: #000
}

.back-btn:hover {
    color: #000;
    ;
    border-color: #fff
}

.back-btn:hover i {
    color: #000
}

.delete-btn {
    outline: none;
    border: 1px solid #fff;
    color: #fff;
    padding: 5px 30px;
    background: #00dbde;
    border-radius: 12px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s
}

.delete-btn i {
    color: grey
}

.delete-btn:hover {
    color: #fff;
    border-color: #fff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.delete-btn:hover i {
    color: #009dfd
}

.save-btn {
    outline: none;
    border: 1px solid #fff;
    color: #fff;
    padding: 5px 30px;
    background: #009dfd;
    border-radius: 12px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s
}

.save-btn i {
    color: grey
}

.save-btn:hover {
    color: #fff;
    border-color: #fff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.save-btn:hover i {
    color: #fff
}

@media (max-width:1199.98px) {
    .form-button {
        display: none
    }
}

#slide-menu,
.menu-trigger {
    display: none
}

@media (max-width:991.9px) {
    .c-zero {
        max-width: 100%;
        padding: 0
    }

    .c-zero header {
        background: #3a3a3a
    }

    #slide-menu,
    .menu-trigger {
        display: block
    }

    .main-nav {
        display: none
    }

    nav#slide-menu {
        position: fixed;
        top: 0;
        left: -264px;
        bottom: 0;
        width: 100%;
        max-width: 264px;
        height: 100%;
        background: -webkit-gradient(linear, left top, right bottom, from(#AAFFA9), to(#11FFBD));
        background: -webkit-gradient(linear, left top, right bottom, from(#AAFFA9), to(#11FFBD));
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD, endColorstr=#00DBDE)
    }

    nav#slide-menu,
    nav#slide-menu>ul {
        display: block;
        -webkit-transition: all .3s;
        transition: all .3s
    }

    nav#slide-menu>ul {
        margin: 40px;
        padding: 0;
        list-style: none;
        opacity: 1
    }

    nav#slide-menu>ul .blue-gradient-btn {
        background: #fff
    }

    nav#slide-menu>ul .blue-gradient-btn a {
        color: #000
    }

    nav#slide-menu>ul li a {
        padding: 16px 0;
        cursor: pointer;
        font-size: 20px;
        color: #000;
        ;
        display: block;
        border: none
    }

    nav#slide-menu>ul li a img {
        width: 17%
    }

    nav#slide-menu>ul li.sep {
        margin-top: 7px;
        padding-top: 14px;
        border-top: 1px solid #595959
    }

    .header-div header ul {
        border-bottom: 0
    }

    body.menu-active nav#slide-menu {
        left: 0
    }

    body.menu-active nav#slide-menu ul {
        left: 0;
        opacity: 1;
        text-align: center
    }

    div#content {
        position: inherit;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: scroll
    }

    div#content,
    div#content div.menu-trigger {
        left: 0;
        -webkit-transition: all .3s;
        transition: all .3s
    }

    div#content div.menu-trigger {
        position: absolute;
        top: 25px;
        width: 40px;
        height: 40px;
        padding: 6px;
        cursor: pointer;
        background: -webkit-gradient(linear, left top, right bottom, from(#AAFFA9), to(#11FFBD));
        background: llinear-gradient(to right bottom, #AAFFA9 0%, #11FFBD 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD, endColorstr=#00DBDE);
        border-radius: 5px;
        z-index: 9999;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    div#content div.menu-trigger:before {
        display: inline-block;
        width: 36px;
        height: 36px;
        color: #000;
        font-style: normal;
        font-size: 1.2em;
        font-weight: 400;
        font-variant: normal;
        text-align: center;
        text-transform: none;
        line-height: 36px
    }

    div#content div.menu-trigger span {
        width: 80%;
        height: 2px;
        border-radius: 4px;
        background-color: #fff
    }

    body.menu-active div#content {
        left: 264px;
        overflow: visible;
        border-radius: 7px 0 0 7px
    }
}

@media (max-width:768px) {
    div.menu-trigger {
        left: 20px
    }
}

.intro {
    width: 100%;
    height: 100%;
    padding-top: 160px;
    margin-bottom: 240px
}

.intro .intro-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.intro .intro-text .text-wrapper {
    margin-bottom: 120px
}

.intro .intro-text .button-place .second {
    margin-left: 15px
}

.intro .img-holder {
    text-align: center
}

.about-firm {
    margin-bottom: 200px
}

.about-firm .wrapper-about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-top: 40px
}

.about-firm .wrapper-about .about-service {
    margin-bottom: 35px
}

.pricing-section {
    margin-bottom: 100px;
}

.pricing-section .holder {
    padding-top: 130px;
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 50px
}

.pricing-section .holder .pricing-div {
    position: absolute;
    background: #A770EF;
    bottom: 0;
    right: 0;
    width: 170px;
    height: 170px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 200px;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    -webkit-transform: translate(90%, 90%);
    transform: translate(90%, 90%)
}

.pricing-section .holder .pricing-div .number {
    font-size: 70px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    color: #fff
}

.pricing-section .holder .pricing-div .time {
    font-size: 25px;
    margin: 0;
    color: #fff;
    line-height: 1
}

.pricing-section .step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 25px
}

.pricing-section .step p {
    margin: 0;
    font-size: 17px;
    color: #000
}

.pricing-section .step i {
    color: #A770EF;
    font-size: 20px;
    margin-right: 20px;
    margin-top: 5px
}

.ig-wrapper {
    margin: 300px 0 80px
}

.carousel-inner {
    min-height: 680px
}

.customers {
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 95px 0 0;
    background-color: #F0F0F0;
}

.customers .carousel-item .img-wrap {
    width: 230px;
    margin: 0 auto 25px
}

.customers .carousel-item .img-wrap img {
    border-radius: 200px
}

.customers .h3-headline {
    color: #4b4b4b;
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 40px
}

.customers .say-customer {
    width: 45%;
    margin: 0 auto 50px
}

.carousel-control-prev-icon {
    background-image: url("../images/lmdlNwv.png");
    opacity: 1;
    height: 50px;
    width: 30px
}

.carousel-control-prev-icon:hover {
    opacity: 1
}

.carousel-control-next-icon {
    background-image: url("../images/k3RPqUY.png");
    opacity: 1;
    height: 50px;
    width: 30px
}

.carousel-control-next-icon:hover {
    opacity: 1
}

@media (max-width:1200px) {
    .intro {
        margin-bottom: 260px
    }

    .pricing-section .big-white-headline,
    .pricing-section .small-headline {
        text-align: center
    }

    .pricing-section .holder .pricing-div {
        -webkit-transform: translate(70%, 60%);
        transform: translate(70%, 60%)
    }
}

@media (max-width:991px) {
    .header-div header {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-right: 15px;
        -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .1);
        box-shadow: 0 0 30px rgba(0, 0, 0, .1)
    }

    div#content div.menu-trigger {
        top: 20px;
        left: 20px
    }

    .intro .intro-text .text-wrapper {
        margin-bottom: 100px
    }

    .about-firm {
        margin-bottom: 60px
    }

    .about-firm .wrapper-about {
        margin-top: 140px;
        margin-bottom: 200px
    }

    .pricing-section .holder h2 {
        color: #4b4b4b
    }

    .pricing-section .holder .pricing-div {
        -webkit-transform: none;
        transform: none;
        position: relative;
        margin: 25px auto
    }

    .pricing-section .step i,
    .pricing-section .step p {
        color: #4b4b4b
    }

    .ig-wrapper {
        margin: 150px 0
    }

    .customers {
        margin: 95px 0 0
    }
}

@media (max-width:768px) {
    .pricing-section .big-white-headline {
        text-align: center;
        padding: 0
    }

    .about-firm .wrapper-about {
        margin-top: 90px
    }

    .customers .say-customer {
        width: 80%
    }
}

@media (max-width:584px) {
    .modal-content .modal-header {
        z-index: 12;
        right: -2%;
        top: -3%
    }
}

@media (max-width:575px) {
    .intro {
        margin-bottom: 160px
    }

    .intro .intro-text .button-place .second {
        margin-left: 0
    }

    .intro .intro-text .button-place button {
        margin: 10px 0
    }

    .intro .intro-text .text-wrapper {
        padding: 0 30px;
        text-align: center
    }

    .intro .intro-text .text-wrapper p {
        text-align: left
    }

    .intro .intro-text .text-wrapper .small-headline {
        text-align: center
    }

    .intro .img-holder img {
        width: 70%
    }

    .about-firm .wrapper-about {
        margin-top: 80px
    }

    .about-firm .wrapper-about .left-text-part {
        padding: 0 35px
    }

    .about-firm .presentation,
    .about-firm .wrapper-about .left-text-part .big-headline,
    .about-firm .wrapper-about .left-text-part .small-headline {
        text-align: center
    }

    .about-firm .presentation img {
        width: 80%
    }

    .customers .carousel-item .img-wrap {
        width: 180px
    }
}

@media (max-width:450px) {
    .intro {
        margin-bottom: 360px
    }

    .about-firm {
        margin-top: 240px
    }

    .customers {
        margin: 95px 0 130px
    }
}

.about-us {
    padding-bottom: 125px
}

.about-us h2 {
    padding: 150px 0 80px;
    margin: 0
}

.about-us .holding-text .holding {
    margin-bottom: 40px
}

.about-us .holding-text .imagebox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.about-us .holding-text .box {
    padding: 20px 0
}

.about-us .holding-text .box .basic {
    margin-bottom: 4px;
    color: #4b4b4b;
    font-weight: 700;
    text-transform: capitalize
}

.about-us .holding-text .box .small-text {
    font-size: 14px
}

@media (max-width:991px) {
    .about-us .holding-text .imagebox img {
        margin: 0 0 40px
    }
}

@media (max-width:575px) {
    .about-us .holding-text {
        padding: 0 30px
    }

    .about-us .holding-text .box .basic {
        text-align: left;
        padding: 20px 0
    }
}

.contact-part {
    padding-bottom: 120px
}

.contact-part h2 {
    padding: 140px 0 80px;
    margin: 0
}

.contact-part .cnt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 25px
}

.contact-part .cnt i {
    margin-right: 12px;
    font-size: 25px;
    margin-top: 5px
}

.contact-part .cnt p {
    margin: 3px;
    font-size: 14px
}

.contact-part .cnt .little-title {
    font-weight: 700;
    color: #009dfd;
    font-size: 20px
}

.contact-part .form-section {
    margin-top: 50px
}

.contact-part .part-img {
    text-align: center;
    padding: 30px 0
}

.contact-part .button-part {
    text-align: right;
    padding: 15px 0
}

@media (max-width:575px) {
    .contact-part .cnt {
        display: block;
        text-align: center
    }

    .contact-part .form-section {
        padding: 0 50px
    }
}

.content-wrapper-login {
    color: #595959;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 95vh;
    height: 610px
}

.content-wrapper-login .login-img-wrapper {
    text-align: center
}

.content-wrapper-login .content-wrapper-1 {
    position: relative;
    text-align: center
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 95%;
    -webkit-transform: translate(-50%, -95%);
    transform: translate(-50%, -95%)
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg .link-login a {
    color: red
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg .link-login a:hover {
    color: #8d8d8d;
    text-decoration: underline
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg h2 {
    color: #595959;
    font-size: 45px
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg p {
    color: #111419;
    line-height: 30px;
    text-align: center
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg a {
    color: #fff;
    text-decoration: none;
    font-weight: 900
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg a:hover {
    color: #e6e7e8
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg .transprarent-bcg {
    display: block;
    background-color: rgba(0, 0, 0, .4);
    line-height: 50px
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg .transprarent-bcg i {
    color: #28ffba;
    font-size: 30px;
    padding-right: 10px;
    vertical-align: middle
}

.content-wrapper-login .content-wrapper-1 .text-over-bcg .transprarent-bcg a {
    vertical-align: middle
}

.content-wrapper-2 {
    text-align: center;
    width: 40%
}

.content-wrapper-2 form .form-group {
    width: 100%;
    text-align: left
}

.content-wrapper-2 p {
    display: inline-block;
    width: 100%;
    text-align: right
}

.content-wrapper-2 p a {
    color: #8e8e8e
}

.content-wrapper-2 .custom-gradient-btn {
    width: 150px
}

.content-wrapper-2 h5 {
    margin-top: 30px
}

.content-wrapper-2 h2 {
    margin-bottom: 30px
}

.custom-gradient-header {
    border-radius: 30px;
    line-height: 20px;
    display: inline-block;
    border: 2px solid #fff
}

.custom-gradient-btn,
.custom-gradient-header {
    background: -webkit-gradient(linear, left top, right bottom, from(#009dfd), to(#00dbde));
    background: linear-gradient(to right bottom, #AAFFA9 0% 0%, #11FFBD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD 0, endColorstr=#00DBDE);
    color: #000;
    outline: none;
    font-size: 16px;
    text-align: center;
    padding: 5px 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.custom-gradient-btn {
    border: none;
    border-radius: 10px;
    cursor: pointer;
    line-height: 30px;
    margin-top: 20px
}

.custom-gradient-btn:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    color: #000
}

.custom-gradient-btn:focus {
    outline: none;
    border: none
}

@media (max-width:1200px) {
    .content-wrapper-login .content-wrapper-2 {
        width: 50%
    }
}

@media (max-width:992px) {
    .content-wrapper-login .content-wrapper-2 {
        width: 60%
    }
}

@media (max-width:768px) {
    .content-wrapper-login .content-wrapper-2 {
        margin: 0 30px;
        width: 70%
    }
}

@media (max-width:576px) {
    .content-wrapper-login {
        padding: 0 30px
    }

    .content-wrapper-login .content-wrapper-2 {
        margin: 0;
        width: 100%
    }
}

.static-background .content-wrapper {
    padding: 90px 0;
    color: #4b4b4b
}

.static-background .content-wrapper h1 {
    font-size: 2rem;
    text-align: center
}

.static-background .content-wrapper .nav-tabs .nav-item .nav-link {
    background-color: hsla(0, 0%, 100%, .7);
    font-size: 15px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.static-background .content-wrapper .nav-tabs .nav-item .nav-link:hover {
    border-color: #009dfd #00dbde transparent
}

.static-background .content-wrapper .nav-tabs .nav-item .nav-link:hover section .add-bcg-color h2 {
    margin: 0
}

.static-background .content-wrapper .nav-tabs .nav-item .active {
    border-color: #00dbde #00dbde transparent
}

.wrapper-flex-2 {
    background: #f8f9fa;
    padding: 90px 0
}

.wrapper-flex-2 a {
    color: #fff
}

.wrapper-flex {
    padding: 70px 0;
    min-height: 700px;
    background: #f8f9fa
}

.wrapper-flex a {
    color: #595959
}

.wrapper-flex a:hover {
    text-decoration: none
}

.wrapper-flex .border-bnt {
    text-align: left;
    margin-bottom: 0
}

.user-guide-title {
    color: #4b4b4b;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #4b4b4b
}

.cv-steps {
    color: #e6e7e8
}

.cv-steps .cv-step-one {
    margin-top: 5px
}

.cv-steps .cv-step-one .image-first-bck {
    background-image: url("https://i.imgur.com/UNDzjCl.png");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    width: 100%;
    height: 95px;
    margin-bottom: 25px
}

.cv-steps .cv-step-two {
    width: 75%
}

.cv-steps .cv-step-two .image-second-bck {
    background-image: url("https://i.imgur.com/monPOIw.png");
    background-size: 85%;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 107px;
    margin-bottom: 18px
}

.cv-steps .cv-step-three h4 {
    margin-bottom: 29px
}

.cv-steps .cv-step-three .image-third-bck {
    background-image: url("https://i.imgur.com/3nH2lw2.png");
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 90px;
    margin-bottom: 35px
}

.cv-steps .cv-step-one a,
.cv-steps .cv-step-three a,
.cv-steps .cv-step-two a {
    text-decoration: none;
    color: #ebebeb
}

.cv-step-one:hover .image-first-bck {
    background-image: url("https://i.imgur.com/1UdnE6q.png")
}

.cv-step-two:hover .image-second-bck {
    background-image: url("https://i.imgur.com/rxXjjYP.png")
}

.cv-step-three:hover .image-third-bck {
    background-image: url("https://i.imgur.com/SuWHSFe.png")
}

.my-cv,
.my-orders,
.my-profile {
    background-color: hsla(0, 0%, 100%, .7);
    padding: 60px 80px;
    border: 1px solid #dee2e6;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.modal-header {
    border-bottom: transparent
}

.body-mdl {
    padding: 40px;
    font-family: Montserrat, sans-serif
}

.body-mdl .modal-img .arrow-poly {
    width: 15%;
    margin-bottom: 15px
}

.body-mdl .modal-img span {
    color: #4b4b4b;
    font-size: 16px
}

.body-mdl .modal-img .regular-text {
    color: #4b4b4b;
    font-size: 14px;
    padding: 10px 15px;
    margin-bottom: 20px
}

.body-mdl .modal-img .modal-headline {
    color: #4b4b4b;
    font-weight: 200;
    text-transform: none;
    font-size: 30px;
    border-bottom: 1px solid #4b4b4b;
    padding-bottom: 5px;
    margin-bottom: 40px
}

.body-mdl .modal-img .modal-headline:before {
    left: -50px;
    top: -25px
}

.body-mdl .modal-img .wrap-image {
    margin-bottom: 40px
}

.body-mdl .modal-img .wrap-image .border-img {
    border: 1px solid #58c379;
    width: 150px;
    margin: 0 auto;
    -webkit-transition: all .3s;
    transition: all .3s
}

.body-mdl .modal-img .wrap-image .border-img:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.body-mdl .modal-img .wrap-image .border-img a img {
    width: 100%;
    margin-bottom: 0;
    opacity: 1
}

.body-mdl .modal-img .wrap-image .overlay {
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 212px;
    width: 150px;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.body-mdl .modal-img .wrap-image .overlay .text-overlay {
    position: absolute;
    font-size: 15px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0
}

.body-mdl .modal-img .wrap-image .overlay:hover {
    opacity: 1;
    background: rgba(27, 177, 254, .6)
}

.body-mdl .modal-img .wrap-image .overlay:hover .text-overlay {
    color: #fff;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer;
    opacity: 1
}

.profile-background {
    height: 330px;
    padding-top: 190px
}

.profile-background h3 {
    font-size: 47px
}

.table {
    overflow-x: scroll
}

.table td {
    color: #fff;
    padding: 10px;
}

.table td a {
    color: #fff;
    width: 100px;
    padding: 5px 10px;
    font-size: 14px;
    display: inline-block;
    background-color: #58c378;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD 0, endColorstr=#00DBDE);
    border: none;
    margin-top: 0;
    line-height: 1.5;
    text-decoration: none;;
}

.table thead {
    border-bottom: 6px solid #e6e7e8
}

.table thead td {
    font-weight: 500;
    color: #fff;
    width: 10%
}

.profile-section small {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #009dfd;
    font-weight: 700
}

.profile-info input {
    background-color: #fff;
    font-size: 15px;
    border-color: #eee
}

.profile-info input:hover {
    cursor: pointer
}

.profile-info input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    border-color: #009dfd
}

.profile-info label {
    margin-bottom: 0;
    color: #4b4b4b;
    font-size: 14px;
    font-weight: 600
}

.profile-info .flex-helper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.profile-info .flex-helper .blue-gradient-btn {
    margin-right: 15px
}

.profile-info .flex-helper a {
    margin-right: 20px;
    text-decoration: none;
    color: #000
}

.subscription-info {
    width: 100%;
    height: 100%;
    color: #009dfd;
    font-weight: 700
}

.subscription-info .cancel-btn a {
    color: #000;
    display: inline-block;
    font-weight: 400
}

.subscription-info .cancel-btn a:hover {
    text-decoration: none
}

.subscription-info input {
    background-color: #fff;
    font-size: 15px;
    border-color: #eee
}

.subscription-info input:hover {
    cursor: pointer
}

.subscription-info input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #4b4b4b;
    border-color: orange
}

.subscription-info label {
    color: #4b4b4b;
    font-size: 14px;
    font-weight: 600;
    margin: 0
}

.gradient-customers {
    background-color: #4b4b4b
}

.gradient-customers .white {
    text-align: center;
    color: blue;
    font-size: 35px;
    margin-bottom: 20px
}

.arrow-poly {
    background-color: #e6e7e8;
    -webkit-clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%);
    clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%)
}

.arrow-poly span {
    line-height: 2.5;
    color: #6d6e71;
    padding-left: 20px
}

.arrow-poly-done {
    background-color: #e6e7e8
}

.arrow-poly-done span {
    color: #6d6e71
}

.step h4,
.step p {
    color: #4b4b4b
}

.step p {
    line-height: 1.7
}

.step a {
    background: -webkit-gradient(linear, left top, right bottom, from(#009dfd), to(#00dbde));
    background: linear-gradient(to right bottom, #AAFFA9 0% 0%, #11FFBD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#009DFD 0, endColorstr=#00DBDE);
    display: inline-block;
    padding: 4px 14px;
    margin-left: auto;
    background-color: #e6e7e8;
    border-radius: 12px;
    -webkit-transition: all .3s;
    transition: all .3s;
    color: #000;
    line-height: 1.5
}

.step a:hover {
    color: #000;
    text-decoration: none
}

.wrapper-all {
    background-color: #f8f9fa
}

@media (max-width:1199.98px) {
    .flex-helper .custom-gradient-btn {
        padding: 5px 15px;
        font-size: 15px
    }
}

@media (max-width:992px) {
    .profile-section .profile-info {
        margin-bottom: 35px
    }

    .wrapper-flex .my-cv,
    .wrapper-flex .my-orders,
    .wrapper-flex .my-profile {
        padding: 60px 45px
    }

    .wrapper-flex .my-cv .arrow-poly,
    .wrapper-flex .my-orders .arrow-poly,
    .wrapper-flex .my-profile .arrow-poly {
        margin-bottom: 20px
    }

    .modal-img .arrow-poly {
        width: 35% !important
    }

    button .custom-gradient-btn {
        padding: 5px 20px
    }
}

@media (max-width:767px) {

    .wrapper-flex .my-cv,
    .wrapper-flex .my-orders,
    .wrapper-flex .my-profile {
        padding: 60px 25px
    }

    .wrapper-flex .cv-steps .step-one {
        margin-bottom: 25px
    }

    .subscription-info .cancel-btn a {
        margin: 0 auto
    }
}

@media (max-width:435px) {
    .profile-section .profile-info .flex-helper {
        display: block
    }

    .profile-section .profile-info .flex-helper a {
        margin: 15px auto 0;
        display: block;
        font-size: 16px
    }

    .profile-section .profile-info .flex-helper .custom-gradient-btn {
        width: 100%
    }
}

@media (max-width:380px) {

    .wrapper-flex .my-cv,
    .wrapper-flex .my-orders,
    .wrapper-flex .my-profile {
        padding: 60px 25px
    }

    .modal-img .arrow-poly {
        width: 40% !important
    }
}

.vidane-zadaj-klasu {
    background-color: hsla(0, 0%, 100%, .7);
    padding: 60px 80px;
    border: 1px solid #eee;
    border-radius: 5px;
    border-top-left-radius: 0
}

.add-remove {
    text-align: right
}

.add-remove button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none
}

.add-remove button i {
    color: #fff;
}

.add-remove button .fa-trash-alt {
    -webkit-transition: all .3s;
    transition: all .3s
}

.add-remove button .fa-trash-alt:hover {
    color: red;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.add-remove button .fa-plus-circle {
    -webkit-transition: all .3s;
    transition: all .3s
}

.add-remove button .fa-plus-circle:hover {
    color: #9acd32;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.cv-form {
    padding: 90px 0;
    background-color: #f8f9fa;
    min-height: 700px
}

.cv-form .active {
    border-color: #00dbde #00dbde transparent;
    background-color: hsla(0, 0%, 100%, .7);
    color: #58595b
}

.color {
    background-color: #fff
}

.color i {
    color: gray
}

.tab-navigation {
    padding-right: 0
}

.top-bar {
    margin-top: 200px
}

.color {
    width: 100%;
    height: 100%
}

.btns {
    text-align: right;
    margin: 15px 0
}

.btns button {
    font-size: 17px;
    margin-right: 10px;
    background: linear-gradient(to right bottom, #AAFFA9 0% 0%, #11FFBD 100%);
    color: #000
}

.wrap-input {
    padding-top: 9px
}

.education-2 {
    margin-top: 50px
}

.info-user {
    margin-bottom: 15px
}

.info-user .name {
    padding-top: 5px;
    padding-left: 15px
}

.info-user textarea {
    border-radius: 5px;
    padding-left: 10px;
    width: 100%;
    font-size: 15px;
    border-color: #eee;
    background-color: transparent;
    outline: none
}

.info-user textarea:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    border-color: #009dfd
}

.info-user textarea::-webkit-input-placeholder {
    color: #8d8d8d
}

.info-user textarea::-moz-placeholder {
    color: #8d8d8d
}

.info-user textarea::-ms-input-placeholder {
    color: #8d8d8d
}

.info-user textarea::placeholder {
    color: #8d8d8d
}

.info-user label {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    margin: 0;
    text-align: left
}

.info-user input {
    font-size: 15px;
    background-color: transparent;
    border-color: #eee
}

.info-user input:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #009dfd;
    background-color: #fff
}

.info-user input::-webkit-input-placeholder {
    color: #8d8d8d
}

.info-user input::-moz-placeholder {
    color: #8d8d8d
}

.info-user input::-ms-input-placeholder {
    color: #8d8d8d
}

.info-user input::placeholder {
    color: #8d8d8d
}

.rb-box {
    width: 100%;
    padding: 10px
}

.question {
    font-size: 12px
}

.rb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 22px 0;
    text-align: center
}

.rb-tab {
    display: inline-block;
    position: relative;
    width: 20%
}

.rb-txt {
    font-size: 11px;
    color: #000;
}

.rb-spot,
.rb-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.rb-spot {
    width: 25px;
    height: 25px;
    background: #e6e7e8;
    border-radius: 100%;
    cursor: pointer;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

.rb-tab-active .rb-spot {
    background: #009dfd
}

.p-image {
    display: none
}

.file-img {
    padding: 3px 15px;
    border-radius: 50px;
    border: 1px solid;
    -webkit-transition: all .4s;
    transition: all .4s
}

.file-img:hover {
    cursor: pointer
}

.image-icon {
    display: inline-block;
    margin-right: 35px
}

.image-icon i {
    font-size: 100px
}

.image-icon img {
    border-radius: 200px
}

.mainwrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.mainwrap .image-warp p,
.mainwrap .label-wrap label {
    margin-bottom: 0
}

.mainwrap .label-wrap input {
    display: none
}

.add-bcg-color {
    padding: 140px 0 100px;
    text-align: center;
    color: #4b4b4b
}

.add-bcg-color h2 {
    margin-bottom: 10px
}

@media (max-width:1200px) {
    .cv-form .tab-menu .form-button {
        font-size: 13px
    }

    .table td a {
        display: block
    }
}

@media (max-width:992px) {
    .cv-form .vidane-zadaj-klasu {
        padding: 60px 40px
    }

    .cv-form .mainwrap {
        display: block;
        text-align: center
    }

    .cv-form .mainwrap .label-wrap {
        margin-top: 20px
    }

    .cv-form .tab-menu {
        display: none
    }
}

@media (max-width:430px) {
    .cv-form .vidane-zadaj-klasu {
        padding: 60px 25px
    }
}

@media (max-width:1024px) {

    .wrapper-flex .my-cv,
    .wrapper-flex .my-orders,
    .wrapper-flex .my-profile {
        padding: 60px 55px
    }
}

@media (max-width:992px) {
    .profile-section .profile-info {
        margin-bottom: 35px
    }

    .wrapper-flex .my-cv,
    .wrapper-flex .my-orders,
    .wrapper-flex .my-profile {
        padding: 60px 45px
    }

    .wrapper-flex .my-cv .arrow-poly,
    .wrapper-flex .my-orders .arrow-poly,
    .wrapper-flex .my-profile .arrow-poly {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {

    .wrapper-flex .my-cv,
    .wrapper-flex .my-orders,
    .wrapper-flex .my-profile {
        padding: 60px 45px
    }

    .wrapper-flex .cv-steps .step-one {
        margin-bottom: 25px
    }
}

@media (max-width:464px) {
    .wrapper-flex .profile-info .flex-helper a {
        font-size: 14px
    }
}

@media (max-width:435px) {
    .profile-section .profile-info .flex-helper {
        display: block
    }

    .profile-section .profile-info .flex-helper a {
        margin: 15px auto 0;
        display: block;
        font-size: 16px
    }

    .profile-section .profile-info .flex-helper .blue-gradient-btn,
    .profile-section .profile-info .flex-helper .orange-gradient-btn {
        width: 100%
    }
}

@media (max-width:380px) {

    .wrapper-flex .my-cv,
    .wrapper-flex .my-orders,
    .wrapper-flex .my-profile {
        padding: 60px 30px
    }
}

.eror-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.eror-wrapper .content-wrapper-login {
    padding: 0
}

.eror-wrapper .eror-page {
    width: 100%;
    margin: 0 auto
}

.eror-wrapper .eror-page .eror-content {
    border-radius: 15px;
    text-align: center;
    min-height: 100vh;
    height: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.eror-wrapper .eror-page .eror-content h2 {
    font-size: 200px;
    font-weight: 900;
    color: #009dfd;
    line-height: 1;
    margin: 0
}

.eror-wrapper .eror-page .eror-content h3 {
    margin-bottom: 15px;
    font-size: 25px
}

.eror-wrapper .eror-page .eror-content a:hover {
    text-decoration: none
}

@media (max-width:1200px) {
    .eror-wrapper .eror-page {
        width: 100%
    }
}

@media (max-width:992px) {
    .eror-wrapper .eror-page .eror-content h2 {
        font-size: 150px
    }

    .eror-wrapper .eror-page .eror-content h3 {
        font-size: 22px
    }
}

@media (max-width:400px) {
    .eror-wrapper .eror-page .eror-content {
        border-radius: 15px;
        text-align: center;
        padding: 120px 20px
    }

    .eror-wrapper .eror-page .eror-content h2 {
        font-size: 130px
    }

    .eror-wrapper .eror-page .eror-content h3 {
        font-size: 20px
    }

    .eror-wrapper .eror-page .eror-content .blue-gradient-btn {
        padding: 4px 20px;
        font-size: 20px
    }
}

.sharing-header {
    background-size: cover;
    background-image: url("../images/m4Ge1tW.jpg");
    padding: 130px 0 80px;
    text-align: center
}

.gray-wrapper {
    background-color: #f8f9fa
}

.txt-wrp {
    padding: 90px 0 110px
}

.txt-wrp h4 {
    margin-top: 50px;
    font-weight: 600;
    background: -webkit-gradient(linear, left top, right top, from(#009dfd), to(#00dbde));
    background: linear-gradient(90deg, #009dfd 0, #00dbde);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.txt-wrp p {
    font-size: 15px
}

@media (max-width:767px) {
    .dark-bcg-share .padding-wrapper .white-holder-text {
        padding: 80px 60px
    }
}

@media (max-width:430px) {
    .dark-bcg-share .padding-wrapper .white-holder-text {
        padding: 80px 30px
    }
}

.add-remove {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.add-remove .add,
.add-remove .remove {
    border: 2px solid #6d6e71;
    color: #6d6e71;
    width: 15px;
    height: 15px;
    line-height: 12px;
    border-radius: 50%;
    margin: 3px 4px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    font-size: 12px
}

.add-remove .add:hover {
    color: blue;
    border: 2px solid blue
}

.add-remove .remove:hover {
    color: #ff1493;
    border: 2px solid #ff1493
}

.single-template {
    margin: 70px 0;
    border: 1px solid #e6e7e8;
    width: 690px;
    height: 977px;
    background-color: #fcfcfc;
    font-family: Raleway, sans-serif
}

.user-image {
    position: relative
}

.user-image form {
    position: absolute;
    top: 15%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 100%;
    opacity: .2;
    -webkit-transition: all .3s;
    transition: all .3s
}

.user-image form input[type=file] {
    display: none
}

.user-image form .file,
.user-image form .file-sub {
    font-size: 14px;
    border: 1px solid #fff;
    display: inline-block;
    padding: 6px 20px;
    cursor: pointer;
    border-radius: 50px;
    color: #fff;
    background-color: rgba(0, 0, 0, .2);
    width: 180px
}

.user-image form .file-sub:focus,
.user-image form .file:focus {
    outline: none
}

.user-image form:hover {
    opacity: 1
}

.single-template input {
    border: none;
    padding: 0
}

.save-cv .blue-gradient-btn {
    color: #000;
    width: 200px
}

.square-color .color-holder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.square-color .color-holder p {
    width: 100%;
    margin-bottom: 3px
}

.square-color .color-holder span {
    width: 20px;
    height: 20px;
    margin: 0 2px;
    cursor: pointer
}

.color-template-1 .color-holder-1 .color-1 {
    background-color: #e6e7e8
}

.color-template-1 .color-holder-1 .color-2 {
    background-color: rgba(0, 0, 0, .3)
}

.color-template-1 .color-holder-1 .color-3 {
    background-color: #6d6e71
}

.color-template-1 .color-holder-2 .color-1 {
    background-color: #e6e7e8
}

.color-template-1 .color-holder-2 .color-2 {
    background-color: #c7ecf8
}

.color-template-1 .color-holder-2 .color-3 {
    background-color: #458cb0
}

.color-template-1 .color-holder-3 .color-1 {
    background-color: rgba(238, 196, 94, .3)
}

.color-template-1 .color-holder-3 .color-2 {
    background-color: #efc46c
}

.color-template-1 .color-holder-3 .color-3 {
    background-color: #658e88
}

.color-template-2 .color-holder-1 .color-1 {
    width: 60px;
    background-image: url("https://i.imgur.com/bgSFH5T.jpg");
    background-position: 50%
}

.color-template-2 .color-holder-1 .color-2,
.color-template-2 .color-holder-1 .color-3 {
    display: none
}

.color-template-2 .color-holder-2 .color-1 {
    width: 60px;
    background-image: url("https://i.imgur.com/88HFNCs.jpg");
    background-position: 50%
}

.color-template-2 .color-holder-2 .color-2,
.color-template-2 .color-holder-2 .color-3 {
    display: none
}

.color-template-2 .color-holder-3 .color-1 {
    width: 60px;
    background-image: url("https://i.imgur.com/HuWNc5u.jpg");
    background-position: 50%
}

.color-template-2 .color-holder-3 .color-2,
.color-template-2 .color-holder-3 .color-3 {
    display: none
}

.color-template-3 .color-holder-1 .color-1 {
    background-color: #fcdccf
}

.color-template-3 .color-holder-1 .color-2 {
    background-color: #686964
}

.color-template-3 .color-holder-1 .color-3 {
    background-color: #bdd6d0
}

.color-template-3 .color-holder-2 .color-1 {
    background-color: #c7ecf8
}

.color-template-3 .color-holder-2 .color-2 {
    background-color: #77949f
}

.color-template-3 .color-holder-2 .color-3 {
    background-color: #f9d87a
}

.color-template-3 .color-holder-3 .color-1 {
    background-color: #eea3a3
}

.color-template-3 .color-holder-3 .color-2 {
    background-color: #77949f
}

.color-template-3 .color-holder-3 .color-3 {
    background-color: #fee3a0
}

.color-template-4 .color-holder-1 .color-1 {
    background-color: #97ced8;
    width: 60px
}

.color-template-4 .color-holder-1 .color-2,
.color-template-4 .color-holder-1 .color-3 {
    display: none
}

.color-template-4 .color-holder-2 .color-1 {
    background-color: #f0ab5d;
    width: 60px
}

.color-template-4 .color-holder-2 .color-2,
.color-template-4 .color-holder-2 .color-3 {
    display: none
}

.color-template-4 .color-holder-3 .color-1 {
    background-color: pink;
    width: 60px
}

.color-template-4 .color-holder-3 .color-2,
.color-template-4 .color-holder-3 .color-3 {
    display: none
}

.color-template-6 .color-holder-1 .color-1 {
    width: 40px;
    background-image: url("https://i.imgur.com/6blL0FU.jpg");
    background-position: top
}

.color-template-6 .color-holder-1 .color-2 {
    width: 20px;
    background-color: #f90
}

.color-template-6 .color-holder-1 .color-3 {
    background-color: #000
}

.color-template-6 .color-holder-2 .color-1 {
    width: 40px;
    background-image: url("https://i.imgur.com/LU8yACA.jpg");
    background-position: 50%
}

.color-template-6 .color-holder-2 .color-2 {
    background-color: #ecd5b8
}

.color-template-6 .color-holder-2 .color-3 {
    background-color: #e3977b
}

.color-template-6 .color-holder-3 .color-1 {
    width: 40px;
    background-image: url("https://i.imgur.com/o67pioI.jpg");
    background-position: 50%
}

.color-template-6 .color-holder-3 .color-2 {
    width: 20px;
    background-color: #458cb0
}

.color-template-6 .color-holder-3 .color-3 {
    background-color: #62c6fa
}

.color-template-7 .color-holder-1 .color-1 {
    background-color: #dcd8d5
}

.color-template-7 .color-holder-1 .color-2 {
    background-color: #f6e3dd
}

.color-template-7 .color-holder-1 .color-3 {
    background-color: #000
}

.color-template-7 .color-holder-2 .color-1 {
    background-color: #1b4b72
}

.color-template-7 .color-holder-2 .color-2 {
    background-color: #3f9ae5
}

.color-template-7 .color-holder-2 .color-3 {
    background-color: #000
}

.color-template-7 .color-holder-3 .color-1 {
    background-color: #7d0126
}

.color-template-7 .color-holder-3 .color-2 {
    background-color: #f0ebd7
}

.color-template-7 .color-holder-3 .color-3 {
    background-color: #000
}

.all-templates .col-xl-8 {
    height: 100%;
    overflow: scroll
}

@media (max-width:1200px) {
    .save-cv .blue-gradient-btn {
        margin: 0 auto
    }

    .customize {
        padding: 0 120px;
        margin-bottom: 40px
    }

    .all-templates .single-template {
        margin: 0 auto 60px
    }
}

@media (max-width:991.98px) {
    .customize {
        padding: 0
    }
}

.template-1 {
    margin: 70px 0;
    margin-left: auto;
    border: 1px solid #e6e7e8;
    width: 690px;
    height: 977px;
    background-color: #fcfcfc
}

.template-1 .custom-e-mail,
.template-1 .e-mail,
.template-1 .number,
.template-1 .skype {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px
}

.template-1 .custom-e-mail i,
.template-1 .e-mail i,
.template-1 .number i,
.template-1 .skype i {
    margin: 0 10px;
    font-size: 16px
}

.template-1 .custom-e-mail p,
.template-1 .e-mail p,
.template-1 .number p,
.template-1 .skype p {
    font-size: 12px;
    width: 100%
}

.template-1 p {
    margin-bottom: 0
}

.template-1 #template-1-left {
    padding-top: 10px;
    background-color: #e6e7e8;
    height: 766px
}

.template-1 #template-1-left .social-media .social a {
    color: #58595b;
    text-decoration: none
}

.template-1 .user-image {
    height: 210px
}

.template-1 .text-wrapp {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left
}

.template-1 .section-headline {
    background-color: transparent;
    width: 100%;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 900;
    color: #6d6e71;
    padding: 0;
    border: none;
    border-bottom: 1px solid #414042;
    text-align: left;
    margin-bottom: 8px
}

.template-1 textarea {
    width: 100%;
    border: 1px solid #8d8d8d;
    font-size: 12px;
    background-color: transparent
}

.template-1 .basic-text {
    font-size: 12px;
    border: 0;
    padding: 0;
    margin-bottom: 0;
    width: 100%
}

.template-1 .social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.template-1 .social i {
    margin-right: 6px
}

.template-1 .about,
.template-1 .skills,
.template-1 .social-media {
    margin-bottom: 15px
}

.template-1 header {
    position: relative
}

.template-1 header .name {
    position: absolute;
    bottom: 0;
    width: 688px;
    right: 15px;
    background-color: rgba(0, 0, 0, .3);
    padding: 10px 0;
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
    text-align: center
}

.template-1 header .name input {
    width: 100%;
    border: 0;
    text-align: center;
    color: #fff
}

.template-1 header .name .user-name {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #fff
}

.template-1 header .name .user-title {
    font-weight: 400;
    font-size: 12px;
    color: #fff
}

.template-1 .right-text {
    padding-top: 10px;
    padding-right: 20px
}

.template-1 .right-text p {
    color: #6d6e71
}

.template-1 .right-text .education-title,
.template-1 .right-text .job-title {
    margin-bottom: 5px;
    font-weight: 900;
    font-size: 14px;
    border: none;
    padding-left: 0;
    text-align: left
}

.template-1 .right-text .job-duration,
.template-1 .right-text .school-duration {
    border: none;
    text-align: left;
    padding-left: 0;
    font-size: 12px
}

.template-1 .right-text .job-description {
    text-align: left;
    font-size: 12px
}

.template-1 .experience-section {
    margin-bottom: 10px
}

.template-1 .education-description {
    text-align: left;
    font-size: 12px
}

.rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.rating span {
    color: #ccc;
    font-size: 14px
}

.rating .checked {
    color: #58595b
}

.customize {
    margin-top: 70px;
    text-align: left
}

.customize h4 {
    font-weight: 300;
    font-size: 36px;
    text-transform: none
}

.customize p {
    font-weight: 300;
    font-size: 14px
}

.customize .colors {
    margin-top: 30px;
    margin-bottom: 30px
}

.customize .colors h5 {
    margin-bottom: 20px
}

.customize .colors label {
    font-weight: 300;
    color: #6d6e71;
    margin-right: 20px;
    margin-bottom: 20px
}

.customize .middle {
    margin-bottom: 25px
}

.fonts h5 {
    margin-bottom: 20px
}

.middle {
    width: 100%;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.middle h1 {
    color: #fff
}

.middle input[type=radio] {
    display: none
}

.middle input[type=radio]:checked+.box {
    background-color: #58c378;
}

.middle input[type=radio]:checked+.box span {
    color: #fff;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.middle input[type=radio]:checked+.box span:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.middle .box {
    border-radius: 50px;
    width: 160px;
    height: 35px;
    background-color: #fff;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    will-change: transition;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative
}

.middle .box:active {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
}

.middle .box span {
    border-radius: 30px;
    border: 1px solid #e6e7e8;
    height: 35px;
    position: absolute;
    -webkit-transform: translate(0);
    transform: translate(0);
    left: 0;
    right: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #58595b;
    background: transparent;
    line-height: 35px
}

.middle .box span:before {
    line-height: 35px;
    font-size: 16px;
    margin-right: 8px;
    display: inline-block;
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px);
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-weight: 400;
    color: #fff
}

.save-cv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #009dfd
}

input,
textarea {
    background-color: transparent
}

textarea {
    resize: vertical
}

.user-biography {
    font-size: 12px
}

.contact {
    text-align: right
}

.template-1-contact {
    margin-top: 20px;
    text-align: right
}

.template-1-color-1 .section-headline {
    color: #458cb0;
    border-bottom: 1px solid #458cb0
}

.template-1-color-1 header .name {
    background-color: rgba(109, 179, 191, .3)
}

.template-1-color-1 header .name .user-name-1,
.template-1-color-1 header .name .user-title-1,
.template-1-color-1 header .template-1-contact {
    color: #458cb0
}

.template-1-color-1 #template-1-left {
    background-color: #c7ecf8
}

.template-1-color-1 #template-1-left .social-media .social p {
    color: #458cb0
}

.template-1-color-1 #template-1-left .social-media .social .user-title::-webkit-input-placeholder {
    color: #458cb0
}

.template-1-color-1 #template-1-left .social-media .social .user-title::-moz-placeholder {
    color: #458cb0
}

.template-1-color-1 #template-1-left .social-media .social .user-title::-ms-input-placeholder {
    color: #458cb0
}

.template-1-color-1 #template-1-left .social-media .social .user-title::placeholder {
    color: #458cb0
}

.template-1-color-1 .rating:not(:checked)>label:hover:before,
.template-1-color-1 .rating:not(:checked)>label:hover~label:before,
.template-1-color-1 .rating input:checked~label:before,
.template-1-color-1 .right-text .section-headline {
    color: #458cb0
}

.template-1-color-2 .section-headline {
    color: #658e88
}

.template-1-color-2 header .name {
    background-color: rgba(238, 196, 94, .3)
}

.template-1-color-2 header .name .user-name-3,
.template-1-color-2 header .name .user-title-3,
.template-1-color-2 header .name p,
.template-1-color-2 header .template-1-contact {
    color: #658e88
}

.template-1-color-2 #template-1-left {
    background-color: #efc46c
}

.template-1-color-2 #template-1-left .social-media .social p,
.template-1-color-2 .rating:not(:checked)>label:hover:before,
.template-1-color-2 .rating:not(:checked)>label:hover~label:before,
.template-1-color-2 .rating input:checked~label:before,
.template-1-color-2 .right-text .section-headline {
    color: #658e88
}

.template-2 {
    margin: 70px auto
}

.template-2 header {
    background-image: url("https://i.imgur.com/bgSFH5T.jpg");
    width: 100%;
    height: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: grey;
    background-blend-mode: multiply;
    text-align: center
}

.template-2 header .name {
    width: 90%
}

.template-2 header input {
    border: 0;
    color: #fff;
    text-align: center
}

.template-2 header ::-webkit-input-placeholder {
    color: #fff
}

.template-2 header ::-moz-placeholder {
    color: #fff
}

.template-2 header ::-ms-input-placeholder {
    color: #fff
}

.template-2 header ::placeholder {
    color: #fff
}

.template-2 header .user-name {
    color: #fff;
    font-size: 36px;
    width: 100%;
    font-weight: 300
}

.template-2 header .user-title {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    min-width: 60%;
    overflow: visible
}

.template-2 header .title-wrapp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 90%;
    margin: auto
}

.template-2 header span {
    width: 19%;
    background-color: #fff;
    height: 1px;
    display: block
}

.template-2 .bottom-part {
    height: 827px
}

.template-2 .user-image {
    margin-bottom: 15px
}

.template-2 .user-image img {
    border-radius: 50%;
    width: 180px;
    height: 180px;
    line-height: 1
}

.template-2 .user-image form {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 60%
}

.template-2 .user-image form .file,
.template-2 .user-image form input {
    width: 100%
}

.template-2 .section-headline {
    font-size: 13px;
    color: #6d6e71;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid #414042;
    margin-bottom: 6px
}

.template-2 .left-side {
    background-color: #e6e7e8;
    height: 827px;
    padding: 25px 15px 0 25px
}

.template-2 .left-side .custom-e-mail,
.template-2 .left-side .e-mail,
.template-2 .left-side .number,
.template-2 .left-side .skype {
    display: block;
    text-align: center;
    margin-bottom: 5px
}

.template-2 .left-side .custom-e-mail i,
.template-2 .left-side .e-mail i,
.template-2 .left-side .number i,
.template-2 .left-side .skype i {
    margin-right: 10px;
    font-size: 16px
}

.template-2 .left-side .custom-e-mail p,
.template-2 .left-side .e-mail p,
.template-2 .left-side .number p,
.template-2 .left-side .skype p {
    font-size: 12px
}

.template-2 .personal div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 13px;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left
}

.template-2 .personal .user-personal-bold {
    width: 45%;
    font-weight: 900
}

.template-2 .contact,
.template-2 .social-media {
    margin-bottom: 10px
}

.template-2 .contact i,
.template-2 .social-media i {
    margin-right: 10px;
    line-height: 1.4
}

.template-2 .contact .social,
.template-2 .social-media .social {
    display: block;
    text-align: center
}

.template-2 .contact .social a,
.template-2 .social-media .social a {
    color: #58595b;
    text-decoration: none
}

.template-2 .right {
    padding-right: 25px;
    padding-top: 25px
}

.template-2 .right .about-me {
    width: 100%;
    margin-top: 20px
}

.template-2 .right .education-title,
.template-2 .right .skills-title,
.template-2 .right .work-title {
    width: 100%;
    margin-bottom: 15px
}

.template-2 .right .custom-row {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.template-2 .right .custom-row .mini-left {
    width: 40%;
    text-align: left
}

.template-2 .right .custom-row .mini-right {
    width: 60%;
    text-align: right
}

.template-2 .right .custom-row .text-small {
    font-size: 12px;
    color: #58595b;
    margin: 0
}

.template-2 .small-headline {
    font-weight: 900;
    font-size: 12px;
    margin-bottom: 4px;
    text-transform: uppercase
}

.template-2 .year {
    color: #58595b;
    font-size: 12px
}

.template-2 .single-skill {
    width: 46%;
    margin-bottom: 10px
}

.template-2 .single-skill input {
    width: 100%
}

.template-2 .hobbies-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.template-2 .hobbies-section .single-hobbie {
    width: 17%;
    text-align: center
}

.template-2 .hobbies-section .single-hobbie img {
    text-align: center;
    margin-bottom: 4px
}

.template-2 .hobbies-section .single-hobbie select {
    border: none;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase
}

.template-2 .hobbies-section select {
    -moz-appearance: none;
    -webkit-appearance: none
}

.template-2 .hobbies-section select::-ms-expand {
    display: none
}

.education {
    margin-bottom: 15px
}

.contact .nmb-helper {
    margin-bottom: 0
}

.skill-part {
    margin-bottom: 20px
}

.user-info {
    font-size: 14px
}

.company-name {
    margin-bottom: 20px;
    font-size: 12px
}

.year {
    padding-top: 3px
}

.smaller-headline {
    font-size: 14px;
    margin-bottom: 5px
}

.template-2-color-2 header {
    background-image: url("https://i.imgur.com/HuWNc5u.jpg");
    background-position: 50%;
    height: 150px
}

.template-2-color-1 header {
    background-image: url("https://i.imgur.com/88HFNCs.jpg");
    background-position: 50%;
    height: 150px
}

.template-2-color-3 header {
    background-image: url("https://i.imgur.com/HuWNc5u.jpg");
    background-position: 50%;
    height: 150px
}

@media (max-width:575.98px) {
    .template-2 {
        margin: 30px auto
    }
}

.template-3 .section-headline {
    font-size: 13px;
    color: #686964;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid;
    margin-bottom: 6px
}

.template-3 .head-wrapper .border-gray {
    padding: 15px;
    border: 2px solid #686964;
    width: 85%;
    position: absolute;
    top: 40px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.template-3 .head-wrapper .border-gray header {
    background-color: #686964;
    height: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.template-3 .head-wrapper .border-gray header .name {
    width: 90%;
    text-align: center;
    color: #fff
}

.template-3 .head-wrapper .border-gray header .name .user-ide {
    color: #fff
}

.template-3 .head-wrapper .border-gray header .name ::-webkit-input-placeholder {
    color: #fff
}

.template-3 .head-wrapper .border-gray header .name ::-moz-placeholder {
    color: #fff
}

.template-3 .head-wrapper .border-gray header .name ::-ms-input-placeholder {
    color: #fff
}

.template-3 .head-wrapper .border-gray header .name ::placeholder {
    color: #fff
}

.template-3 .head-wrapper .border-gray header .name .user-name {
    font-size: 36px;
    font-weight: 500;
    width: 100%
}

.user-job {
    color: #fff;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    min-width: 60%;
    overflow: visible
}

.education-part {
    margin-bottom: 15px
}

.right-part {
    padding: 0 37px;
    position: relative;
    width: 50%;
    height: 100%;
    background-color: #bdd6d0;
    padding-top: 250px;
    text-align: left
}

.right-part .education-header {
    width: 100%
}

.right-part .school-title {
    width: 100%;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 5px
}

.right-part .school-course {
    width: 100%;
    font-size: 12px
}

.right-part .job-header {
    width: 100%
}

.right-part .job-title {
    width: 100%;
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 5px
}

.right-part .job-course {
    width: 100%;
    font-size: 12px
}

.left-part {
    padding: 0 40px;
    position: relative;
    width: 50%;
    height: 100%;
    background-color: #fcdccf;
    padding-top: 250px;
    text-align: left
}

.left-part .rating span {
    margin: 0 2px
}

.left-part .profile-part {
    width: 100%
}

.left-part .profile-part .profile {
    margin-bottom: 10px;
    border-bottom: 1px solid;
    width: 100%
}

.left-part .profile-part textarea {
    width: 100%;
    font-size: 12px
}

.left-part .contact-part {
    margin-bottom: 15px
}

.left-part .contact-part input {
    font-size: 12px
}

.left-part .profile {
    width: 100%;
    color: #686964;
    margin-bottom: 10px;
    border-bottom: 1px solid
}

.left-part .profile .number-part {
    width: 100%
}

.left-part .skill-part .skill-headline {
    color: #686964;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid
}

.left-part .skill-part .custom-row {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.left-part .skill-part .single-skill p {
    font-size: 14px;
    margin-bottom: 5px
}

.left-part .skill-part .single-skill label {
    margin-right: 5px
}

.left-part .contact {
    margin-bottom: 15px
}

.left-part .contact .network-head {
    width: 100%;
    margin-bottom: 10px;
    text-align: left
}

.left-part .contact p {
    margin-bottom: 0;
    font-size: 12px
}

.left-part .custom-e-mail,
.left-part .e-mail,
.left-part .number,
.left-part .skype {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px
}

.left-part .custom-e-mail i,
.left-part .e-mail i,
.left-part .number i,
.left-part .skype i {
    margin-right: 10px;
    font-size: 16px
}

.left-part .custom-e-mail p,
.left-part .e-mail p,
.left-part .number p,
.left-part .skype p {
    font-size: 12px
}

.center-div {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.profile-data {
    font-size: 12px
}

.hlper {
    line-height: 0
}

.temp-1 {
    width: 100%;
    margin-right: 10px
}

.temp-1 i {
    margin-left: 10px
}

.social-media {
    margin-bottom: 15px
}

.social-media .soc-head {
    width: 100%
}

.social-media .social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1
}

.social-media .social .user-socila-input a {
    text-decoration: none;
    color: #58595b
}

.social-media .social i {
    margin-right: 10px;
    font-size: 16px
}

.social-media .social p {
    margin-bottom: 5px;
    font-size: 12px
}

.template-3-color-1 .right-part {
    background-color: #f9d87a
}

.template-3-color-1 .left-part {
    background-color: #c7ecf8
}

.template-3-color-1 .head-wrapper .border-gray {
    border: 2px solid #77949f
}

.template-3-color-1 .head-wrapper .border-gray header {
    background-color: #77949f
}

.template-3-color-1 .rating:not(:checked)>label:hover:before,
.template-3-color-1 .rating:not(:checked)>label:hover~label:before,
.template-3-color-1 .rating input:checked~label:before {
    color: #77949f
}

.template-3-color-2 .right-part {
    background-color: #fee3a0
}

.template-3-color-2 .left-part {
    background-color: #eea3a3
}

.template-3-color-2 .head-wrapper .border-gray {
    border: 2px solid #77949f
}

.template-3-color-2 .head-wrapper .border-gray header {
    background-color: #77949f
}

.template-3-color-2 .rating:not(:checked)>label:hover:before,
.template-3-color-2 .rating:not(:checked)>label:hover~label:before,
.template-3-color-2 .rating input:checked~label:before {
    color: #fee3a0
}

.template-3-color-3 .right-part {
    background-color: #8ac3cc
}

.template-3-color-3 .left-part {
    background-color: #cfe9f4
}

.template-3-color-3 .head-wrapper .border-gray {
    border: 2px solid #1b4b72
}

.template-3-color-3 .head-wrapper .border-gray header {
    background-color: #1b4b72
}

.template-3-color-3 .rating:not(:checked)>label:hover:before,
.template-3-color-3 .rating:not(:checked)>label:hover~label:before,
.template-3-color-3 .rating input:checked~label:before {
    color: #1b4b72
}

.template-4 {
    background-color: #fff;
    padding: 40px
}

.template-4 .rating:not(:checked)>label:hover:before,
.template-4 .rating:not(:checked)>label:hover~label:before,
.template-4 .rating input:checked~label:before {
    color: #97ced8
}

.template-4 .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%
}

.template-4 p {
    margin-bottom: 0
}

.template-4 .row {
    height: 100%
}

.template-4 .top-left {
    border: 8px solid #97ced8;
    padding: 20px;
    margin-bottom: 40px;
    width: 100%
}

.template-4 .top-left img {
    border-radius: 50%;
    margin-bottom: 20px
}

.template-4 .top-left .user-name {
    text-transform: uppercase;
    border-bottom: 1px solid #97ced8;
    padding-bottom: 4px;
    margin-bottom: 5px;
    font-size: 20px
}

.template-4 .top-left .user-title {
    font-size: 14px;
    margin-bottom: 10px
}

.template-4 .small-headline {
    color: #97ced8;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px
}

.template-4 .small-text {
    margin-bottom: 10px;
    font-size: 13px
}

.template-4 .bot-left {
    padding: 15px;
    background-color: #97ced8;
    color: #fff;
    text-align: left
}

.template-4 .bot-left .headline {
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
    margin-bottom: 8px
}

.template-4 .bot-left .basic-text {
    font-size: 12px;
    margin-bottom: 10px
}

.template-4 .bot-left .social-text {
    font-size: 14px
}

.template-4 .right {
    text-align: left
}

.template-4 .right .headline {
    border-bottom: 1px solid #97ced8;
    padding-bottom: 4px;
    margin-bottom: 8px
}

.template-4 .right .company-name,
.template-4 .right .school-name,
.template-4 .right .user-skill,
.template-4 .right .year {
    text-transform: uppercase;
    font-size: 12px
}

.template-4 .right .job-description,
.template-4 .right .user-major {
    font-size: 12px
}

.template-4 .right .experience,
.template-4 .right .ussr-skills {
    margin-bottom: 15px
}

.template-4 .skill {
    width: 47%;
    margin-bottom: 10px
}

.template-4 .skills {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.template-4-color-1 .rating:not(:checked)>label:hover:before,
.template-4-color-1 .rating:not(:checked)>label:hover~label:before,
.template-4-color-1 .rating input:checked~label:before {
    color: #f0ab5d
}

.template-4-color-1 .top-left {
    border: 8px solid #f0ab5d
}

.template-4-color-1 .top-left .user-name {
    border-bottom: 1px solid #f0ab5d
}

.template-4-color-1 .small-headline {
    color: #f0ab5d
}

.template-4-color-1 .bot-left {
    background-color: #f0ab5d
}

.template-4-color-1 .right .headline {
    border-bottom: 1px solid #f0ab5d
}

.template-4-color-2 .rating:not(:checked)>label:hover:before,
.template-4-color-2 .rating:not(:checked)>label:hover~label:before,
.template-4-color-2 .rating input:checked~label:before {
    color: pink
}

.template-4-color-2 .top-left {
    border: 8px solid pink
}

.template-4-color-2 .top-left .user-name {
    border-bottom: 1px solid pink
}

.template-4-color-2 .small-headline {
    color: pink
}

.template-4-color-2 .bot-left {
    background-color: pink
}

.template-4-color-2 .right .headline {
    border-bottom: 1px solid pink
}

.template-4-color-3 .rating:not(:checked)>label:hover:before,
.template-4-color-3 .rating:not(:checked)>label:hover~label:before,
.template-4-color-3 .rating input:checked~label:before {
    color: #cc3c2c
}

.template-4-color-3 .top-left {
    border: 8px solid #cc3c2c
}

.template-4-color-3 .top-left .user-name {
    border-bottom: 1px solid #cc3c2c
}

.template-4-color-3 .small-headline {
    color: #cc3c2c
}

.template-4-color-3 .bot-left {
    background-color: #cc3c2c
}

.template-4-color-3 .right .headline {
    border-bottom: 1px solid #cc3c2c
}

.template-6 {
    background-image: url("https://i.imgur.com/6blL0FU.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    padding: 20px
}

.template-6 .template-6-content {
    border: 2px solid #414042;
    background-color: #fff;
    height: 100%;
    width: 100%;
    padding: 30px;
    text-align: left
}

.template-6 .template-6-content p {
    margin-bottom: 0
}

.template-6 .template-6-content img {
    border-radius: 50%;
    margin-bottom: 20px
}

.template-6 .template-6-content .user-name {
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1.2
}

.template-6 .template-6-content .left {
    text-align: left
}

.template-6 .template-6-content .left .contact {
    text-align: left;
    margin-bottom: 20px
}

.template-6 .template-6-content .left .contact .small-bold {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    width: 100%
}

.template-6 .template-6-content .left .small-text {
    font-size: 12px;
    margin-bottom: 6px
}

.template-6 .template-6-content .left .social div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 6px
}

.template-6 .template-6-content .left .social div .social-icon {
    width: 10%
}

.template-6 .template-6-content .left .social div .social-icon i {
    color: #f90
}

.template-6 .template-6-content .left .social div .small-text {
    width: 85%
}

.template-6 .template-6-content .left .social div .small-text a {
    color: #414042
}

.template-6 .template-6-content .left .social div .small-text a:hover {
    text-decoration: none;
    color: #414042
}

.template-6 .template-6-content .headline {
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f90
}

.template-6 .template-6-content .small-text-2 {
    font-size: 12px;
    margin-bottom: 6px
}

.template-6 .template-6-content .right {
    border-left: 2px solid #414042;
    height: 100%;
    padding-left: 30px
}

.template-6 .template-6-content .right .job-description {
    font-size: 12px
}

.template-6 .template-6-content .right .about-me,
.template-6 .template-6-content .right .education,
.template-6 .template-6-content .right .experience {
    margin-bottom: 15px
}

.template-6 .template-6-content .right .year {
    font-size: 11px;
    color: #6d6e71;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .5px
}

.template-6 .template-6-content .right .user-major {
    font-size: 15px;
    text-transform: uppercase
}

.template-6 .template-6-content .right .company-name,
.template-6 .template-6-content .right .user-skill {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px
}

.template-6 .template-6-content .right .skill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px
}

.template-6 .template-6-content .right .skill .user-skill {
    width: 40%;
    color: #6d6e71
}

.template-6 .template-6-content .right .skill .rating {
    width: 55%
}

.template-6 .template-6-content .about-me,
.template-6 .template-6-content .education,
.template-6 .template-6-content .experience,
.template-6 .template-6-content .ussr-skills {
    position: relative
}

.template-6 .template-6-content .about-me .circle-small,
.template-6 .template-6-content .education .circle-small,
.template-6 .template-6-content .experience .circle-small,
.template-6 .template-6-content .ussr-skills .circle-small {
    width: 10px;
    height: 10px;
    background-color: #f90;
    position: absolute;
    left: -36px;
    top: 0;
    border-radius: 50%
}

.template-6 .template-6-content .rating:not(:checked)>label:hover:before,
.template-6 .template-6-content .rating:not(:checked)>label:hover~label:before,
.template-6 .template-6-content .rating input:checked~label:before {
    color: #f90
}

.template-6-color-1 {
    background-image: url("https://i.imgur.com/LU8yACA.jpg");
    background-size: cover
}

.template-6-color-1 .template-6-content {
    border: 2px solid #ecd5b8
}

.template-6-color-1 .template-6-content .headline {
    border-bottom: 1px solid #ecd5b8
}

.template-6-color-1 .template-6-content .right {
    border-left: 2px solid #ecd5b8
}

.template-6-color-1 .template-6-content .about-me .circle-small,
.template-6-color-1 .template-6-content .education .circle-small,
.template-6-color-1 .template-6-content .experience .circle-small,
.template-6-color-1 .template-6-content .ussr-skills .circle-small {
    background-color: #e3977b
}

.template-6-color-1 .template-6-content .left .social div .social-icon i,
.template-6-color-1 .template-6-content .rating:not(:checked)>label:hover:before,
.template-6-color-1 .template-6-content .rating:not(:checked)>label:hover~label:before,
.template-6-color-1 .template-6-content .rating input:checked~label:before {
    color: #e3977b
}

.template-6-color-2 {
    background-image: url("https://i.imgur.com/o67pioI.jpg");
    background-size: cover
}

.template-6-color-2 .template-6-content {
    border: 2px solid #458cb0
}

.template-6-color-2 .template-6-content .headline {
    border-bottom: 1px solid #458cb0
}

.template-6-color-2 .template-6-content .right {
    border-left: 2px solid #458cb0
}

.template-6-color-2 .template-6-content .about-me .circle-small,
.template-6-color-2 .template-6-content .education .circle-small,
.template-6-color-2 .template-6-content .experience .circle-small,
.template-6-color-2 .template-6-content .ussr-skills .circle-small {
    background-color: #62c6fa
}

.template-6-color-2 .template-6-content .left .social div .social-icon i,
.template-6-color-2 .template-6-content .rating:not(:checked)>label:hover:before,
.template-6-color-2 .template-6-content .rating:not(:checked)>label:hover~label:before,
.template-6-color-2 .template-6-content .rating input:checked~label:before {
    color: #62c6fa
}

.template-6-color-3 {
    background-image: url("https://i.imgur.com/DzY9Cfp.jpg");
    background-size: cover
}

.template-6-color-3 .template-6-content-color-3 {
    border: 2px solid #3f4a5d
}

.template-6-color-3 .template-6-content-color-3 .headline {
    border-bottom: 1px solid #d0865a
}

.template-6-color-3 .template-6-content-color-3 .right {
    border-left: 2px solid #3f4a5d
}

.template-6-color-3 .template-6-content-color-3 .about-me .circle-small,
.template-6-color-3 .template-6-content-color-3 .education .circle-small,
.template-6-color-3 .template-6-content-color-3 .experience .circle-small,
.template-6-color-3 .template-6-content-color-3 .ussr-skills .circle-small {
    background-color: #d0865a
}

.template-6-color-3 .template-6-content-color-3 .rating:not(:checked)>label:hover:before,
.template-6-color-3 .template-6-content-color-3 .rating:not(:checked)>label:hover~label:before,
.template-6-color-3 .template-6-content-color-3 .rating input:checked~label:before {
    color: #d0865a
}

.template-6-color-3 .template-6-content-color-3 .left .social div .social-icon i {
    color: #3f4a5d
}

.template-7 {
    position: relative
}

.template-7 .wrap-color {
    height: 100%
}

.template-7 .wrap-color .gray-color {
    height: 50%;
    background-color: #dcd8d5
}

.template-7 .wrap-color .rose-color {
    background-color: #f6e3dd;
    height: 50%
}

.template-7 .wrap-white {
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 90%;
    height: 93%
}

.template-7 .wrap-white .lft-side {
    padding: 25px 0 0 25px
}

.template-7 .wrap-white .lft-side .user-name {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 5px;
    line-height: 1
}

.template-7 .wrap-white .lft-side .user-title {
    font-style: italic
}

.template-7 .wrap-white .lft-side img {
    border-radius: 150px;
    width: 75%;
    margin-bottom: 35px
}

.template-7 .wrap-white .lft-side .user-contact {
    margin-bottom: 35px
}

.template-7 .wrap-white .lft-side .user-contact .cnt-header {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: left;
    font-size: 14px;
    margin-bottom: 5px;
    padding: 5px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600
}

.template-7 .wrap-white .lft-side .user-contact .cnt-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid grey;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px;
    padding: 5px 0
}

.template-7 .wrap-white .lft-side .user-contact .cnt-wrapper .icon-part {
    width: 20%;
    text-align: center
}

.template-7 .wrap-white .lft-side .user-contact .cnt-wrapper .icon-part p {
    margin-bottom: 5px;
    border-right: 1px solid grey
}

.template-7 .wrap-white .lft-side .user-contact .cnt-wrapper .icon-part i {
    font-size: 14px
}

.template-7 .wrap-white .lft-side .user-contact .cnt-wrapper .txt-part {
    font-size: 12px;
    width: 80%;
    text-align: right;
    margin-bottom: 5px
}

.template-7 .wrap-white .lft-side .abt-part {
    margin-bottom: 35px
}

.template-7 .wrap-white .lft-side .abt-part .about-header-part {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-bottom: 15px
}

.template-7 .wrap-white .lft-side .abt-part .about-header-part .about-header {
    font-size: 14px;
    text-align: left;
    letter-spacing: 2px;
    margin-bottom: 0;
    padding: 5px 0;
    font-weight: 600;
    text-transform: uppercase
}

.template-7 .wrap-white .lft-side .abt-part .about-text {
    font-size: 12px;
    text-align: left
}

.template-7 .wrap-white .lft-side .social-media .social .user-socila-input a {
    color: #58595b;
    text-decoration: none
}

.template-7 .wrap-white .lft-side .social-media .soc-med {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-bottom: 15px
}

.template-7 .wrap-white .lft-side .social-media .soc-med .soc-header {
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 0;
    padding: 5px 0;
    letter-spacing: 2px;
    font-weight: 600
}

.template-7 .wrap-white .rght-side {
    padding: 25px 25px 0 10px
}

.template-7 .wrap-white .rght-side .education .edu {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-bottom: 15px
}

.template-7 .wrap-white .rght-side .education .headline {
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 0;
    padding: 5px 0;
    letter-spacing: 2px;
    font-weight: 600;
    color: #58595b
}

.template-7 .wrap-white .rght-side .education .wrp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.template-7 .wrap-white .rght-side .education .wrp .year-wrap {
    width: 35%;
    border-right: 1px solid gray
}

.template-7 .wrap-white .rght-side .education .wrp .year-wrap .schl-year {
    font-size: 12px
}

.template-7 .wrap-white .rght-side .education .wrp .school {
    width: 65%;
    text-align: right;
    padding-right: 15px
}

.template-7 .wrap-white .rght-side .education .wrp .school .school-name {
    font-size: 12px;
    color: #f6e3dd;
    font-weight: 600;
    margin-bottom: 5px
}

.template-7 .wrap-white .rght-side .education .wrp .school .user-major {
    font-size: 12px;
    margin-bottom: 10px;
    font-style: italic
}

.template-7 .wrap-white .rght-side .exp-part {
    margin-bottom: 53px
}

.template-7 .wrap-white .rght-side .exp-part .exp {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-bottom: 15px
}

.template-7 .wrap-white .rght-side .exp-part .exp .headline {
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 0;
    padding: 5px 0;
    letter-spacing: 2px;
    font-weight: 600;
    color: #58595b
}

.template-7 .wrap-white .rght-side .exp-part .wrp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.template-7 .wrap-white .rght-side .exp-part .wrp .year-wrap {
    width: 35%;
    border-right: 1px solid gray
}

.template-7 .wrap-white .rght-side .exp-part .wrp .year-wrap .wrk-year {
    font-size: 12px
}

.template-7 .wrap-white .rght-side .exp-part .company {
    width: 65%;
    text-align: right;
    padding-right: 15px
}

.template-7 .wrap-white .rght-side .exp-part .company .company-name {
    font-size: 12px;
    color: #f6e3dd;
    font-weight: 600;
    margin-bottom: 5px
}

.template-7 .wrap-white .rght-side .exp-part .company .user-major {
    font-size: 12px;
    margin-bottom: 10px;
    font-style: italic
}

.template-7 .wrap-white .rght-side .ussr-skills {
    margin-bottom: 15px
}

.template-7 .wrap-white .rght-side .ussr-skills .wrapheader {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-bottom: 15px
}

.template-7 .wrap-white .rght-side .ussr-skills .wrapheader .headline {
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 0;
    padding: 5px 0;
    letter-spacing: 2px;
    font-weight: 600;
    color: #58595b
}

.template-7 .wrap-white .rght-side .ussr-skills .skills {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.template-7 .wrap-white .rght-side .ussr-skills .skills .skill {
    width: 48%;
    margin-bottom: 10px
}

.template-7 .wrap-white .rght-side .ussr-skills .skills .skill .user-skill {
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 5px;
    font-size: 12px;
    text-align: left
}

.template-7-color-1 .wrap-color .gray-color {
    background-color: #1b4b72
}

.template-7-color-1 .wrap-color .rose-color {
    background-color: #3f9ae5
}

.template-7-color-1 .company .company-name,
.template-7-color-1 .wrp .school .school-name {
    color: #3f9ae5 !important
}

.template-7-color-2 .wrap-color .gray-color {
    background-color: #7d0126
}

.template-7-color-2 .wrap-color .rose-color {
    background-color: #f0ebd7
}

.template-7-color-2 .company .company-name,
.template-7-color-2 .wrp .school .school-name {
    color: #7d0126 !important
}

.template-7-color-3 .wrap-color .gray-color {
    background-color: #112a47
}

.template-7-color-3 .wrap-color .rose-color {
    background-color: #edb021
}

.template-7-color-3 .company .company-name,
.template-7-color-3 .wrp .school .school-name {
    color: #edb021 !important
}

.wrapper {
    display: flex;
}

.pricing-icon i {
    color: #A770EF !important
}

.footer .top-footer .footer-items-wrapper .credit-card img {
    height: 20px;
    width: auto;
    margin-left: auto;
    margin-bottom: 0;
}