@charset "UTF-8";


/* CUSTOM FONTS */
@font-face {
    font-family: 'gotham';
    src: url('/gotham/gothamgrbold.eot');
    src: url('/gotham/gothamgrbold.eot?#iefix') format('embedded-opentype'),
         url('/gotham/gothamgrbold.woff') format('woff'),
         url('/gotham/gothamgrbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('/gotham/Alt_GothamGRLight.eot');
    src: url('/gotham/Alt_GothamGRLight.eot?#iefix') format('embedded-opentype'),
         url('/gotham/Alt_GothamGRLight.woff') format('woff'),
         url('/gotham/Alt_GothamGRLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('/gotham/gothamgrmedium.eot');
    src: url('/gotham/gothamgrmedium.eot?#iefix') format('embedded-opentype'),
         url('/gotham/gothamgrmedium.woff') format('woff'),
         url('/gotham/gothamgrmedium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('/gotham/Alt_GothamGRBlack.eot');
    src: url('/gotham/Alt_GothamGRBlack.eot?#iefix') format('embedded-opentype'),
         url('/gotham/Alt_GothamGRBlack.woff') format('woff'),
         url('/gotham/Alt_GothamGRBlack.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('/gotham/Alt_GothamGRUltra.eot');
    src: url('/gotham/Alt_GothamGRUltra.eot?#iefix') format('embedded-opentype'),
         url('/gotham/Alt_GothamGRUltra.woff') format('woff'),
         url('/gotham/Alt_GothamGRUltra.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'gotham';
    src: url('/gotham/gothamgrbook.eot');
    src: url('/gotham/gothamgrbook.eot?#iefix') format('embedded-opentype'),
         url('/gotham/gothamgrbook.woff') format('woff'),
         url('/gotham/gothamgrbook.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'verdeine';    
    src: url('/verdeine/verdeine.woff') format('woff'),
         url('/verdeine/verdeine.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* Reset CSS
 * --------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
     color: @white;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    line-height: 1em;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

a:visited, a:link{
    
    color: inherit;
}

/* Reset CSS END
 * --------------------------------------- */


/* Theme Colors*/

@clb  : #000;
@cldg : #1f2325;
@clw  : #fff;
@bgcl : #fff;
@purple : #6d58c4;
@green  : #39b54a;
@purp1 : #382869;
@purp2 : #3e2f6d;
@purp3 : #2b1f50;
@purp4 : #4d3e78;
@purp15 : #382968;
@red : #bd2027;
@gold : #c79b44;
@blue : #63a3bc;
@white:#ffffff;
@ngreen : #239557;

@keyframes scroll  {
    100% { background-position: -8000px; }
}

@keyframes loader  {
    0% { background-position: 0px; }
    100% { background-position: -30800px; }
}

@keyframes loader2  {
    0% { background-position: 0px; }
    100% { background-position: -52800px; }
}

.animation(@var){
    -webkit-animation: @var;
    -moz-animation: @var;
    -ms-animation: @var;
    -o-animation: @var;
    animation: @var;
}

.transform(@var){
    -webkit-transform: @var;
    -moz-transform: @var;
    -ms-transform: @var;
    -o-transform: @var;
    transform: @var;
}

.transform-origin(@var){
    -webkit-transform-origin: @var;
    -moz-transform-origin: @var;
    -ms-transform-origin: @var;
    -o-transform-origin: @var;
    transform-origin: @var
}

.transition(@var){
    -webkit-transition: @var;
    -moz-transition: @var;
    -ms-transition: @var;
    -o-transition: @var;
    transition: @var;
}

.writing-mode(@var){
    -webkit-writing-mode: @var;
    -moz-writing-mode: @var;
    -ms-writing-mode: @var;
    -o-writing-mode: @var;
    writing-mode: @var;
}

.flex(){
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.flexi(@var){
    -webkit-flex: @var;
    -moz-flex: @var;
    -ms-flex: @var;
    -o-flex: @var;
    flex: @var;
}

.flex-grow(@var){
    -webkit-flex-grow: @var;
    -moz-flex-grow: @var;
    -ms-flex-grow: @var;
    -o-flex-grow: @var;
    flex-grow: @var;
}

.justify-content(@var){
    -webkit-justify-content: @var;
    -moz-justify-content: @var;
    -ms-justify-content: @var;
    -o-justify-content: @var;
    justify-content: @var;
}

.align-items(@var){
    -webkit-align-items: @var;
    -moz-align-items: @var;
    -ms-align-items: @var;
    -o-align-items: @var;
    align-items: @var;
}

.flex-direction(@var){
    -webkit-flex-direction: @var;
    -moz-flex-direction: @var;
    -ms-flex-direction: @var;
    -o-flex-direction: @var;
    flex-direction: @var;
}

.perspective(@var){
    -webkit-perspective: @var;
    -moz-perspective: @var;
    -ms-perspective: @var;
    -o-perspective: @var;
    perspective: @var;
}

.transform-style(@var){
    -webkit-transform-style: @var;
    -moz-transform-style: @var;
    -ms-transform-style: @var;
    -o-transform-style: @var;
    transform-style: @var;
}

.backface-visibility(@var){
    -webkit-backface-visibility: @var;
    -moz-backface-visibility: @var;
    -ms-backface-visibility: @var;
    -o-backface-visibility: @var;
    backface-visibility: @var;
}

.filter(@var){
   -webkit-filter: @var;
    -moz-filter: @var;
    -ms-filter: @var;
    -o-filter: @var;
    filter: @var; 
}

/* STYLING */

* {
  box-sizing: border-box;  
}

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img{
    -webkit-user-drag: none;
    user-drag: none; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

html{
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

body{
    font-family: gotham, sans-serif;
    //font-family: gotham, 'Open Sans', sans-serif;
    font-size: 14px;
    color: @clw;
    position: relative;
    
    @media all{
        @media (max-width:1280px){
            font-size: 12px;
        }
    }
}

body.clip{
    overflow: hidden;
}

.containerText p{
    color: #ffffff;
    font-size: 0.95em;
}

article p{
    color:#ffffff;
}
.emfa{
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.1em;
}

.emfa2{
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.1em;
}

.emfa3{
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.2em;
}

.emfa4{
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.1em;
}

.emfa5{
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.1em;
}

.emfa6{
    font-size: 3.5em;
    font-weight: 900;
    line-height: 1em;
}

h1.emfa, h2.emfa, h3.emfa, h1.emfa2, h2.emfa2, h3.emfa2,
h1.emfa4, h2.emfa4, h3.emfa4, h1.emfa3, h2.emfa3, h3.emfa3{
    font-weight: 400;
}

.subemfa{
    font-size: 1.2em;
}

.subemfa2{
    font-size: 1.1em;
}

.subemfa3{
    font-size: 1.5em;
}


.green{
    color: @green;
}

.gold{
    color: @gold;
}

.space1{
    margin-bottom: 6vw!important;
}

.space2{
    margin-bottom: 3vw!important;
}

.mrg0{
    margin-bottom: -10px!important;
}

.mrg1{
    margin-bottom: 10px!important;
}

.mrg2{
    margin-bottom: 20px!important;
}

.mrg3{
    margin-bottom: 30px!important;
}

.mrg4{
    margin-bottom: 40px!important;
}

// General

.backTrans1(){
    .transition(~'transform 1s cubic-bezier(.435,.01,.135,1), opacity 1s cubic-bezier(.435,.01,.135,1)');
}

.backTrans12(){
    .transition(~'transform 1s cubic-bezier(.435,.01,.135,1) 0.6s, opacity 1s cubic-bezier(.435,.01,.135,1) 0.5s');
}


.backTrans2(){
    .transition(~'transform 2.05s cubic-bezier(.435,.01,.135,1), opacity 1.35s cubic-bezier(.435,.01,.135,1)');
}

.backTrans22(){
    .transition(~'transform 3.05s cubic-bezier(.435,.01,.135,1) 0.6s, opacity 2.35s cubic-bezier(.435,.01,.135,1) 0.5s');
}

.textAnim1(){
    .transition(~'transform 0.64s cubic-bezier(.435,.01,.135,1), opacity 0.64s cubic-bezier(.435,.01,.135,1)');
}

.textAnim12(){
    .transition(~'transform 0.95s cubic-bezier(.435,.01,.135,1) 1s, opacity 2s cubic-bezier(.435,.01,.135,1) 0.687s');
}

.textAnim2(){
    .transition(~'transform 0.64s cubic-bezier(.435,.01,.135,1), opacity 0.64s cubic-bezier(.435,.01,.135,1)');
}

.textAnim22(){
    .transition(~'transform 0.95s cubic-bezier(.435,.01,.135,1) 1.8s, opacity 2s cubic-bezier(.435,.01,.135,1) 1.77s');
}

h1{
    font-size: 3em;
    font-weight: 700;
    line-height: 1.2em;
}

// Base Classes
.row{
width: 70%;
height: 100%;
margin: 0 auto;
}

.row:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

.col{
    float: left;
    position: relative;
}
.col1{
    width: 100%;
}

.col2{
    width: 50%;
}

.col3{
    width: 33.33%;
}

.col10{
    width: 16%;
}

.col20{
    width: 20%;
}

.col30{
    width: 30%;
}

.col40{
    width: 40%;
}

.col50{
    width: 50%;
}

.col60{
    width: 60%;
}

.col70{
    width: 70%;
}

.col80{
    width: 80%;
}

.colWidth{
    width: 1600px;
    margin: auto;
    max-width: 100%;
    height: 100%;
}

.colWidth2{
    margin: auto;
    max-width: 100%;
    height: 100%;
}

.pd1{
    padding-top: 4vw;
}

.pd2{
    padding-top: 8vw;
}

.pd3{
    padding-top: 12vw;
}

a.highGreen{
    color: @green;
    text-decoration: underline;
}


#loader{
    
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: @clw;
    z-index: 50;
    will-change: transform;
    top: 0;
    left: 0;
    .transform(translate(0%,0%));
    .flex;
    //.justify-content(center);
    //.align-items(center);
    display: none;
    
    & > div{
        display: block;
        margin: auto;
        width: 600px;
        height: 151px;
        background-image: url(/images/praxia_loader_600-min.png);
        //background-image: url(/images/loader_sprite-min.png);
        //.animation(loader 2.2s steps(88) alternate infinite forwards);
        .animation(loader2 2.2s steps(88) 1 forwards);
    }
}

#loader.ready{
    .transform(translate(0%,-100%));
    .transition(transform 0.65s cubic-bezier(.435,.01,.135,1) 0.1s);
}

#exit{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    background-color: @clw;
    z-index: 50;
    will-change: transform;
    .transform(translate(0%,0%));
}

#exit.ready{
    .transform(translate(0%,-100%));
    .transition(transform 0.65s cubic-bezier(.435,.01,.135,1) 0.1s);
}

.styleList1{
    list-style: none;
    padding-left: 64px;
    li{
        position: relative;
        margin-bottom: 25px;
        
        .num{
            position: absolute;
            display: block;
            width: 44px;
            height: 44px;
            padding: 8px;
            padding-top: 10px;
            line-height: 22px;
            font-size: 20px;
            right: 100%;
            border: 1px solid @green;
            border-radius: 100%;
            margin-right: 20px;
            text-align: center;
        }
        
        .line{
            position: absolute;
            display: block;
            width: 30px;
            height: 1px;
            top: 13px;
            right: 100%;
            background: @green;
            margin-right: 30px;
        }
    }
}

// Others

#mainWrap{
    width: 100%;
    position: relative;
    //will-change: transform;
    //.transform(translate(0,60px));
}

#header{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 5px 40px;
    background: #bd2027;
    // background: transparent;
    font-size: 1.1em;
    
    .headerInner{
        position: relative;
        height: 100%;
        width: 100%;
        
        
        .menuLogo{
            height: 100%;
            a {
                height: 100%;
                display: inline-block;
            }
            img {
                max-height: 100%;
            }
          
        }
        
    }
}

.maskLeft, .maskTop, .maskRight, .maskBottom{
    position: absolute;
    display: block;
    background: @cldg;
    z-index: 10;
}

.maskLeft{
    top: 0;
    left: 0;
    width: 2.6vw;
    min-width: 40px;
    height: 100vh;
    will-change: transform;
    .transform(translate(-100%,0));
    .backTrans1;
}

.onTransition .maskLeft{
    .transform(translate(0%,0));
}

.maskRight{
    top: 0;
    right: 0;
    width: 2.6vw;
    min-width: 40px;
    height: 100vh;
    will-change: transform;
    .transform(translate(100%,0));
    .backTrans1;
}

.onTransition .maskRight{
    .transform(translate(0%,0));
}

.maskTop{
    top: 0;
    left: 0;
    width: 100vw;
    height: 2.6vw;
    min-height: 40px;
    will-change: transform;
    .transform(translate(0,-100%));
    .backTrans1;
}

.onTransition .maskTop{
    .transform(translate(0,0%));
}

.maskBottom{
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 2.6vw;
    min-height: 40px;
    will-change: transform;
    .transform(translate(0,100%));
    .backTrans1;
}

.onTransition .maskBottom{
    .transform(translate(0,0%));
}



#rightBar{
    position: fixed;
    padding: 120px 40px 40px 0;
    right: 35px;
    top: 0;
    height: 100%;
    z-index: 100;
    
    @media all{
        @media (max-width:1280px){
             padding: 120px 20px 40px 0;
        }
        @media (max-height: 600px){
             padding: 100px 20px 40px 0;
        }
    }
    
    .rightBarInner{
        
        .bigLine{
            position: relative;
            height: 200px;
            width: 2px;
            background: @white;
            margin: auto;
            margin-bottom: 10px;
            margin-top: 25px;
            overflow: hidden;
        }
        
        .bigLine:after{
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 1px;
            top: 0%;
            left: 0;
            opacity: 0;
            .transition(opacity 0.22s ease-out);
            background: @white;
        }
        
        .active.bigLine:after{
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 1px;
            top: 0%;
            left: 0;
            opacity: 1;
            background: @white;
        }
        
        .active.barBullet {
            .theBullet{
                background: url("../images/snowflake-navigation.png") no-repeat 0 0;
                background-size: cover;
            }
            .theText{
                visibility: visible;
                opacity: 1;
                /*right: -100%;*/
                .transition(~'opacity 0.3s ease-out 0s, visibility 0s linear 0s, right 0.3s ease-out 0s');
            }
        }
        
        .barBullet{
            position: relative;
            cursor: pointer;
            
            .theBullet{
                position: relative;
                background: url("../images/snowflake-navigation.png") no-repeat 0 0;
                background-size: cover;
                width: 20px;
                height: 20px;
                border-radius: 100%;
                margin-bottom: 10px;
                cursor: pointer;
                z-index: 20;
                .transition(~'background 0.22s ease-out 0.05s');
            }
            
            
            
            .theText{
                pointer-events: none;
                user-select: none;
                position: absolute;
                visibility: none;
                cursor: pointer;
                opacity: 0;
                right: -100%;
                padding-right: 75px;
                top: 15px;
                z-index: 10;
                background: transparent;
                padding: 10px 10px 10px 20px;
                font-size: 0.72rem;
                line-height: 1.5rem;
                color: @white;
                .transition(~'opacity 0.3s ease-out 0s, visibility 0s linear 0.3s, right 0.3s ease-out 0s');
                width:125px;
                left:-62.5px;
                text-align: center;
                color:@white;
                font-weight: bold;
                // font-family: 'verdeine';
                font-size: 10px;
                text-transform: uppercase;
                
            }
        }
        
        .barBullet:hover{
            
            .theBullet{
                background: url("../images/snowflake-navigation.png") no-repeat 0 0;
                background-size: cover;
            }
            
            .theText{
                visibility: visible;
                opacity: 1;
                /*right: -100%;*/
                .transition(~'opacity 0.3s ease-out 0s, visibility 0s linear 0s, right 0.3s ease-out 0s');
            }
        }
        
        .smallLine{
            position: relative;
            height: 28px;
            width: 2px;
            background: @white;
            margin: auto;
            margin-bottom: 10px;
            overflow: hidden;
            margin-top: 25px;
            
            @media all{
                @media (max-height: 800px){
                    height: 20px;
                }
                @media (max-height: 700px){
                    height: 20px;
                }
                @media (max-height: 600px){
                    height: 20px;
                }
            }
        }
        
        .smallLine:after{
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 1px;
            top: 0%;
            left: 0;
            background: @white;
            opacity: 0;
            .transition(opacity 0.22s ease-out);
        }
        
        .active.smallLine:after{
            content: "";
            display: block;
            position: absolute;
            height: 100%;
            width: 1px;
            top: 0%;
            left: 0;
            opacity: 1;
            background: @white;
        }
        
    }
    
}

#homeSlide{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 80px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: @clb;
    z-index: 0;
    will-change: transform;
    //.transform(translate(0,60px));
    font-size: 1.3em;
    
    @media all{
        @media (max-width: 1440px){
            font-size: 1.2em;
        }
        @media (max-width: 1280px){
            font-size: 1.2em;
        }
        @media (max-height: 700px){
            font-size: 1em;
        }
    }
    
    svg g{
        display: block!important;
    }
    
    .mouse{
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-bottom: 10px;
        pointer-events: none;
        .textAnim1();
        opacity: 0;
        will-change: opacity;
        
        img{
            display: block;
            margin: auto;
        }
        
        div{
            display: block;
            margin: auto;
            width: 80px;
            height: 80px;
            background-image: url(/images/scroll_down4.png);
            .animation(scroll 4s steps(100) infinite);
        }
    }
    
    .mouse.active{
        opacity: 1;
    }
    
    #homeSlideMoving{ 
        position: relative;
        width: 100%;
        height: 100%;
        will-change: transform;
        .transform(translate(0,0%));
    }
    
    .slide{
        position: relative;
        will-change: transform, opacity;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: @clb;
        background-image: url(/images/logo.png);
        background-repeat: no-repeat;
        background-size: 150px;
        background-position: center center;
        
        
        
        .slideBackground{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            perspective: 100px;
            perspective-origin: center;
            transform-origin: center center;
            background-color: rgba(0,0,0,1);
            .transition(background-color 0.6s ease 0.1s);
            
            .backImg{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 0;
                width: 100%;
                height: 100%;
                will-change: transform, opacity;
                background-position: center center;
                background-size: cover;
                opacity: 1;
                transform-origin: center center;
                .backTrans2;
                .transform(translate3d(0,0,0));
                .transform(translate3d(0,0,4px));
                opacity: 0;
            }
            
            .backImg2{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 0;
                width: 100%;
                height: 100%;
                will-change: transform, opacity;
                background-position: center center;
                background-size: cover;
                opacity: 1;
                transform-origin: center center;
                //.backTrans2;
                .transform(translate3d(0,0,0));
                .transform(translate3d(0,0,4px));
                opacity: 0;
                
                .transition(~'opacity 1.35s cubic-bezier(.435,.01,.135,1)');
                //opacity: 0;
            }
            
        }
        
        .slideContent{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            width: 100%;
            height: 100%;
            padding: 40px;
            padding-right: 80px!important;
            padding-left:80px!important;
            
            
            @media all{
                @media (max-width:1280px){
                    padding: 20px;
                    padding-right: 60px!important;
                    padding-left:60px!important;
                }
            }
            
            .slideContentInner{
                position: relative;
                width: 100%;
                height: 100%;
            }
            
            h1{
                font-size: 2.6em;
            }
        }
        
        
    }
    
    .active.slide{
        .slideBackground{
            
            .backImg,{
                .backTrans22;
                .transform(translate3d(0,0,0));
                opacity: 0.9;
            }
            
            .backImg2{
                .transition(~'opacity 2.35s cubic-bezier(.435,.01,.135,1) 0.5s');
                opacity: 1;
            }
        }
    }
}
.epistoles-row{
    display:flex;
}
.epistoles-row:after{
    display:none;
}
.downContent .epistoles-row img {
    max-width: 150px;
    width: 100%;
    padding: 5px;
    margin-right:0;
}

.onTransition #homeSlide .slide .slideBackground{
    .transition(background-color 1.2s ease 0s);
    background-color: rgba(0,0,0,0.3);
}

.textAnims(){
    .backTrans1;
}

.greenline1{
    display: block;
    position: absolute;
    background: @green;
    .transform(rotate(35deg));
    width: 3px;
    height: 100px;
    top: 30%;
    left: -5%;
}

.greenline2{
    display: block;
    position: absolute;
    background: @green;
    .transform(rotate(45deg));
    width: 3px;
    height: 110px;
    top: 96%;
    left: 42%;
}

.greenline3{
    display: block;
    position: absolute;
    background: @green;
    .transform(rotate(35deg));
    width: 3px;
    height: 100px;
    top: -100%;
    left: -15%;
}

.greenline4{
    display: block;
    position: absolute;
    background: @green;
    .transform(rotate(35deg));
    width: 2px;
    height: 67px;
    top: 65%;
    left: 109%;
}

.greenline5 {
    display: block;
    position: absolute;
    background: @green;
    .transform(rotate(45deg));
    width: 3px;
    height: 110px;
    top: 84%;
    left: 47%;
}

.liner{
    width: 200px;
    height: 1px;
    background: @green;
}

.liner2{
    width: 200px;
    height: 1px;
    background: @clw;
    opacity: 0.5;
}

.liner3{
    width: 100px;
    height: 1px;
    background: @clw;
    opacity: 0.5;
    margin-top: 30px;
    margin-bottom: 30px;
}


// Slider Elements

.alignFix(){
    @media all {
        @media (max-width: 1024px){
            margin-left: 0;
        }
    }
}

.slide1{
    .slideContentInner{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .videocover {
        cursor: pointer;
    }
    .slideContentInner .conten{
        // position: absolute;
        width: 100%;
        top: 0%; /*was bottom 20%*/
        left: 0;
        opacity: 0;
        will-change: transform, opacity;
        text-align: center;
        
        
        .transform(translate(0px,8px));
        .textAnim1;
        
        img {
            cursor: pointer;
/*            width: 120px;*/
          
          @media all {
              @media (max-height: 768px){
                  width: 100px;
              }
          }
        }
    }
}

.active.slide1{
    .slideContentInner .conten{
        opacity: 1;
        .transform(translate(0px,0px));
        .textAnim12;
    }
}

.manifestoAnim{
    padding-bottom: 15%;
}

.mellonAnim{
    padding-bottom: 15%;
}

.omadaAnim{
    padding-bottom: 15%;
}

.pelatesAnim{
    .transform(scale(2.5));
}

.pelatesAnim.pelatesAnimEN {
    .transform(scale(1.5));
    transform-origin: center;
    left: -14%;
    top: -43px;
    position: relative;
}



.ependisisAnim{
    padding-bottom: 15%;
}

.containerImg{
    width: 100%;
    height: 100%;
    opacity: 0;
    will-change: transform, opacity;
    .transform(translate(0px,8px));
    .textAnim1;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    
    .flex;
    /*.justify-content(center);*/
    /*.align-items(center);*/
    
    & > div{
        height: 100%;
    }
    
    img{
        max-width: 90%;
        max-height: 90%;
    }
    
    svg{
        min-height: 100%;
    }
}

.santaVid{
    cursor: pointer;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
     user-select: all;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: all;
}

.newContent {
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 20px;

    
    .row{
        height: auto;
    }
}

.center {
	text-align: center;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.cover {
  width: 100%;
}

img.cover.third {
  float:left;
  width: 33%;
  padding: 0 5px 0 0;
}

.multiimage {
  margin-bottom: 20px;
}

.multiimage::before, .multiimage::after {
  clear: both;
  content: "";
  display: block;
}

.downContent {
    height: auto!important;
    
    img {
        cursor: pointer;
        pointer-events: all;
        max-width: 150px;
        width: 45%;
        margin-right: 20px;
        margin-left:0;
			
			@media all {
        @media (max-width: 1280px){
           max-width: 100px;
        }
    	}
    }
    
    img:hover {
        .transform(scale(0.98));
    }
}

.active .containerImg{
    opacity: 1;
    .transform(translate(0px,0px));
    .textAnim12;
}

.containerText{
    opacity: 0;
    will-change: transform, opacity;
    position: relative;
    .transform(translate(0px,8px));
    .textAnim2;
    p{
        margin-bottom: 20px;
    }
}

.sompad{
    padding-bottom: 65px;
    @media all{
        @media (max-width: 1440px){
            padding-bottom: 0px;
            padding-top: 10px;
        }
        @media (max-width: 1280px){
            padding-top: 0px;
            padding-bottom: 5px;
        }
    }
}

.active .containerText{
    opacity: 1;
    .transform(translate(0px,0px));
    .textAnim22;
}








.flexMid{
    height: 100%;
    .flex;
    .justify-content(center);
    .align-items(center);
    
    & > div{
        .flexi(1 1 1);
    }
}

.rowButton{
    width: 80%;
    display: block;
    position: relative;
    margin-top: 35px;
    
    .ctaButton{
        display: inline-block;
        text-align: right;
        position: relative;
        right: 0;
        color: @clw;
        font-size: 0.9em;
        margin-right: 50px;
        margin-top: 35px;
        
        a{
            display: block;
            padding: 15px 20px;
            border: 1px solid @clw;
            color: @clw;
            span{
                margin-left: 5px;
            }
        }
    }
}

.rowButton.right{
    text-align: right;
}



.cd-headline {
    font-weight: 800!important;
    span,b{
        font-weight: 800!important;
    }
}


.barFixer{
    position: relative;
    width: 100%;
    height: 1px;
}

.bar{
    position: relative;
    padding-right: 60px;
    top: 0;
    left: 0;
    width: 100%;
    
    .barInner{
        position: fixed;
        top: 152px;
        left: 0;
        width: 100%;
        padding-left: 60px;
        padding-right: 60px;
        //will-change: transform;
         //.transition(transform 0.3s ease-out 0s);
        
        @media all{
            @media (max-width: 1440px){
                top: 114px;
            }
        }
    }
}

.col20 .bar .barInner{
    width: 20%;
}

.col30 .bar .barInner{
    width: 30%;
}

.col40 .bar .barInner{
    width: 40%;
}

.col50 .bar .barInner{
    width: 50%;
}

.col60 .bar .barInner{
    width: 60%;
}

/*
.col40 .bar{
   width: 40%; 
}

.col50 .bar{
   width: 50%; 
}

.col60 .bar{
   width: 60%; 
}

*/

.whiteLine{
    width: 100%;
    height: 1px;
    background: @clw;
    opacity: 0.6;
}

#pageContainer{
    display: block;
    position: relative;
    top: 0;
    padding-top: 80px;
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-calc(~'100vh - 58px');
    min-height: -moz-calc(~'100vh - 58px');
    min-height: -ms-calc(~'100vh - 58px');
    min-height: -o-calc(~'100vh - 58px');
    min-height: calc(~'100vh - 58px');
    background-color: #000;
    background-image: url(/images/form-BACKGROUND.jpg);
    // background-size: cover;
    background-position: center top;
    z-index: 0;
    will-change: opacity;
    font-size: 1.3em;
    //.transform(translate(0,60px));
}

.purpPage{
    background: @purp1;
}

.workPage .extraImg{
    background-image:url(/images/work.jpg);
    background-size: cover;
    position: absolute;
    opacity: 0.3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 6;
}

#pageContainer.workPage{
    height: 100vh;
    height: -webkit-calc(100vh - 58px);
    height: -moz-calc(100vh - 58px);
    height: -ms-calc(100vh - 58px);
    height: -o-calc(100vh - 58px);
    height: calc(100vh - 58px);
}

.workPage .pageContent .midderWrap{
    opacity: 0;
    will-change: opacity,transform;
    .transform(translate(0,20px));
    .transition(~'transform 0.54s cubic-bezier(.435,.01,.135,1) 0.23s, opacity 0.44s cubic-bezier(.435,.01,.135,1) 0.45s');
}

.halfOpen .workPage .pageContent .midderWrap{
    opacity: 1;
    .transform(translate(0,0px));
}

.pageX{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    .flex;
    .justify-content(center);
    .align-items(center);
    padding-top: 80px;
    
    .xfxwrap{
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 100%;
        background-image: url(/images/xbg.png);
        background-repeat: no-repeat;
        opacity: 0.85;
        background-size: contain;
        background-position: left;
    }
}

.pageContent{
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    padding: 80px;
    
    @media all{
        @media (max-width: 1440px){
            padding: 40px;
            padding-bottom: 80px;
        }
    }
}

.midder{
    .flex;
    .justify-content(center);
    .align-items(center);
}

.forma{
    padding-left: 60px;
    width: 100%;
    color: #fff;
    
   @media all{
        @media (max-width: 1440px){
            padding-left: 10px;
        }
    }
    
    h2,.whiteLine,p{
        margin-bottom: 20px;
    }
    
    p.noMgBtm{
        margin-bottom: 0px;
    }
}

.noMgBtm{
    margin-bottom: 0px;
}

.formCol1{
    width: 33.33%;
    padding-right: 20px;
}

.formCol2{
    width: 66.66%;
    padding-right: 20px;
}

.formCol3{
    width: 100%;
    padding-right: 20px;
}

.forma{
    label{
        cursor: pointer;
        user-select: none;
        display: block;
        position: relative;
    }
    .row{
        margin-bottom: 45px;
    }
    
    .lbl{
        margin-bottom: 15px;
    }
    
    .ermsg{
        position: absolute;
        min-width: 100%;
        top: 100%;
        left: 0;
        display: none;
        padding-top: 5px;
        font-size: 1.15rem;
    }
    
    .withCheckBox{
        display: block;
        cursor: pointer;
    }
    
    .withCheckBox.checkin{
        color: @green;
        
        .box2{
            border: 1px solid @green;
        }
        
        .box1:after{
            background: @green;
        }
    }
    
    .faze1,.faze2{
        display: block;
    }
    
    .faze1.inactive,.faze2.inactive{
        display: none;
    }
    
    .withCheckBox:after{
        content: "";
        display: block;
        clear: both;
        width: 100%;
    }
    
    .withCheckBox .lbl{
        margin-top: 10px;
    }
    
    .withCheckBox .lbl.notop{
        margin-top: 0;
    }
    
    .box1{
        width: 40px;
        height: 40px;
        border: 1px solid @clw;
        border-radius: 100%;
    }
    
    .box1:after{
        content: "";
        display: block;
        width: 22px;
        height: 22px;
        position: absolute;
        top: 8px;
        left: 8px;
        border-radius: 100%;
        background: @clw;
    }
    
    .box2{
        width: 20px;
        height: 20px;
        border: 1px solid @clw;
    }
    
    .fx1280{
        @media all{
            @media (max-width: 1280px){
                max-width: 70%;
            }
        }
    }
    
    .withCheckBox .lbl{
        float: left;
    }
    
    .withCheckBox{
        .box1,.box2{
            float: left;
            margin-left: 15px;
            position: relative;
        }
    }
    
    .placeBottomRight{
        position: absolute;
        bottom: 0;
        left: 100%;
        width: 50%;
        p{
            margin-bottom: 0;
            font-size: 0.9em;
            text-align: center;
        }
    }
    
    input{
        background: rgba(255,255,255,0.1);
        border: none;
        padding: 10px;
        width: 100%;
        color: @clw;
        height: 60px;
        font-size: 1em;
        line-height: 1em;
        font-weight: 400;
        font-family: gotham, sans-serif;
    }
    
    input:focus{
        outline: 1px solid rgba(255,255,255,0.5);
    }
    
    
    
    input[type="checkbox"]{
        visibility: hidden;
        display: none;
    }
    
    input#submit{
        cursor: pointer;
    }
    
    
    textarea{
        display: block;
        width: 100%;
        height: 250px;
        padding: 10px;
        color: @clw;
        font-size: 1em;
        line-height: 1em;
        font-weight: 400;
        font-family: gotham, sans-serif;
        background: rgba(255,255,255,0.1);
        border: none;
        resize: none;
    }
    
    textarea:focus{
        outline: 1px solid rgba(255,255,255,0.5);;
    }
    
    .withSubmit{
        position: relative;
    }
}

