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

Revision as of 05:39, 12 September 2016 (view source) Crepuscule (Talk | contribs) ← Older edit		Revision as of 05:41, 12 September 2016 (view source) Crepuscule (Talk | contribs) Newer edit →
Line 2:		Line 2:
	padding: 0;		padding: 0;
	margin: 0;		margin: 0;
−	background: transparent;                /	+	background: transparent;                /*  #FFF  */
−	*  #FFF  */	+
−		+
	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 62:		Line 60:
	}		}
−	/	+	/*-- //Reset-Code --*/
−	*-- /	+
−	/	+
−	Reset-Code --*/	+
		+	/*-- Index-Page-Styling --*/
−	/	+	/*-- Background-Gradient-Colors --*/
−	*-- Index-Page-Styling --*/	+
−		+
−		+
−	/	+
−	*-- Background-Gradient-Colors --*/	+
−		+
	body {		body {
	background: #FFF;		background: #FFF;
Line 84:		Line 74:
	background: linear-gradient(to right, #FFF, #0066FF);		background: linear-gradient(to right, #FFF, #0066FF);
	}		}
−	/	+	/*-- //Background-Gradient-Colors --*/
−	*-- /	+
−	/	+
−	Background-Gradient-Colors --*/	+
−		+	/*-- Header --*/
−	/	+
−	*-- Header --*/	+
−		+
	.header {		.header {
Line 103:		Line 87:
	float: left;		float: left;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.header-right {		.header-right {
Line 118:		Line 98:
	}		}
−	/	+	/*-- Banner-Slider --*/
−	*-- Banner-Slider --*/	+
−		+
	.slider-1 {		.slider-1 {
Line 157:		Line 135:
	display: none;		display: none;
	width: 100%;		width: 100%;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	left: 0;		left: 0;
	top: 0;		top: 0;
Line 189:		Line 163:
	}		}
−	/	+	/*-- //Banner-Slider --*/
−	*-- /	+
−	/	+
−	Banner-Slider --*/	+
−		+
Line 201:		Line 171:
	}		}
−	/	+	/*-- Navbar --
−	*-- Navbar --	+
	.navbar {		.navbar {
Line 214:		Line 183:
	margin-bottom: 0;		margin-bottom: 0;
	text-align: center;		text-align: center;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	*/		*/
−
	.hover-effect ul {		.hover-effect ul {
Line 269:		Line 233:
	.hover-effect a:after {		.hover-effect a:after {
	bottom: 75%;		bottom: 75%;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
Line 323:		Line 283:
	-webkit-transition-delay: 0s;		-webkit-transition-delay: 0s;
	transition-delay: 0s;		transition-delay: 0s;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
Line 346:		Line 302:
	}		}
−	/	+	/*-- //Navbar --*/
−	*-- /	+
−	/	+
−	Navbar --*/	+
−		+
−		+
−	/
−	*-- Logo --*/
		+	/*-- Logo --*/
	.logo {		.logo {
Line 381:		Line 331:
	}		}
−	/	+	/*-- //Logo --*/
−	*-- /	+
−	/	+
−	Logo --*/	+
−		+
−		+
−	/	+
−	*--w3layouts--*/	+
−		+
−	/	+
−	*--agileits--*/	+
		+	/*--w3layouts--*/
		+	/*--agileits--*/
	.header-info p {		.header-info p {
	font-size: 15px;		font-size: 15px;
Line 401:		Line 343:
	}		}
−	/	+	/*-- Header-Social-Icons --*/
−	*-- Header-Social-Icons --*/	+
−		+
	.social {		.social {
Line 418:		Line 358:
	width: 50px;		width: 50px;
	height: 50px;		height: 50px;
−	background: url("../	+	background: url("../images/img-sprite.png") no-repeat 0px 0px;
−	images/	+
−	img-sprite.png") no-repeat 0px 0px;	+
	}		}
	ul.social-icons li a.facebook {		ul.social-icons li a.facebook {
Line 443:		Line 381:
	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;
	}		}
Line 468:		Line 402:
	}		}
−	/	+	/*-- //Header-Social-Icons --*/
−	*-- /	+
−	/	+
−	Header-Social-Icons --*/	+
−		+
−		+
−	/	+
−	*-- /	+
−	/	+
−	Header --*/	+
−		+
		+	/*-- //Header --*/
−	/
−	*-- About --*/
		+	/*-- About --*/
	.about {		.about {
Line 507:		Line 431:
	.about-grid {		.about-grid {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	padding: 0;		padding: 0;
	}		}
Line 528:		Line 448:
	}		}
−	/	+	/*-- //About --*/
−	*-- /	+
−	/	+
−	About --*/	+
−		+	/*-- People --*/
−	/	+
−	*-- People --*/	+
−		+
	.people {		.people {
Line 544:		Line 458:
	}		}
−	/	+	/*-- Team --*/
−	*-- Team --*/	+
−		+
	figure {		figure {
Line 567:		Line 479:
	color: #fff;		color: #fff;
	text-transform: uppercase;		text-transform: uppercase;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	font-size: 1.25em;		font-size: 1.25em;
	-webkit-backface-visibility: hidden;		-webkit-backface-visibility: hidden;
Line 621:		Line 529:
	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%);
Line 675:		Line 579:
	transition: opacity 0.35s, transform 0.35s;		transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-100px,0);		-webkit-transform: translate3d(0,-100px,0);
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	transform: translate3d(0,-100px,0);		transform: translate3d(0,-100px,0);
	}		}
