body{
	padding:0;
	margin:0;
	font-family: 'Merienda', cursive;
	text-align:center;
	overflow:hidden;
	height:100vh;
	background:radial-gradient(#1c47a9,#0b4b84);
}
.menulinks{
	border:solid;
	display:block;
	padding:2%;
	text-decoration:none;
}
.menulinks:hover{
	background:rgb(255,255,255,0.2);
}
.iemenu{
	text-align:center;
}
.iemainmenu{
	background:green;
	padding:1.5%;
	color:white;
	text-decoration:none;
	border-radius:5%;
	font-size:1.5em;
	padding-bottom:0.5%;
	transition:0.5s;
}
.iemainmenu:hover{
	transition:0.5s;
	padding:2%;
	padding-bottom:1%;
	font-size:1.6em;
	box-shadow:2px 2px 2px 2px rgb(0,0,0, 0.5);
}
#dragmenu{
	width:100%;
	height:100vh;
	background-color:rgb(4, 160, 22, 0.98);
	margin-top:-1000px;
	z-index:200;
	position:absolute;
}
#ourteam{
	width:100%;
	height:100vh;
	background-color:rgb(155, 5, 5, 0.98);
	color:white;
	margin-top:-1000px;
	z-index:200;
	position:absolute;
	overflow-x: hidden;
	overflow-y: auto;
}

#ourservice{
	width:100%;
	height:100vh;
	background-color:rgb(143, 18, 195, 0.98);
	color:white;
	margin-top:-1000px;
	z-index:200;
	position:absolute;
	overflow-x: hidden;
	overflow-y: auto;
}
#ourcontact{
	width:100%;
	height:100vh;
	background-color:rgb(19, 166, 179, 0.98);
	color:white;
	margin-top:-1000px;
	z-index:200;
	position:absolute;
	overflow-x: hidden;
	overflow-y: auto;
}
.experteam{
	top:5%;
	left:5%;
	text-align:center;
}
.expertservice{
	top:5%;
	left:5%;
}
.expertcontact{
	top:5%;
	left:5%;
}
.dropmenu{
	margin-top:0 !important;
	transition:0.5s;
	
}
.pullup{
	margin-top:-10000 !important;
	transition:0.5s;
}
.closeBtn{
	width: 100%;
	text-align:right;
	border:none;
	padding-top:1%;
}
.xbtn{
	color:white;
	margin-right:2%;
	border:none;
	text-decoration:none;
	font-size:2.5em;
	
}
#xtext{
	display:none;
	font-size:0.4em;
	
}
#xsymb{
	font-size:0.4em;
}
.xbtn:hover #xsymb{
	display:none;
	
	
}
.xbtn:hover #xtext{
	display:inline;
}

.forlogo{
	border:none;
	width:100%;
	padding-top:5%;
}
.ielogo{
		width:30%;
		height:auto;
		overflow:visible;
	}
.st0{
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:none;
	stroke:#c5c7c4;
	stroke-width:0.75;
	stroke-miterlimit:10;
	opacity:0;
	animation:bgmap 2s linear forwards;
	animation-delay:4s;
	}
@keyframes bgmap{
	to{
		opacity:1;
	}
}
.st1{
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:none;
	stroke:#eaeaea;
	stroke-width:1;
	stroke-miterlimit:10;
	opacity:0;
	animation:bgline 2s linear forwards;
	animation-delay:4.5s;
	}
@keyframes bgline{
	to{
		opacity:1;
	}
}
.st2{
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:none;
	stroke:white;
	stroke-width:2;
	stroke-miterlimit:10;
	stroke-dashoffset:1000;
	stroke-dasharray:10;
	opacity:0;
	animation:maintxt 2s linear forwards;
	animation-delay:2s;
	}
@keyframes maintxt{
	to{
		opacity:1;
		stroke-dashoffset:0;
		stroke-dasharray:0;
	}
}
.st3{
	
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:none;
	stroke:white;
	stroke-width:2;
	stroke-miterlimit:10;
	stroke-dashoffset:1000;
	stroke-dasharray:1000;
	animation:xtxt 3s linear forwards;
	}
