/*-----------------------------------------------------------------------------------*/
/*	GENERAL STYLING
/*-----------------------------------------------------------------------------------*/

.cleancode_block ::selection {background: #fff; color:#000;}
.cleancode_block ::-moz-selection {background: #fff; color:#000;}







/*-----------------------------------------------------------------------------------*/
/*	TYPOGRAPHY
/*-----------------------------------------------------------------------------------*/




/* __________ breadcrumb __________ */
.breadcrumbs_block {
	padding:81px 0;
	background-image:url(../images/clean_code_bg.jpg);
	background-repeat:no-repeat;
	background-size:cover; clear:both;
}
.breadcrumbs_block h2 {
	margin-bottom:15px;
	line-height:80px;
	font-size:80px;
	color:#fff;
}
.breadcrumbs_block p {
	margin:0;
	line-height:34px;
	font-size:26px;
	color:#999;
}


/* __________ Clean Code __________ */
.cleancode_block {
	padding:96px 0 78px;
	background-image:url(../images/clean_code_bg.jpg);
	background-size:cover;
	background-position:0 0;
	background-attachment:fixed !important;
}

.cleancode_block .tab-content {
	overflow:hidden;
	padding: 0;
	margin:0 0 70px;
}
.cleancode_block p.title {
	margin:0 0 17px;
	font-weight:100;
	line-height:40px;
	font-size:42px;
	color:#fff;
}
.cleancode_block p.title b {font-weight:500;}

.cleancode_block span {
	font-weight:300;
	line-height:34px;
	font-size:20px;
	color:#999;
}
.cleancode_block .tab-pane {
	display:block;
	height:0;
	transform:translateY(-50%);
	-o-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	transition: all 0.5s ease-in-out; 
	-webkit-transition: all 0.5s ease-in-out;
}
.cleancode_block .tab-pane.active {
	height:auto;
	transform:translateY(0);
	-o-transform:translateY(0);
	-ms-transform:translateY(0);
	-webkit-transform:translateY(0);
}

.ie .cleancode_block .tab-pane {display:none;}
.ie .cleancode_block .tab-pane.active {display:block;}


.cleancode_block .nav-tabs {
	margin:0 -15px;
	border:0;
}
.cleancode_block .nav-tabs li {
	margin:0;
	padding:0 15px;
}
.cleancode_block .nav-tabs li a {
	width:170px;
	height:170px;
	margin:0;
	padding:54px 0 0;
	text-align:center;
	border:0 !important;
	border-radius:0;
	transition: background-color 0.3s ease-in-out;
	-webkit-transition: background-color 0.3s ease-in-out;
}
.cleancode_block .nav-tabs li a i {
	display:block;
	width:60px;
	height:60px;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:0 -60px;
	background-size:100% auto;
	-webkit-background-size:100% auto;
	transition: transform 0.2s ease-in-out; 
	-webkit-transition: -webkit-transform 0.2s ease-in-out;
}
.cleancode_block .nav-tabs li a.i1 i {background-image:url(../images/i1.png);}
.cleancode_block .nav-tabs li a.i2 i {background-image:url(../images/i2.png);}
.cleancode_block .nav-tabs li a.i3 i {background-image:url(../images/i3.png);}
.cleancode_block .nav-tabs li a.i4 i {background-image:url(../images/i4.png);}
.cleancode_block .nav-tabs li a.i5 i {background-image:url(../images/i5.png);}
.cleancode_block .nav-tabs li a.i6 i {background-image:url(../images/i6.png);}

.nav-tabs li a:hover,
.nav-tabs li a:focus {
	background-color:transparent;
}
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
	background-color:#fff;
}

.nav-tabs li a:hover i {
	background-position:0 -120px;
	transform:translateY(-10px);
	-o-transform:translateY(-10px);
	-ms-transform:translateY(-10px);
	-webkit-transform:translateY(-10px);
}
.nav-tabs li.active a i {
	background-position:0 0;
	transform:translateY(-16px);
	-o-transform:translateY(-16px);
	-ms-transform:translateY(-16px);
	-webkit-transform:translateY(-16px);
}

.cleancode_block .nav-tabs li a span {
	display:block;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	line-height:20px;
	font-size:20px;
	color:#333;
	opacity:0;
	transform:translateY(-30px);
	-o-transform:translateY(-30px);
	-ms-transform:translateY(-30px);
	-webkit-transform:translateY(-30px);
	transition: all 0.5s ease-in-out; 
	-webkit-transition: all 0.5s ease-in-out;
}
.nav-tabs li.active a span {
	opacity:1;
	transform:translateY(-6px);
	-o-transform:translateY(-6px);
	-ms-transform:translateY(-6px);
	-webkit-transform:translateY(-6px);
}


/* __________ Multi Purpose __________ */




@media (max-width: 1024px) {

	
}

@media (min-width: 992px) and (max-width: 1199px) {
	.parallax, .cleancode_block, #team {background-attachment:scroll !important; background-size:100% auto !important; -webkit-background-size:100% auto !important;}

	.cleancode_block p.title {font-size:70px; line-height:70px;}
	.cleancode_block .nav-tabs li a {width:136px; height:136px; padding-top:35px;}
	.cleancode_block .nav-tabs li a i {width:45px; height:45px;}
	.cleancode_block .nav-tabs li a span {font-size:16px;}
	.cleancode_block .nav-tabs li a i {background-position:0 -45px;}
	.nav-tabs li a:hover i {background-position:0 -90px; transform:translateY(-5px); -o-transform:translateY(-5px); -ms-transform:translateY(-5px); -webkit-transform:translateY(-5px);}
	.nav-tabs li.active a i {background-position:0 0; transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);}	
}

