@font-face {
    font-family: 'proxima';
    src: url('../fonts/proxima-regular.otf') format('opentype');
    font-weight: 400; 
    font-style: normal;
}
@font-face {
    font-family: 'proxima';
    src: url('../fonts/proxima-bold.otf') format('opentype');
    font-weight: 600; 
    font-style: normal;
}
@font-face {
    font-family: 'proxima';
    src: url('../fonts/proxima-extrabold.otf') format('opentype');
    font-weight: 800; 
    font-style: normal;
}

body, html{margin:0px; padding:0px; height:100%; width:100%; font-family: 'proxima';}
h2{font-weight: 800; font-size: 7rem; letter-spacing: -2px; line-height: 6rem; color: #00EE8A;}
h2 span{color: #FF641C;}

.anitext{transform-origin: bottom left;}
.text-1 {animation: moveIn 2s 0s cubic-bezier(.36,0,.06,1) alternate infinite ;}
.text-2 {animation: moveIn 6s 0s cubic-bezier(.36,0,.06,1) alternate infinite ;}
.text-3 {animation: moveIn 8s 0s cubic-bezier(.36,0,.06,1) alternate infinite ;}
.text-4 {animation: moveIn 4s 0s cubic-bezier(.36,0,.06,1) alternate infinite ;}

@keyframes moveIn {
  50%, 100% { 
    transform: translateY(0em)
  }
  0%   { 
  opacity: 0; 
  filter: blur(10px);  
  }
  100% { 
  opacity: 1; 
  filter: blur(0px);
  }
}

#flip {
  height:130px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding: 12px 12px;
  height:125px;
  margin-bottom:42px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div { background:#42c58a;}
#flip div:first-child div {background:#4ec7f3;}
#flip div:last-child div {background:#FF641C;}

@keyframes show {
  0% {margin-top:-450px;}
  5% {margin-top:-300px;}
  33% {margin-top:-300px;}
  38% {margin-top:-150px;}
  66% {margin-top:-150px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-450px;}
}


#big-text{font-size: 8rem; font-weight: bold; line-height: 7rem; text-transform: uppercase;}
.pushtop{margin-top: 104px;}
.mw-800{max-width: 800px;}
.mw-1000{max-width: 1000px;}

.bg-green{background-color: #00EE8A;}
.bg-blue{background-color: #1D2FEB;}
.bg-orange{background-color: #FF641C;}

.navbar{background-color: transparent;  font-weight: 600; padding-top: 30px; transition: all 0.5s}
.navbar.scrolled{background-color: rgba(0,238,138,0.8)}
.navbar .navbar-brand{color: #FFF; letter-spacing: 15px;}
.navbar .navbar-nav .nav-link{color: #FFF; padding-right: 10px;}
.navbar .navbar-nav .nav-link:after{content: url(../images/menu-arrow.png); padding-left: 5px;}
.navbar .navbar-nav .nav-link:hover{color: #1D2FEB;}
.navbar.navbar-white .navbar-nav .nav-link{color: #1D2FEB;}
.navbar.navbar-white a.navbar-brand img{max-width: 250px; transition: all 0.5s}

.section{}
.section-top.banner{background-size: 40%; padding-right: 0px; padding-left: 0px; background-position: top right; background-repeat: no-repeat; background-color: #FFFFFF}
.section-top h1{font-size: 7rem; line-height: 6rem; font-family: 'proxima'; font-weight: 600; text-transform: uppercase; color: #1D2FEB;}
.section-top h1 span{color: #00EE8A}
.section-top .intro{font-size: 2rem; color: #1D2FEB; line-height: 4rem;}

.banner{background-color: #00EE8A; padding-bottom: 100px;}
.banner .banner-wrapper{padding-top: 30px;}

.home-intro .right-side{transform: translateZ(0px);}
.right-side .first-row, .right-side .second-row{height: 50%;}
/*.right-side .first-row img{height: max-content;}*/
.right-side .second-row{ display: flex; align-items: center; justify-content: flex-end; padding-right: 10%;}
.right-side .second-row ul{list-style: none; color: #1D2FEB;}
.right-side .second-row ul li{font-size: 3rem; font-weight: 600; text-align: right;}
.right-side .second-row ul li:nth-child(1){padding-right: 480px;}
.right-side .second-row ul li:nth-child(2){padding-right: 120px;}
.right-side .second-row ul li:nth-child(3){padding-right: 40px;}

.collaboration{padding-top: 120px; padding-bottom: 120px;}
.collaboration #big-text{font-size: 8rem; font-weight: bold; line-height: 7rem; color: #FFF;}
.collaboration #big-text span{color: #1D2FEB;}
.collaboration #little-text{font-size: 1.5rem;color: #1D2FEB; margin-top: 30px;}

.whatwedo .item{text-align: center; position: relative; padding: 0px; overflow: hidden;}
.whatwedo .item img{}
.whatwedo .item a img{width: 100%;}
.whatwedo .item a{text-decoration: none; color: #1D2FEB; font-weight: 600; font-size: 1.2rem;}
.whatwedo .item .overlay{position: absolute; top: 88%; left: 0px; background-color: rgba(0,0,0,0.75); color: #FFF; padding: 10px 20px; display: flex; justify-content: flex-start; align-items: center; height: 100%; text-align: left; flex-direction: column; transition: all 0.3s;}
.whatwedo .item:hover .overlay, .whatwedo .item:active .overlay{top: 0%}
.whatwedo .item .overlay .title{font-weight: bold; text-align: left; width: 100%; font-size: 18px; margin-bottom: 30px;}
.whatwedo .item .overlay .desc{line-height: 30px;}
.whatwedo .item .overlay .desc .items{font-weight: bold; margin-top: 10px;}
    
.clients{margin-bottom: 100px;}
.clients .lists{margin-top: 50px; line-height: 6rem;}
.clients .lists span{padding: 3px 10px; font-size: 18px; font-weight: bold;}
.clients .lists span:nth-child(1), .clients .lists span:nth-child(7){background-color: #00EE8A;}
.clients .lists span:nth-child(5), .clients .lists span:nth-child(11){background-color: #1D2FEB; color: #FFF;}
.clients .lists span:nth-child(3), .clients .lists span:nth-child(9){background-color: #FF641C; color: #FFF;}
.clients .lists ul{list-style: none; display: inline; padding-left: 20px;}
.clients .lists ul li{display: inline;}
.clients .lists ul li img{height: 40px; padding-right: 25px; filter: grayscale(100%); transition: all 0.4s;}
.clients .lists ul li img:hover{filter: grayscale(0%);}

.home-works .home-works-wrapper{position: relative;}
.home-works .home-works-wrapper .overlay > div{position: absolute; bottom: 0px; display: flex; justify-content: space-between; width: 100%; padding: 10px 15px; align-items: center; font-weight: 600; transition: all 0.3s;}
.home-works .row .items:nth-child(1) .home-works-wrapper .overlay > div{background-color: #00EE8A; color: #1D2FEB;}
.home-works .row .items:nth-child(2) .home-works-wrapper .overlay > div{background-color: #1D2FEB; color: #00EE8A;}
.home-works .row .items:nth-child(2) .home-works-wrapper .overlay > div img{fill: yellow;}
.home-works .row .items:nth-child(3) .home-works-wrapper .overlay > div{background-color: #FF641C; color: #FFF;}
.home-works .home-works-wrapper .overlay img{width: 50px;}
.home-works .readmore img{width: 50px; padding-bottom: 5px;}
.home-works .readmore a{ font-weight: 600;}
.home-works .home-works-wrapper:hover .overlay > div{padding-top: 20px; padding-bottom: 20px;}

.home-contact{text-align: center; margin-top: 100px;}
.home-contact .links{list-style: none;}
.home-contact .links li{display: inline-block;}
.home-contact .links li a{padding-right: 30px; padding-right: 30px;}
.home-contact .links li a img{width: 40px;}

.portfolio .grid-item{width: 50%; position: relative;}
.portfolio .grid-item img{width: 100%}
.portfolio .grid-item .overlay{width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); color: #FFF; position: absolute; top:0px; left:0px; z-index: 9; display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.5s; text-align: center; flex-direction: column;}
.portfolio .grid-item .overlay h2{font-size: 4rem; line-height: 4rem}
.portfolio .grid-item .overlay a{color: #00EE8A; text-decoration: none; border: 1px solid #00EE8A; padding: 3px 10px;}
.portfolio .grid-item:hover .overlay{opacity: 1}

.portfolio-detail-banner{background-color: #00EE8A; min-height: 400px; display: flex; align-items: flex-end; padding-bottom: 10px;}
.portfolio-detail-banner .details{}
.portfolio-detail-banner .details .small-font{font-size: 12px; color: #1D2FEB; letter-spacing: 2px;}
.portfolio-detail-banner .details h1{color: #1D2FEB; font-size: 5rem; font-family: 'proxima'; font-weight: 600; border-bottom: 1px solid #1D2FEB; margin-bottom: 30px; padding-bottom: 15px;}
.portfolio-detail-banner .details ul{list-style: none; padding-left: 0px; padding-top: 8px;}
.portfolio-detail-banner .details ul li{display: inline-block; color: #FFF; font-size: 1rem; text-transform: uppercase; font-weight: 600; padding-right: 80px; letter-spacing: 1px}

.portfolio-detail .intro{font-size: 2.2rem; color: #1D2FEB; margin-top:50px; border-bottom: 0.5px solid #1D2FEB; margin-bottom: 50px; padding-bottom: 50px;}
.portfolio-detail .task{color: #000; font-size: 2.2em}
.portfolio-detail .task h2{font-size: 2.5rem; font-weight: 600; color: #000; opacity: 0.7}
.portfolio-detail .task p{opacity: 0.7}

.footer{text-align: center; margin-top: 150px; }
.footer .footer-wrapper{background-color: #00EE8A; color: #1D2FEB; display: inline-block; padding: 10px 40px;}

@media (min-width: 1440px) {
    .home-intro{}
    .right-side .first-row, .right-side .second-row{height: 50%;}
}
@media (max-width: 541px) {
    .pushtop{margin-top: 70px;}
    .navbar{padding-top: 8px;}
    .navbar-nav{background-color: #00EE8A; padding: 20px; margin-top: -1px;}
    .navbar-toggler:focus{box-shadow: none;}
    .navbar.scrolled a.navbar-brand img{max-width: 150px;}
    h2{font-size: 3rem; line-height: 3rem;}
    .navbar-light .navbar-toggler{border: none;background-color: #00EE8A; border-radius: 0px; color: #FFF;}
    .right-side .first-row{justify-content: center; padding-top: 30px; padding-bottom: 30px;}
    .right-side .second-row{padding-top: 30px; padding-bottom: 30px; padding-right: 0px; justify-content: center;}
    .right-side .second-row ul{padding: 0px;}
    .right-side .second-row ul li{font-size: 2rem; text-align: center; }
    .right-side .second-row ul li:nth-child(1){padding-right: initial;}
    .right-side .second-row ul li:nth-child(2){padding-right: initial;}
    .right-side .second-row ul li:nth-child(3){padding-right: initial;}
    .collaboration #big-text{font-size: 2rem; line-height: 3rem;}
    #flip {height:60px;}
    #flip > div > div{padding-top: 8px; height: 120px;}
    .whatwedo .item{margin: 30px 0px;}
    .whatwedo .item .overlay{top: 84%;}
    .whatwedo .item .overlay .desc{line-height: 25px;}
    .whatwedo .item .overlay .title{margin-bottom: 15px;}
    .clients .lists{line-height: 3rem}
    .clients .lists ul li img{height: 24px;}
    .home-works .items{margin-bottom: 30px;}
    .home-works .home-works-wrapper{padding: 0px 40px;}
    .home-works .home-works-wrapper .overlay > div{position: relative; }

    .section-top h1{font-size: 2.5rem; line-height: 3rem; background-color: rgba(255,255, 255, 0.6);}
    .section-top.banner{background-position: bottom right; background-size: 70%;}
    .section-top .intro{font-size: 1.2rem; line-height: 2rem; background-color: rgba(255,255, 255, 0.8);}

    .portfolio .grid-item .overlay h2{font-size: 2rem; line-height: 2rem;}
    .portfolio .grid-item{padding: 5px;}
    .portfolio-detail-banner .details h1{font-size: 2.5rem}
    .portfolio-detail-banner .details ul li{padding-right: 0px; width: 100%}
    .portfolio-detail .intro{margin-top: 20px; font-size: 1.2rem; padding: 0px 15px 15px; margin-bottom: 30px;}
    .portfolio-detail .task h2{font-size: 1.5rem}
    .portfolio-detail .task p{font-size: 1.2rem; padding: 0px 15px 15px;}
    .portfolio-detail .task img{margin-bottom: 30px;}
    .portfolio-detail .task iframe{padding-bottom: 30px;}
}