html {
     background-color: #000;
 }
 
 @font-face {
     font-family: 'Abel';
     src: url('Abel.woff2') format('woff2'), url('Abel.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'bebas_neue';
     src: url('bebasneue_regular-webfont.woff2') format('woff2'), url('bebasneue_regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'bebas_neue';
     src: url('bebasneue_bold-webfont.woff2') format('woff2'), url('bebasneue_bold-webfont.woff') format('woff');
     font-weight: bold;
     font-style: normal;
 }
 
 .red {
     border: 1px solid red;
 }
 
 p {
     font-family: 'Abel', sans-serif;
     font-size: 1rem;
     color: #fff;
 }
 
 .zoomParent p {
     margin-top: -9px;
 }
 
 a:hover,
 a:focus {
     color: inherit;
 }
 
 h1,
 h2,
 h3 {
     font-family: 'bebas_neue', sans-serif;
 }
 
 h2 {
     font-size: 1rem;
 }
 
 h3 {
    color: #fff;
    font-size: 1.5em;
}

h4
{
    font-size: 0.90em;
}
 
 .email {
     color: #fff;
 }
 
 .button.large {
     font-size: 1.375rem;
     font-weight: bold;
 }
 
 video.filter {
     opacity: 0.4;
 }
 
 .menu-items,
 .hp-description {
     display: table;
 }
 
 .menu-icon,
 .hp-description span{
     display: table-cell;
     vertical-align: middle;
 }
 
 .doglogo {
     max-width: 50px;
     width: 100%;
 }
 
 header,
 .nav-bar,
 .socia {
     background-color: #000;
 }
 
 header .wireframe_logo {
     width: 40px;
 }
 
 header .pinzutu_logo {
     height: auto;
     vertical-align: bottom;
 }
 
 .nav-bar {
     padding: 1.563rem 0rem;
     border-bottom: 2px solid #fff;
 }
 
 .menu-icon {
     width: 40px;
 }
 
 .vertical {
     border: none;
     background-color: transparent;
 }
 
 .pinzutu_logo {
     height: auto;
     margin: 0 0 0 0.9375rem;
 }
 
 ul#navlist {
     font-family: 'bebas_neue', sans-serif;
     font-weight: normal;
     letter-spacing: 0px;
     background-color: rgba(0, 0, 0, 0.3);
     padding: 1.875rem 1.875rem 2.5rem 1.875rem;
     border: none;
 }
 
 ul#navlist li {
     font-size: 1.125rem;
     border-bottom: 1px solid black;
 }
 
 ul#navlist li a {
     height: 16px;
     line-height: 16px;
     padding: 0;
     color: #000;
     margin: 1.875rem 0 0.4rem 0;
     padding-left: 1.625rem;
     background: url("../img/bgSprite_v2.svg") no-repeat;
 }
 
 ul#navlist.darkmode li {
     border-bottom: 1px solid #fff;
 }
 
 ul#navlist.darkmode li a {
     color: #fff;
 }
 
 ul#navlist li a:hover {
     color: #D8D8D8;
 }
 
 ul#navlist li#nav-home a {
     background-position: 0 -16px;
 }
 
 ul#navlist.darkmode li#nav-home a {
     background-position: 0 -1px;
 }
 
 ul#navlist li#nav-home a:hover {
     background-position: 0 -32px;
 }
 
 ul#navlist li#nav-content a {
     background-position: 0 -112px;
 }
 
 ul#navlist.darkmode li#nav-content a {
     background-position: 0 -96px;
 }
 
 ul#navlist li#nav-content a:hover {
     background-position: 0 -128px;
 }
 
 ul#navlist li#nav-world a {
     background-position: 0 -64px;
 }
 
 ul#navlist.darkmode li#nav-world a {
     background-position: 0 -48px;
 }
 
 ul#navlist li#nav-world a:hover {
     background-position: 0 -80px;
 }
 
 ul#navlist li#nav-contact a {
     background-position: 0 -160px;
 }
 
 ul#navlist.darkmode li#nav-contact a {
     background-position: 0 -144px;
 }
 
 ul#navlist li#nav-contact a:hover {
     background-position: 0 -176px;
 }
 
 .off-canvas {
     background-color: rgba(31, 25, 26, 1);
     overflow: hidden;
     z-index: 7;
 }
 
 .off-canvas.is-open {
     height: 100vh;
     box-shadow: none;
 }
 
 .centerthis {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     font-family: 'bebas_neue', sans-serif;
     font-weight: bold;
     font-size: 2rem;
 }
 
 li img.doglogo {
     margin-bottom: 50px;
 }
 
 li button.offcanvas-full-screen-close {
     margin-top: 50px;
 }
 
 .menu>li>a,
 .offcanvas-full-screen-close {
     padding-left: 0px;
     padding-right: 0px;
     color: #ffffff;
     font-weight: bold;
 }
 
 #homepage,
 #content {
     color: #fff;
     background-color: #201A1B;
 }
 
 .hp-select a {
     color: #fff;
 }
 
 .hp-select {
     color: #fff;
     height: calc(38vh - 19px);
     overflow: hidden;
     position: relative;
 }
 
 .hp-select hr,
 .hp-description span hr {
     width: 100%;
     max-width: 50px;
     margin: 1.813rem auto 1.438rem auto;
     border-bottom: 3px solid #fff;
     -webkit-border-radius: 119px 65px;
     border-radius: 119px 65px;
 }
 


 
 .hp-description span hr {
     margin-top: 1.438rem;
 }
 
 .hp-select .button {
     font-family: 'bebas_neue', sans-serif;
     letter-spacing: .063em;
     color: #000;
     border: 2px solid #fff;
     background-color: #fff;
     max-width: 220px;
     width: 100%;
     line-height: 51px;
     padding: 0;
     margin: 0;
 }
 
 #homepage .whiteHover,
 .hp-select .button.hollow:focus,
 .hp-select .button.hollow:hover {
     color: #fff;
     border-color: #fff;
     background-color: rgba(0, 0, 0, 0);
 }
 
 .hp-select span,
 .zoomParent span {
     z-index: 1;
     text-align: center;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     overflow: none;
     width: 100%;
     cursor: hand;
     display: block;
 }

 .zoomParent .laurel{
    z-index: 1;
    text-align: left;
    position: absolute;
    top: 18%;
    left: 55%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: none;
    width: 100%;
    cursor: hand;
    display: block;
}



 .hp-select video,
 .square-box video {
     object-fit: cover;
     width: 100%;
     height: 100%;
     background-size: cover;
     -webkit-transition: 0.5s opacity;
     transition: 0.5s opacity;
     z-index: 0;
 }
 
 .hp-description {
     text-align: center;
     height: calc(14vh - 19px);
 }
 
 #content {
     padding: 2.500em 0 1.250em 0;
 }
 
 #content h1 {
     font-size: 1.8rem;
     letter-spacing: 0.103rem;
     font-weight: bold;
     color: #fff;
 }
 
 .white_wireframe_logo {
     padding-bottom: 1rem;
     width: 66px;
 }
 
 .square-content.hp-select,
 .rectangle-content.hp-select {
     height: inherit;
 }
 
 .rectangle-box,
 .square-box {
     position: relative;
     width: 100%;
     overflow: hidden;
     background-color: #201a1b;
 }
 
 .rectangle-box:before,
 .square-box:before {
     content: "";
     display: block;
     padding-top: 50%;
 }
 
 .zoomParent {}
 
 .rectangle-content,
 .square-content {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     color: #fff;
 }
 
 .zoomParent {
     height: 100%;
     width: 100%;
     overflow: hidden;
     display: inline-block;
 }
 
 .zoomChild {
     opacity: 0.4;
     height: 100%;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 2% center;
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
 }
 
 .bg-contiki {
     background-image: url(../img/Content-bg/contiki.jpg);
 }
 
 .bg-dm {
     background-image: url(../img/Content-bg/dm.jpg);
 }
 
 .bg-made {
     background-image: url(../img/Content-bg/made.jpg);
 }
 
 .bg-unicef_v {
     background-image: url(../img/Content-bg/unicef_v.jpg);
 }
 
 .bg-vitasnella {
     background-image: url(../img/Content-bg/vitasnella.jpg);
 }
 
 .bg-leaders {
     background-image: url(../img/Content-bg/leaders.jpg);
 }
 
 .bg-crisis {
     background-image: url(../img/Content-bg/crisis.jpg);
 }
 
 .bg-travel {
     background-image: url(../img/Content-bg/travel.jpg);
 }
 
 .bg-kosmos {
     background-image: url(../img/Content-bg/kosmos.jpg);
 }
 
 .bg-delta {
     background-image: url(../img/Content-bg/deltaa.jpg);
 }
 
 .bg-mazda {
     background-image: url(../img/Content-bg/mazda.jpg);
 }
 
 .bg-luca {
     background-image: url(../img/Film-bg/luca.jpg);
 }
 
 .bg-rag {
     background-image: url(../img/Film-bg/rag.jpg);
 }
 
 .bg-olmo {
     background-image: url(../img/Film-bg/olmo.jpg);
 }
 
 .bg-ronika {
     background-image: url(../img/Film-bg/ronika.jpg);
 }
 
 .bg-happy {
     background-image: url(../img/Film-bg/happy3.jpg);
 }
 
 .bg-door {
     background-image: url(../img/Film-bg/door.jpg);
 }
 
 .bg-whistling {
     background-image: url(../img/Film-bg/whistling.jpg);
 }
 
 .bg-america {
     background-image: url(../img/Film-bg/autumn.jpg);
 }
 
 .bg-yacht {
     background-image: url(../img/Content-bg/yacht.jpg);
 }
 
 .bg-chanel {
     background-image: url(../img/Content-bg/chanel.jpg);
 }
 
 .bg-skoda {
     background-image: url(../img/Content-bg/skoda.jpg);
 }
 
 .bg-swear {
     background-image: url(../img/Content-bg/swear.jpg);
 }
 
 .bg-stanleystella {
     background-image: url(../img/Content-bg/stanleystella1.jpg);
 }
 
 .bg-eleanor {
     background-image: url(../img/Film-bg/eleanor.jpg);
 }
 
 .bg-vert {
    background-image: url(../img/Film-bg/vert.jpg);
} 

