/*
Theme Name: Trad3mark
Theme URI: http://trad3mark.com
Author: The Techy Hub
Author URI: http://thetechyhub.com
Description: The Trad3mark theme is a custom made theme designed by the Trad3mark team and development is executed by The Techy Hub
Version: 1.0
*/

@import 'css/bootstrap.css';
@import 'css/animate.css';
@import 'css/font/font.css';
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

@media only screen {
	/* fullscreen setup */
	html, body {
		/* give this to all tags from html to .fullscreen */
		height:100%;
		/*font-family:din-l;*/
		font-family: 'Gotham-Book';
		color:#000000;
		scroll-behavior: smooth;
	}

	video::-internal-media-controls-download-button {
	    display:none;
	}

	video::-webkit-media-controls-enclosure {
	    overflow:hidden;
	}

	video::-webkit-media-controls-panel {
	    width: calc(100% + 30px); /* Adjust as needed */
	}
	
	.row{
	    margin-left:0px !important;
	    margin-right:0px !important;
	}

	.page-top {
		margin-top:150px;
	}

	.fc {
		/*top:200px;*/
	}

	.owl-item {
	    -webkit-backface-visibility: hidden;
	    -webkit-transform: translateZ(0) scale(1.0, 1.0);
	}
	
	/* New updated CSS */
	/* Fixed Background */
	#background_wrap {
	    z-index: -1;
	    position: fixed;
	    top: 0;
	    left: 0;
	    height: 100%;
	    width: 100%;
	    background-size: cover;
	    background-position:center;
	}
	ul{
	    padding-left:0px !important;
	}

	img {
		max-width:100%;
		height: auto;
	}

	img.bg {
		/* Set rules to fill background */
		min-height: 100%;
		min-width: 1024px;
		
		/* Set up proportionate scaling */
		width: 100%;
		height: auto;
		
		/* Set up positioning */
		position: fixed;
		top: 0;
		left: 0;
	}
	.container .title{
	    padding-left:1.5rem;
	}
    .container .title h2{
        font-size:2.5rem;
        color:#F0D5D3;
    }
    .container .title p{
        color:#FFF;
    }
	.white-bg {
		background-color:#FFFFFF;
		position:relative;
		margin-top:300px;
		padding:20px;
	}
	.white-bg1 {
		background-color:#FFFFFF;
		position:relative;
		margin-top:250px;
		padding:20px;
	}
	.white-bg_services {
		background-color:#FFFFFF;
		position:relative;
		margin-top:50px !important;
		padding:20px;
	}
    
    .detailServices h2{
        color:#6E8398;
    }
    .detailServices p{
        color:#6E8398;
    }
    
	.white-bg h2 {
		font-weight:100;
		font-size:35px;
	}

	/* Navigation */
	.navi-header {
		float:right;
		margin-top:-25px;
		padding-right:20px;
	}

	.navi-header ul {
		list-style:none;
	}

	.navi-header ul li {
		float:left;
		padding-left:40px;
	}

	.navi-header ul li a {
		font-size:16px;
		text-decoration: none;
		color:#1D1D1B;
	    border-bottom: 2px solid transparent;
	    padding-bottom:10px; 
	    width: 0px;
	    transition: 0.5s ease;
	    white-space: nowrap;
	    height: 25px;
	}


	.navi-header ul li a:hover {
		border-bottom: 2px solid #C5DCD2;
    	width: 200px;
	}

	.navi-header ul .current_page_item a, .single-services ul .menu-item-28 a, .single-project ul .menu-item-211 a{
		border-bottom: 2px solid #C5DCD2;
	}


	/* Sticky Navigation Bar */
	.bar {
		background:rgba(255,255,255, 0.9);
		width:100%;	
		height:60px;
		position:fixed;
		z-index:3;
		top:0px;
	}
	
	.bar .trademark-logo {
		padding-top:15px;	
		padding-left:15px;
	}

	/* Navicon */
	.toggle-menu {
		display:none;
		position:absolute;
		top:20px;
		right:20px;
		z-index:10000;		
	}
	
	.menuTrigger {
		display:inline-block;
		width:30px;
		height:10px;
		margin:0 3%;
		position:relative;
		vertical-align:middle;
		
	}

	.mainLine {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 2px;
		margin-top: -3px;
		background: #1D1D1B;
		transition: all linear 0.2s;
		-webkit-transition: all linear 0.2s;
		-moz-transition: all linear 0.2s;
		-ms-transition: all linear 0.2s;	
	}
	
	.mainLine:after, .mainLine:before {
		content: "";
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		height: 2px;
		background: #1D1D1B;
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0);
		transition: all linear 0.2s;
		-webkit-transition: all linear 0.2s;
		-moz-transition: all linear 0.2s;
		-ms-transition: all linear 0.2s;
	}
	
	.mainLine:before {
		top: -10px;
	}
	
	.mainLine:after {
		top: 10px;
	}

	.master .mainLine {
		background-color:#000000;
	}

	.master .mainLine:after, .master .mainLine:before {
		background-color:#000000;
	}
	
	button{
	    background: #6E8398;
	    color: #fff;
         border: none;
        padding: 7px 30px;
	}
	.clientele1 {
		padding:0 25px 0 25px;
	}
	
	
	/* Navicon Click Effects */
	#navicon.menuToggle .mainLine {
		background: transparent;
		 -webkit-transition: all 0.3s linear ; 
		 -moz-transition: all 0.3s linear ; 
		 -ms-transition: all 0.3s linear ; 
		 transition: all 0.3s linear ; 
	}
	
	#navicon.menuToggle .mainLine:before {
		visibility: visible;
		top: 0 !important;
		background: #1D1D1B;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	#navicon.menuToggle .mainLine:after {
		visibility: visible;
		top: 0 !important;
		background: #1D1D1B;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}


	/* Back To Top */
	.sprite {
		background:url('images/sprite.png');
		background-repeat:none;
	}

	.single .back-to-top {
		display:none;
	}

	a .back-to-top {
		position:absolute;
		left:50%;
		bottom:30px;
		width:46px;
		height:24px;
		background-position:-136px 0px;
		z-index:3;
	}

	a .scroll-bottom, a .scroll-bottom-white {
		position:absolute;
		left:50%;
		width:46px;
		height:24px;
		background-position:-136px 0px;
		-ms-transform: rotate(180deg); /* IE 9 */
    	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    	transform: rotate(180deg);
		z-index:2;

	}

	a:hover .back-to-top, a:hover .scroll-bottom, a:hover .scroll-bottom-white{
		background-position:-136px -24px;
	}

	/* Homepage */
	.homepage {
		position:relative;
	}

	.homepage-info{
		background-color:#FFFFFF; 
		margin-top:175px; 
		padding:20px 20px 35px 20px;
	}
	.homepage-info1{
		background-color:#FFFFFF; 
		margin-top:50px; 
		padding:20px;
	}
	
	.homepage-info h2,
	.homepage-info1 h2{
		font-size:30px;
		margin:0;
		padding:0;	
		font-weight:normal;
		color:#000000;
	}

	.homepage-info .info p,
	.homepage-info1 .info p{
		font-size:13px;
		line-height:18px;
		margin-top:20px;
		color:#000000;
	}

	.homepage-info .tlogo,
	.homepage-info1 .tlogo{
		height:283px;
	}

	.homepage-info .flush-right,
	.homepage-info1 .flush-right{
		padding-right:0px;
	}

	.homepage-info .top10,
	.homepage-info1 .top10{
		padding-top:10px;
	}

	.homepage-title {
		margin-top:225px; 
		padding-left:20px; 
		padding-right:20px;
	}

	.inner-footer {
		position:relative;
		padding-left:40px; 
		padding-right:40px; 
		padding-top:30px; 
		padding-bottom:30px; 
		margin-top:35px; 
		margin-bottom:100px; 
	}

	/* Inner Footer */
	.inner-hr {
		margin-top:20px; 
		margin-bottom:15px;
		border-color:#A4A9AD
	}

	.inner-footer .copyright {
		font-size:12px; 		
		float:left;
	}

	.inner-footer .social-media {
		float:right;
	}

	.dg-footer {
		background-color:#1d1d1b;
	}

	.dg-footer .copyright {
		color:#FFF; 
		/*font-family:din-m; */
		font-family: 'Gotham-Book';
		font-weight:600;
	}

	.dg-footer .social-media a {
		color:#FFF!important;
	}

	.dg-footer .social-media a:hover {
		color:#1d1d1b!important;
	}

	.g-footer {
		background-color:#B3B5B7;
	}

	.g-footer .footer-navi a {
		color:#1d1d1b;
	}

	.g-footer .copyright {
		color:#FFF;
		/*font-family:din-m; */
		font-family: 'Gotham-Book';
		font-weight:600;
	}

	.g-footer .social-media a {
		color:#FFF!important;
	}

	.g-footer .social-media a:hover {
		color:#1d1d1b!important;
	}

	/* Contact us */
	.address {
		position:relative;
		text-align:left;
		padding:40px 20px;
	}
	
	.address h1 {
		/*font-family:din-b;*/
		font-family: 'Gotham-Bold';
		font-weight:bold;
		font-size:19px;
		padding:0;
		margin:0;
		color:#343031;	
	}
	
	.address .company-no {
		/*font-family:din-b;*/
		font-family: 'Gotham-Bold';
		font-size:13px;
		padding:0;
		margin:0;
		font-weight:bold;
		color:#343031;	
	}
	
	.address p {
		color:#000000;	
		font-size:13px;
		line-height:25px;
	}
	
	.address .address-info a {
		text-decoration:none;
		color:#000000;
	}
	
	.address .address-info a:hover {
		color:#000000;	
	}
	
	
	.address .address-line {
		width:310px;
		color:#000000;	
		margin-top:10px;
		margin-bottom:10px;
		border:none;
		height:1px;
		background-color:#000000;
	}
	
	#map {
		width: 100%;
		height: 600px;
	}

	/* Career */
	.career-info {
		text-align:left;
		padding:50px 150px;
	}

	.career-info h2 {
		font-size:35px;
		/*font-family:din-b;*/
		font-family: 'Gotham-Book';
		font-weight:100; 
		color:#000000;
	}

	.career-info h3 {
		/*font-family:din-b;*/
		font-family: 'Gotham-Bold';
		font-size:20px;
		margin-top:10px;
		color:#1D1D1B;
	}

	.career-info p {
		font-size:13px;
		font-weight:500; 
		line-height:18px;
		color:#000000;
		margin-top:20px;
		clear:both;
	}

	.career-info a {
		color:#1D1D1B;
		text-decoration:none;
		/*font-family:din-b;*/
		font-family: 'Gotham-Bold';
	}

	.career-info a:hover {
		color:#000000;
	}

	.career-line {
		width:100%;
		color:#000000;	
		margin-top:20px;
		margin-bottom:20px;
		text-align:right;
		float:left;
		border:none;
		height:1px;
		background-color:#000000;
	}

	.clear {
		clear:both;
	}

	.career-info ul {
		color:#000000;
		font-size:13px;
		margin-left:15px;
		margin-top:20px;
	}

	.career-info ul li {
		margin-top:10px;
	}

	.clientele {
		padding:10px;
	}

	.page-template-page-clientele .white-bg img {
		/*-webkit-filter: grayscale(1);
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: url(#greyscale);
		filter: gray;*/
	}

	

	/* Clientele */
	

	.col-md-ths {
	 
	   width:14.25%;
	}
	
	.col-xs-15,
	.col-sm-15,
	.col-md-15,
	.col-lg-15 {
	    position: relative;
	    min-height: 1px;
	    padding-right: 10px;
	    padding-left: 10px;
	}

	.col-xs-15 {
	    width: 20%;
	    float: left;
	}
	@media (min-width: 768px) {
		.col-sm-15 {
	        width: 20%;
	        float: left;
	    }
	}
	@media (min-width: 992px) {
	    .col-md-15 {
	        width: 20%;
	        float: left;
	    }
	}
	@media (min-width: 1200px) {
	    .col-lg-15 {
	        width: 20%;
	        float: left;
	    }
	}

	.center {
		text-align:center;
	}

	/* Project * */
	.project {
		margin-top:20px;
	}

	.project .box {
		margin-top:7px;
	}

	.row.no-pad {
	  margin-right:0;
	  margin-left:0;
	}
	.row.no-pad > [class*='col-'] {
	  padding-right:7px;
	  padding-left:7px;
	}

	/* Services page */



	.services .left, .services .right {
		padding-top:10px;
	}

	.services .left {
		padding-right:7px;
	}

	.services .right {
		padding-left:7px;
	}

	.services-link {
		position:relative; 
		display:block; 
		overflow:hidden;
	}


	.services-overlay {
		position:absolute;
		width:100%; 
		height:100%; 
		background:rgba(0,0,0,0.5); 
		top:-3px; 
		/*transform:translate3d(0,100%,0);*/
		opacity:1;
		transition:all 0.3s ease-out;	
		display:block;
	}

	.services-link:hover .services-overlay {
		top:-2px; 
		opacity:0;
		transform:translate3d(0,0,0);	
	}

	.services-title {
		display:table;
		position:absolute;
		width:100%;
		height:100%;
		top:0;

	}

	.services-title div {
		display:table-cell; 
		vertical-align:middle; 
		color:#FFFFFF; 
		text-align:center;
	}

	.services-title div h3 {
		padding:0;
		margin:0;
		display:inline-block;
		font-weight:normal;
		color:#F0D5D3;
		font-weight:600;
		/*border:1px solid white;*/
		font-size:18px;
		padding:7px;
		
	}

    /* Accordion */


    .accordion {
      list-style: none;
      width: 100%;
    }
    .accordion__item {
      margin-bottom: .8rem;
      transition: all .2s linear;
    }
    
    .accordion__item__head {
      padding: 1rem;
    }
    
    .accordion__item__head {
      background: #FFF;
      color: #000;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .accordion__item__head h2 {
      font-size: 1.5rem;
      font-weight:600;
    }
    .accordion__item__head i {
      transition: transform .3s linear;
    }
    .accordion__item.open .accordion__item__head i {
      transform: rotate(-180deg)
    }
    
    .accordion__item__body {
      overflow: hidden;
      height: 0;
      transition-duration:1s;
     
    }
    .accordion__item.open .accordion__item__body {
      padding: 1rem;
      height: auto;
    }
    .accordion__item__body > *:not(:first-child) {
      margin-top: .8rem;
    }
    .accordion__item__body p {
      font-size: .9rem;
      line-height: 1.3;
    }
    
    /* Work */
    
    .work-overlay {
		position:absolute;
		width:90.5%; 
		height:98%; 
		background:rgba(0,0,0,0.5); 
		top:0px; 
		/*transform:translate3d(0,100%,0);*/
		opacity:0;
		transition:all 0.3s ease-out;	
		display:block;
	}
	.template-content:hover .work-overlay {
		opacity:1;
		transform:translate3d(0,0,0);	
	}

	.work-title {
		display:table;
		position:absolute;
		width:100%;
		height:100%;
		top:0;

	}

	.work-title div {
		display:table-cell; 
		vertical-align:middle; 
		color:#FFFFFF; 
		text-align:center;
	}

	.work-title div h3 {
		padding:0;
		margin:0;
		display:inline-block;
		font-weight:normal;
		color:#FFF;
		font-weight:600;
		/*border:1px solid white;*/
		font-size:18px;
		padding:7px;
		
	}

