@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&display=swap&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap&subset=latin-ext');

*:hover,
* { transition: .3s color; }

html,
body { width: 100%; height: 100%; }
body { font-family: 'Roboto Condensed', sans-serif; font-size: 16px; color: #000; }

/*START: CLASSES*/

.section-title { font-size: 72px; font-weight: 700; color: #000; text-transform: uppercase; }
.section-title.medium { font-size: 48px; }
.section-title.gray { color: #595959; }
.section-title.white,
.section-title .white { color: #FFFFFF; }
.section-title.gold { color: #EABA13; }
.section-title.red { color: #D7131F; }
.img-responsive { height: auto; width: 100%; }

.section .back { text-align: center; margin: 50px 0 30px; }
.section .back a { padding: 20px 80px; border: 1px solid #000; display: inline-block; text-transform: uppercase; font-weight: 700; transition: .3s; }
.section .back a:hover { color: #fff; background-color: #000; transition: .3s; }

/*END: CLASSES*/

/*START: HEADER*/

header { position: fixed; top: 0; left: 0; height: 100px; display: flex; padding: 0 25px;
    justify-content: space-between; width: 100%; z-index: 10; transition: .3s; align-items: center; color: #fff; }
header.black { transition: .3s; color: #000; }
header.scroll { background-color: rgba(255, 255, 255, .9); top: 0; transition: .3s; color: #000; height: 60px; }
header .logo { height: 85px; width: 91px; display: block; background: no-repeat center /cover; transition: .3s; }
header .logo:hover { opacity: .7; transition: .3s; }
header.scroll .logo { height: 50px; width: 53.33px; }

#nav-icon { width: 35px; height: 27px; position: relative; cursor: pointer; display: none; margin: -1px 0 0 20px;
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; }
#nav-icon span { display: block; position: absolute; height: 5px; width: 100%; background: #fff; opacity: 1; left: 0;
    -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.scroll #nav-icon span { background: #000; }
#nav-icon span:nth-child(1) { top: 0; }
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) { top: 10px; }
#nav-icon span:nth-child(4) { top: 20px; }
#nav-icon.open span:nth-child(1) { top: 18px; width: 0; left: 50%; }
#nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#nav-icon.open span:nth-child(4) { top: 18px; width: 0; left: 50%; }

#block-main { text-transform: uppercase; font-weight: 700; margin-top: -10px; }
.scroll #block-main { margin-top: 0; }
#block-main ul,
#social-menu { display: inline-block; }
#social-menu img { width: 25px; height: auto; }
#block-main ul,
#block-main li { margin: 0; padding: 0; position: relative; }
#block-main li { display: inline-block; cursor: pointer; }
#block-main a { padding: 0 10px; }
#block-main ul li.active-trail,
#block-main > ul > li:hover > span,
#block-main > ul > li:hover > a { color: #D7131F; }
#block-main ul span { padding: 0 10px 21px; }

#block-main ul ul { display: none; background-color: #fff; padding: 20px; position: absolute; color: #000; width: 230px; top: 42px; left: 50%; transform: translateX(-50%); box-shadow: 0 5px 10px -5px rgba(0,0,0,0.25);}
#block-main ul ul:before { display: block; content: ''; border: 10px solid #fff; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); }
#block-main ul .expanded:hover ul { display: block; }
#block-main ul ul li { display: block; }
#block-main ul ul a { padding: 10px 0; display: block; }
#block-main ul ul li:hover span,
#block-main ul ul li:hover a { color: #D7131F; }

#social-menu { margin-top: -6px; vertical-align: middle; position: relative; z-index: 2; }
#social-menu a { padding: 3px 2px; border: 2px solid #fff; transition: .3s; border-radius: 100%; font-size: 12px; width: 16px; margin: 0 5px; }
.scroll #social-menu a,
.black #social-menu a,
.open #social-menu a { border-color: #000; transition: .3s; }
#social-menu a:hover { border-color: #D7131F; color: #D7131F; transition: .3s; }
#block-main.open span,
#block-main.open a { color: #000; }

@media (max-width: 768px) {
    #nav-icon { display: inline-block; vertical-align: middle; }
    #nav-icon.open span,
    .black #nav-icon span { background-color: #000; }
    #block-main ul { text-align: right; font-size: 24px; display: none; background-color: #fff; position: fixed; transition: top .3s; right: 0; top: 0; width: 50vw; box-shadow: 0 6px 5px 0 rgba(0,0,0,.5); height: 100vh; padding: 80px 23px 0 0; }
    #block-main li { display: block; }

    .scroll #block-main ul { top: 60px; transition: top .3s; padding-top: 20px; }

    #block-main ul ul { position: static; background: none; transform: none; width: initial; font-size: 20px; box-shadow: none; height: initial; padding: 15px 20px 15px 0; }
    #block-main ul ul:before { display: none; }
    #block-main ul .expanded:hover ul { display: none; }
    #block-main ul ul a { padding: 5px 0; }
}

@media (max-width: 500px) {
    #block-main ul { width: 100vw; }
    #block-theme-branding { position: relative; z-index: 2; }
}

/*END: HEADER*/

/*START: FOOTER*/

#block-social-media { display: flex; overflow: hidden; flex-wrap: wrap; }
#block-social-media a { padding: 0; height: 200px; }
#block-social-media .image-bg,
#block-social-media .background { transition: .3s; width: 50%; height: 100%; display: inline-block; vertical-align: middle; text-align: center; color: #fff; text-transform: uppercase; font-weight: 700; }
#block-social-media .social-media-0 .background { background-color: #000; padding-top: 30px; }
#block-social-media .social-media-1 .background { background-color: #3650AE; padding-top: 60px; }
#block-social-media .social-media-1 .background img { margin-bottom: 20px; }
#block-social-media .social-media-2 .background { background-color: #D7131F; padding-top: 75px; }
#block-social-media .social-media-2 .background img { height: 45px; width: auto; margin-bottom: 30px; }

#block-social-media .social-media { overflow: hidden; }
#block-social-media .social-media span { display: block; }
#block-social-media .social-media:hover .image-bg { transform: scale(1.1); transition: .3s; }
#block-social-media .social-media:hover span { animation: pulse 1s linear .5s infinite; }
#block-social-media .social-media:hover img { animation: pulse 1s linear 0s infinite; }

#block-insta-feed { background-color: #fff; position: relative; z-index: 1; }
#block-insta-feed .section-title { font-size: 36px; text-align: center; padding: 30px 0; }
#block-insta-feed .section-title span { vertical-align: middle; }

#block-insta-feed .instafeedblock #instafeed { display: flex; justify-content: space-between; margin: 50px 0 50px; flex-wrap: wrap; }
#block-insta-feed .instafeedblock .ifeed { padding: 10px; width: 12.5%; }
#block-insta-feed .instafeedblock .ifeed a { display: block; overflow: hidden; height: 100%; transition: opacity 0.3s linear; }
#block-insta-feed .instafeedblock .ifeed a:hover { opacity:0.75; }
#block-insta-feed .instafeedblock .ifeed img { max-width:none; margin: 0 auto; }

.foot-nav { display: flex; flex-wrap: wrap; height: 100px; justify-content: space-between; align-items: center; padding: 0 50px; position: relative; }
.foot-nav .rights { font-size: 12px; color: #e5e5e5; text-transform: initial; position: absolute; bottom: 10px; right: 60px; }

#block-footer-logo .logo { height: 85px; width: 91px; display: block; background: no-repeat center /cover; }

#block-footer-main { text-transform: uppercase; font-weight: 700; margin-top: -10px; }
.scroll #block-footer-main { margin-top: 0; }
#block-footer-main ul { display: inline-block; }
#block-footer-main ul,
#block-footer-main li { margin: 0; padding: 0; position: relative; }
#block-footer-main li { display: inline-block; cursor: pointer; }
#block-footer-main a { padding: 0 10px; }
#block-footer-main > ul > li:hover > a { color: #D7131F; }
#block-footer-main ul span { padding: 21px 10px 0; }

#block-footer-main ul ul { display: none; background-color: #e8e8e8; padding: 20px; position: absolute; color: #000; width: 230px; bottom: 40px; left: 50%; transform: translateX(-50%); }
#block-footer-main ul ul:before { display: block; content: ''; border: 10px solid #e8e8e8; position: absolute; z-index: 2; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); }
#block-footer-main ul .expanded:hover ul { display: block; }
#block-footer-main ul ul li { display: block; }
#block-footer-main ul ul a { padding: 10px 0; display: block; }
#block-footer-main ul ul li:hover a { color: #D7131F; }

@media (max-width: 1280px) {
    #block-social-media .social-media-0 .background { padding-top: 46px; }
    #block-social-media .social-media-0 .background img { height: 80px; margin-bottom: 20px; }
    #block-social-media .social-media-2 .background img { height: 30px; margin-bottom: 40px; }
    #block-insta-feed .instafeedblock .ifeed { width: 25%; }
}

@media (max-width: 880px) {
    #block-social-media a { height: 150px; }
    #block-social-media .social-media-0 .background { padding-top: 0; }
    #block-social-media .social-media-1 .background { padding-top: 10px; }
    #block-social-media .social-media-2 .background { padding-top: 25px; }
    #block-social-media .image-bg { width: 30%; }
    #block-social-media .background { width: 70%; }
}

@media (max-width: 768px) {
    #block-footer-main ul { display: none; }
    .foot-nav .rights { position: static; margin-top: 12px; }
}

@media (max-width: 700px) {
    #block-social-media .image-bg { width: 0; }
    #block-social-media .background { width: 100%; }
}

@media (max-width: 575px) {
    #block-social-media .image-bg { width: 50%; }
    #block-social-media .background { width: 50%; }
    #block-insta-feed .instafeedblock .ifeed { width: 50%; }
}

@media (max-width: 460px) {
}

@media (max-width: 407px) {
    .foot-nav { justify-content: center; padding-top: 20px; }
    #block-footer-main { padding: 20px 0; }
}

/*END: FOOTER*/

/*START: FRONT*/

.front .section { background: no-repeat center /cover; position: relative; overflow: hidden; }

.front .slider { background: linear-gradient(180deg, rgba(0, 0, 0, .6) 5.44%, rgba(0, 0, 0, 1) 93.44%); height: 100vh; }
.front .slider img { opacity: .5; }
.front .slider .text { overflow: hidden; padding: 0 20px 20px; line-height: 1; position: absolute; bottom: 100px; width: 600px; z-index: 1000; right: 0; /*background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, .7) 100%);*/ color: #fff; }
.front .slider .text p { font-size: 48px; font-weight: 300; text-transform: uppercase; }
.front .slider .slick-dots { bottom: 20px; }
.front .slider .slick-dots li { width: 30px; }
.front .slider .slick-dots li button::before { content: ''; border: 1px solid #9D9D9D; height: 1px; opacity: 1; width: 30px; }
.front .slider .slick-dots li.slick-active button::before { border-color: #EABA13; }
.front .slick-dotted.slick-slider { margin-bottom: 0; }
.front .slick-arrow { position: absolute; bottom: 30px; z-index: 2; cursor: pointer; }
.front .slider .slick-arrow { opacity: 1; }
.front .slick-arrow.next { right: 20px; }
.front .slick-arrow.next:hover { animation: bounce-arrow 1s linear 0s infinite; }
.front .slick-arrow.prev { left: 20px; }
.front .slick-arrow.prev:hover { animation: bounce-arrow-reverse 1s linear 0s infinite; }
.front .slider [data-animation-in] {
    opacity: 0;
}
.front .slider .player-container { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; }
.front .slider video { filter: brightness(.7); min-height: 100%; min-width: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; }

.front .slider .slick-track { height: 100vh; }
.front .slider .slide { overflow: hidden; }
.glitch-img { background: no-repeat center /cover; z-index: -1; position: absolute; top: calc(-1 * 5px); left: calc(-1 * 10px); width: calc(100% + 10px * 2); height: calc(100% + 5px * 2);
    transform: translate3d(0,0,0); background-blend-mode: initial;
}
.front .glitch-img { filter: brightness(.5); }
.glitch-img:nth-child(2) { background-color: transparent; animation-name: glitch-anim-1; }
.glitch-img:nth-child(3) { background-color: transparent; animation-name: glitch-anim-2; }
.glitch-img:nth-child(4) { background-color: transparent; animation-name: glitch-anim-3; }
.glitch-img:nth-child(5) { background-color: #af4949; background-blend-mode: overlay; animation-name: glitch-anim-flash; }
.glitch-img:nth-child(n+2) { animation-duration: 4s; animation-delay: 2s; animation-timing-function: linear; animation-iteration-count: infinite; opacity: 0; }

.front .video .background { background: rgba(234, 186, 19, .7); position: relative; z-index: 1; padding: 100px 0 50px; }
.front .video .background > div { padding: 30px 100px 50px; }
.front .video .section-title { line-height: 80px; margin-bottom: -38px; padding: 0 15px; position: relative; z-index: 1; }
.front .video .project-logo { opacity: .4; height: 110%; width: auto; position: absolute; top: -50px; right: -15%; transform: rotate(-11.89deg); }
.front .video .more { text-align: center; position: relative; margin-top: 100px; font-family: Roboto, sans-serif; }
.front .video .more a { display: inline-block; }
.front .video .video-more { position: absolute; right: 0; top: 14px; }
.front .video .video-more:hover { animation: bounce-arrow 1s linear 0s infinite; }
.front .video .bar { margin-bottom: -4px; min-width: 1860px; }

.front .movies { display: flex; margin: 0 -7px; flex-wrap: wrap; }
.front .movies .movie { overflow: hidden; position: relative; cursor: pointer; }
.front .movies img { height: auto; width: 100%; transition: .3s; filter: brightness(.7); }
.front .movies .title { position: absolute; bottom: 15px; left: 30px; color: #fff; font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.front .movies .video-embed-field-launch-modal { overflow: hidden; position: relative; cursor: pointer; padding-bottom: 56.25%; height: 0; }
.front .movies .video-embed-field-launch-modal:before { z-index: 1; transition: .3s; display: block; content: ''; width: 100px; height: 100px; background: rgba(234, 186, 19, .8); border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.front .movies .video-embed-field-launch-modal:after { z-index: 2; transition: .3s; display: block; content: ''; border: solid; border-width: 15px 0 15px 20px; border-color: transparent transparent transparent #000; position: absolute; top: 50%; left: 50.75%; transform: translate(-50%, -50%); }
.front .movies .movie:hover img { transform: scale(1.1); transition: .3s; }
.front .movies .movie:hover .video-embed-field-launch-modal:before { background: rgba(0, 0, 0, .8); transition: .3s; }
.front .movies .movie:hover .video-embed-field-launch-modal:after { border-color: transparent transparent transparent rgba(234, 186, 19, .8); transition: .3s; }

.front .movies .col-md-4,
.front .articles .col-md-4 { padding-left: 7px; padding-right: 7px; flex: 1 0 auto; }

.front .xtreme { position: relative; background-color: rgba(0, 0, 0, .4); background-blend-mode: overlay; background-attachment: fixed; height: 700px; }
.front .xtreme .section-title { text-align: center; position: relative; height: 100%; }
.front .xtreme .logos { text-align: right; position: absolute; bottom: 50px; right: 100px; }
.front .xtreme .glitch-img { z-index: 1; filter: brightness(1); top: 40%; }

.front .news .more { font-size: 18px; }
.front .news .more:hover img { animation: bounce-arrow 1s linear 0s infinite; }
.front .news > div { padding: 20px 100px 100px; }
.front .news .section-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.front .news .section-title .more { color: #9D9D9D; display: inline-block; }
.front .news .section-title img { margin: -2px 15px 0 0; }

.front .articles { display: flex; margin: 0 -15px; flex-wrap: wrap; }

.front .team { position: relative; }
.front .team .section-title { display: flex; justify-content: center; align-items: center; margin: 20px 0; position: absolute; width: 100%; z-index: 2; }
.front .team .section-title img { height: 66px; width: auto; }

.front .members { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.front .projects { display: flex; }
.front .projects .slick-list,
.front .projects .slick-track { height: 100%; }
.front .thumbs { width: 50%; }
.front .thumbs .thumb { background: no-repeat center /cover; filter: brightness(.8); }
.front .thumbs img { width: 100%; height: auto; }
.front .project-list { width: 50%; background-color: #D7131F; padding: 100px 0 200px 100px; }
.front .project-list:after { display: block; content: ''; border: 10px solid #D7131F; position: absolute; bottom: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.front .list-title { font-size: 14px; font-weight: 700; padding: 0 0 80px; text-transform: uppercase; }
.front .item .title { font-size: 36px; font-weight: 700; text-transform: uppercase; margin: 0; }
.front .item .title img { margin-top: -8px; display: none; }
.front .item.active .title img { margin-left: 20px; display: inline-block; animation: bounce-arrow 1s linear 0s infinite; }
.front .item.active .title,
.front .item:hover .title { color: #EABA13; }
.front .item .summary { display: none; margin: 5px 0 25px; color: #fff; font-size: 15px; font-weight: 300; font-family: Roboto, sans-serif; }
.front .item:hover .summary,
.front .item.active .summary { display: block; }

.front .shop { display: flex; justify-content: center; align-items: center; background-attachment: fixed; }
.front .shop .text { background: rgba(0, 0, 0, .4); padding: 200px 0; width: 100vw; text-align: center; color: #fff; text-transform: uppercase; font-size: 18px; }
.front .shop .text img { height: 24px; width: auto; margin-left: 10px; }
.front .shop .text p { font-family: Roboto, sans-serif; }


@media (max-width: 1280px) {
    .front .movies .video-embed-field-launch-modal:before { width: 50px; height: 50px; }
    .front .movies .video-embed-field-launch-modal:after { border-width: 10px 0 10px 15px; }
    .front .movies .title { font-size: 20px; }
}

@media (max-width: 1200px) {
    .front .video .background > div { padding: 30px 50px 50px; }
    .front .news > div { padding: 30px 50px 50px; }
}

@media (max-width: 950px) {
    .front .thumbs { display: none; }
    .front .project-list { width: 100%; }
}

@media (max-width: 768px) {
    .front .movies .movie { margin-bottom: 14px; }
}

@media (max-width: 700px) {
    .front .slider { min-height: 600px; height: initial; }
}

@media (max-width: 600px) {
    .front .slider .text { width: 100%; }
    .front .slider .section-title { font-size: 48px; }
    .front .slider .text p { font-size: 24px; }
}

@media (max-width: 550px) {
    .front .project-list { padding: 100px 50px 100px; }
    .front .shop { display: block; }
    .front .shop .text { margin: 0 auto; padding: 100px 20px 100px; }

    .front .xtreme .logos { width: 100%; left: 0; right: initial; text-align: center; }
    .front .section-title { font-size: 52px; }
    .front .video .section-title { line-height: 60px; }
}

@media (max-width: 480px) {
    .front .item .title { font-size: 30px; }
}

@media (max-width: 468px) {
    .front .news .section-title .more { margin-bottom: 30px; }
}

@media (max-width: 420px) {
    .front .item .title { font-size: 24px; }
}

/*END: FRONT*/

/*START: VIDEO*/

.btn-youtube { position: relative; z-index: 2; transition: .3s; display: inline-block; }
.btn-youtube:hover { transform: scale(1.1); transition: .3s; }
.btn-youtube a { transition: .3s; }
.btn-youtube:hover a { transform: scale(1.1); transition: .3s; }
.btn-yt { vertical-align: middle; color: #fff; font-weight: 700; font-size: 14px; display: inline-block; padding: 14px 20px; }
.btn-yt.btn-red { background-color: #FB021C; font-family: Roboto, sans-serif; }
.btn-youtube-image { padding: 0; box-sizing: initial; }
.btn-youtube-image img { height: 25px; width: auto; padding: 12px 25px; background-color: #fff; }

.video-page { background-color: #EABA13; padding-top: 150px; overflow: hidden; }

.video-page .top { margin-bottom: 40px; padding: 0 130px 0; position: relative; }
.video-page .top .header { display: flex; justify-content: space-between; align-items: center; }
.video-page .top .section-title { line-height: 72px; }

.video-page .project-logo { opacity: .05; width: auto; position: fixed; top: 20px; right: -7%; transform: rotate(-11.89deg); }

.video-page .movie { padding: 0 130px 0; }
.video-page .movie .title { font-size: 48px; font-weight: 700; text-transform: uppercase; margin-top: 30px; }
.video-page .movie .date { font-size: 14px; font-weight: 700; color: #fff; display: block; margin-bottom: 30px; }
.video-page .bar { width: 103%; height: auto; margin-bottom: 100px; min-width: 1860px; }
.video-page .bar:last-child { display: none; }

.video-page .video-embed-field-launch-modal { overflow: hidden; border: 10px solid #EABA13; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); position: relative; cursor: pointer; }
.video-page .video-embed-field-launch-modal:before { z-index: 1; display: block; content: ''; width: 100px; height: 100px; background: rgba(234, 186, 19, .8); border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video-page .video-embed-field-launch-modal:after { z-index: 2; display: block; content: ''; border: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #000; position: absolute; top: 50%; left: 50.3%; transform: translate(-50%, -50%); }
.video-page .video-embed-field-launch-modal img { width: 100%; height: auto; transition: .3s; }
.video-page .video-embed-field-launch-modal:hover img { transform: scale(1.1); transition: .3s; }
.video-page .video-embed-field-launch-modal:hover:before { background: rgba(0, 0, 0, .8); transition: .3s; }
.video-page .video-embed-field-launch-modal:hover:after { border-color: transparent transparent transparent rgba(234, 186, 19, .8); transition: .3s; }

.video-page .more { margin: 100px 0; text-align: center; }

@media (max-width: 1200px) {
    .video-page .movie { padding: 0 50px 0; }
    .video-page .top { padding: 0 50px 0; }
}

@media (max-width: 600px) {
    .video-page .top .btn-youtube { display: none; }
    .video-page .video-embed-field-launch-modal:before { width: 50px; height: 50px; }
    .video-page .video-embed-field-launch-modal:after { border-width: 10px 0 10px 15px; left: 50.3%; }
}

@media (max-width: 470px) {
    .video-page .top .section-title { font-size: 60px; }
    .video-page .movie .title { font-size: 36px; line-height: 1; }
}

@media (max-width: 390px) {
    .video-page .top .section-title { font-size: 48px; line-height: 1; }
}

/*END: VIDEO*/

/*START: NEWS*/

.article { padding: 150px 0 0; position: relative; overflow: hidden; background-color: #e8e8e8; }
.article .container { background-color: #fff; padding: 20px 40px; margin-bottom: 50px; position: relative; z-index: 2; }
.article .image img { width: 100%; height: auto; }
.article .project-logo { opacity: .05; width: auto; position: fixed; top: 20px; right: -7%; transform: rotate(-11.89deg); }
.article .date { font-size: 24px; font-weight: 700; color: #D7131F; font-family: Roboto, sans-serif; margin: 0; }
.article .title { font-size: 48px; font-weight: 700; text-transform: uppercase; line-height: 56px; margin-bottom: 10px; }
.article .summary { font-family: Roboto, sans-serif; font-size: 18px; margin-top: 20px; }
.article .video-embed-field-launch-modal { overflow: hidden; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); position: relative; cursor: pointer; border: 10px solid #fff; }
.article .video-embed-field-launch-modal:before { transition: .3s; z-index: 1; display: block; content: ''; width: 100px; height: 100px; background: rgba(215, 19, 31, .8); border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.article .video-embed-field-launch-modal:after { transition: .3s; z-index: 2; display: block; content: ''; border: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #000; position: absolute; top: 50%; left: 50.3%; transform: translate(-50%, -50%); }
.article .video-embed-field-launch-modal img { width: 100%; height: auto; transition: .3s; }
.article .video-embed-field-launch-modal:hover img { transform: scale(1.1); transition: .3s; }
.article .video-embed-field-launch-modal:hover:before { background: rgba(0, 0, 0, .8); transition: .3s; }
.article .video-embed-field-launch-modal:hover:after { border-color: transparent transparent transparent rgba(215, 19, 31, .8); transition: .3s; }
.article .video { margin: 100px 0 50px; }
.article .gallery { margin: 0 -10px; }
.article .gridstack--enabled .box__content { left: 4px; right: 4px; }
.article .gridstack--disabled { display: flex; flex-wrap: wrap; }
.article .gridstack--disabled .gridstack__box { padding: 5px; width: 50%; min-height: 200px; }

@media (min-width: 1200px) {
    .article .container {
        max-width: 720px;
    }
}


.article-teaser { overflow: hidden; position: relative; cursor: pointer; }
.article-teaser .date { font-weight: 700; font-size: 12px; text-transform: uppercase; color: #D7131F; margin-bottom: 10px; font-family: Roboto, sans-serif; }
.article-teaser .title { font-weight: 700; font-size: 24px; text-transform: uppercase; font-family: "Roboto Condensed", sans-serif; min-height: 108px; line-height: 30px; transition: .3s; }
.article-teaser .text { background-color: #fff; font-size: 14px; padding: 20px; font-family: Roboto, sans-serif; height: calc(100% - 350px); }
.article-teaser .summary { color: #595959; min-height: 100px; }
.article-teaser .image-box { overflow: hidden; border-bottom: 5px solid #EABA13; height: 350px; width: 100%; }
.article-teaser .image { background: no-repeat center /cover; width: 100%; height: 100%; transition: .3s; /*opacity: .7;*/ }
.article-teaser .read-more { margin: 0 0 0 auto; display: block; }
.article-teaser:hover .image { transform: scale(1.1); transition: .3s; }
.article-teaser:hover .read-more { animation: bounce-arrow 1s linear 0s infinite; }
.article-teaser:hover .title { opacity: .6; transition: .3s; }

.news-page { padding: 150px 130px 100px; overflow: hidden; background-color: #e8e8e8; position: relative; }
.news-page .wall { display: flex; flex-wrap: wrap; }
.news-page .article-teaser { margin-bottom: 15px; padding-right: 7.5px; padding-left: 7.5px; }
.news-page .project-logo { opacity: .05; width: auto; position: fixed; top: 20px; right: -7%; transform: rotate(-11.89deg); }


@media (max-width: 1650px) {
    .article-teaser .image-box { height: 300px; }
    .article-teaser .text { height: calc(100% - 300px); }
}

@media (max-width: 1500px) {
    .article-teaser .image-box { height: 250px; }
    .article-teaser .summary { min-height: 140px; }
    .article-teaser .text { height: calc(100% - 250px); }
}

@media (max-width: 1400px) {
    .article-teaser .image-box { height: 200px; }
    .article-teaser .text { height: calc(100% - 200px); }
}

@media (max-width: 1200px) {
    .news-page { padding: 150px 50px 100px; }
}

@media (max-width: 950px) {
    .article-teaser .summary { min-height: 180px; }
    .article-teaser .title { font-size: 20px; }
}

@media (max-width: 820px) {
    .article-teaser .summary { min-height: 200px; }
    .article-teaser .title { font-size: 18px; }
}

@media (max-width: 768px) {
    .article-teaser { margin-bottom: 14px; }
    .article-teaser .image-box { height: 350px; }
    .article-teaser .text { height: calc(100% - 350px); }
    .article-teaser .summary { min-height: initial; }
    .article-teaser .title { font-size: 24px; }
}

@media (max-width: 580px) {
    .article-teaser .image-box { height: 250px; }
    .article-teaser .text { height: calc(100% - 250px); }
}

@media (max-width: 430px) {
    .article-teaser .image-box { height: 180px; }
    .article-teaser .text { height: calc(100% - 180px); }
}

@media (max-width: 370px) {
    .article-teaser .image-box { height: 120px; }
    .article-teaser .text { height: calc(100% - 120px); }
}

/*END: NEWS*/

/*START: PRODUCTS*/

.product { padding: 150px 0 0; position: relative; overflow: hidden; background-color: #e8e8e8; }
.product .container { background-color: #fff; padding: 20px 40px; margin-bottom: 50px; position: relative; z-index: 2; }
.product .image img { width: 100%; height: auto; }
.product .project-logo { opacity: .05; width: auto; position: fixed; top: 20px; right: -7%; transform: rotate(-11.89deg); }
.product .shop { font-size: 24px; font-weight: 700; color: #D7131F; font-family: Roboto, sans-serif; margin: 0; text-transform: uppercase; }
.product .title { font-size: 48px; font-weight: 700; text-transform: uppercase; line-height: 56px; margin-bottom: 10px; }
.product .summary { font-family: Roboto, sans-serif; font-size: 18px; margin-top: 20px; }
.product .gallery { margin: 0 -10px; /*background-color: #fff; */}
.product .gridstack--enabled .box__content { left: 4px; right: 4px; }
.product .gridstack--disabled { display: flex; flex-wrap: wrap; }
.product .gridstack--disabled .gridstack__box { padding: 5px; width: 50%; min-height: 200px; }
.product .details { border: solid #000; border-width: 1px 0; display: flex; justify-content: space-between; align-items: center; padding: 25px 0; margin: 30px 0 50px; }
.product .details span { font-weight: 700; font-size: 20px; }
.product .details .allegro { border: solid #ff5a00 1px; padding: 10px 50px; }
.product .details .allegro img { width: 92px; height: auto; transition: .3s; }
.product .details .allegro:hover img { transition: .3s; opacity: .7; }
.product .details .other { border: solid #000 1px; transition: .3s; padding: 10px 50px; }
.product .details .other:hover { background-color: #000; color: #fff; transition: .3s; }
.product .files { margin: 35px 0 20px; font-weight: 700; text-transform: uppercase; font-size: 20px; }

@media (min-width: 1200px) {
    .product .container {
        max-width: 720px;
    }
}

@media (max-width: 420px) {
    .product .title { font-size: 36px; line-height: 1.2; }
    .product .details .allegro { padding: 10px 25px; }
}


.product-teaser { overflow: hidden; position: relative; cursor: pointer; }
.product-teaser .date { font-weight: 700; font-size: 12px; text-transform: uppercase; color: #D7131F; margin-bottom: 10px; font-family: Roboto, sans-serif; }
.product-teaser .title { font-weight: 700; font-size: 24px; text-transform: uppercase; font-family: "Roboto Condensed", sans-serif; min-height: 90px; line-height: 30px; }
.product-teaser .text { background-color: #fff; font-size: 14px; padding: 20px; font-family: Roboto, sans-serif; }
.product-teaser .summary { color: #595959; min-height: 100px; }
.product-teaser .image-box { overflow: hidden; /*border-bottom: 5px solid #EABA13;*/ height: 350px; width: 100%; }
.product-teaser .image { background: no-repeat center /cover; width: 100%; height: 100%; transition: .3s; /*opacity: .7;*/ }
.product-teaser .read-more { margin: 0 0 0 auto; display: block; }
.product-teaser:hover .image { transform: scale(1.1); transition: .3s; }
.product-teaser:hover .read-more { animation: bounce-arrow 1s linear 0s infinite; }
.product-teaser .price { font-weight: 700; font-size: 20px; margin-bottom: 30px; }
.product-teaser .details .allegro { border: solid #ff5a00 1px; padding: 10px 30px; }
.product-teaser .details .allegro img { width: 60px; height: auto; transition: .3s; }
.product-teaser .details .allegro:hover img { transition: .3s; opacity: .7; }
.product-teaser .details .other { border: solid #000 1px; transition: .3s; padding: 10px 40px; }
.product-teaser .details .other:hover { background-color: #000; color: #fff; transition: .3s; }

.products-page { padding: 150px 130px 100px; overflow: hidden; background-color: #e8e8e8; position: relative; }
.products-page .wall { display: flex; flex-wrap: wrap; }
.products-page .article-teaser { margin-bottom: 15px; padding-right: 7.5px; padding-left: 7.5px; }
.products-page .project-logo { opacity: .05; width: auto; position: fixed; top: 20px; right: -7%; transform: rotate(-11.89deg); }


@media (max-width: 1650px) {
    .product-teaser .image-box { height: 300px; }
}

@media (max-width: 1500px) {
    .product-teaser .image-box { height: 250px; }
    .product-teaser .summary { min-height: 140px; }
}

@media (max-width: 1400px) {
    .product-teaser .image-box { height: 200px; }
}

@media (max-width: 1200px) {
    .products-page { padding: 150px 50px 100px; }
}

@media (max-width: 950px) {
    .product-teaser .summary { min-height: 180px; }
    .product-teaser .title { font-size: 20px; }
}

@media (max-width: 820px) {
    .product-teaser .summary { min-height: 200px; }
    .product-teaser .title { font-size: 18px; }
}

@media (max-width: 768px) {
    .product-teaser { margin-bottom: 14px; }
    .product-teaser .image-box { height: 350px; }
    .product-teaser .summary { min-height: initial; }
    .product-teaser .title { font-size: 24px; }
}

@media (max-width: 580px) {
    .product-teaser .image-box { height: 250px; }
}

@media (max-width: 430px) {
    .product-teaser .image-box { height: 180px; }
}

@media (max-width: 370px) {
    .product-teaser .image-box { height: 120px; }
}

/*END: PRODUCTS*/

/*START: TEAM*/

.member .name { font-size: 48px; font-weight: 700; text-transform: uppercase; text-align: center; line-height: .5; }
/*.member:hover .name span { transform:translate3d(100px,0,0) scale(.6); transition: 0s; }*/
/*.member:hover .surname { transform:translate3d(-100px,0,0) scale(.6); transition: 0s; }*/
.member .name span { display: inline-block; }
.member .surname { font-size: 24px; font-weight: 700; text-transform: uppercase; text-align: right; margin-left: 10px; }
.member:nth-child(2) .surname { margin-left: 75px; }
.member .image { text-align: center; margin-bottom: 25px; }
.member { background-color: #fff; padding: 150px 0; height: 680px; transition: .3s background-color; }
.member .summary { display: none; font-size: 14px; padding: 0 30px; margin-top: 30px; color: #000; font-family: Roboto, sans-serif; font-weight: 300; }
.member:hover { background-color: #EABA13; transition: .3s background-color; }
.member:hover .text { color: #fff; }
.member:hover .summary { display: block; }
.member .read-more { margin: 20px 0 0 auto; display: block; }
.member:hover .read-more { animation: bounce-arrow 1s linear 0s infinite; }

.team-page { padding: 150px 0 0; overflow: hidden; }
.team-page .top { margin-bottom: -150px; }
.team-page .top h1 { position: relative; z-index: 1; }
.team-page .section-title { text-align: center; }
.team-page .members { display: flex; flex-wrap: wrap; }
.team-page .member { background-color: initial; padding: 200px 0 150px; height: 800px; }
.team-page .member:hover { background-color: #EABA13; }
.team-page .project-logo { opacity: .05; width: auto; position: fixed; top: 20px; right: -7%; transform: rotate(-11.89deg); }


@media (max-width: 1400px) {
    .member .summary { font-size: 12px; }
}

@media (max-width: 1200px) {
    .member .summary { font-size: 14px; }
}

/*END: TEAM*/

/*START: MEMBER-PAGE*/

.member-page .header:before { display: block; content: ''; height: 600px; overflow: hidden; background: no-repeat center /cover; opacity: .6; }
.member-page .header { position: relative; z-index: 2; background-color: #fff; }
.member-page .header img { width: 100%; height: auto; }

.member-page .container { position: relative; }
.member-page .details img { position: absolute; top: -100px; right: 0; z-index: 2; }
.member-page .details .section-title { line-height: 76px; margin-top: 30px; }
.member-page .details .section-title.gold { margin-top: 0; margin-bottom: 30px; }
.member-page .text { font-family: Roboto, sans-serif; }

.member-page .video { padding: 100px; }
.member-page .video-embed-field-launch-modal { overflow: hidden; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); position: relative; cursor: pointer; border: 10px solid #fff; }
.member-page .video-embed-field-launch-modal:before { transition: .3s; z-index: 1; display: block; content: ''; width: 100px; height: 100px; background: rgba(215, 19, 31, .8); border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.member-page .video-embed-field-launch-modal:after { transition: .3s; z-index: 2; display: block; content: ''; border: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #000; position: absolute; top: 50%; left: 50.3%; transform: translate(-50%, -50%); }
.member-page .video-embed-field-launch-modal img { width: 100%; height: auto; transition: .3s; }
.member-page .video-embed-field-launch-modal:hover img { transform: scale(1.1); transition: .3s; }
.member-page .video-embed-field-launch-modal:hover:before { background: rgba(0, 0, 0, .8); transition: .3s; }
.member-page .video-embed-field-launch-modal:hover:after { border-color: transparent transparent transparent rgba(215, 19, 31, .8); transition: .3s; }

.member-page .gallery { margin: 0 -10px; }
.member-page .gridstack--disabled { display: flex; flex-wrap: wrap; }
.member-page .gridstack--disabled .gridstack__box { padding: 5px; width: 50%; min-height: 200px; }
.member-page .gridstack--enabled .box__content { left: 4px; right: 4px; }

.member-page .details .project-logo { opacity: .05; width: auto; position: fixed; top: 200px; right: -7%; transform: rotate(-11.89deg); z-index: 1; }


@media (max-width: 500px) {
    .member-page .details div.section-title { margin-top: 150px; }
    .member-page .details img { top: -200px; }
}

/*END: MEMBER-PAGE*/

/*START: SIMPLE-PAGE*/

.simple-page .header { height: 600px; overflow: hidden; background: no-repeat center /cover; filter: brightness(.7); position: relative; z-index: 2; }
.simple-page .header img { width: 100%; height: auto; /*filter: brightness(.7);*/ }
.simple-page .details .section-title { line-height: 76px; margin: 30px 0; }
.simple-page .text { font-family: Roboto, sans-serif; }
.simple-page .project-logo { opacity: .07; width: auto; position: fixed; top: 200px; right: -7%; transform: rotate(-11.89deg); }

.simple-page a { border: 2px solid #000; padding: 10px 20px; transition: .3s; }
.simple-page a:hover { background-color: #000; color: #fff; transition: .3s; }

/*END: SIMPLE-PAGE*/

/*START: PROJECT-PAGE*/

.project-page  { overflow: hidden; }
.project-page .banner { height: 600px; /*background: no-repeat bottom /cover fixed;*/ overflow: hidden; filter: brightness(.7); position: relative; z-index: 2; }
/*.project-page .details { padding: 20px 0; }*/

.project-page .project-logo { opacity: .05; width: auto; position: fixed; top: 200px; right: -7%; transform: rotate(-11.89deg); }
.project-page .details.container { padding: 20px 15px; }
.project-page .details.container .text { font-family: Roboto, sans-serif; }
.project-page .section-title { line-height: 60px; /*padding: 0 100px;*/ }
.project-page .section-title h1 { font-size: 72px; margin-bottom: 40px; }
.project-page .rent-cars { display: flex; margin-right: -2px; flex-wrap: wrap; }
.project-page .rent-cars .car { padding: 0 2px; margin-bottom: 14px; }
.project-page .rent-cars .car img { width: 100%; height: auto; }
.project-page .rent-cars .image { position: relative; }
.project-page .rent-cars .bar { transition: .5s height, .3s background-color; position: absolute; bottom: 0; left: 0; background-color: rgba(215, 19, 31, .9); color: #fff; width: 100%; padding: 20px 0; height: 76px; }
.project-page .rent-cars .bar .title { font-size: 36px; font-weight: 700; text-align: center; line-height: 1; margin: 0; }
.project-page .rent-cars .bar .text { overflow: hidden; color: #000; font-size: 18px; font-weight: 300; padding: 8% 50px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear .5s; }
.project-page .rent-cars .bar .price { font-size: 36px; font-weight: 700; color: #fff; position: absolute; bottom: 50px; right: 50px; font-family: Roboto, sans-serif; }
.project-page .rent-cars .car:hover .bar { height: 100%; transition: .5s height, .3s background-color; background-color: rgba(215, 19, 31, .9); }
.project-page .rent-cars .car:hover .text { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear .5s; }

.project-page .video { padding: 100px 50px; }
.project-page .video-embed-field-launch-modal { overflow: hidden; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); position: relative; cursor: pointer; border: 10px solid #fff; }
.project-page .video-embed-field-launch-modal:before { transition: .3s; z-index: 1; display: block; content: ''; width: 100px; height: 100px; background: rgba(215, 19, 31, .8); border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.project-page .video-embed-field-launch-modal:after { transition: .3s; z-index: 2; display: block; content: ''; border: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #000; position: absolute; top: 50%; left: 50.3%; transform: translate(-50%, -50%); }
.project-page .video-embed-field-launch-modal img { width: 100%; height: auto; transition: .3s; }
.project-page .video-embed-field-launch-modal:hover img { transform: scale(1.1); transition: .3s; }
.project-page .video-embed-field-launch-modal:hover:before { background: rgba(0, 0, 0, .8); transition: .3s; }
.project-page .video-embed-field-launch-modal:hover:after { border-color: transparent transparent transparent rgba(215, 19, 31, .8); transition: .3s; }

.project-page .gallery { margin: 0 -10px; }
.project-page .gridstack--disabled { display: flex; flex-wrap: wrap; }
.project-page .gridstack--disabled .gridstack__box { padding: 5px; width: 50%; min-height: 200px; }
.project-page .gridstack--enabled .box__content { left: 4px; right: 4px; }

.content .contact { background-color: #F5F3F3; padding: 100px 0 100px; margin-top: 8px; position: relative; z-index: 2; }
.content .contact .section-title { font-size: 36px; text-align: center; }
.content .contact form { width: 600px; margin: 80px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
.content .contact form label { display: none; }
.content .contact form input,
.content .contact form textarea { border-width: 0 0 2px 0; border-color: #9D9D9D; color: #9D9D9D; background-color: initial; font-size: 20px; }
.content .contact form input { padding-bottom: 14px; }
.content .contact form .form-item { width: 48%; }
.content .contact form .form-item-message,
.content .contact form input,
.content .contact form textarea { width: 100%; transition: border-color .3s; }
.content .contact form input:focus,
.content .contact form textarea:focus { border-color: #D7131F; transition: border-color .3s; }
.content .contact form .form-item-message { margin: 100px 0 40px; }
.content .contact #edit-actions-submit { background-color: #D7131F; border-radius: 4px; color: #fff; border: none; width: initial; font-size: 15px; padding: 5px 20px; display: block; margin: 0 0 0 auto; font-weight: 700; }

@media (max-width: 1360px) {
    .project-page .banner { height: initial; }
}

@media (max-width: 768px) {
    .project-page .rent-cars .car { padding: 0; }
}

@media (max-width: 620px) {
    .project-page .section-title { /*padding: 0 50px;*/ line-height: 1; }
    .content .contact form { width: 100%; padding: 0 20px; }
}


/*END: PROJECT-PAGE*/

/*LOGIN FORM*/

/*html.login { background: #EABA13; }*/
/*html.login body { background: none; }*/
#user-login-form .login-form { margin-top: 50px; padding: 0 30px; }
#user-login-form .logo { text-align: center; }
#user-login-form .logo img { width: 91px; height: auto; margin-bottom: 50px; filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3))}
#user-login-form .logo h2 { color: #666666; font-family: 'Montserrat', sans-serif; font-size: 16px; margin-bottom: 50px; }

#user-login-form #edit-name--description,
#user-login-form #edit-pass--description { display: none; }

#user-login-form .login-fields label { display: none; }
#user-login-form .login-fields .form-text { width: 500px; margin-bottom: 30px; height: 25px; border-radius: 5px; border: 2px solid #6666; background-color: #F3F4EE; padding-left: 5px; font-size: 14px; }
#user-login-form .login-fields .form-text:focus { border: 2px solid #EABA13; }
#user-login-form .login-fields .field { display: flex; margin: 0 auto; }
#user-login-form .login-fields { max-width: max-content; margin: 0 auto; }
#user-login-form .login-fields p { line-height: 20px; width: 150px; color: #666666; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: normal; }
#user-login-form .login-submit { max-width: max-content; margin: 0 0 0 auto; }
#user-login-form #edit-submit { padding: 10px 50px; border-radius: 5px; border: 0; background-color: #EABA13; color: white; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: normal; }
#user-login-form #edit-submit:hover { opacity: 0.85; }


@media (max-width: 700px) {
    #user-login-form .login-fields .form-text { width: 100%; }
}

@media (max-width: 450px) {
    #user-login-form .login-fields .field { display: block; }
    #user-login-form .login-fields p { margin: 0; }
    #user-login-form .login-submit { margin: 0 auto; }

    #user-login-form .logo img { width: 100%; }
}

/*KEYFRAMES*/

@keyframes bounce-arrow {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-20px);
    }
}

@keyframes bounce-arrow-reverse {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(20px);
    }
}

@keyframes glitch-anim-flash {
    0%, 5% {
        opacity: 0.2;
        transform: translate3d(10px, 5px, 0);
    }
    5.5%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes glitch-anim-3 {
    0% {
        opacity: 1;
        transform: translate3d(0, calc(-1 * 10px), 0) scale3d(-1, -1, 1);
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
        clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    }
    1.5% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
        clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    }
    2% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
        clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    }
    2.5% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    3% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
        clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    }
    5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
        clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    }
    5.5% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
        clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    }
    7% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
        clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    }
    8% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }
    9% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
        clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    }
    10.5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
        clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    }
    11% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
        clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    }
    13% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
        clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    }
    14% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
        clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    }
    14.5% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
        clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    }
    15% {
        -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
        clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    }
    16% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    18% {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
        clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    }
    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
        clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
    }
    22%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        opacity: 1;
        transform: translate3d(calc(-1 * 10px), 0, 0);
        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }
    3% {
        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }
    5% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }
    7% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    9% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }
    11% {
        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }
    13% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    15% {
        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }
    17% {
        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }
    19% {
        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }
    20% {
        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(calc(-1 * 10px), 0, 0);
    }
    22%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}

@keyframes glitch-anim-1 {
    0% {
        opacity: 1;
        transform: translate3d(10px,0,0);
        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    2% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    4% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    6% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    8% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    10% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    12% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    14% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    16% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    18% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(10px,0,0);
    }
    22%, 100% {
        opacity: 0;
        transform: translate3d(0,0,0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}