.star{
    position: absolute;
    left: -20px;
    top: 5px;
}

.oroi{
    font-size: 0.9em;
    a{
        text-decoration: underline;
    }
    
    .withCheckBox{
        .box1,.box2{
            float: none;
            margin-top: 1px;
            margin-right: 20px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            
        }
        .lbl{
            float: none;
            display: block;
            padding-left: 40px;
        }
    }
}

.forma .correct {
    input, textarea{
        outline: 1px solid @green;
    }
}
    
.forma .wrong {
    input, textarea{
        outline: 1px solid @red;
    }
}


.forma .wrong .ermsg{
    display: block;
}

.extraStyleRow{
    position: relative;
    height: 250px;
    
    .txt{
        position: relative;
        background: @gold;
        padding: 20px 20px 20px 0;
        display: inline-block;
        float: left;
        font-size: 0.8em;
        margin-top: 10px;
        z-index: 5;
        div{
            opacity: 0.8;
        }
    }
    
    .sbmBt{
        position: absolute;
        background: @gold;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 5;        
        margin-top: -10px;
    }
    
    #submit{
        background: @gold;
        cursor: pointer;
    }
    
    #submit[disabled="disabled"]{
        opacity: 1;
        background-color: #6FB856;
        color: rgba(255,255,255,0);
        background-image: url(/images/ajax-loader.gif);
        background-repeat: no-repeat;
        background-position: center center;
    }
    
     #submit[disabled="disabled"]:hover{
         outline: 0px;
         cursor: not-allowed;
     }
    
    .g-recaptcha{
        width: 100%!important;
        & > *{
            width: 100%!important;
        }
        
        iframe{
            width: 100%!important;
        }
    }
    
    .extraStyleRowLine{
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 1px;
        background: @clw;
        opacity: 0.6;
        top: 40px;
    }
}

