:root {
     --main-transition: all .26s ease-in-out;
     --main-secondary-color: #5959EF;
     --main-primary-color: #252563;
     --accent-color: #64E33D;
}
 @font-face {
     font-family: "Geometos";
     src: url("/fonts/Geometos.ttf");
}
 @font-face {
     font-family: "Work Sans";
     src: url("/fonts/WorkSans-Light.ttf");
     font-weight: 300;
}
 @font-face {
     font-family: "Work Sans";
     src: url("/fonts/WorkSans-Regular.ttf");
     font-weight: 400;
}
 @font-face {
     font-family: "Work Sans";
     src: url("/fonts/WorkSans-Medium.ttf");
     font-weight: 500;
}
 @font-face {
     font-family: "Work Sans";
     src: url("/fonts/WorkSans-Bold.ttf");
     font-weight: 700;
}
 input:-internal-autofill-selected {
     background-color: transparent !important;
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     margin-bottom: 55px;
     z-index: 2;
     position: relative;
     background: #000;
}
 header, main, .placeholder {
     position: relative;
}
 header {
     z-index: 10;
     width: 100%;
     padding: 3.5% 6%;
     position: fixed;
     top: 0;
     display: grid;
     grid-template-areas: 
                "logo navegation"
                "tpn tpn";
     gap:1em;
     justify-content: space-between;
     align-items: center;
     background: rgb(0,0,0);
     background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 25%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0) 100%);
     transition: var(--main-transition);
}

