/* Ali Al Sabbagh */






/*----------- image ------------*/

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

img {
  
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
}

body {
	margin: 0px;
	padding: 0px;
	color: #3a3430;
	font-family: 'Lora', serif;
	font-size: 13px;
	line-height:1.5em; 
	background-color: #e1e1e1;
}




/*------- link color --------*/

a, a:link, a:visited {
	color: #2d607f;
	text-decoration: underline;
}




/*------- site_title --------*/

h1 { font-size: 40px; font-weight: bold; margin: 0 0 30px 0; padding: 5px 0; color: #000; }
h2 { font-size: 28px; font-weight: normal; line-height: 28px; margin: 0 0 30px 0; padding: 0; color: #000; }
h3 { font-size: 21px; margin: 0 0 20px 0; padding: 0; padding: 0; color: #000; }
h4 { font-size: 18px; font-weight: normal; margin: 0 0 20px 0; padding: 0; color: #000; }
h5 { font-size: 16px; margin: 0 0 10px 0; padding: 0; color: #333; }
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0;}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.margin_r30 { margin-right: 30px; }
.margin_b20 { margin-bottom: 20px; }






/*------ text and icon list position ------------*/



.float_l {
	float: left;
}

.float_r {
	float: right;
}

.image_wrapper {
	display: inline-block;
	padding: 8px;
	border: 1px solid #999;
	background: #ffffff;
	margin-bottom: 10px;
}

.image_wrapper2 {
	display: inline-block;
	padding: 4px;
	border: 10px solid #999;
	background: #ffffff;
	margin-bottom: 10px;
}

.fl_img {
	float: left;
	margin: 3px 30px 15px 0;
}
.fr_img {
	float: right;
	margin: 3px 0 15px 15px;
}

























a:hover {
	text-decoration: none;
}

p { margin: 0px; padding: 0 0 10px 0; }
img { border: none; }


blockquote { margin-left: 10px; }
cite { font-weight: bold; }
cite span { color: #2d607f; }
em { color: #bf4300; }

.Ali_list {
	margin: 10px 0;
	padding: 0;
	list-style: none;
}

.Ali_list li {
	background: transparent url(images/Ali_list.png) no-repeat scroll 0 0px;
	margin:0 0 10px;
	padding:0 0 0 25px;
	line-height: 1em;
}

.Ali_list li a {
	text-decoration: none;
}

.Ali_list li a:hover {
	text-decoration: underline;
}






/*---------- header ------------*/

#Ali_header_wrapper {
	width: 100%;
	background: #f3f3f3;
	height: 100px;
}

#Ali_header {
	width: 940px;
	height: 200px;
	padding: 0;
	margin: 0 auto;
	
}

#Ali_header  #site_title {
	float: left;
	width: 400px;
	padding: 35px 0 0 40px;
}

#Ali_header  #site_title h1 {
	margin: 0;
	padding: 0;
}

#Ali_header  #site_title h1 a {
	margin: 0px;
	padding: 0px;
	font-size: 38px;
	color: #000;
	font-weight: normal;
	text-decoration: none;
}

#Ali_header  #site_title h1 a span {
	display: block;
	margin-top: 5px;
	margin-left: 0px;
	font-size: 14px;
	font-family: 'Lora', serif;
}






/*--------------- menu ----------------*/

/* start of menu */


* {
  	margin: 0; 
		padding: 0;

		
	}

	body {
		padding: 30px; 
		font-family: 'Lora', serif;
		background: #87CEFA;
	}

	#container {
		position: relative;
		width: 940px;
				
	}

	#container:after {
		content: "";
		display: block;
		clear: both;
		height: 0;
	}

	#menu {
		position: relative;
		float: left;
		
		padding: 0;
		border-radius: 3px;
		box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
		background: #e4eaee; 
	}

	#menu, #menu ul {
		list-style: none;
	}

	#menu > li {
		float: left;
		position: relative;
		border-right: 1px solid rgba(0,0,0,.1);
		box-shadow: 1px 0 0 rgba(255,255,255,.25);
		perspective: 1000px;
		
	}

	#menu > li:first-child {
		border-left: 1px solid rgba(255,255,255,.25);
		box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
	}

	#menu a {
		display: block;
		position: relative;
		z-index: 10;
		padding: 13px 60px 13px 60px;
		text-decoration: none;
		color: rgba(17, 17, 17);
		line-height: 1;
		font-weight: 600;
		font-size: 16px;
		background: transparent;		
		
		transition: all .25s ease-in-out;
	
	}

	#menu > li:hover > a {
		background: #333;
		color: rgba(0,223,252,1);
		text-shadow: none;
	}

	#menu li ul  {
		position: absolute;
		left: 0;
		z-index: 1;
		width: 200px;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		background: transparent;
		overflow: hidden;
		transform-origin: 50% 0%;
	}


	#menu li:hover ul {
		
		padding: 15px 0;
		background: #333;
		opacity: 1;
		visibility: visible;
		box-shadow: 1px 1px 7px rgba(0,0,0,.5);
		animation-name: swingdown;
		animation-duration: 1s;
		animation-timing-function: ease;

	}

	@keyframes swingdown {
		0% {
			opacity: .99999;
			transform: rotateX(90deg);
		}

		30% {			
			transform: rotateX(-20deg) rotateY(5deg);
			animation-timing-function: ease-in-out;
		}

		65% {
			transform: rotateX(20deg) rotateY(-3deg);
			animation-timing-function: ease-in-out;
		}

		100% {
			transform: rotateX(0);
			animation-timing-function: ease-in-out;
		}
	}

	#menu li li a {
		padding-left: 15px;
		font-weight: 400;
		color: #ddd;
		text-shadow: none;
		border-top: dotted 1px transparent;
		border-bottom: dotted 1px transparent;
		transition: all .15s linear;
	}

	#menu li li a:hover {
		color: rgba(0,223,252,1);
		border-top: dotted 1px rgba(255,255,255,.15);
		border-bottom: dotted 1px rgba(255,255,255,.15);
		background: rgba(0,223,252,.02);
	}

