@charset "utf-8";
@import url("botones.css");

/* CSS Document */
@font-face {
	font-family: "FontAwesome";
	src: url("../webfonts/fa-solid-900.eot");
	src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
		url("../webfonts/fa-solid-900.woff2") format("woff2"),
		url("../webfonts/fa-solid-900.woff") format("woff"),
		url("../webfonts/fa-solid-900.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
/*-----------------------------------------------------------------------*/
/* Clases personalizadas para FOUNT
/*-----------------------------------------------------------------------*/
.recuadro legend {
	width: auto;
	padding: 0.5rem;
	margin: 0 1rem;
	font-style: italic;
	font-family: "Lato";
	font-size: 1.2rem;
	background: #fff;
	border: 1px solid #000;
}
.recuadro fieldset {
	background: #bbbbbb;
	border: 1px solid #000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 10px;
	margin: 20px;
	width: 95%;
	padding: 30px;
}
.memoria {
	width: 300px;
	position: fixed;
	overflow: hidden;
	float: left;
	margin-top: 10px;
	margin-left: -100px; /* -360px */
}

@media screen\0 {
	.fb-like {
		margin-top: -40px;
	}
}
/*====================*/
/* formato de solapas */
/*====================*/

#tabs {
	position: relative;
	margin: 30px auto;
	width: 100%;
}

#tabs input {
	position: absolute;
	z-index: 1000;
	width: 122px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	cursor: pointer;
}
#tabs input#tab-2 {
	left: 122px;
}
#tabs input#tab-3 {
	left: 244px;
}
#tabs input#tab-4 {
	left: 366px;
}
#tabs input#tab-5 {
	left: 488px;
}
#tabs input#tab-6 {
	left: 610px;
}
#tabs label {
	background: #aaa5a5;
	background: -moz-linear-gradient(top, #aaa5a5 0%, #707070 100%);
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0%, #aaa5a5),
		color-stop(100%, #707070)
	);
	background: -webkit-linear-gradient(top, #aaa5a5 0%, #707070 100%);
	background: -o-linear-gradient(top, #aaa5a5 0%, #707070 100%);
	background: -ms-linear-gradient(top, #aaa5a5 0%, #707070 100%);
	background: linear-gradient(top, #aaa5a5 0%, #707070 100%);
	font-size: 0.7em;
	line-height: 0.9em;
	width: 122px;
	height: 40px;
	position: relative;
	padding: 0.3em;
	float: left;
	display: block;
	color: #fff;
	top: 0px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
	box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), -2px 0 2px rgba(0, 0, 0, 0.1);
}

#tabs label:after {
	content: "";
	background: #fff;
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 8px;
	display: block;
}

#tabs input:hover + label {
	background: #f26529;
	top: -8px;
	-webkit-transition: top linear 0.2s;
	-moz-transition: top linear 0.2s;
	-o-transition: top linear 0.2s;
	-ms-transition: top linear 0.2s;
	transition: top linear 0.2s;
}
#tabs input:hover + label:after {
	background: #f26529;
}
#tabs input:hover + label ~ .clear-shadow {
	top: -8px;
	-webkit-transition: top linear 0.2s;
	-moz-transition: top linear 0.2s;
	-o-transition: top linear 0.2s;
	-ms-transition: top linear 0.2s;
	transition: top linear 0.2s;
}

#tabs input:checked:hover + label {
	top: 0;
}
#tabs input:checked:hover + label:after {
	background: #fff;
}
#tabs input:checked:hover + label ~ .clear-shadow {
	top: 0;
	background: #fff;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}

#tabs input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow {
	z-index: 5;
}

#tabs input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {
	z-index: 4;
}

#tabs input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {
	z-index: 3;
}

#tabs input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {
	z-index: 2;
}
#tabs input.tab-selector-5:hover + label.tab-label-5 ~ .clear-shadow {
	z-index: 1;
}
#tabs input.tab-selector-6:hover + label.tab-label-6 ~ .clear-shadow {
	z-index: 0;
}
#tabs label:first-of-type {
	z-index: 6;
	box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
}

.tab-label-2 {
	z-index: 5;
}

.tab-label-3 {
	z-index: 4;
}

.tab-label-4 {
	z-index: 3;
}

.tab-label-5 {
	z-index: 2;
}

.tab-label-6 {
	z-index: 1;
}

#tabs input:checked + label {
	background: #f26529;
	z-index: 6;
	-webkit-transition: top linear 0.2s;
	-moz-transition: top linear 0.2s;
	-o-transition: top linear 0.2s;
	-ms-transition: top linear 0.2s;
	transition: top linear 0.2s;
}

.clear-shadow {
	background: #f26529;
	position: relative;
	top: 0;
	height: 10px;
	margin-bottom: -10px;
	clear: both;
	z-index: -2;
	box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

/*-------- contenido de los Tabs ---------*/
#tabs .content {
	background: #fff;
	position: relative;
	width: 100%;
	z-index: 5;
	box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1);
	border-radius: 0 3px 3px 3px;
	height: 850px;
	overflow: auto;
}

#tabs input.tab-selector-1:checked ~ .content .content-1,
#tabs input.tab-selector-2:checked ~ .content .content-2,
#tabs input.tab-selector-3:checked ~ .content .content-3,
#tabs input.tab-selector-4:checked ~ .content .content-4,
#tabs input.tab-selector-5:checked ~ .content .content-5,
#tabs input.tab-selector-6:checked ~ .content .content-6 {
	bottom: 0px;
	z-index: 100;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition: all ease-out 0.2s 0.2s;
	-moz-transition: all ease-out 0.2s 0.2s;
	-o-transition: all ease-out 0.2s 0.2s;
	-ms-transition: all ease-out 0.2s 0.2s;
	transition: all ease-out 0.2s 0.2s;
}

