@charset "utf-8";

/*
 * Sections
 *
 * SEC00 : Misc. Stylesheets
 * SEC01 : Header Stylesheets
 * SEC02 : About Section Stylesheets
 * SEC03 : Team Section Stylesheets
 * SEC04 : Portfolio Section Stylesheets
 * SEC05 : Services Section Stylesheets
 * SEC06 : News Section Stylesheets
 * SEC07 : Counters Section Stylesheets
 * SEC08 : Contact Section Stylesheets
 * 
 */

 /* SEC00 : Misc. Stylesheets */
	
::-webkit-scrollbar{
width:10px;
background-color: rgba(33,33,33,0.1);
} 

::-webkit-scrollbar-thumb{
background-color: rgb(55,55,55);
}
::-webkit-scrollbar-thumb:hover{
background-color: rgb(66,66,66);

}
::-webkit-scrollbar-thumb:active{
background-color: rgb(66,66,66);
} 

::-webkit-scrollbar-track{
background-color: rgba(33,33,33,0.1);	
} 

	body, html {
		
		width: 100%;
		height: 100%;

/*		font-family: "Roboto Slab", Arial, sans-serif; 
*/		font-family: bree-web, Bree, sans-serif;
		font-size: 14px;
		font-weight: 100;
		color: #FFF;											/* CHANGE THIS SHIT */

	}
	
	.col-lg-3 { width: 30%;}

	.basebg {
		background-image: url(../img/4kmeng.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width:100%;
		height:93%;
		position:absolute;
	}

	.basebgg {
		background-image: url(../img/4kmen.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width:100%;
		height:93%;
		position:absolute;
		opacity:0;
		pointer-events:none;

		-webkit-transition: all 1s ease-in-out;
  		-moz-transition: all 1s ease-in-out;
  		-o-transition: all 1s ease-in-out;
  		transition: all 1s ease-in-out;
	}

	.gradientlow {
		pointer-events:none;
		position: absolute;
		bottom:0;
		left:0;
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(0deg, rgba(33,33,33,1), rgba(33,33,33,1), rgba(33,33,33,0.9), rgba(33,33,33,0.7), rgba(33,33,33,0.4), rgba(33,33,33,0), rgba(33,33,33,0), rgba(0,0,0,0)); /*Safari 5.1-6*/
  		background: -o-linear-gradient(0deg, rgba(33,33,33,1), rgba(33,33,33,1), rgba(33,33,33,0.9), rgba(33,33,33,0.7), rgba(33,33,33,0.4), rgba(33,33,33,0), rgba(33,33,33,0), rgba(0,0,0,0)); /*Opera 11.1-12*/
  		background: -moz-linear-gradient(0deg, rgba(33,33,33,1), rgba(33,33,33,1), rgba(33,33,33,0.9), rgba(33,33,33,0.7), rgba(33,33,33,0.4), rgba(33,33,33,0), rgba(33,33,33,0), rgba(0,0,0,0)); /*Fx 3.6-15*/
		background: linear-gradient(0deg, rgba(33,33,33,1), rgba(33,33,33,1), rgba(33,33,33,0.9), rgba(33,33,33,0.7), rgba(33,33,33,0.4), rgba(33,33,33,0), rgba(33,33,33,0), rgba(0,0,0,0));
	}

	.bigapple {
		top: 21%;
		position: absolute;
		margin-left: 35%;
		margin-right: auto;
		width: 30%;
		height: 49%;
		background-image: url(../img/fadefrom2.png);
		background-repeat: no-repeat;
		background-size: auto 100%;
		opacity:0.5;
		background-position:center;	
	}

	.bigapplec {
		top: 21%;
		position: absolute;
		margin-left: 35%;
		margin-right: auto;
		width: 30%;
		height: 49%;
		background-image: url(../img/fadeto2.png);
		background-repeat: no-repeat;
		background-size: auto 100%;
		opacity:0;
		background-position:center;
		pointer-events:none;

		-webkit-transition: all 1s ease-in-out;
  		-moz-transition: all 1s ease-in-out;
  		-o-transition: all 1s ease-in-out;
  		transition: all 1s ease-in-out;
	}

	.gomid {
		opacity:1;
		margin-left:auto;
		margin-right:auto;
		width:100%;
		height:100%;
		top:46.5%;
		color:#FFF;
		position:absolute;
		text-align:center;
		pointer-events:none;


  		-webkit-transition: all 0.8s ease-in-out;
  		-moz-transition: all 0.8s ease-in-out;
  		-o-transition: all 0.8s ease-in-out;
  		transition: all 0.8s ease-in-out;

  
	}

	.gomid p {
		font-family: Helvetica Neue, Arial, sans-serif;
		font-weight: 100;
		font-size: 1.2em;
		line-height:1em;
		letter-spacing:1px;
		
		opacity:0.8;

		transition: opacity 0.7s ease-in-out;
	}

	.bigapplehover {
		opacity:0.01;

		-webkit-transition: all 1s ease-in-out;
  		-moz-transition: all 1s ease-in-out;
  		-o-transition: all 1s ease-in-out;
  		transition: all 1s ease-in-out;
	}

	.bigapplehover:hover {
		opacity:1;
	}

	.bigapplehover:hover + .basebgg {
		opacity:1;	
		-webkit-transition: all 1s ease-in-out;
  		-moz-transition: all 1s ease-in-out;
  		-o-transition: all 1s ease-in-out;
  		transition: all 1s ease-in-out;
	}

	.bigapplehover:hover ~ .bigapplec {
		-webkit-transition: all 1s ease-in-out;	
  		-moz-transition: all 1s ease-in-out;
  		-o-transition: all 1s ease-in-out;
  		transition: all 1s ease-in-out;
		opacity:1;	
	}

	.bigapplehover:hover ~ .gomid p {
		opacity:0;
		-webkit-transition: opacity 0.7s ease-in-out;
		transition: opacity 0.7s ease-in-out;
	}
	
	.reflex {
		background-image: url(../img/reflex.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width:100%;
		height:93%;
		position:absolute;
		opacity:0.3;
		pointer-events:none;
	}

	.mask {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .4);					/* ALSO THIS */
		background-image: url(../img/mask-pattern.png);
		background-repeat: repeat;
	}

	section {
		padding: 70px 0;
	}
	
	h1, h2, h3, h4, h5, h6 {
		margin:0;
	}
	
	h2 {
/*		font-family: "Roboto Slab", Arial, sans-serif; 
*/		font-family: bree-web, Bree, sans-serif;	
		font-weight: 100;
		font-size: 30px;
		color: #FFF
		letter-spacing: -1px;
		margin: 0 0 5px 0;
		text-align: center
	}
	
	h3 {
/*		font-family: "Roboto Slab", Arial, sans-serif; 
*/		font-family: bree-web, Bree, Arial, sans-serif;
		font-weight: 100;
		font-size: 17px;
		color: #FFF;
		letter-spacing: -1px;
		margin: 0 0 5px 0;
		text-align: center
	}
	
	.loading-wrapper {
		display: table;
		background: #f4f6fb;
		position: absolute;
		z-index: 100000;
		width: 100%;
		height: 100%;
	}
	
	.loading {
		display: table-cell;
		vertical-align: middle;
		text-align:center;
	}
	
	.loading .spinner {
		border: 20px solid #000;
		border-right-color: transparent;
	}
	
	.new-bandage {
		position: absolute;
		top:0;
		right:0;
		width: 50px;
		height: 50px;
		background: url(../img/new-bandage.png) no-repeat center center;
	}
	
	.white-popup-block {
		background: #FFF;
		padding: 20px 30px;
		text-align: left;
		max-width: 650px;
		margin: 40px auto;
		position: relative;
	}
	
	.btn-o {
		display: inline-block;
	/*	border: 2px solid #000;
	*/	padding: 10px 15px;
	/*	border-radius: 50px;
	*/	font-size: 18px;
		font-weight: 700;
		color: #000;
		margin:0;
		line-height: 1.4;
		vertical-align: baseline !important;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	.btn-o:hover {
	/*	border-color: #fff;
	*/	color: #fff;
		text-decoration: none;
	}
	
	.btn {
		display: inline-block;
	/*	border: 2px solid #000;
	*/	background: rgba(0,0,0,0.15);
		padding: 10px 15px;
	/*	border-radius: 50px;
	*/	font-size: 18px;
		font-weight: 700;
		color: #FFF;
		margin:0;
		line-height: 1.4;
		vertical-align: baseline !important;
		border:none;
		border-radius:0px;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	.btn:hover {
		background: rgba(0,0,0,0.4);
		color: #fff;
		text-decoration: none;
	}
	
	.yolo{
		border:1px solid #FFF !important;
		border-radius:0px;
	}

/* SEC01 : Header Stylesheets */
	
	header {
		position: relative;
		display: table;
		width: 100%;
		height: 105%;
		background: #000;
	}
	
	header .mask {
		opacity: .5

	}
	
	header .video {
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url(img/bg-idevz.png);
		background-size: 100% auto;
		pointer-events:none;
	}
	
	header nav {
		padding-top: 30px;
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
	}
	
	header nav .nav {
		margin-top: 5px;
	}
	
	header nav .navbar-toggle {
		margin-top: 30px;
	}
	
	header nav .navbar-toggle span.icon-bar {
		background:#ffffff;
	}
	
	header nav .nav a {
/*		font-family: "Roboto Slab", Arial, sans-serif; 
*/		font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 15px;
		font-weight: 200;
		color: #fff;
		background-color: transparent;
		/*border-radius: 30px;
		*/padding: 10px 15px;
		/*border: 2px solid transparent;
		*/
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	header nav .nav a:hover,
	header nav .nav a:focus	{
		background-color: rgba(0,0,0,0.3);
	/*	border: 2px solid #000;
	*/	outline: none !important;
	}
	
	header .top-nav-collapse {
		padding: 0px 0 0px 0;			/* was 0 bottom */
		background:rgba(0, 0, 0, 0.35);  /* was #000 */
	}

	.slider-wrapper {
		position: relative;
		z-index: 5;
		display: table-cell;
		text-align : center;
		vertical-align: middle;
		width: 100%;
		height: 100%;
	}

	.slider-wrapper .slider-content {
		display: block;
		margin: 0 auto;
	}
	
	.slider-wrapper .slider-content h1 {
		font-size: 35px;
		font-weight: 500;
		text-decoration: none;
		color:#fff;
		letter-spacing: -2px;
		margin:0;
		padding:0;
	}
	
	.slider-wrapper .slider-content h2 {
		font-size: 35px;
		font-weight: 100 !important;
		text-decoration: none;
		color:#fff;
		letter-spacing: -2px;
		margin: 0 0 10px 0;
		padding:0;
	}
	
	.slider-wrapper .slider-content p {
		margin: 0 auto;
		font-size: 16px;
		font-weight: 400;
		margin: 10px auto 20px;
		color:#fff;
	}
	
/* SEC02 : About Section Stylesheets */
	
	.about {
		position: relative;
	}
	
	.about .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -50px;
		width: 100%;
		z-index: 100;
	}

	.about .separator path {
		fill: #fff;
	}
	
	#about {
		position: relative;
	}
	
	#about h3 {
		margin-bottom: 30px;
		margin-top:20px;
	}

	#portfolio h3 {
		margin-bottom: -10px;
		margin-top:20px;
	}

	#contact h3 {
		margin-bottom:-10px;
		margin-top:20px;
	}
	
	#about .about-text {
		font-weight: 500
	}
	
	#about .about-images {
		margin-top: 40px
	}
	
	#about .about-images .item {
		margin: 0 15px;
	}
	
	#about .about-images .img {
		position: relative;
		border-radius: 0px;
		overflow: hidden;
	}

	#about .about-images .img .mask {
		border-radius: 0px;
		background-color: rgba(0, 0, 0, .4);
		opacity:0;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}

	#about .about-images .img img {
		border-radius: 0px
	}

	#about .about-images .img .zoom {
		position: absolute;
		bottom: 10px;
		width: 100%;
		text-align: center;
		opacity: 0;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	#about .about-images .img .count {
		position: absolute;
		width: 100%;
		top: 50%;
		margin-top: -40px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		opacity: 0;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}

	#about .about-images .img:hover > .mask {
		opacity: 1;
	}
	
	#about .about-images .img:hover > .zoom {
		opacity: 1;
		bottom: 30px;
	}
	
	#about .about-images .img:hover > .count {
		opacity: 1;
		margin-top: -30px;
	}
	
