* {
  margin:0px;
  padding:0px;
  box-sizing: border-box; }
  *:before, *:after {
    box-sizing: border-box; }

    @font-face {
      font-family: 'MinionPro-It';
      src: url('../fonts/MinionPro-It.eot');
      src: url('../fonts/MinionPro-It.eot?#iefix') format('embedded-opentype'),
           url('../fonts/MinionPro-It.svg#MinionPro-It') format('svg'),
           url('../fonts/MinionPro-It.ttf') format('truetype'),
           url('../fonts/MinionPro-It.woff') format('woff'),
           url('../fonts/MinionPro-It.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'futura_lt_btlight';
      src: url('../fonts/futural-webfont.eot');
      src: url('../fonts/futural-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/futural-webfont.woff') format('woff'),
           url('../fonts/futural-webfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  
  }

body {
  line-height: 1.8;
  color: #fff;
   }

h1, h2, h3, h4, h5, h6 {
  color: #fff;
  margin: 2em 0 1em; }

a {
  text-decoration: none;
  color: #9999ff; }

.site-content {
  width: 990px;
  max-width: 100%;
  margin: 0 auto;
  padding: 100px 0; }
  .site-content:after {
    content: " ";
    display: block;
    clear: both; }

.section-title {
  text-align: center;
  text-transform: uppercase; }

.align-center {
  text-align: center; }
  .align-center h1 {
    margin-top: 0; }

.share {
  margin-bottom: 50px; }
  .share span, .share a, .share iframe {
    vertical-align: middle; }
    .share span span, .share a span, .share iframe span {
      vertical-align: middle !important;
      width: 130px !important; }

.columns:after {
  content: " ";
  display: block;
  clear: both; }

.columns .column {
  width:50%;
  float: left; }

.columns h2 {
  margin-bottom: 20px;
  line-height: 1; }

.columns p {
  text-align: center;
  margin-bottom: 50px; }

.project {
  width: 100%;
  float: left; }
  .project:not(:last-child) {
    margin-right: 4%; }
  .project-list:after {
    content: " ";
    display: block;
    clear: both; }
  .project__image {
    display: block;
    position: relative; }
    .project__image img {
      width: 100%;
      max-width: 100%;
      height:100vh;
      display: block; }
    .project__image:after {
      content: " ";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
      transition: opacity .3s ease;
      opacity: 0; }
  .project__card {
    position: relative;
    will-change: transform;
    transition: box-shadow .3s ease;
    box-shadow: 0 10px 30px transparent; }
    .project__card.hover-in {
      transition: -webkit-transform .2s ease-out;
      transition: transform .2s ease-out;
      transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
    .project__card.hover-out {
      transition: -webkit-transform .2s ease-in;
      transition: transform .2s ease-in;
      transition: transform .2s ease-in, -webkit-transform .2s ease-in; }
  .project:hover .project__card {
    box-shadow: 0 10px 30px rgba(246, 205, 104, 0.9); }
  .project:hover .project__image:after {
    opacity: 1; }
  .project:hover .project__detail {
    border-width: 0px;
    color: #fff;
    width:100%;
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    background: rgba(0,0,0,0.2);
   }
  .project:hover .project__title, .project:hover .project__category, .project:hover .landing-logo, .project:hover .landing-footer-contents {
    -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
    opacity: 1; }
.project__detail {
      position: absolute;
      left:0px;
      right:0px;
      top:0px;
      bottom:0px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: center;
      pointer-events: none;
      -webkit-transform: translateZ(30px);
              transform: translateZ(30px);
      
      transition: border .4s ease; }
 .onlinestre-column .project__detail {
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    pointer-events: none;
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px);
    
    transition: border .4s ease; }
  .project__title, .landing-logo, .project__detail small, .landing-footer-contents {
    margin: 0 0 10px;
    transition: .4s ease;
    opacity: 1;
    -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
            transform: translateY(40px) scale(0);
    will-change: transform; }
    .project__title a {
      color: white; }
  .project__category {
    opacity: 1;
    transition: .4s ease;
    transition-delay: .1s;
    -webkit-transform: translateY(40px) scale(0);
        -ms-transform: translateY(40px) scale(0);
            transform: translateY(40px) scale(0);
    will-change: transform; }
    .project__category a {
      color: rgba(255, 255, 255, 0.8);
      font-size: 1.3em; }

.movie {
  margin: 0 auto;
  width: 250px; }
  .movie-list:after {
    content: " ";
    display: block;
    clear: both; }
  .movie__card {
    position: relative;
    width: 250px;
    height: 370px; }
    .movie__card.hover-in {
      transition: .3s ease-out; }
    .movie__card.hover-out {
      transition: .3s ease-in; }
  .movie [class*="layer"] {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px; }
  .movie .layer-1 {
    background-image: url(images/deadpool-bg.png);
    background-size: cover; }
  .movie .layer-2 {
    background-image: url(images/deadpool.png);
    background-size: cover;
    -webkit-transform: translateZ(30px);
            transform: translateZ(30px); }
  .movie .layer-3 {
    background-image: url(images/deadpool-title.png);
    background-size: cover;
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px); }
  .movie .shine {
    border-radius: 10px; }


.landing-logo {
  display: block;
  margin:20% auto 0 auto;
}
.project__detail small {
  color: #fff;
  display: block;
  font-size: 16px;

}
.landing-page-main-container {
  display: flex;
  overflow: hidden;
  position: relative;
}
.column {
  width:50%;
  position: relative;
} 

.project {
 
  width: 100%;
}
.landing-footer-contents {
  width:100%;
  display: flex;
  justify-content: flex-end;
 
  
}
.landing-footer-contents p {
  color: #ccc;
  font-size: 16px;
  
}
.project__title {
  font-size:16px;
  text-decoration: underline;
  color:rgba(255, 255, 255, 0.8);
  /* letter-spacing:4px; */
}



@-moz-document url-prefix() {
.column {
  width: 50%;
  }
}
.comp-main-logo {
  clip-path: polygon(0% 0%, 100% 0, 100% 50%, 50% 100%, 0 50%);
  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 50% 100%, 0 50%);
  background:#000;
  width:250px;
  height:350px;
  position: absolute;
  top:0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index:2;
}
.comp-main-logo img {
  display: block;
  margin: 60px auto 0 auto;
  width: 55%;
  
}

.btn-shop {
  border:none;
  border-radius:30px;
  color:#000;
  padding:8px 20px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4d070+0,ca8f3b+38,d0943d+53,fac75a+100 */
background: #f4d070; /* Old browsers */
background: -moz-linear-gradient(45deg,  #f4d070 0%, #ca8f3b 38%, #d0943d 53%, #fac75a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #f4d070 0%,#ca8f3b 38%,#d0943d 53%,#fac75a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #f4d070 0%,#ca8f3b 38%,#d0943d 53%,#fac75a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d070', endColorstr='#fac75a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.onlinestre-column h1 {
  font-family: 'MinionPro-It';
  font-size:18px;
  font-style: italic;
  font-weight:300;
  text-transform: capitalize;
}
.lading-page-detail {
  position: absolute;
  right:70px;
  bottom:50px;
}
.lading-inquriypage-detail {
  position: absolute;
  bottom:10px;
  width:100%;
}
.lading-inquriypage-detail h1 {
  text-decoration: none;
  line-height:1rem;
  font-size:14px;
  font-family: 'futura_lt_btlight';
  word-spacing:3px;
  letter-spacing:1px;
  color:#000;
  text-transform: uppercase;
}
.lading-inquriypage-detail img {
  width:130px;
}


@media screen and (max-width:769px) {
  .landing-page-main-container {
      flex-direction: column;
      
  }
  .column {
    width:100%;
  }
  .comp-main-logo {
    width: 120px;
    height: 150px;
  }
  .comp-main-logo img {
    display: block;
    margin: 20px auto 0 auto;
    width:60px;
}
  .project__image img {
    height:60vh;
  }
}
@media screen and (max-width:560px) {
  .main-header {
    clip-path: polygon(0% 0%, 100% 0, 100% 50%, 50% 100%, 0 50%);
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 50%, 50% 100%, 0 50%);
  }
  .comp-main-logo {
    width: 80px;
    height: 110px;
  }
  .comp-main-logo img {
    display: block;
    margin: 10px auto 0 auto;
    width: 43px;
}
.top-links {
  display: none;
}
}