/* @group Base */

amarelo{
    background-color: #fedc52;
}
roxo{
    background-color: #331C54;
}

html,
body {
    font-family: 'Work Sans', sans-serif;
    color: #666;
    width: 100%;
    height: 100%;
    font-size: 100%;
    line-height: 1.4;
}

body {
    scroll-behavior: smooth;
}

.esk p em{
    font-family: Georgia, serif;
    font-style: italic;
    letter-spacing: .02em;
}

.esk img {
    max-width: 100%;
    height: auto;
    display: block;
}

.esk h1 {
    text-align: center;
    font-size: 2em;
    color: #331C54;
    letter-spacing: .03em;
    font-weight: 600;
    margin: 60px 0 0;
    display: block;
    padding-bottom: 10px;
}

.esk h2 {
    text-align: center;
    font-size: 3em;
    color: #331C54;
    font-weight: 400;
    margin: 0;
    display: block;
    padding-bottom: 30px;
    letter-spacing: .06em;
}

.esk h3 {
    font-size: 1.6em;
    line-height: 1.2em;
    color: #331C54;    
    font-weight: 400;
}

.esk .content a,
.esk #navigation a {
    color: #331C54;
    text-decoration: none;
}

.esk-what-item-info p strong,
.esk-who-person-bio p strong,
.esk .highlight{
    background-color: rgba(255, 223, 65, 0.78);
    font-weight: 600;
}

/* @end */

/* @group Header */

.esk-header {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding-top: 150px;
}

html:not(.ccm-edit-mode) .esk .esk-header{
    transition: all .6s ease-in-out;
}

.ccm-edit-mode .esk-header{
    padding: 30px;
}

.esk-header .header-bottom{
    padding: 30px 30px 0;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.esk-header .header-bottom video{
    max-width: 100%;
    height: auto;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    mix-blend-mode: darken;
    position: relative;
}

.esk-header .header-bottom .video-wrapper{
    background-color: #fedc52;
    min-height: 200px;
    overflow: hidden;
    
}

.esk-logo {    
    width: 100%;
    position: absolute;
    top: 0;
}

.ccm-toolbar-visible .esk-logo {    
    top: 50px;
}

.esk-logo a{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 400px;
    max-width: 100%;
}

@keyframes fadein {
    0%{
        opacity: 0;
        transform: translateY(-5px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

.scrolled .esk-logo {
    position: fixed;
    top: 0;
    width: 200px;
    z-index: 12;
    left: 0;
    animation: fadein .5s ease-in-out 0s 1 alternate;
    
}

.scrolled.ccm-toolbar-visible .esk-logo{
    top: 47px;
}

.scrolled .esk-logo img{
    transform: translateZ(0);
    outline: 1px solid transparent;
}

/* @end */

/* @group Nav */

.esk-nav-ghost{
    height: 90px;
    width: 100%;
    display: none;
}

#navigation {
    display: block;
    font-weight: 400;
    letter-spacing: .05em;
    width: 100%;
    font-size: 1.3em;
    padding-right: 5%;
    padding-left: 5%;
    box-sizing: border-box;
    transform: translateZ(0px);
    background-color: white;
    position: absolute;
    height: 90px;
    text-align: center;
    
}

.scrolled #navigation {    
    font-size: 1em;
    padding: 0 0 0 200px;
    background-color: #fedc52;
    position: fixed;
    top: 0;
    bottom: auto;
    width: 100%;
    z-index: 10;
    left: 0;
}

.scrolled.ccm-toolbar-visible #navigation{
    top:  47px;
}

.pre-scrolled #navigation{
    position: fixed;
    bottom: 0;
    background-color: white;
    z-index: 9;
}

#navigation ul {
    margin: 0;
    padding: 0 50px 0 0;
    text-align: center;
    list-style-type: none;
    min-height: 90px;
}

html:not(.scrolled) #navigation ul{
    padding-right: 0;
}

#navigation li {
    box-sizing: border-box;
    display: inline-block;
    margin-top: 20px;
}

#navigation li a {
    display: block;
    transition: all .2s ;
    padding: 12px;
    line-height: 1;
    padding: 15px;
    border: 2px solid transparent;
    font-weight: 500;
}

#navigation .esk-toggle-btn{
    transition: all .2s;
    line-height: 1;
    padding: 15px;
    border: 2px solid transparent;
    margin-top: 20px;
    box-sizing: border-box;  
}

html:not(.scrolled) #navigation .esk-toggle-btn{
    text-align: center!important;
}

.scrolled #navigation li a.is-active-link{
    border: 2px solid #331C54;
    padding: 15px;
}

.scrolled.no-touch #navigation li a:not(.is-active-link):hover {
    background-color: rgba(50, 28, 84, 0.1)!important;
}

.no-touch:not(.scrolled) #navigation li a:hover {
    background-color: #fedc52;
}


/* @end */

/* @group Flags */

html:not(.ccm-edit-mode) .esk .esk-switch-language{
    top: 70px;
    transform: translateZ(0px);
    position: absolute;
    right: 30px;
    height: 90px;
}

html.ccm-toolbar-visible .esk .esk-switch-language {
    top: 120px;
}