#tabs .content div {
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 100%;
	padding: 10px;
	height: auto;
	overflow: auto;
	z-index: 1;
	opacity: 0;
	-webkit-transition: all linear 0.1s;
	-moz-transition: all linear 0.1s;
	-o-transition: all linear 0.1s;
	-ms-transition: all linear 0.1s;
	transition: all linear 0.1s;
}
#tabs .content div h2,
#tabs .content div h3 {
	color: #ff7600;
	margin: 1rem 0;
}
#tabs .content div p {
	font-size: 1em;
	line-height: 1.2em;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #666;
	padding: 1em;
	font-family: "Lato", sans-serif;
	border-left: 8px solid rgba(14, 162, 207, 0.46);
}
/*=======================*/
/*  formato para tablas  */
/*=======================*/
table {
	width: 95%;
	border-collapse: collapse;
	margin: 0 auto 20px auto;
	vertical-align: middle;
	border: 1px solid #afafaf;
}
table caption {
	font-family: "Lato", sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	margin-bottom: 0.5em;
}
table thead tr th,
table thead tr td,
table tfoot tr td {
	vertical-align: middle;
	height: 20px;
	text-align: center;
	padding: 5px;
	border: 0.5px #c9c9c9 solid;
	font: 700 1em/1em "Lato", sans-serif;
	/*letter-spacing: 0.01em;*/
	color: #fff;
	background-color: #2986e2;
}
/*
@media (max-width: 767px){
  table thead tr th,
  table thead tr td,
  table tfoot tr td {
	  font: 500 1.2rem/1.2rem 'Lato', sans-serif;
  }
}
*/
table thead tr th:last-child,
table thead tr td:last-child {
	border-right: 1px #3f3f3f solid;
}
table tbody tr {
	border: 1px #3f3f3f solid;
}
table tbody tr td {
	font: 500 14px "Lato", sans-serif;
	letter-spacing: 0.02em;
	font-smooth: always;
	padding: 5px 2px;
	box-sizing: border-box;
	text-align: center;
}
table tbody tr td:first-child {
	text-align: left;
}
@media (max-width: 767px) {
	table tbody tr td {
		font: 300 0.8em/1em "Lato", sans-serif;
		letter-spacing: 0.02em;
		font-smooth: always;
		padding: 3px 5px;
		box-sizing: border-box;
	}
}
table tbody tr td.right {
	text-align: right;
}
table tbody tr td.center {
	text-align: center;
}
table tbody tr td.last {
	border-right: 1px solid;
}
table tbody tr td:last-child {
	border-right: 1px solid;
}
table tbody tr.success {
	background-color: #00a300 !important;
}
table tbody tr.error {
	background-color: #b91d47 !important;
}
table tbody tr.warning {
	background-color: #e3a21a !important;
}
table tbody tr.info {
	background-color: #2d89ef !important;
}
table tbody tr.info td,
table tbody tr.warning td,
table tbody tr.error td,
table tbody tr.success td {
	color: #ffffff !important;
}
table tbody tr.selected-row {
	background: url("rgba.php/rgba(28,183,236,.1)") !important;
	background-color: rgba(28, 183, 236, 0.1) !important;
}
table tbody tr.selected-row td:first-child {
	border-left: 1px #1c98cc solid;
}
table tbody tr.selected-row td:last-child {
	border-right: 1px #1c98cc solid;
}
table tbody tr.selected-row td {
	border-top: 1px #1c98cc solid;
	border-bottom: 1px #1c98cc solid;
}
table.striped tbody tr:nth-child(odd) {
	background-color: #efefef;
	border: 1px solid;
}
table td.subtitulo {
	background-color: #ff6600;
	color: #fff;
	font-weight: 400;
	text-align: center !important;
}
table.hovered {
	border-collapse: collapse !important;
}
table.hovered tbody tr:hover {
	background: url("rgba.php/rgba(255,102,0,.3)");
	background-color: rgba(255, 102, 0, 0.3);
}
table.bordered {
	border-collapse: collapse !important;
	border: 1px #ccc solid !important;
}
table.sinborde {
	border: 0px !important;
}
table.bordered tbody tr:last-child td {
	border-bottom: 0;
}
table.bordered-full td {
	border: #515151 thin solid;
	vertical-align: middle;
	font: 500 1em/1em "Lato", sans-serif;
	background: #ffffff;
	color: #000;
}
table a,
table link {
	color: #000;
	text-decoration: none;
}
table a:hover,
table a:active {
	color: #000;
	text-decoration: underline;
}
table td.titulo {
	background-color: #77b4e1;
}
.transparente75 {
	background-color: rgba(140, 174, 203, 0.75);
}
.transparente50 {
	background: rgba(255, 255, 255, 0.5);
}
/*===================================
           FLOAT
====================================*/
.f__left {
	float: left;
	margin: 2rem;
}
.f__right {
	float: right;
	margin: 2rem;
}
.t__left {
	text-align: left;
}
.t__right {
	text-align: right;
}
.t__center {
	text-align: center;
}
.t__justify {
	text-align: justify;
}
.tam__100 {
	width: 100%;
}
.tam__50 {
	width: 50%;
}
.tam__33 {
	width: 33%;
}
@media only screen and (min-width: 281px) and (max-width: 699px) {
	.tam_33 {
		width: 50%;
	}
}
figure {
	position: relative;
	margin: 1rem;
	text-align: center;
}
figure > img {
	margin: 1rem auto;
}
figcaption {
	font: 200 1rem/1.2rem "Lato", sans-serif;
	text-align: center;
	bottom: 0;
}
.cursos figure {
	position: absolute;
	margin: 1rem;
	left: 0;
	width: 200px;
	height: 200px;
	text-align: center;
}
.cursos figure > img {
	margin: 0 auto;
}
.cursos figcaption {
	font: 200 1.7rem/2rem "Lato", sans-serif;
	text-align: center;
	bottom: 0;
}
.cursos h3 {
	font: italic 200 1.5rem/2rem "Lato", sans-serif;
}
.cursos h4 > span {
	font: italic 600 1.5rem/1.8rem "Lato", sans-serif;
	color: #3e3e3e;
}
.cursos_lat p {
	font: 200 1.7rem/1.8rem "Lato", sans-serif;
}
.bigtext {
	display: block;
	overflow: hidden;
	font-size: 14px;
}
.expand,
.contract {
	cursor: pointer;
	text-align: center;
	font-family: "montserratsemi_bold";
	font-size: 20px;
	color: #ff6600;
}
.expand:hover,
.contract:hover {
	text-decoration: underline;
}

