.container {
    width: 85vw;
}
div#inner-header {
    display: grid;
    grid-template-rows: 2fr 3fr;
}
.lower-sec ul li:last-child{
    margin:0;
}
#navigation-logo {
    width: 194px;
    margin-top: 20px;
    z-index: 500;
    background-position: center center;
    background-size: 100%;
    border: 5px #efefef solid;
    border-radius: 50%;
    bottom: -50px;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 20%), 1px 1px 4px rgb(0 0 0 / 30%);
    height: 194px;
    left: 10vw;
    position: absolute;
    background-image: url(../images/logo.png);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .8s ease .8s;
    }

div#nav-upper-sec {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
nav#regular-navigation:after{
    content: '';
    position: absolute;
    z-index: 100;
    border-left: 0px solid transparent;
    border-right: 100vw solid transparent;
    border-top: 5vw solid #00b4d8;
    left: 0;
    top: 100%;
}

section#home-banner {position: relative;height: calc(100vw / 3);background-image: url(../images/banner.jpg);background-position: center;background-size: cover;display: flex;align-items: center;width: 100vw;}

div.home-text {position: absolute;display: flex;flex-direction: column;height: 100%;left: 0;width: 25%;justify-content: center;align-items: center;background: rgb(3 4 94 / 60%);top: 0;transition: all .6s cubic-bezier(0.24, 0.1, 0.36, 0.83) .2s;transform: skew(3.312rad);opacity: 0;}

div.home-text:after {
    content: '';
    position: absolute;
    border-left: 0px solid transparent;
    border-right: 250px solid transparent;
    border-top: 70vh solid rgb(3 4 94 / 60%);
    left: 100%;
    top: 0;
    }

div.inner-home-data {display: flex;flex-direction: column;color: #fff;align-items: flex-start;}

span.title-one {background: #0077b6;font-size: 1.7em;padding: 2px 5px;font-weight: 400;opacity: 0;
    transform: translateX(-50px);transition: all .4s ease .8s;}

span.title-two {font-size: 1.55em;line-height: 1.8;opacity: 0;
    transform: translateX(-60px);
    transition: all .4s ease 1s;}

.btn--prime {
    display: inline-block;
    /* padding: 0.75rem 1.25rem; */
    /* border-radius: 10rem; */
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    text-align: left;
    border-radius: 5px;
    font-weight: 500;
}
.btn--inv{
    color: #00b4d8;
}
.btn--prime:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00b4d8;
    /* border-radius: 10rem; */
    z-index: -2;
}
.btn--inv:after{
    background: #fff;
}
.btn--prime:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #0077b6;
    transition: all 0.3s;
    /* border-radius: 10rem; */
    z-index: -1;
}
.btn--inv:before{
    background: #f4efdf;
}
.btn--prime:hover:before {
    width: 100%;
}

span.title-three {font-size: 3em;font-weight: 900;line-height: 1;text-transform: uppercase;opacity: 0;transition: all .5s ease 1.1s;transform: translateX(-70px);}

section#home-articles {background: #f4efdf;padding: 30px;display: flex;justify-content: center;position: relative;overflow: hidden;padding-bottom: 20vh;z-index: 3;}

section#home-articles:before {content: '';position: absolute;border-left: 0px solid transparent;
    border-right: 24.9vw solid transparent;
    border-top: 110vh solid rgb(3 4 94 );left: 0;top: 0;}

div#articles-container {z-index: 5;position: relative;}

div#articles-container h2 {font-size: 4em;margin: 30px 0;color: #00b4d8;font-weight: 200;}

