/******************************************
	  File Name: agency.css
    Template Name: materialize
    Created By: TrendyTheme
    Envato Profile: https://themeforest.net/user/trendytheme
    Website: http://trendytheme.net
    Version: 1.3
    Support: http://trendytheme.net/support
******************************************/

/*Google Web Fonts*/
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);



h1, h2, h3, h4, h5, h6,
.btn,
.footer-five .copy-text,
.footer-five .secondary-footer ul li a {
    font-family: 'Lora', serif !important;
}


/*button style*/
.btn {
    height: 55px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 30px;
    border-radius: 30px;
    background-color: #2ecc71;
    border: 0;
}

.btn-lg {
    padding: 12px 38px;
}

.btn:hover,
.btn:focus {
    background-color: #2ecc71;
}

.btn.white, 
.btn.white:hover, 
.btn.white:focus {
    color: #2ecc71;
}


/*link style*/
a {
    color: #2ecc71;
}
a:focus,
a:hover {
    color: #2ecc71;
}


/*common form style*/
input[type=text]:focus:not([readonly]), 
input[type=password]:focus:not([readonly]), 
input[type=email]:focus:not([readonly]), 
input[type=url]:focus:not([readonly]), 
input[type=time]:focus:not([readonly]), 
input[type=date]:focus:not([readonly]), 
input[type=datetime-local]:focus:not([readonly]), 
input[type=tel]:focus:not([readonly]), 
input[type=number]:focus:not([readonly]), 
input[type=search]:focus:not([readonly]), 
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #2ecc71;
    box-shadow: 0 1px 0 0 #2ecc71; 
}

input[type=text]:focus:not([readonly]) + label, 
input[type=password]:focus:not([readonly]) + label, 
input[type=email]:focus:not([readonly]) + label, 
input[type=url]:focus:not([readonly]) + label, 
input[type=time]:focus:not([readonly]) + label, 
input[type=date]:focus:not([readonly]) + label, 
input[type=datetime-local]:focus:not([readonly]) + label, 
input[type=tel]:focus:not([readonly]) + label, 
input[type=number]:focus:not([readonly]) + label, 
input[type=search]:focus:not([readonly]) + label, 
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #2ecc71 !important; 
}




/* ============= Color Presets ================ */
.brand-color,
.brand-icon,
.team-title h3 a:hover,
.team-social-links li a:hover,
.flex-direction-nav a:before,
.copy-text a,
.footer-five .secondary-footer ul li a:hover {
    color: #2ecc71 !important; /*theme primary color*/
}

.brand-bg,
.brand-hover:hover,
.icon-hover-brand:hover .icon {
    background: #2ecc71 !important; /*theme primary background color*/ 
}



/*Homepage*/
.section-title {
    font-size: 45px;
    font-weight: 700;
    line-height: 60px;
    text-transform: capitalize;
}


/*
background banner images
------------------------------------------------------------*/
.agency-banner-1 {
    background-image: url("../../img/agency/banner/agency-banner-1.jpg");  
}
.agency-banner-2 {
    background-image: url("../../img/agency/banner/agency-banner-2.jpg");  
}
.agency-banner-3 {
    background-image: url("../../img/agency/banner/agency-banner-3.jpg");  
}
.agency-banner-4 {
    background-image: url("../../img/agency/banner/agency-banner-4.jpg");  
}
.agency-banner-5 {
    background-image: url("../../img/agency/banner/agency-banner-5.jpg");  
}
.agency-banner-6 {
    background-image: url("../../img/agency/banner/agency-banner-6.jpg");  
}




.project-carousel.owl-theme .owl-dots .owl-dot span {
    margin: 5px 4px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.project-carousel.owl-theme .owl-dots .owl-dot.active span, 
.project-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: #2ecc71;
}
.project-carousel.owl-theme .owl-dots .owl-dot.active span {
    width: 25px;
}

@media screen and (max-width: 991px) {
    .project-carousel .carousel-item {
        text-align: center;
    }
}


.believe-section img,
.mission-section img {
    width: 100%;
}


/*believe-wrapper*/
.believe-wrapper {
    padding: 0 120px;
}
/*mission-wrapper*/
.mission-wrapper {
    padding: 0 100px;
}

@media screen and (max-width: 991px) {
    .believe-wrapper,
    .mission-wrapper {
        padding: 50px 30px;
    }
}

.mission-wrapper .featured-item .icon {
    float: left;
    margin-right: 35px;
    color: #2ecc71;
}
.mission-wrapper .featured-item .desc {
    overflow: hidden;
}