/* Swiper */

.swiper-container,
.swiper-container-logo{
        width: 100%;
        height:100%;
        padding:20px 30px 40px 30px !important;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

	/* Services & Project single */
	
	.single h2 {
		font-size:35px;
		/*text-transform: lowercase;*/
		color:#000000;
	}

	.single-service h2 {
		text-transform: lowercase
	}

	.single .template-content {
		padding-top:10px;
	}

	.single .flush-left {
		padding-left:0px;
	}

	.single .flush-right {
		padding-right:0px;
	}

	hr.s-content {
		margin-top:8px;
	}

	hr.s-content:last-child {
		display:none;
	}

	.single p {
		color:#000000;
		margin-top:20px;
		font-size:13px;
		line-height:18px;

	}

	.single p:first-child {
		margin-top:0px;

	}

	.embed-container { 
		position: relative; 
		padding-bottom: 56.25%; 
		height: 0; 
		overflow: hidden; 
		max-width: 100%; 
	} 

	.embed-container iframe, .embed-container object, .embed-container embed { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
	}
	
	/* Arrows */
	.arrow-bg {
		background:rgba(0,0,0,0.5) ;
		width:100%;
		height:100px;
		position:relative;
		bottom:0px;

	}

	.next, .previous {
		width:20px;
		height:36px;
		position:absolute;
	}

	.previous {
		background-position: -60px 0px;
		bottom:-8px;
		left:0px;
	}

	.next {
		background-position: 0px 0px;		
		bottom:-8px;
		right:0px;
	}

	.previous-arrow {
		position:absolute;
		bottom:40px;
		left:40px;
		padding-left:40px;
	}

	.next-arrow {
		position:absolute;
		bottom:40px;
		right:40px;
		padding-right:40px;
	}

	.previous-page {
		position:absolute;
		left:40px;
		padding-left:40px;
		z-index:2;
	}

	.next-page {
		position:absolute;
		right:40px;
		padding-right:40px;
		z-index:2;
	}

	.previous-arrow a, .next-arrow a, .button-close a {
		color:#B3B5B7;
		text-decoration:none;
	}

	.previous-arrow a:hover, .next-arrow a:hover, .button-close a:hover {
		color:#FFFFFF;
	}

	.previous-arrow a:hover .previous {
		background-position: -40px 0px;
	}

	.next-arrow a:hover .next {
		background-position: -20px 0px;
	}

	a .close {
		width:28px;
		height:28px;
		background-position: -80px 0px;
	}

	a .close:after {
		
	}

	a:hover .close {
		width:28px;
		height:28px;
		background-position: -108px 0px;
	}

	.button-close {
		position:absolute;
		bottom:35px;
		left:50%;
	}

	.button-close a {
		font-size:20px;
	}

	.single .navbar .menu-main-navigation-container ul li.menu-item-28 a{
		/*font-family:din-b;*/
		font-family: 'Gotham-Bold';
		
	}

	/* showreel video */
	.showreel_video {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		margin-top:40px;
		height: 0;
	}

	.showreel_video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* footer */
	

	.footer-navi {
		float:right;
	}

	.footer-navi ul {
		list-style:none;
		margin-top:10px;
	}

	.footer-navi ul li {
		float:left;
		padding-left:30px;
	}

	.footer-navi ul li a {
		text-decoration: none;
    	color: #FFFFFF;
    	font-size: 16px;
    	border-bottom: 2px solid transparent;
	    padding-bottom:10px; 
	    width: 0px;
	    transition: 0.5s ease;
	    white-space: nowrap;
	    height: 25px;
	}
	.footer-navi ul li a:hover {

		border-bottom: 2px solid #C5DCD2;
    	width: 200px;
	}

	.footer-navi ul .current_page_item a{
		border-bottom: 2px solid #C5DCD2;
	}


}

