Difference between revisions of "Team:Tianjin/Collaboration/css/style.css"

Revision as of 05:41, 12 September 2016 (view source) Crepuscule (Talk | contribs) ← Older edit		Revision as of 07:24, 12 September 2016 (view source) Crepuscule (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	body {	+	body{
	padding: 0;		padding: 0;
	margin: 0;		margin: 0;
−	background: transparent;                 /*  #FFF  */	+	background: transparent;
−	font-family: 'Open Sans', sans-serif;	+	font-family: 'Open Sans', sans-serif;
	}		}
−		+	body a{
−	body a {	+	transition: 0.5s all;
−	transition: 0.5s all;	+
	-webkit-transition: 0.5s all;		-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;		-moz-transition: 0.5s all;
Line 14:		Line 13:
	text-decoration: none;		text-decoration: none;
	}		}
−		+	body a:hover{
−	body a:hover {	+	text-decoration: none;
−	text-decoration: none;	+
	}		}
−		+	body a:focus, a:hover{
−	body a:focus, a:hover {	+	text-decoration: none;
−	text-decoration: none;	+
	}		}
−		+	input[type="button"], input[type="submit"]{
−	input[type="button"], input[type="submit"] {	+	transition: 0.5s all;
−	transition: 0.5s all;	+
	-webkit-transition: 0.5s all;		-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;		-moz-transition: 0.5s all;
Line 30:		Line 26:
	-ms-transition: 0.5s all;		-ms-transition: 0.5s all;
	}		}
−		+	h1, h2, h3, h4, h5, h6{
−	h1, h2, h3, h4, h5, h6 {	+	margin: 0;
−	margin: 0;	+
	padding: 0;		padding: 0;
	text-align: center;		text-align: center;
	font-family: 'Fredericka the Great', cursive;		font-family: 'Fredericka the Great', cursive;
	}		}
−		+	p{
−	p {	+	margin: 0;
−	margin: 0;	+
	}		}
−		+	ul{
−	ul {	+	margin: 0;
−	margin: 0;	+
	padding: 0;		padding: 0;
	}		}
−		+	label{
−	label {	+	margin: 0;
−	margin: 0;	+
	}		}
−		+	img{
−	img {	+	width: 100%;
−	width: 100%;	+
	}		}
−		+	a:focus, a:hover{
−	a:focus, a:hover {	+	text-decoration: none;
−	text-decoration: none;	+
	outline: none;		outline: none;
	}		}
−
	/*-- //Reset-Code --*/		/*-- //Reset-Code --*/
Line 67:		Line 56:
	/*-- Background-Gradient-Colors --*/		/*-- Background-Gradient-Colors --*/
−	body {	+	body{
−	background: #FFF;	+	background: #FFF;
	background: -webkit-linear-gradient(#FFF, #0066FF);		background: -webkit-linear-gradient(#FFF, #0066FF);
	background: -o-linear-gradient(#FFF, #0066FF);		background: -o-linear-gradient(#FFF, #0066FF);
Line 80:		Line 69:
	/*-- Header --*/		/*-- Header --*/
−	.header {	+	.header{
−	padding: 100px 0 150px;	+	padding: 100px 0 150px;
	}		}
−		+	.header-left{
−	.header-left {	+	float: left;
−	float: left;	+
	}		}
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.header-right {	+	.header-right{
−	float: right;	+	float: right;
−	}	+	}
−		+	.header-slider{
−	.header-slider {	+	position: relative;
−	position: relative;	+
−		+
	}		}
	/*-- Banner-Slider --*/		/*-- Banner-Slider --*/
−	.slider-1 {	+	.slider-1{
−	width: 95%;	+	width: 95%;
	border: 0px solid #FFF;		border: 0px solid #FFF;
	position: relative;		position: relative;
Line 107:		Line 93:
	left: 2%;		left: 2%;
	}		}
−		+	.slider-2{
−	.slider-2 {	+	width: 30%;
−	width: 30%;	+
	position: absolute;		position: absolute;
	top: -14%;		top: -14%;
Line 116:		Line 101:
	z-index: 99999;		z-index: 99999;
	}		}
−		+	.slider{
−	.slider {	+	position: relative;
−	position: relative;	+
	}		}
−		+	.rslides{
−	.rslides {	+	position: relative;
−	position: relative;	+
	list-style: none;		list-style: none;
	overflow: hidden;		overflow: hidden;
Line 129:		Line 112:
	margin: 0;		margin: 0;
	}		}
−		+	.rslides li{
−	.rslides li {	+	-webkit-backface-visibility: hidden;
−	-webkit-backface-visibility: hidden;	+
	position: absolute;		position: absolute;
	display: none;		display: none;
Line 140:		Line 122:
	top: 0;		top: 0;
	}		}
−		+	.rslides li:first-child{
−	.rslides li:first-child {	+	position: relative;
−	position: relative;	+
	display: block;		display: block;
	float: left;		float: left;
	}		}
−		+	.rslides img{
−	.rslides img {	+	display: block;
−	display: block;	+
	height: auto;		height: auto;
	float: left;		float: left;
Line 154:		Line 134:
	border: 0;		border: 0;
	}		}
−		+	a.callbacks_nav{
−	a.callbacks_nav {	+	display: none;
−	display: none;	+
	}		}
−		+	ul.callbacks_tabs{
−	ul.callbacks_tabs {	+	display: none;
−	display: none;	+
	}		}
−
	/*-- //Banner-Slider --*/		/*-- //Banner-Slider --*/
−	.header-right {	+	.header-right{
−	padding-top: 70px;	+	padding-top: 70px;
−		+
	}		}
	/*-- Navbar --		/*-- Navbar --
−	.navbar {	+	.navbar{
−	min-height: 40px;	+	min-height: 40px;
	}		}
−		+	.navbar-default{
−	.navbar-default {	+	background-color: transparent;
−	background-color: transparent;	+
	border-color: transparent;		border-color: transparent;
	border: none;		border: none;
Line 187:		Line 162:
	*/		*/
−	.hover-effect ul {	+	.hover-effect ul{
−	border: 2px solid #EEE;	+	border: 2px solid #EEE;
	-webkit-transform: translateZ(0);		-webkit-transform: translateZ(0);
	transform: translateZ(0);		transform: translateZ(0);
Line 195:		Line 170:
	margin: 0 auto;		margin: 0 auto;
	}		}
−		+	.hover-effect li{
−	.hover-effect li {	+	overflow: hidden;
−	overflow: hidden;	+
	position: relative;		position: relative;
	display: inline-block;		display: inline-block;
	}		}
−		+	.hover-effect li:before, .hover-effect li:after{
−	.hover-effect li:before, .hover-effect li:after {	+	display: block;
−	display: block;	+
	}		}
−		+	.hover-effect li:before{
−	.hover-effect li:before {	+	bottom: 0%;
−	bottom: 0%;	+
	}		}
−		+	.hover-effect li:after{
−	.hover-effect li:after {	+	bottom: 50%;
−	bottom: 50%;	+
	}		}
−		+	.hover-effect a{
−	.hover-effect a {	+	backface-visibility: hidden;
−	backface-visibility: hidden;	+
	display: block;		display: block;
	padding: 5px 20px;		padding: 5px 20px;
Line 226:		Line 196:
	font-family: 'Montserrat', sans-serif;		font-family: 'Montserrat', sans-serif;
	}		}
−		+	.hover-effect a:before{
−	.hover-effect a:before {	+	bottom: 25%;
−	bottom: 25%;	+
	}		}
−		+	.hover-effect a:after{
−	.hover-effect a:after {	+	bottom: 75%;
−	bottom: 75%;	+
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	}		}
−		+	.hover-effect a:hover{
−	.hover-effect a:hover {	+	color: #000;
−	color: #000;	+
	}		}
−		+	.hover-effect li:before, .hover-effect li:after, .hover-effect a:before, .hover-effect a:after{
−	.hover-effect li:before, .hover-effect li:after, .hover-effect a:before, .hover-effect a:after {	+	background-color: #12FFB9;
−	background-color: #12FFB9;	+
	position: absolute;		position: absolute;
	height: 25%;		height: 25%;
Line 253:		Line 219:
	transition: all 0.3s ease;		transition: all 0.3s ease;
	}		}
−		+	.hover-effect li:before{
−	.hover-effect li:before {	+	-webkit-transition-delay: 0s;
−	-webkit-transition-delay: 0s;	+
	transition-delay: 0s;		transition-delay: 0s;
	}		}
−		+	.hover-effect li:after{
−	.hover-effect li:after {	+	-webkit-transition-delay: 0.1s;
−	-webkit-transition-delay: 0.1s;	+
	transition-delay: 0.1s;		transition-delay: 0.1s;
	}		}
−		+	.hover-effect a:before{
−	.hover-effect a:before {	+	-webkit-transition-delay: 0.05s;
−	-webkit-transition-delay: 0.05s;	+
	transition-delay: 0.05s;		transition-delay: 0.05s;
	}		}
−		+	.hover-effect a:after{
−	.hover-effect a:after {	+	-webkit-transition-delay: 0.15s;
−	-webkit-transition-delay: 0.15s;	+
	transition-delay: 0.15s;		transition-delay: 0.15s;
	}		}
−		+	.hover-effect li:hover:before, .hover-effect li.current:before, .hover-effect li:hover:after, .hover-effect li.current:after, .hover-effect li:hover a:before, .hover-effect li.current a:before, .hover-effect li:hover a:after, .hover-effect li.current a:after{
−	.hover-effect li:hover:before, .hover-effect li.current:before, .hover-effect li:hover:after, .hover-effect li.current:after, .hover-effect li:hover a:before, .hover-effect li.current a:before, .hover-effect li:hover a:after, .hover-effect li.current a:after {	+	left: 0;
−	left: 0;	+
	right: 0;		right: 0;
	opacity: 1;		opacity: 1;
	}		}
−		+	.hover-effect li:hover:before, .hover-effect li.current:before{
−	.hover-effect li:hover:before, .hover-effect li.current:before {	+	-webkit-transition-delay: 0s;
−	-webkit-transition-delay: 0s;	+
	transition-delay: 0s;		transition-delay: 0s;
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	}		}
−		+	.hover-effect li:hover:after, .hover-effect li.current:after{
−	.hover-effect li:hover:after, .hover-effect li.current:after {	+	-webkit-transition-delay: 0.2s;
−	-webkit-transition-delay: 0.2s;	+
	transition-delay: 0.2s;		transition-delay: 0.2s;
	}		}
−		+	.hover-effect li:hover a:before, .hover-effect li.current a:before{
−	.hover-effect li:hover a:before, .hover-effect li.current a:before {	+	-webkit-transition-delay: 0.1s;
−	-webkit-transition-delay: 0.1s;	+
	transition-delay: 0.1s;		transition-delay: 0.1s;
	}		}
−		+	.hover-effect li:hover a:after, .hover-effect li.current a:after{
−	.hover-effect li:hover a:after, .hover-effect li.current a:after {	+	-webkit-transition-delay: 0.3s;
−	-webkit-transition-delay: 0.3s;	+
	transition-delay: 0.3s;		transition-delay: 0.3s;
	}		}
−
	/*-- //Navbar --*/		/*-- //Navbar --*/
Line 308:		Line 264:
	/*-- Logo --*/		/*-- Logo --*/
−	.logo {	+	.logo{
−	text-align: center;	+	text-align: center;
	margin: 50px 0 80px;		margin: 50px 0 80px;
	position: relative;		position: relative;
	}		}
−		+	.logo a{
−	.logo a {	+	font-family: 'Fredericka the Great', cursive;
−	font-family: 'Fredericka the Great', cursive;	+
	font-size: 60px;		font-size: 60px;
	color: #EEE;		color: #EEE;
Line 322:		Line 277:
	border-bottom: 5px solid #EEE;		border-bottom: 5px solid #EEE;
	}		}
−		+	.logo img{
−	.logo img {	+	position: absolute;
−	position: absolute;	+
	width: 60px;		width: 60px;
	top: 78px;		top: 78px;
Line 330:		Line 284:
	background-color: #058EEC;		background-color: #058EEC;
	}		}
−
	/*-- //Logo --*/		/*-- //Logo --*/
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.header-info p {	+	.header-info p{
−	font-size: 15px;	+	font-size: 15px;
	text-align: center;		text-align: center;
	padding: 0 100px;		padding: 0 100px;
	line-height: 30px;		line-height: 30px;
	color: #EEE;		color: #EEE;
−
	}		}
	/*-- Header-Social-Icons --*/		/*-- Header-Social-Icons --*/
−	.social {	+	.social{
−	text-align: center;	+	text-align: center;
	margin-top: 40px;		margin-top: 40px;
	}		}
−		+	ul.social-icons li{
−	ul.social-icons li {	+	display: inline-block;
−	display: inline-block;	+
	}		}
−		+	ul.social-icons li a{
−	ul.social-icons li a {	+	display: inline-block;
−	display: inline-block;	+
	width: 50px;		width: 50px;
	height: 50px;		height: 50px;
	background: url("../images/img-sprite.png") no-repeat 0px 0px;		background: url("../images/img-sprite.png") no-repeat 0px 0px;
	}		}
−	ul.social-icons li a.facebook {	+	ul.social-icons li a.facebook{
−	background-position: 0px 0px;	+	background-position: 0px 0px;
	}		}
−		+	ul.social-icons li a.facebook:hover{
−	ul.social-icons li a.facebook:hover {	+	background-position: 0px -50px;
−	background-position: 0px -50px;	+
	}		}
−		+	ul.social-icons li a.twitter{
−	ul.social-icons li a.twitter {	+	background-position: -50px 0px;
−	background-position: -50px 0px;	+
	}		}
−		+	ul.social-icons li a.twitter:hover{
−	ul.social-icons li a.twitter:hover {	+	background-position: -50px -50px;
−	background-position: -50px -50px;	+
	}		}
−		+	ul.social-icons li a.googleplus{
−	ul.social-icons li a.googleplus {	+	background-position: -100px 0px;
−	background-position: -100px 0px;	+
	}		}
−		+	ul.social-icons li a.googleplus:hover{
−	ul.social-icons li a.googleplus:hover {	+	/*--w3layouts--*/
−	/*--w3layouts--*/	+
	/*--agileits--*/		/*--agileits--*/
	background-position: -100px -50px;		background-position: -100px -50px;
	}		}
−		+	ul.social-icons li a.instagram{
−	ul.social-icons li a.instagram {	+	background-position: -150px 0px;
−	background-position: -150px 0px;	+
	}		}
−		+	ul.social-icons li a.instagram:hover{
−	ul.social-icons li a.instagram:hover {	+	background-position: -150px -50px;
−	background-position: -150px -50px;	+
	}		}
−		+	ul.social-icons li a.youtube{
−	ul.social-icons li a.youtube {	+	background-position: -200px 0px;
−	background-position: -200px 0px;	+
	}		}
−		+	ul.social-icons li a.youtube:hover{
−	ul.social-icons li a.youtube:hover {	+	background-position: -200px -50px;
−	background-position: -200px -50px;	+
	}		}
−
	/*-- //Header-Social-Icons --*/		/*-- //Header-Social-Icons --*/
Line 410:		Line 350:
	/*-- About --*/		/*-- About --*/
−	.about {	+	.about{
−	padding-bottom: 100px;	+	padding-bottom: 100px;
	}		}
−		+	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{
−	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3 {	+	font-size: 50px;
−	font-size: 50px;	+
	margin-bottom: 50px;		margin-bottom: 50px;
	color: #FFF;		color: #FFF;
	}		}
−		+	.about-grid1, .about-grid2, .about-grid3{
−	.about-grid1, .about-grid2, .about-grid3 {	+	width: 60%;
−	width: 60%;	+
	margin: 0 100px 0 auto;		margin: 0 100px 0 auto;
	background-color: #EEE;		background-color: #EEE;
	}		}
−		+	.about-grid2{
−	.about-grid2 {	+	margin: 50px 100px;
−	margin: 50px 100px;	+
	}		}
−		+	.about-grid{
−	.about-grid {	+	/*--w3layouts--*/
−	/*--w3layouts--*/	+
	/*--agileits--*/		/*--agileits--*/
	padding: 0;		padding: 0;
	}		}
−		+	.about h3{
−	.about h3 {	+	font-size: 30px;
−	font-size: 30px;	+
	margin: 25px 0;		margin: 25px 0;
	color: #0AC1D5;		color: #0AC1D5;
	}		}
−		+	.about p{
−	.about p {	+	padding: 0 30px;
−	padding: 0 30px;	+
	line-height: 27px;		line-height: 27px;
	color: #777;		color: #777;
	}		}
−
	/*-- //About --*/		/*-- //About --*/
Line 454:		Line 387:
	/*-- People --*/		/*-- People --*/
−	.people {	+	.people{
−	padding-bottom: 100px;	+	padding-bottom: 100px;
−		+
	}		}
	/*-- Team --*/		/*-- Team --*/
−	figure {	+	figure{
−	position: relative;	+	position: relative;
	float: left;		float: left;
	overflow: hidden;		overflow: hidden;
Line 467:		Line 399:
	text-align: center;		text-align: center;
	}		}
−		+	figure img{
−	figure img {	+	position: relative;
−	position: relative;	+
	display: block;		display: block;
	max-width: 100%;		max-width: 100%;
	opacity: 0.8;		opacity: 0.8;
	}		}
−		+	figure figcaption{
−	figure figcaption {	+	padding: 2em;
−	padding: 2em;	+
	color: #fff;		color: #fff;
	text-transform: uppercase;		text-transform: uppercase;
Line 485:		Line 415:
	backface-visibility: hidden;		backface-visibility: hidden;
	}		}
−		+	figure figcaption::before, figure figcaption::after{
−	figure figcaption::before, figure figcaption::after {	+	pointer-events: none;
−	pointer-events: none;	+
	}		}
−		+	figure figcaption, figure figcaption > a{
−	figure figcaption, figure figcaption > a {	+	position: absolute;
−	position: absolute;	+
	top: 0;		top: 0;
	left: 0;		left: 0;
Line 497:		Line 425:
	height: 100%;		height: 100%;
	}		}
−		+	figure figcaption > a{
−	figure figcaption > a {	+	z-index: 1000;
−	z-index: 1000;	+
	text-indent: 200%;		text-indent: 200%;
	white-space: nowrap;		white-space: nowrap;
Line 505:		Line 432:
	opacity: 0;		opacity: 0;
	}		}
−		+	figure h4{
−	figure h4 {	+	word-spacing: -0.15em;
−	word-spacing: -0.15em;	+
	font-size: 30px;		font-size: 30px;
	font-weight: 300;		font-weight: 300;
	}		}
−	figure h4 span {	+	figure h4 span{
−	margin-left: 5px;	+	margin-left: 5px;
	font-weight: 600;		font-weight: 600;
	}		}
−		+	figure h4, figure ul{
−	figure h4, figure ul {	+	margin: 0;
−	margin: 0;	+
	}		}
−		+	figure h4, figure ul{
−	figure h4, figure ul {	+	margin: 0;
−	margin: 0;	+
	font-weight: 400;		font-weight: 400;
	}		}
−		+	figure p{
−	figure p {	+	letter-spacing: 1px;
−	letter-spacing: 1px;	+
	font-size: 68.5%;		font-size: 68.5%;
	}		}
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	figure.effect-dexter {	+	figure.effect-dexter{
−	background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);	+	background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
−	background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);	+	background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);
	}		}
−		+	figure.effect-dexter img{
−	figure.effect-dexter img {	+	-webkit-transition: opacity 0.35s;
−	-webkit-transition: opacity 0.35s;	+
	transition: opacity 0.35s;		transition: opacity 0.35s;
	}		}
−		+	figure.effect-dexter:hover img{
−	figure.effect-dexter:hover img {	+	opacity: 0.4;
−	opacity: 0.4;	+
	}		}
−		+	figure.effect-dexter figcaption::after{
−	figure.effect-dexter figcaption::after {	+	position: absolute;
−	position: absolute;	+
	right: 30px;		right: 30px;
	bottom: 30px;		bottom: 30px;
Line 559:		Line 479:
	transform: translate3d(0,-100%,0);		transform: translate3d(0,-100%,0);
	}		}
−		+	figure.effect-dexter:hover figcaption::after{
−	figure.effect-dexter:hover figcaption::after {	+	-webkit-transform: translate3d(0,0,0);
−	-webkit-transform: translate3d(0,0,0);	+
	transform: translate3d(0,0,0);		transform: translate3d(0,0,0);
	}		}
−		+	figure.effect-dexter figcaption{
−	figure.effect-dexter figcaption {	+	padding: 5em;
−	padding: 5em;	+
	text-align: left;		text-align: left;
	}		}
−		+	figure.effect-dexter ul.social{
−	figure.effect-dexter ul.social {	+	position: absolute;
−	position: absolute;	+
	left: 180px;		left: 180px;
	right: 0;		right: 0;
Line 583:		Line 500:
	transform: translate3d(0,-100px,0);		transform: translate3d(0,-100px,0);
	}		}
−		+	figure.effect-dexter:hover{
−	figure.effect-dexter:hover {	+	opacity: 1;
−	opacity: 1;	+
	-webkit-transform: translate3d(0,0,0);		-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);		transform: translate3d(0,0,0);
	}		}
−		+	li.icon{
−	li.icon {	+	display: inline-block!important;
−	display: inline-block!important;	+
	visibility: visible!important;		visibility: visible!important;
	}		}
−		+	span.icon img{
−	span.icon img {	+	width: 10%!important;
−	width: 10%!important;	+
	display: inline-block!important;		display: inline-block!important;
	opacity: 0.9;		opacity: 0.9;
	}		}
−		+	span.icon img:hover{
−	span.icon img:hover {	+	opacity: 0.9;
−	opacity: 0.9;	+
	}		}
−		+	.social-two{
−	.social-two {	+	display: none;
−	display: none;	+
	}		}
−		+	figure.effect-dexter:hover .social-two{
−	figure.effect-dexter:hover .social-two {	+	display: block;
−	display: block;	+
	text-align: center;		text-align: center;
	margin-top: 100px;		margin-top: 100px;
	}		}
−
	.social-two span a{		.social-two span a{
−	display: inline-block;	+	display: inline-block;
	width: 50px;		width: 50px;
	height: 50px;		height: 50px;
	background: url("../images/img-sprite-1.png") no-repeat 0px 0px;		background: url("../images/img-sprite-1.png") no-repeat 0px 0px;
	}		}
−		+	.social-two span a.facebook:hover{
−	.social-two span a.facebook:hover {	+	background-position: 0px -50px;
−	background-position: 0px -50px;	+
	}		}
−		+	.social-two span a.twitter{
−	.social-two span a.twitter {	+	background: url("../images/img-sprite-1.png") no-repeat -50px 0px;
−	background: url("../images/img-sprite-1.png") no-repeat -50px 0px;	+
	}		}
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.social-two span a.twitter:hover {	+	.social-two span a.twitter:hover{
−	background-position: -50px -50px;	+	background-position: -50px -50px;
	}		}
−		+	.social-two span a.googleplus{
−	.social-two span a.googleplus {	+	background: url("../images/img-sprite-1.png") no-repeat -100px 0px;
−	background: url("../images/img-sprite-1.png") no-repeat -100px 0px;	+
	}		}
−		+	.social-two span a.googleplus:hover{
−	.social-two span a.googleplus:hover {	+	background-position: -100px -50px;
−	background-position: -100px -50px;	+
	}		}
−		+	.social-two span a.instagram{
−	.social-two span a.instagram {	+	background: url("../images/img-sprite-1.png") no-repeat -150px 0px;
−	background: url("../images/img-sprite-1.png") no-repeat -150px 0px;	+
	}		}
−		+	.social-two span a.instagram:hover{
−	.social-two span a.instagram:hover {	+	background-position: -150px -50px;
−	background-position: -150px -50px;	+
	}		}
−
	/*-- //Team --*/		/*-- //Team --*/
Line 657:		Line 560:
	/*-- Clients --*/		/*-- Clients --*/
−	.people h3 span {	+	.people h3 span{
−	margin-left: 10px;	+	margin-left: 10px;
	}		}
−		+	.client-slider-2 .slider{
−	.client-slider-2 .slider {	+	border: 5px solid #EEE;
−	border: 5px solid #EEE;	+
	padding: 26px 30px;		padding: 26px 30px;
	}		}
−		+	.client-slider-2 h4{
−	.client-slider-2 h4 {	+	font-size: 30px;
−	font-size: 30px;	+
	font-weight: 600;		font-weight: 600;
	color: #12FFB9;		color: #12FFB9;
	}		}
−		+	.client-slider-2 p{
−	.client-slider-2 p {	+	line-height: 25px;
−	line-height: 25px;	+
	color: #FFF;		color: #FFF;
	font-size: 14px;		font-size: 14px;
	margin: 30px 0;		margin: 30px 0;
	}		}
−
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.client {	+	.client{
−	float: right;	+	float: right;
	}		}
−		+	.client span{
−	.client span {	+	font-size: 16px;
−	font-size: 16px;	+
	font-weight: 600;		font-weight: 600;
	line-height: 25px;		line-height: 25px;
Line 692:		Line 590:
	color: #111;		color: #111;
	}		}
−
	/*-- //Clients --*/		/*-- //Clients --*/
Line 699:		Line 596:
	/*-- Services --*/		/*-- Services --*/
−	.tabs {	+	.tabs{
−	padding-bottom: 100px;	+	padding-bottom: 100px;
	}		}
−		+	.service-icons{
−	.service-icons {	+	background-color: rgba(0, 0, 0, 0.57);
−	background-color: rgba(0, 0, 0, 0.57);	+
	padding: 0;		padding: 0;
	}		}
−		+	.service-icons ul{
−	.service-icons ul {	+	list-style-type: none;
−	list-style-type: none;	+
	}		}
−		+	li.tab-list{
−	li.tab-list {	+	padding: 15px 0;
−	padding: 15px 0;	+
	}		}
−		+	li.tab-list-1{
−	li.tab-list-1 {	+	background-color: rgb(51, 51, 51);
−	background-color: rgb(51, 51, 51);	+
	}		}
−		+	.tab-list img{
−	.tab-list img {	+	width: 50px;
−	width: 50px;	+
	}		}
−		+	.service-info{
−	.service-info {	+	background-color: #FFF;
−	background-color: #FFF;	+
	height: 400px;		height: 400px;
	text-align: center;		text-align: center;
Line 731:		Line 622:
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.service-info img {	+	.service-info img{
−	width: 100px;	+	width: 100px;
	}		}
−		+	.service-info h4{
−	.service-info h4 {	+	font-size: 35px;
−	font-size: 35px;	+
	font-weight: bold;		font-weight: bold;
	color: #000;		color: #000;
	margin: 30px 0;		margin: 30px 0;
	}		}
−		+	.service-info p{
−	.service-info p {	+	line-height: 30px;
−	line-height: 30px;	+
	padding: 0 35px;		padding: 0 35px;
	}		}
−
	/*-- //Services --*/		/*-- //Services --*/
Line 753:		Line 641:
	/*-- Gallery --*/		/*-- Gallery --*/
−	.gallery {	+	.gallery{
−	padding-bottom: 100px;	+	padding-bottom: 100px;
	}		}
−		+	.gal-left{
−	.gal-left {	+	padding: 0;
−	padding: 0;	+
	}		}
−		+	.img-box, .info-box{
−	.img-box, .info-box {	+	display: block;
−	display: block;	+
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
Line 783:		Line 669:
	backface-visibility: hidden;		backface-visibility: hidden;
	}		}
−	.img-box img, .info-box img {	+	.img-box img, .info-box img{
−	display: block;	+	display: block;
	position: relative;		position: relative;
	max-width: 100%;		max-width: 100%;
Line 794:		Line 680:
	transition: all 0.4s ease-in-out;		transition: all 0.4s ease-in-out;
	}		}
−		+	.img-box{
−	.img-box {	+	position: relative;
−	position: relative;	+
	}		}
−		+	.info-box{
−	.info-box {	+	top: 0;
−	top: 0;	+
	left: 0;		left: 0;
	position: absolute;		position: absolute;
	}		}
−		+	.info-box .info-content{
−	.info-box .info-content {	+	display: block;
−	display: block;	+
	position: relative;		position: relative;
	padding: 0%;		padding: 0%;
Line 819:		Line 702:
	transform: translateX(-50%) translateY(-50%);		transform: translateX(-50%) translateY(-50%);
	}		}
−		+	.separator{
−	.separator {	+	display: block;
−	display: block;	+
	position: relative;		position: relative;
	height: 1px;		height: 1px;
Line 831:		Line 713:
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.content-grid-effect {	+	.content-grid-effect{
−	display: block;	+	display: block;
	position: relative;		position: relative;
	-webkit-transform: translate3d(0, 0, 0);		-webkit-transform: translate3d(0, 0, 0);
Line 846:		Line 728:
	overflow: hidden;		overflow: hidden;
	}		}
−		+	.content-grid-effect .info-content{
−	.content-grid-effect .info-content {	+	z-index: 2 !important;
−	z-index: 2 !important;	+
	filter: alpha(opacity=0);		filter: alpha(opacity=0);
	-wekbit-opacity: 0;		-wekbit-opacity: 0;
Line 859:		Line 740:
	transition: all 0.5s ease-in-out;		transition: all 0.5s ease-in-out;
	}		}
−		+	.content-grid-effect .img-box:after, .content-grid-effect .img-box:before, .content-grid-effect .info-box:after, .content-grid-effect .info-box:before{
−	.content-grid-effect .img-box:after, .content-grid-effect .img-box:before, .content-grid-effect .info-box:after, .content-grid-effect .info-box:before {	+	content: "";
−	content: "";	+
	display: block;		display: block;
	position: absolute;		position: absolute;
Line 876:		Line 756:
	opacity: 0;		opacity: 0;
	}		}
−		+	.content-grid-effect.horizontal .img-box:before{
−	.content-grid-effect.horizontal .img-box:before {	+	top: 0;
−	top: 0;	+
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
Line 890:		Line 769:
	transform: rotateX(90deg);		transform: rotateX(90deg);
	}		}
−		+	.content-grid-effect.horizontal .img-box:after{
−	.content-grid-effect.horizontal .img-box:after {	+	top: 25%;
−	top: 25%;	+
	left: 0;		left: 0;
	width: 100%;		width: 100%;
Line 902:		Line 780:
	transform: rotateX(90deg);		transform: rotateX(90deg);
	}		}
−		+	.content-grid-effect.horizontal .info-box:after{
−	.content-grid-effect.horizontal .info-box:after {	+	top: 50%;
−	top: 50%;	+
	left: 0;		left: 0;
	width: 100%;		width: 100%;
Line 914:		Line 791:
	transform: rotateX(90deg);		transform: rotateX(90deg);
	}		}
−		+	.content-grid-effect.horizontal .info-box:before{
−	.content-grid-effect.horizontal .info-box:before {	+	top: 75%;
−	top: 75%;	+
	left: 0;		left: 0;
	width: 100%;		width: 100%;
Line 926:		Line 802:
	transform: rotateX(90deg);		transform: rotateX(90deg);
	}		}
−		+	.content-grid-effect.vertical .img-box:before{
−	.content-grid-effect.vertical .img-box:before {	+	top: 0;
−	top: 0;	+
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
Line 940:		Line 815:
	transform: rotateY(90deg);		transform: rotateY(90deg);
	}		}
−		+	.content-grid-effect.vertical .img-box:after{
−	.content-grid-effect.vertical .img-box:after {	+	top: 0;
−	top: 0;	+
	left: 25%;		left: 25%;
	width: 25%;		width: 25%;
Line 952:		Line 826:
	transform: rotateY(90deg);		transform: rotateY(90deg);
	}		}
−		+	.content-grid-effect.vertical .info-box:after{
−	.content-grid-effect.vertical .info-box:after {	+	top: 0;
−	top: 0;	+
	left: 50%;		left: 50%;
	width: 25%;		width: 25%;
Line 964:		Line 837:
	transform: rotateY(90deg);		transform: rotateY(90deg);
	}		}
−		+	.content-grid-effect.vertical .info-box:before{
−	.content-grid-effect.vertical .info-box:before {	+	top: 0;
−	top: 0;	+
	left: 75%;		left: 75%;
	width: calc(25% + 1px);		width: calc(25% + 1px);
Line 976:		Line 848:
	transform: rotateY(90deg);		transform: rotateY(90deg);
	}		}
−		+	.content-grid-effect:hover .img-box:after, .content-grid-effect:hover .img-box:before, .content-grid-effect:hover .info-box:after, .content-grid-effect:hover .info-box:before{
−	.content-grid-effect:hover .img-box:after, .content-grid-effect:hover .img-box:before, .content-grid-effect:hover .info-box:after, .content-grid-effect:hover .info-box:before {	+	-webkit-transform: rotateX(0deg);
−	-webkit-transform: rotateX(0deg);	+
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
Line 990:		Line 861:
	opacity: 1;		opacity: 1;
	}		}
−		+	.content-grid-effect:hover .info-content{
−	.content-grid-effect:hover .info-content {	+	filter: alpha(opacity=100);
−	filter: alpha(opacity=100);	+
	-wekbit-opacity: 1;		-wekbit-opacity: 1;
	-moz-opacity: 1;		-moz-opacity: 1;
	opacity: 1;		opacity: 1;
	}		}
−		+	.slow-zoom .img-box{
−	.slow-zoom .img-box {	+	z-index: 0;
−	z-index: 0;	+
	-webkit-transform: scale(1);		-webkit-transform: scale(1);
	-moz-transform: scale(1);		-moz-transform: scale(1);
Line 1,011:		Line 880:
	transition: all 2.2s ease-in-out;		transition: all 2.2s ease-in-out;
	}		}
−		+	.slow-zoom:hover .img-box{
−	.slow-zoom:hover .img-box {	+	-webkit-transform: scale(1.5);
−	-webkit-transform: scale(1.5);	+
	-moz-transform: scale(1.5);		-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);		-ms-transform: scale(1.5);
Line 1,019:		Line 887:
	transform: scale(1.5);		transform: scale(1.5);
	}		}
−		+	.slow-zoom{
−	.slow-zoom {	+	display: block;
−	display: block;	+
	overflow: hidden;		overflow: hidden;
	position: relative;		position: relative;
Line 1,032:		Line 899:
	/*--agileits--*/		/*--agileits--*/
	}		}
−		+	.content-grid-effect{
−	.content-grid-effect {	+	box-shadow: 0px 0px 14px 0px #DCDCDC;
−	box-shadow: 0px 0px 14px 0px #DCDCDC;	+
	padding: 7px 7px;		padding: 7px 7px;
	}		}
−
	.info-content h4{		.info-content h4{
−	color:#fff;	+	color:#fff;
	text-decoration:none;		text-decoration:none;
	font-size:25px;		font-size:25px;
	}		}
−
	.info-content p{		.info-content p{
−	color:#fff;	+	color:#fff;
	text-decoration:none;		text-decoration:none;
	font-size:15px;		font-size:15px;
Line 1,052:		Line 916:
	margin:0 auto;		margin:0 auto;
	}		}
−
	/*-- //Gallery --*/		/*-- //Gallery --*/
Line 1,059:		Line 922:
	/*-- Contact-Us --*/		/*-- Contact-Us --*/
−	.contact-us {	+	.contact-us{
−	padding-bottom: 100px;	+	padding-bottom: 100px;
	color: #333;		color: #333;
	}		}
−		+	.contact-grid{
−	.contact-grid {	+	border: 3px solid #EEE;
−	border: 3px solid #EEE;	+
	padding: 30px;		padding: 30px;
	font-size: 13px;		font-size: 13px;
	}		}
−		+	.contact-us p{
−	.contact-us p {	+	line-height: 25px;
−	line-height: 25px;	+
	margin-bottom: 25px;		margin-bottom: 25px;
	}		}
−		+	.contact-us h4{
−	.contact-us h4 {	+	font-size: 25px;
−	font-size: 25px;	+
	text-align: left;		text-align: left;
	margin-bottom: 10px;		margin-bottom: 10px;
Line 1,083:		Line 943:
	color: #000;		color: #000;
	}		}
−		+	.address a{
−	.address a {	+	color: #000;
−	color: #000;	+
	}		}
−		+	.address a:hover{
−	.address a:hover {	+	color: #000;
−	color: #000;	+
	}		}
−		+	.contact-us .phone{
−	.contact-us .phone {	+	margin-top: 20px;
−	margin-top: 20px;	+
	}		}
−		+	.contact-us .phone p{
−	.contact-us .phone p {	+	line-height: 25px;
−	line-height: 25px;	+
	margin: 0;		margin: 0;
	}		}
−		+	.contact_form input[type='text']{
−	.contact_form input[type='text'] {	+	width: 100%;
−	width: 100%;	+
	border-radius: 0;		border-radius: 0;
	line-height: 22px;		line-height: 22px;
Line 1,117:		Line 972:
	background: none;		background: none;
	}		}
−		+	.contact_form textarea{
−	.contact_form textarea {	+	width: 100%;
−	width: 100%;	+
	border-radius: 0;		border-radius: 0;
	line-height: 22px;		line-height: 22px;
Line 1,136:		Line 990:
	background: none;		background: none;
	}		}
−		+	::-webkit-input-placeholder{
−	::-webkit-input-placeholder {	+	color: #333;
−	color: #333;	+
	}		}
−		+	::-moz-placeholder{
−	::-moz-placeholder {	+	color: #333;
−	color: #333;	+
	}		}
−		+	::-moz-placeholder{
−	::-moz-placeholder {	+	color: #333;
−	color: #333;	+
	}		}
−		+	:-ms-input-placeholder{
−	:-ms-input-placeholder {	+	color: #333;
−	color: #333;	+
	}		}
−		+	form.contact_form{
−	form.contact_form {	+	text-align: center;
−	text-align: center;	+
	}		}
−		+	input.text:active, input.text:focus{
−	input.text:active, input.text:focus {	+	background-color: rgba(0, 0, 0, 0.84);
−	background-color: rgba(0, 0, 0, 0.84);	+
	}		}
−		+	textarea:active, textarea:focus{
−	textarea:active, textarea:focus {	+	background-color: rgba(0, 0, 0, 0.84);
−	background-color: rgba(0, 0, 0, 0.84);	+
	}		}
−		+	.message{
−	.message {	+	margin-bottom: 15px;
−	margin-bottom: 15px;	+
	}		}
−		+	.more_btn{
−	.more_btn {	+	padding: 10px 30px;
−	padding: 10px 30px;	+
	border: 1px solid #EEE;		border: 1px solid #EEE;
	color: #FFF;		color: #FFF;
Line 1,184:		Line 1,029:
	-ms-transition: 0.5s all;		-ms-transition: 0.5s all;
	}		}
−		+	.more_btn:hover{
−	.more_btn:hover {	+	color: #FFF;
−	color: #FFF;	+
	background-color: #000000;		background-color: #000000;
	cursor: pointer;		cursor: pointer;
	}		}
−
	/*-- //Contact-Us --*/		/*-- //Contact-Us --*/
Line 1,197:		Line 1,040:
	/*-- Map --*/		/*-- Map --*/
−	.map iframe {	+	.map iframe{
−	width: 100%;	+	width: 100%;
	height: 400px;		height: 400px;
	border: 5px solid #FAFAFA;		border: 5px solid #FAFAFA;
Line 1,209:		Line 1,052:
	-ms-transition: 0.5s all;		-ms-transition: 0.5s all;
	}		}
−	.map iframe:hover {	+	.map iframe:hover{
−	opacity: 1;	+	opacity: 1;
	transition: 0.5s all;		transition: 0.5s all;
	-webkit-transition: 0.5s all;		-webkit-transition: 0.5s all;
Line 1,217:		Line 1,060:
	-ms-transition: 0.5s all;		-ms-transition: 0.5s all;
	}		}
−
	/*-- //Map --*/		/*-- //Map --*/
Line 1,224:		Line 1,066:
	.footer{		.footer{
−	padding: 50px 0;	+	padding: 50px 0;
	background: #333333;		background: #333333;
	color: #777;		color: #777;
Line 1,231:		Line 1,073:
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.address, .contact, .connect {	+	.address, .contact, .connect{
−	padding: 0;	+	padding: 0;
	}		}
−		+	.footer h5{
−	.footer h5 {	+	color: #EEE;
−	color: #EEE;	+
	font-size: 25px;		font-size: 25px;
	font-weight: 100;		font-weight: 100;
Line 1,242:		Line 1,083:
	margin-bottom: 25px;		margin-bottom: 25px;
	}		}
−		+	.address ul li{
−	.address ul li {	+	display: block;
−	display: block;	+
	line-height: 25px;		line-height: 25px;
	}		}
−		+	.footer .address a{
−	.footer .address a {	+	color: #999;
−	color: #999;	+
	}		}
−		+	.footer .address a:hover{
−	.footer .address a:hover {	+	color: #FFF;
−	color: #FFF;	+
	}		}
−		+	.phone p{
−	.phone p {	+	line-height: 25px;
−	line-height: 25px;	+
	}		}
−		+	.mail{
−	.mail {	+	margin-top: 40px;
−	margin-top: 40px;	+
	}		}
−		+	.mail input[type="text"]{
−	.mail input[type="text"] {	+	padding: 5px;
−	padding: 5px;	+
	border: none;		border: none;
	outline: none;		outline: none;
	color: #333;		color: #333;
	}		}
−		+	.mail input[type="submit"]{
−	.mail input[type="submit"] {	+	padding: 5px 13px;
−	padding: 5px 13px;	+
	border: none;		border: none;
	outline: none;		outline: none;
	color: #333;		color: #333;
	}		}
−		+	.mail input[type="submit"]:hover{
−	.mail input[type="submit"]:hover {	+	/*--w3layouts--*/
−	/*--w3layouts--*/	+
	/*--agileits--*/		/*--agileits--*/
	color: #FFF;		color: #FFF;
	background-color: #009688;		background-color: #009688;
	}		}
−		+	.connect{
−	.connect {	+	text-align: left;
−	text-align: left;	+
	padding-left: 50px;		padding-left: 50px;
	}		}
−		+	.connect-social ul li{
−	.connect-social ul li {	+	display: inline-block;
−	display: inline-block;	+
−		+
	}		}
	/*-- Footer-Social-Icons --*/		/*-- Footer-Social-Icons --*/
−	.connect-social ul li a {	+	.connect-social ul li a{
−	display: inline-block;	+	display: inline-block;
	width: 30px;		width: 30px;
	height: 30px;		height: 30px;
Line 1,304:		Line 1,134:
	opacity: 0.7;		opacity: 0.7;
	}		}
−		+	.connect-social ul li a.facebook{
−	.connect-social ul li a.facebook {	+	background-position: 0px -30px;
−	background-position: 0px -30px;	+
	}		}
−		+	.connect-social ul li a.twitter{
−	.connect-social ul li a.twitter {	+	background-position: -30px -30px;
−	background-position: -30px -30px;	+
	}		}
−		+	.connect-social ul li a.googleplus{
−	.connect-social ul li a.googleplus {	+	background-position: -60px -30px;
−	background-position: -60px -30px;	+
	}		}
−		+	.connect-social ul li a.linkedin{
−	.connect-social ul li a.linkedin {	+	background-position: -90px -30px;
−	background-position: -90px -30px;	+
	}		}
−		+	.connect-social ul li a.blogger{
−	.connect-social ul li a.blogger {	+	background-position: -120px -30px;
−	background-position: -120px -30px;	+
	}		}
−		+	.connect-social ul li a.tumblr{
−	.connect-social ul li a.tumblr {	+	background-position: -150px -30px;
−	background-position: -150px -30px;	+
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	}		}
−		+	.connect-social ul li a.rss{
−	.connect-social ul li a.rss {	+	background-position: -180px -30px;
−	background-position: -180px -30px;	+
	}		}
−		+	.connect-social ul li a.vimeo{
−	.connect-social ul li a.vimeo {	+	background-position: -240px -30px;
−	background-position: -240px -30px;	+
	}		}
−		+	.connect-social ul li a.deviantart{
−	.connect-social ul li a.deviantart {	+	background-position: -270px -30px;
−	background-position: -270px -30px;	+
	}		}
−		+	.connect-social ul li a:hover{
−	.connect-social ul li a:hover {	+	opacity: 1;
−	opacity: 1;	+
	}		}
−
	/*-- Footer-Social-Icons --*/		/*-- Footer-Social-Icons --*/
−	.footer-bottom {	+	.footer-bottom{
−	padding-top: 50px;	+	padding-top: 50px;
	}		}
−		+	.footer-nav{
−	.footer-nav {	+	float: left;
−	float: left;	+
	}		}
−		+	.footer-nav ul li{
−	.footer-nav ul li {	+	display: inline-block;
−	display: inline-block;	+
	padding: 0 25px;		padding: 0 25px;
	border-right: solid 1px #939090;		border-right: solid 1px #939090;
	border-right-style: dashed;		border-right-style: dashed;
	}		}
−		+	.footer-nav ul li a{
−	.footer-nav ul li a {	+	color: #D6D6D6;
−	color: #D6D6D6;	+
	}		}
	.footer-nav ul li a:hover{		.footer-nav ul li a:hover{
−	color: #12FFB9;	+	color: #12FFB9;
	}		}
−
	.footer-logo a{		.footer-logo a{
−	margin: 0;	+	margin: 0;
	color: #6E6E6E;		color: #6E6E6E;
	}		}
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.footer-nav ul li:nth-child(5) {	+	.footer-nav ul li:nth-child(5){
−	border-right: none;	+	border-right: none;
−		+
	}		}
	/*-- Copyright --*/		/*-- Copyright --*/
−	.copyright {	+	.copyright{
−	float: left;	+	float: left;
	margin-left: 160px;		margin-left: 160px;
	}		}
−		+	.copyright p{
−	.copyright p {	+	color: #C2C2C2;
−	color: #C2C2C2;	+
	}		}
−
	.copyright p a{		.copyright p a{
−	margin-left: 5px;	+	margin-left: 5px;
	color:#C2C2C2;		color:#C2C2C2;
	font-family: 'Fredericka the Great', cursive;		font-family: 'Fredericka the Great', cursive;
	}		}
−
	.copyright p a:hover{		.copyright p a:hover{
−	color: #12FFB9;	+	color: #12FFB9;
	}		}
−
	/*-- //Copyright --*/		/*-- //Copyright --*/
Line 1,411:		Line 1,221:
	/*-- Go-To-Top-Button --*/		/*-- Go-To-Top-Button --*/
−	#toTop {	+	#toTop{
−	display: none;	+	display: none;
	text-decoration: none;		text-decoration: none;
	position: fixed;		position: fixed;
Line 1,445:		Line 1,255:
−	@media screen and (max-width:1920px) {	+	@media screen and (max-width:1920px){
−	.slider-2 {	+	.slider-2{
	top: -13%;		top: -13%;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	width: 70%;		width: 70%;
−	}	+	}
−	.logo {	+	.logo{
	margin: 80px 0 120px;		margin: 80px 0 120px;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 150px;		padding: 0 150px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 50px 0;		margin: 50px 0;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 50px;		padding: 0 50px;
−	}	+	}
−	.client-slider-2 .slider {	+	.client-slider-2 .slider{
	padding: 25px;		padding: 25px;
−	}	+	}
−	img.tab-icon-2, img.tab-icon-4 {	+	img.tab-icon-2, img.tab-icon-4{
	margin-left: 125px;		margin-left: 125px;
−	}	+	}
−	img.tab-icon-3 {	+	img.tab-icon-3{
	margin-left: 250px;		margin-left: 250px;
−	}	+	}
−	.service-info {	+	.service-info{
	padding-top: 30px;		padding-top: 30px;
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	}	+	}
−	.contact-grid {	+	.contact-grid{
	padding: 31px;		padding: 31px;
−	}
	}		}
−	@media screen and (max-width:1680px) {	+	}
−	.slider-2 {	+	@media screen and (max-width:1680px){
		+	.slider-2{
	top: -15%;		top: -15%;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	width: 80%;		width: 80%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 130px;		padding: 0 130px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 35px 0;		margin: 35px 0;
−	}	+	}
−	.contact_form textarea {	+	.contact_form textarea{
	height: 140px;		height: 140px;
−	}
	}		}
−	@media screen and (max-width:1600px) {	+	}
−	.slider-2 {	+	@media screen and (max-width:1600px){
−	top: 10%;                                             /*          upleft picture            */	+	.slider-2{
−	}	+	top: 10%;
−	.hover-effect ul {	+	/*          upleft picture            */
		+	}
		+	.hover-effect ul{
	width: 85%;		width: 85%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 120px;		padding: 0 120px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 30px 0;		margin: 30px 0;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 40px;		padding: 0 40px;
−	}
	}		}
−	@media screen and (max-width:1440px) {	+	}
−	.header {	+	@media screen and (max-width:1440px){
		+	.header{
	padding: 100px 0;		padding: 100px 0;
−	}	+	}
−	.slider-1 {	+	.slider-1{
	width: 90%;		width: 90%;
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	}	+	}
−	.slider-2 {	+	.slider-2{
	top: -19%;		top: -19%;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	width: 90%;		width: 90%;
−	}	+	}
−	.hover-effect a {	+	.hover-effect a{
	padding: 5px 18px;		padding: 5px 18px;
−	}	+	}
−	.logo {	+	.logo{
	margin: 50px 0 100px;		margin: 50px 0 100px;
−	}	+	}
−	.logo a {	+	.logo a{
	font-size: 55px;		font-size: 55px;
−	padding: 15px 0 35px;	+	padding: 15px 0 35px;
−	}	+	}
−	.logo img {	+	.logo img{
	top: 70px;		top: 70px;
−	left: 45%;	+	left: 45%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 80px;		padding: 0 80px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 20px 0;		margin: 20px 0;
−	font-size: 30px;	+	font-size: 30px;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 15px;		padding: 0 15px;
−	line-height: 27px;	+	line-height: 27px;
−	}	+
	}		}
−	@media screen and (max-width:1366px) {	+	}
−	.slider-2 {	+	@media screen and (max-width:1366px){
		+	.slider-2{
	top: -20%;		top: -20%;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	width: 96%;		width: 96%;
−	}	+	}
−	.logo a {	+	.logo a{
	font-size: 50px;		font-size: 50px;
−	padding: 15px 0 30px;	+	padding: 15px 0 30px;
−	}	+	}
−	.logo img {	+	.logo img{
	top: 60px;		top: 60px;
−	}	+	}
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.header-info p {	+	.header-info p{
	font-size: 14px;		font-size: 14px;
−	}	+	}
−	.social {	+	.social{
	margin-top: 25px;		margin-top: 25px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 15px 0;		margin: 15px 0;
−	}	+	}
−	p {	+	p{
	font-size: 13px;		font-size: 13px;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 19px;		padding: 0 19px;
−	line-height: 26px;	+	line-height: 26px;
−	}	+	}
−	.client-slider-2 .slider {	+	.client-slider-2 .slider{
	padding: 25px;		padding: 25px;
−	}	+	}
−	.contact-grid {	+	.contact-grid{
	padding: 26px;		padding: 26px;
−	}	+	}
−	.contact_form textarea {	+	.contact_form textarea{
	height: 130px;		height: 130px;
−	}
	}		}
−	@media screen and (max-width:1280px) {	+	}
−	.slider-1 {	+	@media screen and (max-width:1280px){
		+	.slider-1{
	width: 95%;		width: 95%;
−	left: 10%;	+	left: 10%;
−	}	+	}
−	.slider-2 {	+	.slider-2{
	top: -21%;		top: -21%;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	width: 100%;		width: 100%;
−	}	+	}
−	.hover-effect a {	+	.hover-effect a{
	font-size: 13px;		font-size: 13px;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 70px;		padding: 0 70px;
−	}	+	}
−	.social {	+	.social{
	margin-top: 25px;		margin-top: 25px;
−	}	+	}
−	.about-grid1, .about-grid2, .about-grid3 {	+	.about-grid1, .about-grid2, .about-grid3{
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	width: 70%;		width: 70%;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 25px 0;		margin: 25px 0;
−	}	+	}
−	.client-slider-2 p {	+	.client-slider-2 p{
	font-size: 13px;		font-size: 13px;
−	}
	}		}
−	@media screen and (max-width:1024px) {	+	}
−	.slider-2 {	+	@media screen and (max-width:1024px){
		+	.slider-2{
	top: -30%;		top: -30%;
−	}	+	}
−	.slider-1 {	+	.slider-1{
	width: 85%;		width: 85%;
−	}	+	}
−	.header-right {	+	.header-right{
	padding-top: 0;		padding-top: 0;
−	left: -30px;	+	left: -30px;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	width: 131%;		width: 131%;
−	margin-left: -40px;	+	margin-left: -40px;
−	}	+	}
−	.logo {	+	.logo{
	margin: 35px 0 70px;		margin: 35px 0 70px;
−	}	+	}
−	.logo a {	+	.logo a{
	font-size: 50px;		font-size: 50px;
−	padding: 5px 0 25px;	+	padding: 5px 0 25px;
−	}	+	}
−	.logo img {	+	.logo img{
	top: 53px;		top: 53px;
−	left: 43%;	+	left: 43%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0;		padding: 0;
−	font-size: 13px;	+	font-size: 13px;
−	}	+	}
−	.social {	+	.social{
	margin-top: 20px;		margin-top: 20px;
−	}	+	}
−	.about-grid1, .about-grid2, .about-grid3 {	+	.about-grid1, .about-grid2, .about-grid3{
	width: 90%;		width: 90%;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 4em 1em;		padding: 4em 1em;
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	}	+	}
−	.social-two {	+	.social-two{
	position: absolute;		position: absolute;
−	left: 25%;	+	left: 25%;
−	bottom: 55px;	+	bottom: 55px;
−	}	+	}
−	img.tab-icon-2, img.tab-icon-4 {	+	img.tab-icon-2, img.tab-icon-4{
	margin-left: 100px;		margin-left: 100px;
−	}	+	}
−	img.tab-icon-3 {	+	img.tab-icon-3{
	margin-left: 200px;		margin-left: 200px;
−	}	+	}
−	.service-info {	+	.service-info{
	padding-top: 10px;		padding-top: 10px;
−	}	+	}
−	.map iframe {	+	.map iframe{
	height: 300px;		height: 300px;
−	}	+	}
−	.footer .address, .footer .contact {	+	.footer .address, .footer .contact{
	width: 50%;		width: 50%;
−	float: left;	+	float: left;
−	}	+	}
−	.connect {	+	.connect{
	width: 100%;		width: 100%;
−	float: right;	+	float: right;
−	margin-top: 30px;	+	margin-top: 30px;
−	text-align: left;	+	text-align: left;
−	border-top: 1px solid #EEE;	+	border-top: 1px solid #EEE;
−	border-bottom: 1px solid #EEE;	+	border-bottom: 1px solid #EEE;
−	padding: 30px 0;	+	padding: 30px 0;
−	}	+	}
−	.footer h5 {	+	.footer h5{
	margin-bottom: 25px;		margin-bottom: 25px;
−	}	+	}
−	.connect h5 {	+	.connect h5{
	margin-left: 5px;		margin-left: 5px;
−	}	+	}
−	.copyright {	+	.copyright{
	margin-left: 70px;		margin-left: 70px;
−	}
	}		}
−	@media screen and (max-width:991px) {	+	}
−	.header {	+	@media screen and (max-width:991px){
		+	.header{
	padding: 50px 0 100px;		padding: 50px 0 100px;
−	}	+	}
−	.slider-1 {	+	.slider-1{
	width: 85%;		width: 85%;
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	left: 15%;		left: 15%;
−	top: 0;	+	top: 0;
−	}	+	}
−	.slider-2 {	+	.slider-2{
	top: -14%;		top: -14%;
−	left: 0;	+	left: 0;
−	width: 25%;	+	width: 25%;
−	}	+	}
−	.header-left {	+	.header-left{
	float: right;		float: right;
−	}	+	}
−	.header-right {	+	.header-right{
	float: left;		float: left;
−	margin-bottom: 75px;	+	margin-bottom: 75px;
−	margin-left: 0;	+	margin-left: 0;
−	left: 0;	+	left: 0;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	width: 80%;		width: 80%;
−	margin: 0 auto;	+	margin: 0 auto;
−	}	+	}
−	.hover-effect li {	+	.hover-effect li{
	margin: 0 10px;		margin: 0 10px;
−	}	+	}
−	.logo {	+	.logo{
	margin: 50px 0 80px;		margin: 50px 0 80px;
−	}	+	}
−	.logo a {	+	.logo a{
	font-size: 55px;		font-size: 55px;
−	padding: 5px 0 30px;	+	padding: 5px 0 30px;
−	}	+	}
−	.logo img {	+	.logo img{
	top: 65px;		top: 65px;
−	left: 47%;	+	left: 47%;
−	background-color: #09B3DB;	+	background-color: #09B3DB;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 150px;		padding: 0 150px;
−	font-size: 15px;	+	font-size: 15px;
−	}	+	}
−	.social {	+	.social{
	margin-top: 30px;		margin-top: 30px;
−	}	+	}
−	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3 {	+	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{
	font-size: 45px;		font-size: 45px;
−	margin-bottom: 40px;	+	margin-bottom: 40px;
−	}	+	}
−	.about-grid1, .about-grid2, .about-grid3 {	+	.about-grid1, .about-grid2, .about-grid3{
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	margin: 0 80px 0 auto;		margin: 0 80px 0 auto;
−	}	+	}
−	.about-grid2 {	+	.about-grid2{
	margin: 50px 80px;		margin: 50px 80px;
−	}	+	}
−	.people .container {	+	.people .container{
	width: 100%;		width: 100%;
−	}	+	}
−	.client-slider-1, .client-slider-2 {	+	.client-slider-1, .client-slider-2{
	width: 50%;		width: 50%;
−	float: left;	+	float: left;
−	padding: 5px;	+	padding: 5px;
−	}	+	}
−	.client-slider-2 .slider {	+	.client-slider-2 .slider{
	padding: 14px 10px;		padding: 14px 10px;
−	}	+	}
−	.client-slider-2 p {	+	.client-slider-2 p{
	margin: 20px 0;		margin: 20px 0;
−	}	+	}
−	.client span {	+	.client span{
	font-size: 15px;		font-size: 15px;
−	font-weight: 600;	+	font-weight: 600;
−	line-height: 20px;	+	line-height: 20px;
−	}	+	}
−	.tabs .container {	+	.tabs .container{
	width: 100%;		width: 100%;
−	}	+	}
−	.service-info {	+	.service-info{
	padding-top: 25px;		padding-top: 25px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	margin: 25px 0;		margin: 25px 0;
−	}	+	}
−	.contact-us .container {	+	.contact-us .container{
	width: 100%;		width: 100%;
−	}	+	}
−	.footer .container {	+	.footer .container{
	width: 100%;		width: 100%;
−	}	+	}
−	#toTop {	+	#toTop{
	z-index: 99999;		z-index: 99999;
−	}
	}		}
−	@media screen and (max-width:966px) {	+	}
−	.slider-2 {	+	@media screen and (max-width:966px){
		+	.slider-2{
	top: -15%;		top: -15%;
−	}	+	}
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.about h3 {	+	.about h3{
	margin: 20px 0;		margin: 20px 0;
−	}	+	}
−	.client-slider-2 h4 {	+	.client-slider-2 h4{
	font-size: 27px;		font-size: 27px;
−	}	+	}
−	.client-slider-2 p {	+	.client-slider-2 p{
	font-size: 12px;		font-size: 12px;
−	margin: 18px 0;	+	margin: 18px 0;
−	}	+	}
−	img.tab-icon-2, img.tab-icon-4 {	+	img.tab-icon-2, img.tab-icon-4{
	margin-left: 90px;		margin-left: 90px;
−	}	+	}
−	img.tab-icon-3 {	+	img.tab-icon-3{
	margin-left: 180px;		margin-left: 180px;
−	}	+	}
−	.service-info {	+	.service-info{
	padding-top: 20px;		padding-top: 20px;
−	}
	}		}
−	@media screen and (max-width:900px) {	+	}
−	.header-info p {	+	@media screen and (max-width:900px){
		+	.header-info p{
	padding: 0 140px;		padding: 0 140px;
−	}	+	}
−	.about-grid1, .about-grid2, .about-grid3 {	+	.about-grid1, .about-grid2, .about-grid3{
	margin: 0 30px 0 auto;		margin: 0 30px 0 auto;
−	width: 95%;	+	width: 95%;
−	}	+	}
−	.about-grid2 {	+	.about-grid2{
	margin: 50px 30px;		margin: 50px 30px;
−	}	+	}
−	.gal-left {	+	.gal-left{
	width: 25%;		width: 25%;
−	float: left;	+	float: left;
−	}	+	}
−	img.tab-icon-2, img.tab-icon-4 {	+	img.tab-icon-2, img.tab-icon-4{
	margin-left: 85px;		margin-left: 85px;
−	}	+	}
−	img.tab-icon-3 {	+	img.tab-icon-3{
	margin-left: 170px;		margin-left: 170px;
−	}	+	}
−	.service-info p {	+	.service-info p{
	padding: 0 15px;		padding: 0 15px;
−	}	+	}
−	.contact_form textarea {	+	.contact_form textarea{
	height: 155px;		height: 155px;
−	}	+	}
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.copyright {	+	.copyright{
	margin-left: 25px;		margin-left: 25px;
−	}
	}		}
−	@media screen and (max-width:853px) {	+	}
−	.header-info p {	+	@media screen and (max-width:853px){
		+	.header-info p{
	padding: 0 120px;		padding: 0 120px;
−	}	+	}
−	.about h3 {	+	.about h3{
	font-size: 25px;		font-size: 25px;
−	margin: 15px 0;	+	margin: 15px 0;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 15px;		padding: 0 15px;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 3.7em 1em;		padding: 3.7em 1em;
−	}	+	}
−	figure h4 {	+	figure h4{
	font-size: 28px;		font-size: 28px;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 23%;		left: 23%;
−	bottom: 47px;	+	bottom: 47px;
−	}	+	}
−	img.tab-icon-2, img.tab-icon-4 {	+	img.tab-icon-2, img.tab-icon-4{
	margin-left: 75px;		margin-left: 75px;
−	}	+	}
−	img.tab-icon-3 {	+	img.tab-icon-3{
	margin-left: 150px;		margin-left: 150px;
−	}	+	}
−	.service-info p {	+	.service-info p{
	padding: 0;		padding: 0;
−	}	+	}
−	.footer .address, .footer .contact {	+	.footer .address, .footer .contact{
	text-align: center;		text-align: center;
−	}	+	}
−	.footer h5 {	+	.footer h5{
	text-align: center;		text-align: center;
−	}	+	}
−	.connect {	+	.connect{
	text-align: center;		text-align: center;
−	}	+	}
−	.footer-nav {	+	.footer-nav{
	width: 100%;		width: 100%;
−	text-align: center;	+	text-align: center;
−	margin-bottom: 40px;	+	margin-bottom: 40px;
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	}	+	}
−	.copyright {	+	.copyright{
	width: 100%;		width: 100%;
−	margin: 0;	+	margin: 0;
−	text-align: center;	+	text-align: center;
−	}	+
	}		}
−	@media screen and (max-width:800px) {	+	}
−	.logo img {	+	@media screen and (max-width:800px){
		+	.logo img{
	left: 46%;		left: 46%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 90px;		padding: 0 90px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 10px 0;		margin: 10px 0;
−	}	+	}
−	.about p {	+	.about p{
	line-height: 22px;		line-height: 22px;
−	}	+	}
−	figure.effect-dexter figcaption::after {	+	figure.effect-dexter figcaption::after{
	right: 15px;		right: 15px;
−	bottom: 15px;	+	bottom: 15px;
−	left: 15px;	+	left: 15px;
−	height: calc(50% - 25px);	+	height: calc(50% - 25px);
−	}	+	}
−	.client span {	+	.client span{
	font-size: 14px;		font-size: 14px;
−	}	+	}
−	.tab-list img {	+	.tab-list img{
	width: 45px;		width: 45px;
−	}	+	}
−	img.tab-icon-2, img.tab-icon-4 {	+	img.tab-icon-2, img.tab-icon-4{
	margin-left: 70px;		margin-left: 70px;
−	}	+	}
−	img.tab-icon-3 {	+	img.tab-icon-3{
	margin-left: 140px;		margin-left: 140px;
−	}	+	}
−	.service-info img {	+	.service-info img{
	width: 80px;		width: 80px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	font-size: 30px;		font-size: 30px;
−	}
	}		}
−	@media screen and (max-width:768px) {	+	}
−	/*--w3layouts--*/	+	@media screen and (max-width:768px){
		+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.hover-effect ul {	+	.hover-effect ul{
	width: 85%;		width: 85%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 75px;		padding: 0 75px;
−	}	+	}
−	.about p {	+	.about p{
	font-size: 12px;		font-size: 12px;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 20%;		left: 20%;
−	bottom: 28px;	+	bottom: 28px;
−	}	+	}
−	h2.resp-accordion img {	+	h2.resp-accordion img{
	width: 50px;		width: 50px;
−	}	+	}
−	.service-info {	+	.service-info{
	padding: 0;		padding: 0;
−	height: 100%;	+	height: 100%;
−	padding-top: 20px;	+	padding-top: 20px;
−	}	+	}
−	img.tab-icon-2, img.tab-icon-4 {	+	img.tab-icon-2, img.tab-icon-4{
	margin-left: 0;		margin-left: 0;
−	}	+	}
−	img.tab-icon-3 {	+	img.tab-icon-3{
	margin-left: 0;		margin-left: 0;
−	}
	}		}
−	@media screen and (max-width:767px) {	+	}
−	.header {	+	@media screen and (max-width:767px){
		+	.header{
	padding: 20px 0 100px;		padding: 20px 0 100px;
−	}	+	}
−	.navbar-default .navbar-toggle {	+	.navbar-default .navbar-toggle{
	border-color: #FFF;		border-color: #FFF;
−	}	+	}
−	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {	+	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
	background-color: #000;		background-color: #000;
−	}	+	}
−	.navbar-default .navbar-toggle .icon-bar {	+	.navbar-default .navbar-toggle .icon-bar{
	background-color: #FFF;		background-color: #FFF;
−	}	+	}
−	.navbar-default .navbar-collapse, .navbar-default .navbar-form {	+	.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	border: none;		border: none;
−	box-shadow: none;	+	box-shadow: none;
−	margin-bottom: 50px;	+	margin-bottom: 50px;
−	}	+	}
−	.hover-effect ul {	+	.hover-effect ul{
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	width: 100%;		width: 100%;
−	background-color: #000;	+	background-color: #000;
−	}	+	}
−	.hover-effect li {	+	.hover-effect li{
	display: block;		display: block;
−	width: 20%;	+	width: 20%;
−	margin: 10px auto;	+	margin: 10px auto;
−	}	+	}
−	.logo {	+	.logo{
	margin: 0 0 80px;		margin: 0 0 80px;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 50px;		padding: 0 50px;
−	}	+	}
−	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3 {	+	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{
	font-size: 40px;		font-size: 40px;
−	}	+	}
−	.about-grid {	+	.about-grid{
	width: 50%;		width: 50%;
−	float: left;	+	float: left;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 10px;		padding: 0 10px;
−	}	+	}
−	.people h3 span {	+	.people h3 span{
	margin-left: 0;		margin-left: 0;
−	}	+	}
−	.service-icons {	+	.service-icons{
	width: 30%;		width: 30%;
−	float: left;	+	float: left;
−	}	+	}
−	.gallery {	+	.gallery{
	padding-bottom: 50px;		padding-bottom: 50px;
−	}	+	}
−	.gallery .col-12 {	+	.gallery .col-12{
	width: 33%;		width: 33%;
−	}	+	}
−	.contact-us-grid {	+	.contact-us-grid{
	width: 50%;		width: 50%;
−	float: left;	+	float: left;
−	}	+	}
−	.contact_form textarea {	+	.contact_form textarea{
	height: 180px;		height: 180px;
−	}
	}		}
−	@media screen and (max-width:667px) {	+	}
−	.header {	+	@media screen and (max-width:667px){
		+	.header{
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	padding: 20px 0 50px;		padding: 20px 0 50px;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0 25px;		padding: 0 25px;
−	}	+	}
−	.about {	+	.about{
	padding-bottom: 75px;		padding-bottom: 75px;
−	}	+	}
−	.about-grid1, .about-grid2, .about-grid3 {	+	.about-grid1, .about-grid2, .about-grid3{
	background-color: transparent;		background-color: transparent;
−	}	+	}
−	.about-info {	+	.about-info{
	background-color: #EEE;		background-color: #EEE;
−	}	+	}
−	.people {	+	.people{
	padding-bottom: 50px;		padding-bottom: 50px;
−	}	+	}
−	.client-slider-1, .client-slider-2 {	+	.client-slider-1, .client-slider-2{
	width: 75%;		width: 75%;
−	float: left;	+	float: left;
−	padding: 0;	+	padding: 0;
−	margin-left: 12%;	+	margin-left: 12%;
−	}	+	}
−	.client-slider-1 {	+	.client-slider-1{
	margin-bottom: 50px;		margin-bottom: 50px;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 5em 1em;		padding: 5em 1em;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 28%;		left: 28%;
−	bottom: 45px;	+	bottom: 45px;
−	}	+	}
−	.client-slider-2 p {	+	.client-slider-2 p{
	font-size: 13px;		font-size: 13px;
−	}	+	}
−	.service-info img {	+	.service-info img{
	width: 75px;		width: 75px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	margin: 15px 0;		margin: 15px 0;
−	}	+	}
−	.service-info p {	+	.service-info p{
	line-height: 29px;		line-height: 29px;
−	}	+	}
−	.tabs {	+	.tabs{
	padding-bottom: 75px;		padding-bottom: 75px;
−	}	+	}
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.contact-us {	+	.contact-us{
	padding-bottom: 50px;		padding-bottom: 50px;
−	}
	}		}
−	@media screen and (max-width:640px) {	+	}
−	.navbar-toggle {	+	@media screen and (max-width:640px){
		+	.navbar-toggle{
	float: none;		float: none;
−	margin-right: 0;	+	margin-right: 0;
−	}	+	}
−	.logo {	+	.logo{
	margin: 30px 0 80px;		margin: 30px 0 80px;
−	}	+	}
−	.logo img {	+	.logo img{
	left: 45%;		left: 45%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	padding: 0;		padding: 0;
−	}	+	}
−	.about-grid1, .about-grid2, .about-grid3 {	+	.about-grid1, .about-grid2, .about-grid3{
	width: 95%;		width: 95%;
−	margin: 0 auto;	+	margin: 0 auto;
−	}	+	}
−	.about-grid {	+	.about-grid{
	width: 100%;		width: 100%;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 20px 0;		margin: 20px 0;
−	font-size: 30px;	+	font-size: 30px;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 15px;		padding: 0 15px;
−	font-size: 13px;	+	font-size: 13px;
−	line-height: 27px;	+	line-height: 27px;
−	margin-bottom: 20px;	+	margin-bottom: 20px;
−	}	+	}
−	.about-grid2 {	+	.about-grid2{
	margin: 30px auto;		margin: 30px auto;
−	}	+	}
−	.client-slider-1, .client-slider-2 {	+	.client-slider-1, .client-slider-2{
	width: 100%;		width: 100%;
−	margin-left: 0;	+	margin-left: 0;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 6em 1em;		padding: 6em 1em;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 32%;		left: 32%;
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	bottom: 65px;		bottom: 65px;
−	}	+	}
−	.contact-us-grid {	+	.contact-us-grid{
	width: 100%;		width: 100%;
−	}	+	}
−	.contact-grid2 {	+	.contact-grid2{
	padding: 0;		padding: 0;
−	}	+	}
−	.contact-us .address, .contact-us .contact {	+	.contact-us .address, .contact-us .contact{
	width: 100%;		width: 100%;
−	float: left;	+	float: left;
−	}	+	}
−	.contact-grid {	+	.contact-grid{
	width: 100%;		width: 100%;
−	margin: 0 0 30px 0;	+	margin: 0 0 30px 0;
−	}	+	}
−	.contact_form input[type='text'] {	+	.contact_form input[type='text']{
	width: 100%;		width: 100%;
−	line-height: 10px;	+	line-height: 10px;
−	font-size: 13px;	+	font-size: 13px;
−	padding: 5px 17px;	+	padding: 5px 17px;
−	height: 40px;	+	height: 40px;
−	margin: 0 0 10px;	+	margin: 0 0 10px;
−	background-color: rgba(0, 0, 0, 0.51);	+	background-color: rgba(0, 0, 0, 0.51);
−	color: #FFF;	+	color: #FFF;
−	}	+	}
−	.contact_form textarea {	+	.contact_form textarea{
	height: 150px;		height: 150px;
−	background-color: rgba(0, 0, 0, 0.51);	+	background-color: rgba(0, 0, 0, 0.51);
−	font-size: 13px;	+
−	padding: 7px 17px;	+
−	}	+
−	input.more_btn {	+
	font-size: 13px;		font-size: 13px;
−	background-color: rgba(0, 0, 0, 0.51);	+	padding: 7px 17px;
−	}	+	}
−	.map iframe {	+	input.more_btn{
		+	font-size: 13px;
		+	background-color: rgba(0, 0, 0, 0.51);
		+	}
		+	.map iframe{
	height: 250px;		height: 250px;
−	}
	}		}
−	@media screen and (max-width:603px) {	+	}
−	.service-info p {	+	@media screen and (max-width:603px){
		+	.service-info p{
	line-height: 26px;		line-height: 26px;
−	}
	}		}
−	@media screen and (max-width:568px) {	+	}
−	/*--w3layouts--*/	+	@media screen and (max-width:568px){
		+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.logo a {	+	.logo a{
	font-size: 45px;		font-size: 45px;
−	padding: 5px 0 20px;	+	padding: 5px 0 20px;
−	}	+	}
−	.logo img {	+	.logo img{
	width: 50px;		width: 50px;
−	top: 50px;	+	top: 50px;
−	left: 46%;	+	left: 46%;
−	}	+	}
−	.header-info p {	+	.header-info p{
	font-size: 14px;		font-size: 14px;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 5em 1em;		padding: 5em 1em;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 30%;		left: 30%;
−	bottom: 55px;	+	bottom: 55px;
−	}	+	}
−	.service-icons {	+	.service-icons{
	width: 20%;		width: 20%;
−	}	+	}
−	.map iframe {	+	.map iframe{
	height: 200px;		height: 200px;
−	}	+	}
−	.footer h5 {	+	.footer h5{
	margin-bottom: 15px;		margin-bottom: 15px;
−	font-size: 22px;	+	font-size: 22px;
−	}	+	}
−	.address ul li {	+	.address ul li{
	line-height: 20px;		line-height: 20px;
−	}	+	}
−	.mail {	+	.mail{
	margin-top: 15px;		margin-top: 15px;
−	}	+	}
−	.connect {	+	.connect{
	margin-top: 20px;		margin-top: 20px;
−	}	+	}
−	.footer-bottom {	+	.footer-bottom{
	padding-top: 30px;		padding-top: 30px;
−	}	+	}
−	.footer-nav {	+	.footer-nav{
	margin-bottom: 30px;		margin-bottom: 30px;
−	}	+	}
−	::-webkit-input-placeholder {	+	::-webkit-input-placeholder{
	color: #EEE;		color: #EEE;
−	}	+	}
−	::-moz-placeholder {	+	::-moz-placeholder{
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	color: #EEE;		color: #EEE;
−	}	+	}
−		+	::-moz-placeholder{
−	::-moz-placeholder {	+
	color: #EEE;		color: #EEE;
−	}	+	}
−		+	:-ms-input-placeholder{
−	:-ms-input-placeholder {	+
	color: #EEE;		color: #EEE;
−	}
	}		}
−	@media screen and (max-width:533px) {	+	}
−	.social-two {	+	@media screen and (max-width:533px){
		+	.social-two{
	left: 28%;		left: 28%;
−	bottom: 45px;	+	bottom: 45px;
−	}	+	}
−	.service-info p {	+	.service-info p{
	line-height: 27px;		line-height: 27px;
−	}	+	}
−	.footer .address {	+	.footer .address{
	width: 40%;		width: 40%;
−	}	+	}
−	.footer .contact {	+	.footer .contact{
	width: 60%;		width: 60%;
−	}	+	}
−	.footer-nav ul li {	+	.footer-nav ul li{
	padding: 0 20px;		padding: 0 20px;
−	}
	}		}
−	@media screen and (max-width:480px) {	+	}
−	.logo img {	+	@media screen and (max-width:480px){
		+	.logo img{
	left: 45%;		left: 45%;
−	}	+	}
−	.about {	+	.about{
	padding-bottom: 50px;		padding-bottom: 50px;
−	}	+	}
−	.tabs {	+	.tabs{
	padding-bottom: 50px;		padding-bottom: 50px;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 26%;		left: 26%;
−	bottom: 40px;	+	bottom: 40px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	font-size: 27px;		font-size: 27px;
−	}	+	}
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.service-info p {	+	.service-info p{
	line-height: 25px;		line-height: 25px;
−	}	+	}
−	.gal-left {	+	.gal-left{
	width: 48%;		width: 48%;
−	margin: 1%;	+	margin: 1%;
−	}	+	}
−	.footer {	+	.footer{
	padding: 30px 0;		padding: 30px 0;
−	}
	}		}
−	@media screen and (max-width:414px) {	+	}
−	.logo img {	+	@media screen and (max-width:414px){
		+	.logo img{
	left: 44%;		left: 44%;
−	}	+	}
−	.hover-effect li {	+	.hover-effect li{
	width: 30%;		width: 30%;
−	}	+	}
−	.slider-2 {	+	.slider-2{
	top: -25%;		top: -25%;
−	width: 30%;	+	width: 30%;
−	}	+	}
−	.about-grid1, .about-grid2, .about-grid3 {	+	.about-grid1, .about-grid2, .about-grid3{
	width: 95%;		width: 95%;
−	}	+	}
−	.client-slider-1, .client-slider-2 {	+	.client-slider-1, .client-slider-2{
	width: 100%;		width: 100%;
−	margin-left: 0;	+	margin-left: 0;
−	}	+	}
−	.service-icons {	+	.service-icons{
	width: 100%;		width: 100%;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 4em 1em;		padding: 4em 1em;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 21%;		left: 21%;
−	bottom: 30px;	+	bottom: 30px;
−	}	+	}
−	li.tab-list {	+	li.tab-list{
	display: inline-block;		display: inline-block;
−	padding: 12px;	+	padding: 12px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	font-size: 27px;		font-size: 27px;
−	}	+	}
−	.service-info p {	+	.service-info p{
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	line-height: 27px;		line-height: 27px;
−	padding: 0 5px;	+	padding: 0 5px;
−	margin-bottom: 20px;	+	margin-bottom: 20px;
−	}	+	}
−	.contact-us {	+	.contact-us{
	padding-bottom: 30px;		padding-bottom: 30px;
−	}	+	}
−	.contact-grid, .contact-us-grid {	+	.contact-grid, .contact-us-grid{
	width: 100%;		width: 100%;
−	margin: 0 0 30px 0;	+	margin: 0 0 30px 0;
−	}	+	}
−	.contact-us .address {	+	.contact-us .address{
	width: 60%;		width: 60%;
−	}	+	}
−	.mail input[type="submit"] {	+	.mail input[type="submit"]{
	margin-top: 10px;		margin-top: 10px;
−	}	+	}
−	.footer .address, .footer .contact {	+	.footer .address, .footer .contact{
	width: 100%;		width: 100%;
−	}	+	}
−	.footer .address {	+	.footer .address{
	margin-bottom: 30px;		margin-bottom: 30px;
−	}	+	}
−	.footer-nav ul li {	+	.footer-nav ul li{
	padding: 0 15px;		padding: 0 15px;
−	}
	}		}
−	@media screen and (max-width:384px) {	+	}
−	.navbar-toggle {	+	@media screen and (max-width:384px){
		+	.navbar-toggle{
	margin-top: 0;		margin-top: 0;
−	margin-right: 0;	+	margin-right: 0;
−	}	+	}
−	.logo {	+	.logo{
	margin: 30px 0 65px;		margin: 30px 0 65px;
−	}	+	}
−	.logo a {	+	.logo a{
	font-size: 40px;		font-size: 40px;
−	}	+	}
−	.logo img {	+	.logo img{
	width: 45px;		width: 45px;
−	top: 45px;	+	top: 45px;
−	}	+	}
−	.header-info p {	+	.header-info p{
	font-size: 13px;		font-size: 13px;
−	line-height: 27px;	+	line-height: 27px;
−	}	+	}
−	.social {	+	.social{
	/*--w3layouts--*/		/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
	margin-top: 15px;		margin-top: 15px;
−	}	+	}
−	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3 {	+	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{
	font-size: 35px;		font-size: 35px;
−	margin-bottom: 30px;	+	margin-bottom: 30px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 15px 0;		margin: 15px 0;
−	}	+	}
−	.about p {	+	.about p{
	line-height: 25px;		line-height: 25px;
−	margin-bottom: 15px;	+	margin-bottom: 15px;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 3.7em 1em;		padding: 3.7em 1em;
−	}	+	}
−	figure h4 {	+	figure h4{
	font-size: 25px;		font-size: 25px;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 18%;		left: 18%;
−	bottom: 25px;	+	bottom: 25px;
−	}	+	}
−	.tab-list img {	+	.tab-list img{
	width: 40px;		width: 40px;
−	}	+	}
−	.service-info img {	+	.service-info img{
	width: 80px;		width: 80px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	font-size: 25px;		font-size: 25px;
−	}	+	}
−	.service-info p {	+	.service-info p{
	line-height: 25px;		line-height: 25px;
−	}	+	}
−	.gal-left {	+	.gal-left{
	width: 100%;		width: 100%;
−	margin: 0;	+	margin: 0;
−	}	+	}
−	.contact-grid {	+	.contact-grid{
	padding: 15px;		padding: 15px;
−	}	+	}
−	.footer-nav ul li {	+	.footer-nav ul li{
	padding: 0 10px;		padding: 0 10px;
−	}	+	}
−	.footer .address {	+	.footer .address{
	margin-bottom: 25px;		margin-bottom: 25px;
−	}	+	}
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.connect {	+	.connect{
	padding: 20px 0;		padding: 20px 0;
−	}	+	}
−	.copyright p {	+	.copyright p{
	line-height: 25px;		line-height: 25px;
−	}
	}		}
−	@media screen and (max-width:375px) {	+	}
−	.tab-list img {	+	@media screen and (max-width:375px){
		+	.tab-list img{
	width: 38px;		width: 38px;
−	}	+	}
−	.connect-social ul li {	+	.connect-social ul li{
	line-height: 30px;		line-height: 30px;
−	}
	}		}
−	@media screen and (max-width:360px) {	+	}
−	li.tab-list {	+	@media screen and (max-width:360px){
		+	li.tab-list{
	padding: 10px;		padding: 10px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	font-size: 25px;		font-size: 25px;
−	}	+	}
−	.footer-nav ul li {	+	.footer-nav ul li{
	font-size: 12px;		font-size: 12px;
−	}
	}		}
−	@media screen and (max-width:320px) {	+	}
−	.hover-effect li {	+	@media screen and (max-width:320px){
		+	.hover-effect li{
	width: 45%;		width: 45%;
−	}	+	}
−	.logo {	+	.logo{
	margin: 25px 0 80px;		margin: 25px 0 80px;
−	}	+	}
−	.logo a {	+	.logo a{
	font-size: 35px;		font-size: 35px;
−	padding: 5px 0 15px;	+	padding: 5px 0 15px;
−	}	+	}
−	.logo img {	+	.logo img{
	left: 43%;		left: 43%;
−	top: 35px;	+	top: 35px;
−	}	+	}
−	.header-info p {	+	.header-info p{
	font-size: 13px;		font-size: 13px;
−	line-height: 27px;	+	line-height: 27px;
−	}	+	}
−	/*--w3layouts--*/	+	/*--w3layouts--*/
	/*--agileits--*/		/*--agileits--*/
−	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3 {	+	.about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{
	font-size: 35px;		font-size: 35px;
−	margin-bottom: 30px;	+	margin-bottom: 30px;
−	}	+	}
−	.about h3 {	+	.about h3{
	margin: 10px 0;		margin: 10px 0;
−	font-size: 28px;	+	font-size: 28px;
−	}	+	}
−	.about p {	+	.about p{
	padding: 0 10px;		padding: 0 10px;
−	line-height: 25px;	+	line-height: 25px;
−	}	+	}
−	figure.effect-dexter figcaption::after {	+	figure.effect-dexter figcaption::after{
	right: 10px;		right: 10px;
−	left: 10px;	+	left: 10px;
−	border: 5px solid #FFF;	+	border: 5px solid #FFF;
−	}	+	}
−	figure h4 {	+	figure h4{
	font-size: 22px;		font-size: 22px;
−	}	+	}
−	figure.effect-dexter figcaption {	+	figure.effect-dexter figcaption{
	padding: 3.3em 1em;		padding: 3.3em 1em;
−	}	+	}
−	.social-two {	+	.social-two{
	left: 11%;		left: 11%;
−	bottom: 16px;	+	bottom: 16px;
−	}	+	}
−	.tabs {	+	.tabs{
	padding-bottom: 50px;		padding-bottom: 50px;
−	}	+	}
−	.tab-list img {	+	.tab-list img{
	width: 31px;		width: 31px;
−	}	+	}
−	.service-info img {	+	.service-info img{
	width: 70px;		width: 70px;
−	}	+	}
−	.service-info h4 {	+	.service-info h4{
	font-size: 21px;		font-size: 21px;
−	}	+	}
−	.service-info p {	+	.service-info p{
	line-height: 25px;		line-height: 25px;
−	padding: 0;	+	padding: 0;
−	}	+	}
−	.footer-nav ul li {	+	.footer-nav ul li{
	padding: 0 7px;		padding: 0 7px;
−	}	+	}
	}		}
	/*-- Responsive-Code --*/		/*-- Responsive-Code --*/

---

Revision as of 07:24, 12 September 2016

body{

 padding: 0;
 margin: 0;
 background: transparent;
 font-family: 'Open Sans', sans-serif;

} body a{

 transition: 0.5s all;
 -webkit-transition: 0.5s all;
 -moz-transition: 0.5s all;
 -o-transition: 0.5s all;
 -ms-transition: 0.5s all;
 text-decoration: none;

} body a:hover{

 text-decoration: none;

} body a:focus, a:hover{

 text-decoration: none;

} input[type="button"], input[type="submit"]{

 transition: 0.5s all;
 -webkit-transition: 0.5s all;
 -moz-transition: 0.5s all;
 -o-transition: 0.5s all;
 -ms-transition: 0.5s all;

} h1, h2, h3, h4, h5, h6{

 margin: 0;
 padding: 0;
 text-align: center;
 font-family: 'Fredericka the Great', cursive;

} p{

 margin: 0;

} ul{

 margin: 0;
 padding: 0;

} label{

 margin: 0;

} img{

 width: 100%;

} a:focus, a:hover{

 text-decoration: none;
 outline: none;

} /*-- //Reset-Code --*/

/*-- Index-Page-Styling --*/

/*-- Background-Gradient-Colors --*/ body{

 background: #FFF;
 background: -webkit-linear-gradient(#FFF, #0066FF);
 background: -o-linear-gradient(#FFF, #0066FF);
 background: -moz-linear-gradient(#FFF, #0066FF);
 background: linear-gradient(to right, #FFF, #0066FF);

} /*-- //Background-Gradient-Colors --*/

/*-- Header --*/

.header{

 padding: 100px 0 150px;

} .header-left{

 float: left;

} /*--w3layouts--*/ /*--agileits--*/

.header-right{

 float: right;

} .header-slider{

 position: relative;

} /*-- Banner-Slider --*/

.slider-1{

 width: 95%;
 border: 0px solid #FFF;
 position: relative;
 top: 110px;
 left: 2%;

} .slider-2{

 width: 30%;
 position: absolute;
 top: -14%;
 left: 0;
 border: 5px solid #FFF;
 z-index: 99999;

} .slider{

 position: relative;

} .rslides{

 position: relative;
 list-style: none;
 overflow: hidden;
 width: 100%;
 padding: 0;
 margin: 0;

} .rslides li{

 -webkit-backface-visibility: hidden;
 position: absolute;
 display: none;
 width: 100%;
 /*--w3layouts--*/

/*--agileits--*/ left: 0;

 top: 0;

} .rslides li:first-child{

 position: relative;
 display: block;
 float: left;

} .rslides img{

 display: block;
 height: auto;
 float: left;
 width: 100%;
 border: 0;

} a.callbacks_nav{

 display: none;

} ul.callbacks_tabs{

 display: none;

} /*-- //Banner-Slider --*/

.header-right{

 padding-top: 70px;

} /*-- Navbar --

.navbar{

 min-height: 40px;

} .navbar-default{

 background-color: transparent;
 border-color: transparent;
 border: none;
 margin-bottom: 0;
 text-align: center;
 /*--w3layouts--*/

/*--agileits--*/

• /

.hover-effect ul{

 border: 2px solid #EEE;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 padding-top: 5px;
 width: 85%;
 margin: 0 auto;

} .hover-effect li{

 overflow: hidden;
 position: relative;
 display: inline-block;

} .hover-effect li:before, .hover-effect li:after{

 display: block;

} .hover-effect li:before{

 bottom: 0%;

} .hover-effect li:after{

 bottom: 50%;

} .hover-effect a{

 backface-visibility: hidden;
 display: block;
 padding: 5px 20px;
 position: relative;
 text-align: center;
 text-decoration: none;
 line-height: normal;
 font-size: 14px;
 color: #FFF;
 font-family: 'Montserrat', sans-serif;

} .hover-effect a:before{

 bottom: 25%;

} .hover-effect a:after{

 bottom: 75%;
 /*--w3layouts--*/

/*--agileits--*/ } .hover-effect a:hover{

 color: #000;

} .hover-effect li:before, .hover-effect li:after, .hover-effect a:before, .hover-effect a:after{

 background-color: #12FFB9;
 position: absolute;
 height: 25%;
 left: 0%;
 right: 100%;
 content: ;
 z-index: -1;
 opacity: 0;
 -webkit-transition: all 0.3s ease;
 transition: all 0.3s ease;

} .hover-effect li:before{

 -webkit-transition-delay: 0s;
 transition-delay: 0s;

} .hover-effect li:after{

 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;

} .hover-effect a:before{

 -webkit-transition-delay: 0.05s;
 transition-delay: 0.05s;

} .hover-effect a:after{

 -webkit-transition-delay: 0.15s;
 transition-delay: 0.15s;

} .hover-effect li:hover:before, .hover-effect li.current:before, .hover-effect li:hover:after, .hover-effect li.current:after, .hover-effect li:hover a:before, .hover-effect li.current a:before, .hover-effect li:hover a:after, .hover-effect li.current a:after{

 left: 0;
 right: 0;
 opacity: 1;

} .hover-effect li:hover:before, .hover-effect li.current:before{

 -webkit-transition-delay: 0s;
 transition-delay: 0s;
 /*--w3layouts--*/

/*--agileits--*/ } .hover-effect li:hover:after, .hover-effect li.current:after{

 -webkit-transition-delay: 0.2s;
 transition-delay: 0.2s;

} .hover-effect li:hover a:before, .hover-effect li.current a:before{

 -webkit-transition-delay: 0.1s;
 transition-delay: 0.1s;

} .hover-effect li:hover a:after, .hover-effect li.current a:after{

 -webkit-transition-delay: 0.3s;
 transition-delay: 0.3s;

} /*-- //Navbar --*/

/*-- Logo --*/

.logo{

 text-align: center;
 margin: 50px 0 80px;
 position: relative;

} .logo a{

 font-family: 'Fredericka the Great', cursive;
 font-size: 60px;
 color: #EEE;
 padding: 15px 0 40px;
 border-top: 5px solid #EEE;
 border-bottom: 5px solid #EEE;

} .logo img{

 position: absolute;
 width: 60px;
 top: 78px;
 left: 46%;
 background-color: #058EEC;

} /*-- //Logo --*/

/*--w3layouts--*/ /*--agileits--*/ .header-info p{

 font-size: 15px;
 text-align: center;
 padding: 0 100px;
 line-height: 30px;
 color: #EEE;

} /*-- Header-Social-Icons --*/

.social{

 text-align: center;
 margin-top: 40px;

} ul.social-icons li{

 display: inline-block;

} ul.social-icons li a{

 display: inline-block;
 width: 50px;
 height: 50px;
 background: url("../images/img-sprite.png") no-repeat 0px 0px;

} ul.social-icons li a.facebook{

 background-position: 0px 0px;

} ul.social-icons li a.facebook:hover{

 background-position: 0px -50px;

} ul.social-icons li a.twitter{

 background-position: -50px 0px;

} ul.social-icons li a.twitter:hover{

 background-position: -50px -50px;

} ul.social-icons li a.googleplus{

 background-position: -100px 0px;

} ul.social-icons li a.googleplus:hover{

 /*--w3layouts--*/

/*--agileits--*/ background-position: -100px -50px; } ul.social-icons li a.instagram{

 background-position: -150px 0px;

} ul.social-icons li a.instagram:hover{

 background-position: -150px -50px;

} ul.social-icons li a.youtube{

 background-position: -200px 0px;

} ul.social-icons li a.youtube:hover{

 background-position: -200px -50px;

} /*-- //Header-Social-Icons --*/

/*-- //Header --*/

/*-- About --*/

.about{

 padding-bottom: 100px;

} .about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{

 font-size: 50px;
 margin-bottom: 50px;
 color: #FFF;

} .about-grid1, .about-grid2, .about-grid3{

 width: 60%;
 margin: 0 100px 0 auto;
 background-color: #EEE;

} .about-grid2{

 margin: 50px 100px;

} .about-grid{

 /*--w3layouts--*/

/*--agileits--*/ padding: 0; } .about h3{

 font-size: 30px;
 margin: 25px 0;
 color: #0AC1D5;

} .about p{

 padding: 0 30px;
 line-height: 27px;
 color: #777;

} /*-- //About --*/

/*-- People --*/

.people{

 padding-bottom: 100px;

} /*-- Team --*/

figure{

 position: relative;
 float: left;
 overflow: hidden;
 background: #3085a3;
 text-align: center;

} figure img{

 position: relative;
 display: block;
 max-width: 100%;
 opacity: 0.8;

} figure figcaption{

 padding: 2em;
 color: #fff;
 text-transform: uppercase;
 /*--w3layouts--*/

/*--agileits--*/ font-size: 1.25em;

 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;

} figure figcaption::before, figure figcaption::after{

 pointer-events: none;

} figure figcaption, figure figcaption > a{

 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

} figure figcaption > a{

 z-index: 1000;
 text-indent: 200%;
 white-space: nowrap;
 font-size: 0;
 opacity: 0;

} figure h4{

 word-spacing: -0.15em;
 font-size: 30px;
 font-weight: 300;

} figure h4 span{

 margin-left: 5px;
 font-weight: 600;

} figure h4, figure ul{

 margin: 0;

} figure h4, figure ul{

 margin: 0;
 font-weight: 400;

} figure p{

 letter-spacing: 1px;
 font-size: 68.5%;

} /*--w3layouts--*/ /*--agileits--*/ figure.effect-dexter{

 background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
 background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);

} figure.effect-dexter img{

 -webkit-transition: opacity 0.35s;
 transition: opacity 0.35s;

} figure.effect-dexter:hover img{

 opacity: 0.4;

} figure.effect-dexter figcaption::after{

 position: absolute;
 right: 30px;
 bottom: 30px;
 left: 30px;
 height: -webkit-calc(50% - 30px);
 height: calc(50% - 30px);
 border: 7px solid #fff;
 content: ;
 -webkit-transition: -webkit-transform 0.35s;
 transition: transform 0.35s;
 -webkit-transform: translate3d(0,-100%,0);
 transform: translate3d(0,-100%,0);

} figure.effect-dexter:hover figcaption::after{

 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);

} figure.effect-dexter figcaption{

 padding: 5em;
 text-align: left;

} figure.effect-dexter ul.social{

 position: absolute;
 left: 180px;
 right: 0;
 bottom: 70px;
 opacity: 0;
 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 transition: opacity 0.35s, transform 0.35s;
 -webkit-transform: translate3d(0,-100px,0);
 /*--w3layouts--*/

/*--agileits--*/ transform: translate3d(0,-100px,0); } figure.effect-dexter:hover{

 opacity: 1;
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);

} li.icon{

 display: inline-block!important;
 visibility: visible!important;

} span.icon img{

 width: 10%!important;
 display: inline-block!important;
 opacity: 0.9;

} span.icon img:hover{

 opacity: 0.9;

} .social-two{

 display: none;

} figure.effect-dexter:hover .social-two{

 display: block;
 text-align: center;
 margin-top: 100px;

} .social-two span a{

 display: inline-block;
 width: 50px;
 height: 50px;
 background: url("../images/img-sprite-1.png") no-repeat 0px 0px;

} .social-two span a.facebook:hover{

 background-position: 0px -50px;

} .social-two span a.twitter{

 background: url("../images/img-sprite-1.png") no-repeat -50px 0px;

} /*--w3layouts--*/ /*--agileits--*/ .social-two span a.twitter:hover{

 background-position: -50px -50px;

} .social-two span a.googleplus{

 background: url("../images/img-sprite-1.png") no-repeat -100px 0px;

} .social-two span a.googleplus:hover{

 background-position: -100px -50px;

} .social-two span a.instagram{

 background: url("../images/img-sprite-1.png") no-repeat -150px 0px;

} .social-two span a.instagram:hover{

 background-position: -150px -50px;

} /*-- //Team --*/

/*-- Clients --*/

.people h3 span{

 margin-left: 10px;

} .client-slider-2 .slider{

 border: 5px solid #EEE;
 padding: 26px 30px;

} .client-slider-2 h4{

 font-size: 30px;
 font-weight: 600;
 color: #12FFB9;

} .client-slider-2 p{

 line-height: 25px;
 color: #FFF;
 font-size: 14px;
 margin: 30px 0;

} /*--w3layouts--*/ /*--agileits--*/ .client{

 float: right;

} .client span{

 font-size: 16px;
 font-weight: 600;
 line-height: 25px;
 padding: 0;
 color: #111;

} /*-- //Clients --*/

/*-- Services --*/

.tabs{

 padding-bottom: 100px;

} .service-icons{

 background-color: rgba(0, 0, 0, 0.57);
 padding: 0;

} .service-icons ul{

 list-style-type: none;

} li.tab-list{

 padding: 15px 0;

} li.tab-list-1{

 background-color: rgb(51, 51, 51);

} .tab-list img{

 width: 50px;

} .service-info{

 background-color: #FFF;
 height: 400px;
 text-align: center;

} /*--w3layouts--*/ /*--agileits--*/ .service-info img{

 width: 100px;

} .service-info h4{

 font-size: 35px;
 font-weight: bold;
 color: #000;
 margin: 30px 0;

} .service-info p{

 line-height: 30px;
 padding: 0 35px;

} /*-- //Services --*/

/*-- Gallery --*/

.gallery{

 padding-bottom: 100px;

} .gal-left{

 padding: 0;

} .img-box, .info-box{

 display: block;
 width: 100%;
 height: 100%;
 -webkit-transform: scale(1, 1);
 -moz-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
 transform: scale(1, 1);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 /*--w3layouts--*/

/*--agileits--*/ backface-visibility: hidden; } .img-box img, .info-box img{

 display: block;
 position: relative;
 max-width: 100%;
 max-height: 100%;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

} .img-box{

 position: relative;

} .info-box{

 top: 0;
 left: 0;
 position: absolute;

} .info-box .info-content{

 display: block;
 position: relative;
 padding: 0%;
 float: left;
 left: 50%;
 top: 50%;
 position: relative;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

} .separator{

 display: block;
 position: relative;
 height: 1px;
 width: 100%;
 margin: 20px auto;
 background: rgba(255, 255, 255, 0.5);
 clear: both;

} /*--w3layouts--*/ /*--agileits--*/ .content-grid-effect{

 display: block;
 position: relative;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
 overflow: hidden;

} .content-grid-effect .info-content{

 z-index: 2 !important;
 filter: alpha(opacity=0);
 -wekbit-opacity: 0;
 -moz-opacity: 0;
 opacity: 0;
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;

} .content-grid-effect .img-box:after, .content-grid-effect .img-box:before, .content-grid-effect .info-box:after, .content-grid-effect .info-box:before{

 content: "";
 display: block;
 position: absolute;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1;
 -webkit-transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -ms-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 filter: alpha(opacity=0);
 -wekbit-opacity: 0;
 -moz-opacity: 0;
 opacity: 0;

} .content-grid-effect.horizontal .img-box:before{

 top: 0;
 /*--w3layouts--*/

/*--agileits--*/ left: 0;

 width: 100%;
 height: 25%;
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);

} .content-grid-effect.horizontal .img-box:after{

 top: 25%;
 left: 0;
 width: 100%;
 height: 25%;
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);

} .content-grid-effect.horizontal .info-box:after{

 top: 50%;
 left: 0;
 width: 100%;
 height: 25%;
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);

} .content-grid-effect.horizontal .info-box:before{

 top: 75%;
 left: 0;
 width: 100%;
 height: calc(25% + 1px);
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 -o-transform: rotateX(90deg);
 transform: rotateX(90deg);

} .content-grid-effect.vertical .img-box:before{

 top: 0;
 /*--w3layouts--*/

/*--agileits--*/ left: 0;

 width: 25%;
 height: 100%;
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);

} .content-grid-effect.vertical .img-box:after{

 top: 0;
 left: 25%;
 width: 25%;
 height: 100%;
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);

} .content-grid-effect.vertical .info-box:after{

 top: 0;
 left: 50%;
 width: 25%;
 height: 100%;
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);

} .content-grid-effect.vertical .info-box:before{

 top: 0;
 left: 75%;
 width: calc(25% + 1px);
 height: 100%;
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);

} .content-grid-effect:hover .img-box:after, .content-grid-effect:hover .img-box:before, .content-grid-effect:hover .info-box:after, .content-grid-effect:hover .info-box:before{

 -webkit-transform: rotateX(0deg);
 /*--w3layouts--*/

/*--agileits--*/ -moz-transform: rotateX(0deg);

 -ms-transform: rotateX(0deg);
 -o-transform: rotateX(0deg);
 transform: rotateX(0deg);
 filter: alpha(opacity=100);
 -wekbit-opacity: 1;
 -moz-opacity: 1;
 opacity: 1;

} .content-grid-effect:hover .info-content{

 filter: alpha(opacity=100);
 -wekbit-opacity: 1;
 -moz-opacity: 1;
 opacity: 1;

} .slow-zoom .img-box{

 z-index: 0;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
 -webkit-transition: all 2.2s ease-in-out;
 -moz-transition: all 2.2s ease-in-out;
 -ms-transition: all 2.2s ease-in-out;
 -o-transition: all 2.2s ease-in-out;
 transition: all 2.2s ease-in-out;

} .slow-zoom:hover .img-box{

 -webkit-transform: scale(1.5);
 -moz-transform: scale(1.5);
 -ms-transform: scale(1.5);
 -o-transform: scale(1.5);
 transform: scale(1.5);

} .slow-zoom{

 display: block;
 overflow: hidden;
 position: relative;
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 /*--w3layouts--*/

/*--agileits--*/ } .content-grid-effect{

 box-shadow: 0px 0px 14px 0px #DCDCDC;
 padding: 7px 7px;

} .info-content h4{

 color:#fff;
 text-decoration:none;
 font-size:25px;

} .info-content p{

 color:#fff;
 text-decoration:none;
 font-size:15px;
 line-height:2.2em;
 width:90%;
 margin:0 auto;

} /*-- //Gallery --*/

