*{
	margin: 0%;
	padding: 0%;
}

html, body{
	height: 100%;
	background-image: url(images/back4.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

a{
	text-decoration: none;
	color: unset;
}

/****************Menue***************/
#menue{
	width: 15%;
	height: auto;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 5%;
	margin-left: 17.5%;
	background-color: rgb(250,250,250);
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	position: fixed;
	scroll-behavior: smooth;
}

.profo{
	margin-top: 0%;
	width: 100%;
}

.profo img{
	width: 70%;
	margin-left: 15%;
	border-radius: 100px;
	background-color: ;
	border: 1px solid orangered;
	background-color: ;
}

.res{
	width: 100%;
	margin-top: 5%;
	color: ;
	text-align: center;
}

.res i{
	width: 20%;
	color: orangered;
}



.profo h1{
	width: 100%;
	margin-top: 5%;
	text-align: center;
	font-family: sans-serif;
	font-size: 120%;
	color: rgba(54,69,79, 0.8);
}

.profo p{
	width: auto;
	text-align: center;
	font-family: courier;
	font-size: ;
	color: orangered;
}


.proli{
	width: 100%;
	margin-top: 10%;
		border-bottom: 1px solid rgba(54,69,79, 0.5);
}


.proli table{
	width: 100%;
	margin-top: ;
	border-top: 1px solid rgba(54,69,79, 0.5);
}


.proli table tr{
	list-style: none;
	width: 100%;
	font-family: sans-serif;
	border: 3px solid black;
}

.proli table tr .th1{
	width: auto;
	padding-top: 5%;
	padding-bottom: 5%;
	font-size: 130%;
	color: rgba(54,69,79, 0.5);
}


.proli table tr .th2{
	width: auto;
	padding-top: 5%;
	padding-bottom: 5%;
	text-align: left;
	color: rgba(54,69,79, 0.5);
}

.proli table tr .th3{
	width: 25%;
	padding-top: 5%;
	padding-bottom: 5%;
	border-left: 1px solid rgba(54,69,79, 0.5);
	color: rgba(54,69,79, 0.5);
}


.proli table tr:hover .th1{
	color: rgb(54,69,79);
	transition: 1s;
}


.proli table tr:hover .th2{
	color: rgb(54,69,79);
	transition: 1s;
}

.proli table tr:hover .th3{
	background-color: darkorange;
	border-radius: 100px;
	color: rgb(54,69,79);
	transition: 1s;
	border-left: unset;
}



/****************Body***************/

.bodycv{
	width: 50%;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 5%;
	margin-left: 32.5%;
	margin-bottom: 5%;
	position: absolute;
	background-color: rgb(255, 255, 255);
	font-family: sans-serif;
}

.hello{
	width: 80%;
	margin-left: 5%;
	text-align: justify;
}

.hello h2{
	font-family: sans-serif;
	color: rgba(54,69,79, 0.8);
}

.hello p{
	margin-top: 2%;
	font-family: sans-serif;
	color: rgba(54,69,79, 0.7);
}

#abo{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
}


.ser{
	width: 30%;
	float: left;
	margin-top: 1%;
}

.ser div{
	width: 96%;
	padding: 2%;
	margin-bottom: 5%;
	background-color: darkorange;
}

.ser div h2{
	width: 98%;
	padding: 1%;
	background-color: whitesmoke;
	text-align: center;
	font-family: sans-serif;
	color: rgba(54,69,79, 0.8);
}


.skill{
	width: 30%;
	margin-left: 5%;
	float: left;
	float: left;
}

.skill h2{
	font-family: sans-serif;
	color: rgba(54,69,79, 0.8);	
	margin-left: %;
}


.skill ul{
	width: 100%;
	margin-top: 7%;	
}

.skill ul li{
	list-style: none;
	width: 100%;
	margin-top: 2%;
	color: rgba(54,69,79, 0.7);
	font-family: courier;
}



.skill ul li i{
	color: darkorange;
}


.skill ul li b{
	margin-top: 2%;
	margin-left: 5%;
}

.skill p{
	list-style: none;
	width: 100%;
	margin-top: 5%;
	color: darkorange;
	font-family: sans-serif;
}


#concept{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
}

.con1{
	width: 25%;
	padding-top: 4%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	padding-bottom: 4%;
	margin: 1.5%;
	float: left;
	border: 1px solid rgba(54,69,79, 0.2);
}

.con1 i{
	width: 100%;
	display: block;
	text-align: center;
	font-size: 200%;
	font-weight: bold;
	color: rgba(54,69,79, 0.7);
}