/* Additional */

.mbl-show {
	display:none;
}

.mbl-hide {
	display:block;
}

.project img {
	width: 100%;
}

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
    background-color:#000000;
}

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}

.cb-slideshow li:nth-child(1) span { 
  
}
.cb-slideshow li:nth-child(2) span { 
   
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}

.cb-slideshow li:nth-child(5) span { 
    
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

.cb-slideshow li:nth-child(6) span { 
    
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

.arrow-down {
	 position:absolute;
	 right:30px; 
	 margin-top:60px;
}

.fa-angle-double-down {
 width:55px;
 text-align: center;
 color:#444444;
 font:normal 45px 'FontAwesome'!important;
 line-height:60px!important;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 transition: all linear 0.2s;
		-webkit-transition: all linear 0.2s;
		-moz-transition: all linear 0.2s;
		-ms-transition: all linear 0.2s;	
}

.fa-angle-double-down:before {content: "\f103";}

.bounce {
	display:inline-block;
 width: 60px;
 height: 60px ;
 border: 2px solid #444444;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%;
 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
 transition: all linear 0.2s;
		-webkit-transition: all linear 0.2s;
		-moz-transition: all linear 0.2s;
		-ms-transition: all linear 0.2s;	
}

.bounce:hover  {
	border: 2px solid #732282;
}

.fa-angle-double-down:hover {
	color:#732282;;
}
 
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

/* Keyframes for the fade-in */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;
  opacity: 1 \9; /*just in case ie*/
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:0.5s;
  -moz-animation-duration:0.5s;
  animation-duration:0.5s;
}

.fade-in.one {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}



/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*    SCREEN BELOW 1200px                                                                                                                                              */
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
	.opt-image{
	    margin-top:1rem;
	}
}

