@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;}
html, body { font-size: 62.5%; height: 100%; }

body {
	font-family: 'Roboto', sans-serif;
  	line-height: 1.5;
  	color: #fff;
  	position: relative;
	background: #ccc url(../img/patron-bg.svg) repeat 0 0;
	cursor: all-scroll; }
p{ font-size:20px;}

.tablero-monopoly-contenedor { position: relative; height: 100vh; -webkit-perspective: 2000px; perspective: 2000px; transform: scale(.6);}
.tablero-monopoly {  position: absolute; left: 50%; top: 50%; margin-left: 0; margin-top: -20rem; width: 13rem; height: 13rem; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(60deg) rotateZ(-45deg); transform: rotateX(60deg) rotateZ(-45deg); will-change: transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.tablero-monopoly div, .tablero-monopoly div:before, .tablero-monopoly div:after { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-color: inherit;}

/* RETICULA TABLERO */
.tablero-monopoly__celdas { position: absolute; left: 0; top: 0; width: 13rem; height: 13rem; -webkit-transform: translateZ(0); transform: translateZ(0);}
.tablero-monopoly__celdas-key { position: absolute; left: 0; top: -16rem; width: 13rem; height: 13rem; box-shadow: 0 0 10px rgba(0,0,0,0.8); -webkit-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: translateZ(5rem); transform: translateZ(5rem); opacity: 0;}
.tablero-monopoly__celdas-key a{ cursor: pointer;}
/* INICIO DE CELDAS */
.tablero-monopoly.ready .tablero-monopoly__celdas-key { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0);}
.tablero-monopoly__celdas-key:nth-child(1) { left: -56rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda1.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.25s forwards; animation: keyAnim 0.7s 0.25s forwards;}
.tablero-monopoly__celdas-key:nth-child(2) { left: -56rem; top: 42rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda2.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.3s forwards; animation: keyAnim 0.7s 0.3s forwards;}
.tablero-monopoly__celdas-key:nth-child(3) { left: -56rem; top: 28rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda3.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.35s forwards; animation: keyAnim 0.7s 0.35s forwards; }
.tablero-monopoly__celdas-key:nth-child(4) { left: -56rem; top: 14rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda4.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.4s forwards; animation: keyAnim 0.7s 0.4s forwards;}
.tablero-monopoly__celdas-key:nth-child(5) { left: -56rem; top: 0; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda5.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.45s forwards; animation: keyAnim 0.7s 0.45s forwards;}
.tablero-monopoly__celdas-key:nth-child(6) { left: -56rem; top: -14rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda6.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.5s forwards; animation: keyAnim 0.7s 0.5s forwards;}
.tablero-monopoly__celdas-key:nth-child(7) { left: -56rem; top: -28rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda7.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.55s forwards; animation: keyAnim 0.7s 0.55s forwards;}
.tablero-monopoly__celdas-key:nth-child(8) { left: -56rem; top: -42rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda8.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.6s forwards; animation: keyAnim 0.7s 0.6s forwards;}
.tablero-monopoly__celdas-key:nth-child(9) { left: -56rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda9.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.65s forwards; animation: keyAnim 0.7s 0.65s forwards;}
.tablero-monopoly__celdas-key:nth-child(10) { left: -42rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda10.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.7s forwards; animation: keyAnim 0.7s 0.7s forwards;}
.tablero-monopoly__celdas-key:nth-child(11) { left: -28rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda11.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.75s forwards; animation: keyAnim 0.7s 0.75s forwards;}
.tablero-monopoly__celdas-key:nth-child(12) { left: -14rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda12.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.8s forwards; animation: keyAnim 0.7s 0.8s forwards;}
.tablero-monopoly__celdas-key:nth-child(13) { left: 0; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda13.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.85s forwards; animation: keyAnim 0.7s 0.85s forwards;}
.tablero-monopoly__celdas-key:nth-child(14) { left: 14rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda14.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.9s forwards; animation: keyAnim 0.7s 0.9s forwards;}
.tablero-monopoly__celdas-key:nth-child(15) { left: 28rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda15.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 0.95s forwards; animation: keyAnim 0.7s 0.95s forwards;}
.tablero-monopoly__celdas-key:nth-child(16) { left: 42rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda16.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1s forwards; animation: keyAnim 0.7s 1s forwards;}
.tablero-monopoly__celdas-key:nth-child(17) { left: 56rem; top: -56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda17.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; background-color:#d7f3e6 !important; -webkit-animation: keyAnim 0.7s 1.05s forwards; animation: keyAnim 0.7s 1.05s forwards;}
.tablero-monopoly__celdas-key:nth-child(18) { left: 56rem; top: -42rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda18.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.10s forwards; animation: keyAnim 0.7s 1.10s forwards;}
.tablero-monopoly__celdas-key:nth-child(19) { left: 56rem; top: -28rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda19.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.15s forwards; animation: keyAnim 0.7s 1.15s forwards;}
.tablero-monopoly__celdas-key:nth-child(20) { left: 56rem; top: -14rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda20.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.2s forwards; animation: keyAnim 0.7s 1.2s forwards;}
.tablero-monopoly__celdas-key:nth-child(21) { left: 56rem; top: 0; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda21.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.25s forwards; animation: keyAnim 0.7s 1.25s forwards;}
.tablero-monopoly__celdas-key:nth-child(22) { left: 56rem; top: 14rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda22.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.3s forwards; animation: keyAnim 0.7s 1.3s forwards;}
.tablero-monopoly__celdas-key:nth-child(23) { left: 56rem; top: 28rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda23.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.35s forwards; animation: keyAnim 0.7s 1.35s forwards;}
.tablero-monopoly__celdas-key:nth-child(24) { left: 56rem; top: 42rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda24.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.4s forwards; animation: keyAnim 0.7s 1.4s forwards;}
.tablero-monopoly__celdas-key:nth-child(25) { left: 56rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda25.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.45s forwards; animation: keyAnim 0.7s 1.45s forwards;}
.tablero-monopoly__celdas-key:nth-child(26) { left: 42rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda26.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.5s forwards; animation: keyAnim 0.7s 1.5s forwards;}
.tablero-monopoly__celdas-key:nth-child(27) { left: 28rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda27.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.55s forwards; animation: keyAnim 0.7s 1.55s forwards;}
.tablero-monopoly__celdas-key:nth-child(28) { left: 14rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda28.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.6s forwards; animation: keyAnim 0.7s 1.6s forwards;}
.tablero-monopoly__celdas-key:nth-child(29) { left: 0; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda29.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.65s forwards; animation: keyAnim 0.7s 1.65s forwards;}
.tablero-monopoly__celdas-key:nth-child(30) { left: -14rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda30.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.7s forwards; animation: keyAnim 0.7s 1.7s forwards;}
.tablero-monopoly__celdas-key:nth-child(31) { left: -28rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda31.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.75s forwards; animation: keyAnim 0.7s 1.75s forwards;}
.tablero-monopoly__celdas-key:nth-child(32) { left: -42rem; top: 56rem; background-image: url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/celda32.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-animation: keyAnim 0.7s 1.8s forwards; animation: keyAnim 0.7s 1.8s forwards;}

/* FIN DE CELDAS */

@-webkit-keyframes keyAnim { to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } }
@keyframes keyAnim { to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } }

@-webkit-keyframes topAnim { to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1;} }
@keyframes topAnim { to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1;} }

a:hover { box-shadow: 0 0 8px rgba(0,0,0,0.4); }

/* CONTENIDO INTERIOR */
.logo-central{position: absolute; left: -14rem; top: 0; width: 41rem; height: 19.625rem; background-image: url(../img/logo.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; -webkit-transform: translateZ(-4rem); transform: translateZ(-4rem); -webkit-transform: translateZ(6rem); transform: translateZ(6rem); opacity: 0; -webkit-animation: topAnim 1s 1.75s forwards; animation: topAnim 1s 1.7s forwards;}
.logo-central:hover{background-image: url(../img/logo_hover.svg) !important; box-shadow: 0 0 8px rgba(0,0,0,0) !important; cursor: pointer;}

.tarjeta-1{position: absolute; left: -28rem; top: -28rem; width: 26rem; height: 13rem; background-image: url(../img/ficha1.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; box-shadow: 0 0 8px rgba(0,0,0,0.6); -webkit-transform: translateZ(-4rem); transform: translateZ(-4rem); -webkit-transform: translateZ(6rem); transform: translateZ(6rem); opacity: 0; -webkit-animation: topAnim 1s 1.85s forwards; animation: topAnim 1s 1.8s forwards;}

.tarjeta-2{position: absolute; left: 14rem; top: -28rem; width: 26rem; height: 13rem; background-image: url(../img/ficha2.svg) !important; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100% !important; box-shadow: 0 0 8px rgba(0,0,0,0.6); -webkit-transform: translateZ(-4rem); transform: translateZ(-4rem); -webkit-transform: translateZ(6rem); transform: translateZ(6rem); opacity: 0; -webkit-animation: topAnim 1s 1.85s forwards; animation: topAnim 1s 1.85s forwards;}

.codigo-de-colores{ background:#EBF9F2 !important; border: 4px solid #83AD99; height:200px; width:35rem; position:absolute; left: -35rem; bottom: -35rem; padding:16px 8px; box-shadow: 0 0 8px rgba(0,0,0,0.6); -webkit-transform: translateZ(-4rem); transform: translateZ(-4rem); -webkit-transform: translateZ(6rem); transform: translateZ(6rem); opacity: 0; -webkit-animation: topAnim 1s 1.9s forwards; animation: topAnim 1s 1.9s forwards; }
.codigo-de-colores p{margin-left:24px; line-height:1.6; color:#666;}
.codigo-de-colores .rojo:before{ content:''; position:absolute; margin-top:8px; width:16px; height:16px; background-color:#ff0000;}
.codigo-de-colores .verde:before{ content:''; position:absolute; margin-top:8px; width:16px; height:16px; background-color:#6acf65;}
.codigo-de-colores .azul:before{ content:''; position:absolute; margin-top:8px; width:16px; height:16px; background-color:#1da1f3;}
.codigo-de-colores .morado:before{ content:''; position:absolute; margin-top:8px; width:16px; height:16px; background-color:#6200a5;}
.codigo-de-colores .amarillo:before{ content:''; position:absolute; margin-top:8px; width:16px; height:16px; background-color:#ffcc00;}

.creditos{ background:#577366 !important; border: 4px solid #EBF9F2; height:200px; width:27rem; position:absolute; left: 20rem; bottom: -35rem; padding:16px 8px; box-shadow: 0 0 8px rgba(0,0,0,0.6);  -webkit-transform: translateZ(-4rem); transform: translateZ(-4rem); -webkit-transform: translateZ(6rem); transform: translateZ(6rem); opacity: 0; -webkit-animation: topAnim 1s 1.95s forwards; animation: topAnim 1s 1.95s forwards;}
.creditos p{ line-height:1.2; color:#EBF9F2; text-align:center;}

/*-------portBox CSS---------*/
.portBox-overlay { height: 100%; width: 100%; background: #2c3a33; opacity: 0.8; filter: alpha(opacity=60); position: fixed; top: 0; left: 0; z-index: 1000; display: none;}
.portBox { max-width:640px; position: absolute; display:none; background: #EBF9F2; z-index: 1001; padding: 30px; text-align:left; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.4); min-width:320px; box-sizing: border-box;}
.close-portBox{ font-size: 20px; line-height: .5; position: absolute; top: -2px; right: 0; font-weight:bold; color: #fff !important; cursor: pointer; border-radius:50%; padding:6px; background-color:#577366; overflow:visible; border:2px solid #fff; text-decoration:none;}
.close-portBox:hover{ background-color:#83AD99; border:2px solid #fff;	}

.portBox img.iconos-temas{ float:left; position:relative; margin-right: 2rem;}

/*--------porBox Content CSS---------*/
.project-info { float: left; width:100%; box-sizing: border-box; padding:0 1rem;}
.color-amarillo{ border-top: #ffcc00 20px solid;}
.color-morado{ border-top: #6200a5 20px solid;}
.project-info h3{ font-family: 'Roboto', sans-serif; font-weight: 900; font-size:3rem; color:#577366; text-align:center;}
.project-info h4{ font-family: 'Roboto', sans-serif; font-weight: 400; font-size:2rem; color:#577366; text-align:center;}
.project-info p{ font-size:1.5rem; color:#577366; margin-bottom: 8px}

.project-info a{ font-family: 'Roboto', sans-serif; font-weight: 900; text-decoration:underline; color:#577366 !important;}
.project-info a:visited { font-family: 'Roboto', sans-serif; font-weight: 900; text-decoration:underline; color:#577366 !important;}

@media only screen and (max-width: 768px){
	.project-info{ width: 100%; padding:0; margin-top:40px;}
	.tablero-monopoly-contenedor { position: relative; height: 80vh; -webkit-perspective: 2000px !important; perspective: 2000px !important; transform: scale(.4) !important;}
	div.sp-modal-message{font-size:1.4rem; margin-top:1rem !important;}
	div.sp-modal-message div.sp-modal-header{line-height:1.4rem !important;height:3rem !important;padding:.2rem ;}
	div.sp-modal-message div.sp-modal-body div.sp-modal-text{ font-size:1.3rem !important; width:100% !important;}
}
@media only screen and (max-width: 640px){
	.project-info{ width: 100%; text-align:center; margin-top:0;}
}

.giraelmovil-monopoly-trump { background:rgba(0,0,0,0.9) url(https://s3.amazonaws.com/static.interactivos.informador/interactivos/trumpoly/img/giraelmovil.svg) center center no-repeat; cursor:default; display:none; height:100%; position:fixed; width:100%; z-index:999999 }
.giraelmovil-monopoly-trump:after { color:#fff; content:"Gira el dispositivo"; display:block; font-size:2em; position:absolute; text-align:center; top:10%; width:100% }
@media all and (orientation:portrait) { html,body,.tablero-monopoly-contenedor { overflow:hidden } .giraelmovil-monopoly-trump { display:block } }

div.sp-modal-window{ position:fixed; width:100%; height:100%; top:0; left:0; z-index:99999; background: rgba(44,58,51,.8);}
div.sp-modal-ui{ display:table; position:absolute; top:0; left:0;}

div.sp-modal-message{font-family: 'Roboto', sans-serif; font-weight: 700;font-size:2rem;text-align:center; background-color:#ebf9f2;  border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.4); margin-top:10rem;}
div.sp-modal-message div.sp-modal-header{white-space:nowrap;line-height:2rem;height:4rem;color:#EBF9F2;padding:1rem;background-color:#577366;}
div.sp-modal-message div.sp-modal-body{padding:1rem}
div.sp-modal-message div.sp-modal-body div.sp-modal-text{ font-size:1.6rem;color:#577366;white-space:pre-line;min-width:16rem;max-width:70rem}

div.sp-modal-message input{ text-decoration: none; padding: .5rem 1rem; font-size: 1.6rem; color: #EBF9F2; background-color: #577366; border-radius: 6px; border: 2px solid #83AD99; cursor:pointer; margin-bottom: 2rem;}
div.sp-modal-message input:hover{ color: #577366; background-color: #83AD99; }


.botones_compartir {width:90px;height:auto;position:fixed !important;right:30px;bottom:20px;z-index:100 !important;padding:7px 15px;}

button.acordeon { background-color: #D7F3E6; color: #577366; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.6rem; transition: 0.4s; font-family: 'Roboto', sans-serif; font-weight: 700;}
button.acordeon.active, button.accordion:hover { background-color: #D7F3E6; }
button.acordeon:after { content: '\002B'; color: #577366; font-weight: bold; float: right; margin-left: 5px; }
button.acordeon.active:after { content: "\2212"; }
div.panel { padding: 0 18px; background-color: #D7F3E6; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; font-family: 'Roboto', sans-serif; font-weight: 700;}