.con1 h3{
	width: 100%;
	margin-top: 3%;
	text-align: center;
	color: darkorange;
	font-family: sans-serif;
}


.con1 p{
	width: 100%;
	margin-top: 5%;
	text-align: center;
	color: rgba(54,69,79, 0.7);

}

.con1:hover{
	border: 1px solid darkorange;
	transition: 1s;
	transform: scale(1.1);
}

.con1:hover i{
	transform: rotate(360deg);
	transition: 1s;
}

.language{
	width: 90%;
	height: 20%;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
	background-image: url(images/world1.png);
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-origin: content-box;

}

.language div{
	width: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	float: left;
}

.language h3:hover{
	text-shadow: 2px 2px 4px silver;
}

.language h3{
	width: 20%;
	padding: 5%;
	margin: 1.5%;
	border-bottom: 3px solid darkorange;
	float: left;
	font-family: sans-serif;
	font-size: 200%;
	color: rgba(54,69,79, 0.7);
}



#memo{
	width: 90%;
	padding-top: 5%;
	padding-bottom: 5%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
	background-color: whitesmoke;
}

.memo1{
	width: 100%;
	float: left;
}


.memo1 img{
	width: 20%;
	margin-top: -2%;
	margin-left: 40%;
}

#memo:hover img{
	animation: shaking 1s alternate ;
	animation-timing-function: steps(4, jump-start);
	animation-timing-function: steps(10, jump-end);
	animation-timing-function: steps(20, jump-none);
	animation-timing-function: steps(5, jump-both);
	animation-timing-function: steps(6, start);
	animation-timing-function: steps(8, end);
}

@keyframes shaking{
	from{
		transform: rotate(-45deg);
	}
	25%{
		transform: rotate(45deg);
	}
	50%{
		transform: rotate(-45deg);
	}
	75%{
		transform: rotate(45deg);
	}
	to{
		transform: rotate(-45deg);
	}
}



.memo1 div{
	width: 90%;
	margin-top: 2%;
	margin-left: 5%;
}


.memo1 div p{
	width: 100%;
	float: left;
	text-align: center;
	font-family: sans-serif;
	color: rgba(54,69,79, 0.7);
}

.memo1 h4{
	width: 100%;
	margin-top: 3%;
	float: left;
	text-align: center;
	font-family: Century Gothic;
	color: rgba(54,69,79, 0.7);
}


#memo:hover h4{
	text-shadow: -3px 3px 5px;
	transform: 1s;
}





/****************Box1***************/
#box1{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
}


#box1 h2{
	width: 96%;
	padding: 2%;
	text-align: center;
	font-family: sans-serif;
	color: darkorange;
	float: left;
	background-color: whitesmoke;
}

#box1 h3{
	margin-top: 5%;
	margin-left: 3%;
	margin-bottom: -2%;
	font-family: sans-serif;
	color: rgba(54,69,79, 0.7);
	float: left;
	background-color: white;
}

#box1 table{
	margin-top: 5%;
	width: 100%;
}

#box1 table tr th{
	width: 40%;
	padding: 5%;
	border: 1px solid rgba(54,69,79, 0.1);
}

#box1 table tr th h4{
	padding: 0%;
	color: darkorange;
	font-family: sans-serif;
}

#box1 table tr th p{
	padding: 0%;
	margin-top: 2%;
	color: rgba(54,69,79, 0.7);
	font-family: Century Gothic;
}

.otce{
	width: 90%;
	padding: 5%;
	text-align: center;
	border: 1px solid rgba(54,69,79, 0.1);
}

.otce h4{
	padding: 0%;
	color: darkorange;
	font-family: sans-serif;	
}

.otce p{
	padding: 0%;
	margin-top: 2%;
	color: rgba(54,69,79, 0.7);
	font-family: Century Gothic;
}




/****************Box2***************/
#box2{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
}

#box2 h2{
	width: 96%;
	padding: 2%;
	text-align: center;
	font-family: sans-serif;
	color: darkorange;
	float: left;
	background-color: whitesmoke;
}


.skillist{
	width: 100%;
	margin-top: 5%;
	float: left;
	align-items: center;
}

.skillist .logo{
	width: 80%;
	padding: 2%;
	margin-left: 8%;
	margin-right: -15%;
	float: left;
}


.skillist .logo div{
	width: 18%;
	margin: 1%;
	float: left;
	text-align: center;
}