.hide {
	display: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}
strong,
b {
	font-weight: 700;
}
em,
i {
	font-style: italic;
}
.destacado {
	margin-bottom: 2rem;
}
/* ============== tooltip =============== */
#tooltip {
	position: absolute;
	margin-top: 10px;
	background: rgba(255, 94, 0, 0.84);
	-moz-opacity: 0.84;
	-webkit-opacity: 0.84;
	opacity: 0.84;
	z-index: 100;
	text-align: center;
	color: #fff;
	padding: 15px;
	border: 1px solid #000;
	-moz-border-radius: 1rem;
	-webkit-border-radius: 1rem;
	border-radius: 1rem;
}

#tooltip:after {
	/* triangle decoration */
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid rgba(255, 94, 0, 0.84);
	content: "";
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;
}

#tooltip.top:after {
	border-top-color: transparent;
	border-bottom: 10px solid rgba(68, 68, 68, 0.84);
	top: -20px;
	bottom: auto;
}

#tooltip.left:after {
	left: 10px;
	margin: 0;
}

#tooltip.right:after {
	right: 10px;
	left: auto;
	margin: 0;
}

/* ================================= */
/*             Sombras               */
/* ================================= */

.drop-shadow {
	position: relative;
	width: 90%;
}

.drop-shadow:before,
.drop-shadow:after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 15px;
	left: 10px;
	width: 50%;
	height: 20%;
	max-width: 300px;
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	transform: rotate(-3deg);
}