.extraStyleRow:after{
    content: "";
    display: block;
    clear: both;
}



.button{
    display: inline-block;
    border: 3px solid @clw;
    cursor: pointer;
    .transition(all 0.4s ease);
    /*border: 1px solid @gold;*/
    color:@clw;
    font-weight:bold;
    
    div{
        span{
            padding: 18px 15px 18px 18px;
            font-size: 1.15rem;
            line-height: 1rem;
            vertical-align: middle;
            display: inline-block;
            .transition(color 0.4s ease);
            font-weight:bold;
            
            i{
                margin-left: 5px;
            }
        }
        
        img{
            display: inline-block;
            vertical-align: middle;
            margin-top: -2px;
        }
    }
}

.button:hover{
    /*border: 1px solid @gold;*/
    background: #fff;
    color: @red  !important;
}

.button:hover div span{
    color: @red  !important;
}
.button.floatright{
    margin-top: 20px;
    float:right;
}

@media print {
    h1,h2,h3,h4,p,a{
        color: @clb;
    }
}

.terms{
    p{
        margin-bottom: 20px;
    }
    
    .intro{
        padding: 0px 20px 0 20px;
    }
}

.accordion{
    position: relative;
    display: block;
    width: 100%;
    
    .accordionLine{
        margin-bottom: 10px;
    }
    
    .accordionLine.active{
        .accordionHeader{
            h2{
                color: @green;
            }
        }
        
        .cross:after{
            .transform(rotate(0deg));
        }
    }
    
    .accordionHeader:hover{
        h2{
            color: @green;
        }
    }
    
    .accordionHeader{
        background: @purp4;
        padding: 20px;
        position: relative;
        cursor: pointer;
        
        h2{
            color: @clw;
            font-weight: 800;
            font-size: 1.3em;
            line-height: 1.1em;
            padding-right: 60px;
            .transition(color 0.4s ease);
        }
    }
    
    .cross{
        width: 23px;
        height: 23px;
        border: 1px solid @clw;
        border-radius: 100%;
        position: absolute;
        right: 20px;
        top: 50%;
        .transform(translate(0,-50%));
    }
    
    .cross:after, .cross:before{
        content: "";
        display: block;
        position: absolute;
        width: 11px;
        height: 1px;
        left: 5px;
        top: 10px;
        background: @clw;
        .transition(transform 0.4s ease);
    }
    
    .cross:after{
        .transform(rotate(90deg));
    }
    
    .accordionContent{
        padding: 20px;
        display: none;
        
        a{
            color: @green;
            text-decoration: underline;
        }
        
        p,h3,h4,ul,.box,.whiteLine{
            margin-bottom: 20px;
        }
        
        h3{
            font-size: 1.2em;
            font-weight: 700;
        }
        
        h4{
            font-weight: 700;
        }
        
        .box{
            padding: 20px;
            background: @purp3;
            p:last-child, ul:last-child, li:last-child{
                margin-bottom: 0;
            }
        }
        
        .box:last-child{
            margin-bottom: 0;
        }
        
        ul{
            
            li{
                position: relative;
                margin-bottom: 10px;
                padding-left: 30px;
            }
            
            li:before{
                content: "";
                display: block;
                position: absolute;
                left: 0;
                width: 5px;
                height: 1px;
                background: @green;
                top: 10px;
            }
            
        }
        
        & > p:last-child{
            margin-bottom: 0;
        }
    }
}