@keyframes xtxt{
	to{
		stroke-dashoffset:0;
		stroke-dasharray:0;
	}
}
.st4{
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:none;
	stroke:white;
	stroke-width:1;
	stroke-miterlimit:10;
	opacity:0;
	animation:texts 1s linear forwards;
	animation-delay:3.7s;
	}
@keyframes texts{
	to{
		opacity:1;
	}
}
.st19{
	stroke:orange;
	stroke-width:3;
}
.landscapes{
	border:none;
	width:100%;
	height:100%;
	z-index:-2;
	position:relative;
	
}


.locate{
	color:white;
	text-align:left;
	z-index:-5;
	float:left;
	position:absolute;
	padding:1%;
}
.services{
	border:none;
	height:50vh;
	width:100%;
	position:fixed;
	bottom:0;
	padding-top:5%;
}

.it{
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:white;
	stroke:white;
	stroke-width:2;
	stroke-miterlimit:10;
	opacity:0;
	animation:texts 1s linear forwards;
	animation-delay:4s;

}
.treehole{
	fill:#0b4b84;
	}


.boxing{
	fill-rule:evenodd;
	clip-rule:evenodd;
	fill:#ff873d;
	stroke:none;
	stroke-miterlimit:10;
	opacity:0;
	animation:texts 1s linear forwards;
	animation-delay:3.7s;
	}


.ls{
	opacity:0;
	animation:landapp 2s linear forwards;
	animation-delay:4.5s;
}

@keyframes landapp{
	to{
		opacity:1;
	}
}
.clients{
	opacity:0;
	z-index:100;
	position:absolute;
	color:white;
	bottom:30%;
	margin-left:3%;
	width:20%;
	border:none;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	border-radius:10px 10px 10px 10px;
	border-bottom:solid;
	left:0;
	float:left;
	animation:showclients 1s linear forwards;
	animation-delay:6.5s;
}
@keyframes showclients{
	to{
		opacity:1;
	}
	
}
.servcont{
	opacity:0;
	z-index:100;
	position:absolute;
	color:white;
	bottom:5%;
	width:75%;
	border:none;
	text-align:center;
	right:0;
	float:right;
	animation:scrollmenu 1s linear forwards;
	animation-delay:6s;
}
@keyframes scrollmenu{
	to{
		opacity:1;
	}
}
.servcont ul {
	list-style-type:none;
	text-align:center;
}
.servcont ul li{
	list-style-type:none;
	text-align:center;
	float:right;
	margin-right:15px;
}

.servcont ul li a{
	background:black;
	color:white;
	padding:10px;
	border-radius:5px 5px 5px 5px;
	transition:0.5s;
}
.servcont ul li a:hover{
	background:white;
	color:black;
	transition:0.5s;
	text-decoration:none;
}

.glittering {
		opacity:0;
		 animation: glitter 4.5s linear 0s infinite normal;
		-webkit-animation: glitter 4.5s linear 0s infinite normal;
		-moz-animation: glitter 4.5s linear 0s infinite normal;
		-ms-animation: glitter 4.5s linear 0s infinite normal;
		-o-animation: glitter 4.5s linear 0s infinite normal;
		animation-delay:5s;
		transition:1s;
	}
.glittering1 {
		opacity:0;
		 animation: glitter1 4.5s linear 0s infinite normal;
		-webkit-animation: glitter1 4.5s linear 0s infinite normal;
		-moz-animation: glitter1 4.5s linear 0s infinite normal;
		-ms-animation: glitter1 4.5s linear 0s infinite normal;
		-o-animation: glitter1 4.5s linear 0s infinite normal;
		animation-delay:5.5s;
		 transition:2s;
}