.drop-shadow:after {
	right: 10px;
	left: auto;
	transform: rotate(3deg);
}
ul.boxsomb {
	position: relative;
	z-index: 1; /* prevent shadows falling behind containers with backgrounds */
	overflow: hidden;
	list-style: none;
	margin: 1px;
}
ul.boxsomb li {
	position: relative;
	float: left;
	padding: 0;
	border: 3px solid #efefef;
	margin: 5px;
	background: #fff;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.6) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27),	0 0 40px rgba(0, 0, 0, 0.6) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.6) inset;
	list-style-type: none;
}
ul.boxsomb li img {
	margin: 3px;
}
ul.boxsomb li:before,
ul.boxsomb li:after {
  z-index: -1; 
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  top: 80%;
  width: 50%;
  background: #333;
  -webkit-box-shadow: 0 15px 10px #333;
  -moz-box-shadow: 0 15px 10px #333;
  box-shadow: 0 15px 10px #333;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
ul.boxsomb li:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.afiche {
	border: thin solid #000000;
	padding: 0;
}
.img-shadow {
	border: 6px solid #000000;
	border: 5px solid #fff;
	box-shadow: #111 2px 2px 4px;
}
.img-shadow:after,
.img-shadow:before {
	content: "";
	z-index: -1;
	position: absolute;
	left: 10px;
	bottom: 10px;
	width: 90%;
	height: 55%;
	max-height: 100px;
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
	-webkit-transform: skew(-15deg) rotate(-4deg);
	-moz-transform: skew(-15deg) rotate(-4deg);
	-ms-transform: skew(-15deg) rotate(-4deg);
	-o-transform: skew(-15deg) rotate(-4deg);
	transform: skew(-15deg) rotate(-4deg);
}
/* efecto 2 */
.boxE {
	background:#FFF;
  z-index: 0;
}
.boxE img{
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.efecto2 {
  position: relative;
}
.efecto2:before, .efecto2:after {
  /* Posiciona la sombra por detras del color de la caja*/
  z-index: -1; 
  position: absolute;
  /* no aplico ningun contenidos HTML */
  content: "";
  /* posiciona la sombra con respecto al borde inferior, izquierdo y superior */
  bottom: 15px;
  left: 10px;
  top: 80%;
  /* configura el ancho */
  width: 50%;
  /* color de fondo */
  background: #333;
  /* definicion de la sombra estandar para box-shadow */
  -webkit-box-shadow: 0 15px 10px #333;
  -moz-box-shadow: 0 15px 10px #333;
  box-shadow: 0 15px 10px #333;
  /* rotacion de la sombra */
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.efecto2:after {
  /* rotacion de la sombra */
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  /* posiciona la sombra con respecto al borde izquierdo y derecho */
  right: 10px;
  left: auto;
}

.tapa {
	border: thin #777575 solid;
	width: 250px;
	padding: 0;
}
.tapa-libro {
	border: thin #777575 solid;
	width: 200px;
	height: auto;
	padding: 0;
}
@media only screen and (min-width: 481px) and (max-width: 599px) {
	.tapa {
		width: 65%;
	}
	.lista_revista {
		display: inline;
	}
}
.tapa img {
	top: 0;
	margin: 0;
}
.celeste-60 {
	background-color: rgba(181, 181, 181, 0.3);
}
.error {
	padding: 4rem 0.5rem;
	background: #fff;
	text-align: center;
}
.error h1 {
	font-size: 22px;
	color: #f00;
}
.error p {
	font-size: 18px;
	margin-top: 1rem;
}
/*============ Modal de la cátedras ============*/
.modal {
	font-size: 1.4rem !important;
}
.modal p {
	line-height: 1.2rem;
}
/*========== Link ============*/
.link a {
	text-decoration: none;
	color: inherit;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border-bottom: dashed #000000 thin;
}
.link a:hover {
	color: #2986e2;
	text-decoration: underline;
}
/*========== textos ===========*/
.t__10 li {
	font: 400 1.2rem/1.3rem "Lato", sans-serif;
}
/*========= ComboBox =========*/
/*
 * @CSS3 Metro Dropdown
 * @author Martin Ivanov
 * @website http://wemakesitesnet
 * @blog http://acidmartin.wordpress.com
 * @twitter https://twitter.com/#!/wemakesitesnet
 **/
.goog-te-gadget-icon {
	display: none;
}
.goog-te-gadget div {
	border: none !important;
}
a.goog-te-menu-value:hover {
	text-decoration: none;
}
.goog-te-menu-value span:last-child {
	color: #fff !important;
}
.goog-te-menu-value {
	-moz-box-shadow: inset 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow: inset 0px 1px 0px 0px #fff6af;
	box-shadow: inset 0px 1px 0px 0px #fff6af;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.05, #ffec64),
		color-stop(1, #ffab23)
	);
	background: -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background: -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background: -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background: -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color: #ffec64;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #ffaa22;
	display: inline-block;
	cursor: pointer;
	color: #333333 !important;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	padding: 6px 24px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #ffee66;
}
.goog-te-menu-value:hover {
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.05, #ffab23),
		color-stop(1, #ffec64)
	);
	background: -moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background: -webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background: -o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background: -ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color: #ffab23;
}
.goog-te-menu-value:active {
	position: relative;
	top: 1px;
}

hr.punteado {
	border: 1px dotted #666;
}

hr {
	border: 0;
	height: 2px;
	text-align: center;
	background: -webkit-linear-gradient(left, #fff, #000, #fff);
	background: -moz-linear-gradient(left, #fff, #000, #fff);
	background: -o-linear-gradient(left, #fff, #000, #fff);
	background: -ms-linear-gradient(left, #fff, #000, #fff);
	background: linear-gradient(left, #fff, #000, #fff);
}
/* ======= Box 1 Wrapper ======= */
.box1-wrapper1 {
	margin-top: 23px;
	border-top: 8px solid #2986e2;
	padding: 43px 0 30px;
}
.box1-wrapper1 .box1 + .box1 {
	padding-top: 26px;
	border-top: 1px solid #e0e0e0;
}
.box1-wrapper1.box1-wrapper1__offset1 {
	margin-top: 5px;
}
/* ======= Box 1 Patient care ======= */
.box1 {
	padding-right: 65px;
	margin-bottom: 28px;
}
@media (min-width: 768px) and (max-width: 979px) {
	.box1 {
		padding-right: 0;
	}
}
.box1 ul {
	margin-top: 8px;
}
.box1 h6 {
	margin-bottom: 6px;
}
.box1 h6 + ul {
	margin-top: 12px;
	margin-bottom: 38px;
}
.box1 ul li + li {
	margin-top: 5px;
}
.box1 > .btn-default {
	margin-top: 8px;
}
/* ======= Box 2 What we do ======= */
.box2 h4 {
	margin-bottom: 10px;
}
.box2 p {
	margin-bottom: 14px;
}
.box2 .highlighted {
	color: #2986e2;
	display: block;
	margin-top: 35px;
	margin-bottom: 42px;
	font-weight: 400;
	letter-spacing: -0.025em;
}
/* ======= Box 3 Our services are grouped ======= */
.box3 {
	display: block;
	position: relative;
	padding: 21px 20px 5px 72px;
	background: #f26529;
	color: #ffffff;
}
.box3:hover {
	color: #ffffff;
	background: #2986e2;
}
.box3 img {
	position: absolute;
	left: 0;
	top: 16px;
}
.box3 .heading {
	display: block;
	text-transform: uppercase;
	margin-bottom: 7px;
	font-weight: 700;
	line-height: 22px;
}
@media (max-width: 1199px) {
	.box3 {
		text-align: center;
		padding: 21px 20px 5px;
	}
	.box3 img {
		margin-bottom: 20px;
		position: relative;
		top: auto;
		left: auto;
	}
}
@media (max-width: 979px) {
	.box3 {
		padding: 21px 10px 5px;
	}
	.box3 .heading {
		font-size: 14px;
	}
}
@media (max-width: 767px) {
	.box3 {
		margin-bottom: 40px;
	}
}
/* ======= HR 1 ======= */
.hr-1 {
	margin: 52px 0 37px;
	background: #e0e0e0;
	height: 1px;
	border: 0;
}
@media (max-width: 767px) {
	.hr-1 {
		display: none;
	}
}
/* ======= HR 2 ======= */
.hr-2 {
	margin: 18px 0 37px;
	background: #e0e0e0;
	height: 1px;
	border: 0;
}
@media (max-width: 767px) {
	.hr-2 {
		display: none;
	}
}
/* ======= Box 4 Hospital information ======= */
.box4 {
	margin-bottom: 45px;
}
.box4 h4 {
	margin-bottom: 9px;
}
/* ======= Box 5 Laura's patient story ======= */
.box5 {
	border: 1px solid #e2e2db;
	padding: 21px 21px 33px 21px;
	margin-top: 5px;
}
.box5 .wrapper {
	margin-bottom: 20px;
}
.box5 .wrapper .block {
	display: inline-block;
	color: #ffffff;
}
.box5 .wrapper .block .name {
	display: block;
	font: 700 20px/26px "Lato", sans-serif;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.box5 .wrapper .block a {
	padding: 22px 17px 24px;
	display: block;
	background: #f26529;
	margin-left: 6px;
}
.box5 .wrapper .block a:hover {
	color: #ffffff;
	background: #2986e2;
}
.box5 > p {
	margin-bottom: 14px;
}
.box5 .btn-default {
	margin-top: -5px;
	color: #f26529;
}
.box5 .btn-default:hover {
	color: #2986e2;
}
@media (max-width: 1199px) {
	.box5 img {
		width: 100%;
	}
	.box5 .wrapper .block {
		display: block;
		width: 100%;
		margin-top: 10px;
	}
	.box5 .wrapper .block br {
		display: none;
	}
	.box5 .wrapper .block a {
		padding: 10px;
		display: block;
		margin-left: 0;
	}
	.box5 .wrapper .block .name {
		display: inline-block;
	}
}
/* ======= Box 6 Cancer Research ======= */
.box6 {
	margin: 10px 5px;
	border: 1px solid #b3b3b3;
	padding: 11px 15px 11px 15px;
	background: #dddddd;
}
.box6 .heading {
	padding: 13px 5px 14px 16px;
	display: block;
	margin-bottom: 20px;
	background: #f74601;
	font: 700 20px/26px "Lato", sans-serif;
	text-transform: uppercase;
	color: #ffffff;
}
.box6 .heading:hover {
	color: #ffffff;
	background: #2986e2;
}
.box6 p {
	margin-bottom: 14px;
}
.box6 .btn-default {
	margin-top: -5px;
	color: #f26529;
}
.box6 .btn-default:hover {
	color: #2986e2;
}
@media (max-width: 979px) {
	.box6 {
		padding-left: 10px;
		padding-right: 10px;
	}
	.box6 .heading {
		font-size: 14px;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}
}
@media (max-width: 767px) {
	.box6 {
		margin-bottom: 40px;
	}
}
/* ======= Box 7 wrapper 1 ======= */
.box7-wrapper1 {
	margin-top: -2px;
}
.box7-wrapper1 .single-p {
	margin-bottom: 39px;
}
.box7-wrapper1 .box7 {
	margin-bottom: 57px;
}
/* ======= Box 7 Research support ======= */
.box7 h3 {
	margin-bottom: 7px;
}
.box7 h4 {
	margin-bottom: 10px;
}
.box7 .btn-default {
	margin-top: 9px;
}
/* ======= Box 8 Research awards ======= */
.box8 {
	margin-top: -1px;
}
.box8 h4 {
	margin-bottom: 11px;
}
.box8 p {
	margin-bottom: 10px;
}
.box8 ul {
	margin-top: 32px;
}
@media (max-width: 767px) {
	.box8 {
		margin-bottom: 40px;
	}
}
/* ======= Box 9 Recent Discoveries ======= */
.box9 {
	margin-top: -2px;
}
.box9 img {
	margin-top: 7px;
}
@media (max-width: 767px) {
	.box9 img {
		margin-bottom: 20px;
		width: 100%;
	}
}
/* ======= Box 10 Postdoctoral Research training ======= */
.box10 {
	margin-top: -1px;
}
.box10 h4 {
	margin-bottom: 10px;
}
.box10 dl {
	margin-top: 35px;
}
.box10 dl dt {
	font: 700 20px/26px "Lato", sans-serif;
	color: #2986e2;
	margin-bottom: 10px;
	padding-left: 36px;
	position: relative;
}
.box10 dl dt:before {
	display: block;
	font-family: FontAwesome;
	font-size: 14px;
	position: absolute;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	cursor: default;
	line-height: 26px;
	content: "\f0c8";
	color: #f26529;
	left: 0;
	top: 0;
}
.box10 dl dt a:hover {
	color: #f26529;
}
.box10 dl dd {
	padding-left: 36px;
	margin-bottom: 35px;
}
.box10 dl dd p {
	margin-bottom: 14px;
}
.box10 dl dd ul {
	line-height: 30px;
}
.box10 dl dd ul li + li {
	margin-top: 1px;
}
/* ======= Box 11 Wrapper 1 ======= */
.box11-wrapper1 {
	margin-top: 5px;
	border-top: 4px solid #2986e2;
	padding-top: 29px;
}
/* ======= Box 11 For current and incoming ======= */
.box11 img {
	margin-bottom: 26px;
}
.box11 h6 {
	margin-bottom: 5px;
}
.box11 p {
	margin-bottom: 14px;
}
.box11 .btn-default {
	margin-top: -5px;
}
@media (max-width: 767px) {
	.box11 img {
		width: 100%;
	}
}
/* ======= Box 12 Privacy Policy ======= */
.box12 {
	margin-top: 36px;
}
.box12 h4 {
	margin-bottom: 10px;
}
.box12 p {
	margin-bottom: 14px;
}
.box12 .simple-link {
	margin-top: 21px;
}
/* ======= Google Map  ======= */
.google-map1 {
	height: 623px;
	margin-bottom: 78px;
	margin-top: 44px;
}
/*======== Lista simple ========*/
.lista {
	margin-left: 20px;
}
.lista li {
	list-style-type: none;
}
/* ======= List 1 ======= */
#footer .list1 li {
	font: 400 14px/21px "Lato", sans-serif;
	color: #737373;
	text-align: justify;
}
.list1 li {
	font: 600 12px/14px "Lato", sans-serif;
	color: #222;
	text-align: justify;
}
.list1 li:before {
	font-family: "FontAwesome";
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	cursor: default;
	line-height: 14px;
	content: "\f15b";
	color: #f26529;
	padding-right: 10px;
}
.list1 li a {
	color: #222;
	font-style: oblique;
}
.list1 li a:hover {
	color: #f26529;
}
.list1 li + li {
	margin-top: 9px;
}
/* ======= list 2 ======= */
.list2 {
	margin: 20px;
	list-style-type: none;
}
.list2 li {
	position: relative;
	padding-left: 25px;
	/*font: 400 14px/31px "Lato", sans-serif;*/
	letter-spacing: -0.025em;
	color: #4c4c4c;
}
.list2 li img {
	height: 4rem;
	margin: 1rem;
}
.list2 li:before {
	display: block;
	font-family: "FontAwesome";
	/*font-size: 18px;*/
	position: absolute;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	cursor: default;
	/*line-height: 31px;*/
	content: "\f101";
	color: #f26529;
	left: 0;
	top: 0;
}

/* ======= list 3 ======= */
.list3 li {
	position: relative;
	padding-left: 22px;
	/*font: 300 14px/20px "Lato", sans-serif;*/
	color: #4c4c4c;
	list-style-type: none;
}
.list3 li:before {
	display: block;
	font-family: "FontAwesome";
	font-size: 8px;
	position: absolute;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	cursor: default;
	line-height: 12px;
	content: "\25cf";
	color: #f26529;
	left: 0;
	top: 0;
}
/* ========= Lista numerada con circulo ========*/
.listaN li {
	list-style-type: none;
	margin-top: 25px;
	counter-increment: contador;
}

.listaN li:before {
	padding: 5px;
	padding-left: 9px;
	padding-right: 9px;
	margin-right: 20px;
	background-color: #df9203;
	border-radius: 20px 20px 20px 20px;

	content: counter(contador);

	text-shadow: 0 0 6px #000;
	box-shadow: 2px 2px 5px #000;
	font-weight: bolder;

	color: #000;
}
/*============ Lista search ============*/
.search {
	margin: 20px;
	list-style-type: none;
}
.search li {
	position: relative;
	padding-left: 15px;
	letter-spacing: -0.025em;
	color: #4c4c4c;
	margin-bottom: 20px;
}
.search li img {
	height: 4rem;
	margin: 1rem;
}
.search li:before {
	display: block;
	font-family: "FontAwesome";
	/*font-size: 18px;*/
	position: absolute;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	cursor: default;
	/*line-height: 31px;*/
	content: "\f0da";
	color: #f26529;
	left: 0;
	top: 0;
}
.search .enlace {
	color: #00f;
	text-decoration: underline;
	font-size: 12px;
}
/*==========================================*/
.box {
	margin: 50px auto;
	width: 300px;
	height: 50px;
}
.container-1 {
	width: 300px;
	vertical-align: middle;
	white-space: nowrap;
	position: relative;
}
.container-1 input#search {
	width: 300px;
	height: 50px;
	background: #2b303b;
	border: none;
	font-size: 10pt;
	float: left;
	color: #63717f;
	padding-left: 45px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: background 0.55s ease;
	-moz-transition: background 0.55s ease;
	-ms-transition: background 0.55s ease;
	-o-transition: background 0.55s ease;
	transition: background 0.55s ease;
}
.container-1 input#search::-webkit-input-placeholder {
	color: #65737e;
}

.container-1 input#search:-moz-placeholder {
	/* Firefox 18- */
	color: #65737e;
}

.container-1 input#search::-moz-placeholder {
	/* Firefox 19+ */
	color: #65737e;
}

.container-1 input#search:-ms-input-placeholder {
	color: #65737e;
}
.container-1 .icon {
	position: absolute;
	top: 50%;
	margin-left: 17px;
	margin-top: 17px;
	z-index: 1;
	color: #4f5b66;
}
.container-1 span {
	border: 1px solid #4f5b66;
	width: 17px;
}
.container-1 input#search:hover,
.container-1 input#search:focus,
.container-1 input#search:active {
	outline: none;
	background: #ffffff;
}
.container-1 button.icon {
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;

	border: none;
	background: #232833;
	height: 50px;
	width: 50px;
	color: #4f5b66;
	opacity: 0;
	font-size: 10pt;

	-webkit-transition: all 0.55s ease;
	-moz-transition: all 0.55s ease;
	-ms-transition: all 0.55s ease;
	-o-transition: all 0.55s ease;
	transition: all 0.55s ease;
}
.container-1:hover button.icon,
.container-1:active button.icon,
.container-1:focus button.icon {
	outline: none;
	opacity: 1;
	margin-left: -50px;
}

.container-1:hover button.icon:hover {
	background: white;
}
.container-2 {
	width: 300px;
	vertical-align: middle;
	white-space: nowrap;
	position: relative;
}
.container-2 input#search {
	width: 50px;
	height: 50px;
	background: #2b303b;
	border: none;
	font-size: 10pt;
	float: left;
	color: #262626;
	padding-left: 35px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;

	-webkit-transition: width 0.55s ease;
	-moz-transition: width 0.55s ease;
	-ms-transition: width 0.55s ease;
	-o-transition: width 0.55s ease;
	transition: width 0.55s ease;
}
.container-2 input#search::-webkit-input-placeholder {
	color: #65737e;
}

