/*................................reset...........................................*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*................................clearfix...........................................*/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/*.........GLOBLE......*/

body {
	font-family: 'Montserrat', sans-serif;
	/*font-family: 'Crimson Text', serif;*/
	font-size: 15px;
	line-height: 25px;
	color: #231f20;
	background: #f4f4f4;
	font-weight: 400;
}
a {
	text-decoration: none;
}
a:hover {
	transition: all 0.5s;
}
.wrapper {
	position: relative;
	width: 100%;
	display: block;
	clear: both;
}
h1, h2, h3, h4, h5 {
	font-size: 24px;
	color: #000000;
}
header {
	background: #fff;
	padding: 20px 0;
}
.logos {
	width: 30%;
	float: left;
}
nav {
	width: 70%;
	float: left;
	text-align: right;
}
nav ul li {
	display: inline-block;
	padding: 15px;
}
nav ul li a {
	color: #707070;
	font-size: 13px;
	text-decoration: none;
}
nav ul li a:hover {
	color: #00c7fc;
}
/*BANNER SECTION*/
#homebanner {
	background: url(images/banner.jpg) no-repeat;
	min-height: 725px;
	width: 100%;
	background-size: cover;
	display: block;
}
.homecontent {
	margin-top: 250px;
	color: #ffffff;
}
.homecontent p {
	text-align: center;
}
.homecontent h2 {
	text-align: center;
	display: block;
	color: #fff;
	font-size: 50px;
	padding: 40px 0;
}
/*BUTTON STYLES*/
.btns {
	display: block;
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.box {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	display: inline-block;
}
/* Common button styles */
.button {
	float: left;
	min-width: 200px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	border-radius: 5px;
	letter-spacing: 1px;
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}
/* Winona */
.button--winona {
	overflow: hidden;
	padding: 0;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	border: 2px solid #fff;
}
.button--winona::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	color: #3f51b5;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.button--winona > span {
	display: block;
}
.button--winona.button--inverted {
	color: #7986cb;
}
.button--winona.button--inverted:after {
	color: #fff;
}
.button--winona::after, .button--winona > span {
	color: #fff;
	padding: 1em 2em;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona:hover {
	border-color: #00c7fc;
	background-color: #00c7fc;
	border: 2px solid #00c7fc;
}
.button--winona.button--inverted:hover {
	border-color: #21333C;
	background-color: #21333C;
}
.button--winona:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button--winona:hover > span {
	opacity: 0;
	-webkit-transform: translate3d(0, -25%, 0);
	transform: translate3d(0, -25%, 0);
}
/*effects2*/
/* Winona */
.button--winona1 {
	overflow: hidden;
	padding: 0;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	border: 2px solid #00c7fc;
	background-color: #00c7fc;
}
.button--winona1::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	color: #3f51b5;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.button--winona1 > span {
	display: block;
}
.button--winona1.button--inverted {
	color: #7986cb;
}
.button--winona1.button--inverted:after {
	color: #fff;
}
.button--winona1::after, .button--winona1 > span {
	color: #fff;
	padding: 1em 2em;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--winona1:hover {
	background: none;
	border: 2px solid #fff;
}
.button--winona1.button--inverted1:hover {
	border-color: #21333C;
	background-color: #21333C;
}
.button--winona1:hover::after {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button--winona1:hover > span {
	opacity: 0;
	-webkit-transform: translate3d(0, -25%, 0);
	transform: translate3d(0, -25%, 0);
}
/*end*/
.down {
	display: block;
	text-align: center;
	margin-top: 200px;
}
/*HISTORY SECTION*/
#history {
	padding: 140px 0 150px;
	text-align: center;
}
#history h3 {
	font-size: 25px;
	color: #231f20;
	padding-bottom: 40px;
}
#history p {
	font-family: 'Crimson Text', serif;
	color: #637988;
	padding-top: 20px;
}
/*PORTFOLIO SECTION*/
.team1 {
	width: 16.66%;
	float: left;
}
.team1 img {
	width: 100%;
	display: block;
}
.abteam_info {
	width: 100%;
	display: inline-block;
}
.abteam_info figure {
	position: relative;
	overflow: hidden;
}
.abteam_info figure img {
	display: block;
}
.abteam_info figure figcaption {
	background: rgba(4,163,206,0.8);
	padding: 20px;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
	position: absolute;
	bottom: 0px;
	top: 35%;
	width: 100%;
	text-align: center;
}
.abteam_info figure:hover figcaption {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.tm_desg {
	letter-spacing: 1px;
	padding-top: 40px;
	color: #fff;
}
.detailteam {
	font-family: 'Crimson Text', serif;
	color: #fff;
	padding: 50px 0;
}
.teamicons a i {
	font-size: 20px;
	color: #fff;
	padding: 0 20px;
}
/*WORK SECTION*/
#work {
	padding: 143px 0;
	text-align: center;
}
.one {
	background: #fff;
	padding: 50px 35px 90px;
}
.one h3 {
	padding: 16px 0 40px;
}
.one p {
	font-family: 'Crimson Text', serif;
}
/*CLEINT SECTION*/
#client {
	padding: 140px 0 150px;
	background: #fff;
	text-align: center;
}
.topclient {
	padding-bottom: 100px;
}
.topclient h3 {
	padding-bottom: 30px;
}
.topclient p {
	font-family: 'Crimson Text', serif;
	padding: 30px 174px 20px;
}
.topclient span {
	color: #999999;
	font-family: 'Crimson Text', serif;
}
/*CONTACT SECTION*/
#contact {
	background: #101012;
	padding: 55px 0;
}
.about {
	padding: 90px 70px 75px;
	border: 1px solid #707070;
	text-align: center;
}
.contactinside {
	padding: 90px 70px 75px;
	border: 1px solid #707070;
}
.about h3 {
	color: #fff;
	padding-bottom: 40px;
}
.about span {
	height: 2px;
	widows: 10%;
	display: inline-block;
	background: #00c7fc;
}
.about p {
	font-family: 'Crimson Text', serif;
	padding: 30px 0 70px;
	color: #fff;
}
.contactinside h3 {
	color: #fff;
	text-align: center;
	padding-bottom: 10px;
}
.contactinside p {
	color: #fff;
	padding-bottom: 10px;
}
.contactinside input {
	background: none;
	border: 0;
	outline: 0;
	border-bottom: 1px solid #707070;
	width: 100%;
	margin-bottom: 40px;
	color: #fff;
}
.contactinside textarea {
	background: none;
	border: 0;
	outline: 0;
	border-bottom: 1px solid #707070;
	border-top: 1px solid #707070;
	width: 100%;
	margin: 40px 0;
	color: #fff;
}
.contactinside a {
	text-align: right;
	display: block;
	color: #00c7fc;
	letter-spacing: 1px;
}
/*FOOTER SECTION*/
footer {
	background: #00c7fc;
	padding: 50px 0;
}
footer p {
	color: #fff;
	font-size: 13px;
}
footer p a {
	color: #fff;
}
footer p a:hover {
	text-decoration: underline;
}
.social {
	text-align: right;
}
.social a i {
	margin-left: 20px;
	color: #fff;
	font-size: 20px;
}
/*STICKY HEADER*/
header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
header.sticky {
	background: #fff;
	padding: 10px 0;
	box-shadow: 1px 1px 0.99px 0.01px rgba(0, 0, 0, 0.05);
}