@-webkit-keyframes glitter1 {
	0% { -webkit-transform: scale(1.0); opacity: 1; }
	25% { -webkit-transform: scale(0.5); opacity: 0; }
	50% { -webkit-transform: scale(1.0); opacity: 1; }
	75% { -webkit-transform: scale(0.5); opacity: 0; }
	100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter1 {
	0% { -moz-transform: scale(1.0); opacity: 1; }
	25% { -moz-transform: scale(0.5); opacity: 0; }
	50% { -moz-transform: scale(1.0); opacity: 1; }
	75% { -moz-transform: scale(0.5); opacity: 0; }
	100% { -moz-transform: scale(1.0); opacity: 1; }
}

@-webkit-keyframes glitter {
	0% { -webkit-transform: scale(1.0); opacity: 1; }
	25% { -webkit-transform: scale(0.5); opacity: 0; }
	50% { -webkit-transform: scale(1.0); opacity: 1; }
	75% { -webkit-transform: scale(0.5); opacity: 0; }
	100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter {
	0% { -moz-transform: scale(1.0); opacity: 1; }
	25% { -moz-transform: scale(0.5); opacity: 0; }
	50% { -moz-transform: scale(1.0); opacity: 1; }
	75% { -moz-transform: scale(0.5); opacity: 0; }
	100% { -moz-transform: scale(1.0); opacity: 1; }
}
#star1{
	opacity:0;
	animation:loadstar 1s linear forwards;
	animation-delay:4s;
	
	}
@-webkit-keyframes loadstar{
	to{
		opacity:1;
	}
}
@keyframes loadstar{
	to{
		opacity:1;
	}
}
.servtitle{
	color:white;
	border:none;
	font-size:1.5em;
	position:absolute;
	padding-bottom:15%;
	bottom:0;
	text-align:center;
	width:100%;
	float:left;
	opacity:0;
	animation:showservtitle 1s linear forwards;
	animation-delay:6s;
}
@keyframes showservtitle{
	to{
		opacity:1;
	}
}
.services a{
	transition:0.5s;
	padding:5px;
	text-decoration:none;
	color:white;
	border-radius:5px 5px 5px 5px;
}
.services a:hover{
	background:#0E7F00;
	color:white;
	transition:0.5s;
}
#webdesigcover{
	width:5%;
}
.webdesigico{
	fill:#42b3f4;
	stroke:black;
	stroke-width:2;
}
.webdesigtags{
	fill:none;
	stroke:white;
	stroke-width:2;
}
.serversetupico{
	fill:none;
	stroke:white;
	stroke-width:1.5;
}

.secure{
	fill:#1fa52a;
	stroke:white;
	stroke-width:2;
}
.securecircle{
	fill:white;
}
.sectick{
	fill:#1fa52a;
}

.network{
	fill:black;
}
.networkmonitor{
	fill:#04a7f2;
}
.repair{
	fill:black;
}
.repair1{
	fill:white;
}
.repair2{
	fill:blue;
}
#webdesigntotal{
	opacity:1;	
}

#servertotal{
	opacity:1;
	
}
#securitytotal{
	opacity:1;
	
}
#networktotal{
	opacity:1;

}
#repairtotal{
	opacity:1;

}

#slideshow {
  margin: 0;
  margin-top:10px;
  position: absolute;
  width: 100%;
  height:100%;
  
}

#slideshow > div {
  position: absolute;
}

#slideshow > div img{
  border-radius:10px 10px 10px 10px;
	border:none;
}
.expertphoto{
	border-radius:50%;
	width:10%;
	height:auto;
	box-shadow:2px 2px 5px 5px rgb(0,0,0,0.2);
}
.expertphoto1{
	border-radius:50%;
	width:20%;
	height:auto;
	box-shadow:2px 2px 5px 5px rgb(0,0,0,0.2);
}
#expertname{
	display:block;
	font-size:1.5em;
	
}
#expertpos{
	display:block;
	font-size:1em;
	font-style:italic;
}
.memb{
	padding-top:2%;
	border:none;
	padding-bottom:2%;
}
div .memb:hover{
	background:rgb(255,255,255,0.2);
	cursor:pointer;
	box-shadow:2px 2px 5px 5px rgb(0,0,0,0.1);
}
.membtable{
	border:none;
	width:100%;
	margin-bottom:5%;
}
.servicesvg{
	width:100%;
	height:90vh;
}
.expertplane{
	border:none;
	color:white;
	position:absolute;
	width:15%;
	top:40%;
	left:-20%;
	animation:fly 15s linear infinite;
	animation-delay:7s;
	}
