/* LESS Document */

/* Basic */
body {margin:0; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}

* {font-family: 'maison_neuebook';}

@font-face {
	font-family: 'maison_neuemedium';
	src: url('fonts/maisonneue-medium-webfont.woff2') format('woff2'),  url('fonts/maisonneue-medium-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'maison_neuemono';
	src: url('fonts/maisonneue-mono-webfont.woff2') format('woff2'),  url('fonts/maisonneue-mono-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'maison_neuebook';
    src: url('fonts/maisonneue-book-webfont.woff2') format('woff2'),
         url('fonts/maisonneue-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'maison_neuelight';
    src: url('fonts/maisonneue-light-webfont.woff2') format('woff2'),
         url('fonts/maisonneue-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Tamaño de la pantalla */
@defHeight: `window.screen.availHeight`;
@defWidth: `window.screen.availWidth`;
@vp_tablet:     1024px;
@vp_mobile:     480px;
@vp_min:     767px;
@std_height: 900px;
.OnMin(@rules) { @media (max-width:(@vp_min)) { @rules(); } };
.OnTabletGral(@rules) { @media (max-width:(@vp_tablet)) { @rules(); } };
.OnTablet(@rules) { @media (max-width:(@vp_tablet - 1)) and (min-width:@vp_mobile) { @rules(); } };
.OnMobile(@rules) { @media (max-width:(@vp_mobile - 1)) { @rules(); } };
.OnStandardHeight(@rules) { @media (min-height:(@std_height)) { @rules(); } };
.OnSmallHeight(@rules) { @media (max-height:(@std_height)) { @rules(); } };
.OnBigHeight(@rules) { @media (min-height:(@std_height + 1)) { @rules(); } };


/* Colores del theme */
/* RRI */
@color-rri-oscuro:#2d5e8b;
@color-rri-claro:#cccccc;
@color-rri-medio:#ffffff;

/* Colores adicionales */
@rojo:#D02427;

/* Sizes */
/* @size-1: unit(@defWidth / 5, px); */
@size-1:30%;

/* ZIndex */
@sindex:1;

/* Figuras */
.circulo {
	border-radius:50%;
	text-align:center;
}

.centrado {
	position:relative;
	top:50%;
	left:50%;
}

/* Basic layout */
.AF-cell {display:table-cell; width:100%; height:100vh;}
.AF-cell-relleno {display:table-cell;}
.AF-table {display:table; width:100%;}
.AF-table-row {display:table-row; width:100%;}

/* Grid System */
.generate-columns(10);
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .AF-@{i} {
    width: (100% / @i);
  }
  .generate-columns(@n, (@i + 1));
}


.AF-p100 {width:100%;}
.AF-p90 {width:90%;}
.AF-p80 {width:80%;}
.AF-p70 {width:70%;}
.AF-p60 {width:60%;}
.AF-p50 {width:50%;}
.AF-p40 {width:40%;}
.AF-p30 {width:30%;}
.AF-p20 {width:20%;}
.AF-p15 {width:15%;}
.AF-p10 {width:10%;}
.AF-p05 {width:5%;}
.AF-5x {width:20%;}
.AF-td {vertical-align: top; padding-right: 30px; border-right:1px solid #ddd; padding-left: 30px; padding-bottom: 50px;}
.AF-td:last-child{border-right:none;}

/* Gradient grid system for stages */
.AF-g-0--100 {top:-100vh; left:0;} /* 3 */
.AF-g-0-100 {top:100vh; left:0;} /* 2 */
.AF-g--100-0 {top:0; left:-100%;} /* 4 */
.AF-g-100-0 {top:0; left:100%;} /* 5 */
.AF-g--100--100 {top:-100vh; left:-100%;} /* 6 */
.AF-g-100-100 {top:100vh; left:100%;} /* 7 */
.AF-g-100--100 {top:-100vh; left:100%;} /* 8 */
.AF-g--100-100 {top:100vh; left:-100%;} /* 9 */

.red {color: crimson;}

/* Escenarios */
.AF-stage {width:100%; height:100vh; display:none; position:absolute;}
.AF-stage.AF-active {display:block;}

.AF-rri-circle {
  .circulo;
  .centrado;
  width:@size-1;
  height:@size-1;
  margin-left:-@size-1 / 2;
  margin-top:-@size-1 / 2;
  /*background-color: @color-rri-oscuro;*/
  z-index:@sindex;
  float:left;
}

.AF-rri-circle-z1 {
  .circulo;
  .centrado;
  width:@size-1 * 2;
  height:@size-1 * 2;
  margin-left:-@size-1;
  margin-top:-@size-1;
  /*background-color: @color-rri-claro;*/
  z-index:@sindex + 1;
}

.AF-rri-circle-z2 {
  .circulo;
  .centrado;
  width:@size-1 * 3;
  height:@size-1 * 3;
  margin-left:-@size-1;
  margin-top:-@size-1;
  /*background-color: @color-rri-medio;*/
  z-index:@sindex + 2;
}

.AF-bye {
	height: 40px;
    width: 40px;
    background-color: #FA6900;
    border-radius: 20px;
    position: relative;
	cursor:pointer;
	display:block;
	float:left;
	top:-50%;
	left:0;
	z-index:@sindex + 3;
}

.AF-bye:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "\274c"; /* use the hex value here... */
    font-size: 20px; 
    color: #FFF;
    line-height: 40px;
    text-align: center;
}

/* Utilitys */
.AF-down {position:absolute; bottom:0; text-align:center; width:100%; background-color:#fff;}
.AF-up {position:absolute; top:0; text-align:center; width:100%; background-color:#fff;}
.AF-left {position:absolute; top:50%; text-align:left; width:100px; left:0; padding-left:20px; background-color:#fff;}
.AF-right {position:absolute; top:50%; text-align:right; width:100px; right:0; padding-right:20px; background-color:#fff;}
.AF-left-up {position:absolute; top:0; text-align:left; width:100px; left:0; padding-left:20px; background-color:#fff;}
.AF-right-up {position:absolute; top:0; text-align:right; width:100px; right:0; padding-right:20px; background-color:#fff;}
.AF-left-down {position:absolute; bottom:0; text-align:left; width:100px; left:0; padding-left:20px; background-color:#fff;}
.AF-right-down {position:absolute; bottom:0; text-align:right; width:100px; right:0; padding-right:20px; background-color:#fff;}

.AF-left-up, .AF-right-up {top:15px;}
.AF-left-up img, .AF-right-up img {width:40px !important; height:40px !important;}
.AF-left-down img, .AF-right-down img {width:40px !important; height:40px !important;}

/* Rose */
.AF-rose {position:absolute; float:left;}

/* Loader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#sorry {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  /* change if the mask should have another color then white */
  z-index: 99;
  display:none;
  /* makes sure it stays on top */
  padding:25px;
  text-align:center;
  line-height:normal;
}
#sorry small {display:block; font-size:16px; line-height:20px; color:#f5f5f5; font-weight:200;}
#sorry h2 {display:block; font-size:26px; line-height:30px; color:#ccc; font-weight:100; margin-bottom:25px; padding-bottom:25px; border-bottom:1px solid #999;}
#sorry h3 {display:block; font-size:20px; line-height:24px; color:#fff; font-weight:400;}
#sorry a {color:#E4D652;}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

/* CSS Classic library add ons */
/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------- */

/* Round menú */
/* Contribuido */
.selector,
.selector button {
  font-weight: 300;
}

.selector button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 50%;
  border: 0;
  color: #000;
  font-size: 20px;
  cursor: pointer;
  transition: all .1s;
  z-index:100;
  background-color:transparent;
}

.selector button:focus { outline: none; }

.selector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}

.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}

.selector li input { display: none; }

.selector li input + label {
  position: absolute;
  left: 40%;
  bottom: 100%;
  width: 0;
  height: 0;
  line-height: 1px;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1px;
  overflow: hidden;
  box-shadow: none;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label:hover { background: #f0f0f0; }

.selector li input:checked + label {
  background: #5cb85c;
  color: white;
}

.selector li input:checked + label:hover { background: #449d44; }

.selector.open li input + label {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-left: -40px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}


/*#Capa_1:hover {opacity:0.5;}
#Capa_2:hover {opacity:0.5;}
#Capa_3:hover {opacity:0.5;}
#Capa_4:hover {opacity:0.5;}
#Capa_5:hover {opacity:0.5;}
#Capa_6:hover {opacity:0.5;}
#Capa_7:hover {opacity:0.5;}*/

.AF-gomo:hover {opacity:1;}
.AF-s-st {position:relative; top:-20px;}

#AF-rosita {top:150px; left:150px; display:block; position:absolute;}
.AF-img-adaptative, svg {width:98%; height:auto; float:left; display:block; position:absolute; margin:1%;}
.AF-le-adaptative {width:98%; height:auto; float:left; display:block; margin:1%;}
.AF-wrapper {/*background-color:#fff;*/ width:100%; display:inline-block; height:100%;}

h1 {font-size:3em; padding-top:25px;}
/*h1 span, h2 span {border-bottom:1px solid #000;}*/
h2 {font-size:2em; padding-top:25px;}
h2 small {font-size:0.5em; color:#ccc;}
.AF-t-classic {font-weight:100;}
.AF-subtitulo {font-weight:300; font-size:1.3em;}
.AF-titulo2, .AF-titulo1 {width:100%; position:absolute; text-align:center; font-weight:100; z-index:10;}
.AF-titulo1-normal {font-weight:100;}
.AF-titulo1-normal small {font-weight:200; font-size:0.5em; display:block; clear:both;}
.AF-titulo2 small, .AF-titulo1 small {clear:both; display:block; font-weight:200;}
.AF-creditos {background-color:#333; color:#ddd; position:absolute; bottom:0; left:0; width:auto; text-align:center; font-size:14px; z-index:10; bottom: -22px;}
.AF {background-image:url('images/af.jpg'); width:61px; height:61px; position:fixed; bottom:0; left:0;}
.AF-creditos a {color:#fff; text-decoration:none;}
.AF-creditos span {display:inline-block; font-weight:200; padding:8px 12px; border-right:1px solid #666;}
.AF-creditos span:last-child {margin-right:0;}
.AF-creditos a:hover {color:#ddd; text-decoration:underline;}
.AF-rose-item {background-color:#f5f5f5; border-radius:40px;}
.AF-rose-item a {text-decoration:none; color:#333;}
.AF-rose-item input {display:none;}
.AF-rose li:first-child {background-color:#333;}
.AF-rose li:nth-child(2) {background-color:#5b3274;}
.AF-rose li:nth-child(3) {background-color:#ba599c;}
.AF-rose li:nth-child(4) {background-color:#58a6cd;}
.AF-rose li:nth-child(5) {background-color:#0a6786;}
.AF-rose li:nth-child(6) {background-color:#b93238;}
.AF-rose li:nth-child(7) {background-color:#eb962b;}
.AF-rose li:nth-child(8) {background-color:#efce27;}
.AF-rose li:nth-child(9) {background-color:#4e8c3f;}
.AF-rose li:nth-child(2) a, .AF-rose li:nth-child(3) a, .AF-rose li:nth-child(4) a, .AF-rose li:nth-child(5) a, .AF-rose li:nth-child(6) a, .AF-rose li:nth-child(7) a, .AF-rose li:nth-child(9) a {color:#fff;}
.AF-rose li:nth-child(8) a {color:#000;}
.AF-rose li:first-child a {color:#fff; text-decoration:none; font-weight:bold;}
.AF-rose-full a, .AF-back a {text-decoration:none; text-align:center; color:#fff; font-size:14px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; display:block;}
.AF-rose-full a:hover, .AF-back a:hover {color:#333;}
.AF-left a, .AF-left-up a, .AF-left-down a {text-align:left;}
.AF-right a, .AF-right-up a, .AF-right-down a {text-align:right;}
.AF-arrow {display:block; clear:both; font-size:3em; color:#ccc;}
.AF-arrow img {width:50px; height:50px;}
.AF-micro-small {font-size:0.3em; margin-left:30%; margin-right:30%; display:block; border:1px solid #edd87d; background-color:#fff; color:#776d3f; padding:5px 0 10px 0; font-weight:300;}

/* Botones de siguiente */

.AF-next-current span {-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-ms-animation-delay: 2s;-ms-animation-iteration-count: infinite;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;}
.AF-next-link {display:block; cursor:pointer; position:absolute; width:100%; text-align:center;}
.AF-next-link span {font-weight:bold; display:block; clear:both;}


/* Utilidades */
.AF-pt80 {padding-top:60px;}
.AF-pt100 {padding-top:200px;}
.AF-t-15 {top:0px;}
.AF-t-100 {top:-17.78%;}
.AF-t-245 {top:-300px;}
.AF-t25 {margin-top:-10px;}
.AF-t150x {top:60px;}
.AF-t150 {top:120px;}
.AF-mt50 {margin-bottom:50px !important;}
.AF-b30 {bottom:90px;}
.AF-z08 {zoom:0.8; -moz-transform: scale(0.8);}
.AF-zi10 {z-index:10;}
.AF-zi1 {z-index:1 !important;}
.AF-zi2 {z-index:2 !important;}
.AF-zi3 {z-index:3 !important;}
.AF-zi4 {z-index:4 !important;}
.AF-zi5 {z-index:5 !important;}
.AF-oculto {display:none !important;}
.AF-mb50 {margin-bottom:50px;}
.AF-luz:hover img {opacity:0.8;}
.AF-pointer, .AF-pointer img {cursor:pointer;}
.AF-babero, .AF-babero1 {background-color:#f5f5f5; padding:20px; display:none; margin:0 -30px; position:absolute; z-index:20; font-size:0.9em; top:50%;}
.AF-babero h3 {margin-top:0 !important;}
.AF-babero p {text-align:left; font-weight:200;}
.AF-babero-lista {list-style-type:square; text-align:left; margin-left:20px; padding-left:0;}
.AF-babero-lista li {list-style-type:square; font-weight:200;}
.AF-babero h3 {font-size:1.2em; font-weight:100; margin-bottom:0; text-align:left;}
.AF-babero:after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -15px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent #f5f5f5 transparent;
}
.AF-off {opacity:0.4;}
g.AF-con-b, path.AF-con-b {cursor:pointer;}
g.AF-con-b:hover, path.AF-con-b:hover {opacity:0.5;}
.AF-mega {height:100vh;}

/* Menú circular principal de todos los acuerdos */
.AF-circular-menu {width: 120%; height: 100%; position: relative; left:-10%; top:-8%;}
.AF-circle {width: 100%; height: 100%;}
.AF-circle > div { text-decoration: none; color: white; display: table; height: 30%; width: 30%; position: absolute; text-align: center;}
.AF-circle > div > div {display:table-cell; width:100%; height:100%; vertical-align:middle;}
.AF-circle a {width:100%; display:block; text-decoration:none; position:absolute; z-index:10;}
.AF-circle a:hover {text-decoration:none;}
.AF-circle a:hover span {color:#fff;}

.AF-circle1 {top:2%; left:20%;}
.AF-circle2 {top:2%; left:50%;}
.AF-circle3 {top:32%; left:70%;}
.AF-circle4 {top:62%; left:50%;}
.AF-circle5 {top:62%; left:20%;}
.AF-circle6 {top:32%; left:0;}

.AF-circlet1 {color:#cc99cb; display:block; width:100%; font-size:3em;}
.AF-circlet2 {color:#3598d9; display:block; width:100%; font-size:3em;}
.AF-circlet3 {color:#ff7738; display:block; width:100%; font-size:3em;}
.AF-circlet4 {color:#428c8f; display:block; width:100%; font-size:3em;}
.AF-circlet5 {color:#e84d3c; display:block; width:100%; font-size:3em;}
.AF-circlet6 {color:#5bc28f; display:block; width:100%; font-size:3em;}
.AF-circle-sub {color:#000; font-size:0.9em; width:100%; display:block;}
.AF-circle-sub-small {color:#000; font-size:0.7em; width:100%; display:block;}
.AF-cir-titulo {color:#000; font-size:1em; text-transform:uppercase; width:100%; display:block;}

.AF-peque {font-size:0.8em;}


/* LESS RESPONSIVE */
/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------- */

/* Phone */
/* Grid System */
.generate-columns-r(10);
.generate-columns-r(@n, @i: 1) when (@i =< @n) {
  .AF-@{i} {
	  .OnMobile({
		width: 100%;
		display: flex;
		width:100%;
		height: auto;
		});
  }
  .generate-columns-r(@n, (@i + 1));
}


.AF-table, .AF-table-row {
	.OnMobile({
    display:block;
	height:100vh;
});
}


.AF-h1 > span.AF-orden {padding-top:150px;}


.AF-h2 svg {
.OnSmallHeight({
	margin-top:13%;
});	
}

.AF-h2 svg {
.OnBigHeight({
	margin-top:16%;
});	
}

.AF-wrapper {
	.OnStandardHeight({
	height:100vh;
});
}

.AF-cell-relleno {
	.OnTablet({
    display:none;
});
}

.AF-titulo2 {.OnTabletGral({font-size:2em; width:100%; top:50px;});}
.AF-rose {.OnTabletGral({display:none;});}
.AF-rose {.OnTablet({display:none;});}
.AF-rose {.OnMobile({display:none;});}
#AF-home {.OnTablet({width:75%; padding-left:12.5%; padding-right:12.5%;});}
.AF-titulo1 {.OnTabletGral({z-index:2;});}
.AF-down {.OnTabletGral({bottom:25px;});}
.AF-orden {.OnTablet({z-index:5;});}
.AF-titulo1 {.OnTabletGral({font-size:3em;});}
.AF-t150 {.OnTabletGral({top:140px;});}
.AF-babero {.OnTabletGral({top:10px; margin:12px;});}
.AF-4 {.OnTablet({width:50%; display:inline-block; height:20vh; padding-top:5vh;});}
.AF-cols-4 {.OnTablet({margin-top:15vh;});}
.AF-4 .AF-wrapper {.OnTablet({height:30vh;});}
.AF-5 {.OnTabletGral({width:33.3333%; display:inline-block; height:20vh; padding-top:5vh;});}
.AF-cols-5 {.OnTabletGral({margin-top:15vh;});}
.AF-5 .AF-wrapper {.OnTabletGral({height:30vh;});}
#sorry {.OnMin({display:block;});}
.AF-wrapper {.OnMin({padding:20px 15px 50px 15px;});}
.AF-titulo1-normal {.OnMin({z-index:2; font-size:3em; margin-top:0.5em; padding-top:0.5em;});}

.AF-pajaro {width: 24px; height: auto; position: relative; top: 7px;}
.AF-p010 {padding: 0 10px !important;}
.AF-cenefa svg {width:400px; height: auto; position: static; margin-left: auto; margin-right: auto; float: none;}
.AF-cenefa {width: 100%; text-align: center; position: absolute; top: 100px;}
.AF-cenefa .AF-babero {width: 400px; margin-left:-200px; left: 50%; top:100%;}

.AF-cortina {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* change if the mask should have another color then white */
  z-index: 99;
  background-image:url(negro.png);
  /* makes sure it stays on top */
}
.AF-boton {padding: 20px 40px; text-transform: uppercase; font-weight: 700; color:#fff; background-color:#3b82c4; border: none; text-decoration: none; margin-top: 40px; margin-bottom: 40px; display: block; text-align: center;}
.AF-boton:hover {color:#ddd; cursor: pointer;}
.AF-cerrar {background-color: #ff7260; margin-left: 50px; width: 70px; display: block; text-align: center;}
.AF-caption {color:#fff; margin: 50px;}
#div_resultado {font-size: 3em; font-weight: 200;}
.AF-num {color: #ff7260; font-size: 1.5em;}
.AF-formulario strong {font-size: 1.5em; font-weight: 300;}

.AF-formulario input[type="radio"] {
    padding: 10px;
    margin: 10px;
    zoom:1.3;
    cursor: pointer;
}
.AF-formulario label {font-size: 1.3em;}

#div_resultado {
	.OnMobile({
    font-size: 1em;
});
}

.AF-creditos {
	.OnMobile({
    text-align: left; width: 100%; bottom: -8px;
});
}
.AF-creditos {
	.OnTablet({
    text-align: left; width: 100%; bottom: -8px;
});
}


.AF-logo {background-image: url(images/af.jpg); width: 36px; height: 36px; font-size: 0; padding: 0 !important; background-size: cover; position: relative; top: -24px;}

.AF-logo {
	.OnMobile({
    top:-10px;
});
}
.AF-logo {
	.OnTablet({
    top:-10px;
});
}