.bg-vert2 {
    background-image: url(../img/Film-bg/vert3.jpg);
}
 
 .bg-nao {
     background-image: url(../img/Film-bg/noa.jpg);
 }
 
 .bg-808 {
     background-image: url(../img/Film-bg/808.jpg);
 }


.bg-alliance{background-image: url(../img/Content-bg/alliance.png);}
.bg-struck{background-image: url(../img/Film-bg/struck.png);}
.bg-audi{background-image: url(../img/Content-bg/audi.png);}
.bg-quiksilver{background-image: url(../img/Content-bg/quiksilver.png);}
.bg-sofarsogood{background-image: url(../img/Film-bg/sofarsogood3.png);}
.bg-anna{background-image: url(../img/Film-bg/anna.png);}
.bg-nilufer{background-image: url(../img/Film-bg/nilufer.jpg);}
.bg-baby{background-image: url(../img/Film-bg/baby.jpg);}
.bg-enjoy{background-image: url(../img/Film-bg/enjoy.png);}
.bg-rexona{background-image: url(../img/Film-bg/rexona.png);}
.bg-contikiFYP{background-image: url(../img/Film-bg/contikiFYP.png);}
.bg-lululemon{background-image: url(../img/Film-bg/lululemon.png);}
.bg-expedia{background-image: url(../img/Film-bg/expedia.png);}
.bg-tastemade{background-image: url(../img/Film-bg/tastemade.png);}
.bg-event{background-image: url(../img/Content-bg/event.png);}
.bg-content{background-image: url(../img/Content/content_thumbnail.png);}
.bg-commercial{background-image: url(../img/Commercials/commercial3.jpg);}
.bg-peabody{background-image: url(../img/Content-bg/peabody.png);}
.bg-trafalgar{background-image: url(../img/Content-bg/trafalgar.png);}
.bg-wanderer{background-image: url(../img/Content-bg/wanderer.png);}