.article-outer {position: relative;display: flex;width: 90%;background: #fff;flex-direction: column;cursor: pointer;margin: 3vh 0;overflow: hidden;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

div#articles-box {position: relative;display: grid;grid-template-columns: 1fr 1fr 1fr;justify-items: center;}

.article-img:after {
    content: '';
    position: absolute;
    border-left: 0px solid transparent;
    border-right: 29.38vw solid transparent;
    border-bottom: 50px solid rgb(255 255 255);
    bottom: -3px;
    transition: all .5s ease;
    }

.article-content {position: relative;padding: 30px;top: -15px;}

span.date-sec {font-size: 13px;margin-bottom: 10px;position: relative;display: block;color: #00b4d8;}

section#home-videos {position: relative;display: flex;justify-content: center;background: #00b4d8;padding: 5vh 0;}

div#videos-outer {position: relative;display: grid;grid-template-columns: 3fr 6fr;}

.o-video {width: 90%;position: relative;margin: 15px 0;}

.o-video iframe {position: relative;width: 100%;border: 3px solid #fff;}

div#video-infor {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}

div#video-infor h2 {color: #fff;font-weight: 200;line-height: 1;font-size: 4.5em;}

div#video-infor:after {content: '';position: absolute;width: 3px;height: 100%;background: #fff;right: 35px;}

footer:before {content: '';
    position: absolute;

    border-right: 0px solid transparent;
    border-left: 100vw solid transparent;
    border-top: 10vh solid #00b4d8;top: 0;}

.footer-bottom:before {content: '';}

div#footer-inner {width: 100%;display: grid;grid-template-columns: 8fr 4fr;}

ul.sitemap {display: flex;list-style: none;}

ul.sitemap li a {color: #00b4d8;margin-right: 25px;}

div#footer-logo {
    width: 10vw;
    margin-top: 20px;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    border: 5px #efefef solid;
    border-radius: 50%;
    bottom: -50px;
    box-shadow: inset 1px 1px 3px rgb(0 0 0 / 20%), 1px 1px 4px rgb(0 0 0 / 30%);
    height: 10vw;
    /* left: 150px; */
    position: relative;
    background-image: url(../images/logo.png);
    }

div#footer-right {position: relative;display: grid;justify-items: center;}

footer h3 {color: #00b4d8;font-size: 2em;margin-bottom: 15px;font-weight: 400;}

input#tnp-1 {background: transparent;padding: 15px;border: 3px solid #00b4d8;color: #f4efdf;font-family: 'NunitoSans';font-size: 15px;width: 95%;}

button#nl-submit {margin: 0;}

div#icon-sec {display: flex;}

span.icon-in {font-size: 3em;color: #00b4d8;margin-right: 40px;display: flex;align-items: baseline;transition: all .3s ease;}

span.icon-desc {font-size: 18px;color: #00b4d8;margin-left: 10px;transition: all .3s ease;}

.nav-inner:before {content: '';border-left: 8vw solid transparent;
    border-right: 38vw solid transparent;
    border-top: 82vw solid #03045e;border-bottom: 10vw solid transparent;position: absolute;left: -2.4vw;}

span.btn--bold:before {content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #0077b6;
    transition: all 0.3s;
    /* border-radius: 10rem; */
    z-index: -1;}

span.btn--bold:after {content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00b4d8;
    /* border-radius: 10rem; */
    z-index: -2;}

span.btn--bold:hover:before {width: 100%;}

.nav-inner {position: absolute;width: 100%;height: 100%;overflow: hidden;top: 0;left: 0;}

section#about {position: relative;padding: 15vh 15vh 0;overflow: hidden;background: #fff;z-index: 1;}

div#abt-inner {position: relative;display: grid;grid-template-columns: 4fr 7fr;margin-bottom: 30px;}

section#about:before {content: '';
    border-left: 0vw solid transparent;
    border-right: 40.8vw solid transparent;
    border-top: 95vw solid #0077b6;position: absolute;left: 0;top: 0;}

div#abt-inner h3 {position: relative;justify-self: flex-start;align-self: flex-start;font-size: 4em;text-transform: uppercase;color: #fff;}

div#abt-footer {padding-left: 23.5vw;position: relative;padding-top: 30px;padding-bottom: 30px;display: grid;grid-template-columns: 1fr 1fr;}

div#abt-footer:before {
    content: '';
    position: absolute;
    border-right: 89vw solid transparent;
    border-left: 110px solid transparent;
    border-bottom: 17.7vw solid rgb(3 4 94);
    z-index: -1;
    top: 0;
    left: 15.7vw;
    }

div#abt-vision {padding: 30px 20px 10px;position: relative;padding-left: 0;color: #fafafa;padding-right: 40px;}

div#abt-mission {position: relative;display: grid;grid-template-columns: 1fr 2fr;color: #03045e;}

div#abt-mission p {font-size: 14px;text-align: justify;}

.container-serv {
    background-color: #f9f9f9;
    color: #444;
    /* border-radius: 20px; */
    box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25);
    margin: 20px 0;
}
.question {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 20px 80px 20px 20px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: 'Poppins';
    z-index: 1;
    overflow: hidden;
    background: #f4efdf;
    color: #222;
    font-weight: 500;
    }

.question.active {}

.question::after {
    content: "\002B";
    font-size: 2.2rem;
    position: absolute;
    right: 20px;
    transition: 0.2s;
}

.question.active::after {
    transform: rotate(45deg);
}

.answercont {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
}

.answer {
    padding: 20px;
    line-height: 1.5rem;
    position: relative;
    font-weight: 400;
}

.question.active + .answercont {
}

section#faq-sec {position: relative;display: flex;justify-content: center;padding: 15vh 0;background: #fff;}

.main-title {text-align: center;font-size: 3em;color: #0077b6;margin-bottom: 50px;z-index: 1;position: relative;}

.main-title:before {content: '';position: absolute;

    border-left: 50px solid transparent;
    border-right: 33vw solid transparent;
    border-top: 5vh solid #caf0f8;z-index: -1;left: 25%;top: 50%;}

.question:before {content: '';position: absolute;border-left: 50px solid transparent;
    border-right: 33vw solid transparent;
    border-top: 11vh solid #90e0ef;z-index: -1;top: 0;left: 0;}

div#abt-footer:after {
    content: '';
    position: absolute;
    border-left: 73vw solid transparent;
    border-right: 4vw solid transparent;
    border-top: 16vw solid #f4efdf;
    z-index: -1;
    right: -15vw;
    top: 0px;
    }

section#articles-sec {position: relative;display: flex;flex-direction: column;}

div#article-sec {position: relative;display: flex;flex-direction: column;padding: 10vh;justify-items: center;background: #f4efdf;}

div#category-sec {background: #fff;box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);position: relative;padding: 15vh 30px;}

section#vacancy-sec {position: relative;display: flex;justify-content: center;padding: 10vh 0;background: #fff;}

div#vac-cont {position: relative;display: flex;flex-direction: column;justify-items: center;}

.vacancy {position: relative;width: 90%;margin: 30px 0;overflow: hidden;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);border-radius: 1rem;}

.vac-img {position: relative;width: 100%;height: 20vh;background-position: top;background-size: cover;overflow: hidden;}

.vac-content {position: relative;width: 100%;background: #fff;padding: 10px;display: grid;grid-template-columns: 1fr;border-radius: 16px;top: -14px;}

.vac-country {position: relative;width: 60px;height: 40px;background: url(../images/flag-lg/uk.png);justify-self: center;top: -10px;background-position: center;background-size: cover;display: none;}

span.vac-title {font-size: 25px;text-align: left;padding: 1rem 1rem 0;font-size: 1.3rem;color: #03045e;}

.vac-content:before {
    content: '';
    position: absolute;
    /* background: #fff; */
    border-right: 0px solid transparent;
    border-left: 21.38vw solid transparent;
    border-bottom: 50px solid #f4efdf;
    bottom: 100%;
    right: 0;
    display: none;
    }

section#video-sec {position: relative;display: flex;justify-content: center;padding: 10vh 0;}

.vid-cover {width: 90% !important;height: 180px !important;margin: 20px 0;justify-self: center;display: flex !important;align-items: center;justify-content: center;}

.vid-hm-cover {width: 95% !important;height: 150px !important;display: flex !important;align-items: center;justify-content: center;border: 3px solid #fff;}

nav#composer-nav {position: relative;padding: 20px 5vw;background: #03045e;width: 100vw;/* height: 120px; */display: grid;grid-template-columns: 6fr 4fr;}

div#logo-cmp-sec img {height: 100px;position: relative;display: block;}

div#logo-cmp-sec {position: relative;height: 100px;width: 100px;background-image: url(../images/logo.png);background-position: center;background-size: cover;border: 2px solid #fff;border-radius: 50%;}

div#menu-cmp-sec {position: relative;display: flex;align-items: center;justify-content: flex-end;}

h4.nav-title {position: relative;color: #fff;font-size: 2.5em;margin-left: 20px;text-transform: uppercase;}

nav#composer-nav:before {content: '';
    position: absolute;
    border-left: 0px solid transparent;
    border-right: 100vw solid transparent;
    border-top: 15vh solid #00b4d8;
    top: 0;}

a.cmp-menu-item {position: relative;color: #00b4d8;text-transform: uppercase;font-weight: 700;font-size: 16px;top: 8px;}

section#cv-composer {position: relative;padding: 30px 0;display: flex;justify-content: center;}
.card0 {
    background-color: #F5F5F5;
    border-radius: 8px;
    z-index: 0
}

.card00 {
    z-index: 0
}

.card1 {
    position: relative;
    z-index: 1;
    display: grid;grid-template-rows: 50px 50px;background: #00b4d8;padding: 20px 0;}

.card2 {
    display: none
}

.card2.show {
    display: block
}

.social {
    border-radius: 50%;
    background-color: #FFCDD2;
    color: #E53935;
    height: 47px;
    width: 47px;
    padding-top: 16px;
    cursor: pointer
}

input, select {
    box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%);
    border-radius: 0px;
    box-sizing: border-box;
    color: #9E9E9E;
    font-size: 15px;
    /* letter-spacing: 1px; */
    height: 45px !important;
    font-family: 'Poppins';
    padding: 10px;
    border: 2px solid #00b4d8;
    border-radius: 8px;
    }

select.phone-type {
    width: 90%;
    margin-top: 10px;}

input:focus,
select:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 3px solid #03045e !important;
    outline-width: 0 !important
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #E53935
}

.form-group {
    position: relative;
    margin-bottom: 1.5rem;
    width: 77%
}

.form-control-placeholder {
    position: absolute;
    top: 0px;
    padding: 12px 2px 0 2px;
    transition: all 300ms;
    opacity: 0.5
}

.form-control:focus+.form-control-placeholder,
.form-control:valid+.form-control-placeholder {
    font-size: 95%;
    top: 10px;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
    background-color: #fff
}

.next-button {
    width: 18%;
    height: 50px;
    background-color: #BDBDBD;
    color: #fff;
    border-radius: 6px;
    padding: 10px;
    cursor: pointer
}

.next-button:hover {
    background-color: #E53935;
    color: #fff
}

.get-bonus {
    margin-left: 154px
}

.pic {
    width: 230px;
    height: 110px
}

#progressbar {
    position: relative;

    overflow: hidden;
    color: #00b4d8;z-index: 4;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;align-items: center;}

#progressbar li {
    list-style-type: none;
    font-size: 8px;
    font-weight: 400;
    position: relative;}


#progressbar .step0:before {
    content: "";
    color: #fff
}

#progressbar li:before {
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: flex;
    font-size: 16px;
    background: #ccc;
    border: 2px solid #fff;
    border-radius: 50%;
    margin: auto;
    align-items: center;
    justify-content: center;
    }


#progressbar li:after {
    content: '';
    width: 100%;
    height: 3px;
    background: #ccc;
    position: absolute;
    left: -50%;
    top: 50%;
    z-index: -1
}

#progressbar li:last-child:after {

    /* height: 132px; */}

#progressbar li:nth-child(3):after {
}

#progressbar li:nth-child(2):after {
}

#progressbar li:first-child:after {
    width: 0;
}

#progressbar li.active:after {
    background: #fff;}

#progressbar li.active:before {
    background: #00b4d8;
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.tick {
    width: 100px;
    height: 100px
}

.prev {
    display: block;
    position: absolute;
    left: 40px;
    top: 20px;
    cursor: pointer
}

.prev:hover {
    color: #D50000 !important
}

@media screen and (max-width: 912px) {
    .card00 {
        padding-top: 30px
    }

    .card1 {
        border: none;
        /* margin-left: 50px; */
    }

    .card2 {
        border-bottom: 1px solid #F5F5F5;
        margin-bottom: 25px
    }

    .social {
        height: 30px;
        width: 30px;
        font-size: 15px;
        padding-top: 8px;
        margin-top: 7px
    }

    .get-bonus {
        margin-top: 40px !important;
        margin-left: 75px
    }

    #progressbar {
        /* left: -25px; */
    }
}

div#cv-comp-card {width: 100%;position: relative;display: grid;border: 8px solid #caf0f8;border-radius: 8px 8px 0 0;padding: 0;}

div#step-desc-sec {position: relative;display: grid;margin: 0;z-index: 3;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;align-items: center;justify-items: center;align-content: center;}

span.step-desc {position: relative;height: 35px;display: flex;align-items: center;color: #fff;font-weight: 700;text-align: center;}

ul.sitemap li a:hover {color: #fff;}

div#card-outer {position: relative;padding: 30px;height: 100%;overflow-y: scroll;}

div#icon-sec a:hover .icon-in {color: #fff;}

div#icon-sec a:hover .icon-desc {color: #fff; }

.composer-footer {position: relative;width: 100%;padding: 20px;background: #caf0f8;border-radius: 0 0 8px 8px;display: flex;justify-content: flex-end;}

.composer-footer button {margin-left: 20px;}

.two-tower {position: relative;width: 100%;display: grid;grid-template-columns: 1fr 1fr;}

.stu-input-div {position: relative;width: 100%;padding-right: 10%;display: flex;flex-direction: column;margin: 20px 0;}

.stu-input {margin: 10px 0 0;width: 100%;border: 2px solid #00b4d8;padding: 2px 5px;font-family: 'NunitoSans';box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%);border-radius: 10px;}

.three-tower {position: relative;display: grid;grid-template-columns: 1fr 1fr 1fr;}

.three-tower .inner-input-div {width: 100%; padding-right: 10%;}

.three-tower .inner-input-div:last-child(){
    padding:0;
}

.inner-input-div.last-div {padding: 0;}

.section-group {margin: 20px 0 5em;position: relative;display: flex;flex-direction: column;align-items: flex-start;}

div#emails-group-input {width: 100%;position: relative;display: block;}

.comp--btn {
    display: block;
    padding: 0.35rem 0.95rem;
    /* border-radius: 10rem; */
    color: #00b4d8;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
    border: 3px solid #00b4d8;
    }

.add-button {margin-top: 20px;}

.delete-button {align-self: center;justify-self: center;margin-top: 10px;}

div#phone-group-input {position: relative;width: 97%;display: block;}

.phone-number-cont {position: relative;display: grid;grid-template-columns: 3fr 7fr;}

.flagx {width: 20px;height: auto;position: relative;}

.flag-sector {position: relative;display: flex;align-items: center;justify-content: center;/* margin-top: 10px; */margin-right: 5px;}

div#address-group {position: relative;width: 90%;margin: 20px 0 0;}

div#work-xp-sec {position: relative;width: 100%;}

.stu-row {padding-right: 5%;}

.t-duration {position: relative;width: 100%;display: grid;grid-template-columns: 4fr 4fr 2fr;}
.switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 18px;
    margin-right: 15px !important;
}

.switch input {
    opacity: 0;
    width: 0px;
    height: 0px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(204, 204, 204);
    transition: all 0.4s ease 0s;
}

.slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 1px;
    background-color: white;
    transition: all 0.4s ease 0s;
}

input:checked + .slider {
    background-color: rgb(33 150 243);
}

input:focus + .slider {
    box-shadow: rgb(33, 150, 243) 0px 0px 1px;
}

input:checked + .slider::before {
    transform: translateX(13px);
}

.slider.round {
    border-radius: 32px;
}

.slider.round::before {
    border-radius: 50%;
}

span.v-title {
    font-size: 15px;
    margin-bottom: 5px;
    /* font-weight: 800; */
}

.visibility-check {display: flex;flex-direction: column;align-items: center;justify-content: center;}

div#edu-xp-sec {width: 100%;position: relative;}

.edu-xp {position: relative;width: 100%;padding: 20px;border: 3px solid #ddd;display: flex;flex-direction: column;margin-bottom: 30px;box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%);border-radius: 10px;}

.two-tower-hazel {width: 100%;position: relative;display: grid;grid-template-columns: 6fr 4fr;}

.three-tower-hazel {position: relative;width: 100%;display: grid;grid-template-columns: 4fr 3fr 2fr;}

div#lang-group {position: relative;width: 100%;}

div#skills-group {width: 100%;position: relative;display: grid;grid-template-columns: 6fr 4fr;}

div#skill-enter-bar {position: relative;display: grid;grid-template-columns: 8fr 2fr;}

div#skill-enter-bar .add-button {align-self: baseline;justify-self: flex-start;margin-top: 46px;}

div#skill-box {position: relative;width: 100%;background: #fdfdfd;padding: 20px;height: 30vh;border: 3px solid #eee;}

.hide {display: none;}

.email-group {width: 80%;
    position: relative;
    display: grid;
    grid-template-columns: 8fr 2fr;}

.phone-group {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 3px solid #e5e2e2;
    margin: 20px 0;
    border-radius: 20px;
    box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%);
    }

.clear {visibility: hidden;}

.ad-group-ind {padding: 20px;border: 3px solid #e5e2e2;margin-bottom: 30px;border-radius: 20px;box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%);}

.work-xp {position: relative;width: 100%;padding: 20px;border: 3px solid #d7d7d7;margin-bottom: 30px;display: flex;flex-direction: column;border-radius: 10px;box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%);}

.cke_chrome {/* border: 2px solid #00b4d8 !important; */margin-top: 0;font-size: 15px;line-height: 24px;letter-spacing: 0.2px;border-radius: 3px;background-color: rgb(255, 255, 255);padding: 13px 35px 9px 16px;color: rgb(72, 72, 112);box-shadow: none;border: 2px solid rgb(230, 230, 255) !important;}

.cke_top {background: #caf0;}

a.cke_button {/* color: #fff !important; */}

.skill {position: relative;background: #fff;display: inline-flex;padding: 5px 10px;margin-right: 10px;border: 2px solid #00b4d8;align-items: center;margin-bottom: 10px;}

span.skil-name {font-size: 14px;font-weight: 700;color: #00b4d8;margin-right: 10px;}

.skil-delete {color: #00b4d8;font-size: 13px;cursor: pointer;}

div#skill-box-inner {position: relative;width: 100%;height: 100%;overflow-y: scroll;}

section#test {padding: 5vw;}

p#ignorePDF {text-align: center;font-size: 30px;text-transform: uppercase;position: relative;}

div#print-body {padding: 30px;border: 3px solid;}

a.no-hover:hover {background: transparent;}

div#outer-temp {position: relative;width: 100%;padding: 0;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}

div#temp-inner {position: relative;display: grid;grid-template-columns: 1fr 1fr 1fr;width: 90%;align-items: center;justify-items: center;margin-top: 20px;}

.temp {position: relative;display: flex;flex-direction: column;justify-content: center;width: 80%;align-items: center;padding: 20px;cursor: pointer;transform: scale(.9);transition: all .3s ease;opacity: .85;}

.temp-flag {position: relative;width: 100%;height: 80px;background-size: cover;margin-bottom: 10px;background-position: center;}

.temp.active {/* border: 2px solid #00b4d8; */transform: scale(1.2);opacity: 1;}

.temp span {text-transform: uppercase;font-size: 14px;font-weight: 700;text-align: center;color: #666;}

div#flag-canada {background-image: url(../images/flag-lg/canada.png);}

div#flag-uk {background-image: url(../images/flag-lg/uk.png);}

div#flag-general {background-image: url(../images/flag-lg/general.png);}

section#article {position: relative;display: flex;align-items: center;background: #f4efdf;padding: 0 0 10vh 0;justify-content: center;}

div#article-header {position: relative;display: grid;place-items: center;width: 100%;background: #fafafa;}

div#article-content {background: #fff;padding: 3em 5em;color: #444;}

.art-img-inner {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    background-position: center;
    background-size: cover;
    transition: all .5s ease;
    }

.article-outer:hover .art-img-inner {transform: scale(1.2);}

a.article-outer .article-content h3 {color: #555;font-weight: 500;}

.article-outer:hover .article-img:after {transform: rotate(-5deg) scale(1.5);}

.vac-img-center {position: absolute;display: flex;width: 100%;height: 100%;background-position: center;background-size: cover;transition: all .4s ease;}

a.vacancy:hover .vac-img-center {transform: scale(1.2);}

section#vac-channel {width: 100%;background: #03045e;padding: 15vh 5vw;display: grid;grid-template-columns: 4fr 6fr;position: relative;}

.vac-right {position: relative;display: grid;grid-template-columns: 1fr 1fr 1fr;place-items: center;}

.vid-vac {width: 90% !important;

    margin: 20px 0;
    justify-self: center;
    display: flex !important;
    align-items: center;
    justify-content: center;border: 3px solid #fff !important;}

.vac-left {color: #fff;position: relative;padding: 10vh 0;display: flex;flex-direction: column;align-items: center;}

section#vac-channel:before {content: '';
    position: absolute;
    z-index: 100;
    border-left: 0px solid transparent;
    border-right: 100vw solid transparent;
    border-top: 10vh solid #ffffff;
    left: 0;
    top: 0;}

section#vac-channel:after {content: '';
    position: absolute;
    border-lrft: 0px solid transparent;
    border-right: 100vw solid transparent;
    border-bottom: 19vh solid #00b4d8;
    bottom: 0;}

.vac-left h1 {font-size: 2.1em;line-height: 1.1;font-weight: 400;text-transform: uppercase;text-align: center;/* margin-bottom: 10px; */}

.vac-left h2 {font-size: 20px;font-weight: 400;color: #eee;}

.vac-left h3 {margin: 15px 0;font-weight: 700;font-size: 2.3em;text-transform: uppercase;}

img#jxp {position: relative;display: block;width: 150px;margin: 20px 0;}

.morphsearch {
    width: 200px;
    min-height: 40px;
    background: #f1f1f1;
    position: absolute;
    z-index: 1000;
    top: 10px;
    right: 20vw;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transition-property: min-height, width, top, right;
    transition-property: min-height, width, top, right;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open {
    width: 100vw;
    min-height: 100vh;
    top: 0px;
    right: 0px;
    position: fixed;
    background: #fafafa;
    /* display: flex; */
    /* flex-direction: column; */
    }

.morphsearch-form {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    position: relative;
    -webkit-transition-property: width, height, -webkit-transform;
    transition-property: width, height, transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open .morphsearch-form {
    width: 80%;
    height: 160px;
    -webkit-transform: translate3d(0,3em,0);
    transform: translate3d(0,3em,0);
}

.morphsearch-input {
    width: 100%;
    height: 100% !important;
    padding: 0 10% 0 10px;
    font-weight: 100;
    border: none;
    background: transparent;
    font-size: 0.8em;
    color: #00b4d8;
    -webkit-transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
    transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morphsearch-input::-ms-clear { /* remove cross in IE */
    display: none;
}

.morphsearch.hideInput .morphsearch-input {
    color: transparent;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.morphsearch.open .morphsearch-input {
    font-size: 5em;
}

/* placeholder */
.morphsearch-input::-webkit-input-placeholder {
    color: #c2c2c2;
}

.morphsearch-input:-moz-placeholder {
    color: #c2c2c2;
}

.morphsearch-input::-moz-placeholder {
    color: #c2c2c2;
}

.morphsearch-input:-ms-input-placeholder {
    color: #c2c2c2;
}

/* hide placeholder when active in Chrome */
.gn-search:focus::-webkit-input-placeholder {
    color: transparent;
}

input[type="search"] { /* reset normalize */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: none;
}

.morphsearch-input:focus,
.morphsearch-submit:focus {
    outline: none;
border: 0px !important;}

.morphsearch-submit {
    position: absolute;
    width: 80px;
    height: 80px;
    text-indent: 100px;
    overflow: hidden;
    right: 0;
    top: 50%;
    background: transparent url(../images/magnifier.svg) no-repeat center center;
    background-size: 100%;
    border: none;
    pointer-events: none;
    transform-origin: 50% 50%;
    opacity: 0;
    -webkit-transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
    transform: translate3d(-30px,-50%,0) scale3d(0,0,1);
}

.morphsearch.open .morphsearch-submit {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
    transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.morphsearch-close {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 100%;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale3d(0,0,1);
    transform: scale3d(0,0,1);
    z-index: 10000;
    display: block;
}

.morphsearch.open .morphsearch-close {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.morphsearch-close::before,
.morphsearch-close::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 3px;
    opacity: 0.2;
    background: #000;
}

.morphsearch-close:hover.morphsearch-close::before,
.morphsearch-close:hover.morphsearch-close::after {
    opacity: 1;
}

.morphsearch-close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.morphsearch-close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.morphsearch-content {
    color: #333;
    margin-top: 4.5em;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0 10.5%;
    background: #fafafa;
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.morphsearch.open .morphsearch-content {
    opacity: 1;
    height: auto;
    overflow: visible; /* this breaks the transition of the children in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=625289 */
    pointer-events: auto;
    -webkit-transition: opacity 0.3s 0.5s;
    transition: opacity 0.3s 0.5s;
    position: relative;
}

.dummy-column {
    width: 30%;
    padding: 0 0 6em;
    float: left;
    opacity: 0;
    -webkit-transform: translate3d(0,100px,0);
    transform: translateY(100px);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.morphsearch.open .dummy-column:first-child {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.morphsearch.open .dummy-column:nth-child(2) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}

.morphsearch.open .dummy-column:nth-child(3) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.morphsearch.open .dummy-column {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.dummy-column:nth-child(2) {
    margin: 0 5%;
}

.dummy-column h2 {
    font-size: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #00b4d8;
    padding: 0.5em 0;
}

.round {
    border-radius: 50%;
}

.dummy-media-object {
    padding: 0.75em;
    display: flex;
    margin: 0.3em 0;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(118,117,128,0.05);
overflow: hidden;}

.dummy-media-object:hover,
.dummy-media-object:focus {
    background: rgba(118,117,128,0.1);
}

.dummy-media-object img {
    display: inline-block;
    height: 70px;	
    margin: 0 10px 0 0;
    vertical-align: middle;
}

.dummy-media-object h3 {
    vertical-align: middle;
    font-size: 16px;
    display: inline-block;
    font-weight: 700;
    margin: 0 0 0 0;
    
    color: #444;
transition: all .4s ease;}

.dummy-media-object:hover h3 {
    color: rgb(7 182 217);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.morphsearch.open ~ .overlay {
    opacity: 1;
}

@media screen and (max-width: 53.125em) {
    .morphsearch-input {
        padding: 0 25% 0 10px;
    }
    .morphsearch.open .morphsearch-input {
        font-size: 2em;
    }
    .dummy-column {
        float: none;
        width: 100%;
        padding: 0 0 2em;
        display: flex;
        flex-direction: column;
    }
    .dummy-column:nth-child(2) {
        margin: 0;
    }
    .morphsearch.open .morphsearch-submit {
        -webkit-transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
        transform: translate3d(0,-50%,0) scale3d(0.5,0.5,1);
    }
}

@media screen and (max-width: 60.625em) {
    .morphsearch {
        width: 70%;
        top: 10%;
        right: 10%;
    }
}

.search-box {position: relative;display: flex;align-items: center;width: 100%;}

.search-box input {border: 0px;border-bottom: 2px solid #00b4d8;width: 100%;padding-right: 20px;}

.search-box i {position: absolute;right: 0;}

.home-text.active {transform: skew(0);opacity: 1;}

.home-text.active .title-one {opacity: 1;transform: translateX(0);}

.home-text.active span.title-two {opacity: 1;
    transform: translateX(0);}

.home-text.active span.title-three {opacity: 1;transform: translateX(0);}

.inner-home-data button {opacity: 0;transform: translateX(-80px);transition: all .4s ease 1.5s;}

.home-text.active .inner-home-data button {opacity: 1;transform: translateX(0);}

section#article .container {width: 80vw;}

div#article-header h1 {position: relative;bottom: 0;text-align: center;width: 100%;color: #fff;background: #00b4d8;padding: 20px;font-weight: 300;font-size: 30px;}

div#card-external {width: 100%;position: relative;padding: 30px;height: 60vh;}

div#comp-home-sec {width: 100%;position: relative;display: grid;grid-template-columns: 6fr 4fr;}

img#comp-img {position: relative;display: block;width: 80%;}

div#comp-img-sec {position: relative;align-items: center;justify-content: center;display: flex;}

h2.comp-title {font-size: 2.5em;color: #00b4d8;}

div#comp-left p {color: #9b9b9b;width: 80%;margin-top: 20px;font-size: 15px;}

.temp:hover {transform: scale(1.2);}

.temp.active span {color: #444;}

div#dashboard-notification {
    position: fixed;
    right: 50px;
    bottom: -100px;
    background: #03045e;
    padding: 15px 20px;
    z-index: 100;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    min-width: 250px;
    transition: all .5s ease;
}

div#dashboard-notification.active {
    bottom: 0;
}

#dashboard-notification span {
    color: #f1f1f1;
}

.stu-input-div label {font-size: 15px;font-weight: 700;color: #666;}

.sec-breaker {margin-top: 3em;}

.mid-rises {font-size: 1.4em;font-weight: 700;color: #03045e;}

span.address-label {position: absolute;padding: .6em;background: #03045e;color: #eee;top: -20px;right: 20px;font-size: 13px;font-weight: 800;border-radius: 10px;}

.uk-skill {display: grid;grid-template-columns: 2fr 3fr 2fr 1fr;width: 90%;}

div#uk-skill {position: relative;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}

div#uk-skills-body {width: 100%;position: relative;display: flex;flex-direction: column;align-items: flex-start;}

.section-group-y {position: relative;display: flex;flex-direction: column;align-items: flex-start;margin-bottom: 3em;}

.section-group-y h4 {color: #00b4d8;font-weight: 400;font-size: 18px;}

div#profile-pic-cont {position: relative;display: grid;grid-template-columns: 1fr 1fr;margin: 3em 0;padding: 2em;background: #caf0f873;}

div#upload-sec {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;}

input#profile-pic {position: relative;visibility: hidden;height: 1px !important;}

div#card-drawer {position: absolute;width: 100%;height: 100%;top: 0;left: -120%;z-index: 50;background: rgb(255 255 255 / 80%);display: grid;place-items: center;}

div#drawer-pop {background: #fff;position: relative;padding: 20px;box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}

div#card-drawer.active {left: 0;}

div#pp_frame {
  position: relative;
  display: flex;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  border-top: #00b4d8 10px solid;
  border-right: #00b4d8 10px solid;
  border-bottom: #03045e 10px solid;
  border-left: #03045e 10px solid;
  }

div#preview-pp {position: relative;display: flex;align-items: center;justify-content: center;}

section#preview-container {position: fixed;z-index: 25;background: rgba(255,255,255,.7);width: 100vw;height: 100vh;top: 0;left: -106%;transition: all .4s ease;display: grid;place-items: center;}

section#preview-container.active {left: 0;}

div#preview-inner {position: relative;width: 80%;height: 90%;background: #fff;display: flex;box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}

div#pdf-preview-cont {position: relative;display: grid;grid-template-columns: 5fr 3fr;width: 100%;}

div#pdf-viewer {position: relative;padding: 3vw;width: 100%;height: 100%;}

div#viewer-inner {position: relative;display: flex;align-items: center;width: 100%;height: 100%;}

div#viewer-inner {}

object#pdf-preview-object {position: relative;width: 100%;height: 100%;}

div#uk-skill-inner {position: relative;display: flex;flex-direction: column;align-items: flex-start;}

body.loading:before {
    left: 0;
   }

body.loading:after {
    right: 0;
}

body.loading #navigation-logo {z-index: 55000;position: fixed;width: 300px;height: 300px;left: calc(50vw - 150px);top: calc(50vh - 150px);border: 0px;box-shadow: none; background-repeat: no-repeat; background-position: center; background-image: none}


body:after{
    content: '';
    top: 0;
    position: fixed;
    border-right: 0px solid transparent;
    border-left: 109vw solid transparent;
    border-bottom: 110vh solid #fff;
    right: -110%;
    z-index: 50000;
    transition: all 1s ease .5s;
}
@keyframes lower-one {   
    50%{
        border-bottom: 100vh solid #fff;
    }
    80%{
        border-bottom: 100vh solid #03045e;  
    }
    100%{
        border-bottom: 100vh solid #03045e;         
    }
}

body:before{
    content: '';
    position: fixed;
    border-left: 0px solid transparent;
    border-right: 105vw solid transparent;
    border-top: 105vh solid #fff;
    top:0;
    z-index: 50000;
    transition: all 1s ease .5s;
    left: -110%;
    }
@keyframes upper-one {   
    50%{
        border-top: 100vh solid #fff;
    }
    80%{
        border-top: 100vh solid #00b4d8; 
    }
    100%{
        border-top: 100vh solid #00b4d8; 
    }
}
.loader-spinner {
    width: 150px;
    height: 150px;
    transition: all .2s ease;opacity: 0;}

svg {
    /* width: 90%; */
    fill: none;
}

.load {
    transform-origin: 50% 50%;
    stroke-dasharray: 0.7 0.3;
    stroke-linecap: round;
    stroke-width: 3px;
    stroke: #00b4d8;
}
.load.one {
    animation: load 1.5s infinite ease-in;
    animation-direction: reverse;
}
.load.two {
    fill: #00b4d8;
}
.load.three {
    animation: load 1.5s infinite;
}
@keyframes load {
    100% {
        transform: rotate(360deg);
    }
}

body.loading .loader-spinner {opacity: 1;}

.search-cont-tower {position: relative;max-height: 60vh;overflow-y: scroll;padding: 0 20px 0 0;overflow-x: hidden;}

body.disabled {overflow: hidden;}

div#article-inner-sec {position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    
    justify-items: center;width: 100%;}

div#pagination-container {position: relative;display: flex;align-items: center;width: 100%;justify-content: center;}

div#vac-cont-inner {position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-items: center;}

div#vac-pagination {position: relative;display: flex;width: 100%;justify-content: center;margin: 30px 0;}

div#pagination-articles {position: relative;width: 100%;display: flex;justify-content: center;margin-top: 20px;}

.card-drawer-inner {position: relative;display: flex;flex-direction: column-reverse;align-items: center;}

.btn-sec {position: relative;padding: 20px;}

.temp.active:before {content: '';position: absolute;
    border-right: 60px solid transparent;
    border-left: 70px solid transparent;
    border-bottom: 160px solid #00b4d8;
    top: -13%;transform: rotateZ(-15deg);z-index: -1;opacity: 1;}

.temp:before {transition: all .3s ease;opacity: 0;content: '';transform: rotateZ(0deg);}

div#pdf-button-sec {position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px;}

div#comp-left h4 {margin-top: 30px;text-align: center;color: #03045e;font-size: 1.3em;font-weight: 900;width: 90%;}

div#ind-container {position: relative;display: grid;grid-template-columns: 7fr 4fr;background: #fff;}

div#article-cont-sec {position: relative;width: 100%;display: flex;flex-direction: column;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}

div#articles-tiles {position: relative;display: flex;flex-direction: column;width: 100%;}

div#side-bar {position: relative;display: flex;flex-direction: column;padding: 30px;}

.article-tile {position: relative;display: grid;width: 100%;grid-template-columns: 4fr 6fr;margin-bottom: 20px;}

img.article-tile-img {position: relative;width: 100%;}

.aticle-tile-cont {position: relative;padding-left: 20px;display: flex;flex-direction: column;}

img#article-header-img {position: relative;width: 100%;}

div#share-content {position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0 0 0 20px;}

div#share-content .date-sec {margin: 0;font-weight: 600;}

div#share-sec {position: relative;display: flex;/* flex-direction: column; */align-items: center;padding: 10px;}

#share-sec h3 {text-transform: uppercase;font-size: 15px;font-weight: 900;margin-right: 20px;color: #222;}

div#share-lower a {margin-right: 10px;font-size: 1.6em;color: #03045e;transition: all .3s ease-in;}

div#side-bar h4 {font-size: 1.9em;margin: 30px 0 15px;color: #00b4d8;}

.answer ul {margin-left: 30px;}

div#share-lower {position: relative;display: flex;align-items: center;}

.aticle-tile-cont span {color: #00b4d8;font-size: 11px;font-weight: 500;}

.aticle-tile-cont h5 {color: #444;font-size: 0.9em;font-weight: 400;}

.content-chunk p {font-size: 12px;color: #666;}

#main-nav li.active:before, #main-nav li:hover:before {
    
    
    
    
    
    
    transform: rotateZ(107deg);opacity: 1;}

#main-nav li a:before {
    
    
    
    
    
    content: '';
    position: absolute;
    width: 100%;
    height: 120%;
    background: #03045e;
    z-index: -1;
    top: -10%;left: 0;transition: all .3s ease;transform: rotateY(90deg);}

#main-nav li.active a, #main-nav li:hover a {color: #fff;}

#main-nav li:hover a::before, #main-nav li.active a:before {transform: rotateY(0deg);}

#main-nav li::before {content: '';
    position: absolute;
    z-index: 1;
    border-left: 36px solid transparent;
    border-right: 31px solid transparent;
    border-bottom: 58px solid #00b4d8;
    left: 21%;
    transition: all .4s ease .1s;transform: rotateZ(78deg);opacity: 0;top: -71%;}

body.composer:before {left: 0;width: 100vw;border: 0px;height: 100vh;background: #fff;top: -100%;}

.tetrominos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-112px, -96px);
}

.tetromino {
    width: 96px;
    height: 112px;
    position: absolute;
    transition: all ease 0.3s;
    background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%2300b4d8" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
}

.box1 {
    -webkit-animation: tetromino1 1.5s ease-out infinite;
    animation: tetromino1 1.5s ease-out infinite;
}

.box2 {
    -webkit-animation: tetromino2 1.5s ease-out infinite;
    animation: tetromino2 1.5s ease-out infinite;
}

.box3 {
    -webkit-animation: tetromino3 1.5s ease-out infinite;
    animation: tetromino3 1.5s ease-out infinite;
    z-index: 2;
}

.box4 {
    -webkit-animation: tetromino4 1.5s ease-out infinite;
    animation: tetromino4 1.5s ease-out infinite;
}

@-webkit-keyframes tetromino1 {
    0%, 40% {
        /* compose logo */
        /* 1 on 3 */
        /* L-shape */
        transform: translate(0, 0);
    }
    50% {
        /* pre-box */
        transform: translate(48px, -27px);
    }
    60%, 100% {
        /* box */
        /* compose logo */
        transform: translate(96px, 0);
    }
}

@keyframes tetromino1 {
    0%, 40% {
        /* compose logo */
        /* 1 on 3 */
        /* L-shape */
        transform: translate(0, 0);
    }
    50% {
        /* pre-box */
        transform: translate(48px, -27px);
    }
    60%, 100% {
        /* box */
        /* compose logo */
        transform: translate(96px, 0);
    }
}
@-webkit-keyframes tetromino2 {
    0%, 20% {
        /* compose logo */
        /* 1 on 3 */
        transform: translate(96px, 0px);
    }
    40%, 100% {
        /* L-shape */
        /* box */
        /* compose logo */
        transform: translate(144px, 27px);
    }
}
@keyframes tetromino2 {
    0%, 20% {
        /* compose logo */
        /* 1 on 3 */
        transform: translate(96px, 0px);
    }
    40%, 100% {
        /* L-shape */
        /* box */
        /* compose logo */
        transform: translate(144px, 27px);
    }
}
@-webkit-keyframes tetromino3 {
    0% {
        /* compose logo */
        transform: translate(144px, 27px);
    }
    20%, 60% {
        /* 1 on 3 */
        /* L-shape */
        /* box */
        transform: translate(96px, 54px);
    }
    90%, 100% {
        /* compose logo */
        transform: translate(48px, 27px);
    }
}
@keyframes tetromino3 {
    0% {
        /* compose logo */
        transform: translate(144px, 27px);
    }
    20%, 60% {
        /* 1 on 3 */
        /* L-shape */
        /* box */
        transform: translate(96px, 54px);
    }
    90%, 100% {
        /* compose logo */
        transform: translate(48px, 27px);
    }
}
@-webkit-keyframes tetromino4 {
    0%, 60% {
        /* compose logo */
        /* 1 on 3 */
        /* L-shape */
        /* box */
        transform: translate(48px, 27px);
    }
    90%, 100% {
        /* compose logo */
        transform: translate(0, 0);
    }
}
@keyframes tetromino4 {
    0%, 60% {
        /* compose logo */
        /* 1 on 3 */
        /* L-shape */
        /* box */
        transform: translate(48px, 27px);
    }
    90%, 100% {
        /* compose logo */
        transform: translate(0, 0);
    }
}

body.composer section#comploader {z-index: 60000;position: fixed;width: 100vw;height: 100vh;top: -100%;left: 0;transition: all .4s ease;}

body.composer.show::before {top: 0;left: 0;}

body.composer.show section#comploader {top: 0;left: 0;opacity: 1;}

body.composer section#comploader {top: -100%;}
div#movile-nav {
    position: fixed;
    background: #03045e;
    width: 100vw;
    height: 100vh;
    z-index: 1100;
    left: -110%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* padding-top: 22vh; */
    transition: all .4s cubic-bezier(0.5, 0.22, 0.27, 0.52);
}

div#movile-nav ul {
    list-style: none;
    text-align: center;
    font-size: 2em;
}

div#movile-nav ul li {
    margin-bottom: 20px;
    position: relative;
}

div#movile-nav ul li a {
    color: #fff;
    text-transform: uppercase;
}

div#movile-nav ul li.active:before {
    content: '';
    position: absolute;
    width: 150%;
    height: 17px;
    background: rgb(0 180 216 / 40%);
    left: -25%;
    top: calc(50% - 2.5px);
    z-index: -1;
}

div#movile-nav.active {
    left: 0;
}

div#share-lower a:hover, div#share-lower a:focus {
    color: #00b4d8;
}

img#mobile-logo {
    position: relative;
    width: 150px;
    margin-bottom: 5em;
    border: 4px solid #fff;
    border-radius: 50%;
}

.ck-content {
    width: 100%;
    position: relative;
}

.ck-content p {
    position: relative;
    width: 100%;
}

.ck-content a {
    position: relative;
    word-break: break-all;
}

div#navigation-social-sec.active {
    z-index: 1020;
}

div#navigation-social-sec a {margin-right: 15px;color: #03045e;transition: all .35s ease-in-out;}
.ck-content img{
    max-width: 100%;
}
.ck-content ul, .ck-content ol{
    margin-left: 30px;
}
}

div#navigation-social-sec a {}

div#navigation-social-sec a:hover {
    color: #0077b6;
}

div#pdf-button-sec h2 {
    color: #00b4d8;
    margin-bottom: 30px;
    font-size: 2.4em;
    text-align: center;
}

#pdf-button-sec p {
    color: #666;
    font-size: 16px;
    text-align: center;
    margin-bottom: 30px;
    width: 80%;
}
.button-sec button, .button-sec a {
    margin: 0 5px  !important;
}

.button-sec {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.cc-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    transition: all .4s ease;
}

.flag-sec {
    position: relative;
    display: flex;
    align-self: center;
    justify-self: center;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.code-sec {
    justify-self: flex-end;
    font-size: 12px;
    font-weight: 800;
}

.cc-conter {
    position: absolute;
    width: 90%;
    background: #fff;
    top: 100%;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 25;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    display: none;
    flex-direction: column;
}

.cc-conter.active {
    display: flex;
}

.country-name {
    font-size: 13px;
    font-weight: 700;
}

.cc-container:hover {
    background: #00b4d8;
    color: #fff;
}

#view-final {
    display: none;
}

.btn--secondary:before {
    content: '';
    background: #f1f1f1;
    width: 100%;
    position: absolute;
    height: 100%;
    left: -100%;
    top: 0;
    z-index: -1;
    transition: all .3s ease-in-out;
}

.btn--secondary:hover:before {
    left: 0;
}


@media only screen and (max-width:2560px){
    div.home-text:after{
        border-left: 0px solid transparent;
        border-right: 18vw solid transparent;
        border-top: 70vh solid rgb(3 4 94 / 60%);
    }
    section#home-articles:before{
        border-left: 0px solid transparent;
        border-right: 26.5vw solid transparent;
        border-top: 110vh solid rgb(3 4 94 );
    }
}
@media only screen and (max-width:1920px){
    div.home-text:after{
        border-left: 0px solid transparent;
        border-right: 18vw solid transparent;
        border-top: 39vw solid rgb(3 4 94 / 60%);
    }
    section#home-articles:before{
        border-left: 0px solid transparent;
        border-right: 26.5vw solid transparent;
        border-top: 110vh solid rgb(3 4 94 );
    }
}
@media only screen and (max-width:1600px){
    div#abt-footer:before{
        left:11vw;
    }
    div#abt-footer:after{
        right: -11vw;
        border-left: 81vw solid transparent;
    }
    .nav-inner:before{
        border-left: 8vw solid transparent;
        border-right: 40vw solid transparent;
        border-top: 82vw solid #03045e;
    }
    .inner-home-data{
        transform: scale(0.8);
    }
}
@media only screen and (max-width:1440px){
    section#home-articles:before{
        border-left: 0px solid transparent;
        border-right: 27.2vw solid transparent;
        border-top: 110vh solid rgb(3 4 94 );
    }
}
@media only screen and (max-width:1366px){
    section#home-articles:before{
        border-left: 0px solid transparent;
        border-right: 26.5vw solid transparent;
        border-top: 110vh solid rgb(3 4 94 );
    }
    .nav-inner:before{
        left: -0.9vw;
    }
}
@media only screen and (max-width:1360px){
    div#abt-footer:before{
        left: 7vw;
    }
    div#abt-footer:after{
        right: -11vw;
        border-right: 79px solid transparent;
    }
    .temp-flag{
        height: 50px;
    }
}
@media only screen and (max-width:1250px){
    div#abt-inner{
        grid-template-columns: 1fr;
        align-items: center;
        justify-items:center;
    }
    div#abt-inner h3{
        text-align: center;
        width: 100%;
        color: #0077b6;
        margin-bottom: 30px;
    }
    section#about:before, div#abt-footer:before, div#abt-footer:after{
        display: none;
    }
    .about-content{
        color: #888;
        padding: 0;
    }
    div#abt-footer{
        padding: 30px;
    }
    div#abt-vision{
        background: #03045e;
        padding: 30px;
    }
    div#abt-mission{
        background: #00b4d8;
        padding: 30px;
        grid-template-columns: 1fr;
        color: #fff;
    }
    
}
@media only screen and (max-width:1193px){
    #download-final{
        margin-top: 10px;
    }
}
@media only screen and (max-width:1180px){
    #navigation-logo{
        left: 5vw;
    }
    div.home-text{
        width: 30%;
        padding-top: 10vh;
    }
    .inner-home-data{
        transform: scale(.7);
    }
}
@media only screen and (max-width:1120px){
    #main-nav li{
        margin-right: 0;
    }
    div#inner-header.container{
        width: 95vw
    }
    .phone-group{
        width: 90%;
    }
    div#skills-group{
        grid-template-columns: 1fr;
        width: 85%;
    }
}
@media only screen and (max-width:1024px){
    .nav-inner:before{
        border-left: 4vw solid transparent;
        border-right: 47vw solid transparent;
        border-top: 119vw solid #03045e;
    }
    section#home-articles:before {
        border-left: 0px solid transparent;
        border-right: 34.5vw solid transparent;
        border-top: 128vh solid rgb(3 4 94 );
    }
    
}
@media only screen and (max-width:1000px){
    #navigation-logo{
        width: 150px;
        height: 150px;
    }
    .temp-flag{
        display: none;
    }
    .temp{
        padding: 10px;
        border:  3px solid #aaa;
        border-radius: 5px;
        overflow: hidden;
    }
    .temp span{
        font-size: 16px;
    }
    div#pp_frame{
        width:150px;
        height: 150px;
    }
}
@media only screen and (max-width: 970px){
    div#nav-upper-sec, .lower-sec{
        display: none;
    }
    nav#regular-navigation:after {
        border-right: 0px solid transparent;
        border-left: 100vw solid transparent;
        border-bottom: 17vh solid #00b4d8;
        border-top: 0px;
        left: 0;
        top: auto;
        bottom: 0;
    }
    div#temp-inner{
        margin-bottom: 20px;
    }
    #navigation-logo{
        left: calc(50% - 75px);
        top:5vh;
    }
    .container-menu-icon{
        display: inline-block;
    }
    div#comp-home-sec{
        display: flex;
        flex-direction: column;
    }
    h2.comp-title{
        text-align: center;
        width: 100%;
    }
    div#comp-left p{
        text-align: center;
        width: 100%;
        padding: 0 20px;
    }
    div#temp-inner, div#comp-left h4{
        width: 100%;
    }
    .phone-group{
        width: 100%;
    }
}
@media only screen and (max-width:900px){
    div#videos-outer{
        display: flex;
        flex-direction: column;
    }
    div#video-infor{
        align-items: center;
        width: 100%;
    }
    div#video-infor:after{
        background: transparent;
    }
    div#video-reel{
        margin-top:20px;
    }
    div#article-inner-sec, div#vac-cont-inner, div#video-inner-container{
        grid-template-columns: 1fr 1fr 1fr;
    }
    section#about{
        padding: 15vh 5vh 5vh;
    }
    div#abt-footer{
        padding: 30px;
    }
    div#footer-logo{
        display: none;
    }
    ul.sitemap{
        display: none;
    }
}