#cookieBar{
    position: fixed;
    display: none;
    padding: 20px;
    background: rgba(0,0,0,0.6);
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 88px;
    
    .cookieBarInner{
        max-width: 1280px;
        margin: 0 auto;
        position: relative;
        
        p{
            position: relative;
            padding-right: 200px;
            font-size: 1.1em;
            
            a{
                color: @green;
                text-decoration: underline;
            }
        }
    }
    
    .button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        div span{
            font-size: 1rem;
            padding: 15px;
            font-weight:bold;
        }
    }
}

#footerBar{
    position: fixed;
    display: none;
    padding: 20px;
    background: rgba(0,0,0,0.6);
    bottom: 0;
    left: 0;
    width: 100%;
    
    .footerBarInner{
        .flex;
        font-size: 1.1em;
        
        .leftSide{
            .flexi(1);
        }
        
        .rightSide{
            .flexi(2);
            text-align: right;
        }
        
        a{
            .transition(color 0.4s ease);
        }
        
        a:hover{
            color: @red;
        }
    }
}

#footerBar.on{
    position: relative;
    display: block;
    background: rgba(0,0,0,1);
}

#footerBar.footerFixer{
    position: relative;
    display: block;
    background: rgba(0,0,0,0.7);
}

#footerBar.on2{
    display: block;
}