/*.................MENU CSS..................................*/
/* =============================================
 *
 *   FIXED RESPONSIVE NAV
 *
 *   (c) 2014 @adtileHQ
 *   http://www.adtile.me
 *   http://twitter.com/adtilehq
 *
 *   Free to use under the MIT License.
 *
 * ============================================= */

a:active, a:hover {
	outline: 0;
}
 @-webkit-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
	list-style: none;
}
.nav-collapse li {
	width: 100%;
	display: block;
}
.js .nav-collapse {
	clip: rect(0 0 0 0);
	max-height: 0;
	position: absolute;
	display: block;
	overflow: hidden;
	zoom: 1;
}
.nav-collapse.opened {
	max-height: 9999px;
}
.disable-pointer-events {
	pointer-events: none !important;
}
.nav-toggle {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

@media screen and (min-width: 767px) {
.js .nav-collapse {
	position: relative;
}
.js .nav-collapse.closed {
	max-height: none;
}
.nav-toggle {
	display: none;
}
}
/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	transition: opacity 300ms;
	background: rgba(0,0,0, .5);
	visibility: hidden;
	position: fixed;
	opacity: 0;
	z-index: 2;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
}
.android .mask {
	-webkit-transition: none;
	transition: none;
}
.js-nav-active .mask {
	visibility: visible;
	opacity: 1;
}