html.scrolled:not(.ccm-edit-mode) .esk .esk-switch-language{
    position: fixed;
    top: 0;
    right: 20px;
    padding-top: 20px;
    box-sizing: border-box;
    z-index: 12;
    animation: fadein .5s ease-in-out 0s 1 alternate;
}

html.scrolled.ccm-toolbar-visible:not(.ccm-edit-mode) .esk .esk-switch-language{
    top: 47px;
}

.esk-switch-language{
    mix-blend-mode: multiply;
}

.esk-switch-language a {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    opacity: .4;
    width: 15px;
    text-decoration: none;
}

.esk-switch-language a span{
    opacity: 0;
    position: absolute;
    left: -200%;
    font-weight: 600;
    transition: opacity .2s ease-in-out 0s;
    display: inline-block;
    padding: 4px 4px 6px;
    top: 0;
}

.esk-switch-language a:hover,
.esk-switch-language a:hover span{
    opacity: 1;
}

.esk-switch-language a.esk-switch-language-active{
    opacity: 1;
}

/* @end */

/* @group Main */


.esk article {
    transition: all .2s ease-in-out 0s;
}

.esk-section {
    padding: 20px;
    box-sizing: border-box;
    clear: left;
}

.esk-section-header{
    padding-top: 0px;
}