.container-2 input#search:-moz-placeholder {
	/* Firefox 18- */
	color: #65737e;
}

.container-2 input#search::-moz-placeholder {
	/* Firefox 19+ */
	color: #65737e;
}

.container-2 input#search:-ms-input-placeholder {
	color: #65737e;
}
.container-2 .icon {
	position: absolute;
	top: 50%;
	margin-left: 17px;
	margin-top: 17px;
	z-index: 1;
	color: #4f5b66;
}
.container-2 input#search:focus,
.container-2 input#search:active {
	outline: none;
	width: 300px;
}

.container-2:hover input#search {
	width: 300px;
}

.container-2:hover .icon {
	color: #93a2ad;
}

.container-3 {
	width: 300px;
	vertical-align: middle;
	white-space: nowrap;
	position: relative;
}

.container-3 input#search {
	width: 300px;
	height: 50px;
	background: #2b303b;
	border: none;
	font-size: 10pt;
	float: left;
	color: #262626;
	padding-left: 45px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
}
.container-3 input#search::-webkit-input-placeholder {
	color: #65737e;
}

.container-3 input#search:-moz-placeholder {
	/* Firefox 18- */
	color: #65737e;
}

.container-3 input#search::-moz-placeholder {
	/* Firefox 19+ */
	color: #65737e;
}