@media only screen and (max-width:850px){
    .morphsearch-content{
        min-height: 65vh;
        overflow: hidden !important;
    }
    #morphsearch-inner{
        position: relative;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        height: 60vh;
        padding-right: 30px;
    }
    .search-cont-tower{
        height: auto;
        overflow: initial;
        max-height: initial;
    }
    #navigation-logo {
        left: auto;
        right: 15vw;
        top: 10vh;
        width: 120px;
        height: 120px;
    }
}
@media only screen and (max-width:800px){
    div#articles-box{
        display: flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: space-around;
    }
    div#skill-box{
        margin-top: 20px;
    }
    .article-outer{
        width:48%;
    }
    div#article-inner-sec .article-outer{
        width:90%;
    }
    div#articles-container h2{
        text-align: center;
    }
    div#ind-container, div#profile-pic-cont, div#pdf-preview-cont{
        grid-template-columns: 1fr;
    }
    div#phone-group-input{
        width:100%;
    }
    div#pdf-viewer{
        display: none;
    }
    #download-final{
        display: none;
    }
    #view-final{
        display: block;
    }
}
@media only screen and (max-width:700px){
    div#temp-inner, .two-tower, .phone-group, .t-duration, .two-tower-hazel,.three-tower-hazel{
        grid-template-columns: 1fr;
    }
    .temp{
        margin-bottom: 20px;
        overflow: hidden;
    }
    .phone-group, .three-tower-hazel{
        padding: 10px;
        border: 3px solid #ddd;
        border-radius: 10px;
    }
    
}
@media only screen and (max-width:650px){
    .article-outer{
        width:98%;
    }
    div#article-inner-sec, div#vac-cont-inner, div#video-inner-container{
        grid-template-columns: 1fr 1fr;
    }
    div#article-sec{
        padding: 15vh 5vh 5vh;
    }
    div#article-content{
        padding: 3em;
    }
    div#card-outer, div#card-external{
        padding: 10px;
    }
    section#home-articles:before {
        border-left: 0px solid transparent;
        border-right: 36.5vw solid transparent;
        border-top: 128vw solid rgb(3 4 94 );
    }
    span.title-one{
        font-size: 1.4em;
    }
    span.title-two{
        font-size: 1.3em;
    }
    span.title-three{
        font-size: 2em;
    }
    div.home-text{
        padding-top: 3vh;
    }
    #navigation-logo{
        width: 120px;
        height: 120px;
        left: calc(50% - 60px);
    }
    .inner-home-data button{
        padding: 5px;
        font-size: 8px;
        margin-top: 5px;
    }
}
@media only screen and (max-width:600px){
    div#video-reel{
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
    }
    .vid-hm-cover{
        height: 200px !important;
    }
    div#movile-nav ul{
        font-size: 1.3em;
    }
    div#step-desc-sec{
        display: none;
    }
    div#upload-sec input{
        width: 0 !important;
        height: 0 !important;
    }
}
@media only screen and (max-width:550px){
    div#abt-footer{
        grid-template-columns: 1fr;
        padding: 0;
    }
    span.title-one{
        font-size: 14px;
    }
    span.title-two{
        font-size: 12px;
    }
    span.title-three{
        font-size: 18px;
    }
    .inner-home-data{
        transform: scale(1);
    }
    div#profile-pic-cont{
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
}
@media only screen and (max-width:500px){
    div#article-inner-sec, div#vac-cont-inner, div#video-inner-container{
        grid-template-columns: 1fr;
    }
    div#share-content{
        flex-direction: column;
        padding: 20px;
    }
    span.icon-in{
        font-size: 2em;
    }
    span.icon-desc{
        display: none;
    }
    footer h3{
        line-height: 1.2;
        font-size: 1.3em;
    }
    .tnp-field.tnp-field-email{
        grid-template-columns: 1fr;
    }
    button#nl-submit{
        margin-top:15px;
    }
    .main-title, div#abt-inner h3, div#articles-container h2, div#video-infor h2{
        font-size: 2.25em;
        margin: 15px 0;
    }
    .question{
        font-size: 15px;
    }
    .about-content{
        font-size: 14px;
        text-align: left;
    }
    #navigation-logo{
        width: 100px;
        height: 100px;
        left: auto;
        right: 15vw;
    }
    div.home-text{
        height: auto;
        top: auto;
        bottom: 10px;
        left: 50px;
        padding: 20px;
        width: auto;
    }
    div.home-text:after{
        display: none;
    }
    
}
@media only screen and (max-width:410px){
    #view-final{
        margin: 10px  !important;
    }
}
@media only screen and (max-width:400px){
    .vid-hm-cover{
        height: 150px !important;
    }
    div#article-content{
        padding: 2em;
    }
    div.home-text{
        bottom: 5px;
        left: 25px;
    }
    #navigation-logo{
        width: 80px;
        height: 80px;
        left: auto;
        right: 12vw;
    }
}