.esk-section-header .content{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.esk-section-header h2{
    padding-top: 150px;
    line-height: 1.2;
}

.esk-section-header,
.esk .esk-main{
   max-width: 750px; 
   margin-right: auto;
   margin-left: auto;
}

.esk-section-header .content p,
.esk .esk-main .content p{
    font-size: 1em;
    line-height: 1.6;
    white-space: normal;
    letter-spacing: .02em;   
}

.esk-section-header p a{   
    font-weight: 600;
    font-size: .97em;
    color: #331C54;
    border-bottom: 2px solid;
    border-bottom-color: #331C54;
    display: inline-block;
    line-height: 1;
    padding-bottom: 4px;
    transition: border-bottom-color .1s ease-in-out;
    text-decoration: none;
}

.no-touch .esk-section-header .content a:hover{
    padding-bottom: 6px;
    border-bottom: 2px solid;
    border-bottom-color: rgba(255, 223, 65, 0.78);
}

.esk-section-header .content blockquote{
    font-size: 1.2em;
    text-align: center;
    color: #331C54;
    font-weight: 600;
}

.esk .esk-main {
    padding: 140px 20px 0;
}

.esk.scrolled .esk-main {
    padding: 50px 20px 0;
}

.esk .esk-main h2,
.esk-slogan li{
    font-size: 1.6em;
    background-color: white;
    position: relative;
}

.esk .esk-main h2::after,
.esk .esk-main ul::after{
    content: "";
    background: url(../images/backline.png) center center repeat-y;
    background-size: 2px;
    width: 100%;
    height: 120px;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    z-index: -1;
}

.esk .esk-main ul::after {
    height: 180px;
}

@keyframes sloganMeaning {
    0%{ letter-spacing: 0.03em;}   
    7%{ letter-spacing: .2em;}
    100%{letter-spacing: 0.03em;}
}

@keyframes sloganBlur {
    0%{ filter: blur(0px);}
    7%{ filter: blur(1px);}
    20%{ filter: blur(0px);}
    100%{ filter: blur(0px);}
}

.esk-slogan ul{
    list-style-type: none;
    margin-top: 30px;
    position: relative;
    padding: 0;
}
.esk-slogan li{
    padding: 10px 0px;
    text-align: center;
    box-sizing: border-box;
    color: white;
    background-color: white;
    position: absolute;
    top: 0;    
    left: 0;
    width: 100%;
    z-index: 0;
}

@keyframes sloganEvery {
    0%{ opacity: 0;}
    20%{ opacity: 1;}
    80%{opacity: 1;}
    100%{ opacity: 1;}
}

.esk-slogan li.selected{
    z-index: 1;
    color: #331C54;
    position: relative;
    letter-spacing: .05em;
    animation: 
        sloganEvery 2s ease-in-out 0s 1;
}

/* @end */

/* @group Who */

.esk .esk-who {
    padding: 0;
}

.esk .esk-who .esk-section-header{
    padding-right: 20px;
    padding-left: 20px;
}

.esk-who .grid{
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin-top: 120px;
    background-color: #fedc52;
}

.grid-item{
    box-sizing: border-box;
    float: left;
    display: block;
    background: #fedc52;
}

.grid-item,
.grid-sizer {
  width: 25%;
}

.ccm-edit-mode .grid-item,
.ccm-edit-mode .grid-sizer {
  width: 100%;
}

@keyframes eskblur {
    0%{ filter: blur(0px);}
    100%{ filter: blur(15px);}
}

.learn-more-active{
    width: 100%;
    transition: width 0s cubic-bezier(0.165, 0.84, 0.44, 1);
    animation: eskblur .3s ease-in-out 0s 1 alternate-reverse;
}

.esk-who-person-info{
    color: #fedc52;
    transition: 
        all .3s cubic-bezier(0.165, 0.84, 0.44, 1), 
        width 0s;
    transform: translateZ(0);
    width: 100%;
    background-color: #331C54;
    cursor: pointer;   
}

.ccm-edit-mode .esk-who-person-info,
.learn-more-active .esk-who-person-info{
    width: 25%;
    float: left;
    height: 100%;
}

.esk-who-person-name{
    padding: 20px;
    position: absolute;
    font-weight: 600;
    font-size: 1.2em;
    line-height: 1.2;
    pointer-events: none;
    opacity: 0;
}

.learn-more-active .esk-who-person-name{
    pointer-events: auto;
    cursor: text;
}

.no-touch .grid-item:not(.learn-more-active) .esk-who-person:hover .esk-who-person-name, {
    opacity: 1;
}

.no-touch .grid-item:not(.learn-more-active) .esk-who-person:hover .esk-who-person-name,
.learn-more-active .esk-who-person-name,
.no-touch .grid-item:not(.learn-more-active) .esk-who-person:hover .learn-more,
 .learn-more-active .esk-who-person .learn-more{
    z-index: 1;
    opacity: 1;
}

.esk-who-person-photo{
    background-color: #fedc52;
    background-color: #331C54;
    overflow: hidden;
}

.learn-more-active .esk-who-person-photo{
    opacity: .5;
    transition: opacity .8s ease-in-out 0s;
}

.esk-who-person-photo img{
    width: 100%;
    mix-blend-mode: screen;
    -webkit-filter: grayscale(0%) contrast(90%) blur(0);
    filter:         grayscale(0%) contrast(90%) blur(0);
}

.no-touch .grid-item:not(.learn-more-active) .esk-who-person:hover .esk-who-person-photo img{
    filter: blur(15px);
}

.esk-who-person-name h3{
     color: #fedc52;
     margin: 0 0 5px;  
     font-weight: 600;
}

.esk-who-person .learn-more{
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fedc52;
    font-weight: 600;
    display: block;
    padding: 15px 20px !important;
    border-top: 1px solid;
    line-height: 1;
    left: 0;
    box-sizing: border-box;
    opacity: 0;
    transition: 
        all .3s ease-in-out 0s,
        background-color 0s;
    text-align: left;
    background-color: rgba(255, 223, 65, 0);
    text-decoration: none;
}

.no-touch .esk-who-person-info .learn-more:hover{
    background-color: rgba(255, 223, 65, 1);
    background-color: rgba(255, 255, 255, 1);
    border-top: 1px solid transparent;
    color: #331C54;
}

.learn-more-active .esk-who-person .learn-more.esk-more,
.esk-who-person .learn-more.esk-close{
    display: none;
}

.learn-more-active .esk-who-person .learn-more.esk-close{
    display: block;
}

.esk-who-person-bio{
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .5s .1s;
    background-color: white;
}
.ccm-edit-mode .esk-who-person-bio,
.learn-more-active .esk-who-person-bio{
    opacity: 1;
    height: auto;
    overflow: auto;
    pointer-events: auto;
    padding: 10px 30px;
    width: 75%;
    float: left;
    box-sizing: border-box;
    font-size: 1.1em;
    line-height: 1.5;
    color: #331C54;
}

.esk-who-person-bio p{
    font-size: .9em;
    line-height: 1.4;
    white-space: normal;
    letter-spacing: .02em;  
    max-width: 750px; 
    color: #666;
}

/* @end */

/* @group What */

.esk-what .esk-section-header{
    display: block;
}

.esk .esk-what .section-main{
    background: url(../images/backline.png) center 30% repeat-y;
    background-size: 2px;
    padding-top: 0;
}


.esk-section-footer .esk-section-inner{
    padding: 20px;
    max-width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #331C54;
}

.esk .esk-what .esk-section-footer .content p{
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.section-main{
    padding: 20px;
}

.esk .esk-what .esk-section-footer{
    background: url(../images/backline.png) center center repeat-y;
    background-size: 2px;
    padding-top: 50px;
}

.esk .esk-what .esk-section-footer .content{
    color: white;
    text-align: center;
}

.esk .esk-what .esk-section-footer h3{
    color: white;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.esk .esk-what .esk-section-footer p{
    color: white;
}

.esk .esk-what .esk-section-footer .esk-drag-container p{
    margin: 0;
}

.esk .esk-what .esk-section-footer p a{
    color: #fedc52;
    font-size: 1.2em;
    letter-spacing: .07em;
    display: inline-block;
    padding: 5px;
    border: 2px solid #331C54;
    margin-top: 20px;
    transition: all .2s ease-in-out;
    border-bottom: 2px solid #fedc52;
    margin-bottom: 20px;
}

.no-touch .esk .esk-what .esk-section-footer p a:hover{
    border: 2px solid #fedc52;
    padding: 15px;
}

.esk .esk-what .esk-section-footer ul{
    margin: 40px auto 60px;
    max-width: 600px;
    padding: 0;
}

.esk .esk-what .esk-section-footer li{
    display: inline-block;
    letter-spacing: .06em;
    margin-right: 10px;
    margin-left: 10px;
    line-height: 2.5em;
    border-bottom-style: solid;
    color: #fedc52;
    border-bottom-width: 2px;
}

.esk .esk-what .dragster{
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}

.esk .esk-what .dragster:hover{
    transform: scale(1.05);
}

.esk .esk-what .dragster.is-dragging { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    filter: blur(1px);
    color: #fedc52!important;
    border-color: #fedc52!important;
}
.esk .esk-what .esk-section-footer{
    text-align: center;
}

.esk .esk-what .esk-section-footer .esk-drag-container{
    max-width: 40%;
    margin: 0 auto 15px;
    text-align: center;
    padding: 15px;
    list-style-type: none;
    border-radius: 4px;
    background-color: rgba(255,255,255,.1);
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.esk .esk-what .esk-section-footer .esk-drag-container li{
    margin: 10px;
    color: white;
    font-weight: 500;
}

.esk .esk-what .esk-section-footer .esk-drag-container li:first-child{
    display: block;
    pointer-events: none!important;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
    border: none;
    line-height: 1.5;
}

.esk .esk-what .esk-section-footer .esk-drag-container .dragster.dropped {
    top: auto!important;
    left: auto!important;
    padding: 5px 0 0;
    letter-spacing: .06em;
    display: inline-block;
    color: #fedc52;
    opacity: 1;
    margin: 10px 10px 0;
}

.esk-what-block {
    width: 49.5%;   
    display: inline-block;
    padding: 50px 30px 30px;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    border-top: 2px solid #331C54;
}

.esk-what-block:nth-child(-n+2){
    border-top: none;
}

.esk-section-footer .esk-section-inner{
    max-width: 100%;
    box-sizing: border-box;
}

.esk-what-item-wrapper {
    width: 100px;
    height: 100px;
    display: inline-block;
}

.esk-what-item {
    width: 100%;
    height: 100%;
}

.esk-what-item-title{
    cursor: pointer;
}
.esk-what-item-info{
    max-height: 20px;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-in-out 0s;
}

.esk-expanded.esk-what-item-info{
    max-height: 500px;
    padding-bottom: 40px;
}

.esk-what-item-info p{
    margin: 0;
}
.esk-what-block-read-more{
    text-decoration: none;
    color: #bbb;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
    display: block;
    padding-top: 50px;
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #fedc52;
}

.esk-what-block-read-more:hover{
    color: #331C54;
}

.esk-expanded .esk-what-block-read-more{
    padding-top: 0;
}

.esk-expanded .esk-what-block-read-more.esk-more,
.esk-what-block-read-more.esk-less{
    display: none;
}
.esk-expanded .esk-what-block-read-more.esk-less{
    display: block;
    color: #331C54;
}

@keyframes criativa {
    0% {
        transform: rotate(0deg);
        border-radius: 0;
    }
    
    100% {
        transform: rotate(360deg);
        border-radius: 50%;
    }
}

@keyframes edit {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

@keyframes quality {
    0% { transform: rotate(0deg) translateX(50px); }
    100% { transform: rotate(360deg) translateX(50px); }
}

.esk-what-block .esk-what-item {
    border: 2px solid #fedc52;
}

/* Técnica */

@keyframes tecnica {
    0% { border-radius: 0; }
    33% { border-radius: 0; }
    66% { border-radius: 30%; }
    100% { border-radius: 30%; }
}

.esk-what-block:nth-child(1) .esk-what-item {
    border: 2px solid #fedc52;
    animation: tecnica 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s infinite alternate;
}

/* Criativa */
.esk-what-block:nth-child(2) .esk-what-item {
    border: 2px solid #fedc52;
    animation: criativa 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite alternate;
}

.esk-what-block:nth-child(2) .esk-what-item:after{
    content: "";
    display: block;
    height: 10px;
    width: 10px;
    position: absolute;
    background-color: #331C54;
    animation: criativa 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s infinite alternate;
}

/* Localiza */

@keyframes localiza {
    0% {
        border-radius: 0;
        transform: scale(1,1);
    }
    
    25% {
        border-radius: 50%;
        transform: scale(1,1);
    }
    
    50% {
        border-radius: 50%;
        transform: scale(1,1);
    }
    
    75% {
        border-radius: 50%;
        transform: scale(.5,.5);
    }
    
    100% {
        border-radius: 50%;
        transform: scale(.5,.5);
    }
}

.esk-what-block:nth-child(3) .esk-what-item {
    border: 2px solid #fedc52;
    animation: localiza 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s infinite alternate;
}

/* Edita */
.esk-what-block:nth-child(5) .esk-what-item {
    border-radius: 50%;
    border: 2px dashed #fedc52;
    animation: edit 6s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite alternate;
}

/* Qualidade */
.esk-what-block:nth-child(6) .esk-what-item {
    transform: scale(.9);
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #fedc52;
    position: relative;
}

.esk-what-block:nth-child(6) .esk-what-item::after {
    content: "";
    position: absolute;
    top: 37.5%;
    left: 37.5%;
    width: 25%;
    height: 25%;
    box-sizing: border-box;
    display: block;
    border-radius: 50%;
    border: 2px dashed #331C54;
    animation: quality 5s linear 0s infinite;
}


/* Transcrição */
.esk-what-block:nth-child(4) .esk-what-item {
    box-sizing: border-box;
    border: 2px solid #331C54;
    position: relative;
}

@keyframes transcrica {
    0% {
        transform: scale(.2,.2);
        border: 4px solid rgba(254, 220, 81, 1);
        filter: blur(2px);
        border-radius: 0;
    }
    
    80% {
        transform: scale(1,1);
        filter: blur(3px);
        border: 4px solid rgba(254, 220, 81, 1);
        border-radius: 50%;
    }
    100% {
        transform: scale(1,1);
        filter: blur(8px);
        border: 4px solid rgba(254, 220, 81, 0);
        border-radius: 50%;
    }
}

.esk-what-block:nth-child(4) .esk-what-item{
    border: 2px solid rgba(254, 220, 81, 0);
}

.esk-what-block:nth-child(4) .esk-what-item::before,
.esk-what-block:nth-child(4) .esk-what-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    border-radius: 50%;
    border: 4px solid #fedc52;
    filter: blur(8px);
}

.esk-what-block:nth-child(4) .esk-what-item::after{
    animation: transcrica 5s ease-out 0s infinite;
}

.esk-what-block:nth-child(4) .esk-what-item::before{
    animation: transcrica 5s ease-out 3s infinite;
}

.esk-what-block p{
    text-align: left;
    font-size: .9em;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* @end */

/* @group Clients */

.client-list,
.esk-partners-protocols ul {
    list-style-type: none;
    padding: 0;
    margin: 120px 0 0;
    text-align: center;
}

.client-list-item,
.esk-partners-protocols li {
    width: 24%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 50px;
    opacity: 0;
    transform: scale(0.6);
    transition: all .7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

.client-list-item.esk-fade-in,
.esk-partners-protocols li.esk-fade-in {
    transform: scale(1);
    opacity: 1;
}

.client-list-item img,
.esk-partners-protocols img {
    object-fit: contain;
    height: 60px;
    max-width: 50%;
    display: inline-block;
}

/* @end */

/* @group Contacts */

.esk .esk-contacts {
    padding-bottom: 100px;
    background-color: #331C54;
}

.esk .esk-contacts h2{
    color: #fedc52;
}

.esk-contacts .section-main{
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    max-width: 728px;
    font-size: .95em;
    color: white;
}

.esk-contacts iframe{
    width: 100%;
    position: relative;
    display: block;
}

.esk-contacts .section-main li{
    width: 50%;
    clear: none;
    color: #fedc52;
    color: white;
    display: block;
    float: left;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.6;
    padding-bottom: 35px;
    position: relative;
    letter-spacing: .06em;
}

.esk-contacts li.esk-map{
    width: 50%;
    float: left;
    height: 320px;
    margin-top: 20px;
}

.esk-contacts .section-main h4{ 
    font-weight: 400;
    margin: 50px 0 0;
    color: white;
    color: #fedc52;
    font-size: 1.4em;
    display: block;
    position: relative;
    z-index: 0;
}


.esk-contacts .section-main a{
    transition: all .2s ease-in-out 0s;
    color: white!important;
    margin-bottom: 3px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-left: 0;
    text-decoration: none;
}

.no-touch .esk-contacts .section-main li a:hover{
    color: #fedc52!important;    
}

/* @end */

/* @group Footer */

.esk-footer {
    position: relative;
    padding-top: 90px;
}

.esk-footer .esk-footer-section{
    padding: 0;
    width: 100%;
    text-align: center;
    background-color:white;
}

/* @end */

/* @group Copyright */

.esk .esk-footer-section.esk-copyright{
    width: 100%;
    background: white;
    color: #bbb;
    padding: 50px 30px 30px;
    box-sizing: border-box;
    text-align: center;
    font-size: .7em;
}
.eskema{
    display: inline-block;
    opacity: .1;
    vertical-align: middle;
    position: relative;
    font-weight: 600;
    color: black!important;
}

.eskema img{
    display: inline-block;
    max-width: 60%;
    vertical-align: middle;
}

.eskema span{
    position: absolute;
    white-space: nowrap;
    width: auto;
    opacity: 0;
    left: 0;
    top: -40px;
    pointer-events: none;
    text-align: left;
}

.eskema:hover{
    opacity: .6;
}

.eskema:hover span{
     opacity: 1;
}

/* @end */

/* @group Forms */

.esk-form,
.esk-footer .content{
    width: 80%;
    display: inline-block;
    box-sizing: border-box;
    padding: 30px;
    color: #331C54;
}

.esk-form {
    column-count: 2;
    display: block;
    margin: 0 auto;
}

.esk-footer .content{
    font-size: 1.2em;
    padding-top: 50px;
   
}

.esk-footer .content h4{
    margin-top: 0;
    font-size: 1.6em;
    margin-bottom: 0;
    letter-spacing: .04em;
    font-weight: 400;
}

.esk-form{
    text-align: left;
}

/* @end */

/* @group Textarea */

.esk-form .field-text,
.esk-form .field-email,
.esk-form .field-textarea,
.esk-form .field-select{
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}
.esk-form .field-select select,
.esk-form .field-text input,
.esk-form .field-email input,
.esk-form .field-textarea textarea{
    padding: 10px 20px;
    font-family: 'Work Sans', sans-serif;
    letter-spacing: 0.05em;
    width: 100%;
    box-sizing: border-box;
    border: none;
    line-height: 1.4em;
    border-radius: 0;
    margin-bottom: 0;
    display: block;
    background-color: rgba(0,0,0,.02);
}

.esk-form .field-select select{
    background-color: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}


.esk-form .field-select select:focus,
.esk-form .field-text input:focus,
.esk-form .field-email input:focus,
.esk-form .field-textarea textarea:focus{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    background-color: rgba(0,0,0,.06);
}
.esk-form .field-checkboxlist label.control-label,
.esk-form .field-select select + label,
.esk-form .field-text input.empty + label,
.esk-form .field-email input.empty + label,
.esk-form .field-textarea textarea + label {
    font-family: 'Work Sans', sans-serif;    
    letter-spacing: .05em;
    width: 100%;
    color: white;
    color: #999;
    display: block;
    cursor: text;
    padding: 10px 20px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    z-index: 9999;
    left: 0;
    margin: 0;
}
.esk-form .field-select select + label{
    pointer-events: none;
    /*text-align: right;*/
    background: #fafafa;
}
.esk-form .field-text input.empty:focus + label,
.esk-form .field-email input.empty:focus + label,
.esk-form .field-textarea textarea:focus + label {
    pointer-events: none;
    opacity: .2;
}
.esk-form .field-select select:not(.empty) + label,
.esk-form .field-select select:focus + label,
.esk-form .field-text input:not(.empty) + label,
.esk-form .field-email input:not(.empty) + label{
    display: none;
}
.esk-form .field-email input:not(:focus):invalid{
    color: red;
}

.esk-form .field-textarea textarea:valid:not(:focus) + label,
.esk-form .field-textarea textarea:valid:focus + label {
    display: none;
}

.esk-form .text-muted{
    font-size: .6em;
    margin-left: 5px;
}

.esk-form .text-muted::before{
    content: "* ";
    color: #331C54;
    font-size: 1.4em;
    position: relative;
    bottom: -3px;
}

/* @end */

/* @group File Upload */

.esk-form .field-fileupload{
    margin-bottom: 5px;
    display: inline-block;
    position: relative;
    width: 100%;
}
.esk-form .field-fileupload input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.esk-form .field-fileupload input + label {    
    font-weight: 600;
    letter-spacing: .05em;
    width: 100%;
    color: #888;
    background-color: rgba(0,0,0,.02);
    display: inline-block;
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;
}

.esk-form .field-fileupload input + label.fileupload-files-selected{
    background-color: #fedc52;
    color: #331C54;
}

.esk-form .field-fileupload input + label::before{
    content: "";
    background-image: url(../images/fa_upload.png);
    background-size: contain;
    opacity: .5;
    width: 16px;
    height: 16px;
    position: relative;
    bottom: -2px;
    margin-right: 10px;
    margin-left: 10px;
    display: inline-block;
}

.esk-form .field-fileupload input + label.fileupload-files-selected::before{
    content: "\f15b";
}

.esk-form .field-fileupload input + label.fileupload-files-selected-multiple::before{
    content: "\f0c5";
}

.esk-form .field-fileupload input:focus + label,
.esk-form .field-fileupload input + label:hover {
    color: #331C54;
}

.esk-form .field-fileupload input:focus + label.fileupload-files-selected,
.esk-form .field-fileupload input + label.fileupload-files-selected:hover {
    color: #331C54;
}

.esk-form .field-fileupload input + label.fileupload-files-selected:hover::after{
    content: " - " attr(data-after) "?";
}

.esk-form .field-fileupload input + label:hover{
    
}

.esk-form .field-fileupload input:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.esk-form .field-fileupload input + label * {
    pointer-events: none;
}

/* @end */

/* @group Submit */

.esk-form input.btn{
    background-color: #fedc52;
    color:  #331C54;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    padding: 10px 20px;
    font-weight: 400;
    letter-spacing: .05em;
    font-size: 1.2em;
    margin-top: 14px;
    cursor: pointer;
    transition: all .1s ease-in-out 0s;
    font-family: 'Work Sans', sans-serif;
}
.esk-form input.btn:hover,
.esk-form input.btn:focus{
    background-color: #331C54;
    color: #fedc52;
}

/* @end */

/* @group Checkbox */

.esk-form .field-checkboxlist{
    padding: 50px 20px 20px;
    position: relative;
    background-color: rgba(0,0,0,.02);
    line-height: 2em;
    margin-bottom: 5px;
    display: inline-block;
}
.esk-form .field-checkboxlist label.control-label{
    line-height: 1.4;
    z-index: 0;
}
.esk-form .field-checkboxlist .checkbox{
    display: inline-block;
    margin-right: 10px;   
    line-height: 1.4em;
}

.esk-form .field-checkboxlist .checkbox label{
    display: inline-block;
    cursor: pointer;
}

.esk-form .field-checkboxlist .checkbox input{
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 50%;
    border: 2px solid #331C54;
}

.esk-form .field-checkboxlist .checkbox span{
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4em;
}
.esk-form .field-checkboxlist .checkbox input:not(:checked):hover{
    background-color: #331C54;
    opacity: .5;
}
.esk-form .field-checkboxlist .checkbox input:checked{
    background-color: #331C54;
}


/* @end */

/* @group Hello */

#hello{
    max-width: 100%;
    display: block;
    background-color: rgba(255, 223, 65, 0.78);
}

/* @end */

/* @group Manual */

.manual #navigation li:first-child {
    display: inline-block!important;
}

.manual #navigation li:first-child a{
    display: inline-block!important;   
}

.esk-manual-content{
    max-width: 700px;
    margin: 0 auto;
}
.esk .esk-manual-content h2{
    margin-top: 30px
}
.esk .esk-manual-content h2::after{
    display: block;
    position: relative;
    z-index: 1;
    height: 30px;
    margin-top: 20px
}
.esk .esk-manual-content h3,
.esk .esk-manual-content h4{
    text-align: center;
}

.esk .esk-manual-content .content p{
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: justify;
}
/* @end */

/* @group PartnersProtocols */

.esk-partners-protocols{
    text-align: left;
    margin-top: 150px;
}

.esk-partners-protocols .subsection{
    display: inline-block;
    vertical-align: top;
}

.esk-partners-protocols h4,
.esk-partners-protocols h5{
    font-weight: 400;
    text-align: left;
    color: #bbb;
}

.esk-partners-protocols h5{
    font-size: 1em;
    margin-top: 15px;
    padding-right: 20px;
}

.esk-partners-protocols ul{
    margin: 0;
    text-align: left;
}


.esk-partners-protocols .subsection:first-child li{
    margin: 0;
    text-align: left;
    margin: 0 10px;
}

.esk-partners-protocols li{
    width: 150px;
    text-align: left;
    font-size: .7rem;
    vertical-align: top;
}

.esk-partners-protocols li:last-child img{
    max-width: 150px;
}

.esk-partners-protocols li img{
    vertical-align: top;
    opacity: .6;
}

.esk-partners-protocols li:hover img{
    opacity: 1;
}


/* @end */

/* @group Misc */

.esk-toggle-btn{
    display: none;
}

@keyframes eskfill {
    from {
        width: 1%;
    }
    to{
        width: 100%;
    }
}

.esk-countdown-bar{
    
    display: block;
    height: 2px;
    background-color: #fedc52;
    animation: eskfill 5s ease-in-out 0s 1;
    
}

/* @end */

@media screen and (min-width: 1280px) {

    .esk .esk-what .section-main{
        background: 
            url(../images/backline.png) 33.4% 20% repeat-y,
            url(../images/backline.png) 65.9% 10% repeat-y;
        background-size: 2px;
    }

    .esk-what-block {
        width: 33%;
    }
    
    
    .esk-what-block:nth-child(-n+3){
        border-top: none;
    }
    
    .esk-section-footer .esk-section-inner{
        max-width: 80%;
    }
    
    .esk .esk-what .section-main{
        padding-bottom: 50px;
        padding-top: 50px;
        margin-top: 50px;
    }
    
    .esk .esk-what .esk-section-footer{
        padding-top: 0;
    }
    
    .grid-item,
    .grid-sizer {
      width: 12.5%;
    }
    
    .learn-more-active{
        width: 75%;
    }
    .grid-item:not(.learn-more-active) .esk-who-person-name h3{
        font-size: 1.4rem;
    }
    .grid-item:not(.learn-more-active) .esk-who-person-name{
        font-size: .7em;
    }
}

@media screen and (min-width: 960px) {
    .esk-partners-protocols .subsection:first-child{
        margin: 0 80px 0 0;
    }
}

@media screen and (max-width: 800px) {
    
    #navigation ul li a{
        padding: 15px 10px;
    }
    .scrolled #navigation li a.is-active-link{
    
    }
    
    .grid-item,
    .grid-sizer {
      width: 33.33%;
    }
    
    .learn-more-active{
        width: 100%;
    }
    
    .ccm-edit-mode .esk-who-person-info,
    .learn-more-active .esk-who-person-info{
        width: 33.33%;
        float: left;
        height: 100%;
    }
    
    .ccm-edit-mode .esk-who-person-bio,
    .learn-more-active .esk-who-person-bio{
        width: 66.66%;
    }
    
    .esk-partners-protocols h4{
        text-align: center;
        
    }
}

@media screen and (max-width: 767px) {
   
    .esk-toggle-btn{
        display: block;
        position: relative;
        right: 0;
    }
    
    .esk-toggle-btn.esk-toggled-btn::before{
        content: "x ————";
        position: absolute;
        right: 10px;
        display: block;
        color: white;
    }
    
    html:not(.scrolled) .esk-toggle-btn{
        display: none;
    }
    
    #navigation{
        transition: 
            opacity .3s ease-in-out .2s,
            height .2s ease-in-out 0s;
    }
    
    #navigation.esk-toggled{
        height: 100vh;
    }
    
    html:not(.scrolled) #navigation{
        height: auto;
        padding-top: 20px;
        position: relative;
    }
    
    .esk-nav-ghost{
        position: absolute;
    }
    
    .scrolled .esk-nav-ghost{
        position: relative;
    }
    
    .scrolled #navigation .esk-toggle-target{
        transition: opacity .3s ease-in-out .1s;
        position: absolute;
        width: 100%;
        left: 0;
        height: calc(100vh - 180px);
        top: 90px;
    }
    
    html.scrolled #navigation:not(.esk-toggled) .esk-toggle-target,
    .esk-switch-language:not(.esk-mobile-toggled) {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        pointer-events: none;
        opacity: 0;
        transition: opacity .3s ease-in-out .3s;
    }
    
    html.scrolled:not(.ccm-edit-mode) .esk .esk-switch-language.esk-mobile-toggled{
        bottom: 0;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        transition: opacity .3s ease-in-out .3s;
    }
    
    html.scrolled:not(.ccm-edit-mode) .esk .esk-switch-language.esk-mobile-toggled a{
        display: inline-block;
        box-sizing: border-box;
        border-bottom: none;
        width: 40px;
    }
    .esk-switch-language.esk-mobile-toggled a:not(:last-child){
        margin-right: 15px;
    }
    .flag-icon{
        background-position: left;
    }
    
    .esk-switch-language span{
        display: none!important;
    }
    
    #navigation ul{
        padding: 0;
        height: calc(100% - 90px);
    }
    
    html:not(.scrolled) #navigation {
        height: 90px;
    }
    
    main article {
        /*transition: margin-top .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;*/
    }
    
    html:not(.scrolled) main article {
        margin-top: 250px;
    }

    
    .scrolled main article {
        margin-top: 340px;
        
    }
    
    #navigation.esk-toggled .esk-toggle-target li,
    html:not(.scrolled) #navigation .esk-toggle-target li{
        display: block;
        margin: 0 0 20px;
        height: 20%;
        padding-right: 0;
    }
    
    #navigation.esk-toggled .esk-toggle-target li a{
        top: 50%;
        position: relative;
        transform: translateY(-50%);
        width: auto;
        display: inline-block;
        padding: 20px 30px;
    }
    
    #navigation .esk-toggle-btn{
        text-align: right;
        padding-right: 20px;
    }
    
    .esk .esk-what .section-main{
        background: none;
        background-size: 2px;
    }
    
    .esk-section:not(.esk-what) .esk-section-header{
        padding: 0 20px;
    }
    
    .grid-item,
    .grid-sizer {
      width: 50%;
    }
    
    .esk-form,
    .esk-footer .content,
    .esk-what-block,
    .learn-more-active,
    .esk-contacts li.esk-map,
    .esk-contacts li.content,
    .esk-section-header .content p,
    .esk .esk-main .content p,
    .esk-section-footer .esk-section-inner,
    .ccm-edit-mode .esk-who-person-info,
    .learn-more-active .esk-who-person-info {
        width: 100%;
    }
    
    .esk-what-block:nth-child(2){
        border-top: 2px solid #331C54;
    }
    
    .ccm-edit-mode .esk-who-person-bio,
    .learn-more-active .esk-who-person-bio{
        width: 100%;
    }
    
    .esk .esk-what .esk-section-footer .esk-drag-container{
        max-width: 90%;
    }
    
    .esk-section{
        padding: 0;
    }
    .grid-item:not(.learn-more-active) .esk-who-person-name{
        font-size: .8em;
    }
    .grid-item:not(.learn-more-active) .esk-who-person-name h3{
        font-size: 1.4rem;
    }
    
    .client-list-item{
        width: 30%;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 50px;
    }
    
    .esk-contacts .section-main{
        max-width: 100%;
    }
    
    .esk-contacts .section-main .esk-map{
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .esk-form {
        column-count: 1;
    }
    
    .esk-partners-protocols h4,
    .esk-partners-protocols h5
    {
        text-align: center;
    }
    .esk-footer-section.esk-partners-protocols {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .esk-partners-protocols ul{
        text-align: center;
    }
    .esk-partners-protocols li{
        width: auto;
        min-width: 20%;
        max-width: 30%;
        text-align: left;
        text-align: center!important;
        font-size: .7rem;
        vertical-align: top;
    }
    
    .esk-partners-protocols li img{
        max-width: 90%;
    }
    
    .esk-partners-protocols li:last-child img{
        max-width: 100%;
    }
    .esk .esk-slogan h2{
        
    }
    .esk-slogan li{
        font-size: 1em;
    }
    .esk .esk-slogan span{
        display: block;
    }
    
    
    
}

/* @group Helpers */

.hidden {
    display: none;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    pointer-events: none;
    opacity: 0;
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}
.esk-loader {
    transition: all 1s cubic-bezier(.28,.06,.3,.99);
}
.esk-loading {
    opacity: 0;
    transition: all 1s cubic-bezier(.28,.06,.3,.99);
}

.esk-contacts .content,
.group:after{
    content: "";
    display: table;
    clear: both;
}

/* @end */

@media print {
    *, *:before, *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    
    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "";
    }
    
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    
    thead {
        display: table-header-group;
    }
    
    tr,
    img {
        page-break-inside: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
    
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    
    h2,
    h3 {
        page-break-after: avoid;
    }
}