.bg-queen{background-image: url(../img/Content-bg/queen.jpg);}
.bg-lse{background-image: url(../img/Content-bg/lse.png);}
.bg-earthprize{background-image: url(../img/Content-bg/earthprize.png);}
.bg-underarmour{background-image: url(../img/Content-bg/underarmour.png);}
.bg-animation1{background-image: url(../img/Animations/1.png);}
.bg-animation2{background-image: url(../img/Animations/2.png);}
.bg-animation3{background-image: url(../img/Animations/3.png);}
.bg-animation4{background-image: url(../img/Animations/4.png);}
.bg-animation5{background-image: url(../img/Animations/5.png);}

 
 .zoomChild a {
     cursor: pointer;
 }
 
 .zoomParent:hover .zoomChild,
 .zoomParent:focus .zoomChild {
     -ms-transform: scale(1.2);
     -moz-transform: scale(1.2);
     -webkit-transform: scale(1.2);
     -o-transform: scale(1.2);
     transform: scale(1.2);
     opacity: 1;
 }
 .zoomParent:hover .zoomSpecial,
 .zoomParent:focus .zoomSpecial {
     transform: scale(1.05) !important;

 }

 
 
 .zoomParent:hover .zoomChild:before,
 .parent:focus .zoomChild:before {
     display: block;
 }
 
 .zoomChild:before {
     content: "";
     display: none;
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
 }
 
 .rectangle-content h2,
 .square-content h2 {
     font-size: 1.500em;
     letter-spacing: 0.063em;
     font-weight: bold;
     color: #fff;
 }
 
 a.comingSoon:hover span {
     display: none;
 }
 
 a.comingSoon span.projectDetails {
     display: none;
 }
 
 a.comingSoon:hover span.projectDetails {
     display: inline-block;
 }
 
 a.comingSoon:hover .zoomParent:hover .zoomChild,
 a.comingSoon:hover .zoomParent:focus .zoomChild {
     opacity: 0.5;
 }
 
 .plyr__play-large svg {
     width: 30px;
     height: 30px;
 }
 
 .plyr input[type=range]:active::-webkit-slider-thumb {
     background: #fff;
     border-color: #fff;
 }
 
 .plyr input[type=range]:active::-moz-range-thumb {
     background: transparent;
     border-color: #fff;
 }
 
 .plyr input[type=range]:active::-ms-thumb {
     background: transparent;
     border-color: #fff;
 }
 
 .plyr__play-large {
     padding: 20px;
 }
 
 .plyr--audio .plyr__controls button.tab-focus:focus,
 .plyr--audio .plyr__controls button:hover,
 .plyr__play-large {
     background: transparent;
     color: #fff;
 }
 
 .plyr__progress--played,
 .plyr__volume--display {
     z-index: 1;
     color: #fff;
     background: 0 0;
     transition: none
 }
 
 .plyr input[type=range]::-ms-fill-lower {
     height: 8px;
     border: 0;
     border-radius: 4px;
     -ms-user-select: none;
     user-select: none;
     background: transparent;
 }
 
 .plyr--video .plyr__controls button:hover {
     background: transparent;
 }
 
 .orbit-container {
     height: 100%!important;
 }
 
 .orbit-container .plyr__play-large {
     display: none!important;
 }
 
 .orbit-bullets button {
     width: 0.8rem!important;
     height: 0.8rem!important;
 }
 
 .orbit-next:active,
 .orbit-next:focus,
 .orbit-next:hover,
 .orbit-previous:active,
 .orbit-previous:focus,
 .orbit-previous:hover {
     background-color: hsla(0, 0%, 0%, 0)!important;
 }
 
 #videoDisplay {
     padding-bottom: 2rem;
 }
 
 #videoDescription h2 {
     font-size: 1.500em;
     letter-spacing: 0.063em;
     font-weight: bold;
 }
 
 #videoDescription h2,
 #videoDescription p {
     color: #000;
 }
 
  
 #videoDescriptionLong h2 {
    font-size: 1.500em;
    letter-spacing: 0.063em;
    font-weight: bold;
}