@media (min-width: 768px) and (max-width: 991px) {
	.cleancode_block p.title {font-size:60px; line-height:60px;}
	.cleancode_block span {font-size:20px; line-height:24px;}
	.cleancode_block .nav-tabs li a {width:100px; height:100px; padding-top:24px;}
	.cleancode_block .nav-tabs li a i {width:45px; height:45px;}
	.cleancode_block .nav-tabs li a span {font-size:13px;}
	.cleancode_block .nav-tabs li a i {background-position:0 -45px;}
	.nav-tabs li a:hover i {background-position:0 -90px; transform:translateY(-5px); -o-transform:translateY(-5px); -ms-transform:translateY(-5px); -webkit-transform:translateY(-5px);}
	.nav-tabs li.active a i {background-position:0 0; transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);}
}

@media (max-width: 767px) {
	.container {padding-left:15px; padding-right:15px;}
	.cleancode_block {padding:40px 0 40px;}
	.cleancode_block .tab-content {margin:0 0 40px;}

	.cleancode_block p.title {font-size:40px; line-height:40px;}
	.cleancode_block span {font-size:15px; line-height:22px;}
	.cleancode_block .nav-tabs {margin:0 auto; width:450px;}
	.cleancode_block .nav-tabs li a {width:120px; height:120px; padding-top:24px;}
	.cleancode_block .nav-tabs li a i {width:45px; height:45px;}
	.cleancode_block .nav-tabs li a span {font-size:13px;}
	.cleancode_block .nav-tabs li a i {background-position:0 -45px;}
	.nav-tabs li a:hover i {background-position:0 -90px; transform:translateY(-5px); -o-transform:translateY(-5px); -ms-transform:translateY(-5px); -webkit-transform:translateY(-5px);}
	.nav-tabs li.active a i {background-position:0 0; transform:translateY(-10px); -o-transform:translateY(-10px); -ms-transform:translateY(-10px); -webkit-transform:translateY(-10px);}
}

@media (max-width: 479px) {

	.cleancode_block p.title {font-size:26px; line-height:26px;}
	.cleancode_block .nav-tabs {width:290px;}
	.cleancode_block .nav-tabs li {padding:0;}
	.cleancode_block .nav-tabs li a {width:96px; height:96px;}
}