.red{
    color: @red;
}

.formS, .formF{
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    width: 50%;
    height: 400px;
    top: 25%;
    left: 25%;
    padding: 10px;
    font-size: 1.5em;
    color: @clb;
    will-change: opacity;
    opacity: 0;
    visibility: hidden;
    .transition(~'opacity 0.3s ease-out 0s, visibility 0s linear 0.3s');
    
    .inner{
        background: @clw;
        width: 100%;
        height: 100%;
        padding: 20px;
        text-align: center;
        position: relative;
        
        .flex;
        .justify-content(center);
        .align-items(center);
        .flex-direction(column);
        
        .icon.red{
            i{
                border: 2px solid #ff0000;
                color: #ff0000;
            }
        }
        
        p,h2{
            max-width: 700px;
        }
        
        i{
            border: 2px solid @green;
            color: @green;
            width: 110px;
            height: 110px;
            padding: 17.5px;
            border-radius: 100%;
            font-size: 75px;
            margin-bottom: 20px;
        }
        
        .exit{
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
            z-index: 10;
            width: 40px;
            height: 40px;
        }

        .exit:before{
            content: "";
            display: block;
            position: absolute;
            top: 20px;
            left: 0;
            width: 30px;
            height: 2px;
            background: @clb;
            transform-origin: center center;
            .transform(rotate(-45deg));
        }

        .exit:after{
            content: "";
            display: block;
            position: absolute;
            top: 20px;
            left: 0;
            width: 30px;
            height: 2px;
            background: @clb;
            transform-origin: center center;
            .transform(rotate(45deg));
        }
    }
}