.skillist .logo div img{
	width: 40%;
	margin-left: ;
	margin-right: ;
}


#logo1 img{
	animation: scale 1s infinite alternate;
}

#logo2 img{
	animation: scale 1s infinite alternate;
	animation-delay: 1s;
}

@keyframes scale{
	from{
		transform: scale(1.0);
	}
	to{
		transform: scale(1.3);
	}
}


.skillist .logo div h3{
	width: %;
	margin-top: %;
	margin-left: %;
	margin-right: ;
	font-family: courier;
	color: rgba(54,69,79, 0.7);
}

.skillist .skillp{
	width: 70%;
	margin-top: %;
	margin-left: 15%;
	margin-right: ;
	float: left;
}


.skillist .skillp h3{
	width: 100%;
	padding-top: 5%;
	padding-bottom: 5%;
	margin-top: %;
	margin-left: %;
	margin-right: ;
	border: 1px solid orange;
	float: left;
	text-align: center;
	font-family: sans-serif;
	color: rgba(54,69,79, 0.7);
}








/****************Box3***************/
#box3{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;

}

#box3 h2{
	width: 96%;
	padding: 2%;
	margin-bottom: 5%;
	text-align: center;
	font-family: sans-serif;
	color: darkorange;
	float: left;
	background-color: whitesmoke;
}

.wo1{
	width: 45%;
	margin-top: 2%;
	margin-left: 3%;
	margin-right: 1%;
	margin-bottom: 5%;
	float: left;
}

.wo01{
	width: 100%;
	margin-left: 0%;
	float: left;
	overflow: hidden;
	border-radius: 20px;
}

.wo01 img{
	width: 80%;
	margin-top: 2%;
	margin-left: 10%;
	border-radius: 20px;
}

.wo01 img:hover{
	transform: scale(1.5);
	transition: 1s;
}

.wo02{
	width: 100%;
}

.wo03{
	width: 19%;
	padding: 1%;
	margin: 2%;
	border-radius: 15px;
	background-color: whitesmoke;
	float: left;
	text-align: center;
	font-family: monospace;
	font-weight: bold;
	color: rgba(72,72,72);
	overflow: hidden;
}

.wo03 img{
	width: 60%;
	float: left;
	margin-left: 20%;
}

.wo03 p{
	width: 100%;
	margin-top: 5%;
	float: left;
	text-align: center;
	color: rgb(72, 72, 72);
}

.wo02 p{
	width: 76%;
	padding: 2%;
	margin-top: 2%;
	margin-left: 10%;
	border-radius: 20px;
	background-color: whitesmoke;
	float: left;
	text-align: center;
	font-family: monospace;
	font-weight: bold;
	color: rgba(54,69,79, 0.7);
	border: 2px solid darkorange;
}

.wo02 p:hover{
	background-color: darkorange;
	color: whitesmoke;
}
.wo03:hover{
	transition: 0.5s;
	box-shadow: 2px 2px 4px silver;
}

.ect{
	width: 100%;
	margin-top: 5%;
	text-align: center;
	font-family: Century Gothic;
	color: rgba(54,69,79, 0.7);
	float: left;
}






/****************Box4***************/
#box4{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;

}

#box4 h2{
	width: 96%;
	padding: 2%;
	text-align: center;
	font-family: sans-serif;
	color: darkorange;
	float: left;
	background-color: whitesmoke;
}

.conmemo{
	width: 80%;
	margin-top: 5%;
	float: left;
}

.conmemo h3{
	font-family: sans-serif;
	color: rgba(54,69,79, 0.7);
}

.conmemo p{
	margin-top: 2%;
	font-family: sans-serif;
	color: rgba(54,69,79, 0.7);
}

.conlink0{
	width: 30%;
	padding: 5%;
	margin: 1.5%;
	float: left;
	text-align: center;
	border: 1px solid rgba(54,69,79, 0.1);
}

.conlink0:hover{
	background-color: darkorange;
}

.conlink0:hover #fa10{
	color: white;
	text-shadow: 1px 1px 20px white;
}

.conlink0:hover .p10{
	color: white;
	text-shadow: 1px 1px 10px white;
}

.conlink1{
	width: 20%;
	padding: 5%;
	margin: 1.5%;
	float: left;
	text-align: center;
	border: 1px solid rgba(54,69,79, 0.1);
}

.conlink2{
	width: 10%;
	padding: 5%;
	margin: 1.5%;
	float: left;
	text-align: center;
	border: 1px solid rgba(54,69,79, 0.1);
}

.conlink1:hover{
	background-color: darkorange;
}