.mobile-toggle-container{
    grid-area: navegation;
}
 /* .vfx-header {
} */
 .btn-check:focus+.btn, .btn:focus {
     box-shadow: 0 0 0 0.25rem #5959EF40;
}
 .mobile-nav-toggle {
     display: none;
     position: absolute;
     right: 8vw;
     top: 5vw;
     color: #fff;
     width: 30px;
}
 main {
     background: #000;
}
 .vfx-logo-container {
    grid-area: logo;
}
 .vfx-logo-container img {
     width: 100%;
     max-width: 300px;
     transition: var(--main-transition);
}
 nav {
     grid-area: logo navegation;
}
 nav ul {
     list-style-type: none;
     padding: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     min-width: 460px;
     margin-left: auto;
     width: 35vw;
}
 nav a {
     font-family: "Work Sans";
     color: #fff;
     font-size: calc(14px + .2vw);
     text-decoration: none;
     display: inline-block;
     position: relative;
}
 nav a:hover {
    color: #fff !important;
 }
 nav a::before {
     content: "";
     width: 0;
     height: 1px;
     background: #5958F1;
     position: absolute;
     left: -1px;
     bottom: -6px;
     transition: all .25s ease-in-out;
}
 nav a:hover::before {
     width: 100%;
     transition: all .25s ease-in-out;
}
.lang-options {
    color: #fff !important;
    display:  inline-block;
    min-width: 32px;
    text-align: center;
    vertical-align: middle;
    margin-top: -8px;
}
 p, dl, ol, ul {
     margin-bottom: 0;
}

 a:hover, a {
     color: #fff !important;
     text-decoration: none !important;
     font-family: "Work Sans";
}
/*Projects Slide*/
 .vfx-project-slide {
     width: 100%;
     height: 100vh;
     padding: 6% 6% 3.8% 6%;
     display: flex;
     align-items: flex-end;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}
 /* .vfx-project-info {
} */
 .vfx-project-data-container{
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: -moz-fit-content;
     width: -webkit-fit-content;
     width: fit-content;
     margin-bottom: 18px;
}
 .vfx-project-company {
     width: calc(80px + .1vw);
     display: block;
     margin-bottom: 10px;
    /*margin-left: 20px;
     */
}
.logo-tpn {
    grid-area: tpn;
    max-width: 5em;
     /*position: relative;
     display: block;
      left: -420px;
     bottom: -76px; */
}
.mobile-logo-tpn {
     position: relative;
     display: block;
    left: -20px;
     bottom: -26px;
}


 .vfx-project-title, .vfx-page-title {
     font-size: calc(20px + 1.5vw);
     letter-spacing: 1px;
     font-family: "Geometos";
     font-weight: 400;
     color: #fff;
     margin-bottom: .4em;
}
 .blast-beat .vfx-project-title, .blast-beat .vfx-project-data, .blast-beat .vfx-project-title-single, .blast-beat-2 .vfx-project-title-single, .blast-beat-2 .vfx-project-data-single, .blue-pig .vfx-project-title-single, .blue-pig .vfx-project-data-single {
     text-shadow: 0 2px 6px #00000060;
}
 .vfx-project-data {
     font-size: calc(14px + .2vw);
     font-family: "Work Sans";
     color: #fff;
     margin-bottom: .6em;
}
 .vfx-project-cta {
     position: relative;
     font-size: calc(14px + .2vw);
     font-family: "Work Sans";
     font-weight: 400;
     color: #fff;
     text-decoration: none;
     transition: background .3s linear;
     padding-bottom: 10px;
}
 .vfx-project-cta::after {
     content: "";
     width: 100%;
     height: 1px;
     position: absolute;
     left: 0;
     bottom: 0px;
     background: linear-gradient(90deg, #5958F1 10.77%, #F5F5F5 106.32%);
     transition: background .3s linear;
}
 .vfx-project-cta:hover::after {
     background: linear-gradient(90deg, #F5F5F5 10.77%, #5958F1 106.32%);
     transition: background .3s linear;
}
 .vfx-project-slide.sanctorum {
     background-image: url("https://vertigovfx.com/media/Sanctorum-scaled.jpg");
}
 .vfx-project-slide.blast-beat {
     background-image: url("https://vertigovfx.com/media/blast-beat-hero.jpg");
     background-position: 0 8px;
}
 .vfx-project-slide.wk-sarah {
     background-image: url("https://vertigovfx.com/media/wk-sarah-hero-img.jpg");
}
 .vfx-project-slide.teo {
     background-image: url("https://vertigovfx.com/media/un_dos-teo_-min-scaled.jpg");
}
.vfx-project-slide.gringo-hunter {
     background-image: url("https://vertigovfx.com/media/poster-gringo-hunter.png");
}
.vfx-project-slide.outer-range {
     background-image: url("https://vertigovfx.com/media/OUTER_RANGE_RNGE_101_025_04_LUT.png");
}
.vfx-project-slide.see {
     background-image: url("https://vertigovfx.com/media/See_TV_Series_Poster_HD.png");
}
 .swiper-pagination {
     width: -moz-fit-content !important;
     width: -webkit-fit-content !important;
     width: fit-content !important;
     right: 6% !important;
     bottom: 2.8vw !important;
     left: auto !important;
}
 .swiper-pagination-bullet {
     width: 100px;
     border-radius: 100px;
     background: #C4C4C4;
     opacity: 0.4;
     height: 10px;
}
 .swiper-pagination-bullet {
     margin-left: 20px !important;
}
 .swiper-pagination-bullet-active {
     background: #dedede;
     opacity: 1;
}
 .vfx-reel-btn, .vfx-projects-btn, button[type="submit"] {
     display: block;
     width: 180px;
     padding: 10px 0;
     font-family: "Work Sans";
     font-size: 1em;
     font-weight: 500;
     color: #060606;
     text-align: center;
     text-decoration: none;
     background: #F5F5F5;
     position: absolute;
     right: 6.7% !important;
     bottom: 6.7vw !important;
     z-index: 999;
     transform: skewX(-14deg);
     font-size: calc(13px + .1vw);
     transition: all .2s ease-in-out;
}
 .vfx-projects-btn, button[type="submit"] {
     background: #252563;
     margin: 0 auto;
     position: static;
     right: 0;
     bottom: 0;
}
 .vfx-reel-btn:hover {
     background: #060606;
     color: #F5F5F5;
}
 button[type="submit"]:hover {
     background: var(--main-secondary-color);
     color: #fff;
}
 .vfx-reel-btn span, .vfx-projects-btn span, button[type="submit"] span {
     display: block;
     transform: skewX(14deg) !important;
}
 button[type="submit"] {
     width: 42%;
     padding: 2.9% 0;
     border: none;
     color: #fff;
     font-weight: 300;
     letter-spacing: 1px;
     font-size: calc(12px + .5vw);
}
 .vfx-reel-container {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 98vh;
     z-index: 999999999999;
     padding: 0%;
     background: #000000;
     display: none;
}
 .modal.fade .modal-dialog {
     z-index: 999999999 !important;
}
 .modal-header {
     position: absolute;
     right: -40px;
     top: 10px;
}
 button {
     border-radius: 0 !important;
}
 .modal-dialog {
     max-width: 80% !important;
     background: none;
     border: none;
}
 .modal-content {
     background: transparent;
     border: none;
}
 .modal-backdrop.show {
     opacity: 0.8;
}
 .modal-header {
     border: none;
}
 .btn-close {
     background: url("https://vertigovfx.com/media/cross-1.svg");
}
 .vfx-about-intro {
     width: 100%;
     padding: 8%;
     background: #0B0B0B;
}
 .vfx-about-intro p {
     font-family: "Work Sans";
     font-weight: 300;
     font-size: calc(16px + .2vw);
     line-height: calc(20px + .2vw);
     color: #fff;
     text-align: center;
     max-width: 640px;
     margin: 0 auto;
}
 .vfx-about-intro p:nth-child(1) {
     margin-bottom: 30px;
}
/*Footer*/
 footer {
     position: fixed;
     bottom: 0;
     width: 100%;
     padding: 0 2%;
     z-index: -1;
     height: 55px;
     background: 
    /*#060606*/
     #0a0a0a;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
body.home footer,
body.about footer {
    background: #000;
}
 .footer-icon {
     width: 20px;
     height: fit-content;
}
 .footer-contact-col {
     display: flex;
     width: 400px;
}
.footer-contact-col.gitf {
    font-family: "Work Sans";
    margin-bottom:  8%;
    width:  100% !important;
    justify-content: flex-start !important;
    }
    .footer-contact-col a {
         transition: var(--main-transition) !important;
    }
    .footer-contact-col.gitf a:hover {
        color: var(--main-secondary-color) !important;
    }
 body footer .footer-contact-col p {
     font-size: 14px;
     color: #fff !important;
}
 .footer-credentials-col {
     display: flex;
     justify-content: flex-end;
     width: 400px;
}
 .footer-credentials-col p {
     color: #fff;
     font-size: 14px;
     font-family: "Work Sans";
     margin-right: 30px;
     margin-top: 2px;
}
 .social-icons {
     min-width: 50px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .social-icons a:nth-child(1) img {
     max-width: 10px;
}
 .social-icons a:nth-child(2) img {
     max-width: 16px;
}
/*About*/
 .vfx-studio-img {
     width: 100%;
     margin-top: -3.5% 
}
 .vfx-studio-img img {
     width: 100%;
}
 .vfx-page-title {
     text-align: center;
     color: #fff;
     margin-bottom: 40px;
}
 p.vfx-about-intro-txt {
     font-size: calc(20px + .2vw);
     line-height: calc(28px + .2vw);
     font-weight: 400;
     width: 75%;
     max-width: 100%;
}
/*0B0B0B*/
/*Projects*/
 .vfx-project-data-single, .vfx-project-title-single, .vfx-project-overlay {
     transition: opacity .18s linear;
}
 .vfx-projects {
     width: 100%;
     padding: 3.5% 10%;
     background: #000;
}
 .vfx-projects-row {
     width: 100%;
     display: flex;
     justify-content: space-between;
     margin-bottom: 5%;
}
 .vfx-projects-col {
     width: 30%;
}
 .vfx-project-container {
     width: 100%;
     height: 34.8vw;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 8% 8% 6% 8%;
     background: #ddd;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
}
 .vfx-project-container.placeholder {
     background: #040404;
     cursor: default;
}
 .vfx-project-container.placeholder a {
     cursor: default;
}
 .vfx-project-container a {
     width: 100%;
     height: 100%;
     z-index: 3;
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
}
 .vfx-project-container.sanctorum {
     background-image: url("https://vertigovfx.com/media/sanctorum-poster.jpg");
}
 .vfx-project-container.sanctorum-2 {
     background-image: url("https://vertigovfx.com/media/sanctorum-1.png");
}
 .vfx-project-container.blast-beat {
     background-image: url("https://vertigovfx.com/media/blast-beat-poster.jpg");
}
 .vfx-project-container.blast-beat-2 {
     background-image: url("https://vertigovfx.com/media/blast-beat-hero-img-1.jpg");
}
 .vfx-project-container.wk-sarah {
     background-image: url("https://vertigovfx.com/media/wks-poster.jpg");
}
 .vfx-project-container.wk-sarah-2 {
     background-image: url("https://vertigovfx.com/media/wk-sarah-hero-img.jpg");
}
 .vfx-project-container.teo {
     background-image: url("https://vertigovfx.com/media/ab67616d0000b273c4502e79a78fdc8b5aaa718b.jpg");
}
 .vfx-project-container.blue-pig {
     background-image: url("https://vertigovfx.com/media/blue-pig-poster.jpg");
}
.vfx-project-container.iam-virgo {
    background-image: url("https://vertigovfx.com/media/vfx-im-virgo.webp");
}
.vfx-project-container.outer-range {
    background-image: url("https://vertigovfx.com/media/outer-range.png");
}
.vfx-project-container.gringo-hunter {
    background-image: url("https://vertigovfx.com/media/gringo-hunter.png");
}
.vfx-project-container.see {
    background-image: url("https://vertigovfx.com/media/See_TV_Series_Poster_HD.png");
}

 .vfx-project-content {
     height: -moz-fit-content;
     height: -webkit-fit-contet;
     height: fit-content;
     display: none;
}
 .vfx-project-data-single {
     font-size: calc(10px + .3vw);
     line-height: 1em;
     color: #fff;
     font-family: "Work Sans";
     font-weight: 400;
     margin-bottom: 15px;
}
 .vfx-project-title-single {
     font-size: calc(24px + .5vw);
     line-height: .9em;
     color: #fff;
     font-family: "Geometos";
     font-weight: 400;
     letter-spacing: 1px;
}
 .vfx-project-overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 2;
     background: linear-gradient(73.65deg, rgba(89, 88, 241, 0.41) 8.17%, rgba(37, 37, 99, 0.41) 50.28%, rgba(25, 25, 66, 0.272097) 101.17%, rgba(0, 0, 0, 0) 102.46%, rgba(0, 0, 0, 0) 102.46%, rgba(14, 14, 37, 0.1722) 102.46%);
     opacity: 0;
}
 .vfx-project-overlay:hover {
     opacity: 1;
     border: solid 3px #5959EF;
}
 .vfx-project-container.placeholder .vfx-project-overlay:hover {
     opacity: 0;
     border: none;
}
 .vfx-project-container:hover .vfx-project-data-single, .vfx-project-container:hover .vfx-project-title-single{
     opacity: 0;
}
/*Case Study*/
 .vfx-case-study-hero {
     width: 100%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: flex-end;
     padding: 3.5% 6%;
     background-image: url("https://vertigovfx.com/media/sanctorum-case-study-hero.png");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}
 .vfx-case-study-data {
     color: #3D73FF;
     font-size: calc(22px + .2vw);
     margin-bottom: 0;
}
 .vfx-case-study-info {
     background: #fff;
     padding: 8% 16%;
}
 .vfx-csi-brief {
     margin-bottom: 3.8%;
}
 .vfx-csi-brief, .vfx-csi-data {
     display: flex;
     justify-content: space-between;
}
 .vfx-csib-col-1 {
     width: 10%;
}
 .vfx-csib-col-2 {
     width: 90%;
}
 .vfx-csi-data {
     margin-left: 10%;
     max-width: 60%;
     min-width: 555px;
}
 .vfx-divider {
     width: 22%;
     min-width: 180px;
     height: 2px;
     display: block;
     background: #3D73FF;
     margin-top: 9%;
}
 .vfx-csib-title {
     font-size: calc(14px + .2vw);
     font-family: "Work Sans";
     font-weight: 700;
}
 .vfx-csib-txt {
     font-size: calc(14px + .2vw);
     font-family: "Work Sans";
     font-weight: 400;
}
 .vfx-csid-txt {
     font-size: calc(12px + .3vw);
     font-family: "Work Sans";
     font-weight: 400;
}
 .vfx-csid-col {
     width: 30%;
}
 .vfx-case-study-showcase {
     width: 100%;
     padding: 6%;
     background: #000;
}
 .vfx-css-trailer {
     width: 82%;
     height: 38vw;
     margin: 0 auto 6%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-image: url("https://vertigovfx.com/media/vfx-css.png");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     border-radius: 42px;
     border: solid 3px #5959EF;
     cursor: pointer;
}
 .vfx-csst-title {
     color: #fff;
     font-size: calc(22px + .8vw);
     font-family: "Geometos";
     font-weight: 400;
     letter-spacing: 1px;
}
 .vfx-css-b-and-a {
     width: 100%;
     display: flex;
     justify-content: space-between;
     margin-bottom: 6%;
}
 .vfx-cssbaa-col {
     width: 48%;
}
 .vfx-cssbaa-col.full {
     width: 100%;
}
 .vfx-csst-caption, .vfx-css-quote {
     color: #fff;
     font-size: calc(18px + .2vw);
     font-family: "Work Sans";
     font-weight: 400;
     max-width: 75%;
     text-align: center;
     margin: 0 auto;
     margin-bottom: 6%;
}
 .vfx-css-quote {
     position: relative;
     font-size: calc(24px + .2vw);
     max-width: 60%;
     margin: 6% auto 12%;
}
 .vfx-css-quote::before {
     content: "''";
     position: absolute;
     left: -6%;
     top: -30%;
     color: #3DD308;
     font-family: "Geometos";
     font-size: 3em;
     font-style: italic;
}
 .vfx-css-quote::after {
     content: "''";
     position: absolute;
     right: -4%;
     bottom: -70%;
     color: #3DD308;
     font-family: "Geometos";
     font-size: 3em;
     font-style: italic;
}
 .vfx-css-full-img {
     width: 100%;
     margin-bottom: 6%;
}
 .vfx-csi-row {
     display: flex;
     justify-content: space-between;
}
 .vfx-csi-row:nth-child(1) {
     margin-bottom: 8%;
}
 .vfx-csi-col-1 {
     width: 10%;
     padding-right: 2%;
}
 .vfx-csi-col-2 {
     width: 90%;
     transform: skewX(4deg);
     padding-left: 4%;
     border-left: solid 2px #3D73FF;
}
 .vfx-csi-col-2 p {
     transform: skewX(-4deg);
}
/* Plugin CSS */
 .twentytwenty-container * {
     font-family: "Work Sans";
     font-weight: 400;
}
 .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
     content: " ";
     display: block;
     background: #5959EF;
     position: absolute;
     z-index: 30;
     -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
     -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
     box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}
 .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
     width: 3px;
     height: 9999px;
     left: 50%;
     margin-left: -1.5px;
}
 .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
     width: 9999px;
     height: 3px;
     top: 50%;
     margin-top: -1.5px;
}
 .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
}
 .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
     transition-duration: 0.5s;
}
 .twentytwenty-before-label, .twentytwenty-after-label {
     -webkit-transition-property: opacity;
     -moz-transition-property: opacity;
     transition-property: opacity;
}
 .twentytwenty-before-label:before, .twentytwenty-after-label:before {
     color: white;
     font-size: 13px;
     letter-spacing: 0.1em;
}
 .twentytwenty-before-label:before, .twentytwenty-after-label:before {
     position: absolute;
     background: rgba(255, 255, 255, 0.2);
     line-height: 38px;
     padding: 0 20px;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
}
 .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
     top: 50%;
     margin-top: -19px;
}
 .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
     left: 50%;
     margin-left: -45px;
     text-align: center;
     width: 90px;
}
 .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
     width: 0;
     height: 0;
     border: 6px inset transparent;
     position: absolute;
}
 .twentytwenty-left-arrow, .twentytwenty-right-arrow {
     top: 50%;
     margin-top: -6px;
}
 .twentytwenty-up-arrow, .twentytwenty-down-arrow {
     left: 50%;
     margin-left: -6px;
}
 .twentytwenty-container {
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
     z-index: 0;
     overflow: hidden;
     position: relative;
     -webkit-user-select: none;
     -moz-user-select: none;
}
 .twentytwenty-container img {
     width: 100%;
     max-width: 100%;
     position: absolute;
     top: 0;
     display: block;
}
 .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active:hover.twentytwenty-overlay {
     background: rgba(0, 0, 0, 0);
}
 .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active:hover.twentytwenty-overlay .twentytwenty-after-label {
     opacity: 0;
}
 .twentytwenty-container * {
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
}
 .twentytwenty-before-label {
     opacity: 0;
}
 .twentytwenty-before-label:before {
     content: "Before";
}
 .twentytwenty-after-label {
     opacity: 0;
}
 .twentytwenty-after-label:before {
     content: "After";
}
 .twentytwenty-horizontal .twentytwenty-before-label:before {
     left: 10px;
}
 .twentytwenty-horizontal .twentytwenty-after-label:before {
     right: 10px;
}
 .twentytwenty-vertical .twentytwenty-before-label:before {
     top: 10px;
}
 .twentytwenty-vertical .twentytwenty-after-label:before {
     bottom: 10px;
}
 .twentytwenty-overlay {
     -webkit-transition-property: background;
     -moz-transition-property: background;
     transition-property: background;
     background: rgba(0, 0, 0, 0);
     z-index: 25;
}
 .twentytwenty-overlay:hover {
     background: rgba(0, 0, 0, 0.5);
}
 .twentytwenty-overlay:hover .twentytwenty-after-label {
     opacity: 1;
}
 .twentytwenty-overlay:hover .twentytwenty-before-label {
     opacity: 1;
}
 .twentytwenty-before {
     z-index: 20;
}
 .twentytwenty-after {
     z-index: 10;
}
 .twentytwenty-handle {
     height: 38px;
     width: 38px;
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -22px;
     margin-top: -22px;
     border: 3px solid #5959EF;
     -webkit-border-radius: 1000px;
     -moz-border-radius: 1000px;
     border-radius: 1000px;
     -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
     -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
     box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
     z-index: 40;
     cursor: pointer;
}
 .twentytwenty-horizontal .twentytwenty-handle:before {
     bottom: 50%;
     margin-bottom: 22px;
    /*-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     */
}
 .twentytwenty-horizontal .twentytwenty-handle:after {
     top: 50%;
     margin-top: 22px;
    /*-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     */
}
 .twentytwenty-vertical .twentytwenty-handle:before {
     left: 50%;
     margin-left: 22px;
     -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
 .twentytwenty-vertical .twentytwenty-handle:after {
     right: 50%;
     margin-right: 22px;
     -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
     box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
 .twentytwenty-left-arrow {
     border-right: 6px solid white;
     left: 50%;
     margin-left: -17px;
}
 .twentytwenty-right-arrow {
     border-left: 6px solid white;
     right: 50%;
     margin-right: -17px;
}
 .twentytwenty-up-arrow {
     border-bottom: 6px solid white;
     top: 50%;
     margin-top: -17px;
}
 .twentytwenty-down-arrow {
     border-top: 6px solid white;
     bottom: 50%;
     margin-bottom: -17px;
}
 .vfx-project-page {
     width: 60%;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 4% 0;
     margin: 0 auto;
}
 .vfx-project-page img {
     width: 100%;
}
 .vfx-pp-img {
     width: 47%;
}
 .vfx-pp-info {
     width: 47%;
}
 .vfx-pp-info p {
     color: #fff;
     font-size: calc(16px + .2vw);
     margin-bottom: 20px;
     font-family: "Work Sans";
     font-weight: 400;
}
 .vfx-pp-single-img {
     width: 48%;
}
 .vfx-project-img-tag {
     width: 100%;
}
 .vfx-css-b-and-a.last {
     padding-bottom: 4%;
     margin-bottom: 0;
}
 .vfx-css-full-img.last {
     padding-bottom: 4%;
     margin-bottom: 0;
}
/*Get in Touch*/
 .vfx-get-in-touch {
     width: 100vw;
     height: 100vh;
     padding-right: 6.8%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: #000;
}
 .get-in-touch-form {
     width: 32%;
}
 .get-in-touch-map {
     width: 64.4%;
     height: 100vh;
     background: var(--main-primary-color);
     clip-path: -webkit-polygon(0 0, 83% 0, 100% 100%, 0 100%);
     clip-path: -moz-polygon(0 0, 83% 0, 100% 100%, 0 100%);
     clip-path: polygon(0 0, 83% 0, 100% 100%, 0 100%);
}
 #exampleModal2 .modal-dialog {
     max-width: 100% !important;
     z-index: 9999;
}
 #exampleModal2 button.btn-close {
     z-index: 9999;
}
 #exampleModal2 .modal-header {
     top: 40%;
     right: 2%;
     z-index: 9999;
}
 #exampleModal2 .modal-content {
     position: absolute;
     top: 0;
}
 #exampleModal2 .modal-header .btn-close {
     padding: .8vw;
}
 .gitf-title {
     color: #fff;
     font-family: "Work Sans";
     font-weight: 500;
     font-size: calc(20px + 1vw);
     margin-bottom: 3%;
     margin-top: 2%;
}
 .gitf-txt {
     color: #fff;
     font-family: "Work Sans";
     font-weight: 300;
     font-size: calc(12px + .3vw);
     margin-bottom: 2%;
}
 .gitf-title span {
     color: #64E33D;
}
 input[type="text"]::placeholder {
     color: #fff;
}
 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 30px #000 inset !important;
}
 input:-webkit-autofill {
     -webkit-text-fill-color: #fff !important;
}
 input[type="text"], textarea {
     padding-bottom: 4px;
     background: transparent;
     border: none;
     color: #fff;
     font-family: "Work Sans";
     font-weight: 300;
     font-size: calc(12px + .5vw);
}
 input[type="text"] {
     width: 46%;
     border-bottom: solid 2px #fff;
     outline: none;
}
 textarea {
     width: 100%;
     height: 8vw;
     padding: 10px;
     margin-bottom: 6%;
     border: solid 2px #fff;
}
 label {
     margin-bottom: 10px;
     color: #fff;
     font-family: "Work Sans";
     font-weight: 300;
     font-size: calc(12px + .5vw);
}
 .gitf-row {
     display: flex;
     justify-content: space-between;
     margin-bottom: 6%;
}
 .vfx-custom-select {
     width: 46%;
}
/* The container must be positioned relative: */
 .vfx-custom-select {
     position: relative;
     font-family: "Work Sans";
     font-weight: 300;
     border-bottom: solid 2px #fff;
}
 .vfx-custom-select select {
     display: none;
    /*hide original SELECT element: */
}
 .select-selected {
     background-color: transparent;
     font-size: calc(12px + .5vw);
     border-bottom: solid 2px #fff;
}
/* Style the arrow inside the select element: */
 .select-selected:after {
     position: absolute;
     content: "";
     top: 14px;
     right: 10px;
     width: 0;
     height: 0;
     border: 6px solid transparent;
     border-color: #fff transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
 .select-selected.select-arrow-active:after {
     border-color: transparent transparent #fff transparent;
     top: 7px;
}
/* style the items (options), including the selected item: */
 .select-items div,.select-selected {
     color: #ffffff;
     padding: 4% 6%;
     border: 1px solid transparent;
     border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
     cursor: pointer;
}
 .select-selected {
     padding-left: 0;
}
/* Style items (options): */
 .select-items {
     position: absolute;
     background-color: #111111;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 99;
}
/* Hide the items when the select box is closed: */
 .select-hide {
     display: none;
}
 .select-items div:hover, .same-as-selected {
     background-color: rgba(0, 0, 0, 0.1);
     color: var(--main-secondary-color);
     transition: var(--main-transition);
}
/*Submission Complete*/
 .submission-title {
     font-size: calc(20px + 1.2vw);
     color: var(--accent-color);
     font-family: "Work Sans";
     font-weight: 400;
     margin-bottom: calc(10px + .2vw);
}
 .submission-txt {
     font-size: calc(14px + 1vw);
     color: #fff;
     font-family: "Work Sans";
     font-weight: 400;
}
 .form-data-uploader-container.fd-uploader-container0 {
     margin-bottom: 6%;
}
 .uppy-Dashboard-AddFiles-title, .uppy-Dashboard-browse {
     font-size: calc(12px + .1vw) !important;
     color: #fff !important;
}
 .uppy-Dashboard-inner {
     background: #111111;
}
 [data-uppy-drag-drop-supported=true] .uppy-Dashboard-AddFiles {
     margin: 0;
     border-radius: 0;
     border: none;
}
 .uppy-Dashboard-inner {
     border-radius: 0;
}
 .form-data-upload-button {
     width: 100% !important;
     background: #111111;
     background-image: url("https://vertigovfx.com/media/upload-icon.svg");
     background-size: 26px;
     background-repeat: no-repeat;
     background-position: center;
     color: #fff;
     border: none;
     height: calc(46px + .5vw);
     transition: var(--main-transition);
}
 .form-data-upload-button:hover {
     background-color: #080808;
}
 .uppy-Dashboard-files::after {
     content: "Your files have been processed successfuly, close this window and click on 'send' to submit the form'";
     bottom: 12px;
     left: 19px;
     position: absolute;
     color: #fff;
     font-family: "Work Sans";
     font-size: 14px;
     font-weight: 300;
}
 .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
     background-color: var(--accent-color);
     color: #000;
}
 .uppy-StatusBar.is-waiting .uppy-StatusBar-actions, .uppy-DashboardContent-bar {
     background: #080808;
}
 .uppy-StatusBar:not([aria-hidden=true]).is-waiting, .uppy-DashboardContent-bar {
     border: none;
}
 .uppy-DashboardContent-title {
     color: #fff;
}
 .uppy-DashboardContent-addMore, .uppy-DashboardContent-back {
     color: var(--main-secondary-color);
}
 .uppy-Dashboard-AddFiles-title button.uppy-Dashboard-browse {
     color: var(--accent-color) !important;
}
/*Media Queries*/
 @media only screen and (min-width:751px) {
     .vfx-header.darkHeader {
         padding: 1.5% 6% 1.7%;
    }
     .vfx-header.darkHeader .vfx-logo-container img {
         width: 100%;
         max-width: 210px;
    }
}
 @media only screen and (max-width:1024px) {
     .vfx-logo-container img {
         max-width: 200px;
    }
     .footer-contact-col, .footer-credentials-col {
         width: 48%;
    }
     .vfx-project-title-single {
         font-size: calc(16px + .5vw);
    }
     .vfx-css-quote::before {
         left: -7%;
    }
     .vfx-css-quote::after {
         right: -2%;
         bottom: -40%;
    }
     .vfx-csi-row {
         flex-direction: column;
    }
     .vfx-csi-col-1, .vfx-csi-col-2 {
         width: 100%;
    }
}
 @media only screen and (max-width:930px) {
    body {
        margin-bottom: 120px;
    }
    footer {
        height: 120px;
    }
    .footer-contact-col p {
        display: flex;
        flex-direction: column;
    }
    .footer-phone-separator {
        display: none;
    }
     .vfx-get-in-touch {
         padding: 6%;
    }
     .get-in-touch-map {
         display: none;
    }
     .get-in-touch-form, input[type="text"], .vfx-custom-select {
         width: 100%;
         margin-bottom: 4%;
    }
     .gitf-row {
         flex-direction: column;
         margin-bottom: 0;
    }
     textarea {
         height: 28vw;
    }
     .select-selected {
         padding-top: 0;
    }
     #exampleModal2 .modal-header .btn-close {
         padding: 1.5vw;
    }
    
    .logo-tpn{
        max-width: 5em;
    }
}
 @media only screen and (max-width:800px) {
     nav ul {
         min-width: initial;
         width: 55vw;
    }
     .vfx-csi-data {
         min-width: auto;
         flex-direction: column;
    }
     .vfx-csid-col {
         width: 100%;
         margin-bottom: 4%;
    }
     .vfx-csid-col:nth-child(3) {
         margin-bottom: 0;
    }
     .vfx-project-page {
         width: 90%;
         flex-direction: column;
         padding: 10% 0;
         text-align: center;
    }
     .vfx-project-page img {
         width: 60%;
         margin-bottom: 20px;
    }
     .vfx-pp-img, .vfx-pp-info {
         width: 100%;
    }
     .uppy-Dashboard--modal .uppy-Dashboard-inner {
         top: 150px;
         max-height: 50%;
    }
}
 @media only screen and (max-width:750px) {
    .footer-contact-col a {
        margin-bottom: 14px;
    }
    .footer-contact-col a:first-child {
        margin-top: 10px;
    }
     nav {
         width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         margin: 0 auto;
    }
     #navList {
         min-width: initial;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center !important;
         height: calc(200px + 10vw);
         background: black;
         padding: 6% 0;
         display: none;
    }
     #navList.active {
         display: flex;
    }
     .mobile-nav-toggle {
         display: block;
         z-index: 9999;
    }
    /*Projects Slides*/
     .vfx-project-slide {
         padding: 6% 6% 24% 6%;
    }
     .swiper-pagination {
         width: 100% !important;
         max-width: 100% !important;
         right: 0 !important;
         left: 0 !important;
         bottom: 8.5vw !important;
    }
     .swiper-pagination-bullet {
         width: 19%;
    }
     .swiper-pagination-bullet {
         margin-left: 4% !important;
    }
     .swiper-pagination-bullet:nth-child(1) {
         margin-left: 0 !important;
    }
     .vfx-reel-btn {
         width: 42vw;
         padding: 2vw 0;
         bottom: 22vw !important;
    }
     footer {
         flex-direction: column;
         padding: 6.5% 0;
         height: 30vh;
    }
     .footer-contact-col, .footer-credentials-col{
         width: 80%;
         text-align: center;
         display: flex;
         justify-content: center;
    }
     .footer-icon {
         order: -1;
    }
     .footer-credentials-col p, .footer-contact-col p {
         font-size: 11px;
    }
     body {
         margin-bottom: 30vh;
    }
     .vfx-about-intro p {
         font-size: calc(12px + .2vw);
         line-height: calc(16px + .2vw);
    }
     .vfx-about-intro {
         padding: 12% 10%;
         min-height: 75vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
    }
     .vfx-about-intro.home {
         min-height: 35vh;
    }
     .vfx-project-slide.blast-beat {
         background-size: cover;
    }
     .modal-dialog {
         max-width: 100% !important;
    }
     .modal-header {
         position: absolute;
         right: 10px;
         top: -40px;
    }
     p.vfx-about-intro-txt {
         width: 100%;
    }
    /*Projects*/
     .vfx-projects-row {
         flex-direction: column;
         margin-bottom: 0;
    }
     .vfx-projects-col {
         width: 100%;
         margin-bottom: 30px;
    }
     .vfx-project-container {
         height: 700px;
         max-width: 460px;
         margin: 0 auto;
    }
     .vfx-project-container.placeholder {
         display: none;
    }
     .vfx-project-data-single {
         margin-bottom: 6px;
         font-size: 12px;
    }
     .vfx-css-b-and-a {
         flex-direction: column;
         margin-bottom: 0;
    }
     .vfx-cssbaa-col {
         width: 100%;
         margin-bottom: 8%;
    }
     .vfx-csi-brief {
         flex-direction: column;
    }
     .vfx-csi-data, .vfx-csib-col-2, .vfx-csib-col-1 {
         max-width: 100%;
         margin: 0;
    }
     .vfx-divider {
         margin-top: 8%;
         margin-bottom: 3%;
    }
     .vfx-csib-title{
         margin-bottom: 40%;
    }
     .vfx-case-study-info {
         padding: 10%;
    }
     .vfx-css-trailer {
         width: 100%;
         height: 48vw;
         border-radius: 8px;
         border-width: 2px;
         margin-bottom: 10%;
    }
     .vfx-csst-title {
         font-size: 16px;
         margin-bottom: 0;
    }
     .vfx-case-study-showcase{
         padding: 10%;
    }
     .vfx-csst-caption, .vfx-css-quote {
         width: 100%;
         max-width: 100%;
         font-size: 14px;
         margin-bottom: 11%;
    }
     .vfx-csib-title.second {
         margin-bottom: 10px;
    }
     .vfx-csi-col-2, .vfx-csi-col-2 p {
         transform: skewX(0deg);
    }
     .vfx-studio-img {
         margin-top: -6.5%;
    }
}
 @media only screen and (max-width: 500px) {
     .vfx-project-slide {
         height: 58vh;
    }
     .vfx-project-slide.blast-beat {
         background-position: 14%;
    }
     .vfx-project-slide.wk-sarah {
         background-position: 33%;
    }
     .vfx-project-slide.teo {
         background-position: 22%;
    }
     .vfx-project-slide.sanctorum {
         background-position: 75%;
    }
     .vfx-css-quote::before {
         left: -2%;
    }
     .vfx-css-quote::after {
         right: 2%;
         bottom: calc(-25px - 30%);
    }
     .get-in-touch-form, input[type="text"], .vfx-custom-select {
         margin-bottom: 8%;
    }
     .vfx-project-container {
         height: 380px;
         max-width: 260px;
         margin: 0 auto;
    }
}
 @media only screen and (max-width: 500px) {
     .get-in-touch-form, input[type="text"], .vfx-custom-select {
         margin-bottom: 5%;
    }
     textarea {
         height: 24vw;
    }
     .form-data-upload-button {
         background-size: 30px;
         height: calc(45px + .5vw);
    }
     .form-data-uploader-container.fd-uploader-container0 {
         margin-bottom: 6%;
    }
     #exampleModal2 .modal-header {
         top: 0;
         right: 0;
    }
}
 @media only screen and (max-width:280px) {
     .vfx-reel-btn {
         width: 116px;
         font-size: 10px;
    }
}
 @media only screen and (max-width:70em) and (min-height:37.5em) {
}
 .nm {
     margin-bottom: 0 !important;
}
 div.modal div.uppy-Dashboard-innerWrap .uppy-Dashboard-AddFiles-title button.uppy-Dashboard-browse {
     color: var(--main-secondary-color) !important;
}
/*-- About --*/
 body.about nav .nav-item.about:before {
     width: 100%;
}
 @media only screen and (min-width:751px) {
     body.about .vfx-header.darkHeader {
         background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 1) 25%, rgba(10, 10, 10, 1) 50%, rgba(10, 10, 10, 1) 75%, rgba(10, 10, 10, 1) 100%) !important;
    }
}
/*-- Projects --*/
 body.projects nav .nav-item.projects:before, body.project-single nav .nav-item.projects:before, body.case-study nav .nav-item.projects:before {
     width: 100%;
}
 body.projects .projects-header-row {
     width: 100%;
     display: flex;
     justify-content: space-between;
}
 body.projects header {
     background: #0a0a0a;
     padding: 3.5% 6%;
}
 body.projects .vfx-page-title {
     margin-bottom: 0;
     font-size: calc(12px + 1.4vw);
     color: #fff;
}
 body.projects .projects-header {
     width: 100%;
     min-height: calc(80px + 13vw);
     padding: 3.5% 6%;
     background: #0B0B0B;
     display: flex;
     align-items: flex-end;
}
/*-- Project Single --*/
 body.project-single .projects-header-row {
     width: 100%;
     display: flex;
     justify-content: space-between;
}
 body.project-single header {
     background: #0B0B0B;
     padding: 3.5% 6%;
}
 body.project-single .vfx-page-title {
     margin-bottom: 0;
     font-size: calc(10px + 1.4vw);
     color: #fff;
}
 body.project-single .projects-header {
     width: 100%;
     min-height: calc(80px + 13vw);
     padding: 3.5% 6%;
     background: #0B0B0B;
     display: flex;
     align-items: flex-end;
}
 body.project-single .vfx-reel-btn {
     position: static;
     background: #252563;
     color: #fff;
}
 body.project-single .vfx-reel-btn:hover {
     background: #fff;
     color: #000;
}
 body.project-single .vfx-css-b-and-a {
     width: 80%;
     margin: 0 auto 4%;
}
 body.project-single .vfx-css-full-img {
     width: 80%;
     margin: 0 auto 4%;
     display: block;
}
 @media only screen and (max-width:800px) {
     body.project-single .vfx-reel-btn {
         margin: 0 auto;
    }
     body.project-single .vfx-css-b-and-a {
         margin-bottom: 0;
    }
     body.project-single .vfx-css-full-img {
         margin-bottom: 6%;
    }
}
/*-- Submission Complete --*/
body.submission-complete main {
  padding: 16% 16% 16% 6.4%;
      height: 86vh;
      justify-content: center;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
}
body.submission-complete header {
  background: #0a0a0a;
}
@media only screen and (min-width:751px) {
body.submission-complete .vfx-header.darkHeader {
background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 1) 25%, rgba(10, 10, 10, 1) 50%, rgba(10, 10, 10, 1) 75%, rgba(10, 10, 10, 1) 100%) !important;
}
}
/*-- Case Study--*/
@media only screen and (min-width:751px) {
      body.case-study .vfx-header.darkHeader {
 background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 1) 25%, rgba(10, 10, 10, 1) 50%, rgba(10, 10, 10, 1) 75%, rgba(10, 10, 10, 1) 100%) !important;
}
}

body a {
    color: #fff !important;
    text-decoration: none !important;
}

body .submission-txt a {
    color:  var(--main-secondary-color) !important;
    margin-top:  20px;
    display: inline-block;
}