/*-- Contact-Us --*/

.contact-us{

 padding-bottom: 100px;
 color: #333;

} .contact-grid{

 border: 3px solid #EEE;
 padding: 30px;
 font-size: 13px;

} .contact-us p{

 line-height: 25px;
 margin-bottom: 25px;

} .contact-us h4{

 font-size: 25px;
 text-align: left;
 margin-bottom: 10px;
 /*--w3layouts--*/

/*--agileits--*/ color: #000; } .address a{

 color: #000;

} .address a:hover{

 color: #000;

} .contact-us .phone{

 margin-top: 20px;

} .contact-us .phone p{

 line-height: 25px;
 margin: 0;

} .contact_form input[type='text']{

 width: 100%;
 border-radius: 0;
 line-height: 22px;
 font-size: 14px;
 padding: 14px 17px 14px;
 outline: none;
 color: #FFF;
 height: 50px;
 border: 1px solid #d5d5d5;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 margin: 0 0 20px;
 background: none;

} .contact_form textarea{

 width: 100%;
 border-radius: 0;
 line-height: 22px;
 font-size: 14px;
 padding: 14px 17px 14px;
 outline: none;
 border: 1px solid #d5d5d5;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 /*--w3layouts--*/

/*--agileits--*/ resize: none;

 color: #FFF;
 height: 130px;
 background: none;

}