/* end of main */








/*--------- start of Frosted Glass Quote ---------------*/



body,
main::before {
  background:#638FAA ;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 20px;
  background: hsla(0,0%,100%,.3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}

blockquote {
 
  font-family: 'Lora', serif;
}

footer {
  padding-top: 20px;
  font-weight: bold;
}

cite {
  font-style: normal;
  font-size: 22px;
}



/*---------- end of Frosted Glass Quote -------------*/




/*------------------ The position of the content text -----------------*/

#Ali_middle_wrapper1 {
	width: 100%;
	height: 280px;
}

#Ali_middle_wrapper2 {
	width: 100%;
	height: 280px;
}

#Ali_middle {
	width: 900px;
	height: 220px;
	padding: 30px 45px;
	margin: 0 auto;
	color: #c5dcea;
	font-size: 20px;
	
}

#Ali_middle h1 {
	color: #fff;
	font-size: 50px;
	letter-spacing: 3px;
	text-shadow: 1px 1px 1px #555;
	font-weight: normal;
	padding: 50px 0 0 0;
}

#Ali_middle h1 span {
	font-size: 30px;
	color: #fec821;
	margin-left: 30px;
}

#Ali_middle  p {
	line-height: 24px;
	margin-bottom: 20px;
}

#Ali_middle a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

#Ali_middle a span {
	color: #fec821;
}

#Ali_middle a:hover {
	color: #fec821;
}



/*------------- main ----------------*/

#Ali_main {
	clear: both;
	width: 900px;
	padding: 45px;
	margin: 0 auto;
}

#Ali_content {
	float: right;
	width: 600px;
}

.col_w270 {
	width: 270px;
}

.col_w250 {
	width: 250px;
}

.col_w190 {
	width: 190px;
	padding-right: 40px;
}

.services_section {
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.services_section .ss_left {
	float: left;
	width: 80px;
}

.services_section .ss_left img {
	width: 80px;
	height: 80px;
}

.services_section .ss_right {
	float: right;
	width: 500px;
}

.price {
	color: #000;
	font-size: 16px;
}

.price span {
	font-size: 20px;
	color: #C00;
}

#Ali_sidebar {
	float: left;
	width: 240px;
}

#contact_form {
	float: left;
	width: 400px; 
	padding: 0px;
}

#contact_form form {
	margin: 0px;
	padding: 0px;
	/*border:1px solid #e2d1be;
	padding: 20px 20px 10px 20px; */
}

#contact_form form .input_field {
	width: 300px;
	padding: 5px;
	background: #d1d1d1;
	border: 1px solid #b7aeae;
	color: #333; 
	font-family: 'Lora', serif;
	font-size: 12px;
	margin-top: 5px;
}

#contact_form form label {
	display: block;
	width: 100px;
	font-size: 14px;	
	margin-right: 10px;
}

#contact_form form textarea {
	width: 388px;
	height: 200px;
	background: #d1d1d1;
	border: 1px solid #b7aeae;
	padding: 5px; 
	color: #333; 
	font-family: 'Lora', serif;
	font-size: 12px;
	margin-top: 5px;
}

#contact_form form .submit_btn {
	margin-left: 50px;
	width: 122px;
	height: 32px;
	border: none;
	color: #fff;
	cursor: pointer;
	margin: 10px 0;
    padding: 5px 14px;
	background: url(images/Ali_button.png) no-repeat;
}

#contact_form form .submit_btn:hover {
	background: url(images/Ali_button_hover.png) no-repeat;
}

/* end of main */



/* tab;e */

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}










/*------------------- footer -------------------------*/






.footer {
  background: #e4eaee;
  color: #A0A0A0;
  padding: 0 20px 10px 20px;
  border-top: 4px solid #4f8db3;
  margin-top: 20px;
  
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.4);
  
}

.footer h3 {
  color: #E4E4E4;
  font-size: 1.3em;
  border-bottom: 1px dotted #7C7C7C;
}



.footer-navigate-section li {
  line-height: 20px !important;
}

.footer-stay-connected a {
  text-align: left;
  text-indent: -9999px;
  display: block;
  width: 115px;
  height: 40px;
  background: url(../img/stay-connected.png);
 
  
  opacity: 0.5;

  transition: opacity .25s linear;
}