/* SEC03 : Team Section Stylesheets */

	.team {
		position: relative;
		background: #000 url(../img/team-bg.jpg) no-repeat center center;
		padding: 60px 0;
	}
	
	.team .separator {
		display: block;
		height: 70px;
		position: absolute;
		top:0;
		width: 100%;
		z-index: 100;
	}
	
	.team .separator path {
		fill: #fff;
	}
	
	.team h2,
	.team h3 {
		color: #fff;
	}

	#team .team-slider {
		margin-top: 40px;
	}

	#team .member {
		margin:0 15px;
	}

	.member h4 {
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		margin-top: 15px;
	}
	
	.member .sep {
		width: 40px;
		height: 4px;
		margin: 10px auto;
		background: #000;
	}
	
	.member p {
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		margin-bottom: 15px;
	}

	.member .title {
		font-size:14px;
	}
	
	.member .social i {
		font-size: 20px;
		color: #fff;
		padding: 0 10px;
	}
	
	.member .social i:hover {
		color: #000;
	}
	
/* SEC04 : Portfolio Section Stylesheets */

	#portfolio {
		position: relative;
	}
	
	#portfolio .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -50px;
		width: 100%;
		z-index: 100;
	}
	
	#portfolio .separator path {
		fill: #fff;
	}

	#portfolio .cbp-l-filters-button {
		text-align: center !important;
	}

	#portfolio .cbp-l-inline {