#videoDescriptionLong h2,
#videoDescriptionLong p {
    color: #000;
}

 .typeProduction p, .typeProductionLong p {
     font-size: 1.2rem;
     margin-top: -0.5rem;
     padding-bottom: 0.8rem;
     border-bottom: 1px solid #000;
 }
 
 .txtRight {
    text-align: right;
}

.txtCenter {
    text-align: center;
}

.topLogo{
    text-align: center;
    padding:1rem 0;
  }

.smallLogo{
    text-align: right;

  }

 .centerImages{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;;  
  }
 
 .videoDetail {
     padding: 2rem 0;
 }
 
 .videoDetail span {
     color: #9C9B9B;
 }
 
 .social-footer {
     font-family: 'Abel', sans-serif;
     font-size: 0.8em;
     color: #fff;
     padding: 0.8rem;
     background-color: #000;
     border-top: 2px solid #fff;
 }
 
 .social-footer a {
     color: #fff;
 }
 
 .social-footer .social-footer-icons li:last-of-type {
     margin-right: 0;
 }
 
 .social-footer .social-footer-icons .fa {
     font-size: 1.3rem;
     color: #fefefe;
 }
 
 .social-footer .social-footer-icons .fa:hover {
     color: #4a4a4a;
     transition: color 0.3s ease-in;
 }
 
 #contact {
     height: 82vh;
     background-image: url("../img/about.jpg");
     background-position: 50%;
     background-repeat: no-repeat;
     background-size: cover;
     display: table;
     width: 100%;
     padding: 2rem 0;
 }
 
 #contact h2 {
     color: #fff;
     font-size: 1.75rem;
 }
 
 .hp-contact {
     display: table-cell;
     vertical-align: middle;
 }
 
