@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300);

* {
	font-family: 'Josefin Sans', sans-serif;
}

html, body {
	/*
	background-image: url(../pictures/bg2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	*/
	background-color: #E3E3E3;
}

nav#logo {
	width: 100%;
	height: 200px;
	background-color: rgba(255,255,255,.5);
	overflow: hidden;
	border-bottom: 1px solid #CACACA;
}

img#logo {
	display: block;
	margin: auto;
	margin-top: 20px;
}

div#contenedor_idiomas {
	position: absolute;
	width: 130px;
	height: 30px;
	top: 20px;
	right: 20px;
}

img.flag {
	width: 30px;
	height: 30px;
	margin-left: 10px;
}

p#titulo {
	text-align: center;
	color: #3F3F3F;
	font-size: 2.5em;
	margin-top: 50px;
}

p#descripcion {
	text-align: center;
	color: #707070;
	margin-top: 30px;
	font-size: 1.1em;
}

p#descripcion span {
	font-size: 1.1em;
	color: #079EFF;
}

/*formulario*/

section#form {
	margin: auto;
	margin-top: 30px;
	max-width: 800px;
	min-height: 100px;
	overflow: hidden;
}

.form_element {
	display: block;
	margin: auto;
	width: 98%;
	height: 35px;
	background-color: transparent;
	border: 1px solid #707070;
	color: #707070;
	padding-left: 10px;
	margin-top: 20px;
	border-radius: 4px;
}

textarea#mensaje {
	max-width: 98%;
	min-width: 98%;
	max-height: 400px;
	min-height: 200px;
	padding-top: 10px;

}

input#btn_enviar {
	margin-top: 30px;
	float:right;
	padding: 10px 30px;
	background-color: #707070;
	color: white;
	border: 1px solid #707070;
	-webkit-transition: background-color .2s, color .2s;
	border-radius: 4px;
}

input#btn_enviar:hover {
	background-color: transparent;
	border: 1px solid #707070;
	color: #707070;
}

/*mensajes emergentes*/

section.mensaje_emergente{
	position: fixed;
	width: 100%;
	height: 50px;
	overflow: hidden;
}

section.mensaje_emergente p {
	text-align: center;
	margin-top: 15px;
	color: white;
	font-size: 1.2em;
}

section#mensaje_ok {
	background-color: #3EB5DA;
}

section#mensaje_error {
	background-color: #B80001;
}





/*keyquotes gear logo*/
div#keyquotes_logo{
	margin: auto;
  width: 130px;
  height: 130px;
  margin-top: 30px;
  margin-bottom: 30px;
}

div#keyquotes_gear_logo{
  position: relative;
  margin: auto;
  width: 130px;
  height: 130px;
}

img.keyquotes_gear_logo{
  position: absolute;
  top: 0px;
  left: 0px;
}

img#big_gear{
    -webkit-animation-name: rotate_big_gear;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate_big_gear;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: rotate_big_gear;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: rotate_big_gear;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

img#small_gear{
    -webkit-animation-name: rotate_small_gear;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -ms-animation-name: rotate_small_gear;
    -ms-animation-duration: 20s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -moz-animation-name: rotate_small_gear;
    -moz-animation-duration: 20s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: rotate_small_gear;
    -o-animation-duration: 20s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}


@keyframes rotate_big_gear {
    from {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);}
}

@keyframes rotate_small_gear {
    from {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);-ms-transform: rotate(-360deg);-moz-transform: rotate(-360deg);-o-transform: rotate(-360deg);}
}