/*		font-family: "Roboto Slab", Arial, sans-serif; 
*/		font-family: bree-web, Bree, sans-serif !important;
	}
	
	/* Portfolio Filter Buttons */
		#portfolio .cbp-l-filters-button .cbp-filter-item:hover {
			border-color: #000;
			color:#000;
		}
		
		#portfolio .cbp-l-filters-button .cbp-filter-item-active {
			border-color: #000;
			background-color: #000
		}

	/* Portfolio Item Hover */
		
		#portfolio .cbp-caption-zoom .cbp-caption-activeWrap {
			background-color: rgba( 0, 0, 0, .4 );
		}
		
		#portfolio .cbp-l-caption-buttonLeft, .cbp-l-caption-buttonRight {
			background-color: #000;
		}
		
		#portfolio .cbp-l-caption-buttonLeft:hover,
		#portfolio .cbp-l-caption-buttonRight:hover {
			background-color: #fff;
			color:#000
		}
		
		#portfolio .cbp-item {
			border-radius: 0px;
			overflow: hidden;
		}
	
/* SEC05 : Services Section Stylesheets */

	.services {
		position: relative;
		background: #000 url(../img/services-bg.jpg) no-repeat center center;
		padding: 60px 0;
		background-size:100%;
	}
	
	.services .separator {
		display: block;
		height: 70px;
		position: absolute;
		top:0;
		width: 100%;
		z-index: 100;
	}
	
	.services .separator path {
		fill: #fff;
	}
	
	.services h2,
	.services h3 {
		color: #fff;
	}
	
	.services .item {
		text-align: center;
	}
	
	.services .item .icon {
		border: 2px solid #fff;
		padding: 15px;
		font-size: 30px;
		color:#fff;
		border-radius: 50%;
		margin-top: 40px;
		
		-webkit-transition:	all 0.3s;
		-moz-transition:	all 0.3s;
		-o-transition:		all 0.3s;
		-ms-transition:		all 0.3s;
		transition:			all 0.3s;
		
	}
	
	.services .item h4 {
		font-size: 18px;
		font-weight: 700;
		color:#fff;
		margin: 15px 0;
	}
	
	.services .item p {
		padding: 0 15px;
		font-size: 14px;
		font-weight: 500;
		color:#fff;
	}
	
	.services .item:hover .icon {
		background: rgba(0,0,0,0.25);
		color: #fff;
	}
	
