/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html,
   button,
   input,
   select,
   textarea {
       color: #222;
     
   }
   
   html {
       font-size: 1em;
       line-height: 1.4;
       /* position: fixed; */
       /* width: 100%; */
       /* height: 100%; */
       /* overflow: scroll; */
   }
   body{opacity: 1;
   transition:1.6s;
   }
   body.loading{
       opacity:0;
   }
   
   /*
    * Remove text-shadow in selection highlight: h5bp.com/i
    * These selection rule sets have to be separate.
    * Customize the background color to match your design.
    */
   
   ::-moz-selection {
       background: #b3d4fc;
       text-shadow: none;
   }
   
   ::selection {
       background: #b3d4fc;
       text-shadow: none;
   }
   
   /*
    * A better looking default horizontal rule
    */
   
   hr {
       display: block;
       height: 1px;
       border: 0;
       border-top: 1px solid #ccc;
       margin: 1em 0;
       padding: 0;
   }
   
   /*
    * Remove the gap between images, videos, audio and canvas and the bottom of
    * their containers: h5bp.com/i/440
    */
   
   audio,
   canvas,
   img,
   video {
       vertical-align: middle;
   }
   
   /*
    * Remove default fieldset styles.
    */
   
   fieldset {
       border: 0;
       margin: 0;
       padding: 0;
   }
   
   /*
    * Allow only vertical resizing of textareas.
    */
   
   textarea {
       resize: vertical;
   }
   
   /* ==========================================================================
      Browse Happy prompt
      ========================================================================== */
   
   .browsehappy {
       margin: 0.2em 0;
       background: #ccc;
       color: #000;
       padding: 0.2em 0;
   }
   
   /* ==========================================================================
      Author's custom styles
      ========================================================================== */
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   /* ==========================================================================
      Helper classes
      ========================================================================== */
   
   /*
    * Image replacement
    */
   
   .ir {
       background-color: transparent;
       border: 0;
       overflow: hidden;
       /* IE 6/7 fallback */
       *text-indent: -9999px;
   }
   
   .ir:before {
       content: "";
       display: block;
       width: 0;
       height: 150%;
   }
   
   /*
    * Hide from both screenreaders and browsers: h5bp.com/u
    */
   
   .hidden {
       display: none !important;
       visibility: hidden;
   }
   
   /*
    * Hide only visually, but have it available for screenreaders: h5bp.com/v
    */
   
   .visuallyhidden {
       border: 0;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
   }
   
   /*
    * Extends the .visuallyhidden class to allow the element to be focusable
    * when navigated to via the keyboard: h5bp.com/p
    */
   
   .visuallyhidden.focusable:active,
   .visuallyhidden.focusable:focus {
       clip: auto;
       height: auto;
       margin: 0;
       overflow: visible;
       position: static;
       width: auto;
   }
   
   /*
    * Hide visually and from screenreaders, but maintain layout
    */
   
   .invisible {
       visibility: hidden;
   }
   
   /*
    * Clearfix: contain floats
    *
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    *    `contenteditable` attribute is included anywhere else in the document.
    *    Otherwise it causes space to appear at the top and bottom of elements
    *    that receive the `clearfix` class.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
    */
   
   .clearfix:before,
   .clearfix:after {
       content: " "; /* 1 */
       display: table; /* 2 */
   }
   
   .clearfix:after {
       clear: both;
   }
   
   /*
    * For IE 6/7 only
    * Include this rule to trigger hasLayout and contain floats.
    */
   
   .clearfix {
       *zoom: 1;
   }
   
   
   
   /* ==========================================================================
      EXAMPLE Media Queries for Responsive Design.
      These examples override the primary ('mobile first') styles.
      Modify as content requires.
      ========================================================================== */
   
   @media only screen and (min-width: 35em) {
       /* Style adjustments for viewports that meet the condition */
   }
   
   @media print,
          (-o-min-device-pixel-ratio: 5/4),
          (-webkit-min-device-pixel-ratio: 1.25),
          (min-resolution: 120dpi) {
       /* Style adjustments for high resolution devices */
   }
   
   /* ==========================================================================
      Print styles.
      Inlined to avoid required HTTP connection: h5bp.com/r
      ========================================================================== */
   
   @media print {
       * {
           background: transparent !important;
           color: #000 !important; /* Black prints faster: h5bp.com/s */
           box-shadow: none !important;
           text-shadow: none !important;
       }
   
       a,
       a:visited {
           text-decoration: underline;
       }
   
       a[href]:after {
           content: " (" attr(href) ")";
       }
   
       abbr[title]:after {
           content: " (" attr(title) ")";
       }
   
       /*
        * Don't show links for images, or javascript/internal links
        */
   
       .ir a:after,
       a[href^="javascript:"]:after,
       a[href^="#"]:after {
           content: "";
       }
   
       pre,
       blockquote {
           border: 1px solid #999;
           page-break-inside: avoid;
       }
   
       thead {
           display: table-header-group; /* h5bp.com/t */
       }
   
       tr,
       img {
           page-break-inside: avoid;
       }
   
       img {
           max-width: 100% !important;
       }
   
       @page {
           margin: 0.5cm;
       }
   
       p,
       h2,
       h3 {
           orphans: 3;
           widows: 3;
       }
   
       h2,
       h3 {
           page-break-after: avoid;
       }
   }
   
   
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   *{}
   

    .video-js-2 video{
        width:100%;
    }
   .swiper-slide.swiper-slide-duplicate.swiper-slide-next {}
   
   .swiper-slide.swiper-slide-duplicate {/* margin-bottom: 25px !important; */}
   banner.blurred{
       background: url(../img/blurred.png);
       display: none;
   }
   .classify{
       opacity: 0.6 !important; 
   }
   .finchatton skill{
       background: rgba(225, 221, 213, 0.7);
   }
   .finchatton img{
       background: rgba(32, 30, 24, 1) !important;
   }
   .finchatton project-title{
       -webkit-font-smoothing: antialiased;
   }
   project#finchatton{
       background: rgba(14, 11, 6, 1);   
       color: #E1DDD5 !important;  
        /* -webkit-font-smoothing: antialiased; */;
   }
   project#dreamtone{
       background: rgb(234, 238, 238);
   }
   .dreamtoneasia skill{
       background: rgba(255,255,255,0.77);
   }
   project#dreamtoneasia{
       background: rgba(237, 198, 212, 0.95);
   }
   #indy8 img{
       background: rgba(243, 239, 235, 1);
   }
   #queenst img{
       background: rgba(174, 220, 215, 1);
       background: white;
   }
   
   .onethethames container img{
       background: rgba(255, 255, 255, 0.04);
   }
   .onethethames project-title{
       -webkit-font-smoothing: antialiased;
   }
   project#onethethames{
       background: #212121;
       color: white;
   }
   project.hempel{
       background: rgba(224, 221, 215, 0.94);
   }
   .hide{
       display: none !important;
   }
   .lulu container img{
       background: rgba(189, 189, 188, 0.1);
   }
   .loading .container *:not(banner){
       display: none;
   }
   down{
       -webkit-transform: rotate(180deg);
       transform: rotate(180deg);
       display: block;
       position: relative;
       top: -8px;
       left: -1px;
   }
   .scroll-bar.hide-desktop.show-mobile{
       position: fixed;
       top: 93px;
       right: 18px;
   }
   
   .show-mobile-menu{
       opacity: 1 !important;
   }
   .vjs-big-play-button{
       display: none !important;
   }
   .details a{
       margin-top: 20px;
       display: block;
   }
   .contact .details{
       max-width: 260px;
       text-align: center;
       left: 0;
       right: 0;
       margin: 0 auto;
       height: 100px;
       top: 50%;
       position: absolute;
       margin-top: -60px;
       line-height: 23px;
   }
   .contact{
       position: fixed;
       top: 0;
       left: -300%;
       background: rgba(255,255,255,0.95);
       width: 100%;
       height: 100%;
       z-index: -10;
       opacity: 0;
       transition:  opacity 1s !important;
      
   }
   .contact.show-contact{
       z-index: 10;
       opacity: 1;
       left:0;
   
   }
   .swiper-scrollbar{
       opacity: 0;
   }
   .swiper-wrapper{
       /* overflow-x: hidden !important; */
   }
   .responsive menu-holder{
       width: 416px;
   }
   menu-holder{
       display: block;
       /* width: 339px; */
       transition: 1s;
   }
   .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
       opacity: 0;
   }
   .clearings project-title{
       -webkit-font-smoothing: antialiased;
   }
   
   .vjs-default-skin .vjs-control-bar {
     display: none;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2.4em;
     background-color: #07141e;
     background-color: rgba(255,255,255,.7);
     color: rgba(0,0,0,0.8);
     font-family: Muli;
     /* color: black; */
     font-weight: bold !important;
     display: none !important;
   }
   
   
   .video-js-2{
       width: 894px !important;
       height: 542px !important;
       border: 8px solid white;
       margin-bottom: 18px;
   }
   .clearings .video-js-2{
       height: 575px !important;
       /* width: 655px !important; */
   }
   width{}
   .clulow container img{
       background: black !important;
   }
   .clearings container img{
      
        background: rgb(211,212,211); !important;
         
        /* background: white; */ !important;
        background: white;
        background: rgba(0,0,0,0.03);
   }
   
   .benjamin container img{
      
        background: rgba(224, 232, 223, 1) !important;
   }
   
   
   .clearings container .video-js-2{
   border: 8px solid rgba(0,0,0,0.03);
   background-color: rgba(0,0,0,0.03);
   }
   
   
   
   
   .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
       opacity: 0 !important;
   }
   .swiper-container img{
       width: 100%;
       margin-bottom:0px !important;
       /* padding-right: 56px; */
   }
   container img{
       display: block;
       margin-bottom: 40px;
       background: white;
       padding: 8px;
       max-width: 894px;
       position: relative;
       /* left: -8px; */
       background: white;
       width: 100%;
   }
   .CIT container img{
       background: rgba(180, 204, 178, 1);
   }
   .bottom-side{
       position: fixed;
       bottom: 31px;
       transition: 1s;
       cursor: hand;
       cursor: pointer;
   }
   
   project.queenst {
       background: #66C4BE;
   }
   banner{
       position: fixed;
       display: block;
       height: 100%;
       width: 100%;
       -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       background: url(../img/bg3.svg);
       top: 0;
       left: 0;
       transition: 3.5s;
       /* background-color: #bbbbac; */
       /* opacity: 0 !important; */
       background-size: 160%;
       background-position: right center;
       /* -webkit-filter: blur(0px); */
       -moz-filter: blur(2px);
       -o-filter: blur(2px);
       -ms-filter: blur(2px);
       filter: blur(2px);
       -webkit-backface-visibility: hidden !important;
       -webkit-transform-style: preserve-3d!important;
   }
     body {/* -webkit-transform:translate3d(0,0,0)!important; */}
   .top-side{
       transition: 1s;
   }
   title-bar{
       top: 1021px;
   }
   title-bar{
       display: block;
       height: auto;
       background: rgba(255, 255, 255, 0.6);
       position: relative;
       width: 100%;
       font-family: Playfair Display;
       font-size: 29px;
       color: transparent;
       padding-left: 21.8%;
       padding: 12px 21.8% 11px;
   }
   .bridge{
       -webkit-filter: contrast(130%) brightness(130%); 
       -moz-filter: contrast(130%) brightness(130%); 
       -filter: contrast(130%) brightness(130%); 
   }
   .menu a:hover{
       /* font-size: 11px; */
   }
   {
       margin-top: 1000px;
   }
   
   
   {
       display: block;
       position: fixed;
       background: url(../img/bg2.svg);
       z-index: -1;
       top: 0;
       background-color: antiquewhite;
       width: 100%;
       height: 100%;
       transition: 2.2s;
       background-size: 120%;
       background-position: center;
       opacity: 0.3;
       opacity: 1;
       
   
       -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
       -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
        -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
           
       transition-timing-function: ease-in-out; /* linear */
   
           
       /* background: url(http://static.panoramio.com/photos/large/22595302.jpg); */
       /* -webkit-filter: contrast(200%) brightness(200%); */
       /* opacity: 0.2; */
   }
   {
       position: fixed;
       bottom: 18px;
   }
   project:nth-of-type(1){
       margin-top: 21px;
       max-width: 100%;
   }
   description{
       display: block;
       margin-top: 21px;
       width: auto;
       margin-bottom: 40px;
   }
   skill{
       background: rgba(0, 0, 0, 0.07);
       color: black;
       padding: 0px 5px;
       font-weight: 400;
       margin-right: 7px;
       font-size: 10px;
       min-width: 76px;
       display: inline-block;
       text-align: center;
   }
   
   .onethethames skill {
       color: white;
       background: rgba(255, 255, 255, 0.07);
   }
   
   .clearings skill {
       color: #A35829;
       color: white;
   }
   project-title{
       display: block;
       font-family: Playfair Display;
       font-size: 33px;
       margin-bottom: 60px;
       letter-spacing: 1px;
       line-height: normal;
       /* font-style: italic; */ 
       /* letter-spacing: 0.8px; */
       /* -webkit-font-smoothing: antialiased; */
   }
   .top-menu span:nth-of-type(4){
       margin-right: 0 !important;
       position: relative;
       left: 2px;
   }
   .top-menu:last-child{}
   
   .top-menu span{
       display: inline-block;
       text-align: justify;
       margin: 0 78px 0 0;
   }
   .border.bright{
       right: 0;
       height: 100%;
       width: 8px;
       margin: 0 auto;
   }
   .border.bleft{
       height: 100%;
       width: 8px;
       left: 0;
   }
   container{
       width: 700px;
       margin: 0 auto;
   }
   .border{
       position: fixed;
       /* background: rgb(48, 25, 11) !important; */
       bottom: 0;
       height: 8px;
       width: 100%;
       z-index: 99;
       transition: 2s;
       background:  !important;
   }
   .border.btop{
       bottom: auto;
       top: 0px;
   }
   .menu{
       margin-top: 72.2px;
       background: rgba(255, 255, 255, 0.83);
       padding: 7px 12px;
       line-height: 15px;
       position: relative;
       left: -11px;
       transition: 1s;
       /* display: block; */
       opacity: 0;
       /* z-index: 10000; */
   }
   
   .menu.responsive{
       max-height: 500px;
       padding-top: 7px;
       padding-bottom: 7px;
       overflow: hidden;
       width: 185px;
       width: 158px;
       background: rgba(255, 255, 255, 0.83);
   }
   .menu.responsive:hover{
       width: 361px;
       width: 395px;
       background: rgba(255, 255, 255, 0.91) !important;
   }
   
   .menu.responsive:hover a{
       color:black !important;    
   }
   
   .menu a{
       display: inline-table;
       padding: 4.6px 0;
       width: 100%;
       min-height: 16px;
       display: inline-flex;
       outline: none;
   }
   .menu a:hover{
       opacity:0.8; 
   }
   .menu.responsive a{
       width: 203px;
           width: 184px;
       padding: 5.1px 0;
   }
   
   .menu.responsive a br{
       display:none;
   }
   
   .top-menu a {
   color: white;
   }
   
   
   
   a{
       text-decoration: none;
       color: black;
   }
   .side-bar{
       position: fixed;
       top: 31px;
       width: 155px;
       z-index: 9;
       color: white;
       left: 33px;
   }
   .top-menu{
       position: fixed;
       top: 31px;
       margin: 0 auto;
       left: 0;
       right: 0;
       display: block;
       width: 700px;
       text-align: justify;
       color: white;
   }
   .container{
       margin: 0 auto;
       padding: 0;
       /* position: fixed; */
       width: 100%;
       position: relative;
       margin-top: 0px;
   }
   project > *{
       display: block;
   }
   project{
       background: rgba(255, 255, 255,1);
       padding: 116px 20px;
       min-height: 398px;
       /* opacity: 0.9; */
       width: 100%;
       display: none;
       opacity: 0.95;
       opacity: 0;
       margin-top: 0 !important;
       transition: 0.8s;
       /* -webkit-backface-visibility: visible !important; */
   }
   project.clearings{
       color:white;
       opacity: 0.9999999;
   }
   project.CIT{
       bckground: rgba(180, 204, 178, 1);
   }
   .project{}
   body{
       background: white;
       width: 100%;
       position: relative;
       padding: 0;
       font-family: "Playfair Display";
       font-family: Muli;
       color: black;
       text-decoration: none !important;
       font-size: 12px;
       /* margin-top: -22px; */
       letter-spacing: 0.6px;
       line-height: 20px;
       font-style: normal;   
       /* font-style: italic; */
       /* letter-spacing: 0.8px; */ 
   }
   
   html.js.flexbox.canvas.canvastext.webgl.touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths {}
   .swiper-container {
       width: 933px;
       height: 636px;
       overflow: hidden !important;
       margin-bottom: 40px !important;
   }      
     .hide-mobile{
   
       display:block;
     } 
      .hide-desktop{
   
       display:none;
     }
   
   banner.pauseAnimation {background-size: 139% !important;background-position: top center !important;filter:none !important;-moz-filter: none !important;-o-filter: none !important;-ms-filter: none !important;filter: none !important;transition: 6s !important;}
   
   .close-project {
       position: absolute;
       top: 25px;
       right: 30px;
       z-index: 99;
       /* background: white;*/
       color: transparent;
       padding: 7px;
       cursor: hand;
       cursor: pointer;
   }
   
     
     html {
     height:100%;
   }
   
   body {
     margin:0;
   }
   
   .bg {
     animation:slide 3s ease-in-out infinite alternate;
     background-image: linear-gradient(-60deg, rgb(16, 103, 110) 50%, rgb(250, 246, 234) 50%);
     bottom:0;
     left:-50%;
     opacity:.4;
     position:fixed;
     right:-50%;
     top:0;
     z-index:-1;
     transition: 6s;
   }
   
   .bg2 {
     animation-direction:alternate-reverse;
     animation-duration:4s;
   }
   
   .bg3 {
     animation-duration:5s;
   }
   
   .content {
     background-color:rgba(255,255,255,.8);
     border-radius:.25em;
     box-shadow:0 0 .25em rgba(0,0,0,.25);
     box-sizing:border-box;
     left:50%;
     padding:10vmin;
     position:fixed;
     text-align:center;
     top:50%;
     transform:translate(-50%, -50%);
   }
   
   h1 {
     font-family:monospace;
   }
   
   @keyframes slide {
     0% {
       transform:translateX(-25%);
     }
     100% {
       transform:translateX(25%);
     }
   }
   
   .vimeo-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
      transition: opacity 1s;
   }
   .vimeo-wrapper iframe {
      width: 100vw;
      height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
      min-height: 100vh;
      min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.2);
   }
   
   #JustEat container img {
       background: rgb(45, 45, 45) !important;
   }
   
   #JustEatFestive container img {
       background: black !important;
   }
   
   #EquitableHouse container img {
        background: #151515 !important;
        /* margin-bottom: 70px; */
   }
   
   #JustEatFestive skill {
      color:white;
   }
   
   #JustEatFestive {
      color:white;
   }
   
   #EquitableHouse skill {
      color:white;
      background: rgba(255, 255, 255, 0.08);
   }
   
   #EquitableHouse {
      color: #d1927a !important;
   }
   
   
   #VictoriaEmbankment container img {
        background: #ececec !important;
        /*background: black !important;*/
   }
   
   
   #VietHoa container img {
        background: #ececec !important;
        background: #545454 !important;
   }
   
   
   #VietHoa {
        background: rgb(45, 45, 45) !important;
        color:white !important;
   }
   
   
   #VietHoa skill{
        color:white !important;
   }
   
   
   @media only screen and (max-width:1280px)  {
   
   *{}
   *{
       /* background-color: white; */
   }
   
   .clearings .video-js-2 {
       height: 450px !important;
       width: 701px !important;
   }
   
   .swiper-container {
       width: 110%;
   }
   
   .swiper-container img {
       width: 91%;
   }
   
   img.super-show {}
   
   container {
       /* width: auto; */
   }
   .VictoriaEmbankment .swiper-container {
      height: 412px;
   }
   
   .swiper-container {
      height: 471px;
   }
   
   }
   
   @media only screen and (max-width:1152px)  {
   
   *{}
   *{}

   .swiper-container img {
    width: 97%;
}

  .VictoriaEmbankment .swiper-container {
      height: 359px;
   }
   
   
   .victoria .video-js-2,
   .clearings .video-js-2 {
       height: 388px !important;
       width: 607px !important;
       margin-bottom: 88px;
   }
   div#example_video_3 {}
   
   .swiper-container {
       width: 103%;
       /* padding-right: 50px; */
   }
   
   container {
       /* width: auto; */
       width: 608px;
   }
   .swiper-container {
      height: 455px;
   }
   
   }
   
   @media only screen and (max-width:1024px)  {
   
   *{}
   *{}
   
   .EquitableHouse .swiper-container {
      height: 356px;
   }
     .VictoriaEmbankment .swiper-container {
      height: 320px;
   }
   
        .hoh .swiper-container {
      height: 377px;
   }
   
   

   .swiper-container {
      height: 371px;
   }


   .victoria .video-js-2{
       height: 388px !important;
       width: 539px !important;
       margin-bottom: 40px;
   }
   
   .clearings .video-js-2 {
       height: 347px !important;
       width: 539px !important;
       margin-bottom: 40px;
   }


   
   .swiper-container-fade .swiper-slide {
       /* margin-right: 18px; */
   }
   
   .swiper-slide.swiper-slide-duplicate.swiper-slide-active {}
   
   .clearings .swiper-container {
       width: 105%;
       /* padding-right: 50px; */
       height: 351px;
   }
   
      .clearings .swiper-container img {
    width: 95%;
}

   .victoria .swiper-container {
       width: 103.2%;
       /* padding-right: 50px; */
       height: 407px;
   }
   
      .victoria .swiper-container img {
    width: 96.8%;
}

   container {
       /* width: auto; */
   }
   
   }
   
   
   
   @media only screen and (max-width:960px)  {
   
   *{}
   *{}
   
   .swiper-container {
       width: 110%;
   }
   
   .swiper-container img {
       /* margin-right: 90px; */
   }
   
   container {
       /* width: auto; */
   }

   }   
   @media only screen and (min-width:769px)  and (max-width:960px)  {
   
   .clearings .video-js-2 {
       height: 373px !important;
       width: 579px !important;
       margin: 0 0 29px;
   }
   
  .EquitableHouse .swiper-container {
      height: 325px;
      width: 476px;
   }
     .VictoriaEmbankment .swiper-container {
      height: 293px;
      width: 475px;
   }
   
   .swiper-container {
      height: 341px;
      width: 475px;
   }
   

   
   .hoh .swiper-container {
      height: 377px;
   }
   

   .victoria .video-js-2{
       height: 280px !important;
       width: 462px !important;
       margin-bottom: 40px;
   }
   
   .clearings .video-js-2 {
       height: 295px !important;
       width: 459px !important;
       margin-bottom: 40px;
   }

project container {
    width: 460px;
    margin-left: 190px;
}
   .clearings .swiper-container {
       width: 105%;
       /* padding-right: 50px; */
       height: 301px;
   }
   
      .clearings .swiper-container img {
    width: 95%;
}

   .victoria .swiper-container {
       width: 103.2%;
       /* padding-right: 50px; */
       height: 407px;
   }
   
      .victoria .swiper-container img {
    width: 96.8%;
}

skill {
   margin-bottom:5px;min-width: 70px;margin-right: 5px;
}
   
   }
   
   
   @media only screen and (max-width:768px)  {
   
   *{}
   *{}
   
   }