@media only screen and (max-width: 1170px) {
	.mbl-show {
		display:block;
	}

	.mbl-hide {
		display:none;
	}

	.move-right {
		float:right;
	}




	.project .box {
		/*margin-top:10px;*/
	}
	
}
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*    SCREEN ABOVE 1280px                                                                                                                                              */
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1281px) {


}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*    SCREEN BELOW 767px                                                                                                                                             */
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 769px){
	/* Navigation */
	.navi-header {
		display:none;
		float:none;
		padding:0;
		margin:0;
		margin-top:15px;	
	}
	#detailServices{
	    margin-top:150px !important;
	}
	.swiper-container{
        width: 100%;
        height:100%;
        padding:20px 10px 20px 10px !important;
    }

	.move-right {
		float:none;
	}
	.homeClient{
	    margin-top:0 !important;
	}

	.clientele {
		padding:0;
	}
    
    
	.nav-expanded {
		display:block;
	}

	.navi-header ul {
		background-color:#1D1D1B;
		padding:20px;
	}

	.navi-header ul li {
		float:none;
		margin-top:30px;
		padding:0;
		text-align:center;

	}

	.navi-header ul li:first-child {
		margin-top:0px;
	}

	.navi-header ul li a {
		color:#FFFFFF;
	
	}

	.navi-header ul li a:hover {

	}

	.toggle-menu {
		display:block;	
	}

	.homepage-info {
		margin-top:60px;
	}
	.homepage-info1 {
		margin-top:20px;
	}


	.homepage-info .tlogo,
	.homepage-info1 .tlogo{
		height:auto;
	}

	.homepage-info .top10,
	.homepage-info1 .top10{
		padding-top:0px;
	}

	.homepage-info .flush-right,
	.homepage-info1 .flush-right{
		padding-right:15px;
	}

	.tcenter {
		text-align:center;
		margin-top:15px;

	}

	.homepage-title {
		margin-top:150px; 
	}


	.inner-footer .footer-navi {
		display:none;
	}
	
	.inner-footer .social-media {
		float:none;
		padding-top:20px;
	}

	#map {
		width: 100%;
		height: 400px;
	}
    .career-title{
		padding-left:10px !important;
	}
	.career-info {
		padding:20px 10px;
	}

	/* services-page */
	.services .left, .services .right {
		padding:0 10px;
		text-align:center;
		padding-top:10px;
	}

	/*services & project single */
	

	.previous-arrow span, .next-arrow span{
		display:none;
	}

	.arrow-down {
	 display:none;
}

}
@media only screen and (max-width: 650px){
	    #detailServices{
	    margin-top:250px !important;
	}
}
@media only screen and (max-width: 600px){
	.single .flush-left {
		padding-left:15px;
	}

	.single .flush-right {
		padding-right:15px;
	}
}
@media only screen and (max-width: 345px){
    #detailServices{
	    margin-top:375px !important;
	}
	.white-bg{
	    margin-top:410px !important;
	}
	
}