-webkit-input-placeholder{

 color: #333;

}

-moz-placeholder{

 color: #333;

}

-moz-placeholder{

 color: #333;

}

-ms-input-placeholder{

 color: #333;

} form.contact_form{

 text-align: center;

} input.text:active, input.text:focus{

 background-color: rgba(0, 0, 0, 0.84);

} textarea:active, textarea:focus{

 background-color: rgba(0, 0, 0, 0.84);

} .message{

 margin-bottom: 15px;

} .more_btn{

 padding: 10px 30px;
 border: 1px solid #EEE;
 color: #FFF;
 background-color: transparent;
 text-decoration: none;
 outline: none;
 transition: 0.5s all;
 -webkit-transition: 0.5s all;
 -moz-transition: 0.5s all;
 /*--w3layouts--*/

/*--agileits--*/ -o-transition: 0.5s all;

 -ms-transition: 0.5s all;

} .more_btn:hover{

 color: #FFF;
 background-color: #000000;
 cursor: pointer;

} /*-- //Contact-Us --*/

/*-- Map --*/

.map iframe{

 width: 100%;
 height: 400px;
 border: 5px solid #FAFAFA;
 margin-bottom: -5px;
 opacity: 0.7;
 transition: 0.5s all;
 -webkit-transition: 0.5s all;
 -moz-transition: 0.5s all;
 -o-transition: 0.5s all;
 -ms-transition: 0.5s all;

} .map iframe:hover{

 opacity: 1;
 transition: 0.5s all;
 -webkit-transition: 0.5s all;
 -moz-transition: 0.5s all;
 -o-transition: 0.5s all;
 -ms-transition: 0.5s all;

} /*-- //Map --*/