.container-3 input#search:-ms-input-placeholder {
	color: #65737e;
}
.container-3 .icon {
	position: absolute;
	top: 50%;
	margin-left: 17px;
	margin-top: 17px;
	z-index: 1;
	color: #4f5b66;

	-webkit-transition: all 0.55s ease;
	-moz-transition: all 0.55s ease;
	-ms-transition: all 0.55s ease;
	-o-transition: all 0.55s ease;
	transition: all 0.55s ease;
}
.container-3 input#search:focus,
.container-3 input#search:active {
	outline: none;
}

.container-3:hover .icon {
	margin-top: 16px;
	color: #93a2ad;

	-webkit-transform: scale(1.5); /* Safari and Chrome */
	-moz-transform: scale(1.5); /* Firefox */
	-ms-transform: scale(1.5); /* IE 9 */
	-o-transform: scale(1.5); /* Opera */
	transform: scale(1.5);
}
.container-4 {
	overflow: hidden;
	width: 300px;
	vertical-align: middle;
	white-space: nowrap;
}
.container-4 input#search {
	width: 300px;
	height: 50px;
	background: #2b303b;
	border: none;
	font-size: 10pt;
	float: left;
	color: #fff;
	padding-left: 15px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.container-4 input#search::-webkit-input-placeholder {
	color: #65737e;
}