.formS.active{
    visibility: visible;
    opacity: 1;
    .transition(~'opacity 0.3s ease-out 0s, visibility 0s linear 0s');
}

.formF{
    .inner{
        font-size: 0.8em;
    }
}

.formF.active{
    visibility: visible;
    opacity: 1;
    .transition(~'opacity 0.3s ease-out 0s, visibility 0s linear 0s');
}




.button {
    display: inline-block;
    
    a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.videoPlayer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: @clb;
    padding-top: 80px;
    
    .coverVideoInner {
        position: relative;
        width: 100%;
        height: 100%;
        
        #ytplace {
            width: 100%;
            height: 100%;
        }
    }
}

.close {
    position: absolute;
    width: 70px;
    height: 70px;
    padding: 10px;
    background: @gold;
    top: 10px;
    right: 10px;
    cursor: pointer;
  z-index: 50;
    
    .inner {
        position: relative;
        width: 100%;
        height: 100%;
        .transform(rotate(45deg));

        &::before {
            content: "";
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background: @clw;
            top: 50%;
            left: 0;
            margin-top: -1px;
        }
        
        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 2px;
            height: 100%;
            background: @clw;
            top: 0%;
            left: 50%;
            margin-left: -1px;
        }
    }
}

.gm {
    width: 100%;
    max-width: 450px;
    margin-left: -1px;
    
    @media all {
        @media (max-height: 800px){
            max-width: 300px;
        }
    }
}