Line 719:		Line 619:
	width: 50px;		width: 50px;
	height: 50px;		height: 50px;
−	background: url("../	+	background: url("../images/img-sprite-1.png") no-repeat 0px 0px;
−	images/	+
−	img-sprite-1.png") no-repeat 0px 0px;	+
	}		}
Line 729:		Line 627:
	.social-two span a.twitter {		.social-two span a.twitter {
−	background: url("../	+	background: url("../images/img-sprite-1.png") no-repeat -50px 0px;
−	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;
Line 744:		Line 636:
	.social-two span a.googleplus {		.social-two span a.googleplus {
−	background: url("../	+	background: url("../images/img-sprite-1.png") no-repeat -100px 0px;
−	images/	+
−	img-sprite-1.png") no-repeat -100px 0px;	+
	}		}
Line 754:		Line 644:
	.social-two span a.instagram {		.social-two span a.instagram {
−	background: url("../	+	background: url("../images/img-sprite-1.png") no-repeat -150px 0px;
−	images/	+
−	img-sprite-1.png") no-repeat -150px 0px;	+
	}		}
Line 763:		Line 651:
	}		}
−	/	+	/*-- //Team --*/
−	*-- /	+
−	/	+
−	Team --*/	+
−		+	/*-- Clients --*/
−	/	+
−	*-- Clients --*/	+
−		+
	.people h3 span {		.people h3 span {
Line 797:		Line 679:
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.client {		.client {
	float: right;		float: right;
Line 815:		Line 693:
	}		}
−	/	+	/*-- //Clients --*/
−	*-- /	+
−	/	+
−	Clients --*/	+
−		+	/*-- Services --*/
−	/	+
−	*-- Services --*/	+
−		+
	.tabs {		.tabs {
Line 857:		Line 729:
	text-align: center;		text-align: center;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.service-info img {		.service-info img {
	width: 100px;		width: 100px;
Line 879:		Line 747:
	}		}
−	/	+	/*-- //Services --*/
−	*-- /	+
−	/	+
−	Services --*/	+
−		+
−		+
−	/
−	*-- Gallery --*/
		+	/*-- Gallery --*/
	.gallery {		.gallery {
Line 917:		Line 779:
	-ms-backface-visibility: hidden;		-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;		-o-backface-visibility: hidden;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	backface-visibility: hidden;		backface-visibility: hidden;
	}		}
Line 971:		Line 829:
	clear: both;		clear: both;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.content-grid-effect {		.content-grid-effect {
	display: block;		display: block;
Line 1,025:		Line 879:
	.content-grid-effect.horizontal .img-box:before {		.content-grid-effect.horizontal .img-box:before {
	top: 0;		top: 0;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	left: 0;		left: 0;
	width: 100%;		width: 100%;
Line 1,079:		Line 929:
	.content-grid-effect.vertical .img-box:before {		.content-grid-effect.vertical .img-box:before {
	top: 0;		top: 0;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	left: 0;		left: 0;
	width: 25%;		width: 25%;
Line 1,133:		Line 979:
	.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--*/	+
−		+
	-moz-transform: rotateX(0deg);		-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);		-ms-transform: rotateX(0deg);
Line 1,187:		Line 1,029:
	-o-transform: translate3d(0, 0, 0);		-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);		transform: translate3d(0, 0, 0);
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
Line 1,215:		Line 1,053:
	}		}
−	/	+	/*-- //Gallery --*/
−	*-- /	+
−	/	+
−	Gallery --*/	+
−		+	/*-- Contact-Us --*/
−	/	+
−	*-- Contact-Us --*/	+
−		+
	.contact-us {		.contact-us {
Line 1,247:		Line 1,079:
	text-align: left;		text-align: left;
	margin-bottom: 10px;		margin-bottom: 10px;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	color: #000;		color: #000;
	}		}
Line 1,301:		Line 1,129:
	-moz-box-sizing: border-box;		-moz-box-sizing: border-box;
	box-sizing: border-box;		box-sizing: border-box;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	resize: none;		resize: none;
	color: #FFF;		color: #FFF;
Line 1,355:		Line 1,179:
	-webkit-transition: 0.5s all;		-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;		-moz-transition: 0.5s all;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	-o-transition: 0.5s all;		-o-transition: 0.5s all;
	-ms-transition: 0.5s all;		-ms-transition: 0.5s all;
Line 1,371:		Line 1,191:
	}		}
−	/	+	/*-- //Contact-Us --*/
−	*-- /	+
−	/	+
−	Contact-Us --*/	+
−		+
−		+
−	/
−	*-- Map --*/
		+	/*-- Map --*/
	.map iframe {		.map iframe {
Line 1,404:		Line 1,218:
	}		}
−	/	+	/*-- //Map --*/
−	*-- /	+
−	/	+
−	Map --*/	+
−		+	/*-- Footer --*/
−	/	+
−	*-- Footer --*/	+
−		+
	.footer{		.footer{
Line 1,421:		Line 1,229:
	font-size: 13px;		font-size: 13px;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.address, .contact, .connect {		.address, .contact, .connect {
	padding: 0;		padding: 0;
Line 1,475:		Line 1,279:
	.mail input[type="submit"]:hover {		.mail input[type="submit"]:hover {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	color: #FFF;		color: #FFF;
	background-color: #009688;		background-color: #009688;
Line 1,494:		Line 1,294:
	}		}
−	/	+	/*-- Footer-Social-Icons --*/
−	*-- Footer-Social-Icons --*/	+
−		+
	.connect-social ul li a {		.connect-social ul li a {
Line 1,502:		Line 1,300:
	width: 30px;		width: 30px;
	height: 30px;		height: 30px;
−	background: url("../	+	background: url("../images/img-sprite-2.png") no-repeat 0px 0px;
−	images/	+
−	img-sprite-2.png") no-repeat 0px 0px;	+
	background-size: 300px;		background-size: 300px;
	opacity: 0.7;		opacity: 0.7;
Line 1,531:		Line 1,327:
	.connect-social ul li a.tumblr {		.connect-social ul li a.tumblr {
	background-position: -150px -30px;		background-position: -150px -30px;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
Line 1,555:		Line 1,347:
	}		}
−	/	+	/*-- Footer-Social-Icons --*/
−	*-- Footer-Social-Icons --*/	+
−		+
Line 1,587:		Line 1,377:
	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 {
Line 1,620:		Line 1,404:
	}		}
−	/	+	/*-- //Copyright --*/
−	*-- /	+
−	/	+
−	Copyright --*/	+
		+	/*-- //Footer --*/
−	/
−	*-- /
−	/
−	Footer --*/
−		+	/*-- Go-To-Top-Button --*/
−		+
−	/	+
−	*-- Go-To-Top-Button --*/	+
−		+
	#toTop {		#toTop {
	display: none;		display: none;
Line 1,648:		Line 1,422:
	border: none;		border: none;
	text-indent: 100%;		text-indent: 100%;
−	background: url("../	+	background: url("../images/to-top.png") no-repeat 0px 0px;
−	images/	+
−	to-top.png") no-repeat 0px 0px;	+
	}		}
−	/	+	/*-- //Go-To-Top-Button --*/
−	*-- /	+	/*--w3layouts--*/
−	/	+	/*--agileits--*/
−	Go-To-Top-Button --*/	+
−	/
−	*--w3layouts--*/
−	/
−	*--agileits--*/
		+	/*-- //Index-Page-Styling --*/
−	/
−	*-- /
−	/
−	Index-Page-Styling --*/
Line 1,677:		Line 1,441:
−		+	/*-- Responsive-Code --*/
−		+
−		+
−		+
−	/	+
−	*-- Responsive-Code --*/	+
−		+
Line 1,717:		Line 1,475:
	.service-info {		.service-info {
	padding-top: 30px;		padding-top: 30px;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
	.contact-grid {		.contact-grid {
Line 1,749:		Line 1,503:
	@media screen and (max-width:1600px) {		@media screen and (max-width:1600px) {
	.slider-2 {		.slider-2 {
−	top: 10%;                                              /	+	top: 10%;                                              /*          upleft picture            */
−	*          upleft picture            */	+
−		+
	}		}
	.hover-effect ul {		.hover-effect ul {
Line 1,773:		Line 1,525:
	.slider-1 {		.slider-1 {
	width: 90%;		width: 90%;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
	.slider-2 {		.slider-2 {
Line 1,827:		Line 1,575:
	top: 60px;		top: 60px;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.header-info p {		.header-info p {
	font-size: 14px;		font-size: 14px;
Line 1,881:		Line 1,625:
	}		}
	.about-grid1, .about-grid2, .about-grid3 {		.about-grid1, .about-grid2, .about-grid3 {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	width: 70%;		width: 70%;
	}		}
Line 1,935:		Line 1,675:
	figure.effect-dexter figcaption {		figure.effect-dexter figcaption {
	padding: 4em 1em;		padding: 4em 1em;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
	.social-two {		.social-two {
Line 1,989:		Line 1,725:
	.slider-1 {		.slider-1 {
	width: 85%;		width: 85%;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	left: 15%;		left: 15%;
	top: 0;		top: 0;
Line 2,043:		Line 1,775:
	}		}
	.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;
	}		}
Line 2,097:		Line 1,825:
	top: -15%;		top: -15%;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.about h3 {		.about h3 {
	margin: 20px 0;		margin: 20px 0;
Line 2,151:		Line 1,875:
	height: 155px;		height: 155px;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.copyright {		.copyright {
	margin-left: 25px;		margin-left: 25px;
Line 2,205:		Line 1,925:
	text-align: center;		text-align: center;
	margin-bottom: 40px;		margin-bottom: 40px;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	}		}
	.copyright {		.copyright {
Line 2,259:		Line 1,975:
	@media screen and (max-width:768px) {		@media screen and (max-width:768px) {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.hover-effect ul {		.hover-effect ul {
	width: 85%;		width: 85%;
Line 2,313:		Line 2,025:
	}		}
	.hover-effect ul {		.hover-effect ul {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	width: 100%;		width: 100%;
	background-color: #000;		background-color: #000;
Line 2,367:		Line 2,075:
	@media screen and (max-width:667px) {		@media screen and (max-width:667px) {
	.header {		.header {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	padding: 20px 0 50px;		padding: 20px 0 50px;
	}		}
Line 2,421:		Line 2,125:
	padding-bottom: 75px;		padding-bottom: 75px;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.contact-us {		.contact-us {
	padding-bottom: 50px;		padding-bottom: 50px;
Line 2,475:		Line 2,175:
	.social-two {		.social-two {
	left: 32%;		left: 32%;
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	bottom: 65px;		bottom: 65px;
	}		}
Line 2,529:		Line 2,225:
	@media screen and (max-width:568px) {		@media screen and (max-width:568px) {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.logo a {		.logo a {
	font-size: 45px;		font-size: 45px;
Line 2,583:		Line 2,275:
	}		}
	::-moz-placeholder {		::-moz-placeholder {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	color: #EEE;		color: #EEE;
	}		}
Line 2,637:		Line 2,325:
	font-size: 27px;		font-size: 27px;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.service-info p {		.service-info p {
	line-height: 25px;		line-height: 25px;
Line 2,691:		Line 2,375:
	}		}
	.service-info p {		.service-info p {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	line-height: 27px;		line-height: 27px;
	padding: 0 5px;		padding: 0 5px;
Line 2,745:		Line 2,425:
	}		}
	.social {		.social {
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	margin-top: 15px;		margin-top: 15px;
	}		}
Line 2,799:		Line 2,475:
	margin-bottom: 25px;		margin-bottom: 25px;
	}		}
−	/	+	/*--w3layouts--*/
−	*--w3layouts--*/	+	/*--agileits--*/
−		+
−	/	+
−	*--agileits--*/	+
−		+
	.connect {		.connect {
	padding: 20px 0;		padding: 20px 0;
Line 2,853:		Line 2,525:
	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;
Line 2,907:		Line 2,575:
	}		}
−	/	+	/*-- Responsive-Code --*/
−	*-- Responsive-Code --*/	+

---

Revision as of 05:41, 12 September 2016

body {

 padding: 0;
 margin: 0;
 background: transparent;                 /*  #FFF  */

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%;
 }

#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 --*/