input#tnp-1:focus, input#tnp-1:active {
    border-color: #fff !important;
}

div#morph-close {
    display: none;
    width: 100%;
    position: relative;
    height: max-content;
    justify-content: flex-end;
}

.open div#morph-close {
    display: flex;
}

textarea.stu-input {
    font-size: 16px;
    padding: 10px;
    color: #9E9E9E;
}

span#max-char {
    position: absolute;
    right: 10%;
    font-size: 12px;
    font-weight: 700;
    color: #8f8e8e;
}

section#maintainance {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 60vh;
}

section#maintainance h2 {
    color: #00b4d8;
    text-transform: uppercase;
    font-size: 3rem;
}

section#maintainance h1 {
    text-transform: uppercase;
    color: #03045e;
    font-weight: 900;
    font-size: 1.8rem;
    margin-top: 1rem;
}

section#maintainance h3 {
    font-size: 1rem;
    font-weight: 400;
    color: #666;
}

div#viwer {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

div#inner-pdf {
    position: relative;
    display: block;
    width: 210mm;
    height: 297mm;
    background: red;
}

div#viewer-right {}

div#viewer-right {
    position: relative;
    padding: 80px;
}

div#pdf-viwer {
    position: relative;
    /* width: 50%; */
}

.cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.cbx:not(:last-child) {
    margin-right: 6px;
}
.cbx:hover {
    background: rgba(0,119,255,0.06);
}
.cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0,16,75,0.05);
}
.cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
}
.cbx:hover span:first-child {
    border-color: #00b4d8;
}
.inp-cbx {
    position: absolute;
    visibility: hidden;
}
.inp-cbx:checked + .cbx span:first-child {
    background: #00b4d8;
    border-color: #00b4d8;
    animation: wave 0.4s ease;
}
.inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}