.conlink1:hover #fa10{
	color: white;
	text-shadow: 1px 1px 20px white;
}

.conlink1:hover .p10{
	color: white;
	text-shadow: 1px 1px 10px white;
}

.conlink2:hover{
	background-color: darkorange;
}

.conlink2:hover #fa10{
	color: white;
	text-shadow: 1px 1px 20px white;
}

.conlink2:hover .p10{
	color: white;
	text-shadow: 1px 1px 10px white;
}

#fa10{
	color: darkorange;
}

.p10{
	width: 100%;
	font-family: courier;
	color: rgba(54,69,79, 0.7);
	text-align: center;
}

.thanks{
	width: 40%;
	margin-top: 10%;
	margin-left: 30%;
	float: left;
}

.thanks img{
	width: 100%;
}

.reserverd{
	width: 90%;
	padding: 5%;
	margin-top: 5%;
	border-top: 3px solid darkorange;
	float: left;

}

.reserverd p{
	width: 100%;
	text-align: center;
	color: rgba(54,69,79, 0.5);
	font-family: courier;
}


.goup{
	display: none;
}

















/***************12400px***************/
@media all and (max-width: 1200px){

#menue{
	width: 25%;
	height: auto;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 5%;
	margin-left: 2.5%;
	background-color: rgb(250,250,250);
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	position: fixed;
	scroll-behavior: smooth;
}

.bodycv{
	width: 70%;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 5%;
	margin-left: 27.5%;
	margin-bottom: 5%;
	position: absolute;
	background-color: rgb(255, 255, 255);
	font-size: 90%;
}



}









/***************700px***************/
@media all and (max-width: 700px){

	html, body{
	height: 100%;
	background-image: unset;
}

/****************Menue***************/
#menue{
	width: 100%;
	height: auto;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: unset;
	margin-left: unset;
	background-color: rgb(250,250,250);
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	position: unset;
	float: left;
}
/****************Body***************/

.bodycv{
	width: 100%;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 5%;
	margin-left: 0%;
	margin-bottom: 5%;
	position: unset;
	float: left;
	background-color: rgb(255, 255, 255);
}

.hello{
	width: 90%;
	margin-left: 5%;
	text-align: justify;
}


#abo{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
}


.ser{
	width: 100%;
	float: left;
	margin-top: 1%;
}


.skill{
	width: 100%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
	float: left;
}

#concept{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
}

.con1{
	width: 95%;
	padding-top: 4%;
	padding-left: 2.5%;
	padding-right: 2.5%;
	padding-bottom: 4%;
	margin: unset;
	float: left;
	border: 1px solid rgba(54,69,79, 0.2);
}


.con1:hover{
	border: border: 1px solid darkorange;
	transition: unset;
	transform: unset;
}

.con1:hover h1{
	transform: rotate(360deg);
	transition: 1s;
}




.language{
	width: 90%;
	height: 20%;
	padding-top: 3%;
	padding-bottom: 3%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
	background-image: url(images/world1.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-origin: content-box;

}

.language h3{
	width: 90%;
	padding: 5%;
	margin: unset;
	border-bottom: 3px solid darkorange;
	float: left;
	text-align: center;
	color: rgba(54,69,79, 0.7);
}



#memo{
	width: 100%;
	padding-top: 5%;
	padding-bottom: 5%;
	margin-top: 5%;
	margin-left: unset;
	float: left;
	background-color: whitesmoke;
}


/****************Box1***************/
#box1{
	width: 100%;
	margin-top: 5%;
	margin-left: unset;
	float: left;
}


#box1 h2{
	width: 96%;
	padding: 2%;
	text-align: center;
	font-family: ;
	color: darkorange;
	float: left;
	background-color: whitesmoke;
}

#box1 h3{
	margin-top: 5%;
	margin-left: 3%;
	margin-bottom: -2%;
	font-family: sans-serif;
	color: rgba(54,69,79, 0.7);
	float: left;
	background-color: white;
}

#box1 table{
	margin-top: 5%;
	width: 98%;
	margin: 1%;
}

#box1 table tr th{
	width: 46%;
	padding: 2%;
	border: 1px solid rgba(54,69,79, 0.1);
	font-family: sans-serif;
	color: rgba(54,69,79, 0.1);
}

.otce{
	width: 90%;
	padding: 4%;
	margin: 1%;
	text-align: center;
	color: rgba(54,69,79, 0.1);
	border: 1px solid rgba(54,69,79, 0.1);
}


