@charset "utf-8";
/* CSS Document */
body{ background:#f5f5f5; font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; }
p, li{ font-size:17px;}
.header{ padding-top:10px; color:#f36522; font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;  font-size:16px; }
.header .fa{ color:#999; margin-right:10px;}
.navbar{ margin-bottom:0px;}
.navbar-default{ background:#f36522; border:none}
.navbar-default .navbar-nav > li > a{ color:#FFF; text-transform:uppercase;}
.navbar-default .navbar-nav > li > a:hover{ background:#565758; color:#fff}
.navbar-form input, .form-inline input {	width:auto;}
#nav.affix {    position: fixed;    top: 0;    width: 100%;    z-index:10;}
#sidebar.affix-top {    position: static;}
#sidebar.affix {    position: fixed;    top: 80px;}

.navbar-right li { float:left;}
.banner {	position: relative;	width: 100%; 	margin: 0 auto; }
.banner .item { max-height:500px;}
.carousel-indicators li { border-radius: 50%; height: 20px;width: 20px;}
.carousel-indicators .active {height: 25px;width: 25px;}

.wlcome-area{ padding-top:100px; padding-bottom:50px;}
.wlcome-area h1.title-big{ font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:80px; color:#e8e8e8; font-weight:bolder; margin:0px; padding:0px;}
.wlcome-area h2.title-small{font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#444444; font-weight:bold; text-transform:uppercase; margin-top:-35px; }
.wlcome-area p{ font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;  font-size:18px; width:80%; text-align:center; margin:0px auto}
.btn-orange{ background:#f36522; text-align:center; padding:15px 10px; color:#FFF; margin-top:40px;}
.services-area{ background:#FFF;}
.services-area h1.title-big{ font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:80px; color:#e8e8e8; font-weight:bolder; margin:0px; padding:0px; margin-top:30px;}
.services-area h2.title-small{font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#444444; font-weight:bold; text-transform:uppercase; margin-top:-35px; }
.service-title{ font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:15px; text-align:center;}
.service-col{ text-align:center; padding:15px 10px;}
.butons-wrapper{ background:url(../images/image1.jpg); background-size:cover; background-position:center; padding:100px 0px 50px; color:#FFF;  font-weight:bold; font-size:18px; text-align:center; text-transform:uppercase;}
.btn-outline{ border:1px solid #fff; padding:10px 0px; margin-top:10px;}
.why-icon{ float:left; text-align:center; margin-right:10px;}
.why-col{ margin-top:10px; height:120px;}
.linkto-portfoolio{ padding:40px 0px; background:#f36522; font-size:21px; color:#fff;}
.linkto-portfoolio .btn-outline{ text-align:center; font-size:18px; margin-top:0px;}
.footer{ background:#1e242b; color:#FFF; padding:40px 0px; font-size:18px; text-align:center}
.icon-clecle{ width:180px; height: 80px; margin:0px auto}
.icon-clecle .fa-phone{font-size: 30px;    border: 1px solid #fff;    border-radius: 50%;    padding: 10px 13px;}
.icon-clecle .fa-link{font-size: 30px;    border: 1px solid #fff;    border-radius: 50%;    padding: 10px 13px;}
.icon-clecle .fa-envelope{font-size: 30px;    border: 1px solid #fff;    border-radius: 50%;    padding: 10px 11px;}
.footer-band{ padding:10px 0px; color:#FFF; font-size:16px}
.footer-band i{ margin:0px 7px;}
.why-area h1.title-big{ font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:80px; color:#e8e8e8; font-weight:bolder; margin:0px; padding:0px; margin-top:30px;}
.why-area  h2.title-small{font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#444444; font-weight:bold; text-transform:uppercase; margin-top:-35px; }

h1.title-big{ font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:80px; color:#e8e8e8; font-weight:bolder; margin:0px; padding:0px; margin-top:30px;}
 h2.title-small{font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#444444; font-weight:bold; text-transform:uppercase; margin-top:-35px; }
.subpage-container{ padding-top:50px; padding-bottom:20px;}


/*---------------*/
/***** Bubba *****/
/*---------------*/
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 100%;
	list-style: none;
	text-align: center;
	padding:0px 15px;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	padding:0px;
	min-width: 320px;
	margin:5px;
	width: 48%;

	background: #FC0;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
figure.effect-bubba {
	background: #999;
}

figure.effect-bubba img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
	opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h2 {
	padding-top: 30%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



a {
	outline: none;
	color: #3498db;
	text-decoration: none;
}

a:hover, a:focus {
	color: #528cb3;
}

section {
	padding: 1em;
	text-align: center;
}

.content {
	margin: 0 auto;
	max-width: 1000px;
}

.content > h2 {
	clear: both;
	margin: 0;
	padding: 4em 1% 0;
	color: #484B54;
	font-weight: 800;
	font-size: 1.5em;
}

.content > h2:first-child {
	padding-top: 0em;
}

/* Header */
.codrops-header {
	margin: 0 auto;
	padding: 4em 1em;
	text-align: center;
}

.codrops-header h1 {
	margin: 0;
	font-weight: 800;
	font-size: 4em;
	line-height: 1.3;
}

.codrops-header h1 span {
	display: block;
	padding: 0 0 0.6em 0.1em;
	color: #74777b;
	font-weight: 300;
	font-size: 45%;
}

/* Demo links */
.codrops-demos {
	clear: both;
	padding: 1em 0 0;
	text-align: center;
}

.content + .codrops-demos {
	padding-top: 5em;
}

.codrops-demos a {
	display: inline-block;
	margin: 0 5px;
	padding: 1em 1.5em;
	text-transform: uppercase;
	font-weight: bold;
}

.codrops-demos a:hover,
.codrops-demos a:focus,
.codrops-demos a.current-demo {
	background: #3c414a;
	color: #fff;
}

/* To Navigation Style */
.codrops-top {
	width: 100%;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 0.69em;
	line-height: 2.2;
}

.codrops-top a {
	display: inline-block;
	padding: 1em 2em;
	text-decoration: none;
	letter-spacing: 1px;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	display: block;
	float: left;
}

.codrops-icon:before {
	margin: 0 4px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

/* Related demos */
.related {
	clear: both;
	padding: 6em 1em;
	font-size: 120%;
}

.related > a {
	display: inline-block;
	margin: 20px 10px;
	padding: 25px;
	border: 1px solid #4f7f90;
	text-align: center;
}

.related a:hover {
	border-color: #39545e;
}

.related a img {
	max-width: 100%;
	opacity: 0.8;
}

.related a:hover img,
.related a:active img {
	opacity: 1;
}

.related a h3 {
	margin: 0;
	padding: 0.5em 0 0.3em;
	max-width: 300px;
	text-align: left;
}

/*---------------*/
/***** Duke *****/
/*---------------*/

figure.effect-duke {
	background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
	background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
	opacity: 0.1;
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1);
}

figure.effect-duke h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

figure.effect-duke p {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 20px;
	padding: 30px;
	border: 2px solid #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% -100%;
	transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}
@media screen and (max-width: 25em) {
	.codrops-header {
		font-size: 75%;
	}
	.codrops-icon span {
		display: none;
	}
}
.contact-address{ text-align:center; font-size:20px}
.contact-address i { margin:0px 10px; color:#F60 }
@media  (max-width: 465px){
.col-xxs-12 {    width: 100%; padding:0px; margin:0px; }
.service-col{ border:none !important;}
.hidden-xxs{ display:none !important;}
.wlcome-area h1.title-big, .services-area h1.title-big, .why-area h1.title-big, h1.title-big{ font-size:20px; color:#F90;}
.wlcome-area h2.title-small, .services-area h2.title-small, .why-area  h2.title-small, h2.title-small{ margin-top:0px;}
.why-col{ height:auto;}
}