@-moz-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}
@-webkit-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}
@-o-keyframes wave {
    50% {
        transform: scale(0.9);
    }
}
@keyframes wave {
    50% {
        transform: scale(0.9);
    }
}


.input-box {
    margin-top: 1rem;
}

div#mobile-popup {
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    z-index: 30;
    background: rgb(0 90 255 / 92%);
    color: #fff;
    transition: all .5s ease-in;
    opacity: 0;
    visibility: hidden;
}

.m-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem !important;
}

div#mobile-popup span {
    font-size: 19px;
}

div#mobile-popup.active {
    opacity: 1;
    visibility: visible;
}

.article-tag-sec {
    position: relative;
    width: 100%;
    display: flex;
    padding: 1rem;
    flex-wrap: wrap;
}

.article-tag {
    position: relative;
    border: 2px solid #00b4d7;
    color: #00bad7;
    padding: .275rem 1rem;
    font-size: 13px;
    font-weight: 500;
    border-radius: 15px;
    transition: all .4s ease-out;
    margin: .375rem;
}

.article-tag:hover {
    background: #00bad7;
    color: #fff;
}

div#comment-sec {
    padding: 4rem;
    position: relative;
}

div#comment-sec h3 {
    font-size: 2rem;
    line-height: 1.125;
    position: relative;
    margin-bottom: 2rem;
    color: #03045e;
    font-weight: 500;
}

.comment {
    position: relative;
    display: grid;
    grid-template-columns: 70px calc(100% - 70px);
    margin-bottom: 1.5rem;
}

.comment-details {
    position: relative;
    display: flex;
    flex-direction: column;
}

.comment-avatar {
    position: relative;
    display: block;
    justify-self: left;
    width: 50px;
    height: 50px;
    background: gray;
    border-radius: 50%;
}

.comment-details p {
    margin-top: 10px;
    font-size: 15px;
    color: #666;
    text-align: justify;
}

span.com-name {
    font-weight: 600;
    position: relative;
}

span.com-time {
    position: relative;
    font-size: 13px;
    color: #666;
}

.reply-section {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    align-items: flex-start;
    padding: 2rem;
    border: 2px solid #030463;
}

.reply-container .stu-input-div {
    padding: 0;
}

span.comment-reply {
    margin: 1rem 0 0;
    position: relative;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    color: #00b4d8;
    font-weight: 600;
    cursor: pointer;
}

.replay-container {
    position: relative;
    width: 100%;
    padding-left: 70px;
    margin-top: 1.5rem;
}

.reply-section h2 {
    font-size: 1.9em;
    font-weight: 900;
}

.commet-outer {
    position: relative;
    margin-bottom: 2rem;
}

span.cancel-reply {
    position: absolute;
    top: 0;
    right: 20px;
    padding: 10px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
    background: #030463;
    cursor: pointer;
}

section#comp-landing {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 55%;
}

div#comp-content-area {
    position: relative;
    display: flex;
    flex-direction: column;
}

img.comp-logo {
    position: relative;
    width: 100px;
}

div#comp-content-view {
    background: url(../images/cv_bg.jpg);
    background-position: left center;
    background-size: cover;
    position: fixed;
    width: 45%;
    height: 100vh;
    right: 0;
}

.comp-title-sec {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2rem;
}

div#comp-content {
    padding: 2.5rem;
    width: 100%;
    position: relative;
}

.comp-mid-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 2rem;
}