/****************Box2***************/
#box2{
	width: 100%;
	margin-top: 5%;
	margin-left: unset;
	float: left;
}

#box2 h2{
	width: 96%;
	padding: 2%;
	text-align: center;
	color: darkorange;
	float: left;
	background-color: whitesmoke;
}


.skillist{
	width: 100%;
	margin-top: 5%;
	float: left;
	align-items: center;
}

.skillist .logo{
	width: 98%;
	padding: unset;
	margin-left: unset;
	margin: 1%;
	margin-right: unset;
	float: left;
}

.skillist div{
	overflow: hidden;
	font-size: 90%;
}



.skillist .skillp{
	width: 90%;
	padding: 3%;
	margin-top: %;
	margin-left: 2%;
	margin-right: ;
	float: left;
}


.skillist .skillp h3{
	width: 90%;
	padding: 5%;
	padding-bottom: 5%;
	margin-top: %;
	margin-left: %;
	margin-right: ;
	border: 1px solid rgba(54,69,79, 0.1);
	float: left;
	text-align: center;
	font-family: sans-serif;
	font-size: 90%;
	color: rgba(54,69,79, 0.7);
}



/****************Box3***************/
#box3{
	width: 100%;
	margin-top: 5%;
	margin-left: unset;
	float: left;

}

.wo1{
	width: 100%;
	margin-top: 5%;
	margin-left: unset;
	margin-right: 0%;
	float: left;
}

.wo01 img{
	width: 80%;
	margin-top: 2%;
	margin-left: 10%;
	border-radius: 20px;
}

.wo01 img:hover{
	transform: scale(1.5);
	transition: 1s;
}

.wo02{
	width: 100%;
}

.wo02 p{
	width: 76%;
	padding: 2%;
	margin-top: 2%;
	margin-left: 10%;
}

.wo03{
	width: 42%;
	padding: 2%;
	margin: 2%;
	margin-top: 2%;
	margin-left: 2%;
	border-radius: 10px;
	background-color: whitesmoke;
	float: left;
	text-align: center;
	font-family: monospace;
	color: darkorange;
	border: unset;
}

/****************Box4***************/
#box4{
	width: 100%;
	margin-top: 5%;
	margin-left: unset;
	float: left;

}

.conmemo{
	width: 90%;
	padding: 3%;
	margin-top: 5%;
	margin-left: 2%;
	float: left;
}

.conmemo p{
	text-align: justify;
}

.conlink0{
	width: 80%;
	padding: unset;
	padding-top: 10%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 10%;
	margin: unset;
	margin-top: 1%;
	margin-left: 5%;
	float: left;
	text-align: center;
	border: 1px solid rgba(54,69,79, 0.1);
}

.conlink0:hover{
	background-color: darkorange;
}

.conlink0:hover #fa10{
	color: white;
	text-shadow: 1px 1px 20px white;
}

.conlink0:hover .p10{
	color: white;
	text-shadow: 1px 1px 10px white;
}

.conlink1{
	width: 80%;
	padding: unset;
	padding-top: 10%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 10%;
	margin: unset;
	margin-top: 1%;
	margin-left: 5%;
	float: left;
	text-align: center;
	border: 1px solid rgba(54,69,79, 0.1);
}

.conlink2{
	width: 80%;
	padding: unset;
	padding-top: 10%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 10%;
	margin: unset;
	margin-top: 1%;
	margin-left: 5%;
	float: left;
	text-align: center;
	border: 1px solid rgba(54,69,79, 0.1);
}

.form{
	width: 90%;
	margin-top: 5%;
	margin-left: 5%;
	float: left;
}

.thanks{
	width: 40%;
	margin-top: 10%;
	margin-left: 30%;
	float: left;
}

.thanks img{
	width: 100%;
}

.reserverd{
	width: 90%;
	padding: 5%;
	margin-top: 5%;
	margin-bottom: 10%;
	border-top: 3px solid darkorange;
	float: left;

}

.reserverd p{
	width: 100%;
	text-align: center;
	color: rgba(54,69,79, 0.5);
	font-family: courier;
}




.goup{
	display: unset;
	width: 84%;
	padding: 3%;
	margin-left: 5%;
	margin-bottom: 2%;
	background-color: darkorange;
	text-align: center;
	font-family: sans-serif;
	color: white;
	position: fixed;
	bottom: 0;
	z-index: 1;
	border: 2px solid silver;
	border-radius: 50px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3), 0px 0px 2px rgba(0, 0, 0, 0.3);
}















}