/* remove standard-styles */
body, select, header, article, footer, div, form, label, input, menu, ul, li, fieldset {
  appearance: none;
}

html, body {
	height:100%;
	margin: 0;
	padding: 0;
	overflow: auto;
}

body {
	background: url(../img/bg.png) repeat rgb(153, 153, 153);
	background-size: 100%;
	font-family: "Arial Rounded MT Bold", Helvetica, Arial;
}

a:link {
	color:  rgb(211, 211, 211);
	text-shadow: 4px 4px 4px rgb(0, 0, 0);
	text-decoration: none;
}

a:visited {
	color: rgb(070, 130, 180);
	font-weight: bolder;
	text-decoration: line-through;
}

a:focus {
	color:  rgb(055, 055, 055);
	font-weight: bold;
}

a:hover {
	color:  rgb(055, 055, 055);
	font-weight: bold;
	text-shadow: 0px 0px 0px rgb(0, 0, 0);
	text-decoration: blink;

	transition: all 0.6s ease-in-out;
	outline: none;

}

header {
	position: relative;
	margin: 0;
	padding: 4px;
	width: 100%;
	height: auto;
	background: rgb(150, 150, 150);
	border-bottom: 4px double rgb(210, 105, 030);
}


header h1 {
	font-size: normal;
//	text-transform: uppercase;
	color: rgb(230, 230, 230);
	text-shadow: 3px 3px 3px #333;

}

#nobot {
	display: none;
}

section {
	position: relative;
	width: 100%;
	height: 70%;
}

footer {
	position: absolute;
	width: 100%;
	height: 5%;
	bottom: 0;
	text-align: center;	
	background: rgb(150, 150, 150);
	border-top: 4px double rgb(210, 105, 030);

}

footer address {
	width: 90%;
    padding: 2px;
	background: transparent;
}

.radius  { 
	border-radius: 70px;
} 

.trans  {
	filter: alpha(opacity=80);
	opacity: 0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        font-size: 100%;
} 

.shadow {
	box-shadow: 10px 10px 5px rgb(0, 0, 0);
}

.rotate {
	transition: all 0.8s ease-in-out;
}

.container {
	float: left;
	margin: 5%;
	width: 250px;
	height: 250px;
	perspective: 1000;
	padding: 0;
	background: rgb(033, 033, 033); 
	border: 4px solid rgb(0, 0, 0);
	border-radius: 70px;

}


.container:hover {
	transform: rotate(30deg);
}


.develop {
	top: 30px; left: 100px;
	transform: rotate(-20deg);
}
	.develop .front {
	background:url(../img/Computer-User-Male2.png) no-repeat transparent;
	background-size: 100% 100%;
		
	}
	.develop .back {
	transform: rotate(-20deg);
	cursor: pointer; 
	}
	
.tool {
	top: 120px; right: 550px;
	transform: rotate(-3deg);
}
	.tool .front {
	background:url(../img/Presenter-Male1.png) no-repeat transparent;
	background-size: 100% 100%;
		
	}
	.tool .back {
	transform: rotate(-20deg);
	cursor: pointer; 
	}
		
.portfolio {
	top: 120px; right: 200px;
	transform: rotate(10deg);
}
	.portfolio .front {
	background:url(../img/profil.png) no-repeat transparent;
	background-size: 100% 100%;
		
	}
	.portfolio .back {
	transform: rotate(-20deg);
	font-size: 25px;
	cursor: default;
	
	}

		
.front {
	width: 250px;
	height: 250px;
//	font-size: 50px;
	border: 0;	
	display:block;
	
	
}

.container:hover .front {
	display:none;
	border: 0;	
} 

.back {
	width: 250px;
	height: 250px;
	background: transparent; 
	font-size: 35px;
	border: 0;
	display:none;

}

.container:hover .back {
	display:block;
	
}

button, form {
	width: 250px;
	height: 250px;
	color: rgb(205, 190, 112);
	font-weight: bold;
	padding: 6px;
	text-align: center;
	vertical-align: top;
	text-shadow: 6px 6px 6px rgb(0, 0, 0);
	border: 0;
	border-radius: 60px;
}

.develop button {
	background: rgb(178, 034, 034); 
}

.tool button {
	background: rgb(000, 100, 000);	
}

.portfolio button, .portfolio form {
	background: rgb(079, 148, 205); 
;
}


button:hover, form:hover {
	opacity:.85;
}

button:active, form:active {
	border: 1px solid #20911e;
	box-shadow: 0 0 10px 5px #356b0b inset; 
	
}

@keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}

form ol {
	width:180px;
	list-style: none;
	margin: 20px;
	background: rgb(054, 054, 054);
	border: 1px solid #b4b4b4;
	border-radius: 10px;
	padding: 10px;
}


form input[type=password] {
	width: 180px;
	color: #f3f3f3;
	border-radius: 6px;
	background: rgb(120, 120, 120);
	border: 1px inset #b4b4b4;
}

form input[type=submit] {
	float: left;
	width: 80px;
	color: rgb(220, 220, 220);
	border-radius: 6px;
	background: rgb(000, 139, 000);
	box-shadow: #e3e3e3 0px 2px 5px;
	border: none;
}
form input[type=reset] {
	width: 80px;
	color: rgb(220, 220, 220);
	border-radius: 6px;
	background: rgb(178, 034, 034);
	box-shadow: #e3e3e3 0px 2px 5px;
	border: none;

}