.step-section {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.comp-step {
    margin: 1rem;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comp-content-chunck {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
}

.info-comp-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
}

.info-comp-container h1 {
    font-size: 3rem;
    position: relative;
    font-weight: 900;
    text-align: center;
}

.st-step-indc {
    width: 400px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 1rem 0;
    justify-items: center;
}

span.st-step {
    position: relative;
    display: block;
    width: 80%;
    height: 5px;
    background: #888;
    border-radius: 10px;
}

div#cv-temp-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.temp-inner {
    position: relative;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.5rem;
}

img.temp-img {
    position: relative;
    width: 100%;
    margin-top: 1rem;
    border: 1px solid rgb(229, 233, 242);
    box-shadow: rgb(41 59 117 / 11%) 0px 5px 8px 0px;
    transition: all .3s ease;
}

section#composer-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100vh !important;
}

.composer-detail-content {
    background: #f7f7fc;
    position: relative;
    /* overflow-y: scroll; */
}

.composer-view-content {
    position: relative;
    background: #e5e4ea;
    height: 100%;
    /* overflow-y: scroll; */
}

div#composer_info_details {}

.comp-info-holder {
    padding: 20px 2rem 50px;
}

span.support {
    margin-bottom: 2rem;
    display: block;
    font-size: 16px;
    line-height: normal;
    letter-spacing: normal;
    font-weight: normal;
    color: rgb(113, 113, 166);
    margin-top: 0px;
    margin-bottom: 36px;
    font-weight: 500;
    padding-left: 1rem;
}

.ci-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.input-field-short {
    position: relative;
    width: 50%;
}

.outer-input {
    position: relative;
    margin-bottom: 45px;
    padding: 0rem 1rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

label.ci-label {
    padding: 0px 5px;
    position: absolute;
    top: -8px;
    left: 15px;
    z-index: 1;
    font-size: 12px;
    letter-spacing: 0.2px;
    text-align: center;
    background: rgb(247, 247, 252);
    color: rgb(70, 70, 107);
    text-transform: uppercase;
    font-weight: 700;
}

.comp-input-i {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    /* font-family: "Gilroy SemiBold"; */
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.2px;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    padding: 13px 35px 9px 16px;
    color: rgb(72, 72, 112);
    box-shadow: none;
    border: 2px solid rgb(230, 230, 255);
    font-weight: 600;
}

.validity_mark {
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    line-height: 0;
    position: absolute;
    z-index: 100;
    top: 1px;
    right: 0px;
    width: 37px;
    height: calc(100% - 2px);
    border-radius: 0px 2px 2px 0px;
    transform: none;
    background-color: rgb(25, 204, 163);
    display: none;
    place-items: center;
}

.comp-input-inner {
    position: relative;
    border-radius: 4px;
    /* overflow: hidden; */
}

.input-field-long {
    position: relative;
    width: 100%;
}

span.validity_check {
    position: absolute;
    /* top: 48px; */
    font-size: 11px;
    display: none;
    padding-top: 5px;
    color: rgb(255, 45, 45);
}

div#pdf-viwer-new {
    position: relative;
    background: white;
    border-radius: 4px;
    width: 33.8958vw;
    margin: 20px auto;
    min-height: 767px;
    height: auto;
    overflow: hidden;
}

.comp-info-holder h1 {
    margin-bottom: 0.4em;
    font-size: 32px;
    line-height: 1.13;
    letter-spacing: normal;
    color: rgb(51, 51, 79) !important;
    font-weight: 700;
    margin-top: 0.8em;
    padding-left: 1rem;
}

.svg_success {
    fill: #fff;
    width: 15px;
    display: none;
}

.success .comp-input-i, .success .comp-input-i:focus, .success .monthpicker {
    border: 2px solid rgb(25, 204, 163) !important;
}

.success .validity_mark {
    display: grid;
}

.comp-input-i:focus {
    border: 2px solid rgb(22, 136, 254) !important;
}

.danger .comp-input-i, .danger .comp-input-1:focus, .danger .monthpicker {
    border: 2px solid rgb(252, 79, 82) !important;
}

.danger span.validity_check {
    display: block;
}

.danger .validity_mark {
    display: grid;
    background: transparent;
}

.danger .svg_danger {
    fill: red;
    display: block;
    width: 15px;
}

.success .svg_success {
    display: block;
}

.svg_danger {
    display: none;
}

div#composer-nav {
    display: flex;
    justify-content: space-around;
    width: 100%;
    position: relative;
    margin-top: 20px;
    z-index: 10;
    align-items: flex-end;
    flex-wrap: wrap;
}

div#header-line {
    width: 100%;
    height: 2px;
    border-radius: 100px;
    background-color: rgb(230, 230, 255);
    position: absolute;
    left: 0px;
    bottom: 0;
}

.comp-nv-sec {
    position: relative;
    width: 16.6667%;
    text-align: center;
    color: rgb(0, 153, 218);
    font-weight: normal;
    font-size: 14px;
}

.comp-nv-sec span {
    margin-bottom: 15px;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 500;
    display: block;
    color: rgb(113, 113, 166);
}

.comp-nv-sec:after {
    content: '';
    width: 5px;
    height: 5px;
    line-height: 26px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    text-align: center;
    color: rgb(152, 161, 179);
    border-radius: 50%;
    background: rgb(255, 255, 255);
    border: 2px solid rgb(230 230 255);
    position: absolute;
    bottom: -3.5px;
    left: calc(50% - 2.5px);
}

.comp-nv-sec.active span {
    color: rgb(22, 136, 254);
}

.comp-nv-sec.active:after {
    border-color: #1688fe;
}

[data-id="st-1"] #header-line:after {
    width: 9%;
}

.comp-btn-footer {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: flex-end;
    width: 100%;
    padding: 2rem 1rem;
}

.comp-btn {
    background: rgb(33, 150, 243);
    color: rgb(255, 255, 255);
    border: 1px solid rgb(33, 150, 243);
    width: max-content;
    font-size: 16px;
    font-weight: 500;
    padding: 0.7em 1.7em;
    cursor: pointer;
    will-change: box-shadow;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-family: 'Poppins';
}

svg.comp-btn-svg {
    fill: #fff;
    width: auto;
    margin-left: 10px;
}

div#pdf-view-canada {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 3rem;
    font-family: 'Arial';
    color: #444;
}

.top-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.top-container span.top-inner {
    font-size: 10px;
}

#pdf-view-canada .top-container h1 {
    font-weight: 600;
    font-size: 1.4rem;
}