/*-- Footer --*/

.footer{

 padding: 50px 0;
 background: #333333;
 color: #777;
 font-size: 13px;

} /*--w3layouts--*/ /*--agileits--*/ .address, .contact, .connect{

 padding: 0;

} .footer h5{

 color: #EEE;
 font-size: 25px;
 font-weight: 100;
 text-align: left;
 margin-bottom: 25px;

} .address ul li{

 display: block;
 line-height: 25px;

} .footer .address a{

 color: #999;

} .footer .address a:hover{

 color: #FFF;

} .phone p{

 line-height: 25px;

} .mail{

 margin-top: 40px;

} .mail input[type="text"]{

 padding: 5px;
 border: none;
 outline: none;
 color: #333;

} .mail input[type="submit"]{

 padding: 5px 13px;
 border: none;
 outline: none;
 color: #333;

} .mail input[type="submit"]:hover{

 /*--w3layouts--*/

/*--agileits--*/ color: #FFF;

 background-color: #009688;

} .connect{

 text-align: left;
 padding-left: 50px;

} .connect-social ul li{

 display: inline-block;

} /*-- Footer-Social-Icons --*/

.connect-social ul li a{

 display: inline-block;
 width: 30px;
 height: 30px;
 background: url("../images/img-sprite-2.png") no-repeat 0px 0px;
 background-size: 300px;
 opacity: 0.7;

} .connect-social ul li a.facebook{

 background-position: 0px -30px;

} .connect-social ul li a.twitter{

 background-position: -30px -30px;

} .connect-social ul li a.googleplus{

 background-position: -60px -30px;

} .connect-social ul li a.linkedin{

 background-position: -90px -30px;

} .connect-social ul li a.blogger{

 background-position: -120px -30px;

} .connect-social ul li a.tumblr{

 background-position: -150px -30px;
 /*--w3layouts--*/

/*--agileits--*/ } .connect-social ul li a.rss{

 background-position: -180px -30px;

} .connect-social ul li a.vimeo{

 background-position: -240px -30px;

} .connect-social ul li a.deviantart{

 background-position: -270px -30px;

} .connect-social ul li a:hover{

 opacity: 1;

} /*-- Footer-Social-Icons --*/