.container-4 input#search:-moz-placeholder {
	/* Firefox 18- */
	color: #65737e;
}

.container-4 input#search::-moz-placeholder {
	/* Firefox 19+ */
	color: #65737e;
}

.container-4 input#search:-ms-input-placeholder {
	color: #65737e;
}
.container-4 button.icon {
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;

	border: none;
	background: #232833;
	height: 50px;
	width: 50px;
	color: #4f5b66;
	opacity: 0;
	font-size: 10pt;

	-webkit-transition: all 0.55s ease;
	-moz-transition: all 0.55s ease;
	-ms-transition: all 0.55s ease;
	-o-transition: all 0.55s ease;
	transition: all 0.55s ease;
}
.container-4:hover button.icon,
.container-4:active button.icon,
.container-4:focus button.icon {
	outline: none;
	opacity: 1;
	margin-left: -50px;
}

.container-4:hover button.icon:hover {
	background: white;
	border: 1px solid #666;
}

/* ======================================== */
dl {
	margin-bottom: 20px;
}

dt {
	font: 14px "Delicious-Heavy", "Lucida Grande", "Lucida Sans Unicode",
		Helvetica, Arial, sans-serif;
	text-shadow: rgba(255, 255, 255, 0.8) 2px 2px 0;
	text-align: center;
	color: #822020;
	margin-bottom: 5px;
}
dd {
	font: 12px "Delicious", "Lucida Grande", "Lucida Sans Unicode", Helvetica,
		Arial, sans-serif;
	text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0;
	padding: 10px;
	border-width: 20px;
	-moz-border-image: url(bubble.png) 20 stretch;
	-webkit-border-image: url(bubble.png) 20 stretch;
	-khtml-border-image: url(bubble.png) 20 stretch;
	border-image: url(bubble.png) 20 stretch;
	margin-bottom: 30px;
}
/*=================================================*/
.select {
	border: 1px solid #d9d9d9;
	height: 40px;
	overflow: hidden;
	width: 130px;
	position: relative;
}
select {
	background: transparent;
	border: none;
	font-size: 14px;
	height: 40px;
	padding: 5px;
}
select:focus {
	outline: none;
}

