html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 45px 0 0;
	position: relative;
	font-family: Arial;
	font-weight: normal;
	background-color: #fff;
}
body.home {
	opacity: 0;
}
html ,
body ,
.portfolio.the-rest {
	transition: all 0.4s ease;
}

a { color: #0000ff; text-decoration: none; }

header {
	z-index: 1;
	position: fixed;
	width: 100%; height: 45px;
	top: 0; left: 0; right: 0;
	background-color: rgba(0,0,0,0.50);
	transition: 500ms height,background-color ease-in-out;
	color: #fff;
	z-index: 100;
}
	header .lgo ,
	header .mnu {
		margin: 0; padding: 0;
		display: inline-block;
	}
	header .lgo {
		width: 25%;
		float: left;
		height: 44px;
 		text-align: left;
	}
		header .lgo img {
			width: auto;
			height: 100%;
			margin: 0 5%;
		}
	header .mnu {
		margin: 0;
		padding: 0;
		width: 75%;
		float: right;
		text-align: right;
		list-style-type: none;
	}
		header .mnu ul {
			margin: 0;
			padding: 0;
		}
		header .mnu ul ,
		header .dashicons-menu ,
		header .dashicons-no-alt {
			display: none;
			cursor: pointer;
		}
		.desktop header .mnu .desktop ,
		.mobile header .mnu .mobile ,
		.tablet header .mnu .mobile {
			display: block;
		}
		.desktop.xsml header .mnu .mobile {
			top: 49px;
		}
			header .mnu li {
				padding: 0 5%;
				line-height: 44px;
				display: inline-block;
			}
			header .mnu li a {
				color: #fff;
				text-decoration: none;
			}

.hero {
	height: 100vh;
  	margin: 0;
	padding: 0;
	position: relative;
}
	.hero .dashicons {
	    position: absolute;
	    top: 50%;
		z-index: 1;
		width: 50px;
		height: 50px;
		font-size: 50px;
	}
	.hero .dashicons-arrow-left-alt2 {
		left: 0px;
	}
	.hero .dashicons-arrow-right-alt2 {
		right: 0px;
	}	
	.hero .dashicons-arrow-down-alt2 {
		text-shadow: 0px 0px 15px rgba(255,255,255,.5);
	    position: absolute;
	    bottom: 40px;
	    top: unset;
	    width: 100%;
	    cursor: pointer;
    }
	.video-responsive{
	    overflow:hidden;
	    padding-bottom:56.25%;
	    position:relative;
	    height:0;
	}
	.video-responsive iframe{
	    left:0;
	    top:0;
	    height:100%;
	    width:100%;
	    position:absolute;
	}
	.hero li {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
/* 		display: inline-block; */
		z-index: -2;

/* 	    overflow:hidden; */
/* 	    padding-bottom:56.25%; */
/* 	    position:relative; */
/* 	    height:0; */
	}
	.hero li {
		display: none;
/* 		opacity: 0; */
	}
	.hero li:first-child {
		display: block;
/* 		opacity: 1; */
	}
	.hero li video {
		position: absolute;
		left: 50%;
		transform: translate(-50%,0);
   /*
	    left:0;
	    top:0;
	    height:100%;
	    width:100%;
	    position:absolute;
*/
	}
	.hero li#consult {
		background-image: url(../vid/consult.jpg);
	}
	.hero li#web-dev {
		background-image: url(../vid/web-dev.jpg);
	}
	.hero li#host {
		background-image: url(../vid/host.jpg);
	}
	.mobile .hero li video {
		display: none;
	}
	.hero li h2 {
		text-align: center;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    width: 98%;
	    font-size: 50px;
	}

.srvs ,
.tech ,
.staff ,
.partners ,
.clients ,
.info {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style-type: none;
    float: left;
    background-color: #fff;
    text-align: center;
}
.srvs {
	padding: 5% 0;
}
    .iphone .srvs {
		padding: 10% 0 5%;
    }