.footer-bottom{

 padding-top: 50px;

} .footer-nav{

 float: left;

} .footer-nav ul li{

 display: inline-block;
 padding: 0 25px;
 border-right: solid 1px #939090;
 border-right-style: dashed;

} .footer-nav ul li a{

 color: #D6D6D6;

} .footer-nav ul li a:hover{

 color: #12FFB9;

} .footer-logo a{

 margin: 0;
 color: #6E6E6E;

} /*--w3layouts--*/ /*--agileits--*/ .footer-nav ul li:nth-child(5){

 border-right: none;

} /*-- Copyright --*/

.copyright{

 float: left;
 margin-left: 160px;

} .copyright p{

 color: #C2C2C2;

} .copyright p a{

 margin-left: 5px;
 color:#C2C2C2;
 font-family: 'Fredericka the Great', cursive;

} .copyright p a:hover{

 color: #12FFB9;

} /*-- //Copyright --*/

/*-- //Footer --*/

/*-- Go-To-Top-Button --*/

1. toTop{

 display: none;
 text-decoration: none;
 position: fixed;
 bottom: 10px;
 right: 15px;
 overflow: hidden;
 width: 40px;
 height: 40px;
 border: none;
 text-indent: 100%;
 background: url("../images/to-top.png") no-repeat 0px 0px;

} /*-- //Go-To-Top-Button --*/ /*--w3layouts--*/ /*--agileits--*/