.gam {
    padding-bottom: 60px;
}

.fxm {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.fxm1 {
    background: @clb;
}

.fxm2 {
    background: #d90000;
}

.fxm3 {
    background: @clw;
}

.fxm4 {
    background: @gold;
}

.gamez {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    padding-top: 30px;
    z-index: 25;
    background-image: url(/images/LetterToSanta_Slide_6.jpg);
    background-position: left bottom;
    background-size: cover;
    background-color: @clb;
    text-align: center;
    
   
    
    .inner {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding-bottom: 25px;
    }
    
    h2 {
        text-align: center;
        margin: 50px 0;
    }
    
    #collage {
        padding-bottom: 50px;
    }
    
    #playPanel {
        background: transparent;
        width: 730px!important;
        
        & > div {
            width: 100%!important;
        }
    }
}

#game1 .inner * {
    box-sizing: content-box;
}

#game2 {
    .wrap {
      position: relative;      
        width: 100%;
        max-width: 1024px;
        margin: auto;
    }

    .game {
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-perspective: 500px;
              perspective: 500px;
      min-height: 100%;
      height: 100%;
        padding-bottom: 20px;
        text-align: center;
    }

    @-webkit-keyframes matchAnim {
      0% {
        background: #bcffcc;
      }
      100% {
        background: white;
      }
    }

    @keyframes matchAnim {
      0% {
        background: #bcffcc;
      }
      100% {
        background: white;
      }
    }
    .card {
      
      width: 235px;
      height: 280px;
      padding: 5px;
      text-align: center;
      display: inline-block;
      -webkit-perspective: 500px;
              perspective: 500px;
      position: relative;
      cursor: pointer;
      z-index: 50;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    @media (max-width: 800px) {
      .card {
        width: 25%;
        height: 16.666%;
      }
    }
    .card .inside {
      width: 100%;
      height: 100%;
      display: block;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      transition: .4s ease-in-out;
      background: white;
    }
    .card .inside.picked, .card .inside.matched {
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
    .card .inside.matched {
      -webkit-animation: 1s matchAnim ease-in-out;
              animation: 1s matchAnim ease-in-out;
      -webkit-animation-delay: .4s;
              animation-delay: .4s;
    }
    .card .front, .card .back {
    //   border: 1px solid black;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 0px;
    }
    .card .front img, .card .back img {
      max-width: 100%;
      display: block;
      margin: 0 auto;
      max-height: 100%;
    }
    .card .front {
      -webkit-transform: rotateY(-180deg);
              transform: rotateY(-180deg);
    }
    @media (max-width: 800px) {
      .card .front {
        padding: 5px;
      }
    }
    .card .back {
      -webkit-transform: rotateX(0);
              transform: rotateX(0);
    }
    @media (max-width: 800px) {
      .card .back {
        padding: 10px;
      }
    }

    .modal-overlay {
      display: none;
      background: rgba(0, 0, 0, 0.8);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .modal {
      display: none;
      position: relative;
      width: 500px;
      height: 400px;
      max-height: 90%;
      max-width: 90%;
      min-height: 380px;
      margin: 0 auto;
      
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      padding: 30px 10px;
    }
    .modal .winner {
      font-size: 3em;
      text-align: center;
      color: @gold;
      font-weight: 800;
    }
    .modal .restart {
      margin: 30px auto;
      padding: 10px 30px;
      display: block;
      font-size: 1.2em;
      border: none;
      background: @gold;      
      color: white;      
      cursor: pointer;
    }
    .modal .restart:hover {
/*      background: linear-gradient(#222, black);*/
    }
    .modal .message {
      text-align: center;
    }
    .modal .message a {
      text-decoration: none;
      color: #28afe6;
      font-weight: bold;
    }
    .modal .message a:hover {
      color: #56c0eb;
      border-bottom: 1px dotted #56c0eb;
    }
    .modal .share-text {
      text-align: center;
      margin: 10px auto;
    }
    .modal .social {
      margin: 20px auto;
      text-align: center;
    }
    .modal .social li {
      display: inline-block;
      height: 50px;
      width: 50px;
      margin-right: 10px;
    }
    .modal .social li:last-child {
      margin-right: 0;
    }
    .modal .social li a {
      display: block;
      line-height: 50px;
      font-size: 20px;
      color: white;
      text-decoration: none;
      border-radius: 5px;
    }
    .modal .social li a.facebook {
      background: #3b5998;
    }
    .modal .social li a.facebook:hover {
      background: #4c70ba;
    }
    .modal .social li a.google {
      background: #D34836;
    }
    .modal .social li a.google:hover {
      background: #dc6e60;
    }
    .modal .social li a.twitter {
      background: #4099FF;
    }
    .modal .social li a.twitter:hover {
      background: #73b4ff;
    }
}

#ekpaideutikoi.gamez{

        background-image: url(/images/LetterToSanta_Slide_4.jpg);
    
    .inner{
        width: 1600px;
        margin: auto;
        max-width: 100%;
        height: 100%; 

        .row{
            max-width: 700px;
            background: rgba(229, 194, 126, .6);
            padding: 20px;
            height: auto;

            h2{
                // font-family: 'verdeine';
                font-size: 28px;
                letter-spacing: 1px;
                // font-weight: normal;
                text-align: center;
                font-size: 32px;
                letter-spacing: 1px;
                text-align: center;
                font-weight: bold;
            }
            
            p{
                color: #ffffff;
                font-size: 1.1em;
                margin-bottom: 5px;
                text-align: justify;
            }
            ul{
                list-style:inside; 
                li{
                    color: #ffffff;
                    font-size: 1em;
                    margin-bottom: 5px;
                    text-align: justify;
                }
            }
        }
        
       
    }
    
}

#collage {
    #actualImageBox {
        font-size: 1em!important;
        h2{
            font-size: 2em;
            font-weight: 700;
        }
        button {
                display: inline-block;
            border: 1px solid #fff;
            cursor: pointer;
            -webkit-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
            margin-top: 20px;
            padding: 18px 15px 18px 18px;
            font-size: 1.15rem;
            line-height: 1rem;
            vertical-align: middle;
            display: inline-block;
            background: transparent;
            color: #fff;
        }
        button:hover {
            border: 1px solid @green;
            color: @green;
        }
    }
}