.tech {
	padding: 0 0 5%;
}
.staff {
	padding: 0 0 5% 0;
	background-color: #2185f5;
}
.clients ,
.info {
	padding-top: 5%;
}
.partners ,
.clients {
	padding-top: 0;
	padding-bottom: 5%;
}
.info {
	padding-top: 0;
	background-color: #2185f5;
}
	.srvs li ,
	.tech li ,
	.staff li ,
	.partners li ,
	.clients li ,
	.info li {
		width: 33%;
		text-align: center;
		display: inline-block;
	    float: unset;
	    vertical-align: top;
	}
	.srvs li {
		float: left;
	}
		.srvs li a {
			color: #000;
			text-decoration: none;
		}
		.srvs li img {
			border: 0px;
		}
	.tech li {
		width: 16.6%;
		height: 175px;
	}
	.staff li {
		width: 50%;		
	}
	.partners li {
		width: 33%;
/* 		height: 150px; */
	}
	.clients li {
		width: 25%;
		height: 125px;
	}
	.info li {
		width: 33%;
		height: 200px;		
	}
		.srvs li div ,
		.tech li div ,
		.staff li div ,
		.partners li div ,
		.clients li div ,
		.info li div {
			text-align: center;
			padding: 5%;
		}
		.partners li div {
			height: auto;
		}
		.staff li div {
			width: 75%;
			min-height: 300px;
			margin: 0 auto;
		    box-shadow: 0px 0px 35px 0px rgba(15,15,43,0.58);
		    background-color: #fff;
		}
			.srvs li img ,
			.tech li img ,
			.staff li img ,
			.partners li img ,
			.clients li img {
			    -webkit-border-radius: 50%;
			    border-radius: 50%;
				display: inline-block;
			}
			.srvs li img ,
			.staff li img ,
			.partners li img ,
			.clients li img {
				box-shadow: 0px 0px 35px 0px rgba(15,15,43,0.58);
				transition: .25s box-shadow ease-in-out;
			}
			.partners li img:hover ,
			.clients li img:hover {
				box-shadow: 0px 0px 1px 1px rgba(0,0,0,.25);
			}
			.srvs li img {
				width: 200px;
				height: 200px;
			}
			.tech li img {
				width: 105px;
				height: 105px;
				border: 1px solid rgb(225,225,225);;
			}
			.staff li img {
				width: 105px;
				height: 105px;
			}
			.partners p {
				z-index: 1;
				transform-origin: center center;
				transition: 1s all ease;
				font-weight: normal;
				position: relative;
				top: -90px;
				color: #000;
				font-size: 0px;
				opacity: 0;
			}
			.partners p.hvr {
				top: 0px;
				font-size: 16px;
				opacity: 1;
			}
			.partners li img {
				position: relative;
				width: 125px;
				height: 125px;
				z-index: 2;
			}
			.clients li img {
				width: 105px;
				height: 105px;
			}

		.srvs h2 ,
		.tech h2 ,
		.staff h2 ,
		.partners h2 ,
		.clients h2 {
			float: left;
			width: 100%;
			text-align: center;
		}
	#portfolio {
		opacity: 0;
		margin: 45px 0 0;
		position: fixed;
		top: 0; left: 0; right: 100%; bottom: 0;
		background-color: #fff;
    	overflow: auto;
	}
		#portfolio #top.dashicons-no-alt {
		    height: auto; width: auto;
		    position: absolute;
		    right: 18px;
		    top: 10px;
		    cursor: pointer;
		    font-size: 30px;
    	}
    	#portfolio #btm { overflow: hidden; }
    	#portfolio #btm .dashicons-no-alt {
		    height: auto; width: auto;
		    font-size: 30px;
	    	text-align: center;
	    	cursor: pointer;
	    	display: none;
    	}
    	#portfolio .dashicons-no-alt:hover {
   	    	transform-origin: center center;
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
  	    	transform: rotate(360deg);
	    	transition: all .5s ease;
    	}
    	#portfolio #btm .dashicons-no-alt.shw {
	    	display: block;
    	}
    	#portfolio .content {
	    	width: 90%;
	    	margin: 0 auto;
	    	opacity: 0;
    	}
    	#portfolio .content p.hdr {
	    	margin: 0.5% 0;
    	}
    	#portfolio .prjGallery img {
	    	margin-top: 1%;
    	}
    	#portfolio .prjGallery img {
	    	width: 100%;
	    	height: auto;
	    	margin-bottom: 1%;
    	}
    	#portfolio .prjVideo {
	    	clear: both;
    	}
	.portfolio {
		width: 90%;
		margin: 0 auto 0;
		padding: 0;
		text-align: center;
	}
		.portfolio li ,
		.portfolio li img {
			display: inline-block;
		}
		.portfolio li {
			margin: 2%;
			vertical-align: top;
		}
		.portfolio.featured li {
			width: 20%;
		}
		.portfolio.categories li ,
		.portfolio.the-rest li {
			width: 12.5%;
		}
		.portfolio.the-rest li.hid {
			display: none;
		}
		.portfolio li ,
		.portfolio li img ,
		.portfolio li span {
			transform-origin: 50% 50%;
		}
		.portfolio li img {
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
		    box-shadow: 0px 0px 35px 0px rgba(15,15,43,0.58);
		    -webkit-border-radius: 25%;
		    border-radius: 25%;
		    cursor: pointer;
		}
		.portfolio.featured li img ,
		.portfolio.the-rest li img {
		    box-shadow: 0px 0px 35px 0px rgba(15,15,43,0.58);
		    -webkit-border-radius: 50%;
		    border-radius: 50%;
		}
		.portfolio li img:hover {
			box-shadow: 0px 0px 1px 1px rgba(0,0,0,.25);
		}

		#contact-form {
			width: 90%;
			margin: 0 auto;
			background-color: #fff;
			color: #000;
		}
			#contact-form #how {				
				display: inline-block;
				margin: 20px 0;
				padding: 0;
			}
				#contact-form #how li {
					vertical-align: bottom;
					display: inline-block;
				}
					#contact-form #how h2 {
						margin: 0;
					}
			#contact-form #form {
				padding: 0;
			}
				#contact-form #form li {
					height: 0;
					width: 100%;
					display: block;
					transition: 1s ease height;
					overflow-y: hidden;
				}
				#contact-form #form li input {
					width: 98.95%;
				}
				.mobile #contact-form #form li input {
					width: 94.8%;
				}
				#contact-form #form li.shw {
					margin: 0;
					height: 65px;
				}
				.mobile #contact-form #form li.shw {
					height: 100px;
				}
				#contact-form #form li h3 {
					font-weight: normal;
				}
					#contact-form #form h3 {
						margin: 0;
					}
			#contact-form #submit {
				padding: 0;
			}
		
