/* IMPORTS */
@import url("var.less");
@import url("mixins.less");
// @import url("editor.less");
//@import url("hero.less");

@blue: #062656;

@black: #000;
@gold: #B6A268;
@dim: #f5f5f5;
@text:#888;

@pink: #d11241;

/* GENERAL CSS */

.pageScrollBar() {
    &::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        .radius(0px);
        background: fade(black, 10%);
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
        .radius(0px);
        background: fade(@pink, 80%);
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
    &::-webkit-scrollbar-thumb:window-inactive {
        background: fade(black, 40%);
    }
}

.wrap {
	position:relative;
	width:100%;
	height:100%;
}
html, body {
	//background: white;
	margin:0;
	padding:0;
	height:100%;
	.font;
    .pageScrollBar;
    & h1, & h2, & h3, & h4, & h5, & h6, p {
        .font;
    }
}

.p() {
    .text(18px,24px,0.5px);
    color: #585858;
    & strong {
        font-weight: 800;
    }
    @media @desktop {
        .text(16px,23px,0.5px);
    }
    @media @laptop {
        .text(15px,21px,0.5px);
        margin-bottom: 10px;
    }
    @media @mobile {
        .text(19px,24px,1px);
        color: black;
    }
}
.h1() {
    .title(50px,50px,4px);
    color: @pink;
    margin-top: 0;
    margin-bottom: 30px;
    @media @desktop {
        font-size: 46px;
    }
    @media @laptop {
        font-size: 40px;
    }
    @media @pad {
        text-align: center;
    }
    @media @mobile {
        text-align: center;
    }
    @media @mobile {
        font-size: 40px;
        color: @pink;
        font-weight: 400;
        text-align: center;
    }
}