.select::after {
	content: "\025be";
	display: table-cell;
	padding-top: 7px;
	text-align: center;
	font-size: 20px;
	width: 40px;
	height: 40px;
	background-color: #d9d9d9;
	position: absolute;
	top: 0;
	right: 0px;
	pointer-events: none;
}

.select2 {
	position: relative;
	border: 1px solid #ccc;
	width: 120px;
	overflow: hidden;
	background-color: #fff;
}

.select2:before {
	content: "";
	position: absolute;
	right: 5px;
	top: 7px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 5px 0 5px;
	border-color: #000000 transparent transparent transparent;
	z-index: 5;
	pointer-events: none;
}

.select2 select {
	padding: 5px 8px;
	width: 130%;
	border: none;
	box-shadow: none;
	background-color: transparent;
	background-image: none;
	appearance: none;
}
/*-------------------------------------*/
.select3 {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-padding-end: 20px;
	-moz-padding-end: 20px;
	-webkit-padding-start: 2px;
	-moz-padding-start: 2px;
	background-color: #ddd; /* fallback color if gradients are not supported */
	background-image: url(/assets/images/iconos/arrow2.png),
		-webkit-linear-gradient(top, #e5e5e5, #f4f4f4); /* For Chrome and Safari */
	background-image: url(/assets/images/iconos/arrow2.png),
		-moz-linear-gradient(top, #e5e5e5, #f4f4f4); /* For old Fx (3.6 to 15) */
	background-image: url(/assets/images/iconos/arrow2.png),
		-ms-linear-gradient(top, #e5e5e5, #f4f4f4); /* For pre-releases of IE 10*/
	background-image: url(/assets/images/iconos/arrow2.png),
		-o-linear-gradient(top, #e5e5e5, #f4f4f4); /* For old Opera (11.1 to 12.0) */
	background-image: url(/assets/images/iconos/arrow2.png),
		linear-gradient(to bottom, #e5e5e5, #f4f4f4); /* Standard syntax; must be last */
	background-position: center right;
	background-repeat: no-repeat;
	border: 1px solid #aaa;
	border-radius: 4px;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	color: #555;
	font-size: inherit;
	margin: 0;
	overflow: hidden;
	padding-top: 2px;
	padding-bottom: 2px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* --------------------- Formularios ---------------------- 
form input {
	border: 1px solid #4F4F4F;
	border-bottom: 2px solid #731214;
	background: #BDDEF8;
}
textarea:focus, input:focus {
  outline: 2px solid #000;
}*/
/*----------------------- Mensajes de OK y Error -------------------*/

.cajaOK {
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	background: #06a800;
	margin: 0 0 25px;
	overflow: hidden;
	padding: 20px;
	-moz-border-radius: 35px 0px 35px 0px;
	-webkit-border-radius: 35px 0px 35px 0px;
	border-radius: 35px 0px 35px 0px;
	border: 2px solid #017400;
}
.cajaERROR {
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	background: #db3d3d;
	margin: 0 0 25px;
	overflow: hidden;
	padding: 20px;
	-moz-border-radius: 35px 0px 35px 0px;
	-webkit-border-radius: 35px 0px 35px 0px;
	border-radius: 35px 0px 35px 0px;
	border: 2px solid #740007;
}
.notimg {
	width: 100px !important;
}
.resaltado {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	background: rgb(193, 207, 255);
}
/*----------------------- Colores ----------------------*/
.naranja {
	color: #ff6600;
	padding: 3px;
}
.naranja:hover {
	color: #fff;
	background-color: #ff6600;
}
/*-------------------- Degradado ----------------------*/
.degradado {
	background: -webkit-linear-gradient(#731c07 20%, #ff3f10);
	background: -moz-linear-gradient(#731c07 20%, #ff3f10);
	background: -o-linear-gradient(#731c07 20%, #ff3f10);
	background: linear-gradient(#731c07 20%, #ff3f10);
}
/*--------------------- Fechas ------------------------*/
.plazos {
	font-size: 11px;
}

/*----------------
============== Efecto para los campos input en formularios
------------------*/

.input-group {
  position: relative;
  margin: 0 2rem;
}

.input {
  border: solid 1.5px #dee2e6;
  border-radius: 5px;
  margin: 0.1rem;
  background: none;
  width: 85%;
  padding: .35rem;
  font-size: 1rem;
  color: #9e9e9e;
  transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.placeholder-label {
  position: absolute;
  left: 0.5rem;
  color: #9e9e9e;
  pointer-events: none;
  transform: translateY(.5rem);
  transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.input:focus,
input:valid,
textarea:valid
 {
  outline: none;
  border: 1.5px solid #1a73e8;
}

.input:focus~label,
input:valid~label,
textarea:valid~label {
  transform: translateY(-50%) scale(0.8);
  background-color: #fff;
  padding: 0 .2em;
  color: #2196f3;
}

input:user-invalid~label,
input:user-invalid~label,
textarea:user-invalid~label {
  transform: translateY(-50%) scale(0.8);
  background-color: #fff;
  padding: 0 .2em;
  color: #f34b21;
}

input:user-invalid,
textarea:user-invalid {
  outline: none;
	border: 1.5px solid #f34b21;
}