/* CSS Document */
@font-face {
  font-family: "Noto Sans HK Regular";
  src: url("NotoSansHK-Regular.otf");
}

body,html {
	font-family: 'Noto Sans HK Regular' !important; ;background-color: #01723a0a !important;height: 100%;
}

input, select {
	 font-family: 'Noto Sans HK Regular' !important;;font-size:80%; color:#333333; border:#8ACB91 solid 1px
}
a{
	color: #ff8544 !important;
}
footer{
	background-color: #01723a;
	position: absolute;
}
.footer_text{
	margin: 10px !important;
	color: white;
} 

p{ font-family:'Noto Sans HK Regular' !important;; color:#333333; font-size:80%}

.Titulo_pagina{ 
	font-family:'Noto Sans HK Regular' !important;; 
	color:#007437; 
	font-size: 25px; 
	font-weight:normal;
	margin: 10px;
	border-bottom: 2px solid;
}

.Titulo_apartado{
	font-family:'Noto Sans HK Regular' !important;; 
	color:#007437; 
	font-size: 100%; 
	font-weight:bold;
}

.Titulo_categ{
	font-family:'Noto Sans HK Regular' !important;; 
	color:#007437; 
	font-weight:bold;
	font-size: 20px;
}

.categ{
	font-family:'Noto Sans HK Regular' !important;; 
	color:#000000; 
	font-weight:bold;
	font-size: 16px;
	margin-bottom: 40px;
}
.Titulo_apartado_blanco a{
	font-size: 13px;
	text-decoration: underline;
}

form{
	width: 380px;
	margin: 8% auto;
	padding: 1em 2em 1em 2em;
	background: #fafafa;
	border: 1px solid #ebebeb;
	box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;

}

.group { 
	position: relative; 
	margin-bottom: 45px; 
}

input {
	font-size: 18px;
	padding: 10px 10px 10px 5px;
	-webkit-appearance: none;
	display: block;
	background: #fafafa;
	color: #636363;
	width: 100%;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #757575;
}

input:focus { outline: none; }


/* Label */

label {
	color: #999; 
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: all 0.2s ease;
}


/* active */

input:focus ~ label, input.used ~ label {
	top: -20px;
  transform: scale(.75); left: -2px;
	/* font-size: 14px; */
	color: #01723a;
}


/* Underline */

.bar {
	position: relative;
	display: block;
	width: 100%;
}

.bar:before, .bar:after {
	content: '';
	height: 2px; 
	width: 0;
	bottom: 1px; 
	position: absolute;
	background: #01723a; 
	transition: all 0.2s ease;
}

.bar:before { left: 50%; }

.bar:after { right: 50%; }


/* active */

input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }


/* Highlight */

.highlight {
	position: absolute;
	height: 60%; 
	width: 100px; 
	top: 25%; 
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}


/* active */

input:focus ~ .highlight {
	animation: inputHighlighter 0.3s ease;
}


/* Animations */

@keyframes inputHighlighter {
	from { background: #01723a; }
	to 	{ width: 0; background: transparent; }
}


/* Button */

.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: .3em 0 1em 0;
  width: 100%;
  vertical-align: middle;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.button:focus { outline: 0; }


/* Button modifiers */

.buttonAceptar {
  background: #01723a;
  text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
  width: 45%;
}

.buttonAceptar:hover { background: #FF8544; }

.buttonCancelar {
  background: #01723a;
  text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
  width: 45%;
  float: right;
}

.buttonCancelar:hover { background: #FF8544; }


/* Ripples container */

.ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

/************ RESPOSINVE ***********/

@media screen and (max-width: 999px) {
	header .row{
	height: auto !important;
	}
	header .row h1{
		text-align: left !important;
		font-size: 1em !important;
	}
	header .col{
		min-width: 100% !important;
	}
}

@media screen and (max-width: 420px) {
	form {
    width: auto;
    margin: 0;
    background:none;
    border: none;
    box-shadow: none;
	}
	h2.Titulo_pagina{
		padding: 10px 20px;
	}
}