/* SEC06 : News Section Stylesheets */

	#news {
		position: relative;
	}
	
	#news .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -50px;
		width: 100%;
		z-index: 100;
	}
	
	#news .separator path {
		fill: #fff;
	}
	
	#news .news-slider {
		position: relative;
		margin-top: 40px;
	}
	
	#news .news-slider .item {
		position: relative;
		margin: 0 10px;
	}
	
	#news .news-slider .item .time-bandage {
		position: absolute;
		top:0;
		left: 20px;
		width: 50px;
		height: 55px;
		text-align: center;
		background: url(../img/news-time-bandage.png) no-repeat center center;
/*		font-family: "Roboto Slab", Arial, sans-serif; 
*/		font-family: bree-web, Bree, sans-serif;
		font-weight: 700;
		color: #fff;
		line-height: 1;
		padding: 7px 0 0 0;
	}

	#news .news-slider .item .image {
		position: relative;
		overflow: hidden;
		border-radius: 3px
	}
	
	#news .news-slider .item .tools {
		position: relative;
		margin-top: 10px;
		height: 40px;
		padding-left: 15px;
	}
	
	#news .news-slider .item .tools .icon {
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		width: 6px;
		height: 40px;
		border-radius: 3px;
	}
	
	#news .news-slider .owl-buttons {
		position: absolute;
		top: 50%;
		margin-top: -45px;
		width: 100%;
		z-index: 0;
		height: 0;
	}
	
	#news .news-slider .owl-buttons div {
		background: transparent;
	}
	
	#news .news-slider .owl-buttons .fa {
		color:#aaa;
		border: 2px solid #aaa;
		border-radius: 50%;
		font-size: 15px;
	}
	
	#news .news-slider .owl-buttons .rightArrow {
		position: absolute;
		right: -45px;
		padding: 9px 10px 9px 13px;
	}
	
	#news .news-slider .owl-buttons .leftArrow {
		position: absolute;
		left: -45px;
		padding: 9px 13px 9px 10px;
	}
	
