html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, button {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
box-sizing: border-box;
font-style: normal;
font-weight: normal;
text-decoration: none;
outline: none;
border-radius: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
a:hover, a:active {
outline: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
height: 100%;
background:#000;
overflow: hidden;
position: relative;
font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
}
@media only screen and (max-width: 768px) {
/*html, body {
overflow: auto;
width: auto;
height: auto;
}*/
}
.h * {
z-index: 9999;
}
@media only screen and (max-width: 768px) {
.h {
visibility: visible;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 1;
position: relative;
top: 0;
left: 0;
overflow: auto;
width: 100%;
height: auto;
background: transparent;
z-index: 100;
padding-top: 80px;
}
.h.active {
visibility: visible;
opacity: 1;
z-index: 9999;
}
.h:before {
position: fixed;
top: 0;
left: 0;
content: '';
display: block;
height: 80px;
width: 100%;
background: #000;
}
}
.h i {
display: inline-block;
vertical-align: middle;
background: #b2b2b2;
height: 1px;
width: 40px;
opacity: 0.3;
margin: 0 22px;
}
.h_logo {
position: absolute;
left: 0px;
top: 0px;
width: 160px;
height:160px;
background:#000 url('../images/maiabespoke-logo.png') left top no-repeat;
/*background-size:contain;
-webkit-background-size:contain;
-moz-background-size:contain;
-ms-background-size:contain;
-o-background-size:contain;*/
background-size: 80% 80%;
background-position: center center;
}
.h_mainmenu {
position: absolute;
left: 0px;
width: 160px;
top: 160px;
padding: 20px 13px;
background: #000;
}
.h_mainmenu > ul, .h_mainmenu > ul > li {
padding:0;
margin:0;
list-style:none;
position:relative;
}
.h_mainmenu > ul > li > a {
display: block;
text-decoration: none;
color: #AAA;
font-size: 15px;
line-height: 35px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
position:relative;
}
.h_mainmenu > ul > li > a.dropdown:after {
content:'>';
color:#DDD;
position:absolute;
right: 7px;
width:30px;
line-height:30px;
padding: 0;
text-align:center;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.h_mainmenu > ul > li > a.dropdown:hover:after {
color:#fff;
right:0px;
}
/*.h_mainmenu .minus {
color:#DDD;
position:absolute;
right: 0;
width:30px;
line-height:30px;
padding: 0;
text-align:center;
top:0;
cursor:pointer;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.h_mainmenu .minus:hover {
color:#fff;
padding-left:12px;
}*/
.h_mainmenu > ul > li > a:hover {
color: #eee;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.h_mainmenu > ul > li.active > a, .h_mainmenu > ul > li.active > a:hover {
color: #eee;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.h_mainmenu > ul > li ul {
padding: 10px 12px;
display: none;
position: absolute;
left: 147px;
top: 0;
width: 180px;
background: #000;
}
.h_mainmenu > ul > li ul li a {
display: block;
text-decoration: none;
color: #AAA;
font-size: 15px;
line-height: 35px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
position:relative;
}
.h_mainmenu > ul > li.active ul li a {
color: #eee;
}
.h_mainmenu > ul > li ul li a:hover {
color: #ec9800;
}
.h_mainmenu > ul > li ul li.active a, .h_mainmenu > ul > li ul li.active a:hover {
color: #ec9800;
}
@media only screen and (max-width: 768px) {
.h_logo {
position: fixed;
left: 0px;
top: 0px;
width:80px;
height: 80px;
background-size: 90% 90%;
}
.h_mainmenu {
display:none !important;
}
.h_logo svg {
height: 50px;
}
.h_logo svg * {
fill: #b2b2b2;
}
}
.h_year {
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
top: 30px;
white-space: nowrap;
color: #fff;
font-size: 0;
white-space: nowrap;
}
@media only screen and (max-width: 768px) {
.h_year {
color: #b2b2b2;
position: static;
-webkit-transform: none;
transform: none;
text-align: center;
}
}
.h_year_number {
display: inline-block;
vertical-align: middle;
font-size: 52px;
margin-right: 10px;
}
@media only screen and (max-width: 768px) {
.h_year_number {
font-size: 40px;
}
}
.h_year_text {
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
text-align: left;
}
@media only screen and (max-width: 768px) {
.h_year_text {
font-size: 10px;
line-height: 12px;
}
}
.h_contact {
position: absolute;
top: 50px;
right: 30px;
color: #fff;
font-size: 12px;
letter-spacing: 0.1em;
line-height: 24px;
cursor: pointer;
-webkit-transition: all .6s;
transition: all .6s;
}
.h_contact:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0px;
height: 1px;
background: #fff;
-webkit-transition: all .2s;
transition: all .2s;
}
@media only screen and (min-width: 1201px) {
.h_contact:hover:after {
right: auto;
left: 0;
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.h_contact {
position: static;
color: #000000;
text-align: center;
margin: 0 0 15px 0;
}
}
.h_mob-year {
display: none;
}
@media only screen and (min-width: 769px) {
.h_mob-year {
display: none;
}
}
@media only screen and (max-width: 768px) {
.h_mob-year {
margin-bottom: 0px;
background:#fff;
border-top: 1px solid #f2f2f2;
}
.h_mob-year a {
color: #000000;
font-size: 13px;
text-align: center;
display: block;
line-height: 22px;
border-bottom: 1px solid #f2f2f2;
margin: auto;
}
.h_mob-year a:hover {
color: #ec9800;
}
.h_mob-year a.active {
color: #ec9800;
}
}
.h_email {
position: absolute;
bottom: 20px;
left: 20px;
font-size: 12px;
color: #fff;
letter-spacing: .1em;
line-height: 24px;
-webkit-transition: all .6s;
transition: all .6s;
display:none;
}
.h_email:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0px;
height: 1px;
background: #fff;
-webkit-transition: all .2s;
transition: all .2s;
}
@media only screen and (min-width: 1201px) {
.h_email:hover:after {
right: auto;
left: 0;
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.h_email {
position: static;
color: #000000;
display: none;
text-align: center;
}
}
.h_right {
position: absolute;
right: 30px;
bottom: 30px;
font-size: 0;
line-height: 24px;
}
@media only screen and (max-width: 768px) {
.h_right {
position: static;
text-align: center;
}
}
.h_credits {
display: inline-block;
vertical-align: middle;
font-size: 12px;
letter-spacing: 0.1em;
color: #fff;
cursor: pointer;
}
.h_credits span {
cursor: pointer;
-webkit-transition: all .6s;
transition: all .6s;
position: relative;
line-height: 24px;
display: inline-block;
vertical-align: middle;
}
.h_credits span:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0px;
height: 1px;
background: #fff;
-webkit-transition: all .2s;
transition: all .2s;
}
@media only screen and (min-width: 1201px) {
.h_credits span:hover:after {
right: auto;
left: 0;
width: 100%;
}
}
@media only screen and (min-width: 1201px) {
.h_credits:hover .h_circle {
border: 1px solid white;
}
}
@media only screen and (max-width: 768px) {
.h_credits {
color: #000;
}
}
.h_lang {
display: inline-block;
vertical-align: middle;
}
.h_lang a {
font-size: 12px;
letter-spacing: 0.1em;
color: #fff;
margin-right: 18px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
-webkit-transition: all .6s;
transition: all .6s;
position: relative;
}
.h_lang a:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0px;
height: 1px;
background: #fff;
-webkit-transition: all .2s;
transition: all .2s;
}
.h_lang a.active {
color: #b2b2b2;
pointer-events: none;
}
.h_lang a.active:after {
background: #b2b2b2;
}
@media only screen and (min-width: 1201px) {
.h_lang a:hover:after {
right: auto;
left: 0;
width: 100%;
}
}
.h_lang a:last-child {
margin-right: 0;
}
@media only screen and (max-width: 768px) {
.h_lang a {
color: #000;
}
.h_lang a.active {
color: #b4b4b4;
}
}
.h_circle {
display: inline-block;
vertical-align: middle;
position: relative;
width: 26px;
height: 26px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
margin-right: 10px;
-webkit-transition: all .5s;
transition: all .5s;
}
.h_circle:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 6px;
height: 6px;
background: #fff;
border-radius: 100%;
}
.h_circle:after {
content: '';
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 5px;
height: 5px;
background: #fff;
border-radius: 100%;
-webkit-animation: h-sircle 10s infinite;
animation: h-sircle 10s infinite;
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.h_circle {
display: none;
}
}
.h_close {
display: none;
box-shadow: 0 0 0 1px #f3f3f3;
width: 50px;
height: 50px;
position: fixed;
top: 20px;
right: 50px;
border-radius: 100%;
box-sizing: content-box;
overflow: hidden;
cursor: pointer;
}
.h_close em, .h_close b {
display: block;
width: 16px;
height: 1px;
background: #000;
position: absolute;
-webkit-transition: all 0.5s;
transition: all 0.5s;
top: 50%;
left: 50%;
}
.h_close em:nth-child(1), .h_close b:nth-child(1) {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.h_close em:nth-child(2), .h_close b:nth-child(2) {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transition: all 0.5s .1s;
transition: all 0.5s .1s;
}
.h_close em:nth-child(3), .h_close b:nth-child(3) {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.h_close em:nth-child(4), .h_close b:nth-child(4) {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
-webkit-transition: all 0.5s .1s;
transition: all 0.5s .1s;
}
.h_close b {
width: 0;
}
@media only screen and (min-width: 1201px) {
.h_close:hover b {
width: 16px;
}
.h_close:hover em:nth-child(1) {
left: 0;
top: 0;
}
.h_close:hover em:nth-child(2) {
left: 100%;
top: 100%;
}
.h_close:hover em:nth-child(3) {
left: 100%;
top: 0;
}
.h_close:hover em:nth-child(4) {
left: 0;
top: 100%;
}
}
.h_close.active em, .h_close.active b {
background: #fff;
}
.black .h i {
display: inline-block;
vertical-align: middle;
background: #b2b2b2;
height: 1px;
width: 40px;
opacity: 0.3;
margin: 0 22px;
}
.black .h_logo svg * {
fill: #b2b2b2;
}
.black .h_year {
color: #b2b2b2;
white-space: nowrap;
cursor: pointer;
}
.black .h_contact {
display: none;
}
.black .h_email {
color: #000000;
}
.black .h_email:after {
background: #000000;
}
.black .h_credits {
color: #000000;
}
.black .h_credits span:after {
background: #000000;
}
.black .h_lang {
display: inline-block;
vertical-align: middle;
}
.black .h_lang a {
color: #000000;
}
.black .h_lang a:after {
background: #000000;
}
.black .h_lang a.active {
color: #b2b2b2;
}
.black .h_lang a.active:after {
background: #b2b2b2;
}
.black .h_circle {
border: 1px solid rgba(0, 0, 0, 0.3);
}
.black .h_circle:before {
background: #000;
}
.black .h_circle:after {
background: #000;
-webkit-animation: h-sircleBlack 10s infinite;
animation: h-sircleBlack 10s infinite;
}
@media only screen and (max-width: 768px) {
.black .h_circle {
display: none;
}
}
.black .h_close {
display: block;
}
@-webkit-keyframes h-sircle {
0% {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
10% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
10.01% {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
20% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
20.01% {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
30% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0);
}
100% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0);
}
}
@keyframes h-sircle {
0% {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
10% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
10.01% {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
20% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
20.01% {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.5);
}
30% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0);
}
100% {
width: 160%;
height: 160%;
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0);
}
}
@-webkit-keyframes h-sircleBlack {
0% {
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.5);
}
10% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
10.01% {
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.5);
}
20% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
20.01% {
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.5);
}
30% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
100% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
}
@keyframes h-sircleBlack {
0% {
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.5);
}
10% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
10.01% {
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.5);
}
20% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
20.01% {
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.5);
}
30% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
100% {
width: 160%;
height: 160%;
background: transparent;
border: 1px solid transparent;
}
}
.mob {
display: none;
}
@media only screen and (max-width: 768px) {
.mob {
display: block;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
height: 90px;
width: 100%;
z-index: 9;
}
}
.mob_logo {
position: absolute;
left: 20px;
top: 20px;
height: 50px;
}
.mob_logo svg {
height: 50px;
}
.mob_menu {
display: none;
}
@media only screen and (max-width: 768px) {
.mob_menu {
border: 1px solid rgba(255, 255, 255, 0.3);
width: 50px;
height: 50px;
position: fixed;
display: block;
top: 20px;
right: 20px;
border-radius: 100%;
background-image: url("../images/sprite.svg");
background-position: -4px -56px;
width: 48px;
height: 48px;
background-repeat: no-repeat;
box-sizing: content-box;
z-index: 89;
}
}
.mob_close {
display: none;
}
@media only screen and (max-width: 768px) {
.mob_close {
display: block;
border: 1px solid #f3f3f3;
position: fixed;
top: 20px;
right: 20px;
border-radius: 100%;
background-image: url("../images/sprite.png");
background-position: -31px 0;
width: 31px;
height: 32px;
background-repeat: no-repeat;
box-sizing: content-box;
cursor:pointer;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.mob_close:hover {
border: 1px solid #ccc;
}
.mob_close.hamburger {
background-position: 0 0;
}
}
.copyright {
position: absolute;
color: #FFF;
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 30px;
font-size: 12px;
letter-spacing: 0.1em;
line-height: 24px;
}
@media only screen and (max-width: 768px) {
.copyright {
color: #b4b4b4;
position: static;
-webkit-transform: none;
transform: none;
text-align: center;
margin-top: 10px;
margin-bottom: 35px;
display:none;
}
}
.copyright i {
margin-left: 18px;
margin-right: 32px;
}
@media only screen and (max-width: 768px) {
.copyright i {
display: none;
}
}
.line {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 100%;
}
@media only screen and (max-width: 768px) {
.line {
/*display: none !important;*/
}
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.slider.hide {
opacity: 0;
visibility: hidden;
}
@media only screen and (max-width: 768px) {
/*.slider {
width: 100%;
height: 100%;
position: static;
}*/
}
.slide {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 2s;
transition: all 2s;
}
/*@media only screen and (min-width: 768px) {*/
@media only screen and (min-width: 1px) {
.slide {
background: none !important;
}
}
@media only screen and (max-width: 768px) {
/*.slide {
width: 100vw;
height: 100vh;
opacity: 1;
visibility: visible;
position: static;
background-position: center;
background-size: cover;
}*/
}
.slide.active {
opacity: 1;
visibility: visible;
}
.slide.active .slide_content, .slide.active .slide_image {
opacity: 1;
visibility: visible;
}
.slide_prev, .slide_next {
position: absolute;
-moz-transform: translateY(-80%);
-webkit-transform: translateY(-80%);
transform: translateY(-80%);
top: 80%;
color: #FFF;
background:#000;/*#f9a602*/
width:auto;
height:42px;
line-height:15px;
z-index: 3;
font-size: 13px;
letter-spacing: 0.1em;
cursor: pointer;
-webkit-transition: all .2s;
transition: all .2s;
display:table;
padding: 0 20px 0 40px;
font-size: 14px;
}
.slide_next {
padding: 0 40px 0 20px;
}
.slide_prev:hover, .slide_next:hover {
background:#FFF;
color:#000;
}
.slide_prev > div, .slide_next > div {
display: table-cell;
vertical-align: middle;
}
.slide_next:after {
content: '>';
position: absolute;
top: 12px;
right: 15px;
font-size: 20px;
}
.slide_prev:after {
content: '<';
position: absolute;
top: 12px;
left: 15px;
font-size: 20px;
}
@media only screen and (max-width: 768px) {
.slide_prev, .slide_next {
height: 42px;
}
.slide_prev > div, .slide_next > div {
}
.slide_next:after, .slide_prev:after {
display:block;
}
}
/*.slide_prev:before, .slide_next:before {
content: '';
height: 1px;
width: 30px;
position: absolute;
bottom: 50%;
background: #fff;
-webkit-transition: all .5s;
transition: all .5s;
}
.slide_prev:after, .slide_next:after {
content: '';
height: 1px;
width: 5px;
position: absolute;
bottom: 50%;
background: #fff;
-webkit-transition: all .5s;
transition: all .5s;
}*/
.slide_prev {
left: 0px;
}
/*.slide_prev:before {
right: -50px;
}
.slide_prev:after {
right: -50px;
}
.slide_prev:hover:after {
width: 30px;
}
.slide_prev:hover:before {
width: 0;
right: -10px;
}*/
.slide_next {
right: 0px;
}
/*.slide_next:before {
left: -50px;
}
.slide_next:after {
left: -50px;
}
.slide_next:hover:after {
width: 30px;
}
.slide_next:hover:before {
width: 0;
left: -10px;
}*/
.slide_content, .slide_image {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
max-width: 380px;
position: relative;
z-index: 2;
opacity: 0;
will-change: opacity;
-webkit-transition: margin-top .5s 0s, padding-top .5s 0s, opacity .5s 0s;
transition: margin-top .5s 0s, padding-top .5s 0s, opacity .5s 0s;
}
.slide_content {
display:none !important;
}
.slide_image {
max-width:550px;
}
.slide_thumb {
max-width:100%;
}
@media only screen and (max-width: 768px) {
.slide_content {
opacity: 1;
margin-top: 0px;
padding-top: 0px;
}
}
@media only screen and (max-width: 1380px) and (orientation: landscape) {
.slide_content {
max-width: 320px;
}
}
.slide_day {
font-size: 20px;
/* font-weight: bold; */
color: #000;
letter-spacing: 0;
background: #f9a602;
display: inline-block;
padding: 10px;
}
.slide_year {
font-size: 30px;
line-height: 34px;
font-weight: bold;
color: #fff;
margin-top: 24px;
margin-bottom: 10px;
}
.slide_title {
color: #fff;
font-size: 13px;
line-height: 18px;
margin-bottom: 32px;
font-family:'Ubuntu', arial, sans-serif;
}
.slide_link, .map_link, .contact_link {
color: #fff;
font-size: 14px;
line-height: 46px;
height: 46px;
position: relative;
width: 120px;
margin: auto;
overflow: hidden;
cursor: pointer;
}
.map_link {
width: 200px;
}
.slide_link span, .map_link span, .contact_link span {
display: block;
line-height: 46px;
-webkit-transition: all .6s;
transition: all .6s;
}
.slide_link:after, .map_link:after, .contact_link:after {
content: attr(data-text);
display: block;
line-height: 46px;
-webkit-transition: all .6s;
transition: all .6s;
}
.slide_link:before, .map_link:before, .contact_link:before {
content: '';
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
top: 0;
height: 1px;
background: #fff;
width: 100%;
-webkit-transition: all .6s;
transition: all .6s;
}
@media only screen and (min-width: 769px) {
.slide_link:hover span, .map_link:hover span, .contact_link:hover span {
margin-top: -66px;
}
.slide_link:hover:before, .map_link:hover:before, .contact_link:hover:before {
width: 30px;
}
}
.credits, .contact {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: all .5s;
transition: all .5s;
z-index: 90;
opacity: 0;
background: transparent;
}
@media only screen and (max-width: 768px) {
.credits, .contact {
background: white;
}
}
.credits.active, .contact.active {
visibility: visible;
-webkit-transition: all .5s;
transition: all .5s;
opacity: 1;
}
.credits.active .credits_date, .credits.active .credits_title, .credits.active .credits_text, .credits.active .contact_date, .credits.active .contact_title, .credits.active .contact_text, .contact.active .credits_date, .contact.active .credits_title, .contact.active .credits_text, .contact.active .contact_date, .contact.active .contact_title, .contact.active .contact_text {
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
@media only screen and (max-width: 768px) {
.credits.active .credits_date, .credits.active .credits_title, .credits.active .credits_text, .credits.active .contact_date, .credits.active .contact_title, .credits.active .contact_text, .contact.active .credits_date, .contact.active .credits_title, .contact.active .credits_text, .contact.active .contact_date, .contact.active .contact_title, .contact.active .contact_text {
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
}
}
.credits_content, .contact_content {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
z-index: 2;
background: #fff;
padding: 70px;
border-radius: 50%;
}
@media only screen and (min-width: 769px) {
.credits_content.hide, .contact_content.hide {
opacity: 0;
visibility: hidden;
}
}
@media only screen and (max-width: 768px) {
.credits_content, .contact_content {
position:relative;
left:auto;
top:auto;
height:auto;
width:100%;
margin-top: 45px;
overflow: auto;
padding: 0 20px;
border-radius:none;
}
}
.credits_title, .contact_title {
color: #000000;
font-size: 28px;
line-height: 30px;
margin-bottom: 35px;
-webkit-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 0s 1s;
transition: all 0s 1s;
opacity: 0;
text-align: center;
}
@media only screen and (max-width: 768px) {
.credits_title, .contact_title {
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
}
}
.credits_text, .contact_text {
font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
color: #808080;
font-size: 16px;
-webkit-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
-webkit-transition: all 0s 1s;
transition: all 0s 1s;
text-align: center;
line-height:20px;
}
.credits_text a, .contact_text a {
color: #000;
}
.credits_text span, .contact_text span {
font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
color: #000000;
display: block;
margin-bottom:25px;
}
.credits_text p, .contact_text p {
font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
margin-bottom:20px;
}
.credits_text i, .contact_text i {
display: inline-block;
width: 1px;
height: 14px;
vertical-align: middle;
background: #b5b5b5;
margin: 0 5px;
}
@media only screen and (max-width: 768px) {
.credits_text, .contact_text {
padding-bottom: 90px;
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
}
}
.credits .c, .contact .c {
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0);
-webkit-transition: background 1s;
transition: background 1s;
}
#elips.anim {
-webkit-transition: all .5s 1s ease-in;
transition: all .5s 1s ease-in;
}
.control-back {
position: absolute;
background: #000;
right: 0;
bottom: 0;
left:auto;
transform:translateX(0);
padding: 15px 20px 10px;
text-align: center;
z-index: 94;
display:none;
}
.cat_name {
color: #FFF;
font-size:20px;
padding-bottom: 15px;
}
@media only screen and (max-width: 768px) {
.cat_name {
font-size: 16px;
padding-bottom: 10px;
}
}
.controls {
position: relative;
text-align: center;
pointer-events: none;
-webkit-transition: all 0.5s;
transition: all 0.5s;
padding-top: 10px;
border-top: 1px solid #666;
}
.controls.hide {
opacity: 0;
visibility: hidden;
}
@media only screen and (max-width: 768px) {
.control-back {
left: 50%;
right: auto;
transform: translateX(-50%);
padding:5px 10px;
}
.controls {
padding-top:5px;
}
}
.controls svg {
width: 100%;
height: 100%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.controls .dot {
display: inline-block;
margin: 0 2px;
margin-top:5px;
width: 10px;
height: 10px;
background: #DDD;
cursor: pointer;
pointer-events: auto;
border-radius: 100%;
-webkit-transition: all .2s;
transition: all .2s;
}
@media only screen and (max-width: 768px) {
.controls .dot {
margin: 0 3px;
width: 8px;
height: 8px;
}
}
.controls .dot:hover {
background: #FFF;
}
.controls .dot.active {
width: 10px;
height: 10px;
background: #FFF;
}
.controls .dot.active:hover {
background: #FFF;
}
.controls .dot_year {
color: #fff;
font-size: 12px;
letter-spacing: .1em;
position: absolute;
right: 0;
top: -50%;
margin-right: 20px;
line-height: 20px;
visibility: hidden;
opacity: 0;
-webkit-transition: all .1s 0s;
transition: all .1s 0s;
margin-top: -20px;
white-space: nowrap;
display:none !important;
}
.controls .dot_0 {
left: 50%;
top: 0;
}
.controls .dot_1 {
left: 85%;
top: 15%;
}
.controls .dot_2 {
left: 100%;
top: 50%;
}
.controls .dot_3 {
left: 85%;
top: 85%;
}
.controls .dot_4 {
left: 50%;
top: 100%;
}
.controls .dot_5 {
left: 15%;
top: 85%;
}
.controls .dot_6 {
left: 0%;
top: 50%;
}
.controls .dot_7 {
left: 15%;
top: 15%;
}
@-webkit-keyframes dot {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
opacity: 1;
-webkit-transform: scale(2);
transform: scale(2);
}
90% {
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes dot {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
opacity: 1;
-webkit-transform: scale(2);
transform: scale(2);
}
90% {
opacity: 0;
-webkit-transform: scale(2);
transform: scale(2);
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.map_link {
color: #000;
margin: 30px auto 20px;
}
.map_link:before {
background: #000;
}
.map_link:after {
font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
}
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: all .5s;
transition: all .5s;
z-index: 90;
opacity: 0;
background: white;
}
@media only screen and (max-width: 768px) {
.popup {
background: white;
}
}
.popup.active {
visibility: visible;
-webkit-transition: all .5s;
transition: all .5s;
opacity: 1;
}
.popup.active .popup_date, .popup.active .popup_title, .popup.active .popup_text {
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
@media only screen and (max-width: 768px) {
.popup.active .popup_date, .popup.active .popup_title, .popup.active .popup_text {
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
}
}
.popup_content {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 380px;
padding-left: 100px;
display: none;
z-index: 2;
}
.popup_content.active {
display: block;
}
@media only screen and (max-width: 768px) {
.popup_content {
max-height: calc(100% - 80px);
margin-top: 45px;
overflow: auto;
width: 100%;
max-width: 400px;
padding: 0 20px;
}
}
.popup_date {
position: absolute;
right: 100%;
top: -5px;
border-right: 1px #b2b2b2 solid;
margin-right: -75px;
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
-webkit-transition: all 0s;
transition: all 0s;
}
@media only screen and (max-width: 768px) {
.popup_date {
padding-top: 10px;
position: static;
margin: 0;
margin-bottom: 30px;
border-right: none;
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
}
}
.popup_day {
font-size: 12px;
color: #b2b2b2;
margin-bottom: 10px;
letter-spacing: 0.1em;
}
.popup_year {
font-size: 36px;
color: #000000;
padding-right: 25px;
white-space: nowrap;
}
@media only screen and (max-width: 1380px) and (orientation: landscape) {
.popup_year {
font-size: 50px;
}
}
.popup_title {
color: #000000;
font-size: 24px;
line-height: 30px;
margin-bottom: 40px;
-webkit-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 0s 1s;
transition: all 0s 1s;
opacity: 0;
}
@media only screen and (max-width: 768px) {
.popup_title {
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
}
}
@media only screen and (max-width: 1380px) and (orientation: landscape) {
.popup_title {
font-size: 22px;
}
}
.popup_text {
font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
color: #808080;
font-size: 14px;
line-height: 21px;
-webkit-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
-webkit-transition: all 0s 1s;
transition: all 0s 1s;
max-height: 400px;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
.popup_text {
padding-bottom: 90px;
-webkit-transition: all 0s 0s;
transition: all 0s 0s;
max-height: none;
}
}
@media only screen and (max-width: 1380px) and (orientation: landscape) {
.popup_text {
max-height: 250px;
}
}
.popup .c {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0);
-webkit-transition: background 1s;
transition: background 1s;
}
.contact_link {
position: absolute;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 60px;
text-align: center;
}
.contact_link:after {
font-family: "Zilla Slab", Helvetica, Arial, sans-serif;
}
.map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
visibility: hidden;
opacity: 0;
-webkit-transition: all .6s;
transition: all .6s;
}
@media only screen and (max-width: 768px) {
.map {
background-position: -70px;
background-size: cover;
background-position: center;
}
}
.map.active {
visibility: visible;
opacity: 1;
}
.c {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 100%;
border: 1px solid rgba(255, 255, 255, 0.15);
pointer-events: none;
will-change: background;
}
@media only screen and (max-width: 768px) {
/*.c {
display: none !important;
}*/
}
.c-1 {
width: 93vw;
height: 93vw;
-webkit-transition: background-size 1s 0.8s;
transition: background-size 1s 0.8s;
}
.c-2 {
width: 71vw;
height: 71vw;
-webkit-transition: background-size 1s 0.6s;
transition: background-size 1s 0.6s;
}
.c-3 {
width: 53vw;
height: 53vw;
-webkit-transition: background-size 1s 0.4s;
transition: background-size 1s 0.4s;
}
.c-4 {
width: 45vw;
height: 45vw;
-webkit-transition: background-size 1s 0.2s;
transition: background-size 1s 0.2s;
}
.c-5 {
width: 37vw;
height: 37vw;
-webkit-transition: background-size 1s 0s;
transition: background-size 1s 0s;
}
.c-6 {
width: 29vw;
height: 29vw;
border: none;
-webkit-transition: background-size 1s 0s;
transition: background-size 1s 0s;
}
@media only screen and (max-width: 768px) {
#image {
/*display: none;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-4, .c-5, .c-6 {
display: none !important;
}
}
.loader {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 99999;
display: block;
background-color: #000;
color: #fff;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.loader {
cursor: wait;
}
.loader_title {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 1500;
display: block;
color: #191919;
text-transform: lowercase;
opacity: 1;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.loader_title > img {
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
}
.loader_percent {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 1530;
display: block;
font-size: 18px;
letter-spacing: 1px;
color: #fff;
opacity: 0;
margin-top: 20px;
display: none !important;
}
.loader_image {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
background: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.exp {
position: absolute;
top: 100%;
left: 0;
cursor:pointer;
}
.exp > a {
position: absolute;
top: 0;
left: 0;
cursor:pointer;
}
.exp > a.expfilm:after, .exp > a.exp2minfilm:after {
content:'';
position: absolute;
top: 0;
left: 0;
width:78px;
height:118px;
z-index:1;
background:transparent;
border:1px solid rgba(0, 0, 0, 0);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.exp > a.exp2minfilm:after {
left: 80px;
}
.exp > a.expfilm:hover:after, .exp > a.exp2minfilm:hover:after {
content:'';
position: absolute;
top: 0;
left: 0;
width:70px;
height:110px;
border:5px solid #fff;
}
.exp > a.exp2minfilm:hover:after {
left: 80px;
}
.playmovie {
position:absolute;
display:none;
top:50%;
left:50%;
width:47px;
height:47px;
background:url('../images/playmovie.png') center center no-repeat;
cursor:pointer;
transform:translate3d(-50%,-50%,0);
-webkit-transform:translate3d(-50%,-50%,0);
-moz-transform:translate3d(-50%,-50%,0);
-ms-transform:translate3d(-50%,-50%,0);
z-index:95;
}
@media only screen and (max-width: 768px) {
html, body {
overflow: auto;
overflow-x: hidden;
}
.line {
display:none !important;
}
}