footer {
	float: left;
	background-color: grey;
	width: 100%;
	text-align: center;
	padding: 1% 0;
}
footer h4 {
	font-weight: normal;
	text-align: center;
	margin: 0;
}

/* Mobile */

.xsml header .mnu .desktop {
	display: none;
}
.mobile header {
	overflow: hidden;
}
.xsml header .mnu ,
.xsml header .mnu .mobile ,
.mobile header .mnu ,
.mobile header .mnu .mobile {
	width: 100%;
}
.xsml header .mnu .mobile ,
.mobile header .mnu .mobile {
	display: block;
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	height: 0;
/* 	background-color: rgba(0,0,0,0.50); */
/* 	transition: 500ms height,bottom ease-in-out; */
	z-index: 5;
}
.xsml header.opn ,
.mobile header.opn {
	background-color: rgba(0,0,0,0.75);
}
.xsml header.opn ,
.mobile header.opn ,
.xsml header.opn .mnu .mobile,
.mobile header.opn .mnu .mobile {
	height: 100vh;
}

.xsml header .dashicons ,
.mobile header .dashicons {
    display: block;
    position: absolute;
    top: 5px;
    right: 10px;
    height: 30px;
    width: 30px;
    font-size: 35px;
    height: 30px;
    width: 30px;
    padding: 0;
}
.xsml header .mnu .mobile li ,
.mobile header .mnu .mobile li {
	width: 100%;
	display: inline-block;
	text-align: center;
}

.xsml header .mnu li {
	padding: 0;
/* 	padding: 0 2%; */
}

.sml .srvs li ,
.xsml .srvs li {
	width: 100%;
}

.sml .tech li {
	width: 33%;
}
.xsml .tech li {
	width: 50%;
}

.sml .staff li ,
.xsml .staff li {
	width: 100%;
	padding-bottom: 5%;
}

.xsml .partners li {
	width: 50%;
	padding-bottom: 5%;
}

.xsml .clients li {
	width: 50%;
	padding-bottom: 5%;
}

.sml .info li ,
.xsml .info li {
	width: 100%;
	height: auto;
	padding-bottom: 5%;
}

.xsml footer {
	margin: 0% auto;
	padding: 0;
}
	.xsml footer h4 {
		margin: 0;
		padding: 1% 0;
		font-size: 12px;
	}

		.sml .portfolio li {
			width: 20%;
		}
		.xsml .portfolio li {
			width: 25%;
		}
.copyright a.fb {
	color: #000;
	position: relative;
	top: -1px;
}