.detail-container {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.detail-container h2 {
    position: relative;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 3px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.6rem;
}

.detail-container p {
    font-size: 10px;
    padding-left: 1rem;
}

.xp-sec {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
}

.xp-header {
    position: relative;
    display: grid;
    grid-template-columns: 7fr 3fr;
}

.xp-titles h3 {
    font-size: 12px;
}

.xp-dates span {
    font-size: 11px;
    position: relative;
    display: flex;
    color: #555;
}

.xp-dates {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.xp-titles h4 {
    font-size: 10.5px;
    color: #666;
    font-weight: 400;
}

.xp-titles {
    position: relative;
    margin-bottom: .5rem;
}

.xp-content {
    position: relative;
    font-size: 10px;
}

.xp-content ul {
    margin-left: 2rem;
}

span.hl {
    color: #2196f3;
}

.add-new {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 13px 3px;
    border-top: 1px dashed rgb(191, 197, 214);
    border-bottom: 1px dashed rgb(191, 197, 214);
    text-align: left;
    font-size: 16px;
    color: rgb(22, 136, 254);
    font-weight: 400;
    cursor: pointer;
}

.add-new svg {
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.add-new span {
    font-size: 15px;
    font-weight: 500;
}

.intro-sec {
    position: relative;
    display: block;
    padding: 0 1rem;
}

.intro-sec p, .intro-sec label {
    margin-top: 12px;
    font-size: 12px;
    line-height: normal;
    letter-spacing: normal;
    color: rgb(113, 113, 166);
    font-weight: 600;
}

div#experience-container {
    position: relative;
    padding: 0;
}

.contain-cover {
    position: relative;
    padding: 0 1rem;
}

.exp-add-sec, .act-add-sec, .edu-add-sec, .skill-add-sec,  .lang-add-sec {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* border-top: 1px solid rgb(230, 230, 255); */
}

.exp-add-content {
    position: relative;
    width: 100%;
    display: none;
    flex-wrap: wrap;
    margin-top: 20px;
}

.exp-add-info {
    margin: 0px;
    padding: 14px 0px;
    -webkit-box-flex: 1;
    flex-grow: 1;
    cursor: pointer;
    width: calc(100% - 110px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 15px;
    line-height: normal;
    letter-spacing: normal;
    color: #7171a6;
    font-weight: 500;
}

.exp-add-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start;
    padding: 0 1rem;
}

.exp-add-header:before {
    content: '';
    position: absolute;
    background: #e6e6ff;
    width: calc(100% - 2rem);
    height: 1px;
    top: 0;
    left: 1rem;
}

.exp-add-action {
    position: relative;
    display: flex;
    width: 50px;
    justify-content: flex-end;
    align-items: center;
}

.lang-add-delete svg path ,.exp-add-delete svg path, .edu-add-delete svg path, .act-add-delete svg path, .skill-add-delete svg path {
    fill: #2196f3;
    stroke: #2196f3;
}

.exp-add-action button {
    background: transparent;
    border: 0px;
    display: grid;
    place-items: center;
    margin-right: 10px;
    cursor: pointer;
    transition: all .3s ease;
}

.exp-add-header:hover .exp-add-delete, .exp-add-header:hover .skill-add-delete, .exp-add-header:hover .edu-add-delete {
    display: grid !important;
}

.exp-add-hide svg path {
    stroke: #7171a6;
}

.comp-input {
    position: relative;
    width: 100%;
}

.dates-input-comp.date-st {
    margin-right: 3%;
}

.dates-input-comp {
    position: relative;
    width: 48.5%;
}

.statement {
    padding-top: 20px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
}

.input-check-box {
    position: relative;
    display: flex;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    text-align: center;
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
    border: 2px solid rgb(230, 230, 255);
    background-color: rgb(255, 255, 255);
    align-items: center;
    justify-content: center;
}

.statement label {
    letter-spacing: 0.1px;
    color: rgb(113, 113, 166);
    font-size: 13px;
    line-height: normal;
    padding-left: 8px;
    cursor: pointer;
    font-weight: 500;
}

.exp-current, .act-current {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0;
    cursor: pointer;
}

.cke_top {
    position: absolute !important;
    width: 97% !important;
    background: #fff !important;
    bottom: 0;
}

body.cke_editable {
    font-family: 'Poppins' !important;
}

.cke_contents {
    height: 250px !important;
}

.outer-input.short-sec {
    margin-bottom: 30px;
}

.cke_inner {
    padding-bottom: 2.25rem !important;
}

body.new-comp {
    /* overflow: hidden; */
}

.comp-btn-footer.full_footer {
    justify-content: space-between;
}

span.comp-semi-btn svg {
    fill: rgb(113, 113, 166);
    margin-left: 2px;
    margin-right: 10px;
}

.comp-semi-btn {
    color: #7171a6;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.comp-semi-btn:hover {
    color: #2196f3;
}

.comp-semi-btn:hover svg {
    fill: #2196f3;
}

.intro-sec.action {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.intro-sec.action p,.intro-sec.action label {
    margin: 0;
}

.sxp-head {
    margin-bottom: 3px;
    font-size: 13px;
    letter-spacing: 0.25px;
    color: rgb(126, 133, 146);
    font-weight: 600;
}

.sxp-body {
    position: relative;
    width: 100%;
    height: 45px;
    background: #ded;
    border-radius: 3px;
    display: flex;
}

.skill-exp {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.outer-input.skillsxp {
    margin-top: 24px;
}

span.sxp {
    position: relative;
    width: 20%;
    height: 100%;
    border-radius: 4px;
    cursor: pointer;
}

span.sxp:nth-child(1):hover, span.sxp:nth-child(1).active {
    background: #fc4f52;
}

span.sxp:nth-child(2):hover, span.sxp:nth-child(2).active {
    background: #ff9159;
}

span.sxp:nth-child(3):hover, span.sxp:nth-child(3).active {
    background: #f3b721;
}

span.sxp:nth-child(4):hover, span.sxp:nth-child(4).active {
    background: #80cc14;
}

span.sxp:nth-child(5):hover, span.sxp:nth-child(5).active {
    background: #29a160;
}

span.sxp-1 {
    color: #fc4f52;
}

span.sxp-2 {
    color: #ff9159;
}

span.sxp-3 {
    color: #f3b721;
}

span.sxp-4 {
    color: #80cc14;
}

span.sxp-5 {
    color: #29a160;
}

.sxp-body[data-class="sxp-5"] {
    background: rgb(41 161 96 / 20%);
}

.sxp-body[data-class="sxp-4"] {
    background: rgb(128 204 20 / 20%);
}

.sxp-body[data-class="sxp-1"] {
    background: rgb(252 79 82 / 20%);
}

.sxp-body[data-class="sxp-2"] {
    background: rgb(255 145 89 / 20%);
}

.sxp-body[data-class="sxp-3"] {
    background: rgb(243 183 33 / 20%);
}

span.sxp:hover {
    opacity: .2;
}

span.sxp.active:hover {
    opacity: 1;
    cursor: default;
}
/* monthpicker.css */

.monthpicker {
    display: inline-block;
    position: relative;
    font-size: 0.9em;
    vertical-align: middle;
    padding: 15px 15px;
    background-color: #fff;
    border: 2px solid rgb(230, 230, 255);
    border-radius: 4px;
    width: 100%;
    color: black;
    height: 46px;
}

.monthpicker_selector *::selection {
    background: transparent;
}

.monthpicker_input {
    display: inline-block;
    width: 100%;
    height: 100% !important;
    background-color: #fff;
    padding: 0 5px;
    border: none;
    outline: none;
    cursor: pointer;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: rgb(72, 72, 112);
    font-size: 1em;
    line-height: 1em;
    font-weight: 600;
}

.monthpicker_input .placeholder {
    color: #444;
    font-size: 1rem;
}

.monthpicker_input.active {
    background-color: #d4d4d4;
    color: #000;
}

.monthpicker_selector {
    position: absolute;
    top: calc(100% + 10px);
    background-color: #fff;
    min-width: 250px;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    z-index: 100;
    color: #444;
    padding: 10px;
}

.monthpicker_selector > table {
    color: #444;
    width: 100%;
    text-align: center;
    border-spacing: 0;
    border-collapse: collapse;
    font-family: "Century Gothic";
    font-size: 0.9em;
    border-radius: 5px;
}

.monthpicker_selector > table tr:first-child td,
.monthpicker_selector > table tr td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.monthpicker_selector > table tr:first-child > td:nth-child(1) {
    text-align: left;
}

.monthpicker_selector > table tr:first-child > td:nth-child(2) {
    position: relative;
}

.monthpicker_selector > table tr:first-child > td:nth-child(3) {
    text-align: right;
}

.monthpicker_selector > table tr:nth-child(2) td {
    width: 33%;
}

.yearSwitch {
    padding: 7px 10px;
    color: #2196f3;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.8rem;
}

.yearSwitch.off {
    visibility: hidden;
}

.yearValue {
    width: 100%;
    height: 100%;
    text-align: center;
    background: none;
    border: none;
    color: rgb(51, 51, 79);
    outline: none;
    font-size: 1.2em;
    font-weight: 700;
}

/* months */
.monthpicker_selector .month {
    /* border: 1px solid #007bff; */
    background-color: #fff;
    font-size: 1rem;
    cursor: pointer;
    color: rgb(113, 113, 166);
    font-weight: 600;
    margin: 2px;
    position: relative;
}
.monthpicker_selector .month:hover {
    background-color: rgb(33 150 243 / 10%);
    opacity: 1;
    color: #2196f3;
    border-radius: 5px;
}
.month.selected {
    background: #2196f3;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 5px;
}
.monthpicker_selector .month.off {
    color: #aaa;
    background: #fff;
    opacity: 0.65;
    cursor: not-allowed;
}
.monthpicker_selector .month.off:hover {
    background: red;
    opacity: 0.65;
}

/* .monthpicker_selector>table tr td:first-child {
border-left: none;
}

.monthpicker_selector>table tr td:last-child {
border-right: none;
}

.monthpicker_selector>table tr:last-child td {
border-bottom: none;
} */

.z-depth-0 {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.z-depth-1 {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.z-depth-2 {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.z-depth-3 {
    -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.z-depth-4 {
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
}
.z-depth-5,
.modal {
    -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

.exp-current:checked + svg.checkmark, .act-current:checked + svg.checkmark  {
    display: block;
}

svg.checkmark {
    display: none;
}

.monthpicker_selector.freeze {
    display: none !important;
}

.danger .svg_success {
    display: none;
}

.add-new:hover {
    background: rgb(33 150 243 / 10%);
}

.active .exp-add-content {
    display: flex;
}

.exp-add-header:hover .exp-add-info {
    color: #2196f3;
}

.exp-add-delete,.edu-add-delete, .skill-add-delete {
    display: none !important;
}

.exp-add-hide {
    transform: rotate(180deg);
}

.active .exp-add-hide {
    transform: rotate(0deg);
}

button.exp-add-hide {
    margin: 0;
}

.exp-add-header:hover .exp-add-hide svg path {
    stroke: #2196f3;
}

#composer-popups {
    position: fixed;
    z-index: 200;
    background: rgba(52, 60, 73, 0.5);
    width: 100vw;
    height: 100vh;
    display: none;
    place-items: center;
}

#experience-info {
    max-width: 460px;
    background: rgb(255, 255, 255);
    margin: auto;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding-bottom: 35px;
    flex-grow: 0;
    border-radius: 4px;
}

.popup-header {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start;
    padding: 28px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: rgb(66, 159, 240);
    font-size: 24px;
    color: rgb(255, 255, 255);
}

svg.svg_info {
    fill: #fff;
    margin: 5px 2px 0 0;
}

.popup-header span {
    font-weight: 500;
    font-size: 21px;
}

svg.pop-up-close {
    position: absolute;
    fill: #d0e8fc;
    right: 2px;
    top: 10px;
    transform: scale(.9);
    cursor: pointer;
}

.popup-content {
    padding: 35px 35px 0;
    font-size: 17px;
    line-height: 1.67;
    letter-spacing: normal;
    color: rgb(113, 113, 166);
    font-weight: 500;
}

.popup-action-btn {
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    text-align: right;
    padding: 10px 0;
}

.popup-content p {
    margin-bottom: 35px;
}

.comp-scnd-btn {
    margin-right: 12px;
    border-radius: 3px;
    border: 2px solid #e6e6ff;
    background-color: rgb(255, 255, 255);
    color: rgb(113, 113, 166);
    font-size: 14px;
    padding: 0.7em 1.3em;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Poppins';
    display: flex;
    align-items: center;
}

.comp-scnd-btn:hover {
    background-color: rgb(255, 255, 255);
    border-color: rgb(194, 194, 232);
}

.comp-btn:hover {
    background-color: rgb(11, 120, 232);
}

#composer-popups.active {
    display: grid;
}

.row_p {
    font-size: 10px;
    padding-left: 2rem;
    position: relative;
    width: 100%;
    text-align: justify;
}

[data-id="st-2"] #header-line:after {
    width: 25%;
}

#header-line:after {
    content: "";
    position: absolute;
    height: 100%;
    left: 0px;
    border-radius: 100px;
    background-color: rgb(22, 136, 254);
    transition: all .3s ease;
}

[data-id="st-3"] #header-line:after {
    width: 42.5%;
}

[data-id="st-4"] #header-line:after {width: 59%;}

[data-id="st-5"] #header-line:after {
    width: 75%;
}
[data-id="st-6"] #header-line:after {
    width: 92.5%;
}

div#pdf-view-uk {
    position: relative;
    padding: 2rem 2.5rem;
    font-family: 'NunitoSans';
    color: #1f1f1f;
}

#pdf-view-uk .top-container h1 {
    color: rgb(91,155,213);
    font-size: 22px;
}

#pdf-view-uk .detail-container h2 {
    text-transform: none;
    font-size: 15px;
    color: rgb(91,155,213);
    border-bottom: 5px solid;
}

#pdf-view-uk .xp-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.2rem;
}

#pdf-view-uk .xp-dates {
    justify-content: flex-start;
}

#pdf-view-uk .xp-titles {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#pdf-view-uk .xp-titles h3, #pdf-view-uk .xp-titles h4 {
    font-size: 12px;
    font-weight: 600;
    margin-right: 5px;
}

#pdf-view-uk .xp-dates span {
    font-size: 11px;
    font-weight: 600;
    color: rgb(64,153,208);
}

.final-header {
    position: relative;
    padding: 10px 1rem;
    margin: 1rem 10px;
    display: flex;
    align-items: center;
}

.final-header span {
    color: rgb(38, 43, 51);
    text-transform: capitalize;
    font-weight: 600;
    font-size: 17px;
}

svg.final-sec-main-icon {
    fill: #2196f3;
    margin-right: 0.5rem;
}

.intro-sec.action label {
    cursor: pointer;
}

.pve_header {
    padding: 1rem 2rem;
    position: relative;
    display: grid;
    background: #03045e;
    grid-template-columns: 30% 70%;
    color: #fff;
}

div#pve_avatar {
    position: relative;
    width: 120px;
    height: 120px;
    background: #666;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    top: 5px;
}

div#pve_avatar {}

#pdf-view-europe .top-container {
    align-items: flex-start;
    margin-bottom: 5px;
}

div#pve-body {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 30% 70%;
    min-height: 84%;
}

div#pdf-view-europe {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'NunitoSans';
    z-index: 2;
}

div#pve-left {
    background: #098deb;
    position: relative;
    padding: 1rem;
    color: #fff;
    z-index: 2;
}

div#pve-right {
    padding: 1rem 2rem 1rem 1rem;
}

div#pdf-view-europe .xp-dates span {
    font-size: 9px;
}

#pdf-view-europe .row_p {
    padding: 0;
    font-size: 8px;
}

div#nationality-cont {
    position: relative;
    font-size: 8px;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding-left: 20px;
}

.upload-ico {
    position: relative;
    width: 56px;
    height: 56px;
    margin-right: 16px;
    text-align: center;
    line-height: 62px;
    font-size: 28px;
    border-radius: 4px;
    background-color: rgb(239, 239, 247);
    color: rgb(152, 161, 179);
    background-size: contain;
    background-position: center;
}

.upload-box {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: -6px;
}

.upload-box:hover .upload-ico {
    background-color: rgba(22, 136, 254, 0.1);
    color: rgb(22, 136, 254);
}

.upload-box:hover .upload-ico svg g {
    stroke: rgb(22, 136, 254);
}

#pdf-view-europe .detail-container h2 {
    font-size: 13px;
}

div#img-upload-pop {
    width: 680px;
    min-width: 680px;
    background: rgb(255, 255, 255);
    position: relative;
    border-radius: 6px;
    padding: 36px;
}

#img-upload-pop .popup-header {
    background: transparent;
    color: #444;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}

#img-upload-pop .popup-header .pop-up-close {
    top: 1.2rem;
    right: 1rem;
    fill: rgb(113, 113, 166);
    transform: scale(1);
}

#img-upload-pop .popup-header .pop-up-close:hover {
    fill: rgb(22, 136, 254);
}

#img-upload-pop .popup-header span {
    color: rgb(113, 113, 166);
    font-size: 15px;
}

#img-upload-pop .popup-header h3 {
    font-weight: 600;
    font-size: 25px;
}

#img-upload-pop .popup-content {
    padding: 0;
}

.img-upload-chunk {
    position: relative;
    text-align: center;
    cursor: pointer;
    color: rgb(152, 161, 179);
    padding: 35px 50px 50px;
    border-width: 3px;
    border-style: dashed;
    border-color: rgb(152, 161, 179);
    border-image: url(https://resumedone.co/static/img/ui/crop/border-dash-rounded.svg) 3 / 1 / 0 round;
    transition: color 0.1s ease 0s;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 30px; */
}

.img-upload-chunk span {
    font-size: 12px;
    margin-top: 12px;
}

input#profile-pic-upload {
    position: absolute;
    width: 100%;
    height: 100% !important;
    top: 0px;
    left: 0px;
    opacity: 0;
    cursor: pointer;
}

.img-upload-chunk:hover {color: rgb(22, 136, 254);}

#profile-pic-upload:focus + .img-upload-chunk {
   color: rgb(22, 136, 254);
}

div#img-btn-sec {
    display: flex;
    justify-content: space-between;
}

div#img-action-sec {
    margin: 25px 0;
}

.comp-scnd-btn svg {
    margin-right: 10px;
}

.comp-title-sec span {
    color: #00b4d8;
    margin-top: 1rem;
    text-align: center;
}

.comp-content-chunck h2 {
    font-size: 24px;
    color: rgb(51, 51, 79);
    margin-top: 36px;
}

.comp-content-chunck p {
    margin-top: 1rem;
    font-size: 14px;
    color: rgb(113, 113, 166);
    margin-bottom: 0px;
    line-height: 1.5;
}

.comp-title-sec h2 {
    font-size: 32.5px;
    letter-spacing: 0.81px;
    color: rgb(2, 15, 61);
    text-transform: capitalize;
    font-weight: 200;
    text-align: center;
}

.comp-content-chunck ul {font-size: 14px;color: rgb(113, 113, 166);margin-bottom: 0px;line-height: 1.5;margin-left: 3rem;margin-top: 1rem;}

.comp-title-sec h1 {
    font-size: 41.5px;
    line-height: 1.2;
    color: rgb(2, 15, 61);
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
}

span.compstep-title {
    margin: 0px;
    color: rgb(0, 0, 0);
    line-height: 22px;
    letter-spacing: 0.2px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    position: relative;
}