.footer-stay-connected a:hover {
  
  opacity: 1;
}

.footer-stay-connected a.facebook {
  background-position: -115px 0;
}

.footer-stay-connected a.twitter {
  background-position: -230px 0;
}

.footer-stay-connected a.googleplus {
  background-position: 0 0;
}

.footer-stay-connected li {
  text-align: center;
}

.footer-copyright {
  text-align: center;
  color: #7C7C7C;
  padding-top: 10px;
  font-size: 1.2em;
}





/* end of footer */








  
  /* begin canvas */
  
  
.stage {
  
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
}
.wrapper {
  position: relative;
  color: #fff;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.55rem;
  padding-top: 0.7rem;
  padding-left: 0.7rem;
  padding-right: 0.36rem;
  padding-bottom: 0.7rem;
}
.slash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  transform-origin: center center;
  width: 0.15rem;
  height: 145%;
  background: #fff;
  z-index: 4;
  animation: slash 6s ease-in infinite;
}
.slash:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.75rem;
  height: 120%;
  
  z-index: -1;
}
.slash:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.sides {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.sides .side {
  position: absolute;
  background: #fff;
}
.sides .side:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 0.15rem;
  transform: translateX(-101%);
  animation: side-top ease 6s infinite;
}
.sides .side:nth-child(2) {
  top: 0;
  right: 0;
  width: 0.15rem;
  height: 100%;
  transform: translateY(-101%);
  animation: side-right ease 6s infinite;
}
.sides .side:nth-child(3) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.15rem;
  transform: translateX(101%);
  animation: side-bottom ease 6s infinite;
}
.sides .side:nth-child(4) {
  top: 0;
  left: 0;
  width: 0.15rem;
  height: 100%;
  transform: translateY(101%);
  animation: side-left ease 6s infinite;
}
.text {
  position: relative;
}
.text--backing {
  opacity: 0;
}
.text--left {
  position: absolute;
  top: 0;
  left: 0;
  width: 51%;
  height: 100%;
  overflow: hidden;
}
.text--left .inner {
  transform: translateX(100%);
  animation: text-left 6s ease-in-out infinite;
}
.text--right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.text--right .inner {
  transform: translateX(-200%);
  animation: text-right 6s ease-in-out infinite;
}
@-moz-keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@-webkit-keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@-o-keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@keyframes slash {
  0% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  13% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(1);
  }
  16.6% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-24deg) scaleY(0);
  }
}
@-moz-keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@-webkit-keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@-o-keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@keyframes text-left {
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}
@-moz-keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@-webkit-keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@-o-keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@keyframes text-right {
  0% {
    transform: translateX(-200%);
  }
  10% {
    transform: translateX(-100%);
  }
  58% {
    transform: translateX(-100%);
  }
  70% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@-moz-keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@-webkit-keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@-o-keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@keyframes side-top {
  0%, 14% {
    transform: translateX(-101%);
  }
  24%, 55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(101%);
  }
  100% {
    transform: translateX(101%);
  }
}
@-moz-keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@-webkit-keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@-o-keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@keyframes side-right {
  0%, 14%, 23% {
    transform: translateY(-101%);
  }
  30%, 62% {
    transform: translateY(0);
  }
  72% {
    transform: translateY(101%);
  }
  100% {
    transform: translateY(101%);
  }
}
@-moz-keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@-webkit-keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@-o-keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@keyframes side-bottom {
  0%, 14%, 24%, 28% {
    transform: translateX(101%);
  }
  37%, 70% {
    transform: translateX(0);
  }
  79% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(-101%);
  }
}
@-moz-keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
@-webkit-keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
@-o-keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }
}
@keyframes side-left {
  0%, 14%, 24%, 34%, 35% {
    transform: translateY(101%);
  }
  44%, 79% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-101%);
  }
  100% {
    transform: translateY(-101%);
  }


} 

/*Hier begint de opmaak van mijn contact pagina*/
btn {
	color : #55FF00;
	background : rgb(0, 0, 0, 0.5);
	padding : 8px 20px;
	font-size : 12px;
	text-decoration : none;
	letter-spacing : 2px;
	text-transform : uppercase;
}
input[type="text"], select, textarea {
	width : 100%;
	padding : 12px;
	border : #ccc solid 1px;
	border-radius : 4px;
	box-sizing : border-box;
	margin-top : 6px;
	margin-bottom : 16px;
	resize : vertical;
}
input[type="submit"] {
	background-color : #E6E6FA;
	padding : 12px 20px;
	border : none;
	border-radius : 4px;
	cursor : pointer;
}
input[type="reset"] {
	background-color : black;
	color : white;
	padding : 12px 20px;
	border : none;
	border-radius : 4px;
	cursor : pointer;
}


th {
	padding-top : 12px;
	padding-bottom : 12px;
	background-color : black;
	color : white;
}
input[type="submit"]:hover {
		background-color : #6a5acd;
}
input[type="reset"]:hover {
		background-color : grey;
}