.subscribe-form input[type=email] {
    margin: 20px auto 50px;
    color: #fff;
    border-bottom: 1px solid #fff;
}

.subscribe-form label {
    font-size: 14px;
    font-weight: 400 !important;
    color: #fafafa;
    margin-top: 10px;
}

.subscribe-form input::-webkit-input-placeholder {
   color: #fff;
}

.subscribe-form input::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}
.subscribe-form input:-ms-input-placeholder {  
   color: #fff;  
}

.mocup-wrapper img {
    max-width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 991px) {
   .mocup-wrapper-sm img{
        width: 100%;
   } 
}

/*video-trigger*/
.video-wrapper {
    position: relative;
}
.video-wrapper img {
    width: 100%;
}
.video-wrapper a.popup-video {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -28px;
    margin-left: -28px;
    color: #fff;
}
.video-wrapper a.popup-video .material-icons {
    font-size: 56px;
}

/*casestudy page*/
.video-trigger {
    font-family: 'Lora', serif;
    font-size: 30px;
    line-height: 68px;
    font-weight: 700;
    color: #fff;
}
.video-trigger i.material-icons {
    font-size: 68px;
    color: #fff;
    margin: 0 20px;
    position: relative;
    top: 24px;
}

@media screen and (max-width: 480px) {
    .video-trigger {
        font-size: 16px;
        line-height: 40px;
    }
    .video-trigger i.material-icons {
        font-size: 40px;
        margin: 0 5px;
        top: 15px;
    }
}



.screenshot-carousel-wrapper .carousel-control {
    color: #81c784;
}


.parallax-carousel .content{
    font-size: 18px;
}
.parallax-carousel .testimonial-meta .client-thumb img {
    border-radius: 50%;
    margin: 25px 0;
}
.parallax-carousel .testimonial-meta .client-info {
    font-size: 22px;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 700;
}
.parallax-carousel .testimonial-meta .client-info span {
    display: block;
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
    font-weight: 400;
}



/*About Page*/
.carousel-studio .carousel-control {
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    line-height: 48px;
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: 30px;
    text-shadow: none;
    opacity: 0;
    background-image: none;
    filter: 0;
}

.carousel-studio:hover .carousel-control {
    opacity: 1;
}

.carousel-studio .carousel-control:hover {
    color: #2ecc71;
    background-color: #fff;
    border: 1px solid transparent;
}

.carousel-studio .carousel-control.left {
    left: 30px;
}
.carousel-studio .carousel-control.right {
    right: 30px;
}


/*Service Page*/
.procedures img,
.portfolio-section img {
    width: 100%;
}
.procedure-wrapper,
.portfolio-wrapper {
    padding: 0 120px;
}
.procedure-wrapper ul li,
.portfolio-wrapper ul li {
    line-height: 46px;
}

.procedure-wrapper ul li .material-icons,
.portfolio-wrapper ul li .material-icons {
    position: relative;
    top: 5px;
}

@media (max-width: 991px) {
    .procedure-wrapper,
    .portfolio-wrapper {
        padding: 40px 60px;
    }
    .procedure-wrapper.text-right {
        text-align: left;
    }
}


/*Career Page*/
.career-cover .reason {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #dfdfdf;
    position: relative;
    z-index: 10;
    margin-bottom: 100px;
}

.career-cover h2 {
  font-size: 55px;
}

.career-carousel .number {
    display: block;
    width: 60px;
    height: 60px;
    font-weight: 700;
    line-height: 58px;
    color: #2ecc71;
    border: 2px solid #2ecc71;
    margin: 0 auto 40px;
}


.career-carousel.owl-theme .owl-dots .owl-dot span {
    margin: 5px 4px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}
.career-carousel.owl-theme .owl-dots .owl-dot.active span, 
.career-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: #2ecc71;
}
.career-carousel.owl-theme .owl-dots .owl-dot.active span {
    width: 25px;
}

@media (min-width:768px)  {
    .career-carousel.owl-theme .owl-controls {
        margin-top: 100px;
    }
}

@media screen and (max-width: 768px) {
    .career-cover .reason {
        margin-bottom: 30px;
    }
    .career-carousel .number {
        margin: 0 auto 20px;
    }
    .career-cover h2 {
      font-size: 30px;
    }
    .padding-top-160 {
        padding-top: 120px;
    }
}