body {
    overflow-x: hidden;
    &.locked {
        overflow: hidden;
    }
    & .wrapper {
        min-height:100%;
       position:relative;
    }
    & .row {
        max-width: 1240px;
    }
    & .header {
        height: 100px;
        .transition(all 0.4s ease);
        .alpha(75,0,0,0);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10000;
        overflow: hidden;
        @media @desktop {
            height: 80px;
        }
        @media @laptop {
            height: 58px;
        }
        @media @ipad {
            position: absolute;
            background: none;
            overflow: visible;
        }
        @media @pad {
            position: absolute;
            background: none;
            overflow: visible;
        }
        @media @mobile {
            position: static;
            background: white;
            overflow: visible;
            text-align: center;
            height: auto;
            padding-top: 60px;
            padding-bottom: 0px;
        }
        @media @mobile-l {
            padding-top: 25px;
            overflow: visible;
            padding-bottom: 40px;
        }
        & img.rad {
            position: absolute;
            top: 22px;
            right: 20px;
            .transition(all 0.4s ease);
            height: 59px;
            @media @desktop {
                top: 18px;
                right: 13px;
                height: 47px;
            }
            @media @laptop {
                top: 11px;
                right: 9px;
                height: 38px;
            }
            @media @ipad {
                top: 20px;
                right: 9px;
                height: 59px;
            }
            @media @pad {
                top: 20px;
                right: 9px;
                height: 50px;
            }
            @media @mobile {
                position: static;
                display: block;
                height: 45px;
            }
        }
        & a.logo {
            position: absolute;
            top: 10px;
            left: 20px;
            @media @desktop {
                top: 5px;
                left: 10px;
            }
            @media @mobile {
                position: static;
                width: 100%;
            }
            & img {
                height: 80px;
                .transition(all 0.4s ease);
                @media @desktop {
                    height: 70px;
                }
                @media @laptop {
                    height: 47px;
                }
                @media @ipad {
                    height: 100px;
                }
                @media @pad {
                    height: 80px;
                }
                @media @mobile {
                    height: 150px;
                    margin-bottom: 30px;
                }
                @media @mobile-l {
                    height: 100px;
                }
            }
            & h2 {
                color: @pink;
                .text(20px,20px,4px);
                margin: 0;
                white-space: nowrap;
                position: absolute;
                top: 8px;
                left: 64px;
                .transition(all 0.4s ease);
                @media @desktop {
                    top: 7px;
                    left: 55px;
                }
                @media @laptop {
                    top: 14px;
                    left: 38px;
                    letter-spacing: 1px;
                }
                @media @ipad {
                    top: 15px;
                    left: 67px;
                    .bold(17px,17px,3px);
                }
                @media @pad {
                    top: 17px;
                    left: 55px;
                    .bold(16px,17px,3px);
                }
                @media @mobile {
                    position: static;
                    .font(32px,32px,2px);
                }
                & span {
                    .transition(all 0.4s ease);
                    width: 0px;
                    color: #fff;
                    overflow: hidden;
                    position: absolute;
                    letter-spacing: 3px;
                    padding-left: 8px;
                    @media @laptop {
                        width: auto;
                    }
                    @media @ipad {
                        width: 0!important;
                    }
                    @media @pad {
                        width: 0!important;
                    }
                    @media @mobile {
                        width: 0;
                    }
                    @media @mobile-l {
                        width: auto!important;
                        color: black;
                        position: inherit;
                    }
                }
            }
            & h1 {
                color: white;
                .title(45px,45px,1px);
                margin: 0;
                white-space: nowrap;
                position: absolute;
                top: 30px;
                left: 60px;
                .transition(all 0.4s ease);
                @media @desktop {
                    font-size: 40px;
                    top: 26px;
                    left: 53px;
                }
                @media @laptop {
                    display: none;
                }
                @media @ipad {
                    display: block;
                    top: 35px;
                    left: 65px;
                }
                @media @pad {
                    display: block;
                    top: 29px;
                    left: 53px;
                }
                @media @mobile {
                    position: static;
                    display: block;
                    color: black;
                    font-weight: 400;
                    font-size: 45px;
                    margin-top: 15px;
                    margin-bottom: 40px;
                }
                @media @mobile-l {
                    display: none;
                }
            }
        }
        & ul.menu {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            top: 0;
            right: -650px;
            font-size: 0;
            opacity: 0;
            .transition(all 0.4s ease);
            @media @ipad {
                opacity: 1;
                right: 138px;
                top: 77px;
                max-height: 0;
                overflow: hidden;
                padding-top: 0;
                .transition(all 0.2s ease);
            }
            @media @pad {
                opacity: 1;
                right: 115px;
                top: 77px;
                max-height: 0;
                overflow: hidden;
                padding-top: 0;
                .transition(all 0.2s ease);
            }
            @media @mobile {
                opacity: 1;
                right: 73px;
                top: 20px;
                max-height: 0;
                overflow: hidden;
                padding-top: 0;
                .transition(all 0.2s ease);
                z-index: 1;
            }
            &:after {
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 0px 20px 20px;
                border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d11241 rgba(0, 0, 0, 0);
                position: absolute;
                top: 0;
                right: 0px;
                display: none;
                @media @ipad {
                    display: block;
                }
                @media @pad {
                    display: block;
                }
                @media @mobile {
                    display: none;
                }
            }
            & > li {
                display: inline-block;
                padding: 0;
                vertical-align: top;
                position: relative;
                height: 100px;
                @media @ipad {
                    display: block;
                    height: auto;
                    background: @pink;
                }
                @media @pad {
                    display: block;
                    height: auto;
                    background: @pink;
                }
                @media @mobile-p {
                    display: block;
                    height: auto;
                    background: @pink;
                }
                & > a {
                    display: block;
                    .text(14px,105px,1px);
                    color: white;
                    padding: 0px 16px;
                    .transition(all 0.4s ease);
                    @media @desktop {
                        padding: 0 7px;
                        .text(13px,86px,1px);
                    }
                    @media @laptop {
                        .text(13px,64px,1px);
                    }
                    @media @ipad {
                        .text(15px,15px,1px);
                        text-align: center;
                        padding: 20px 40px;
                    }
                    @media @pad {
                        .text(14px,14px,1px);
                        text-align: center;
                        padding: 15px 30px;
                    }
                    @media @mobile {
                        .text(19px,19px,2px);
                        text-align: center;
                        padding: 15px 30px;
                    }
                }
                &:hover {
                    & > a {
                        background: white;
                        color: @black;
                        @media @ipad {
                            background: @pink;
                            color: white;
                        }
                        @media @pad {
                            background: @pink;
                            color: white;
                        }
                        @media @mobile {
                            background: @pink;
                            color: white;
                        }
                    }
                    & ul {
                        max-height: 300px;
                    }
                }
                &.current {
                    & > a {
                        background: black;
                        color: @pink;
                        font-weight: 700!important;
                        font-size: 16px;
                        @media @desktop {
                            font-size: 13px;
                        }
                        @media @ipad {
                            background: darken(@pink,3%);
                            color: white;
                            .text(15px,15px,1px);
                            font-weight: 400!important;
                        }
                        @media @pad {
                            background: darken(@pink,3%);
                            color: white;
                            .text(15px,15px,1px);
                            font-weight: 400!important;
                        }
                        @media @mobile {
                            background: darken(@pink,3%);
                            color: white;
                            .text(19px,19px,2px);
                            font-weight: 400!important;
                        }
                    }
                }
                /*
                & ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    position: absolute;
                    z-index: 100;
                    background: white;
                    .transition;
                    max-height: 0;
                    overflow: hidden;
                    & li {
                        padding: 0;
                        &:hover {
                            & a {
                                background: @black;
                                color: white;
                            }
                        }
                        & a {
                            display: block;
                            .cond(14px,14px,1px);
                            padding: 12px 16px;
                            width: 140px;
                            color: #666;
                            .transition;
                        }
                    }
                }
                */
            }
            &.active {
                right: 190px;
                opacity: 1;
                @media @desktop {
                    right: 150px;
                }
                @media @laptop {
                    right: 125px;
                }
                @media @ipad {
                    max-height: 350px;
                    padding-top: 20px;
                    right: 138px;
                }
                @media @pad {
                    max-height: 350px;
                    padding-top: 20px;
                    right: 115px;
                }
                @media @mobile {
                    max-height: 500px;
                    padding-top: 20px;
                    padding-top: 0;
                    right: 73px;
                    top: 20px;
                }
            }
        }
        & .menu-button {
            position: absolute;
            top: 38px;
            right: 150px;
            width: 30px;
            height: 26px;
            cursor: pointer;
            .transition(all 0.4s ease);
            .origin(50%,50%);
            @media @desktop {
                top: 29px;
                right: 112px;
                width: 27px;
                height: 24px;
            }
            @media @laptop {
                top: 19px;
                right: 88px;
                width: 26px;
                height: 22px;
            }
            @media @ipad {
                top: 39px;
                right: 135px;
                width: 30px;
                height: 24px;
            }
            @media @pad {
                top: 35px;
                right: 110px;
                width: 30px;
                height: 24px;
            }
            @media @mobile {
                top: 25px;
                right: 25px;
                width: 40px;
                height: 30px;
            }
            &.active {
                .rotate(270deg);
            }
            & .line {
                position: absolute;
                width: 100%;
                height: 4px;
                .radius(2px);
                background: white;
                .transition;
                @media @mobile {
                    background: black;
                }
                &.line1 {
                    top: 0;
                }
                &.line2 {
                    top: 50%;
                    margin-top: -2px;
                }
                &.line3 {
                    bottom: 0;
                }
            }
        }
        & .menu-label {
            .text(15px,15px,2px);
            color: #d4d4d4;
            position: absolute;
            top: 44px;
            right: 213px;
            .transition(all 0.4s ease);
            .noselect;
            @media @desktop {
                top: 34px;
                right: 171px;
                .text(14px,17px,1px);
            }
            @media @laptop {
                top: 24px;
                right: 144px;
            }
            @media @ipad {
                top: 44px;
                right: 195px;
            }
            @media @pad {
                top: 39px;
                right: 165px;
            }
            @media @mobile {
                display: none;
            }
            &.active {
                opacity: 0;
                right: 0px;
                @media @ipad {
                    right: 195px;
                    opacity: 1;
                }
                @media @pad {
                    right: 165px;
                    opacity: 1;
                }
            }
            &:after {
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 6px 0 6px 10px;
                border-color: transparent transparent transparent #d4d4d4;
                position: absolute;
                top: 1px;
                right: -16px;
            }
        }
        &.static {
            height: 60px;
            top: 0;
            .alpha(85,0,0,0);
            @media @laptop {
                height: 58px;
            }
            @media @mobile {
                position: static;
                background: white;
                overflow: visible;
                text-align: center;
                height: auto;
                padding-top: 60px;
                padding-bottom: 0px;
            }
            @media @mobile-l {
                padding-top: 25px;
                overflow: visible;
                padding-bottom: 40px;
            }
            & a.logo {
                & img {
                    height: 40px;
                    @media @desktop {
                        height: 48px;
                    }
                    @media @ipad {
                        height: 100px;
                    }
                    @media @pad {
                        height: 80px;
                    }
                    @media @mobile {
                        height: 150px;
                        margin-bottom: 30px;
                    }
                    @media @mobile-l {
                        height: 100px;
                    }
                }
                & h1 {
                    opacity: 0;
                    @media @ipad {
                        opacity: 1;
                    }
                    @media @pad {
                        display: block;
                        top: 29px;
                        left: 53px;
                        opacity: 1;
                    }
                    @media @mobile {
                        position: static;
                        display: block;
                        color: black;
                        font-weight: 400;
                        font-size: 45px;
                        margin-top: 15px;
                        margin-bottom: 40px;
                        opacity: 1;
                    }
                    @media @mobile-l {
                        display: none;
                    }
                }
                & h2 {
                    left: 40px;
                    top: 10px;
                    letter-spacing: 3px;
                    @media @desktop {
                        top: 15px;
                        left: 37px;
                        letter-spacing: 1px;
                    }
                    @media @laptop {
                        top: 14px;
                        left: 38px;
                        letter-spacing: 1px;
                    }
                    @media @ipad {
                        top: 15px;
                        left: 67px;
                        .bold(17px,17px,3px);
                    }
                    @media @pad {
                        top: 17px;
                        left: 55px;
                        .bold(16px,17px,3px);
                    }
                    @media @mobile {
                        position: static;
                        .font(32px,32px,2px);
                    }
                    & span {
                        width: 220px;
                        @media @ipad {
                            width: 0;
                        }
                        @media @pad {
                            width: 0;
                        }
                        @media @mobile-l {
                            width: auto!important;
                            color: black;
                            position: inherit;
                        }
                    }
                }
            }
            & img.rad {
                top: 8px;
                right: 8px;
                height: 44px;
                @media @laptop {
                    top: 11px;
                    right: 9px;
                    height: 38px;
                }
                @media @ipad {
                    top: 20px;
                    right: 9px;
                    height: 59px;
                }
                @media @pad {
                    top: 20px;
                    right: 9px;
                    height: 50px;
                }
                @media @mobile {
                    position: static;
                    display: block;
                    height: 45px;
                }
            }
            & .menu-button {
                top: 19px;
                right: 103px;
                width: 26px;
                height: 24px;
                @media @laptop {
                    top: 19px;
                    right: 88px;
                    width: 26px;
                    height: 22px;
                }
                @media @ipad {
                    top: 39px;
                    right: 135px;
                    width: 30px;
                    height: 24px;
                }
                @media @pad {
                    top: 35px;
                    right: 110px;
                    width: 30px;
                    height: 24px;
                }
                @media @mobile {
                    top: 25px;
                    right: 25px;
                    width: 40px;
                    height: 30px;
                }
            }
            & .menu-label {
                top: 24px;
                right: 161px;
                @media @laptop {
                    top: 24px;
                    right: 144px;
                }
                @media @ipad {
                    top: 44px;
                    right: 195px;
                }
                @media @pad {
                    top: 39px;
                    right: 165px;
                }
            }
            & ul.menu {
                & > li {
                    height: 60px;
                    & > a {
                        display: block;
                        .text(14px,65px,1px);
                        @media @laptop {
                            .text(13px,64px,1px);
                        }
                    }
                }
                &.active {
                    right: 140px;
                    @media @laptop {
                        right: 125px;
                    }
                }
            }
        }
        & a.rad {
            @media @mobile {
                position: absolute;
                top: 0;
                right: auto;
                left: 0;
                padding: 11px;
                background: black;
            }
        }
    }
    & a.espa {
      position: fixed;
      left: 10px;
      bottom: 10px;
      width: 350px;
      .transition;
      opacity: 0;
      z-index: 1;
      &.active {
        z-index: 100;
        opacity: 1;
      }
    }
    & #content {
      & div.contests {
        padding-bottom: 60px;
        & .top-part {
          height: 300px;
          padding-top: 150px;

          & h1 {
            .title(50px,50px,3px);
            color: @pink;
            text-align: center;
            margin-top: 0;
            margin-bottom: 50px;
            @media @desktop {
                font-size: 46px;
                margin-bottom: 30px;
            }
            @media @laptop {
                font-size: 40px;
            }
            @media @mobile {
                font-size: 40px;
                text-shadow: none;
                font-weight: 400;
                text-align: center;
            }
          }

          & p {
            .p;
            text-align: center;
            padding: 0 20%;
          }
        }
        & .award {
          display: flex;
          align-items: center;
          margin-bottom: 40px;

          & img {
            width: 50%;
          }

          & .details {
            flex: 0 0 50%;
            padding: 0 30px;
            & .name {
              .bold(30px, 30px, 1px);
              color: @pink;
              margin-bottom: 10px;
            }
            & .contest {
              .cond(21px);
              margin-bottom: 10px;
            }
            & .position {
              .bold(17px);
            }
          }

          &:nth-child(even) {
            & img {
              order: 2;
            }
            & .details {
              text-align: right;
            }
          }
        }
      }
        & .top-article {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            @media @desktop {
                height: 80vh;
            }
            @media @pad {
                height: auto;
            }
            @media @mobile {
                height: auto;
            }
            &:hover {
                & .details {
                    & .inner {
                        & a.readmore {
                            right: 40px;
                        }
                    }
                }
            }
            & .background-image {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                .cover;
                @media @pad {
                    position: inherit;
                    height: 50vh;
                }
                @media @mobile {
                    position: inherit;
                    height: 50vh;
                    background-position: center bottom;
                }
            }
            & .details {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: table;
                padding: 0 30%;
                @media @desktop {
                    padding: 0 10%;
                }
                @media @pad {
                    position: inherit;
                    height: auto;
                }
                @media @mobile {
                    position: static;
                    height: auto;
                    padding: 0 20px;
                    width: auto;
                    display: block;
                }
                & .inner {
                    height: 100%;
                    display: table-cell;
                    vertical-align: top;
                    text-align: center;
                    padding-top: 24vh;
                    @media @desktop {
                        padding-top: 22vh;
                    }
                    @media @laptop {
                        padding-top: 20vh;
                    }
                    @media @pad {
                        padding-top: 50px;
                        padding-bottom: 100px;
                    }
                    @media @mobile {
                        padding-top: 50px;
                        padding-bottom: 100px;
                    }
                    & h1 {
                        .title(50px,50px,4px);
                        color: #cc3;
                        margin-top: 0;
                        margin-bottom: 30px;
                        text-shadow: 0 0 5px #000000;
                        @media @desktop {
                            font-size: 46px;
                            margin-bottom: 23px;
                        }
                        @media @laptop {
                            font-size: 40px;
                        }
                        @media @pad {
                            font-size: 40px;
                            text-shadow: none;
                            color: @pink;
                        }
                        @media @mobile {
                            font-size: 40px;
                            text-shadow: none;
                            color: @pink;
                            font-weight: 400;
                        }
                    }
                    p {
                        .title(16px,25px,1px);
                        color: white;
                        text-shadow: 0 0 5px #000000;
                        margin-bottom: 20px;
                        @media @desktop {
                            line-height: 23px;
                        }
                        @media @laptop {
                            .title(14px,20px,1px);
                        }
                        @media @pad {
                            color: black;
                            text-shadow: none;
                            font-weight: 400;
                        }
                        @media @mobile {
                            .text(19px,24px,1px);
                            text-shadow: none;
                            color: black;
                            margin-bottom: 50px;
                        }
                        & img {
                            opacity: 0.7;
                            margin-top: 10px;
                            @media @desktop {
                                width: 280px;
                                opacity: 0.9;
                            }
                            @media @laptop {
                                width: 220px;
                                margin-top: 0;
                            }
                            @media @pad {
                                display: none;
                            }
                            @media @mobile {
                                display: none;
                            }
                        }
                    }
                    & .share {
                        & .social {
                            display: inline-block;
                            .circle(30px);
                            background: url(../images/social2.png) center top no-repeat;
                            background-size: 30px;
                            padding: 0;
                            vertical-align: middle;
                            .transition(background-color 0.3s ease);
                            background-color: black;
                            margin: 0 5px;
                            @media @laptop {
                                margin: 0 3px;
                            }
                            &:hover {
                                background-color: @pink;
                            }
                            &.facebook {
                                background-position: center top;
                                &:hover {
                                    background-position: center -30px;
                                }
                            }
                            &.twitter {
                                background-position: center -60px;
                                &:hover {
                                    background-position: center -90px;
                                }
                            }
                            &.linkedin {
                                background-position: center -120px;
                                &:hover {
                                    background-position: center -150px;
                                }
                            }
                            &.google {
                                background-position: center -180px;
                                &:hover {
                                    background-position: center -210px;
                                }
                            }
                        }
                    }
                    & a.readmore {
                        position: absolute;
                        right: -450px;
                        bottom: 30px;
                        background: black;
                        color: #fff;
                        .title(17px,17px,2px);
                        padding: 20px 20px 20px 40px;
                        .transition(all 0.4s ease);
                        @media @desktop {
                            right: 40px;
                        }
                        @media @laptop {
                            bottom: 0;
                            right: 0!important;
                            .origin(100%,100%);
                            .scale(0.9);
                        }
                        @media @pad {
                            .scale(1);
                            position: absolute;
                            right: 0;
                            width: 100%;
                        }
                        @media @mobile {
                            .scale(1);
                            position: absolute;
                            right: 0;
                            width: 100%;
                            font-weight: 400;
                        }
                        &:before {
                            content: '+';
                            position: absolute;
                            left: 16px;
                            top: 16px;
                            color: white;
                            .title(25px);
                            .transition(all 0.4s ease);
                            @media @pad {
                                top: 14px;
                                font-size: 70px;
                            }
                            @media @mobile {
                                top: 14px;
                                font-size: 70px;
                            }
                        }
                        &:hover {
                            background: @pink;
                            &:before {
                                color: black;
                                font-weight: 400;
                            }
                        }
                    }
                    & .edit-article-button {
                        left: 10px;
                        right: auto;
                        bottom: 10px;
                        top: auto;
                        background-color: @pink;
                    }
                }
            }
        }
        & .fp-article {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            @media @desktop {
                height: 80vh;
            }
            @media @pad {
                height: auto;
            }
            @media @mobile {
                height: auto;
            }
            &:hover {
                & .details {
                    & .inner {
                        & a.readmore {
                            right: 40px;
                        }
                    }
                }
            }
            & .background-image {
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                .cover;
                @media @pad {
                    position: inherit;
                    width: 100%;
                    height: 50vh;
                }
                @media @mobile {
                    position: inherit;
                    width: 100%;
                    height: 50vh;
                }
            }
            & .details {
                position: absolute;
                top: 0;
                right: 0;
                width: 50%;
                height: 100%;
                // display: table;
                padding: 50px;
                @media @pad {
                    position: inherit;
                    width: 100%;
                    padding-bottom: 100px;
                }
                @media @mobile {
                    position: inherit;
                    width: 100%;
                    padding-bottom: 100px;
                }
                & .inner {
                    // display: table-cell;
                    // vertical-align: middle;
                    padding-right: 40px;
                    @media @pad {
                        padding-right: 0;
                    }
                    @media @mobile {
                        padding-right: 0;
                    }
                    & .share {
                        @media @pad {
                            text-align: center;
                        }
                        @media @mobile {
                            text-align: center;
                        }
                        & .social {
                            display: inline-block;
                            .circle(30px);
                            background: url(../images/social2.png) center top no-repeat;
                            background-size: 30px;
                            padding: 0;
                            vertical-align: middle;
                            .transition(background-color 0.3s ease);
                            background-color: black;
                            margin: 0 5px;
                            &:hover {
                                background-color: @pink;
                            }
                            &.facebook {
                                background-position: center top;
                                &:hover {
                                    background-position: center -30px;
                                }
                            }
                            &.twitter {
                                background-position: center -60px;
                                &:hover {
                                    background-position: center -90px;
                                }
                            }
                            &.linkedin {
                                background-position: center -120px;
                                &:hover {
                                    background-position: center -150px;
                                }
                            }
                            &.google {
                                background-position: center -180px;
                                &:hover {
                                    background-position: center -210px;
                                }
                            }
                        }
                    }
                    & .edit-article-button {
                        left: 10px;
                        right: auto;
                        bottom: 10px;
                        top: auto;
                        background-color: @pink;
                    }
                    & h1 {
                        .title(50px,50px,4px);
                        color: @pink;
                        margin-top: 0;
                        margin-bottom: 30px;
                        @media @desktop {
                            font-size: 46px;
                            margin-bottom: 23px;
                        }
                        @media @laptop {
                            font-size: 40px;
                        }
                        @media @pad {
                            text-align: center;
                        }
                        @media @mobile {
                            text-align: center;
                        }
                        @media @mobile {
                            font-size: 40px;
                            text-shadow: none;
                            color: @pink;
                            font-weight: 400;
                            text-align: center;
                        }
                    }
                    p {
                        .text(16px,25px,0.5px);
                        & .strong {
                            font-weight: 800;
                        }
                        @media @desktop {
                            line-height: 23px;
                        }
                        @media @laptop {
                            .text(14px,20px,1px);
                        }
                        @media @pad {
                            text-align: center;
                            color: black;
                            font-weight: 400;
                        }
                        @media @mobile {
                            .text(19px,24px,1px);
                            text-shadow: none;
                            color: black;
                            margin-bottom: 50px;
                            text-align: center;
                        }
                    }
                    & a.readmore {
                        position: absolute;
                        right: -450px;
                        bottom: 30px;
                        background: black;
                        color: #fff;
                        .title(17px,17px,2px);
                        padding: 20px 20px 20px 40px;
                        .transition(all 0.4s ease);
                        @media @desktop {
                            right: 40px;
                        }
                        @media @laptop {
                            bottom: 0;
                            right: 0!important;
                            .origin(100%,100%);
                            .scale(0.9);
                        }
                        @media @pad {
                            .scale(1);
                            position: absolute;
                            right: 0;
                            width: 100%;
                            text-align: center;
                        }
                        @media @mobile {
                            .scale(1);
                            position: absolute;
                            right: 0;
                            width: 100%;
                            text-align: center;
                        }
                        &:before {
                            content: '+';
                            position: absolute;
                            left: 16px;
                            top: 16px;
                            color: white;
                            .title(25px);
                            .transition(all 0.4s ease);
                            @media @pad {
                                top: 14px;
                                font-size: 70px;
                            }
                            @media @mobile {
                                top: 14px;
                                font-size: 70px;
                            }
                        }
                        &:hover {
                            background: @pink;
                            &:before {
                                color: black;
                                font-weight: 400;
                            }
                        }
                    }
                }
            }
        }
        & .teachers-list {
            background: #d6d6d6;
            padding: 100px 0;
            @media @desktop {
                padding: 80px 0;
            }
            @media @laptop {
                padding: 60px 0;
            }
            & h1 {
                .title(50px,50px,3px);
                color: @pink;
                text-align: center;
                margin-top: 0;
                margin-bottom: 50px;
                @media @desktop {
                    font-size: 46px;
                    margin-bottom: 30px;
                }
                @media @laptop {
                    font-size: 40px;
                }
                @media @mobile {
                    font-size: 40px;
                    text-shadow: none;
                    font-weight: 400;
                    text-align: center;
                }
            }
            & .inner {
                text-align: center;
                & .teacher {
                    display: inline-block;
                    width: 230px;
                    text-align: center;
                    margin: 0 30px;
                    @media @laptop {
                        width: 210px;
                    }
                    @media @pad {
                        width: 100%;
                        margin: 0 0 40px 0;
                    }
                    @media @mobile {
                        width: 100%;
                        margin: 0 0 40px 0;
                    }
                    & .image {
                        .cover;
                        background-size: 100%;
                        .circle(200px);
                        margin: 0 auto 20px;
                        -moz-box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                       -webkit-box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                        box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                        .transition;
                        position: relative;
                        @media @laptop {
                            .circle(160px);
                        }
                        @media @pad {
                            .circle(230px);
                        }
                        @media @mobile {
                            .circle(230px);
                        }
                        &:before, &:after {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 26px;
                            margin-left: -13px;
                            height: 4px;
                            margin-top: -2px;
                            .radius(2px);
                            content: '';
                            background: white;
                            .origin(50%,50%);
                            opacity: 0;
                            .transition;
                        }
                        &:after {
                            .rotate(90deg);
                        }
                    }
                    & .name {
                        color: black;
                        text-transform: uppercase;
                        .text(17px,17px,1px);
                        @media @laptop {
                            font-size: 15px;
                        }
                        @media @mobile {
                            font-size: 19px;
                        }
                    }
                    &:hover {
                        & .image {
                            background-size: 110%;
                            &:before, &:after {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
        & ul.MZadminmenu {
            &.teachers-admin {
                display: block;
                margin: 0;
                padding: 0;
                display: table;
                list-style: none;
                width: 100%;
                & li {
                    display: table-cell;
                    width: 50%;
                    padding: 10px 5px 10px 10px;
                    text-align: center;
                    & a {
                        .text(20px,60px,1px);
                        background: white;
                        color: black;
                        display: block;
                        border: thin dotted #a9a9a9;
                        .transition(all 0.4s ease);
                        &:hover {
                            background: #a9a9a9;
                        }
                    }
                }
            }
        }
        & .mz-contact-module {
            position: relative;
            overflow: hidden;
            & #map {
                height: 80vh;
            }
            & .click-to-call {
                background: #0eaf0e;
                color: #fff;
                display: block;
                text-align: center;
                padding: 30px;
                font-size: 30px;
                letter-spacing: 2px;
                background-image: url(../images/click-to-call.png);
                background-repeat: no-repeat;
                background-size: auto 80%;
                background-position: 10px center;
            }
            & .contact-details {
                position: absolute;
                width: 350px;
                right: 50px;
                top: 50px;
                background: @pink;
                .shadow;
                padding: 30px;
                @media @desktop {
                    .origin(100%,0);
                    .scale(0.9);
                }
                @media @laptop {
                    .origin(100%,50%);
                    .scale(0.75);
                    right: 0;
                }
                @media @pad {
                    position: static;
                    transform: scale(1,1);
                    width: 100%;
                    padding: 30px 110px;
                }
                @media @mobile {
                    position: static;
                    transform: scale(1,1);
                    width: 100%;
                    padding: 30px 35px;
                }
                & h2 {
                    .bold(20px,20px,3px);
                    text-align: center;
                    color: white;
                    margin-top: 0;
                    margin-bottom: 20px;
                }
                & p {
                    .text(17px,20px,0.5px);
                    color: white;
                    text-align: center;
                    & a {
                        color: #cc3;
                        display: block;
                        margin-bottom: 30px;
                    }
                }
                & .directions {
                    & h2 {
                        .bold(16px,16px,2px);
                    }
                    & form {
                        & > input {
                            .origin(50%,50%);
                            &:focus {
                                .scale(1.1);
                                .radius(10px);
                            }
                        }
                        & .mapbutton {
                            background: black;
                            color: white;
                            height: auto;
                            padding: 15px 20px;
                            border: none;
                            .noshadow;
                            cursor: pointer;
                            .transition;
                            display: block;
                            margin: 0 auto;
                        }
                    }
                }
            }
        }
        & .latest-event {
            display: table;
            &:hover {
                & .poster-area {
                    & a.readmore {
                        right: 40px;
                        @media @laptop {
                            right: 0;
                        }
                    }
                }
            }
            @media @pad {
                display: block;
            }
            @media @mobile {
                display: block;
            }
            & .details {
                display: table-cell;
                vertical-align: middle;
                background: black;
                color: white;
                width: 40%;
                text-align: right;
                padding-right: 80px;
                .title(50px,50px,3px);
                @media @desktop {
                    font-size: 46px;
                    width: 35%;
                    padding-right: 60px;
                }
                @media @laptop {
                    font-size: 40px;
                    padding-right: 40px;
                    width: 30%;
                }
                @media @pad {
                    display: block;
                    width: 100%;
                    text-align: center;
                    padding: 10px 0;
                }
                @media @mobile {
                    display: block;
                    width: 100%;
                    text-align: center;
                    padding: 10px 0;
                }
            }
            & .poster-area {
                display: table-cell;
                vertical-align: middle;
                width: 60%;
                position: relative;
                @media @desktop {
                    width: 65%;
                }
                @media @laptop {
                    width: 70%;
                }
                @media @pad {
                    display: block;
                    width: 100%;
                    height: 440px;
                }
                @media @mobile {
                    display: block;
                    width: 100%;
                    height: 440px;
                }
                & > img {
                    @media @mobile {
                        display: none;
                    }
                }
                & .poster-frame {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: url(../images/sxoli-xorou-elenis-kakkava-events-frame.png);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: auto 80%;
                    @media @laptop {
                        .translate(-40px,0,0);
                    }
                    @media @pad {
                        .translate(0,0,0);
                    }
                    @media @mobile {
                        .translate(0,0,0);
                    }
                }
                & .for-blog {
                    display: none;
                }
                & .event {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: auto 57%;
                    padding: 12% 33%;
                    @media @laptop {
                        .translate(-40px,0,0);
                    }
                    @media @pad {
                        .translate(0,0,0);
                    }
                    @media @mobile {
                        .translate(0,0,0);
                    }
                    & a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        &:before, &:after {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 26px;
                            margin-left: -13px;
                            height: 4px;
                            margin-top: -2px;
                            .radius(2px);
                            content: '';
                            background: white;
                            .origin(50%,50%);
                            opacity: 0;
                            .transition;
                        }
                        &:after {
                            .rotate(90deg);
                        }
                        &:hover {
                            &:before, &:after {
                                opacity: 1;
                            }
                        }
                    }
                }
                & a.readmore {
                    position: absolute;
                    right: -450px;
                    top: 50%;
                    margin-top: -30px;
                    background: @pink;
                    color: #fff;
                    .title(17px,17px,2px);
                    padding: 20px 20px 20px 40px;
                    .transition(all 0.4s ease);
                    @media @desktop {
                        right: 40px;
                    }
                    @media @laptop {
                        right: 0;
                        .origin(100%,50%);
                        .scale(0.9);
                    }
                    @media @pad {
                        .scale(1);
                        position: absolute;
                        right: 0;
                        width: 100%;
                        text-align: center;
                        top: auto;
                        margin: 0;
                        bottom: 0;
                    }
                    @media @mobile {
                        .scale(1);
                        position: absolute;
                        right: 0;
                        width: 100%;
                        text-align: center;
                        top: auto;
                        margin: 0;
                        bottom: 0;
                    }
                    &:before {
                        content: '+';
                        position: absolute;
                        left: 16px;
                        top: 16px;
                        color: white;
                        .title(25px);
                        .transition(all 0.4s ease);
                        @media @pad {
                            top: 14px;
                            font-size: 70px;
                        }
                        @media @mobile {
                            top: 14px;
                            font-size: 70px;
                        }
                    }
                    &:hover {
                        background: black;
                        &:before {
                            color: @pink;
                            font-weight: 400;
                        }
                    }
                }
            }
        }
        & .main-article-page {
            & .main-image {
                .cover;
                height: 70vh;
                position: relative;
                @media @desktop {
                    height: 60vh;
                }
                @media @laptop {
                    height: 60vh;
                }
                @media @ipad {
                    height: 70vh;
                }
                @media @mobile {
                    margin-bottom: 80px;
                }
                & h1 {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    .alpha(60,0,0,0);
                    color: white;
                    .title(50px,50px,3px);
                    text-align: center;
                    margin: 0;
                    padding: 30px 0;
                    @media @desktop {
                        .title(41px,41px,2px);
                        padding: 20px 0;
                    }
                    @media @desktop {
                        .title(35px,35px,2px);
                        padding: 15px 0;
                    }
                    @media @mobile {
                        .translate(0,170%,0);
                        background: white;
                        color: @pink;
                        .text(40px,50px,4px);
                    }
                }
                & .edit-article-button {
                    right: 20px;
                    bottom: 20px;
                    top: auto;
                    background-color: @pink;
                }
            }
            & .row {
                max-width: 900px;
                padding-top: 60px;
                padding-bottom: 60px;
                & p {
                    .p;
                    & img.sign {
                        @media @desktop {
                            width: 260px;
                        }
                        @media @laptop {
                            width: 220px;
                        }
                    }
                }
                & h2 {
                    .bold(23px,23px,4px);
                    color: @pink;
                    margin: 40px 0 20px;
                    text-align: center;
                    @media @laptop {
                        .bold(21px,21px,4px);
                    }
                    @media @mobile {
                        .bold(23px,23px,4px);
                    }
                }
                & ul {
                    margin: 0 0 40px 0;
                    padding: 0;
                    list-style: none;
                    & li {
                        .bold(19px,21px,0.5px);
                        color: #585858;
                        text-align: center;
                        margin-bottom: 10px;
                        padding: 0 100px 6px;
                        @media @laptop {
                            .bold(16px,21px,0.5px);
                        }
                        @media @mobile {
                            .bold(19px,24px,1px);
                            color: black;
                        }
                        & span {
                            .text(16px,21px,0.5px);
                            display: block;
                            margin-top: 5px;
                            @media @laptop {
                                .text(15px,21px,0.5px);
                            }
                            @media @mobile {
                                .text(19px,24px,1px);
                                color: black;
                            }
                        }
                    }
                }
                & .share {
                    & h3 {
                        .text(13px,25px,1px);
                        display: block;
                        border-bottom: thin solid #dcdcdc;
                        padding-bottom: 4px;
                    }
                    & .social {
                        display: inline-block;
                        width: 40px;
                        height: 40px;
                        background: url(../images/social2.png) center top no-repeat;
                        background-size: 40px;
                        padding: 0;
                        vertical-align: middle;
                        //.translate(0,-2px,0);
                        .transition(background-color 0.3s ease);
                        &:hover {
                            background-color: @pink;
                        }
                        &.facebook {
                            background-position: center top;
                            //.translate(0,-1px,0);
                            &:hover {
                                background-position: center -40px;
                            }
                        }
                        &.twitter {
                            background-position: center -80px;
                            //.translate(0,-1px,0);
                            &:hover {
                                background-position: center -120px;
                            }
                        }
                        &.linkedin {
                            background-position: center -160px;
                            &:hover {
                                background-position: center -200px;
                            }
                        }
                        &.google {
                            background-position: center -240px;
                            //.translate(0,-1px,0);
                            &:hover {
                                background-position: center -280px;
                            }
                        }
                    }
                }
            }
            &.teacher {
                padding-top: 150px;
                @media @desktop {
                    padding-top: 120px;
                }
                @media @laptop {
                    padding-top: 90px;
                }
                @media @pad {
                    padding-top: 125px;
                }
                @media @mobile {
                    padding-top: 0;
                }
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 50vh;
                    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,1+40,0+100 */
                    background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
                    background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
                    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
                    display: none;
                    @media @ipad {
                        display: block;
                    }
                    @media @pad {
                        display: block;
                    }
                    @media @mobile {
                        display: none;
                    }
                }
                & .teacher-image {
                    .circle(400px);
                    .cover;
                    margin: 0 auto;
                    -moz-box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                   -webkit-box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                    box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                    position: relative;
                    @media @desktop {
                        .circle(320px);
                    }
                    @media @laptop {
                        .circle(280px);
                    }
                    @media @pad {

                    }
                    & .edit-article-button {
                        top: auto;
                        bottom: -40px;
                        right: auto;
                        left: 50%;
                        margin-left: -15px;
                    }
                }
                & .row {
                    @media @desktop {
                        padding-top: 30px;
                    }
                    & p {
                        margin-bottom: 5px;
                        text-align: center;
                    }
                    & .share {
                        margin-top: 50px;
                    }
                    & h1 {
                        .h1;
                        margin-top: 0;
                        margin-bottom: 30px;
                        text-transform: none;
                        @media @desktop {
                            margin-bottom: 60px;
                        }
                    }
                    & .teacher-gallery {
                        & .MZGalleryImage {
                            height: 250px;
                            padding: 0 0.625rem 1.25rem;
                            @media @mobile {
                                width: 100%;
                            }
                            @media @mobile-l {
                                width: 40%;
                            }
                        }
                    }
                    & .teachers-facebook {
                        padding-top: 30px;
                        text-align: center;
                        & a {
                            display: inline-block;
                            color: white;
                            background: url(../images/social-facebook.png) left center no-repeat;
                            background-size: auto 100%;
                            background-color: #3b5998;
                            padding: 10px 20px 10px 40px;
                            .text(15px,15px,0.5px);
                        }
                    }
                }
            }
        }
        & .teachers-blog {
            padding-bottom: 100px;
            text-align: center;
            & .top-part {
                height: 60vh;
                background-size: auto 100%;
                background-position: left center;
                background-repeat: no-repeat;
                position: relative;
                @media @desktop {
                    height: 50vh;
                }
                @media @laptop {
                    height: 40vh;
                }
                @media @mobile {
                    display: none;
                }
                &:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100px;
                    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+60,000000+100&1+0,1+60,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
                    display: none;
                    @media @pad {
                        display: block;
                    }
                }
                & h1 {
                    .title(50px,50px,4px);
                    color: @pink;
                    position: absolute;
                    margin: 0;
                    padding: 0;
                    top: 50%;
                    left: 60%;
                    @media @laptop {
                        .title(40px,40px,3px);
                        left: 64%;
                    }
                }
            }
            & .teacher {
                    display: inline-block;
                    width: 230px;
                    text-align: center;
                    margin: 0 30px;
                    @media @laptop {
                        width: 210px;
                    }
                    @media @pad {
                        width: 100%;
                        margin: 0 0 40px 0;
                    }
                    @media @mobile {
                        width: 100%;
                        margin: 0 0 40px 0;
                    }
                    & .image {
                        .cover;
                        background-size: 100%;
                        .circle(200px);
                        margin: 0 auto 20px;
                        -moz-box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                       -webkit-box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                        box-shadow: inset 2px 3px 7px rgba(0,0,0,0.4), inset -2px -4px 11px rgba(0,0,0,0.2);
                        .transition;
                        position: relative;
                        @media @laptop {
                            .circle(160px);
                        }
                        @media @pad {
                            .circle(230px);
                        }
                        @media @mobile {
                            .circle(230px);
                        }
                        &:before, &:after {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 26px;
                            margin-left: -13px;
                            height: 4px;
                            margin-top: -2px;
                            .radius(2px);
                            content: '';
                            background: white;
                            .origin(50%,50%);
                            opacity: 0;
                            .transition;
                        }
                        &:after {
                            .rotate(90deg);
                        }
                    }
                    & .name {
                        color: black;
                        text-transform: uppercase;
                        .text(17px,17px,1px);
                        @media @laptop {
                            font-size: 15px;
                        }
                        @media @mobile {
                            font-size: 19px;
                        }
                    }
                    &:hover {
                        & .image {
                            background-size: 110%;
                            &:before, &:after {
                                opacity: 1;
                            }
                        }
                    }
                }
        }
        & .events-list {
            min-height: 100vh;
            .cover;
            text-align: center;
            padding-top: 200px;
            padding-bottom: 100px;
            @media @desktop {
                padding-top: 120px;
            }
            @media @laptop {
                padding-top: 70px;
            }
            @media @mobile {
                padding-top: 0;
            }
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 110px;
                /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,1+40,0+100 */
                background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
                display: none;
                @media @ipad {
                    display: block;
                }
                @media @pad {
                    display: block;
                }
                @media @mobile {
                    display: none;
                }
            }
            & h1 {
                .h1;
                color: @pink;
                @media @laptop {
                    margin-bottom: 15px;
                }
            }
            & .poster-area {
                display: inline-block;
                vertical-align: middle;
                width: 300px;
                position: relative;
                height: 400px;
                @media @desktop {
                    width: 250px;
                    height: 380px;
                    margin: 0 30px;
                }
                @media @laptop {
                    width: 245px;
                    height: 334px;
                    margin: 0px 6px;
                }
                @media @mobile {
                    width: 350px;
                    height: 470px;
                    margin: 0;
                }
                & .poster-frame {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: url(../images/sxoli-xorou-elenis-kakkava-events-frame.png);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: auto 100%;
                }
                & .event {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 97%;
                    background-repeat: no-repeat;
                    background-position: center 55px;
                    background-size: auto 70%;
                    padding: 10px;
                    @media @laptop {
                        height: 92%;
                    }
                    @media @mobile {
                        height: 100%;
                    }
                    & .for-blog {
                        position: absolute;
                        text-align: center;
                        width: 100%;
                        bottom: 34px;
                        left: 0;
                        font-family: Tahoma, Geneva, sans-serif;
                        font-size: 12px;
                        letter-spacing: 1px;
                        @media @laptop {
                            bottom: 12px;
                        }
                        @media @mobile {
                            bottom: 57px;
                            font-size: 17px;
                        }
                    }
                    & a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        &:before, &:after {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            width: 26px;
                            margin-left: -13px;
                            height: 4px;
                            margin-top: -2px;
                            .radius(2px);
                            content: '';
                            background: white;
                            .origin(50%,50%);
                            opacity: 0;
                            .transition;
                        }
                        &:after {
                            .rotate(90deg);
                        }
                        &:hover {
                            &:before, &:after {
                                opacity: 1;
                            }
                        }
                    }
                }
                & a.readmore {
                    position: absolute;
                    right: -450px;
                    top: 50%;
                    margin-top: -30px;
                    background: @pink;
                    color: #fff;
                    .title(17px,17px,2px);
                    padding: 20px 20px 20px 40px;
                    .transition(all 0.4s ease);
                    &:before {
                        content: '+';
                        position: absolute;
                        left: 16px;
                        top: 16px;
                        color: white;
                        .title(25px);
                        .transition(all 0.4s ease);
                    }
                    &:hover {
                        background: black;
                        &:before {
                            color: @pink;
                            font-weight: 400;
                        }
                    }
                }
            }
        }
        & .event-main-page {
            & .top-part {
                .cover;
                background-image: url(../images/sxoli-xorou-elenis-kakkava-events-background2.jpg);
                text-align: center;
                padding-top: 120px;
                padding-bottom: 100px;
                position: relative;
                overflow: hidden;
                @media @desktop {
                    padding: 90px 0 100px;
                }
                @media @laptop {
                    padding: 90px 0 100px;
                }
                @media @mobile {
                    padding: 0px 0 100px;
                }
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100px;
                    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,1+40,0+100 */
                    background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
                    background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
                    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
                    display: none;
                    @media @ipad {
                        display: block;
                    }
                    @media @pad {
                        display: block;
                    }
                    @media @mobile {
                        display: none;
                    }
                }
                & .poster-area {
                    display: inline-block;
                    vertical-align: middle;
                    width: 500px;
                    position: relative;
                    height: 600px;
                    @media @desktop {
                        width: 400px;
                        height: 500px;
                    }
                    @media @laptop {
                        width: 300px;
                        height: 400px;
                    }
                    & .poster-frame {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-image: url(../images/sxoli-xorou-elenis-kakkava-events-frame.png);
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: auto 100%;
                    }
                    & .event {
                        position: absolute;
                        top: -5px;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: auto 70%;
                    }
                }
                & .info {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                        z-index: 100;
                }
                & h1 {
                    .bold(20px,20px,4px);
                    color: black;
                    text-align: center;
                    text-transform: uppercase;
                    @media @desktop {
                        .bold(18px,18px,4px);
                    }
                    @media @laptop {
                        .bold(16px,16px,2px);
                    }
                }
                & h2 {
                    text-align: center;
                    .text(22px,22px,1px);
                    margin: 10px 0;
                    color: @pink;
                    @media @desktop {
                        .text(20px,20px,1px);
                    }
                    @media @laptop {
                        .text(17px,17px,1px);
                    }
                }
                & h3 {
                    text-align: center;
                    .text(16px,16px,1px);
                    margin: 20px 0 10px;
                    color: @black;
                    @media @laptop {
                        .text(14px,14px,1px);
                    }
                    & a {
                        display: inline-block;
                        background-color: @pink;
                        color: white;
                        font-size: 12px;
                        line-height: 16px;
                        padding: 5px 10px 5px 30px;
                        margin-left: 10px;
                        vertical-align: middle;
                        background-image: url(../images/map-icon.png);
                        background-repeat: no-repeat;
                        background-position: 8px center;
                        .transition;
                        &:hover {
                            background-color: black;
                        }
                    }
                }
                & .edit-article-button {
                    top: auto;
                    bottom: 20px;
                    right: 20px;
                }
                &:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100px;
                    left: 0;
                    bottom: 0;
                    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
                    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
                    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
                    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
                }
            }
            & .row {
                padding-bottom: 100px;
                padding-top: 40px;
                & .event-details {
                    text-align: center;
                    & p {
                        .text(18px,24px,0.5px);
                        color: #585858;
                        padding: 0 150px;
                        & strong {
                            font-weight: 800;
                        }
                        @media @desktop {
                            .text(16px,22px,0.5px);
                        }
                        @media @mobile {
                            .p;
                            padding: 0;
                        }
                    }
                }
                & .event-gallery {
                    text-align: center;
                    & h1 {
                        .title(35px,45px,4px);
                        color: @pink;
                        text-align: center;
                        margin: 30px 0;
                    }
                    & .gallery-image {
                        height: 170px;
                        padding: 0 0.625rem 1.25rem;
                        display: inline-block;
                        float: none;
                        clear: none;
                        width: 270px;
                    }
                }
                & .video-list {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    .mzvideo;
                }
            }
            & .share {
                text-align: center;
                & h3 {
                    .text(13px,25px,1px);
                    display: block;
                    border-bottom: thin solid #dcdcdc;
                    padding-bottom: 4px;
                }
                & .social {
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    background: url(../images/social2.png) center top no-repeat;
                    background-size: 40px;
                    padding: 0;
                    vertical-align: middle;
                    //.translate(0,-2px,0);
                    .transition(background-color 0.3s ease);
                    &:hover {
                        background-color: @pink;
                    }
                    &.facebook {
                        background-position: center top;
                        //.translate(0,-1px,0);
                        &:hover {
                            background-position: center -40px;
                        }
                    }
                    &.twitter {
                        background-position: center -80px;
                        //.translate(0,-1px,0);
                        &:hover {
                            background-position: center -120px;
                        }
                    }
                    &.linkedin {
                        background-position: center -160px;
                        &:hover {
                            background-position: center -200px;
                        }
                    }
                    &.google {
                        background-position: center -240px;
                        //.translate(0,-1px,0);
                        &:hover {
                            background-position: center -280px;
                        }
                    }
                }
            }
        }
        & .gallery-article {
            & div.background-image {
                background-color: black;
                .cover;
                background-position: center top;
                height: 60vh;
                position: relative;
                @media @desktop {
                    height: 60vh;
                }
                @media @laptop {
                    height: 60vh;
                }
                @media @ipad {
                    height: 70vh;
                }
                @media @mobile {
                    margin-bottom: 0px;
                }
                & a.edit-article-button {
                    top: auto;
                    bottom: 20px;
                    right: 20px;
                }
            }
            & .row {
                padding-bottom: 100px;
                padding-top: 40px;
                @media @desktop {
                    padding-top: 20px;
                }
                & .event-gallery {
                    text-align: center;
                    & h1 {
                        .title(35px,45px,4px);
                        color: @pink;
                        text-align: center;
                        margin: 30px 0;
                    }
                    & .gallery-image {
                        height: 170px;
                        padding: 0 0.625rem 1.25rem;
                        display: inline-block;
                        float: none;
                        clear: none;
                        width: 270px;
                    }
                }
                & .video-list {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    .mzvideo;
                }
            }
            & .share {
                text-align: center;
                & h3 {
                    .text(13px,25px,1px);
                    display: block;
                    border-bottom: thin solid #dcdcdc;
                    padding-bottom: 4px;
                }
                & .social {
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    background: url(../images/social2.png) center top no-repeat;
                    background-size: 40px;
                    padding: 0;
                    vertical-align: middle;
                    //.translate(0,-2px,0);
                    .transition(background-color 0.3s ease);
                    &:hover {
                        background-color: @pink;
                    }
                    &.facebook {
                        background-position: center top;
                        //.translate(0,-1px,0);
                        &:hover {
                            background-position: center -40px;
                        }
                    }
                    &.twitter {
                        background-position: center -80px;
                        //.translate(0,-1px,0);
                        &:hover {
                            background-position: center -120px;
                        }
                    }
                    &.linkedin {
                        background-position: center -160px;
                        &:hover {
                            background-position: center -200px;
                        }
                    }
                    &.google {
                        background-position: center -240px;
                        //.translate(0,-1px,0);
                        &:hover {
                            background-position: center -280px;
                        }
                    }
                }
            }
        }
        & .formResponsive {
            text-align: center;
            & input[type="button"] {
                border: none;
                background: black;
                .transition;
                color: white;
                .radius(0);
                .noshadow;
                .title(20px,25px,1px);
                .origin(50%,50%);
                padding: 10px 20px;
                margin: 20px 0 50px;
                text-shadow: none;
                cursor: pointer;
                &:hover {
                    .scale(1.1);
                    background: @pink;
                }
            }
        }
        & #contactFormKakkava {
            text-align: center;
            &:before {
                content: '';
                height: 50vh;
                width: 100%;
                display: block;
                background-color: white;
                background-image: url(../images/sxoli-xorou-elenis-kakkava-epikoinonia-contact-forma-2.jpg);
                background-repeat: no-repeat;
                background-position: right top;
                background-size: cover;
                //.bottom-box-inset;
                margin-bottom: 60px;
                @media @desktop {
                    height: 40vh;
                    margin-bottom: 40px;
                }
                @media @laptop {
                    height: 40vh;
                }
                @media @ipad {
                    height: 40vh;
                }
                @media @mobile {
                    //margin-bottom: 0px;
                }
            }
            & input[type="button"] {
                border: none;
                background: black;
                .transition;
                color: white;
                .radius(0);
                .noshadow;
                .title(20px,25px,1px);
                .origin(50%,50%);
                padding: 10px 20px;
                margin: 20px 0 50px;
                text-shadow: none;
                &:hover {
                    .scale(1.1);
                    background: @pink;
                }
            }
            & h2 {
                .title(50px,50px,4px);
                color: @pink;
                margin-top: 0;
                margin-bottom: 60px;
                @media @desktop {
                    .title(46px,46px,3px);
                    margin-bottom: 40px;
                }
                @media @laptop {
                    .title(40px,40px,2px);
                    margin-bottom: 20px;
                }
                @media @mobile {
                    .h1;
                }
            }
            & fieldset {
                width: 600px;
                margin: 0 auto 50px;
                @media @laptop {
                    width: 500px;
                }
                @media @mobile {
                    width: 90%;
                }
                & .rsform-block {
                    width: 100%;
                    margin: 0 0 30px;
                    display:flex;
                    flex-direction: column;
                    @media @desktop {
                        margin: 0 0 20px;
                    }
                    & .formControlLabel {
                        float: none;
                        width: 100%;
                        padding: 0;
                        text-align: center;
                        order: 2;
                        .bold(14px,20px,3px);
                        color: black;
                        padding: 10px 0;
                        @media @desktop {
                            .bold(13px,17px,2px);
                            padding: 5px 0;
                        }
                        & strong {
                            color: @pink;
                            font-size: 30px;
                            transform: translate3d(2px,11px,0);
                            display: inline-block;
                        }
                    }
                    & .formControls {
                        width: 100%;
                        margin: 0;
                        order: 1;
                        & .formDescription {
                            display: none;
                        }
                        & input[type="text"], & textarea {
                            border: none;
                            border-bottom: thin solid grey;
                            .radius(0);
                            .noshadow;
                            background: transparent;
                            .transition(all 0.4s ease);
                            height: auto;
                            .text(17px,20px,1px);
                            padding: 8px 0;
                            .origin(50%,50%);
                            text-align: center;
                            margin-bottom: 0;
                            &:focus {
                                border: thin solid grey;
                                .radius(20px);
                                background: white;
                                .scale(1.1);
                            }
                            @media @desktop {
                                .text(16px,18px,1px);
                            }
                        }
                        & textarea {
                            width: 100%;
                            resize: none;
                            padding: 8px 8px;
                        }
                        & .grecaptcha-badge {
                            margin: 0 auto;
                        }
                        & button {
                            border: none;
                            background: black;
                            .transition;
                            color: white;
                            .radius(0);
                            .noshadow;
                            .title(20px,25px,1px);
                            .origin(50%,50%);
                            padding: 10px 20px;
                            margin: 20px 0 50px;
                            text-shadow: none;
                            &:hover {
                                .scale(1.1);
                                background: @pink;
                            }
                            @media @desktop {
                                .title(17px,22px,1px);
                                padding: 7px 15px;
                            }
                        }
                        & .formValidation {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    & .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        background: black;
        & .social {
            display: flex;
            background: white;
            padding: 60px 0;
            @media @desktop {
                padding: 30px 0;
            }
            @media @laptop {
                padding: 15px 0;
            }
            @media @pad {
                flex-direction: column;
            }
            @media @mobile {
                flex-direction: column;
            }
            & .flex-left {
                width: 50%;
                text-align: right;
                padding-right: 20px;
                .bold(15px,60px,2px);
                @media @laptop {
                    .bold(14px,60px,2px);
                }
                @media @pad {
                    width: 100%;
                    text-align: center;
                }
                @media @mobile {
                    width: 100%;
                    text-align: center;
                }
            }
            & .flex-right {
                width: 50%;
                text-align: left;
                @media @pad {
                    width: 100%;
                    text-align: center;
                }
                @media @mobile {
                    width: 100%;
                    text-align: center;
                }
            }
            & .mzSocialMediaIcon {
                @media @desktop {
                    .scale(0.9);
                }
                @media @laptop {
                    .scale(0.8);
                }
            }
        }
        & .row {
            background: none;
            max-width: none;
            & .col1 {
                text-align: left;
                @media @pad {
                    float: none;
                    width: 100%;
                }
                & .inner {
                    color: white;
                    .title(15px,15px,1px);
                    padding: 25px 0px;
                    @media @desktop {
                        .title(13px,13px,1px);
                    }
                    @media @laptop {
                        padding: 20px 0;
                    }
                    @media @pad {
                        text-align: center;
                        font-size: 15px;
                        font-weight: 400;
                    }
                    @media @mobile {
                        text-align: center;
                        font-size: 15px;
                        font-weight: 400;
                    }
                }
            }
            & .col2 {
                text-align: right;
                padding-right: 0;
                @media @pad {
                    float: none;
                    width: 100%;
                    text-align: center;
                }
                @media @mobile {
                    float: none;
                    width: 100%;
                    text-align: center;
                }
                & .mzDesign {
                    float: right;
                    @media @laptop {
                        height: 53px;
                    }
                    @media @pad {
                        float: none;
                        margin: 20px auto 2px;
                    }
                    @media @mobile {
                        float: none;
                        margin: 20px auto 2px;
                    }
                    & .mzLogo {
                        @media @laptop {
                            width: 53px;
                            height: 53px;
                        }
                    }
                    & .mzLabel {
                        @media @desktop {
                            padding-right: 5px;
                        }
                        & .inner {
                            @media @desktop {
                                font-size: 12px;
                                font-weight: 400;
                            }
                        }
                    }
                }
            }
        }
        & div.login-button, & div.logout-button {
            .circle(20px);
            border: thin solid darkgray;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-color: darkgray;
            .transition;
            opacity: 0.5;
            cursor: pointer;
            margin-top: -2px;
            &:hover {
                opacity: 1;
            }
            .no-mobile;
            float: left;
            margin-right: 15px;
        }
        & div.login-button {
            background-image: url(../images/lock.png);
        }
        & div.logout-button {
            background-image: url(../images/unlock.png);
        }
    }

        // EDITOR ELEMENTS
    & .admin-editor-blocker {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .alpha(10,0,0,0);
        z-index: 9999998;
        &:after {
            content: 'LOADING';
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            width: 130px;
            height: 26px;
            .font(10px);
            background: black;
            color: white;
            margin-top: -20px;
            margin-left: -65px;
            line-height: 26px;
            letter-spacing: 6px;
            .radius(13px);
            .transition(all 1s ease);
            opacity: 1;
        }
        &.active {
            &:after {
                opacity: 0;
            }
        }
			&.saving {
				.alpha(50,255,255,255);
				&:after {
					content:'SAVING';
				}
			}
    }
    & .admin-editor-container {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 0;
        overflow: hidden;
        z-index: 9999999;
        background: black;
        & iframe {
            width: 100%;
            height: 100%;
        }
    }

    & .mzResponsive {
        opacity: 0;
        &:hover {
            //opacity: 1;
        }
        z-index: -1;
    }


    // LOGIN
    & div.login {
        position: fixed;
        top: 50%;
        left: 50%;
        .transition;
        background: white;
        .shadow;
        width: 250px;
        height: 250px;
        margin-top: -125px;
        margin-left: -125px;
        text-align: center;
        .transition(all 0.4s ease);
        opacity: 0;
        z-index: -1;
        .translate(0,-50px,0);
        &.active {
            z-index: 999999;
            .translate(0,0,0);
            opacity: 1;
        }
        & > div.moduletable {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 25px 20px 10px;
            & .close-button {
                position: absolute;
                top: 10px;
                right: 10px;
                .circle(20px);
                background: black;
                cursor: pointer;
                &:before, &:after {
                    content: '';
                    background: white;
                    width: 14px;
                    height: 1px;
                    position: absolute;
                    left: 3px;
                    top: 10px;
                    .origin(50%, 50%);
                    .rotate(45deg);
                }
                &:after {
                    .rotate(-45deg);
                }
            }
            & h3 {
                margin: 0 0 20px;
                .bold(18px,18px,1px);
            }
            & input {
                text-align: center;
            }
            & button {
                background: @darkgrey;
                border: none;
                .transition;
                .bold(13px,13px,1px);
                margin: 5px 0 0;
                padding: 7px 15px;
                &:hover {
                    background: black;
                }
            }
        }
        /*
        & .trigger {
            position: absolute;
            content: '';
            top: -40px;
            left: 20px;
            width: 40px;
            height: 28px;
            cursor: pointer;
            background: url(../images/login.png) center center no-repeat;
        }
        & .logout-button {
            position: absolute;
            content: '';
            top: -40px;
            left: 20px;
            width: 40px;
            height: 28px;
            cursor: pointer;
            background: url(../images/logout.png) center center no-repeat;
            border: 0;
        }
        & .expander {
            position: absolute;
            top: 0;
            right: 0;
            background: @red;
            .shadow;
            .transition(all 0.4s ease);
            border-bottom-left-radius: 10px;
            max-height: 0;
            overflow: hidden;
            padding: 0px;
            &.active {
                padding: 10px;
                max-height: 150px;
                & input {
                    opacity: 1;
                }
                & button {
                    opacity: 1;
                }
            }
            & input {
                .text(12px, 12px, 1px);
                height: auto;
                padding: 5px;
                margin-bottom: 8px;
                .transition(all 0.4s ease);
                opacity: 0;
            }
            & button {
                border: none;
                background: @black;
                color: @grey;
                .text(12px, 12px, 1px);
                padding: 10px;
                margin-bottom: 0;
                .radius(5px);
                .transition;
                .transition(all 0.4s ease);
                opacity: 0;
                &:hover {
                    .shadow;
                    .translate(-1px,-1px,0);
                    color: white;
                }
            }
        }
        & h1 {
            display: none;
        }
        & #login-form {
            & ul {
                display: none;
            }
        }
        */
    }

    // EDITOR
    &.editor {
        & .footer {
            display: none;
        }
        & .new-header {
            display: none;
        }
        & .header-back {
            display: none;
        }
        & div.parallax-window {
            display: none;
        }
        & #content {
            background: white;
            padding-bottom: 0!important;
        }
        & .parallax-mirror {
            display: none;
        }
    }
}

& .MZGalleryContainer {
    text-align: center;
}

& .covid {
  // position: absolute;
  background: white;
  left: 50%;
  top: 0px;
  .shadow;
  // width: 350px;
  padding: 20px 20px 20px 87px;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  background-image: url(https://kakkava.gr/templates/joomlapure/images/covid.png);
  background-position: 20px center;
  background-repeat: no-repeat;
  background-size: 50px auto;
  // z-index: 999999999999999;
}

// LAZY IMAGE BACKGROUND
& div.mzlazy {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* LATEST ADMINISTRATOR NEEDED */

// ADMIN MENU
.adminmenu() {
    float: right;
    & ul {
        margin: 0;
        padding: 0;
        list-style: none;
        & li {
            width: 20px;
            height: 20px;
            overflow: hidden;
            display: inline-block;
            margin-right: 5px;
            & a {
                display: inline-block;
                color: transparent;
                width: 100%;
                height: 100%;
                background: @darkgrey;
                .radius(50%);
                .transition;
                position: relative;
                &:hover {
                    background: black;
                }
                &:before, &:after {
                    position: absolute;
                    width: 50%;
                    height: 2px;
                    background: @white;
                    top: 30%;
                    left: 25%;
                    content: '';
                    .radius(2px);
                }
                &:after {
                    top: 60%;
                }
            }
            &:first-child {
                & a {
                    &:before, &:after {
                        top: calc(~"50% - 1px");
                        left: 25%;
                        .origin(50%,50%);
                    }
                    &:after {
                        .rotate(90deg);
                    }
                }
            }
        }
    }
}

//EDIT ARTICLE BUTTON
.edit-article-button {
    position: absolute;
    width: 30px;
    height: 30px;
    .radius(15px);
    background-color: black;
    background-image: url(../images/edit-article.png);
    background-position: center;
    background-repeat: no-repeat;
    padding: 0!important;
    .transition;
    right: 10px;
    top: -37px;
    z-index: 100;
    opacity: 0.2;
    &:hover {
        opacity: 1;
    }
}

// VIDEO GALLERY
.mzvideo(){
    & .video-thumb {
        overflow: hidden;
        cursor: pointer;
        display: inline-block;
        width: 250px;
        height: 200px;
        margin: 10px;
        & .preview-image {
            .cover;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50px;
                height: 40px;
                .radius(10px);
                background: black;
                opacity: 0.6;
                .transition;
                margin-top: -20px;
                margin-left: -25px;
            }
            &:after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 9px 0 9px 18px;
                border-color: transparent transparent transparent #ffffff;
                top: 50%;
                left: 50%;
                margin-top: -8px;
                margin-left: -7px;
            }
            &:hover {
                &:before {
                    background: red;
                    opacity: 1;
                }
            }
        }
        & .video-title {
            position: absolute;
            bottom: 0;
            opacity: 1;
            left: 0;
            width: 100%;
            background-color: @black;
            color: white;
            text-align: center;
            padding: 10px 10px;
            .text(12px, 16px, 1px);
            display: none;
        }
    }
}

.MZvideoblocker {
    position: absolute;
    z-index: 99999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .alpha(20,0,0,0);
    & .video-modal {
        position: absolute;
        top: 50%;
        left: 50%;
        .shadow;
        background: black;
        & .close-button {
            position: absolute;
            top: -20px;
            right: -20px;
            .shadow;
            .modalClosebutton(40px, black, white, red, white);
        }
    }
}