.flyingplane{
	width:100%;
}
.expertplane:hover{
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
	cursor:pointer;
}
@keyframes fly{
	0%{left:-10%;transition:1.5s;transform:rotate(-10deg);}
	25%{left:20%;transition:1.5s;top:30%;transform:rotate(5deg);}
	50%{left:40%;transition:1.5s;top:39%}
	75%{left:80%;transition:1.5s;top:45%;transform:rotate(-10deg);}
	100%{left:120%;transition:1.5s;top:40%;}
}
@media only screen and (max-width:600px){
	.expertplane{
	width:25%;
	top:40%;
	animation:fly 15s linear infinite;
	}
}
.myplane{
	stroke:rgb(232, 197, 2);
	stroke-width:0.2;
	fill:none;
}
.myplanetyre{
	stroke:rgb(0, 0, 0);
	stroke-width:0.2;
	fill:black;
}
.myplanept1{
	stroke:none;
	stroke-width:0;
	fill:rgb(255, 228, 75);
}
.myplaneptwindow{
	stroke:none;
	stroke-width:0;
	fill:rgb(37, 144, 227);
}
.planered{
	stroke:none;
	stroke-width:0;
	fill:rgb(241, 0, 0);
}
.planetexts{
	stroke:white;
	stroke-width:0.11;
	fill:rgb(255, 255, 255);
}
.expertloon{
	border:none;
	color:white;
	position:absolute;
	width:10%;
	top:100%;
	animation:flyloon 25s linear infinite;
	animation-delay:12s;
}
.expertloon:hover{
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	-o-animation-play-state:paused;
	animation-play-state:paused;
	cursor:pointer;
}
@keyframes flyloon{
	0%{top:100%;left:30%;transition:1s;}
	40%{top:50%;left:30%;transform:rotate(5deg);}
	50%{top:40%;left:40%;}
	60%{top:35%;left:50%;}
	70%{top:35%;left:60%;}
	80%{top:20%;left:65%;}
	90%{top:10%;left:70%;}
	
	100%{top:-50%;left:75%;}
}
.loontop{
	fill:radial-gradient(#B21212,#FF0000);
}
.loonbase1{
	fill:red;
}
.loonbase2{
	fill:white;
}
.loonrope{
	fill:red;
}
.loonkobase{
	fill:orange;
}
.toppur{
	fill:#9300d7;
}
.topblu{
	fill:#0a05c8;
}
.topre{
	fill:#eb0303;
}
.toporg{
	fill:#ff6600;
}
.topgre{
	fill:#00a01a;
}
.topyel{
	fill:#ffde00;
}
.contactform{
	float:left;
	width:48%;
	border:none;
	color:white;
	padding-top:2%;
	padding-bottom:2%;
	margin-left:0.6%;
	height:70vh;
}
.contactinfo{
	float:right;
	width:48%;
	border:none;
	color:white;
	padding-bottom:2%;
	margin-right:0.6%;
	height:30vh;
}
.contactmap{
	float:right;
	width:48%;
	border:none;
	padding-bottom:1%;
	color:white;
	margin-right:0.6%;
	background:rgb(255,255,255,0.2);
}

input[type=text], input[type=email], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}


#contacttitle{
	font-size:1.5em;
	display:block;
}
#contactanswer{
	margin-top:3%;
	font-size:1em;
	display:block;
}