.job-menu li{
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.job-menu li:last-child{
    margin-bottom: 0px;
}
.job-menu li a{
    display: block;
    padding: 25px 30px;
    color: #202020;
    background: #fff;
}

.job-menu li a:hover{
    background: #2ecc71;
}
.job-menu li a:hover,
.job-menu li a:hover .category {
    color: #fff;
}


.job-menu .category,
.job-menu .designation {
  display: block;
  font-weight: 700;
}

.job-menu .category{
  font-size: 13px;
  text-transform: uppercase;
  color: #2ecc71;
}
.job-menu .designation {
  font-size: 24px;
  font-family: 'Lora', serif !important;
}


.job-menu li:hover .category{
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
}
.job-menu li:hover .designation{
    opacity: 1;
    -webkit-animation: moveFromBottom 300ms ease-in-out;
    -moz-animation: moveFromBottom 300ms ease-in-out;
    -ms-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        opacity: 0;
        -ms-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}


/*Apply Page*/
.custom-upload {
    position: relative;
    background: #fff;
    padding: 9px 12px;
    font-size: 14px;
    text-align: center;
    width: 42%;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #e2e2e2;
}
.custom-upload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.disabled-input{
    border: 0;
    border-bottom: 1px solid #9b9b9b;
    background: transparent;
    padding: 3px 10px;
}


/*Equal Height Columns*/
@media (max-width: 991px) {
    .equal-height-column {
        height: auto !important;
    }
}




/*footer*/
.footer-five .social-link li a i:hover {
    background: #6fc673;
}



/* ======== Navigation ============ */
.tt-logo,
.nav-wrapper {
    position: fixed;
    top: 5%;
}
.tt-logo {
    left: 2%;
    z-index: 10;
}

.nav-wrapper {
    right: 2%;
    height: 27px;
    width: 35px;
    cursor: pointer;
    z-index: 100;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
}
.nav-wrapper:hover {
  opacity: .7;
}
.nav-wrapper.active .top {
  -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
          transform: translateY(10px) translateX(0) rotate(45deg);
  background: #FFF;
}
.nav-wrapper.active .middle {
  opacity: 0;
  background: #FFF;
}
.nav-wrapper.active .bottom {
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
          transform: translateY(-10px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.nav-wrapper span {
  background: #2ecc71;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
}
.nav-wrapper span:nth-of-type(2) {
  top: 10px;
}
.nav-wrapper span:nth-of-type(3) {
  top: 20px;
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, width .35s;
  transition: opacity .35s, visibility .35s, width .35s;
  z-index: 50;
}


.nav-overlay:before,
.nav-overlay:after {
  content: '';
  background: #2ecc71;
  top: 0;
  width: 50%;
  height: 100%;
  position: absolute;
}

.nav-overlay:before {
  left: -55%;
  -webkit-transition: left .35s ease;
  transition: left .35s ease;
}
.nav-overlay:after {
  right: -55%;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
}

.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.nav-overlay.open:before {
  left: 0;
}
.nav-overlay.open:after {
  right: 0;
}
.nav-overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .25s;
          animation-delay: .25s;
}
.nav-overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
}
.nav-overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s;
}
.nav-overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .55s;
          animation-delay: .55s;
}
.nav-overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .65s;
          animation-delay: .65s;
}
.nav-overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .75s;
          animation-delay: .75s;
}
.nav-overlay.open li:nth-of-type(7) {
  -webkit-animation-delay: .85s;
          animation-delay: .85s;
}
/*add delay time if you want to add moore menu*/
/*.nav-overlay.open li:nth-of-type(8) {
  -webkit-animation-delay: .95s;
          animation-delay: .95s;
}*/

.nav-overlay nav {
    position: relative;
    height: 70%;
    top: 50%;
    font-size: 40px;
    text-align: center;
    z-index: 100;
    background-color: transparent;
    box-shadow: none;
    font-family: 'Vollkorn', serif;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.nav-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
  float: none;
}
.nav-overlay ul li {
  display: block;
  min-height: 50px;
  position: relative;
  opacity: 0;
  margin-bottom: 15px;
}
.ie9 .nav-overlay ul li {
    opacity: 1;
}
.nav-overlay ul li a {
  display: block;
  padding: 0;
  position: relative;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}
.nav-overlay ul li a:hover {
    background-color: transparent;
}
.nav-overlay ul li a:hover:after, 
.nav-overlay ul li a:focus:after, 
.nav-overlay ul li a:active:after {
  width: 100%;
}
.nav-overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s;
}

@media screen and (max-width: 991px) {
    .nav-overlay nav {
        font-size: 30px;
    }
    .nav-overlay ul li {
        margin-bottom: 0;
    }

}



@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}