body { font-family: Montserrat, sans-serif; }

/*OTHER*/

.highlight { color: #E6332A; }
.section--label { font-size: 40px; font-family: "Roboto Condensed", sans-serif; font-weight: 700;
    text-transform: uppercase; }

/*END OTHER*/

/*HEADER*/

.header { display: flex; align-items: center; background: rgba(0, 0, 0, 0.24); width: 100%; height: 100px;
    justify-content: space-between; padding: 0 40px 0 50px; position: fixed; top: 0; left: 0; z-index: 2; transition: .3s; }
.toolbar-tray-open .header { top: 79px; }
.view-blog .header,
.article .header { background: rgba(0, 0, 0, .8); }
.header.scroll { background: rgba(0, 0, 0, 0.8); transition: .3s; height: 70px; }
.header__container { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; }

.menu__lvl-0 { margin: 0; padding: 0; }
.menu__item { display: inline; text-transform: uppercase; position: relative; }
.menu__link { font-size: 15px; font-family: "Roboto Condensed", sans-serif; font-weight: 700; color: #fff;
    padding: 40px 10px; transition: .3s; }
/*.scroll .menu__link { color: #000; }*/
.menu--active-trail > .menu__link,
.menu__link:hover,
.menu__link.is-active { color: #E6332A; transition: .3s; }

.shop__button { background: #E6332A; border-radius: 10px; padding: 2px 10px; }
.shop__button:hover { background: transparent; cursor: pointer; }


.header .menu__lvl-1 { display: none; background: #f4f3f3; color: #000; position: fixed; margin: 0; width: 100%;
    top: 100px; left: 0; padding: 30px 100px; transition: top .3s; }
.scroll.header .menu__lvl-1 { top: 70px; transition: top .3s; }
.toolbar-tray-open .menu__lvl-1  { top: 179px; }
.toolbar-tray-open .scroll .menu__lvl-1  { top: 149px; }
.header .menu__lvl-1 .menu__item { display: block; }
.header .menu__lvl-1 .menu__link:hover,
.header .menu__lvl-1 .menu__link.is-active { color: #000; }
.header .menu__item.expanded:hover .menu__lvl-1,
.header .menu__lvl-1:hover { display: flex; cursor: pointer; }
.header .menu__lvl-1:hover ~ span { color: #E6332A; transition: .3s; }

.image-link { width: 33.33%; }
.image-link:nth-child(2) { border: solid #e0e0e0; border-width: 0 1px 0 1px; }
.image-link a { display: flex; justify-content: space-evenly; align-items: center; font-weight: 700; }
.image-link .menu__title { border-bottom: 1px solid transparent; transition: .3s; }
.image-link a img { transition: .3s; }
.image-link a:hover img { transform: scale(1.1); transition: .3s; }
.image-link a:hover .menu__title,
.menu--active-trail.image-link .menu__title { border-bottom-color: #E6332A; transition: .3s; }

.menu__img-container { width: 220px; height: 130px; overflow: hidden; }
.menu__img-container img { width: 100%; height: auto; }

.en .menu__item--blog { display: none; }

.menu__container { display: flex; }
#block-language-switcher { margin-left: 20px; }
#block-language-switcher legend { display: none; }
#block-language-switcher ul { color: #fff; font-size: 15px; font-family: "Roboto Condensed", sans-serif; }
#block-language-switcher .dropbutton-arrow { border-color: #fff transparent transparent transparent; }
#block-language-switcher .open .dropbutton-arrow { border-color: transparent; border-bottom: .3333em solid #fff; }
#block-language-switcher .secondary-action { position: absolute; background: black; border-radius: 3px; left: -50px;
    padding: 10px 20px 10px 50px; }
#block-language-switcher .dropbutton-action { line-height: 25px; }
#block-language-switcher .secondary-action .language-link { width: 55px; display: inline-block;
    font-family: Montserrat, sans-serif; }
#block-language-switcher .secondary-action .language-link:before { content: ''; display: block; width: 17px; top: 50%;
    height: 10px; position: absolute; left: 18px; transform: translateY(-50%); }
#block-language-switcher .dropbutton-action:nth-child(1) { text-transform: uppercase; font-weight: 700; }
#block-language-switcher .dropbutton-action:nth-child(3) { top: 35px; }
#block-language-switcher .dropbutton-action:nth-child(4) { top: 70px; }
#block-language-switcher .secondary-action .active-language { color: #646363; }
#block-language-switcher .en:before { background: url("/themes/ffsport/css/img/en.jpg") no-repeat center /cover; }
#block-language-switcher .pl:before { background: url("/themes/ffsport/css/img/pl.jpg") no-repeat center /cover; }

@media(max-width: 1050px) {
    .header .menu__link { padding: 40px 6px; }
    .header .shop__button { padding: 2px 6px; }
}

@media(max-width: 980px) {
    #nav-icon { width: 50px; height: 25px; position: relative; cursor: pointer; display: block;
        -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: 4px; width: 100%; background: #E6332A; 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; }
    #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%; }

    .header { padding: 0 50px; }
    .menu__container {  display: none; position: fixed; top: 0; right: 0; width: 300px; background: #fff; color: #000;
         height: 100vh; }

    .header .menu__lvl-0 { padding-top: 100px; transition: padding-top .3s; }
    .scroll.header .menu__lvl-0 { padding-top: 70px; transition: padding-top .3s; }

    .header .menu__lvl-0 > .menu__item { display: block; }
    .header .menu__link { display: block; padding: 10px 20px; font-size: 20px; color: #000; }
    .header .shop__button { border-radius: initial; }

    .header .menu__lvl-1 { position: static; background: none; color: #000; padding: 0 0 0 40px; }
    .header .menu__img-container { display: none; }

    .header .menu__item.expanded:hover .menu__lvl-1,
    .header .menu__lvl-1:hover { display: none; }

    .header .image-link { width: initial; padding: 10px 0; }
    .header .image-link a { display: block; }
    .header .image-link:nth-child(2),
    .header .image-link .menu__title { border: none; }

    .header .image-link a:hover .menu__title,
    .menu--active-trail.image-link .menu__title { color: #E6332A; transition: .3s; }

    #block-language-switcher ul { color: #000; }
    #block-language-switcher .dropbutton-action:first-child { display: none; }
    #block-language-switcher .secondary-action { display: inline-block; background: none; position: static;
        padding: 10px 20px 10px 30px; }
    #block-language-switcher .secondary-action .language-link { position: relative; display: inline; transition: .3s; }
    #block-language-switcher .secondary-action .language-link:before { left: -30px; }
    #block-language-switcher .secondary-action .language-link:hover,
    #block-language-switcher .secondary-action .language-link.active-language { color: #E6332A; transition: .3s; }
}

@media(max-width: 768px) {
    .header { height: 70px; }
    .header .menu__lvl-0 { padding-top: 70px; transition: padding-top .3s; }
}

@media(max-width: 650px) {
    .header { padding: 0 20px; }
}

@media(max-width: 480px) {
    .menu__container { width: 100%; }
}

/*END HEADER*/

/*FOOTER*/

.footer { background: #f0f0f0; overflow: hidden; }
.footer-top { display: flex; justify-content: space-between; padding: 50px; border-bottom: 1px solid #d7d5d5; }
.footer__info { display: flex; width: calc(100% - 400px); padding-left: 50px; color: #666; margin-top: -5px; }
.footer__info > div { margin: 0 50px; }
.footer__info p { margin: 0; }
.footer__info a { transition: .3s; }
.footer__info a:hover { transition: .3s; color: #E6332A; }
.footer__logo { width: 200px; }
/*.footer__social { width: 200px; }*/
.footer__social { display: flex; justify-content: flex-end; }
.footer__logo img { width: 100%; height: auto; }

.social--instagram-2 { border-left: 1px solid #D7D5D5; }
.social__anchor { max-height: 38px; }
.social__anchor i { font-size: 18px; width: 38px; transition: 0.3s; }
.social--instagram i { margin-right: 10px; }
.social--instagram-2 i { margin-left: 20px; }
.social--facebook i { margin-left: 10px; margin-right: 20px; }
.social--facebook-2 i { margin-right: 0; }
.social--youtube i { margin: 0 10px; }
.social--instagram i:before,
.social--facebook i:before,
.social--youtube i:before { color: #555; border: 2px solid #555; padding: 8px; border-radius: 20px; width: 38px; display: inline-block; transition: 0.3s; }
.social__anchor i:hover:before { transition: 0.3s; color: #E6332A; border: 2px solid #E6332A; }

.footer .image-link:nth-child(2) {
    border: none;
}

/*#block-footer { padding: 30px 50px 30px 20px; }*/
.menu--footer { display: flex; flex-wrap: wrap; }
.menu--footer.menu__lvl-0 > .menu__item { margin: 0 20px; }
.menu--footer .menu__lvl-1 { display: block; margin: 10px 0 0; padding: 0; }
.menu--footer .menu__lvl-1 .menu__item { display: block; }
.menu--footer .menu__link { color: #333; }
.menu--footer .menu__lvl-1 .menu__link { font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 500;
    text-transform: initial; color: #646363; display: block; padding: 5px 10px; }
.menu--footer .menu--active-trail > .menu__link,
.menu--footer .menu__link:hover,
.menu--footer .menu__link.is-active { color: #E6332A; }
.menu--footer .shop__button { background: none; }

.footer__second-line { border-bottom: 1px solid #d7d5d5; display: flex; padding: 30px 50px 30px 20px;
    justify-content: space-between; flex-wrap: wrap; }

#block-b2b { min-width: 300px; }
.b2b { font-weight: 700; font-size: 15px; font-family: "Roboto Condensed", sans-serif; color: #141313; transition: .3s;
    border: 1px solid #333; padding: 20px 100px; text-transform: uppercase; display: block; text-align: center; }
.b2b:hover { color: #E6332A; transition: .3s; }

.privacy { color: #646363; padding: 30px 50px 50px; font-size: 12px; font-weight: 500; }

@media(max-width: 1400px) {
    .footer__second-line { padding: 30px 50px 30px 30px; }
    .menu--footer.menu__lvl-0 > .menu__item { margin: 0 10px; }
}

@media(max-width: 1250px) {
    .menu--footer.menu__lvl-0 > .menu__item { margin: 0 10px; }
    .b2b { margin-top: 40px; }
}

@media(max-width: 1080px) {
    .footer__info { flex-direction: column; }
    .footer__info > div:nth-child(2) { margin-top: 10px; }
}

@media(max-width: 930px) {
    .footer__second-line { align-items: center; justify-content: space-between; }
    .menu--footer.menu__lvl-0 { columns: 2; display: block; }
    .menu__item--footer { display: block; width: initial; }
    .menu__link--footer { display: inline-block; padding: 5px; }
    span.menu__link--footer:not(.shop__button) { display: none; }
    .menu--footer .menu__lvl-1 { margin: 0; }
    .menu--footer .menu__lvl-1 .menu__link { font-size: 15px; font-weight: 700; color: #333; text-transform: uppercase;
        font-family: "Roboto Condensed", sans-serif; padding: 5px; }
    .b2b { margin-top: 0; }
    .menu--footer .menu__lvl-1 .menu__link:hover,
    .menu--footer .menu__lvl-1 .menu__link.is-active { color: #E6332A; }
}

@media(max-width: 840px) {
    .footer__info > div { margin: 0; }
}

@media(max-width: 750px) {
    .footer-top { flex-wrap: wrap; }
    .footer__info { padding: 0; width: initial; /*margin-top: 20px; */}
    .footer__logo,
    .footer__social { width: initial; }
    .footer__logo img { max-width: 185px; }
}

@media(max-width: 650px) {
    .footer__second-line { padding: 30px 20px; }
    .footer-top { padding: 50px 20px; }
}

@media(max-width: 600px) {
    .footer__second-line { justify-content: center; flex-direction: column; }
    .menu--footer.menu__lvl-0 { text-align: center; columns: initial; }
    #block-b2b { margin-top: 30px; }
}

@media(max-width: 580px) {
    .footer__info { order: 2; margin-top: 30px; }
    .footer__social { margin-left: 10px; }
}

@media(max-width: 577px) {
    .footer__second-line { justify-content: center; /*padding: 30px 50px;*/ }
    #block-b2b { margin-top: 30px; }
    .menu--footer.menu__lvl-0 { text-align: center; }
}

@media(max-width: 525px) {
    .footer__social { margin-top: 30px; }
}

@media(max-width: 400px) {
    .footer-top > div { width: 100%; text-align: center; }
    .footer__social { justify-content: center; }
}

@media(max-width: 340px) {
    #block-b2b { min-width: 100%; text-align: center; }
    .b2b { padding: 20px 0; }
}

/*END FOOTER*/

/*VIDEO SLIDER*/

.slider { position: relative; }
.slider--video { height: 100vh; overflow: hidden; }
.slider--image .slides { overflow: hidden; }
.slide { position: relative; }
.slide__img { width: 100%; height: auto; }
.slide__content { position: absolute; top: 50%; left: 75px; color: #fff; text-transform: uppercase; }
.slide__text { line-height: 36px; font-size: 40px; font-family: "Roboto Condensed", sans-serif;
    background: rgba(0, 0, 0, .8); padding: 20px 50px 20px 20px; display: flex; }
.slide__text img { margin: auto auto auto 50px; }
.slide__category { margin-bottom: 10px; font-weight: 700; }
.slide__img { filter: brightness(.7); }

.slide__text:hover  img { animation: moveInLeft 1s infinite; }

.slick-dots { bottom: 20px; }
.slick-dots li { width: 40px; }
.slick-dots li button::before { opacity: 1; content: ''; background: #fff; height: 2px; width: 35px; transition: .3s; }
.slick-dots li:hover button::before,
.slick-dots li.slick-active button::before { opacity: 1; background: #E6332A; transition: .3s; }

.slide__video-container { position: relative; padding-bottom: 56.25%; height: 0; }
.slide__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.slider #block-wesellwhatwerace { font-size: 48px; position: absolute; top: 50%; left: 50%; width: 100%; color: #fff;
    transform: translate(-50%, -50%); }
.slider #block-wesellwhatwerace span { display: inline-block; }
.slider #block-wesellwhatwerace span.aos-init { animation-fill-mode: forwards; }

.slider__navigation { position: absolute; bottom: 40px; width: 100%; display: flex; justify-content: center; }
.slider__nav-item { padding: 30px 50px; background: #000; color: #fff; text-transform: uppercase; text-align: center;
    margin: 0 1px; font-size: 18px; font-weight: 700; font-family: "Roboto Condensed", sans-serif; transition: .3s;
    cursor: pointer; min-width: 300px; display: block; }
.slider__nav-item.slick-current { animation: jump .5s; }
.slider__nav-item:hover,
.slider__nav-item.slick-current { background: #E6332ACC; transition: .3s; }



@media(max-width: 1430px) {
    .slider--video { height: initial; max-height: 100vh; }
}

@media(max-width: 1300px) {
    .slide__content { top: 50%; transform: translateY(-50%); }
}

@media(max-width: 915px) {
    .slider__nav-item { min-width: 200px; }
}

@media(max-width: 800px) {
    .slide__content { left: 50%; transform: translate(-50%, -50%); width: calc(100% - 150px); }
}

@media(max-width: 768px) {
    /*.slider--video { overflow: initial; }*/
    .slider__navigation { position: static; margin-top: -44px; }
    .front .decor { display: none; }

    .slide__content { width: calc(100% - 100px); }
}

@media(max-width: 650px) {
    .slider #block-wesellwhatwerace { font-size: 36px; }
    .slider__navigation { margin-top: -35px; }
    .slider__nav-item { padding: 20px 25px; min-width: 150px; }

    .slide__content { width: calc(100% - 40px); }
    .slide__text { font-size: 30px; }
}

@media(max-width: 600px) {
    .slide__img { width: 140%; }
}

@media(max-width: 520px) {
    .slide__text { font-size: 24px; line-height: 30px; }
}

@media(max-width: 505px) {
    .slider__navigation { margin: -35px 20px 0; width: calc(100% - 40px); }
    .slider__nav-item-container { min-width: calc((100vw - 180px)/ 2); }
    .slider__nav-item-container:nth-child(2) { min-width: 140px; }
    .slider__nav-item { padding: 10px 15px; min-width: initial; }
}

@media(max-width: 500px) {
    .slider #block-wesellwhatwerace { font-size: 28px; }
    .slider__nav-item { padding: 10px 15px; }
    .slider__navigation { margin-top: -24px; }
}

@media(max-width: 460px) {
    .slider__navigation { position: static; }
    .slider__nav-item { padding: 10px; /*min-width: 120px;*/ }
}

@media(max-width: 440px) {
    .slide__content { width: 100%; transform: translateY(-50%); left: 0; }
    .slide__category { padding: 0 20px; }
    .slide__text { width: 100%; padding: 20px 20px 30px 20px; }
}

@media(max-width: 420px) {
    .slider__nav-item-container:nth-child(2) { min-width: initial; }
    .slider__nav-item { font-size: 16px; }
}

@media(max-width: 400px) {
    .slider #block-wesellwhatwerace { font-size: 20px; }
    .slider__nav-item { padding: 10px; }
    .slide__img { width: 200%; }
}

@media(max-width: 420px) {
    .slider__nav-item { padding: 10px 5px; }
}

/*END VIDEO SLIDER*/

/*HEADER*/

.banner { position: relative; min-height: calc(700 / 1650 * (100vw - 17px)); }
.banner img { width: 100%; height: auto; filter: brightness(.7); }
.banner__title { position: absolute; top: 50%; left: 50%; font-size: 50px; text-align: center;text-transform: uppercase;
    padding: 25px 50px; z-index: 1; transform: translate(-50%, -50%); color: #fff; font-weight: 700; line-height: 66px;
    font-family: "Roboto Condensed", sans-serif; /*border: 1px solid #fff;*/ }
.banner__title span { display: block; }
.banner__video { width: 100%; height: auto; display: block; }

@media(max-width: 940px) {
    .node--23 .banner__title { width: 80%; }
}

@media(max-width: 768px) {
    .banner__title { font-size: 32px; line-height: 42px; padding: 15px 30px; }
}

@media(max-width: 500px) {
    .banner__video { width: 155%; }
    .banner { min-height: calc(700 / 1650 * (155vw - 17px)); overflow: hidden; }
    .banner img { width: 155%; }

    .node--23 .banner__title { font-size: 24px; }
}

/*END HEADER*/

/*BOXES*/

.boxes { display: flex; overflow: hidden; padding: 0 35px; }
.product .boxes { padding: 15px 35px; }
.box { width: 33.33%; position: relative; padding: 15px; }
.box__container { position: relative; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); }
.box__image-container { overflow: hidden; }
.box__image-container img { width: 100%; height: auto; transition: .3s; }
.box:hover .box__image-container img { transition: .3s; transform: scale(1.1); filter: brightness(.7); }
.box__link { position: absolute; width: 300px; left: 50%; bottom: 25px; background: #fff; color: #000; font-size: 25px;
    text-transform: uppercase; transform: translateX(-50%); font-weight: 700; padding: 10px 30px; display: flex;
    transition: .3s; font-family: "Roboto Condensed", sans-serif; align-items: center; }
.box__link img { opacity: 0; }
.box:hover .box__link { justify-content: space-between; }
.box:hover .box__link img { animation: moveInRight 1s infinite; }
.box__link span { position: relative; left: 50%; transition: .3s; transform: translateX(-50%); }
.box:hover .box__link { background: #E6332A; color: #fff; transition: .3s; }
.box:hover .box__link img { opacity: 1; transition: .3s; }
.box:hover .box__link span { transition: .3s; left: 0; transform: translateX(0); }

@media(max-width: 1060px) {
    .box__link { bottom: 0; width: 100%; }
}

@media(max-width: 800px) {
    .boxes { flex-direction: column; align-items: center; }
    .box { width: 370px; }
    .box__link { bottom: 25px; width: 300px; }
}

@media(max-width: 650px) {
    .boxes { padding: 0 5px; }
}

@media(max-width: 380px) {
    .box { width: 100%; }
}

@media(max-width: 340px) {
    .box__link { bottom: 0; width: 100%; }
}

/*END BOXES*/

/*TEXT*/

.text { position: relative; }

.text--background { background: #EFEFEF; margin: 30px 50px 15px; }
.text__content { width: 730px; padding: 70px 50px; text-align: center; margin: 0 auto; }
.text__label { font-size: 36px; font-weight: 700; font-family: "Roboto Condensed", sans-serif; }
.text__delimeter { background: #E6332A; width: 1px; height: 50px; margin: 30px auto; }
.text__anchor { font-family: Titilium, sans-serif; font-size: 14px; display: inline-block; padding: 10px 30px;
    border: 1px solid #000; margin-top: 50px; }
.text__button { font-size: 24px; font-weight: 700; font-family: "Roboto Condensed", sans-serif; padding: 15px 40px;
    border: 1px solid #000; text-transform: uppercase; transition: .3s; margin-top: 30px; display: inline-block; }
.text__button:hover { border-color: #E6332A; transition: .3s; }

.text--page .text__content { text-align: left; }
.text--product strong { text-transform: uppercase; }
.text--partners .text__label { margin-bottom: 30px; text-transform: uppercase; }
.text--partners .text__content { padding-bottom: 0; text-transform: uppercase; }
.text--what-we-do { text-transform: uppercase; }
.text--background .text__content { text-transform: uppercase; }

.node--30 .text__content { padding-bottom: 10px; }

.text a { transition: .3s; }
.text a:hover { color: #E6332A; transition: .3s; }

#block-wesellwhatwerace { font-size: 11px; font-style: italic; text-transform: uppercase; text-align: center; }
.product #block-wesellwhatwerace { margin: 50px 0; }

.other { position: relative; overflow: hidden; }
.node--28 .other { overflow: initial; }
.decor { position: absolute; right: 50px; top: -94px; }
.front .decor { right: 0; }
.other .decor { top: -115px; }
.text--product .decor,
.text--page .decor { top: -64px; }

@media(max-width: 1300px) {
    .front .decor { width: 100px; top: -65px; }
}

@media(max-width: 1050px) {
    .decor { width: 100px; }

    .text--product .decor,
    .text--page .decor { top: -35px; }
}

@media(max-width: 830px) {
    .text__content { width: 100%; }
}

@media(max-width: 650px) {
    .text--background { margin: 30px 20px 15px; }
    .text__content { padding: 70px 20px; }
}

/*END TEXT*/

/*SHOPTRAIN*/

.shoptrain { display: flex; justify-content: center; padding: 200px 0; }
.shoptrain__button { width: 500px; color: #fff; margin: 0 20px; transition: .3s; }
.shoptrain__icon path { transition: .3s; }
.shoptrain__button:hover .shoptrain__icon path { fill: #000; transition: .3s; }
.shoptrain__anchor { padding: 50px 15px; display: flex; width: 100%; justify-content: center; align-items: center;
background: #151515; transition: .3s; text-align: center; }
.shoptrain__button:hover .shoptrain__anchor { background: #E6332A; transition: .3s; }
.shoptrain__anchor span { padding: 0 50px; min-width: 300px; }

.shoptrain--shop { display: none; }

@media(max-width: 1140px) {
    .shoptrain { padding: 200px 30px; }
    .shoptrain__button { width: 50%; }
}

@media(max-width: 950px) {
    .shoptrain__anchor { justify-content: space-around; }
    .shoptrain__anchor span { padding: 0 20px; min-width: initial; }
}

@media(max-width: 820px) {
    .shoptrain { flex-direction: column; align-items: center; padding: 150px 30px; }
    .shoptrain__button { width: 400px; margin: 20px; }
}

@media(max-width: 650px) {
    .shoptrain { padding: 100px 20px; }
    .shoptrain__button { width: 400px; margin: 20px 0; }
}

@media(max-width: 440px) {
    .shoptrain__button { width: 100%; }
}

@media(max-width: 400px) {
    .shoptrain__anchor { padding: 30px 15px; }
    .shoptrain__anchor span { font-size: 32px; }
}


@media(max-width: 340px) {
    .shoptrain__anchor span { font-size: 26px; }
}

/*END SHOPTRAIN*/

/*NEWS ROOM*/

.newses__label { text-align: center; margin: 50px 0; }
.newses__list { display: flex; }

.news { position: relative; width: 33.33%; }
.news__inner { position: absolute; bottom: 25px; padding: 0 50px; }
.news__text { color: #fff; font-weight: 700; font-size: 25px; font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase; line-height: 30px; margin-bottom: 10px; }
.news__img-container { overflow: hidden; }
.news__img-container.video:before { transform: translate(-50%, -50%); content: ''; width: 80px; height: 80px; z-index: 1;
    background: url('img/play.svg') no-repeat center /cover; position: absolute; display: block; top: 50%; left: 50%; }
.news__img-container img { width: 100%; height: auto; transition: .3s; filter: brightness(.6); }
.news__img-container:hover img { transform: scale(1.1); transition: .3s; }
.news:hover .news__arrow-img { animation: moveInRight 1s infinite; }

@media(max-width: 1020px) {
    .news__text { font-size: 20px; }
    .news__inner { padding: 0 20px; }
}

@media(max-width: 850px) {
    .news__text { font-size: 18px; line-height: 24px; }
}

@media(max-width: 760px) {
    .news { height: 300px; }
    .news__img-container { height: 100%; }
    .news__img-container img { height: 100%; object-fit: cover; }
}

@media(max-width: 650px) {
    .newses__list { flex-direction: column; }
    .news { height: initial; width: 100%; }
    .news__img-container img { height: 100%; object-fit: initial; }
    .news__text { font-size: 25px; line-height: 30px; }
}

/*END NEWS ROOM*/

/*PRODUCT NEWS*/

.front .products__label { margin: 50px 0; text-align: center; }
.front .product { transition: .3s; transform: scale(.8); }
.front .product.slick-center { transition: .3s; transform: scale(1); }
.front .products .slick-list { padding: 0 30%; }

.front .product { padding: 30px; }
.front .product__wrapper { padding: 20px; }
.front .product__name { font-size: 24px; text-align: center; text-transform: uppercase; }
.front .product__image { display: flex; justify-content: center; align-items: center; padding: 20px; }
.front .product__links { display: flex; justify-content: space-between; margin: 0 -20px; }
.front .product__link { background: #151515; padding: 10px 15px; text-transform: uppercase; font-weight: 700; color: #fff;
    display: flex; align-items: center; border: 1px solid #151515; transition: .3s; width: 50%; margin: 20px;
    justify-content: space-between; max-width: 320px; }
.front .product__link:hover { background: transparent; transition: .3s; color: #151515; }
.front .product__icon-wrapper { flex: 1; }
.front .product__link:after { content: ''; flex: 1; }
.front .product__link-text { margin-left: 5px; }

.front .product__request { display: flex; justify-content: center; margin: 20px 0; }

.front .product__request a { font-weight: 700; background: #E6332A; display: flex; align-items: center;
    padding: 12px 15px; text-transform: uppercase; justify-content: space-between; transition: .3s; color: #fff;}
.front .product__request a img { transition: .3s; margin-left: 10px; }
.front .product__request a:hover img { animation: moveInLeft 1s infinite; }

.front .products__dots-wrapper { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; }
.front .products__dots button { border-radius: 100%; border: 1px solid #bdbdbd; background: initial; margin: 0 10px;
    font-size: 0; width: 20px; height: 20px; transition: .3s; }
.front .products__dots button:hover,
.front .products__dots .slick-active button { background: #E6332A; transition: .3s; }

@media (max-width: 1280px) {
    .front .product__link { font-size: 14px; }
}

@media (max-width: 1000px) {
    .front .product__link { margin: 20px 5px; }
}

@media (max-width: 780px) {
    .front .products .slick-list { padding: 0; }
    .front .product { transform: scale(1); }
    .front .product__links { margin: 0 -15px; }
    .front .product__link { margin: 20px 15px; }
}

@media (max-width: 650px) {
    .front .product { padding: 30px 0; }
}

@media (max-width: 600px) {
    .front .product__links { flex-wrap: wrap; justify-content: center; }
    .front .product__link { width: 100%; }
}

.front-popup { width: 100%; height: 100%; background: #000a; position: fixed; top: 0; left: 0; display: none;
    justify-content: center; align-items: center; z-index: 1000; }
.front-popup__content { width: 95vw; background: #fff; border: 1px solid #bdbdbd; border-radius: 5px;
    position: relative; max-height: 95vh; overflow: auto; max-width: 700px; }
.front-popup__content .product { transform: scale(1); padding: 0; }
.front-popup__content .product__image { height: 300px; }
.front-popup__content .product__image img { width: 100%; height: 100%; object-fit: contain; }
.front-popup__close { position: absolute; right: 20px; top: 20px; font-weight: 700; font-size: 30px; cursor: pointer;
    z-index: 1; }
.front-popup__content .product__name { padding: 0 30px}

.request-form { width: 730px; margin: 150px auto 0; text-align: center; }
#contact-message-zapytanie-ofertowe-form { width: 730px; margin: 0 auto 0; padding: 70px 50px; }
#contact-message-zapytanie-ofertowe-form .js-form-item { display: flex; justify-content: center; }
#contact-message-zapytanie-ofertowe-form .form-submit { margin: 0 auto; display: block; }


/*END PRODUCT NEWS*/

/*CAREER*/

.career { display: flex; margin: 50px 0; overflow: hidden; flex-wrap: wrap; }
.career__side { width: 50%; }
.career__side-container { display: flex; justify-content: center; flex-direction: column;
    width: 300px; text-align: left; }
.career--image,
.career--text { display: flex; justify-content: center; align-items: center; }
.career__label { font-size: 24px; font-weight: 700; text-transform: uppercase;
font-family: "Roboto Condensed", sans-serif; margin-bottom: 10px; }
.career__text { /*color: #646464;*/ text-transform: uppercase; /*font-weight: 700;*/ }
.career__link a { color: #fff; background: #E6332A; font-size: 12px; text-transform: uppercase; padding: 10px 15px;
    font-weight: 700; display: flex; justify-content: space-between; align-items: center; transition: .3s; }
.career__link a img { transition: .3s; }
.career__link a:hover img { animation: moveInLeft 1s infinite; }
.career--image img { width: 100%; height: auto; }

@media(max-width: 792px) {
    .career__side-container { width: 100%; padding: 0 50px; }
}

@media(max-width: 650px) {
    .career { margin-bottom: 0; }
    .career__side { width: 100%; }
    .career__side-container { padding: 0 20px; }
    .career--text { margin-bottom: 50px; }
    .career__link { display: flex; justify-content: center; margin-top: 30px; }
    .career__link a { width: 300px; }
}

/*END CAREER*/

/*PRODUCERS*/

.producers { display: flex; flex-wrap: wrap; padding: 0 45px; }
.producer { width: 100%; padding: 5px; cursor: pointer;  }
.producer__inner { border: 1px solid #bdbdbd; display: flex; justify-content: center;
    align-items: center; transition: .3s; padding: 55px; overflow: hidden; }
.producer--endless { padding: 20px; }
.producer__details { width: 100%; padding: 5px; }
.producer__text-container { position: relative; width: 60%; }
.producer__image-container { width: 20%; padding: 20px; display: flex; justify-content: center; align-items: center; }
.producer__image-container img { max-width: 100%; height: 100%; }
.producer__gallery-container { width: 20%; padding: 20px; display: flex; justify-content: center; align-items: center;}
.producer__gallery-container img { max-width: 100%; height: 100%; }

.popup { display: none; border: 1px solid #BDBDBD; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); position: relative;
    overflow: hidden; }
.popup__content { width: 700px; margin: 50px auto; padding: 0 20px; }
.popup__close { color: #646363; font-size: 36px; position: absolute; top: 20px; right: 20px; cursor: pointer;
    width: 30px; line-height: 30px; }
.producer__name { font-size: 36px; font-weight: 700; font-family: "Roboto Condensed", sans-serif; color: #E6332A;
    text-transform: uppercase; }
.producer__link-anchor { font-weight: 700; transition: .3s; }
.producer__link-anchor:hover { font-weight: 700; color: #E6332A; transition: .3s; }
.producer__text { margin-top: 50px; }
.producer:hover .producer__inner,
.producer--active .producer__inner { border-color: #E6332A; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); transition: .3s; }

.decor-producer { position: absolute; top: 10px; right: 10px; z-index: -1; }

@media(max-width: 1150px) {
    .producer__inner { flex-direction: column; }
    .producer__text-container { width: 100%; }
    .producer__image-container { width: 100%; }
    .producer__gallery-container { width: 100%; }
}

@media(max-width: 800px) {
    .popup__content { width: 100%; }
}

@media(max-width: 650px) {
    .producers { padding: 0 15px; }
}

@media(max-width: 450px) {
    .producer__inner { padding: 20px; }
}

/*END PRODUCERS*/

/*IMAGETEXT*/

.imagetext { padding: 150px 0; }
.imagetext__text { padding: 50px 0; text-transform: uppercase; color: #fff; font-weight: 700; font-size: 24px;
    text-align: center; max-width: 700px; margin: 0 auto; }
.imagetext__text p { margin: 0; }
.imagetext__line { height: 1px; background: #E6332A; width: 400px; border: none; margin: 0 auto; }

/*END IMAGETEXT*/

/*SERVICE*/

.service { display: flex; margin: 50px 0; }
.service:nth-child(odd) { margin-bottom: 150px; }
.service:nth-child(even) .service--image { order: 2; }
.service--image { width: 60%; }
.service--image img { width: 100%; height: auto; }
.service--text { width: 40%; background: #bdbdbd; padding: 50px; position: relative; z-index: 1; height: 100%; }
.service--text ul { list-style: none; padding: 0 0 0 25px; }
.service--text li:before { content: "\2022"; color: #E6332A; font-weight: bold; display: inline-block; width: 1em;
    margin-left: -1em; }
.service:nth-child(even) .service--text { transform: translate(50px, -8%); }
.service:nth-child(odd) .service--text { transform: translate(-50px, 8%); }
.service__label { font-weight: 700; font-size: 36px; font-family: "Roboto Condensed", sans-serif; line-height: 36px;
    text-transform: uppercase; margin-bottom: 30px; }

.service__video { padding-bottom: 56.25%; position: relative; }
.service__video iframe { width: 100%; position: absolute; top: 0; left: 0; height: 100%; }
.service__play { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    border: 10px solid #fff; border-radius: 50%; z-index: 1; cursor: pointer; display: flex; justify-content: center;
    align-items: center; color: #fff; font-size: 60px; transition: .3s; }
.service--started { display: none; }
.service__play:hover { border-color: #E6332A; color: #E6332A; transition: .3s; }
.service__play:after { content: '\25BA'; }

@media(max-width: 1020px) {
    .service--text,
    .service--image { width: 50%; }

    .service__label { font-size: 28px; line-height: 28px; }
}

@media(max-width: 900px) {
    .service--text { padding: 50px 20px; }
}

@media(max-width: 768px) {
    .service { flex-wrap: wrap; }
    .service--text,
    .service--image { width: 100%; }
    .service--text { padding: 50px; }
    .service:nth-child(odd) { margin-bottom: initial; }
    .service:nth-child(even) .service--image { order: initial; }
    .service:nth-child(even) .service--text { transform: initial; }
    .service:nth-child(odd) .service--text { transform: initial; }
}

@media(max-width: 650px) {
    .service--text { padding: 50px 20px; }
}

/*END SERVICE*/

/*CONTACT US*/

.contact-us { background: #151515; text-align: center; text-transform: uppercase; color: #fff; overflow: hidden; }
.contact-us__anchor { font-family: "Roboto Condensed", sans-serif; font-size: 36px; display: flex; align-items: center;
    justify-content: center; padding: 50px 0; }
.contact-us__anchor p { margin: 0 30px 0 0; }
.contact-us img { transition: .3s; }
.contact-us:hover img { animation: moveInLeft 1s infinite; }

.contact__map { width: 100%; height: 450px; }
.contact__map iframe { width: 100%; height: 450px; }

@media(max-width: 540px) {
    .contact-us__anchor { font-size: 26px; }
}

@media(max-width: 410px) {
    .contact-us__anchor { font-size: 20px; padding: 30px 0; }
}

/*CONTACT US*/

/*MEMBERS */

.members { display: flex; flex-wrap: wrap; overflow: hidden; margin-bottom: 50px; }
.members__label { font-weight: 700; font-family: "Roboto Condensed", sans-serif; font-size: 36px; text-align: center;
    text-transform: uppercase; margin-bottom: 30px; }
.member { width: 25%; overflow: hidden; }
.member img { width: 100%; height: auto; }
.member__name { font-weight: 700; font-family: "Roboto Condensed", sans-serif; font-size: 24px; text-align: center;
    text-transform: uppercase; margin: 10px 0; }
.member__position { font-weight: 700; font-family: "Roboto Condensed", sans-serif; font-size: 18px; text-align: center;
    text-transform: uppercase; margin-bottom: 20px; }

@media(max-width: 1020px) {
    .member { width: 33.33%; }
}

@media(max-width: 650px) {
    .member { width: 50%; }
}

@media(max-width: 400px) {
    .member { width: 100%; }
}

/*END MEMBERS*/

/*MEMBERS */

.gallery { overflow: hidden; }
.gallery__label { font-weight: 700; font-family: "Roboto Condensed", sans-serif; font-size: 36px; text-align: center;
    text-transform: uppercase; margin-bottom: 30px; }
.gallery__images { display: flex; flex-wrap: wrap; }
.gallery__images a { width: 25%; overflow: hidden; position: relative; transition: .3s; }
.gallery__images a img { transition: .3s; width: 100%; height: auto; }
.gallery__images a:hover img { transition: .3s; transform: scale(1.1); }
.gallery__images a:before { content: ''; display: block; height: 100%; width: 100%; position: absolute;
    top: 0; left: 0; background: rgba(0,0,0,.5); transition: .3s; z-index: 1; opacity: 0 }
.gallery__images a:after { content: ''; display: block; height: 75px; width: 75px; position: absolute; top: 50%;
    left: 50%; background: url("/themes/ffsport/css/img/eye.svg") no-repeat center /cover; z-index: 2; opacity: 0;
    transform: translate(-50%, -50%); }
.gallery__images a:hover:before,
.gallery__images a:hover:after { opacity: 1; transition: .3s; }

@media(max-width: 1020px) {
    .gallery__images a { width: 33.33%; }
}

@media(max-width: 650px) {
    .gallery__images a { width: 50%; }
}

@media(max-width: 400px) {
    .gallery__images a { width: 100%; }
}

/*END MEMBERS*/

/*PARTNERS*/

.partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 50px 0;
    padding: 0 45px; }
.partner { padding: 5px; width: 25%; height: 200px; }
.partner:hover img { opacity: .7; transition: .3s; }
.partner__inner { border: 1px solid #BDBDBD; padding: 55px; height: 100%; transition: .3s; }
.partner:hover .partner__inner { border-color: #E6332A; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); transition: .3s; }
.partner__image-container { display: flex; justify-content: center; align-items: center; height: 100%; }
.partner__image-container img { width: 100%; height: 100px; object-fit: contain; transition: .3s; }

@media(max-width: 980px) {
    .partner { width: 50%; }
}

@media(max-width: 650px) {
    .partners { padding: 0 15px; }
}

@media(max-width: 420px) {
    .partner { width: 100%; }
}

/*END PARTNERS*/

/*BLOG*/

.blog { display: flex; flex-wrap: wrap; margin-top: 100px; }
.blog__entry { width: 100%; margin: 15px 0; }
.entry__inner { display: flex; position: relative; }
.entry__inner .news__arrow { position: absolute; bottom: 20px; left: calc(50% + 20px); transition: .3s; }
.entry__inner:hover .news__arrow { animation: moveInRight 1s infinite; }
.entry__side { width: 50%; padding: 20px; }
.entry--image img { width: 100%; height: auto; transition: .3s; }
.entry__image-container { overflow: hidden; position: relative; }
.entry__image-container.video:before { transform: translate(-50%, -50%); content: ''; width: 80px; height: 80px;
    background: url('img/play.svg') no-repeat center /cover; position: absolute; display: block; top: 50%; left: 50%; }
.entry__inner:hover .article--image img { transform: scale(1.1); transition: .3s; }
.entry__inner:hover .news__arrow { right: 30px; transition: .3s; }
.entry__title { font-size: 24px; font-weight: 700; font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase; margin-bottom: 20px; }

@media(max-width: 1200px) {
    .entry__title { font-size: 20px; line-height: 24px; }
    .entry__body { font-size: 14px; }
}

@media(max-width: 992px) {
    .entry__side .news__arrow { position: static; }
    .entry__image-container { height: 100%; }
    .entry--image img { height: 100%; object-fit: cover; }
}

@media(max-width: 767px) {
    .entry__inner { flex-wrap: wrap; }
    .entry__side { width: 100%; padding: 0; }
    .entry--image img { height: auto; object-fit: initial; }
    .entry__title { margin-top: 20px; }
    .blog__entry { margin: 30px 0; }
}

/*END BLOG*/

/*ARTICLE*/

.article { margin-top: 130px; }
.article__video { margin: 75px auto; }
.article__pdfs { margin: 75px auto; }
.article__gallery { text-align: center; }
.article__text { margin: 30px auto 50px; }
.article__text img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.article__title { font-family: "Roboto Condensed", sans-serif; text-transform: uppercase; }

.video-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; margin: 50px 0; }
.video-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; border: none; }


.back { text-align: center; margin: 75px 0; }
.back__button { font-size: 24px; font-family: "Roboto Condensed", sans-serif; font-weight: 700; display: inline-block;
    text-transform: uppercase; border: 1px solid #000; padding: 10px 50px; transition: .3s; }
.back__button:hover { color: #E6332A; border-color: #E6332A; transition: .3s; }

/*END ARTICLE*/

/*LOGIN FORM*/

.login #block-contact-us { display: 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: 320px; height: auto; margin-bottom: 50px; }
#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 #0085D0; }
#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: #0085D0; 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%; }
}

/*END LOGIN FORM*/

/*CONTACT FORM*/

.form { margin: 0 auto 50px; width: 730px; padding: 0 50px; }
.form label { display: none; }
.form select,
.form textarea,
.form input:not(.form-submit),
.form input:not(.webform-button--submit) { margin: 10px 0; width: 400px; border-radius: 3px; padding: 5px 10px;
    border: 1px solid #575757; }

.form select { padding: 8px 10px; }

.form select:focus-visible,
.form textarea:focus-visible,
.form input:focus-visible { outline: none; }

.form select:focus,
.form textarea:focus,
.form input:focus { border-color: #E6332A; }

.form input.form-submit,
.form input.webform-button--submit { border-radius: 3px; padding: 5px 20px; background: #E6332A; color: #fff;
    border: none; margin-top: 10px; text-transform: uppercase; font-weight: 700; }

@media (max-width: 700px) {
    .form { width: 100%; }
}

@media (max-width: 650px) {
    .form { padding: 0 20px; }
}

@media (max-width: 500px) {
    .form textarea,
    .form input:not(.webform-button--submit) { width: 100%; max-width: 350px; }
}

/*END CONTACT FORM*/

.draw { transition: color .15s; box-shadow: inset 0 0 0 2px #000; color: #000; background: none; border: 0;
    position: relative; vertical-align: middle; }

.draw:before,
.draw:after { border: 2px solid transparent; width: 0; height: 0; content: ""; position: absolute; }
.draw:before { top: 0; left: 0; }
.draw:after { bottom: 0; right: 0; }

.draw:hover { color: #E6332A; transition: color .15s; }
.draw:hover:before,
.draw:hover:after { width: 100%; height: 100%; }
.draw:hover:before { border-top-color: #E6332A; transition: width .15s ease-out, height .15s ease-out .15s;
    border-right-color: #E6332A; }
.draw:hover:after { border-bottom-color: #E6332A; border-left-color: #E6332A;
    transition: border-color 0s ease-out .3s, width .15s ease-out .3s, height .15s ease-out .45s; }


.draw-transparent { transition: color .15s; box-shadow: inset 0 0 0 2px transparent; color: #fff; background: none;
    /*border: initial;*/ vertical-align: middle; }
.draw-transparent:before,
.draw-transparent:after { width: 0; height: 0; content: ""; position: absolute; border: 2px solid transparent; }.draw-transparent:before { top: 0; left: 0;
    animation: borderTop .15s ease-out .5s forwards, borderRight .15s ease-out .65s forwards; }
.draw-transparent:after { bottom: 0; right: 0;
    animation: borderBottom .15s ease-out .8s forwards, borderLeft .15s ease-out .95s forwards; }

@keyframes moveInLeft {
    0%, 100% { transform: translateX(0) }
    50% { transform: translateX(-10px)  }
}

@keyframes moveInRight {
    0%, 100% { transform: translateX(0) }
    50% { transform: translateX(10px)  }
}

@keyframes jump {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-10px)  }
}

@keyframes widthdim {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes heightdim {
    0% { height: 0; }
    100% { height: 100%; }
}

@keyframes topRight {
    0% { border-top-color: transparent; border-right-color: transparent; }
    100% { border-top-color: #fff; border-right-color: #fff; }
}

@keyframes bottomLeft {
    0% { border-bottom-color: transparent; border-left-color: transparent; }
    100% { border-bottom-color: #fff; border-left-color: #fff; }
}

@keyframes borderTop {
    0% { width: 0; border-top-color: transparent; }
    100% { width: 100%; border-top-color: #fff; }
}

@keyframes borderRight {
    0% { height: 0; border-right-color: transparent; }
    100% { height: 100%; border-right-color: #fff; }
}

@keyframes borderBottom {
    0% { width: 0; border-bottom-color: transparent; }
    100% { width: 100%; border-bottom-color: #fff; }
}

@keyframes borderLeft {
    0% { height: 0; border-left-color: transparent; }
    100% { height: 100%; border-left-color: #fff; }
}

@keyframes fadeInLeft{
    0% { opacity:0; transform:translate3d(-100px,0,0) }
    to { opacity:1; transform:translateZ(0); }
}

@keyframes fadeInRight{
    0% { opacity:0; transform:translate3d(100px,0,0) }
    to { opacity:1; transform:translateZ(0) }
}
@keyframes fadeOut{
    0% { opacity:1 }
    to { opacity:0 }
}
.animated{ animation-duration:1s; animation-fill-mode:both; }
.fadeOut.animated{ animation-duration:.3s; animation-fill-mode:forwards; }
.fadeOut{ animation-name:fadeOut; }
.fadeInRight.animated { animation-name:fadeInRight; animation-delay: 1s; }
.fadeInLeft.animated { animation-name:fadeInLeft; animation-delay: .5s; }