#takeoverFade {
	display: none;
	position: fixed;
  	top: 0%;
  	left: 0%;
  	width: 100%;
	height: 100%;
	z-index: 20;
	background: rgba(0,0,0,0.5);
  cursor: pointer;
}

#takeover {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 20;
  .transform(translate(0,-100%));
  pointer-events: none;
	
	video {
		position: absolute;
		top: 50%;
		left: 50%;
		.transform(translate(-50%,-50%));
		max-width: 80%;
		max-height: 80%;
		display: block;
		border: 20px solid #c4291c;
		background:#c4291c;
    pointer-events: all;
	}
    img.countdown-img {
        max-width: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }    
}

.ytplace {
  position: relative;
  width: 100%;
  height: 100%;
  
  video {
    width: 100%;
    height: 100%;
  }
}

.logom {
  img {
    width: 100%!important;
    max-width: 450px;
    
    @media all{
        @media (max-height: 768px){
            max-width: 450px;
        }
    }
  }
}

.blogPost {
  margin-bottom: 20px;
  
  p {
    margin-bottom: 15px;
  }
  
  img {
    max-width: 100%;
  }
}


.blogList{
    padding-left: 100px;
    max-width: 650px;
    
    .blogPost{
        margin-bottom: 60px;
    }
    
    .blogTitle{
        margin-bottom: 25px;
        position: relative;
        color: @gold;
        a{
            .transition(color 0.4s ease);
            color: @gold;
        }
        a:hover{
            color: @gold;
        }
    }
    
    .blogTitle:after{
        content: "";
        display: block;
        position: absolute;
        height: 1px;
        background: @gold;
        width: 100px;
        top: 20px;
        right: 100%;
        margin-right: 25px;
        color: @gold;
    }
    
    .postDate{
        font-size: 1.2em;
        color: @gold;
    }
}

@media print {
  .blogTitleButtons {
    display: none;
  }
  
  .postPage .pageContent {
    padding: 0!important;
  }
  
  .postPage #pageContainer {
    padding: 0!important;
  }
  
  #footerBar {
    padding: 0;
  }
  
  .postPage .pageContent .row {
    
    .button {
      display: none;
    }
    .col40 {
      width: 100%!important;
      float: none!important;
      
      .bar .barInner {
        padding: 0!important;
        top: 0!important;
        width: 100%!important;
        position: relative!important;
      }
    }
    
    .col60 {
      float: none!important;
      width: 100%!important;
      position: relative;
    }
  }
}

.navRight{
  font-weight: 700;
  position: absolute;
    right: 0%;
    top: 50%;
    .transform(translate(0,-50%));

    @media all{
        @media (max-width: 1280px){
            padding-top: 3px;
        }
    }
    @media print {
        display: none;
    }

    a{
        color: #ffffff;
      .transition(color 0.4s ease);
    }

    a:hover{
        /*color: @gold;*/
        text-decoration:underline;
    }
}

.slide3 .containerImg{
    max-width: 550px;
    padding:0;
    width: 30vw;
    margin: 0 auto;
    text-align: center;
    // border:10px solid #fff;
}
.slide3 .containerImg img{
    min-width:100%;
    min-height:100%;
}


.containerText ul{
    list-style:disc;
    display:inline-block;
    width:100%;
    padding-bottom:20px;
    text-align:left;
}

.containerText ul li{
    list-style:disc;
    color:#ffffff;
    font-size: 0.85em;
    width:100%;
    margin-left: 15px;
}

.containerText h2{
    // font-family: 'verdeine';
    // font-size: 42px;
    // letter-spacing: 1px;
    // font-weight:normal;
    // text-align:center;
    font-size: 28px;
    letter-spacing: 1px;
    text-align: center;
    font-weight: bold;
}



.slide2 .containerText, .slide3 .containerText, .slide4 .containerText, .slide5 .containerText, .slide6 .containerText{
        max-width: 750px;
       
   }
  
  .navRight a{
    //   font-family: 'verdeine';
      font-size:25px;
      text-transform: uppercase;
  }  

.menuLogo,.navRight{
    z-index:100;
}

.menuSlogan{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    padding-top: 17px;
    color:#fff;
    // font-family: 'verdeine';
    font-size:28px;
}

.containerText p{
    // text-align: justify;
    text-align: center;
}

@media all and (max-width:850px){
    .menuSlogan{
        display:none;
    }
}

@media all and (max-height:700px){
    .downContent img{
        max-width:80px;
    }
}



 @media all and (max-width: 1800px){
   .slide2 .containerText, .slide3 .containerText, .slide4 .containerText, .slide5 .containerText, .slide6 .containerText{
        max-width: 650px;
       
   }
    
}


@media all and (max-width: 1700px){
   /*.slide2 .containerText, .slide3 .containerText, .slide4 .containerText, .slide5 .containerText, .slide6 .containerText{
        max-width: 500px;
       
   }*/
   /*.slide2 .slideBackground{
       left:-10% !important;
       width:110% !important;
   }*/
    
}


.menuLogo, .navRight {
    z-index: 100000;
    position: absolute;
}