@media screen and (min-width: 767px) {
.mask {
	display: none !important;
	opacity: 0 !important;
}
}
/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
}
.nav-collapse, .nav-collapse * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.nav-collapse, .nav-collapse ul {
	list-style: none;
	width: 100%;
	float: left;
}

@media screen and (min-width: 767px) {
.nav-collapse {
	float: right;
	width: auto;
}
}
.nav-collapse li {
	float: left;
	width: 100%;
	text-align: center;
}

@media screen and (min-width: 767px) {
.nav-collapse li {
	width: auto;
}
}
.nav-collapse a:active, .nav-collapse .active a {
	color: #00c7fc;
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
	font-family: "responsivenav";
	src: url("icons/responsivenav.eot");
	src: url("icons/responsivenav.eot?#iefix") format("embedded-opentype"),  url("icons/responsivenav.ttf") format("truetype"),  url("icons/responsivenav.woff") format("woff"),  url("icons/responsivenav.svg#responsivenav") format("svg");
	font-weight: normal;
	font-style: normal;
}
.nav-toggle {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-decoration: none;
	text-indent: -300px;
	position: relative;
	overflow: hidden;
	width: 60px;
	height: 44px;
	float: right;
}
.nav-toggle:before {
	color: #00c7fc; /* Edit this to change the icon color */
	font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
	text-transform: none;
	text-align: center;
	position: absolute;
	content: "\2261"; /* Hamburger icon */
	text-indent: 0;
	speak: none;
	width: 100%;
	left: 0;
	top: 0;
}
.nav-toggle.active:before {
	font-size: 24px;
	content: "\78"; /* Close icon */
}



/*EFFECTS FOR ANIMATION*/
/*EFFECT*/
.os-animation {
	opacity: 0;
}
.os-animation.animated {
	opacity: 1;
}
.staggered-animation {
	opacity: 0;
}
.staggered-animation.animated {
	opacity: 1;
}

/*LOADER EFFECT*/
/*Paste this css to your style sheet file or under head tag*/
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
 position: fixed;
 left:0;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: #00c7fc;
}

.cssload-container {
	width: 117px;
	margin: 0 auto;
	top:50%;
	position:relative;
	text-align:center;
	display:block;
}

.cssload-circle-1 {
	height: 117px;
	width: 117px;
	background: rgb(97,46,141);
}

.cssload-circle-2 {
	height: 97px;
	width: 97px;
	background: rgb(194,34,134);
}

.cssload-circle-3 {
	height: 78px;
	width: 78px;
	background: rgb(234,34,94);
}

.cssload-circle-4 {
	height: 58px;
	width: 58px;
	background: rgb(237,91,53);
}

.cssload-circle-5 {
	height: 39px;
	width: 39px;
	background: rgb(245,181,46);
}

.cssload-circle-6 {
	height: 19px;
	width: 19px;
	background: rgb(129,197,64);
}

.cssload-circle-7 {
	height: 10px;
	width: 10px;
	background: rgb(0,163,150);
}

.cssload-circle-8 {
	height: 5px;
	width: 5px;
	background: rgb(22,116,188);
}

.cssload-circle-1,
.cssload-circle-2,
.cssload-circle-3,
.cssload-circle-4,
.cssload-circle-5,
.cssload-circle-6,
.cssload-circle-7,
.cssload-circle-8 {
	border-bottom: none;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		-o-box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		-ms-box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	animation-name: cssload-spin;
		-o-animation-name: cssload-spin;
		-ms-animation-name: cssload-spin;
		-webkit-animation-name: cssload-spin;
		-moz-animation-name: cssload-spin;
	animation-duration: 4600ms;
		-o-animation-duration: 4600ms;
		-ms-animation-duration: 4600ms;
		-webkit-animation-duration: 4600ms;
		-moz-animation-duration: 4600ms;
	animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
	animation-timing-function: linear;
		-o-animation-timing-function: linear;
		-ms-animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		-moz-animation-timing-function: linear;
}



@keyframes cssload-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-o-keyframes cssload-spin {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes cssload-spin {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes cssload-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes cssload-spin {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}