html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,figcaption,figure,footer,header,legend,nav,section{display:block}audio,canvas,label,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}h1{margin:.7em 0;font-size:2em}b,strong{font-weight:700}small{font-size:85%}sub,sup{position:relative;font-size:80%;line-height:0;vertical-align:baseline}sup{top:-.25em}sub{bottom:-.25em}dfn{font-style:italic}abbr[title]{border-bottom:1px dotted}mark{color:#000;background:#ff0}blockquote:before,blockquote:after{content:""}code,kbd,pre,samp{font-family:monospace}pre{overflow:auto;word-break:break-all;word-wrap:break-word;white-space:pre-wrap}audio,canvas,embed,iframe,img,object,svg,video{vertical-align:middle}img{height:auto;max-width:100%;border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}progress{vertical-align:baseline}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button,select{text-transform:none}fieldset{padding:0;margin:0;border:0}legend{padding:0;border:0}input{line-height:normal}input[type=search]{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input::-moz-placeholder{opacity:1}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input[type=checkbox],input[type=radio]{padding:0;margin:4px 0 0;line-height:normal;box-sizing:border-box}textarea{padding:0;vertical-align:top}button{overflow:visible}table{max-width:100%;border-collapse:collapse}th{text-align:left}

input:focus {
    outline: none
}

* {
    box-sizing: border-box
}

html {
    font-size: 8px;
    font-family: 'PT Sans', sans-serif;
}

body {
    font-size: 14px;
    line-height: 3rem;
    margin: 0;
    padding: 0;
    background: rgba(249, 249, 249, 0.5);
}
ol {
    margin-left: -19px;
    margin-top: -7px;
    margin-bottom: 30px;
}
h3 + ol {
	margin-top: 20px;
}
ol li {
    padding: 0;
    position: relative;
    line-height: 1.4;
    margin-bottom: 12px;
    font-size: 20px;
}
ul {
    list-style-type: none;
    margin-left: -6px;
    margin-top: -7px;
    margin-bottom: 30px;
}
h4 + ul {
    margin-top: 15px;
}
ul li {
    padding: 0;
    position: relative;
    line-height: 1.4;
    margin-bottom: 12px;
    font-size: 20px;
}
ul li:before {
    content: '\2014\A0';
    margin-left: -1.2em;
    color: #FF9800;
    position: absolute;
    line-height: .75;
    font-size: 30px;
}
::selection {
    background:  #ff9068;
    color:white    
}

*:focus {
    outline: none;
}

a {
    text-decoration: none;
    color: inherit
}

.italic {
    font-style: italic
}

.logo {
    padding: 4rem;
    display: block;
    flex-shrink: 0
}

.logo img {
    width: 10rem;
}

.container {
    max-width: 1024px;
}

.link {
    transition: color 0.3s ease-in-out;
    text-decoration: none;
    color: #0e38b1;
    border-bottom: 1px solid rgba(14, 56, 177, 0.25);
}

.link:hover {
    color: #e54b4b;
    border-bottom: 1px solid rgba(229, 75, 75, 0.25);
}

.button {
    background: #1d64f9;
    color: #fff;
    box-shadow: 0 6px #1429c7;
    border: none;cursor: pointer;
    padding: 2rem 4rem;
    display: inline-block;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.382em
}

.button:hover {
    box-shadow: 0 6px #132184;
    transform: translateY(2px)
}

.button:active {
    box-shadow: 0 6px #ab3c3c;
    transform: translateY(3px)
    
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1, h2, h3 {
/*    font-weight: 700;*/
    margin: 2rem 0;
    font-family: 'PT Serif', serif;
}

h1 {
    font-size: calc(1.618em * 2);
    line-height: 9rem;
    margin-bottom: 0 !important;
}

h2 {
    font-size: 1.618em;
    margin-top: 4rem;
    margin-bottom: 2rem;
}
.lead {
    font-size: 20px;
    line-height: 1.5;
}
strong {
    font-weight: 600;
}


.skew {
    transform: rotate(-8deg) skew(-15deg);
    display: inline-block;
    color: #fff;
    padding: 0 5px;
}

/* Menu */
.menu {
    display: flex;
    margin-top: 6.5rem
}

.menu__divider {
    flex-grow: 1
}

.menu__feedback {
    font-size:12px;
    color: gray;
    line-height: 2.5rem
}

nav {
    max-width: 90ex;
}

nav > a {
    display: inline-block;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

nav > a.active {
    color: rgba(0,0,0,.84);
    border: none;
    font-weight: 500;
}

nav > a.eng {
    color: gray;
}

/* Footer */
footer {
    margin-top: 10rem;
    border-top: 1px solid rgba(250, 250, 250, 0.3);
    padding: 4rem;
    display: flex;
}

footer .copyright {
    margin-bottom: 1rem;
    margin-right: 70px;
}

/* Main */

.intro {
    font-family: 'PT Serif', Georgia, serif;
    font-size: 1.7vw;
    line-height: 1.618em;
    top: 20vh;
    left: 20rem;
    max-width: 45vw;
    background: white;
    padding: 4rem;
    border: 6px solid #0e38b1;
    margin-bottom: 45px;
    z-index: 100;
}
.video {
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    width: 50vw;
    height: calc(50vw / 1.618);
    bottom: 5rem;
    right: 10rem;
    z-index: 99;
}

.app {
    top: 3rem;
    right: 5rem;
    width: 22rem;
    text-transform: uppercase;
    color: #333;
    font-weight: bold;
    font-size: 10px;
    text-align: left;
    line-height: normal;
}

.minutes {
    padding: .5rem 0 1rem  0;
    font-size: 13px;
}

.app > a > img {
    width: 65%;
    margin-left: -3px;
}

.scroll_down {
    bottom: 10rem;
    left: 12rem;
}
.scroll_down .down {
    width: 25px;
    margin-left: -5px;
}

.main__hero {
    display: flex;
    height: 100vh;
}

#parallax {
    top: 0;
    bottom: 320px;
    right: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    height: 100vh;
}
#parallax > div {
    position: absolute;
}

.main__clockfaces__title {
    width: 100%;
    background: url("images/main-pages/map.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    padding-top: 10rem
}

.main__zContainer {
    position: absolute; 
    z-index: 1000; 
    max-width: 600px
}

.main__clockfaces__title h4 {
    font-weight: 600;
    margin: 0;
    display: inline-block;
    background: linear-gradient(-160deg, #ff8281, #ff9068);
    padding: 0 1rem;
    margin-bottom: 1rem;
    color: white;
    font-size: 2rem;
    line-height: 1.618em
}
.main__clockfaces__title a {
    background: linear-gradient(-160deg, #0575E6, #021B79);
    padding: .5rem 1rem;
    color: white;
    margin-right: 1rem;
}
.main__container {
    padding: 4rem;
}
.main__clockfaces {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap
}

.main__clockface {
    background: url("images/ziferblats/1.jpg");
    background-size: cover;
    display: block;
    flex-grow: 1;
    height: calc(100vw / 3 / 1.618);
    width: calc(100% / 3);
}

.main__clockface .overflow {
    cursor: pointer;
    transition: background .3s ease-out;
}

.main__clockface:hover .overflow {
    background: rgba(26,34,40,.7);
}

.overflow {
    background: rgba(26,34,40,.5);
    height: 100%;
    width: 100%;
    color: white;
}

.main__clockface .overflow {
    display: flex;
    padding:4rem;
    align-items: flex-end
}

.main__clockface__name {
    font-weight: 500;
    font-size: 1.618em;
    font-family: 'PT Sans', sans-serif;
}
.main__clockface__city {
    font-family: 'PT Sans', sans-serif;
}
.main__open {
    border: 3px dashed black;
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between
}

.main__open > * {
    padding: 3rem 10rem;
}

.main__open h2, .main__open p {
    margin: 0
}

.main__open h2 {
    margin-bottom: 1rem
}

.main__open a {
    font-size: 20px
}

.press {
    background: #fff;
    text-align: center;
    font-size: 20px;
    font-family: 'PT Serif';
    width: 50%;
    padding: 25px 11px 30px 8px;
    background: url(images/main-pages/bg-3.png);
    transition: opacity .3s ease-in-out;
}
.press:hover {
    opacity: .4;
    transition: opacity .2s ease-in-out;
}
.press p.quote {
    margin-bottom: 25px;
}
.press .skew {
    font-family: 'PT Sans', sans-serif;
    margin-bottom: 30px;
}
.press a {
    color: #000;
}

.main__bottom_flex {
    display: flex;
    height: 38.1vh;
}

.main__bottom_flex > div {
    width: 50%;
}

.main__career, .main__contacts {
    display: flex;
    background: center;
    flex-grow: 1
}
.main__career h2.skew, .main__contacts h2.skew {
    margin-top: 1rem;
}

.main__career:hover > .dim, .main__contacts:hover > .dim {
    background: rgba(0,0,0,.6);    
} 

.main__bottom_menu .dim {
    transition: background .2s ease-in-out;
    background: rgba(0,0,0,.5);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main__contacts > .dim {
    background: transparent
}

.main__bottom_menu h2 {
    font-size: 4rem;
    background:linear-gradient(-160deg, #ff8281, #ff9068);
    padding: 1rem;
}

/*.main__contacts {
    align-items: center;
    justify-content: center;
}*/

.main__career {
    background-image: url('images/main-pages/team-teaser.jpg');
    background-size: auto 100%;
}

.main__contacts {
    background-image: url('images/main-pages/map.png');
}

.main__my {
    background: linear-gradient(117deg, #0033ff, #ce7082, #4f3a4b);
    background-size: 600% 600%;
    -webkit-animation: gradientAnimation 59s ease-in-out infinite;
    -moz-animation: gradientAnimation 59s ease-in-out infinite;
    -o-animation: gradientAnimation 59s ease-in-out infinite;
    animation: gradientAnimation 59s ease-in-out infinite;
    color: white;
    background-size: 200% 200%;
    background-position: 40%;
    font-family: 'PT Serif', Georgia, serif;
    font-size: 18px;
    line-height: 1.5em;
    position: relative
}
@-webkit-keyframes gradientAnimation {
    0% {
        background-position: 0% 87%;
    }
    50% {
        background-position: 100% 14%;
    }
    100% {
        background-position: 0% 87%;
    }
}
@-moz-keyframes gradientAnimation {
    0% {
        background-position: 0% 87%;
    }
    50% {
        background-position: 100% 14%;
    }
    100% {
        background-position: 0% 87%;
    }
}
@-o-keyframes gradientAnimation {
    0% {
        background-position: 0% 87%;
    }
    50% {
        background-position: 100% 14%;
    }
    100% {
        background-position: 0% 87%;
    }
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 87%;
    }
    50% {
        background-position: 100% 14%;
    }
    100% {
        background-position: 0% 87%;
    }
}
.main__my__picture {
    background: url('images/main-pages/indira.png');
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    right:6%;
    bottom:0;
    top: 0;
    width:27%;
}

.main__my__text {
    width: 75%
}
.main__my__text span {
    margin-top: 6px;
    display: block;
}

.main__my__text a {
    font-size: 16px;
}

.main__my .link {
    color: white;
    border-bottom-color: white
}

.main__my__text, .main__my__more {
    padding: 2rem 8rem
}
.skew.main__my__people_love,
.skew.main__my__zifer {
    font-family: 'PT Sans', sans-serif
}
.main__my__more {
    border-top: 1px solid rgba(255,255,255,.2);
    height: 8rem
}

.main__my__more > div {
    position: absolute
}

.main__my h2 {
    margin-left: 3rem
}
.dim h2,
.main__my__title h2 {
    font-family: 'PT Sans', sans-serif !important;    
}

.main__my__title{
    display: flex;
    flex-wrap: wrap;
    padding-top: 3rem;
    margin-left: 1.5rem;
}

.main__my__title > div {
    margin-top: -18px;
    margin-left: 1rem   
}

.main__my__title > div > span {
    background:linear-gradient(-160deg, #ff8281, #ff9068);
    margin-top: 1.5rem;
    display: inline-block;
}

.main__my__zifer {
    margin-left: -3px
}

/* Contacts */
.person {
    display: flex;
    align-items: center;
    flex-shrink: 0
}
.person > img {
    height: 10rem;
    width: 10rem;
    border-radius: 4px;
    margin-right: 2rem;
}

.person__name {
    font-weight: 700
}

.person__position {
	color: #7b7b7b;
	line-height: 2.25rem;
	font-size: 13px;
	margin-bottom: 4px;
}

.contacts__backoffice {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.contacts__backoffice .person {
    width: calc(100% / 2 - 2rem)
}

.contacts__backoffice .person:nth-child(-n+3) {
    margin-bottom: 3rem
}

.clockfaces__title {
    display: flex;
    padding-top: 4rem;
    padding-bottom: 1rem;
}

.clockfaces__title h2 {
    margin: 0
}

.clockfaces__title .tabs {
    margin-left: 4rem
}

.clockfaces {
    margin-top: 1.5rem
}

.clockface {
    display: flex;
    margin: 2rem 0
}

.clockface:hover {
    background: #f6f4e5;
    cursor: pointer;
    border-radius: 4px;
}

.clockface:hover .clockface__image {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.clockface__image {
    height: 16rem;
    width: 16rem;
    border-radius: 4px;
    background-size: cover;
    flex-shrink: 0;
    margin-right: 2rem
}

.clockface__title {
    margin: 0;
    width: 20ex
}

.clockface__description {
    padding: 1rem 2rem;
    flex-basis: 25%
}

.clockface__description strong {
    display: block
}

.contacts h2 tabs {
    font-size: 15px;
}

/* Tabs */
.tabs {
    display: inline-flex;
    overflow: hidden;
    border-radius: 4px;
}
.tab {
    padding: 0 1rem;
    box-sizing: border-box;
    border: 2px solid #eee9cc;
    transition: background .3s ease-in-out;
    color: #6E6C5F
}
.tab:not(:first-child) {
    margin-left: -2px;
}

.tab:hover {
    background: #f6f4e5;
    cursor: pointer
}

.tab:active {
    background: #D7CDAE
}

.tab.active {
    background: #eee9cc;
    color: rgba(0,0,0,.84)
}

#list, #googleMap {
    overflow: hidden;
    transition: height .5s ease-in
}

/* Partnership */
.partnership {
    background: url("images/partnership/video-cover.jpg");
    height: 55vh;
    background-size: cover;
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
}
.partnership__container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: rgba(0,0,0,.65);
}
.partnership video {
    min-width: 100vw;
}

.partnership .menu a {
    color: white;
    border-color: white;
}

.partnership__welcome {
    position: absolute;
    bottom: 7rem;
    color: white;
    max-width: 200ex;
    font-size: 16px;
    padding: 0 0;
}
.benefits {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    margin-right: 40px;
}
.partnership__sections {
    display: flex;
    justify-content: space-around
}

.partnership__section {
    width: calc(100% / 3 - 6rem);
    margin-top: 4rem
}

.partnership__section__header {
    border: 3rem solid #fff96c;
    padding: 3rem;
    font-size: 5rem;
    font-weight: bold;
    color: #fff96c;
    margin-bottom: 3rem;
    padding-top: 16rem;
}

.partnership__section:nth-child(2) .partnership__section__header {
    border-color: #7ac374;
    color: #7ac374
}

.partnership__section:last-child .partnership__section__header {
    border-color: #ed6878;
    color: #ed6878
}

.partnership__section a {
    font-size: 1.618em;
    font-weight: bold;
}

.partnership__join {
    display: flex;
    justify-content: center;
    padding: 5rem; 
}

.partnership__join > div {
    padding: 6rem;
    border-radius: 4px;
    border: dashed 2px lightgray;
    max-width: 70ex;
    text-align: center
}

.partnership__join h2 {
    margin: 0;
    margin-bottom: 3rem;
    font-size: 4rem;
    line-height: 1.618em;
}

.partnership__text, .partnership__form {
    padding-left: 18rem;
    max-width: 70%;
}
.partnership__text p {
    font-size: 20px;
    line-height: 1.68;
    max-width: 80%;
}
.partnership__text p.image {
    max-width: 100%;
    margin-bottom: 40px;
    margin-top: 10px;   
}
.partnership__text p.image span {
    font-size: 16px;
}
.partnership__form h2,
.partnership__text h2 {
    font-size: 36px;
    margin-top: 60px;    
}
.partnership__form label,
.partnership__text h3 {
    font-size: 24px;
    font-family: 'PT Serif', sans-serif;
    margin-bottom: 5px;
    margin-top: 35px;
}
.partnership__text h3 + p {
    margin-top: 15px;
}
.partnership__text h4 {
    font-size: 16px;
    text-transform: uppercase;
    color: #7b7b7b;
    margin-bottom: 0;
    margin-top: 0;
}
.partnership__text h4 + p {
    margin-top: 5px;
}
.partnership__text img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 8px;
	margin-top: 10px;
}

.partnership__text blockquote {
    padding: 0;
    font-size: 24px;
    margin: 3rem 0;
    line-height: 1.6em;
    position: relative;
}

.partnership__text blockquote::before {
    content: '„';
    color: #FF9800;
    line-height: 3rem;
    font-size: 20rem;
    position: absolute;
    top: -5.8rem;
    left: -9rem;
    font-family: 'PT Sans', sans-serif;
}

.partnership__form label {
    display: block;
}

.partnership__form textarea {
    padding: 2rem;
    display: block;
    width: 100%;
    margin-bottom: 3rem;
    border-radius: 4px;
    height: 350px;
    border: none;
    box-shadow: -1px 1px 10px 0px #f3f3f3;
    margin-top: 20px;
    margin-bottom: 40px;
}

.partnership__form textarea:focus {
    border-color: #1429c7
}

.partnership__divider {
    border: 1.5px dashed lightgray;
    height: 1px;
    margin-top: 70px;
    margin-bottom: 70px;

}

.expert {
    font-family: 'PT Serif', Georgia, serif;
    max-width: 120ex;
    margin-left: 18rem;
    margin-top: -8rem;
    padding-right: 3rem;
}

.expert h1, .expert h2 {
    font-weight: 400;
    line-height: 1.382em;
}

.expert__header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    position:relative
}

.expert__header img {
    position: absolute;
    height: 60%
}

.expert__text {
    max-width: 80ex;
}

.expert__form {
    max-width: 50ex
}

.expert__options {
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.expert__options .italic {
    margin-top: 1rem;
    font-size: 12px;
    line-height: 1.618em;
    font-variant: normal;
    color: gray;
}

.expert__options__option {
    flex-basis: 20ex;
    flex-grow: 1;
    text-align: left;
}

.expert__options__option h3 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 1em;
    margin-top: 2em;
}

.expert__options__option div {
    font-family: 'PT Sans', sans-serif;    
}

.expert input,
.expert textarea,
.expert select {
    font-family: 'PT Sans', sans-serif;
    font-size: 2rem;
    border: 1px solid lightgray;
    margin-bottom: 3rem;
    width: 100%;
    max-width: auto;
    display: block;
    padding: 1rem 2rem;
    color: gray
}
.expert input[type="submit"] {
    font-weight: bold;
    color: white;
    background:rgb(252, 145, 128)
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .main__clockface {
        height: calc(100vw / 2 / 1.618);
        width: calc(100% / 2);
    }
    .main__hero {
        height: 60vh;
    }
    #parallax {
        height: 60vh;
    }
    .intro {
        top: 15vh;
    }
    .video {
        bottom: 10rem;
    }
}

@media screen
  and (orientation: portrait) 
  and (max-device-width: 600px)  {
      

    .scroll_down {
        display: none;
    }
    .expert {
        margin: 0;
        padding: 0 5rem;
    }
    .main__zContainer {
        position: static;
    }
    .main__hero {
        height: auto;
        display: block;
    }
    .logo {
        text-align: center;
    }
    .menu {
        padding: 2rem;
        text-align: center;
        margin: 0;
    }
    #parallax {
        position: static;
        height: auto;
    }
    #parallax > div {
        position: static;
        width: 100vw;
        max-width: 100vw;
        height: auto;
    }
    #parallax > div.video {
        height: 30vh;
    }
    .video {
        box-shadow: none;
        border-radius: 0;
    }
    .intro {
        font-size: inherit;
        margin:0;
    }
    .app {
        text-align: center;
        padding: 2rem;
    }
    .app > a > img {
        height: 4rem;
    }
    .expert h1 {
        font-size: 4rem;
    }
    .main__bottom_flex {
        display: block;
        height: auto;
    }
    .main__bottom_flex > * {
        display: block;
        padding: 5vh;
        width: 100%;
    }
    .main__clockfaces {
        display: block
    }
    .main__clockface {
        height: calc(100vw / 1.618);
        width: 100%
    }
    .main__bottom_menu {
        display: block
    }
    .main__bottom_menu > div:first-child, 
    .main__bottom_menu > div:nth-child(2),
    .main__bottom_menu > div:last-child {
        width: 100%
    }

    .main__my__title > div {
        margin-left: 2.5rem
    }

    .expert__options {
        display: block;
    }
    .main__my__text {
        width: 100%;
        padding: 3rem
    }
    .main__my__more {
        margin: 0;
        padding: 3rem;
        height: auto;
    }
    .main__my__more > div {
        position: static
    }
}