div#cv_view_main {
    position: absolute;
    width: 70%;
    top: 5%;
    left: 17%;
    cursor: pointer;
}

div#cv_view_main img {
    position: relative;
    width: 100%;
}
.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


#wrapper {
    position: relative;
    width: 350px;
    animation: out 0.3s forwards ease;
    animation-delay: 5s;
    transform: scale(1);
    opacity: 1;
    transform-origin: center -80%;
}
@keyframes out {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    /*100% {
        transform: scale(0);
        opacity: 0;
    }*/
}
#wrapper .loader {
    animation: rotation 5s forwards linear;
    position: absolute;
    top: -107%;
    left: calc(50% - 15px);
    border: 3px solid #fff;
    border-radius: 50%;
    border-top-color: #1688fe;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes rotation {
    0% {
        transform: rotate(0);
    }
    84% {
        transform: rotate(500deg);
    }
    95% {
        border: 3px solid #fff;
        border-top-color: #a29bfe;
    }
    100% {
        transform: rotate(1800deg);
        border: 3px solid #2ed573;
    }
}
#wrapper .loader:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9em;
    color: #2ed573;
    animation: overspin 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-delay: 3.4s;
    transform: rotate(180deg);
    opacity: 0;
}
@keyframes overspin {
    0% {
        transform: rotate(180deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}
#wrapper #mouse {
    position: absolute;
    top: 100px;
    left: 80%;
    animation: mouse-pos 3.5s forwards, mouse-pos2 1s forwards;
    animation-delay: 0s, 4s;
    z-index: 20;
}
@keyframes mouse-pos {
    30% {
        top: 100px;
        left: 80%;
    }
    50% {
        top: 15px;
        left: 4%;
    }
    60% {
        top: 15px;
        left: 4%;
    }
    75% {
        top: 5px;
        left: 7.3%;
    }
    85% {
        top: 5px;
        left: 7.3%;
    }
    95% {
        top: 15px;
        left: 105%;
    }
    100% {
        top: 15px;
        left: 105%;
    }
}
@keyframes mouse-pos2 {
    0% {
        top: 15px;
        left: 105%;
    }
    100% {
        top: -85px;
        left: 53%;
    }
}
#wrapper #mouse:after {
    content: "\f245";
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    animation: mouse-cont 2s forwards;
    animation-delay: 1.7s;
    color: #341f97;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
@keyframes mouse-cont {
    0% {
        font-size: 20px;
    }
    2% {
        font-size: 15px;
    }
    4% {
        font-size: 20px;
    }
    33% {
        content: "\f245";
    }
    34% {
        content: "\f337";
    }
    80% {
        content: "\f337";
    }
    81% {
        content: "\f245";
    }
}
#wrapper #mouse:before {
    content: "";
    position: absolute;
    top: -22px;
    left: -24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #222f3e;
    animation: circle 5s forwards;
    animation-delay: 1.7s;
    opacity: 0;
    transform: scale(0);
}
@keyframes circle {
    0% {
        transform: scale(0);
    }
    4% {
        opacity: 1;
    }
    8% {
        transform: scale(1);
        opacity: 0;
    }
    92% {
        transform: scale(0);
        opacity: 0;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
#wrapper .loading-bar {
    width: 100%;
    height: 14px;
    background: #dfe6e9;
    border-radius: 5px;
}
#wrapper .loading-bar .progress-bar {
    animation: progress 5s forwards;
    width: 6%;
    height: 100%;
    background: #1688fe;
    border-radius: 5px;
    border: 0 solid #1688fe;
}
@keyframes progress {
    0% {
        width: 6%;
    }
    50% {
        border: 0 solid #0abde3;
    }
    51% {
        border: 4px solid #0abde3;
    }
    85% {
        width: 11%;
    }
    95% {
        border: 4px solid #0abde3;
        width: 100%;
    }
    100% {
        width: 100%;
    }
}
#wrapper .status {
    margin-top: 10px;
}
#wrapper .status .state {
    float: left;
    font-size: 0.7em;
    letter-spacing: 1pt;
    text-transform: uppercase;
    width: 100px;
    height: 20px;
    font-weight: 700;
    position: relative;
}
#wrapper .status .state:before {
    content: "Processing";
    position: absolute;
    left: 0;
    top: 0;
    animation: fadeLeft 0.5s forwards ease;
    animation-delay: 3.2s;
}
@keyframes fadeLeft {
    0% {
        text-indent: 0;
        opacity: 1;
    }
    100% {
        text-indent: -100px;
        opacity: 0;
    }
}
#wrapper .status .state:after {
    content: "Complete";
    position: absolute;
    left: 0;
    top: 0;
    text-indent: 100px;
    opacity: 0;
    animation: fadeLeft2 0.5s forwards ease;
    animation-delay: 4.8s;
}
@keyframes fadeLeft2 {
    0% {
        text-indent: 100px;
        opacity: 0;
    }
    100% {
        text-indent: 0;
        opacity: 1;
    }
}
#wrapper .status .percentage {
    float: right;
}
#wrapper .status .percentage:before {
    -webkit-animation: percentage-slow 3s forwards, percentage-fast 2s forwards;
    -webkit-animation-delay: 0s, 3s;
    content: "10%";
    font-size: 0.7em;
    letter-spacing: 1pt;
    font-weight: 700;
    top: -5px;
    position: relative;
}
@keyframes percentage-slow {
    0% {
        content: "6%";
    }
    25% {
        content: "7%";
    }
    50% {
        content: "8%";
    }
    75% {
        content: "9%";
    }
    100% {
        content: "10%";
    }
}
@keyframes percentage-fast {
    11% {
        content: "11%";
    }
    12% {
        content: "12%";
    }
    13% {
        content: "13%";
    }
    14% {
        content: "14%";
    }
    15% {
        content: "15%";
    }
    16% {
        content: "16%";
    }
    17% {
        content: "17%";
    }
    18% {
        content: "18%";
    }
    19% {
        content: "19%";
    }
    20% {
        content: "20%";
    }
    21% {
        content: "21%";
    }
    22% {
        content: "22%";
    }
    23% {
        content: "23%";
    }
    24% {
        content: "24%";
    }
    25% {
        content: "25%";
    }
    26% {
        content: "26%";
    }
    27% {
        content: "27%";
    }
    28% {
        content: "28%";
    }
    29% {
        content: "29%";
    }
    30% {
        content: "30%";
    }
    31% {
        content: "31%";
    }
    32% {
        content: "32%";
    }
    33% {
        content: "33%";
    }
    34% {
        content: "34%";
    }
    35% {
        content: "35%";
    }
    36% {
        content: "36%";
    }
    37% {
        content: "37%";
    }
    38% {
        content: "38%";
    }
    39% {
        content: "39%";
    }
    40% {
        content: "40%";
    }
    41% {
        content: "41%";
    }
    42% {
        content: "42%";
    }
    43% {
        content: "43%";
    }
    44% {
        content: "44%";
    }
    45% {
        content: "45%";
    }
    46% {
        content: "46%";
    }
    47% {
        content: "47%";
    }
    48% {
        content: "48%";
    }
    49% {
        content: "49%";
    }
    50% {
        content: "50%";
    }
    51% {
        content: "51%";
    }
    52% {
        content: "52%";
    }
    53% {
        content: "53%";
    }
    54% {
        content: "54%";
    }
    55% {
        content: "55%";
    }
    56% {
        content: "56%";
    }
    57% {
        content: "57%";
    }
    58% {
        content: "58%";
    }
    59% {
        content: "59%";
    }
    60% {
        content: "60%";
    }
    61% {
        content: "61%";
    }
    62% {
        content: "62%";
    }
    63% {
        content: "63%";
    }
    64% {
        content: "64%";
    }
    65% {
        content: "65%";
    }
    66% {
        content: "66%";
    }
    67% {
        content: "67%";
    }
    68% {
        content: "68%";
    }
    69% {
        content: "69%";
    }
    70% {
        content: "70%";
    }
    71% {
        content: "71%";
    }
    72% {
        content: "72%";
    }
    73% {
        content: "73%";
    }
    74% {
        content: "74%";
    }
    75% {
        content: "75%";
    }
    76% {
        content: "76%";
    }
    77% {
        content: "77%";
    }
    78% {
        content: "78%";
    }
    79% {
        content: "79%";
    }
    80% {
        content: "80%";
    }
    81% {
        content: "81%";
    }
    82% {
        content: "82%";
    }
    83% {
        content: "83%";
    }
    84% {
        content: "84%";
    }
    85% {
        content: "85%";
    }
    86% {
        content: "86%";
    }
    87% {
        content: "87%";
    }
    88% {
        content: "88%";
    }
    89% {
        content: "89%";
    }
    90% {
        content: "90%";
    }
    91% {
        content: "91%";
    }
    92% {
        content: "92%";
    }
    93% {
        content: "93%";
    }
    94% {
        content: "94%";
    }
    95% {
        content: "95%";
    }
    96% {
        content: "96%";
    }
    97% {
        content: "97%";
    }
    98% {
        content: "98%";
    }
    99% {
        content: "99%";
    }
    100% {
        content: "100%";
    }
}

div#cv_view_main:hover {
    transform: scale(1.1);
}

div#wrap-around {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

img.cv_f_img {
    position: relative;
    width: 95%;
    margin-top: 2rem;
    display: block;
}

#chapter-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

#chapter-close svg {
    fill: #888;
}

#chapter-close:hover svg {
    fill: #222;
}

div#delete-pop {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 460px;
    border-radius: 6px;
    padding: 36px 30px 18px;
}

div#delete-pop .popup-header {
    background: #fff;
    color: #444;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}

div#delete-pop .popup-header h3 {
    font-weight: 600;
    font-size: 24px;
    color: rgb(51, 51, 79);
    margin-bottom: 10px;
    margin-top: 0px;
    line-height: 1.2;
    text-transform: capitalize;
}

div#delete-pop .popup-header span {
    margin-bottom: 50px;
    line-height: 1.5;
    font-size: 16px;
    color: rgb(113, 113, 166);
}
.info-comp-container p {
    text-align: center;
}

a.temp-inner span {text-transform: uppercase;font-weight: 600;color: #444;transition: all .3s ease;}

div#button-area {
    position: relative;
    padding: 3rem;
    display: flex;
    width: 100%;
    max-width: 60vw;
    justify-content: space-evenly;
}

section#starter {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-input {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-field-quarte {
    position: relative;
    width: 75%;
}

.social-name {
    position: relative;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.social-name label {
    font-size: 14px;
    font-weight: 600;
}

.input-field-quarte .outer-input {
    margin-bottom: 25px;
}

.final-detail-container.xms {
    margin-bottom: 40px;
}

.temp-inner:hover .temp-img {
    transform: scale(1.08);
}

.temp-inner:hover span {
    color: #2196f3;
}

span.st-step.active {
    background: #2196f3;
}

#nav-indc {
    position: relative;
    display: none;
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 600;
    color: #2196f3;
    margin-bottom: 20px;
}
button.comp-scnd-btn.item-delete {
    font-size: 16px;
}
@media screen and (max-width: 1024px) {
    .composer-view-content, div#comp-content-view{
        display: none;
    }
    section#composer-inner{
        grid-template-columns: 1fr;
    }
    section#comp-landing{
        width:100%;
    }
}
@media screen and (max-width: 620px) {
    .comp-info-holder{
        padding: 10px;
    }
    .comp-nv-sec span, div#header-line, .st-step-indc{
        display: none;
    }
    div#composer_info_details{
        padding-bottom: 100px;
    }
    .comp-btn, .comp-scnd-btn{
        width:100%;
        justify-content: center;
        margin-bottom: .7rem;
        margin-right: 0;
    }
    .comp-btn-footer, .popup-action-btn{
        flex-wrap: wrap;
    }
    .comp-semi-btn{
        width:100%;
        border: 2px solid #e6e6ff;
        padding: 0.7em 1.7em;
        margin-bottom: 0.7rem;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #nav-indc{
        display: flex;
    }
    div#composer-nav{
        justify-content: center;
    }
    .step-section{
        display: flex;
        flex-direction: column;
    }
    img.cv_f_img{
        width:300px;
    }
    .comp-mid-area{
        padding: 0px;
    }
    .comp-nv-sec{
        width:5%;
    }
    div#cv-temp-container{
        flex-direction: column;
        align-items: center;
    }
    .info-comp-container{
        padding: 1.5rem;
    }
}
@media screen and (max-width: 450px) {
    .input-field-short, img.cv_f_img{
         width:100%; 
    }
    div#comp-content{
        padding: 30px;
    }
}



#pdf-viwer-new.europe:before {
    content: '';
    position: absolute;
    height: 100%;
    min-height: 787px;
    background: #098deb;
    width: 30%;
    z-index: 1;
    top: 0;
}

.final-container {
    padding: 0 1rem;
}