/* SEC07 : Counters Section Stylesheets */

	.counters {
		position: relative;
		background: #000 url(../img/counters-bg.jpg) no-repeat center center;
		padding: 60px 0;
		background-size:100%;
	}
	
	.counters .separator {
		display: block;
		height: 70px;
		position: absolute;
		top:0;
		width: 100%;
		z-index: 100;
	}
	
	.counters .separator path {
		fill: #fff;
	}
	
	.counters h2,
	.counters h3 {
		color: #fff;
	}
	
	.counters .icon {
		width: 120px;
		height: 120px;
		font-size: 60px;
		text-align: center;
		line-height: 120px;
		color:#fff;
		border: 3px solid #fff;
		border-radius: 50%;
		margin-top: 40px;
	}
	
	.counters h4 {
		font-size: 60px;
		font-weight: 700;
		letter-spacing: -2px;
		color:#fff;
		margin: 15px 0;
	}
	
	.counters h5 {
		font-size: 18px;
		font-weight: 700;
		color:#fff;
	}
	
	.counters p {
		font-size: 14px;
		font-weight: 500;
		color:#fff;
	}

/* SEC08 : Contact Section Stylesheets */

	#contact {
		position: relative;
		padding-bottom: 0;
	}
	
	#contact .separator {
		display: block;
		height: 50px;
		position: absolute;
		top: -50px;
		width: 100%;
		z-index: 100;
	}
	
	#contact .separator path {
		fill: #fff;
	}
	
	#contact .contact-form {
		margin-top: 40px;
	}
	
	#contact .contact-form .form-control {
		color: #FFF !important;
		padding: 20px;
	}
	
	#contact .contact-form textarea {
		margin-top: 20px;
	}

	#contact .map {
		margin-top: 60px;
		height: 350px;
	}
	
	#contact .bottom {
		background: #000;
		padding: 25px 0;
		color: #fff;
		padding-bottom: 15px;	/**/
		padding-top: 5px;		/**/
	}
	
	#contact .bottom i {
		font-size: 20px;
		padding: 10px 10px 0 10px;
		color:#fff;
		border-radius: 50%;
	}


@media (max-width: 767px) {
	
	h2 {
		font-size: 22px
	}
	
	h3 {
		font-size: 16px
	}
	
	.bottom .col-lg-4:last-child {
		text-align: left;
	}
	
	#contact .contact-form input {
		margin-bottom: 5px;
	}
	
	#contact .contact-form textarea {
		margin-top: 0px;
	}
	
	#news .news-slider .owl-buttons {
		position: relative;
		margin-top: 25px;
	}
	
	#news .news-slider .owl-buttons div {
		background: #fff;
		padding: 0;
	}
	
	#news .news-slider .owl-buttons .leftArrow {
		position: relative;
		left: 0;
		right: 0;
		margin: 0;
	}
	
	#news .news-slider .owl-buttons .rightArrow {
		position: relative;
		left: 0;
		right: 0;
		margin: 0;
	}
	
}