/*-- //Index-Page-Styling --*/

/*-- Responsive-Code --*/

@media screen and (max-width:1920px){

 .slider-2{
 top: -13%;

} .hover-effect ul{

 width: 70%;

} .logo{

 margin: 80px 0 120px;

} .header-info p{

 padding: 0 150px;

} .about h3{

 margin: 50px 0;

} .about p{

 padding: 0 50px;

} .client-slider-2 .slider{

 padding: 25px;

} img.tab-icon-2, img.tab-icon-4{

 margin-left: 125px;

} img.tab-icon-3{

 margin-left: 250px;

} .service-info{

 padding-top: 30px;
 /*--w3layouts--*/

/*--agileits--*/ } .contact-grid{

 padding: 31px;

}

} @media screen and (max-width:1680px){

 .slider-2{
 top: -15%;

} .hover-effect ul{

 width: 80%;

} .header-info p{

 padding: 0 130px;

} .about h3{

 margin: 35px 0;

} .contact_form textarea{

 height: 140px;

}

} @media screen and (max-width:1600px){

 .slider-2{
 top: 10%;
 /*          upleft picture             */

} .hover-effect ul{

 width: 85%;

} .header-info p{

 padding: 0 120px;

} .about h3{

 margin: 30px 0;

} .about p{

 padding: 0 40px;

}

} @media screen and (max-width:1440px){

 .header{
 padding: 100px 0;

} .slider-1{

 width: 90%;
 /*--w3layouts--*/

/*--agileits--*/ } .slider-2{

 top: -19%;

} .hover-effect ul{

 width: 90%;

} .hover-effect a{

 padding: 5px 18px;

} .logo{

 margin: 50px 0 100px;

} .logo a{

 font-size: 55px;
 padding: 15px 0 35px;

} .logo img{

 top: 70px;
 left: 45%;

} .header-info p{

 padding: 0 80px;

} .about h3{

 margin: 20px 0;
 font-size: 30px;

} .about p{

 padding: 0 15px;
 line-height: 27px;

}

} @media screen and (max-width:1366px){

 .slider-2{
 top: -20%;

} .hover-effect ul{

 width: 96%;

} .logo a{

 font-size: 50px;
 padding: 15px 0 30px;

} .logo img{

 top: 60px;

} /*--w3layouts--*/ /*--agileits--*/ .header-info p{

 font-size: 14px;

} .social{

 margin-top: 25px;

} .about h3{

 margin: 15px 0;

} p{

 font-size: 13px;

} .about p{

 padding: 0 19px;
 line-height: 26px;

} .client-slider-2 .slider{

 padding: 25px;

} .contact-grid{

 padding: 26px;

} .contact_form textarea{

 height: 130px;

}

} @media screen and (max-width:1280px){

 .slider-1{
 width: 95%;
 left: 10%;

} .slider-2{

 top: -21%;

} .hover-effect ul{

 width: 100%;

} .hover-effect a{

 font-size: 13px;

} .header-info p{

 padding: 0 70px;

} .social{

 margin-top: 25px;

} .about-grid1, .about-grid2, .about-grid3{

 /*--w3layouts--*/

/*--agileits--*/ width: 70%; } .about h3{

 margin: 25px 0;

} .client-slider-2 p{

 font-size: 13px;

}

} @media screen and (max-width:1024px){

 .slider-2{
 top: -30%;

} .slider-1{

 width: 85%;

} .header-right{

 padding-top: 0;
 left: -30px;

} .hover-effect ul{

 width: 131%;
 margin-left: -40px;

} .logo{

 margin: 35px 0 70px;

} .logo a{

 font-size: 50px;
 padding: 5px 0 25px;

} .logo img{

 top: 53px;
 left: 43%;

} .header-info p{

 padding: 0;
 font-size: 13px;

} .social{

 margin-top: 20px;

} .about-grid1, .about-grid2, .about-grid3{

 width: 90%;

} figure.effect-dexter figcaption{

 padding: 4em 1em;
 /*--w3layouts--*/

/*--agileits--*/ } .social-two{

 position: absolute;
 left: 25%;
 bottom: 55px;

} img.tab-icon-2, img.tab-icon-4{

 margin-left: 100px;

} img.tab-icon-3{

 margin-left: 200px;

} .service-info{

 padding-top: 10px;

} .map iframe{

 height: 300px;

} .footer .address, .footer .contact{

 width: 50%;
 float: left;

} .connect{

 width: 100%;
 float: right;
 margin-top: 30px;
 text-align: left;
 border-top: 1px solid #EEE;
 border-bottom: 1px solid #EEE;
 padding: 30px 0;

} .footer h5{

 margin-bottom: 25px;

} .connect h5{

 margin-left: 5px;

} .copyright{

 margin-left: 70px;

}

} @media screen and (max-width:991px){

 .header{
 padding: 50px 0 100px;

} .slider-1{

 width: 85%;
 /*--w3layouts--*/

/*--agileits--*/ left: 15%;

 top: 0;

} .slider-2{

 top: -14%;
 left: 0;
 width: 25%;

} .header-left{

 float: right;

} .header-right{

 float: left;
 margin-bottom: 75px;
 margin-left: 0;
 left: 0;

} .hover-effect ul{

 width: 80%;
 margin: 0 auto;

} .hover-effect li{

 margin: 0 10px;

} .logo{

 margin: 50px 0 80px;

} .logo a{

 font-size: 55px;
 padding: 5px 0 30px;

} .logo img{

 top: 65px;
 left: 47%;
 background-color: #09B3DB;

} .header-info p{

 padding: 0 150px;
 font-size: 15px;

} .social{

 margin-top: 30px;

} .about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{

 font-size: 45px;
 margin-bottom: 40px;

} .about-grid1, .about-grid2, .about-grid3{

 /*--w3layouts--*/

/*--agileits--*/ margin: 0 80px 0 auto; } .about-grid2{

 margin: 50px 80px;

} .people .container{

 width: 100%;

} .client-slider-1, .client-slider-2{

 width: 50%;
 float: left;
 padding: 5px;

} .client-slider-2 .slider{

 padding: 14px 10px;

} .client-slider-2 p{

 margin: 20px 0;

} .client span{

 font-size: 15px;
 font-weight: 600;
 line-height: 20px;

} .tabs .container{

 width: 100%;

} .service-info{

 padding-top: 25px;

} .service-info h4{

 margin: 25px 0;

} .contact-us .container{

 width: 100%;

} .footer .container{

 width: 100%;

}

1. toTop{

 z-index: 99999;

}

} @media screen and (max-width:966px){

 .slider-2{
 top: -15%;

} /*--w3layouts--*/ /*--agileits--*/ .about h3{

 margin: 20px 0;

} .client-slider-2 h4{

 font-size: 27px;

} .client-slider-2 p{

 font-size: 12px;
 margin: 18px 0;

} img.tab-icon-2, img.tab-icon-4{

 margin-left: 90px;

} img.tab-icon-3{

 margin-left: 180px;

} .service-info{

 padding-top: 20px;

}

} @media screen and (max-width:900px){

 .header-info p{
 padding: 0 140px;

} .about-grid1, .about-grid2, .about-grid3{

 margin: 0 30px 0 auto;
 width: 95%;

} .about-grid2{

 margin: 50px 30px;

} .gal-left{

 width: 25%;
 float: left;

} img.tab-icon-2, img.tab-icon-4{

 margin-left: 85px;

} img.tab-icon-3{

 margin-left: 170px;

} .service-info p{

 padding: 0 15px;

} .contact_form textarea{

 height: 155px;

} /*--w3layouts--*/ /*--agileits--*/ .copyright{

 margin-left: 25px;

}

} @media screen and (max-width:853px){

 .header-info p{
 padding: 0 120px;

} .about h3{

 font-size: 25px;
 margin: 15px 0;

} .about p{

 padding: 0 15px;

} figure.effect-dexter figcaption{

 padding: 3.7em 1em;

} figure h4{

 font-size: 28px;

} .social-two{

 left: 23%;
 bottom: 47px;

} img.tab-icon-2, img.tab-icon-4{

 margin-left: 75px;

} img.tab-icon-3{

 margin-left: 150px;

} .service-info p{

 padding: 0;

} .footer .address, .footer .contact{

 text-align: center;

} .footer h5{

 text-align: center;

} .connect{

 text-align: center;

} .footer-nav{

 width: 100%;
 text-align: center;
 margin-bottom: 40px;
 /*--w3layouts--*/

/*--agileits--*/ } .copyright{

 width: 100%;
 margin: 0;
 text-align: center;

}

} @media screen and (max-width:800px){

 .logo img{
 left: 46%;

} .header-info p{

 padding: 0 90px;

} .about h3{

 margin: 10px 0;

} .about p{

 line-height: 22px;

} figure.effect-dexter figcaption::after{

 right: 15px;
 bottom: 15px;
 left: 15px;
 height: calc(50% - 25px);

} .client span{

 font-size: 14px;

} .tab-list img{

 width: 45px;

} img.tab-icon-2, img.tab-icon-4{

 margin-left: 70px;

} img.tab-icon-3{

 margin-left: 140px;

} .service-info img{

 width: 80px;

} .service-info h4{

 font-size: 30px;

}

} @media screen and (max-width:768px){

 /*--w3layouts--*/

/*--agileits--*/ .hover-effect ul{

 width: 85%;

} .header-info p{

 padding: 0 75px;

} .about p{

 font-size: 12px;

} .social-two{

 left: 20%;
 bottom: 28px;

} h2.resp-accordion img{

 width: 50px;

} .service-info{

 padding: 0;
 height: 100%;
 padding-top: 20px;

} img.tab-icon-2, img.tab-icon-4{

 margin-left: 0;

} img.tab-icon-3{

 margin-left: 0;

}

} @media screen and (max-width:767px){

 .header{
 padding: 20px 0 100px;

} .navbar-default .navbar-toggle{

 border-color: #FFF;

} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{

 background-color: #000;

} .navbar-default .navbar-toggle .icon-bar{

 background-color: #FFF;

} .navbar-default .navbar-collapse, .navbar-default .navbar-form{

 border: none;
 box-shadow: none;
 margin-bottom: 50px;

} .hover-effect ul{

 /*--w3layouts--*/

/*--agileits--*/ width: 100%;

 background-color: #000;

} .hover-effect li{

 display: block;
 width: 20%;
 margin: 10px auto;

} .logo{

 margin: 0 0 80px;

} .header-info p{

 padding: 0 50px;

} .about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{

 font-size: 40px;

} .about-grid{

 width: 50%;
 float: left;

} .about p{

 padding: 0 10px;

} .people h3 span{

 margin-left: 0;

} .service-icons{

 width: 30%;
 float: left;

} .gallery{

 padding-bottom: 50px;

} .gallery .col-12{

 width: 33%;

} .contact-us-grid{

 width: 50%;
 float: left;

} .contact_form textarea{

 height: 180px;

}

} @media screen and (max-width:667px){

 .header{
 /*--w3layouts--*/

/*--agileits--*/ padding: 20px 0 50px; } .header-info p{

 padding: 0 25px;

} .about{

 padding-bottom: 75px;

} .about-grid1, .about-grid2, .about-grid3{

 background-color: transparent;

} .about-info{

 background-color: #EEE;

} .people{

 padding-bottom: 50px;

} .client-slider-1, .client-slider-2{

 width: 75%;
 float: left;
 padding: 0;
 margin-left: 12%;

} .client-slider-1{

 margin-bottom: 50px;

} figure.effect-dexter figcaption{

 padding: 5em 1em;

} .social-two{

 left: 28%;
 bottom: 45px;

} .client-slider-2 p{

 font-size: 13px;

} .service-info img{

 width: 75px;

} .service-info h4{

 margin: 15px 0;

} .service-info p{

 line-height: 29px;

} .tabs{

 padding-bottom: 75px;

} /*--w3layouts--*/ /*--agileits--*/ .contact-us{

 padding-bottom: 50px;

}

} @media screen and (max-width:640px){

 .navbar-toggle{
 float: none;
 margin-right: 0;

} .logo{

 margin: 30px 0 80px;

} .logo img{

 left: 45%;

} .header-info p{

 padding: 0;

} .about-grid1, .about-grid2, .about-grid3{

 width: 95%;
 margin: 0 auto;

} .about-grid{

 width: 100%;

} .about h3{

 margin: 20px 0;
 font-size: 30px;

} .about p{

 padding: 0 15px;
 font-size: 13px;
 line-height: 27px;
 margin-bottom: 20px;

} .about-grid2{

 margin: 30px auto;

} .client-slider-1, .client-slider-2{

 width: 100%;
 margin-left: 0;

} figure.effect-dexter figcaption{

 padding: 6em 1em;

} .social-two{

 left: 32%;
 /*--w3layouts--*/

/*--agileits--*/ bottom: 65px; } .contact-us-grid{

 width: 100%;

} .contact-grid2{

 padding: 0;

} .contact-us .address, .contact-us .contact{

 width: 100%;
 float: left;

} .contact-grid{

 width: 100%;
 margin: 0 0 30px 0;

} .contact_form input[type='text']{

 width: 100%;
 line-height: 10px;
 font-size: 13px;
 padding: 5px 17px;
 height: 40px;
 margin: 0 0 10px;
 background-color: rgba(0, 0, 0, 0.51);
 color: #FFF;

} .contact_form textarea{

 height: 150px;
 background-color: rgba(0, 0, 0, 0.51);
 font-size: 13px;
 padding: 7px 17px;

} input.more_btn{

 font-size: 13px;
 background-color: rgba(0, 0, 0, 0.51);

} .map iframe{

 height: 250px;

}

} @media screen and (max-width:603px){

 .service-info p{
 line-height: 26px;

}

} @media screen and (max-width:568px){

 /*--w3layouts--*/

/*--agileits--*/ .logo a{

 font-size: 45px;
 padding: 5px 0 20px;

} .logo img{

 width: 50px;
 top: 50px;
 left: 46%;

} .header-info p{

 font-size: 14px;

} figure.effect-dexter figcaption{

 padding: 5em 1em;

} .social-two{

 left: 30%;
 bottom: 55px;

} .service-icons{

 width: 20%;

} .map iframe{

 height: 200px;

} .footer h5{

 margin-bottom: 15px;
 font-size: 22px;

} .address ul li{

 line-height: 20px;

} .mail{

 margin-top: 15px;

} .connect{

 margin-top: 20px;

} .footer-bottom{

 padding-top: 30px;

} .footer-nav{

 margin-bottom: 30px;

}

-webkit-input-placeholder{

 color: #EEE;

}

-moz-placeholder{

 /*--w3layouts--*/

/*--agileits--*/ color: #EEE; }

-moz-placeholder{

 color: #EEE;

}

-ms-input-placeholder{

 color: #EEE;

}

} @media screen and (max-width:533px){

 .social-two{
 left: 28%;
 bottom: 45px;

} .service-info p{

 line-height: 27px;

} .footer .address{

 width: 40%;

} .footer .contact{

 width: 60%;

} .footer-nav ul li{

 padding: 0 20px;

}

} @media screen and (max-width:480px){

 .logo img{
 left: 45%;

} .about{

 padding-bottom: 50px;

} .tabs{

 padding-bottom: 50px;

} .social-two{

 left: 26%;
 bottom: 40px;

} .service-info h4{

 font-size: 27px;

} /*--w3layouts--*/ /*--agileits--*/ .service-info p{

 line-height: 25px;

} .gal-left{

 width: 48%;
 margin: 1%;

} .footer{

 padding: 30px 0;

}

} @media screen and (max-width:414px){

 .logo img{
 left: 44%;

} .hover-effect li{

 width: 30%;

} .slider-2{

 top: -25%;
 width: 30%;

} .about-grid1, .about-grid2, .about-grid3{

 width: 95%;

} .client-slider-1, .client-slider-2{

 width: 100%;
 margin-left: 0;

} .service-icons{

 width: 100%;

} figure.effect-dexter figcaption{

 padding: 4em 1em;

} .social-two{

 left: 21%;
 bottom: 30px;

} li.tab-list{

 display: inline-block;
 padding: 12px;

} .service-info h4{

 font-size: 27px;

} .service-info p{

 /*--w3layouts--*/

/*--agileits--*/ line-height: 27px;

 padding: 0 5px;
 margin-bottom: 20px;

} .contact-us{

 padding-bottom: 30px;

} .contact-grid, .contact-us-grid{

 width: 100%;
 margin: 0 0 30px 0;

} .contact-us .address{

 width: 60%;

} .mail input[type="submit"]{

 margin-top: 10px;

} .footer .address, .footer .contact{

 width: 100%;

} .footer .address{

 margin-bottom: 30px;

} .footer-nav ul li{

 padding: 0 15px;

}

} @media screen and (max-width:384px){

 .navbar-toggle{
 margin-top: 0;
 margin-right: 0;

} .logo{

 margin: 30px 0 65px;

} .logo a{

 font-size: 40px;

} .logo img{

 width: 45px;
 top: 45px;

} .header-info p{

 font-size: 13px;
 line-height: 27px;

} .social{

 /*--w3layouts--*/

/*--agileits--*/ margin-top: 15px; } .about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{

 font-size: 35px;
 margin-bottom: 30px;

} .about h3{

 margin: 15px 0;

} .about p{

 line-height: 25px;
 margin-bottom: 15px;

} figure.effect-dexter figcaption{

 padding: 3.7em 1em;

} figure h4{

 font-size: 25px;

} .social-two{

 left: 18%;
 bottom: 25px;

} .tab-list img{

 width: 40px;

} .service-info img{

 width: 80px;

} .service-info h4{

 font-size: 25px;

} .service-info p{

 line-height: 25px;

} .gal-left{

 width: 100%;
 margin: 0;

} .contact-grid{

 padding: 15px;

} .footer-nav ul li{

 padding: 0 10px;

} .footer .address{

 margin-bottom: 25px;

} /*--w3layouts--*/ /*--agileits--*/ .connect{

 padding: 20px 0;

} .copyright p{

 line-height: 25px;

}

} @media screen and (max-width:375px){

 .tab-list img{
 width: 38px;

} .connect-social ul li{

 line-height: 30px;

}

} @media screen and (max-width:360px){

 li.tab-list{
 padding: 10px;

} .service-info h4{

 font-size: 25px;

} .footer-nav ul li{

 font-size: 12px;

}

} @media screen and (max-width:320px){

 .hover-effect li{
 width: 45%;

} .logo{

 margin: 25px 0 80px;

} .logo a{

 font-size: 35px;
 padding: 5px 0 15px;

} .logo img{

 left: 43%;
 top: 35px;

} .header-info p{

 font-size: 13px;
 line-height: 27px;

} /*--w3layouts--*/ /*--agileits--*/ .about h2, .people h3, .tabs h3, .gallery h3, .contact-us h3, .map h3{

 font-size: 35px;
 margin-bottom: 30px;

} .about h3{

 margin: 10px 0;
 font-size: 28px;

} .about p{

 padding: 0 10px;
 line-height: 25px;

} figure.effect-dexter figcaption::after{

 right: 10px;
 left: 10px;
 border: 5px solid #FFF;

} figure h4{

 font-size: 22px;

} figure.effect-dexter figcaption{

 padding: 3.3em 1em;

} .social-two{

 left: 11%;
 bottom: 16px;

} .tabs{

 padding-bottom: 50px;

} .tab-list img{

 width: 31px;

} .service-info img{

 width: 70px;

} .service-info h4{

 font-size: 21px;

} .service-info p{

 line-height: 25px;
 padding: 0;

} .footer-nav ul li{

 padding: 0 7px;

}

} /*-- Responsive-Code --*/