.logoIndex{
    height: auto;
    object-fit: contain;
  
  }
 
 @media screen and (max-width: 39.9375em) {
     #videoDescription {
         margin: 0 2rem;
     }
     #videoDescription p {
         text-align: left;
     }

     #videoDescriptionLong {
         margin: 0 2rem;
     }

        #videoDescriptionLong p {
            text-align: left;
        }
     .typeProduction.txtRight p {
         font-size: 1.2rem;
         margin-top: 0;
         padding-bottom: 0;
         border-bottom: none;
         margin-bottom: -1.3rem;
     }
     .bg-stanleystella {
         background-image: url(../img/Content-bg/stanleystella2.jpg);
     }
     .bg-nao {
         background-image: url(../img/Film-bg/nao.jpg);
     }
     .bg-vert {
         background-image: url(../img/Film-bg/vert2.jpg);
     }

 }
 
 @media screen and (min-width: 40em) and (max-width: 63.9375em) {
     .square-box:before {
         padding-top: 50%!important;
     }


     .typeProductionLong.txtRight p{
        font-size:1.2rem;
        margin-top: 0;
        padding-bottom: 0;
        border-bottom:none;
        margin-bottom: -1.3rem;
      }

        .typeProductionLong{
            margin: 0 0rem;
        }

      #videoDescriptionLong {
        margin: 0 0rem;
    }

       #videoDescriptionLong p {
           text-align: left;
       }
     .group .rectangle-box:before {
         padding-top: 50%!important;
     }
     .bg-nao {
         background-image: url(../img/Film-bg/nao.jpg);
     }
     .bg-vert {
         background-image: url(../img/Film-bg/vert2.jpg);
     }
     .bg-stanleystella {
         background-image: url(../img/Content-bg/stanleystella2.jpg);
     }
 }
 
 @media screen and (min-width: 40em) {
     h2 {
         font-size: 1.75rem
     }
     header .pinzutu_logo {
         margin-left: 0.9375rem;
     }
     .nav-bar {
         padding: 2.25rem 0rem;
     }
     .menu-icon {
         vertical-align: bottom;
     }
     .hp-select {
         height: calc(60vh - 34px);
     }
     .white-left {
         border-right: 1px solid #fff;
     }
     .white-right {
         border-left: 1px solid #fff;
     }
     .hp-description {
         height: calc(30vh - 34px);
     }
     .square-box:before {
         content: "";
         display: block;
         padding-top: 100%;
     }
     .group .rectangle-box:before {
         padding-top: 25%;
     }
     #videoDisplay {
         padding: 4.5rem 0 4.5rem 0;
     }
 }
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
     .rectangle-content h2,
     .square-content h2,
     .video-area h2 {
         font-size: 1em;
     }
     li img.doglogo,
     li button.offcanvas-full-screen-close {
         margin-top: 0px;
         margin-bottom: 0px;
     }
     .hp-about h2 {
         margin: 1rem;
     }
     .hp-select {
         height: 100vh;
     }
     .hp-description {
         height: 0vh;
     }
     .med-pad {
         padding-bottom: 1rem;
     }
     .social-footer {
         height: auto;
     }

    }

@media only screen and (min-width: 1028px)
{
    .white-borders{
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
    }
} 

@media only screen and (max-width: 1028px)
{

    .white-borders-small-top{
        border-top: 1px solid #fff;
    }
    .white-borders-small-bottom{
        border-bottom: 1px solid #fff;
    }

} 


/* Code to put the logo and the menu in the header to the edges */

/* Positioning the logo to the left edge */
.pinzutu_logo {
    position: absolute;
    left: 0; /* Align to the left edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
}

/* Positioning the logo to the left edge */
.wireframe_logo {
    position: absolute;
    left: 0; /* Align to the left edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
}

/* Positioning the menu to the right edge */
.menu-items {
    position: absolute;
    right: 0; /* Align to the right edge */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
}

.expanded.row.hp-journey {
    position: relative;
}

.central-button {
    position: absolute;
    top: 50%; /* Adjust as needed */
    left: 50%; /* Center the button */
    transform: translate(-50%, -50%); /* Ensure it's centered */
    z-index: 5; /* Make sure it's above the videos */
    font-family: 'bebas_neue', sans-serif;
    letter-spacing: .063em;
    color: #000;
    border: 2px solid #fff;
    background-color: #fff;
    max-width: 130px;
    width: 100%;
    line-height: 51px;
    padding: 0;
    margin: 0;
}
.central-button:focus,
.central-button:hover {
    color: #fff;
    border-color: #fff;
    background-color: rgba(0, 0, 0);
}



@media only screen and (min-width: 640px)
{
    .text-to-right {
        text-align: right;
        padding-right: 4vw;
        padding-left: 10vw;
    }

    .text-to-left {
        text-align: left;
        padding-left: 4vw;
        padding-right: 9vw;
    }
} 

@media (max-width: 768px) {
    .hide-on-mobile {
      display: none;
    }
  }