.flexbanner {
    position:relative;
    display:flex;
    flex-direction:row;
    width:100%;
}

.flexspacer {
    display:block;
    flex:1 1 auto;
    width:0;
}

.banner, .banner_carousel {
    position:relative;
    display:block;
    flex:0 0 auto;
    text-align:center;
    margin-left:auto;
    margin-right:auto;

    width:100%;
    height:0;
    padding-top:56.25%; /* 16:9 ratio */
    font-size:1.32vw;
}


/* -------------- */
/*    Carousel   */
/* -------------- */

.carousel {
    position: absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.carousel_elements, .gallery_elements {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*display: flex;
    flex-direction: column;*/
    overflow: hidden;
    z-index:1;
}

.carousel_element {
	display:block;
    width: 100%;
    /*height:90em;*/	/* ? */
    /*transition: transform 1s;*/
    /*position:absolute;
    flex: 1;
    top:0;*/
    z-index:1;
}

.carousel_arrow {
    cursor: pointer;
    transition: color 0.3s linear;
    display: block;
    position:absolute;
    z-index:9;
    top: 0;
    width:3.6em;
    height:5.58em;
}

.arrow_left {
    background: url(../layout/elements/sprite_banner_arrows.png) 0 0;
    background-size: 200%;
    left: 5em;
    top: 43%;
}

.arrow_left:hover {
    background-position: 0 -5.58em;
}

.arrow_right {
    background: url(../layout/elements/sprite_banner_arrows.png) -3.6em 0;
    background-size: 200%;
    right: 5em;
    top: 40%;
}

.arrow_right:hover {
    background-position: -3.6em -5.58em;
}





/* ------------------------ */
/*    Desarrollar Banner    */
/* ------------------------ */

.flexspacer_desarrollar_left {
    background:#5e84cb url('../layout/banner_desarrollar_left.png') repeat-x;
    background-size:auto 100%;
    background-position:right;
}

.flexspacer_desarrollar_right {
    background:#fff url('../layout/banner_desarrollar_right.png') repeat-x;
    background-size:auto 100%;
    background-position:left;
}

.desarrollar {
   background:url('../layout/banner_desarrollar.png') no-repeat;
   background-size:100% auto;
}

.desarrollar_logo {
    position:absolute;
    right:7%;
    bottom:8%;
    margin:0;
    padding:0;
}

.desarrollar_logo img {
	position:absolute;
	bottom:0;
	right:0;
    width:14em;
    height:auto;
}

.desarrollarText {
    top:18%;
    left:30%;
    position:absolute;
    color:#fff;
    font-size:310%;
    text-align:center;
    width:6em;
}

.desarrollarText p {
    margin:0;
    padding:0;
    text-align:justify-all;
    text-justify:inter-character;
    line-height:0.4;
}

.desarrollarText span {
    white-space: nowrap;
}

.saberMasButton {
    display:inline-block;
    margin-top:10%;
    width:85%;
    height:auto;
    background:url(../layout/button_saberMas.png) no-repeat;
    background-size:100% auto;
    background-position:center;
    
    text-align:center;
    text-transform:uppercase;
    
    padding-top:0.8em;
    padding-bottom:1em;
    font-size:65%;
    font-weight:bold;
    line-height:0;

    color:#ffffff;
    text-decoration:none;
}

.saberMasButton:hover {
    color:#236cb5;
}



/* ---------------------- */
/*    Cuentanos Banner    */
/* ---------------------- */

.flexspacer_cuentanos_left {
    background:#efefef url(../layout/telephone_left.png) repeat-x;
    background-size:auto 100%;
}

.flexspacer_cuentanos_right {
    background:#dcdcdc url(../layout/telephone_right.jpg) repeat-x;
    background-size:auto 100%;
}

.cuentanos {
   background:url(../layout/telephone.jpg) no-repeat;
   background-size:100% auto;
}

.cuentanosText {
    width:50%;
	position:absolute;
	top:17%;
	left:40%;
    font-size:600%;
    line-height:1.1em;
    text-shadow: 0.1em 0.1em 0.15em #aaa;
    text-align:center;
}

.contactButton {
    text-align:center;
    display:inline-block;
    margin-top:10%;
    width:80%;
    height:auto;
    background:url(../layout/button_contact.png) no-repeat;
    background-size:100% auto;
    background-position:center;

    line-height:0;
    padding-top:0.9em;
    padding-bottom:1.7em;
    
    text-shadow:none;
    text-transform:uppercase;
    color:#39d1cd;
    text-decoration:none;

    font-size:52%;
    font-weight:bold;
}

.contactButton:hover {
    color:#0b3f3b;
}


/* ----------------------- */
/*     YouTube Banner      */
/* ----------------------- */

.flexspacer_youtube_left {
    background:#71db89 url(../layout/banner_youtube_spacer.png) repeat-x;
    background-size:auto 100%;
    background-position:right;
}

.flexspacer_youtube_right {
    background:#71db89 url(../layout/banner_youtube_spacer.png) repeat-x;
    background-size:auto 100%;
}

.youtube {
   background:#71db89 url(../layout/banner_youtube2.png) no-repeat;
   background-size:100% auto;
}

.youtubeText {
	display:block;
	width:30%;
    top:22.5%;
    left:13.5%;
    position:absolute;
    color:#032b0a;
    font-size:200%;
    text-align:center;
    text-transform: uppercase;
    font-weight:bold;
    line-height: 1.0;
}


.youtube_logo {
    margin-top:5%;
    width:65%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}


.irahoraButton {
    text-align:center;
    display:inline-block;
    margin-top:5%;
    width:70%;
    height:auto;
    background:url(../layout/button_contact.png) no-repeat;
    background-size:auto 100%;
    background-position: center bottom;
    
    text-shadow:none;
    text-transform:uppercase;

    color:#00b233;
    text-decoration:none;
    font-size:90%;
    font-weight:bold;
    line-height:0;
    padding-top:1em;
    padding-bottom:1.75em;
}

.irahoraButton a:hover {
    color:#0b3f3b;
}

.teleYouTube {
    position:absolute;
    top:38%;
    right:15%;

    width:9.5em;
    height:9.5em;
    text-decoration:none;
}

/* ------------------------ */
/*    Intro Movie Banner    */
/* ------------------------ */

.flexbanner_intromovie {
    box-shadow: 0 0.5em 0.5em 0.2em rgba(0, 0, 0, .5);
    z-index:1;
}

.flex_intromovie_left, .flex_intromovie_right {
    background:#dae5e1;
}

.intro {
}

.introMovie {
    top:0;
    left:0;
    position:absolute;
    width:100%;
    overflow:hidden;
}

.youtubeContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.youtubeVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ------------------------ */
/*     Animacion Banner    */
/* ------------------------ */

.flexbanner_animacion {
    z-index:0;
}

.flex_animacion_left, .flex_animacion_right {
    background:#7ad9d7;
}

.animacion {
    background:#7ad9d7 url(../layout/banner_animacion.png) no-repeat;
    background-size:50% auto;
    background-position: bottom right;
}

.animacionText {
	width:30%;
    top:15%;
    right:9%;
    position:absolute;
    color:#002826;
    font-size:170%;
    text-align:center;
    line-height:1.2;
}

.animacionText h1 {
    display:block;
    font-size: 140%;
    width:100%;
    color:#054946;
    border-bottom:0.1em solid #56a8a6;
    text-transform: uppercase;
    padding-bottom:1%;
    margin-bottom:2.4%;
}

.animacionMovie {
    top:25%;
    left:7.5%;
    position:absolute;
    width:45%;
}


/* ------------------------- */
/*     Audiovisual Banner    */
/* ------------------------- */

.flexbanner_audiovisual {
    box-shadow: 0 -0.5em 0.5em 0.2em rgba(0, 0, 0, .5);
    z-index:1;
}

.flexspacer_audiovisual_left, .flexspacer_audiovisual_right {
    background:#eaeaea;
}

.audiovisual {
   background:#eaeaea;
}

.audiovisualText {
    border:0.05em solid #165352;
    top:25%;
    left:6%;
    width:35%;
    position:absolute;
    color:#002826;
    font-size:165%;
    text-align:center;
    line-height:1.2;
    padding-bottom:3%;
    padding-left:0;
    padding-right:0;
}

.audiovisualText h1 {
    display:block;
    font-size: 140%;
    color:#28a3a0;
    text-transform: uppercase;
    padding-bottom:8%;
    margin-bottom:0;
}

.audiovisualMovie {
    top:25%;
    right:7%;
    position:absolute;
    width:50%;
}

.dronePic {
    width:20%;
    height:auto;
    padding-top:2%;
}


/* --------------------- */
/*    Gallery Grafico    */
/* --------------------- */

.grafico {
    box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, .5);
    z-index:2;
}

.galeria_arrow {
    cursor: pointer;
    transition: color 0.3s linear;
    display: block;
    position:absolute;
    z-index:9;
    top: 0;
    width:6em;
    height:6em;
}

.arrow_left_galeria {
    background: url(../layout/elements/galeria_arrow_left.png) no-repeat;
    background-size: contain;
    left: 1em;
    top: 40%;
}

.arrow_right_galeria {
    background: url(../layout/elements/galeria_arrow_right.png) no-repeat;
    background-size: contain;
    right: 1em;
    top: 40%;
}


.flexspacer_gallery00_left, .flexspacer_gallery00_right {
    background:#0dd0cc;
    background-size:auto 100%;

}
.gallery00 {
   background:#0dd0cc url(../galeria/00.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery01_left, .flexspacer_gallery01_right {
    background:#5c8ea9;
    background-size:auto 100%;

}
.gallery01 {
   background:#5c8ea9 url(../galeria/01.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery02_left, .flexspacer_gallery02_right {
    background:#e1f5fe;
    background-size:auto 100%;

}
.gallery02 {
   background:#e1f5fe url(../galeria/02.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery03_left, .flexspacer_gallery03_right {
    background:#1d1d1b;
    background-size:auto 100%;

}
.gallery03 {
   background:#1d1d1b url(../galeria/03.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery04_left, .flexspacer_gallery04_right {
    background:#f3f3f3;
    background-size:auto 100%;

}
.gallery04 {
   background:#f3f3f3 url(../galeria/04.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery05_left, .flexspacer_gallery05_right {
    background:#c1fffa;
    background-size:auto 100%;

}
.gallery05 {
   background:#c1fffa url(../galeria/05.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery06_left, .flexspacer_gallery06_right {
    background:#3ed77d;
    background-size:auto 100%;

}
.gallery06 {
   background:#3ed77d url(../galeria/06.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery07_left, .flexspacer_gallery07_right {
    background:#97bc9a;
    background-size:auto 100%;

}
.gallery07 {
   background:#97bc9a url(../galeria/07.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery08_left, .flexspacer_gallery08_right {
    background:#97bc9a;
    background-size:auto 100%;

}
.gallery08 {
   background:#97bc9a url(../galeria/08.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery09_left, .flexspacer_gallery09_right {
    background:#e6cfb0;
    background-size:auto 100%;

}
.gallery09 {
   background:#e6cfb0 url(../galeria/09.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery10_left, .flexspacer_gallery10_right {
    background:#e6cfb0;
    background-size:auto 100%;

}
.gallery10 {
   background:#e6cfb0 url(../galeria/10.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery11_left, .flexspacer_gallery11_right {
    background:#e0eae9;
    background-size:auto 100%;

}
.gallery11 {
   background:#e0eae9 url(../galeria/11.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery12_left, .flexspacer_gallery12_right {
    background:#3f3f3f;
    background-size:auto 100%;

}
.gallery12 {
   background:#3f3f3f url(../galeria/12.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery13_left, .flexspacer_gallery13_right {
    background:#3f3f3f;
    background-size:auto 100%;

}
.gallery13 {
   background:#3f3f3f url(../galeria/13.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery14_left, .flexspacer_gallery14_right {
    background:#ededed;
    background-size:auto 100%;

}
.gallery14 {
   background:#ededed url(../galeria/14.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery15_left, .flexspacer_gallery15_right {
    background:#ededed;
    background-size:auto 100%;

}
.gallery15 {
   background:#ededed url(../galeria/15.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery16_left, .flexspacer_gallery16_right {
    background:#ffffff;
    background-size:auto 100%;

}
.gallery16 {
   background:#ffffff url(../galeria/16.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery17_left, .flexspacer_gallery17_right {
    background:#ffffff;
    background-size:auto 100%;

}
.gallery17 {
   background:#ffffff url(../galeria/17.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery18_left, .flexspacer_gallery18_right {
    background:#ffffff;
    background-size:auto 100%;

}
.gallery18 {
   background:#ffffff url(../galeria/18.jpg) no-repeat;
   background-size:100% auto;
}

.flexspacer_gallery19_left, .flexspacer_gallery19_right {
    background:#ffffff;
    background-size:auto 100%;

}
.gallery19 {
   background:#ffffff url(../galeria/19.jpg) no-repeat;
   background-size:100% auto;
}


/* ------------------ */
/*     Páginas Web    */
/* ------------------ */

.flexbanner_paginasweb {
    z-index:1;
}

.flexspacer_paginasweb_left, .flexspacer_paginasweb_right {
    background:#a5dbda;
}

.paginasWeb {
    background:#a5dbda;
    background-size:auto 80%;
    background-position: bottom right;
}

.paginasWebInfobox {
	background: url(../layout/elements/paginasWebBar.png) top no-repeat, url(../layout/elements/paginasWebBar.png) bottom no-repeat;
	background-size:85%;

	position:absolute;
	left:5%;
	top:23%;
	width:90%;
	height:65%;
	display:flex;
	flex-direction:row;
	padding:1%;
	padding-top:2%;
	color:#054442;
}

.paginasWeb h1 {
	position:absolute;
	top:8%;
    text-transform: uppercase;
    color:#012423;
    display:block;
    width:100%;
    text-align:center;
    font-size:270%;
    line-height:1.2;
}

.paginasWebInfobox div {
	flex:1;
	margin:1%;
	margin-left:3%;
	margin-right:3%;
	padding-top:6em;
}

.paginasWebInfobox h2 {
	font-size:160%;
	line-height:1.2;
}

.paginasWebInfobox p {
	line-height: 1.2;
	font-size:123%;
	color:#064a47;
}

.paginasWebInfobox1 {
	background: url(../layout/pagweb_open.png) top center no-repeat;
	background-size:45%;
}

.paginasWebInfobox2 {
	background: url(../layout/pagweb_world.png) top center no-repeat;
	background-size:45%;
}

.paginasWebInfobox3 {
	background: url(../layout/pagweb_mail.png) top center no-repeat;
	background-size:45%;
}



/* -------------- */
/*     Contact    */
/* ---------------*/

.flexbanner_contact {
    box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, .5);
    z-index:2;
}

.flexspacer_contact_left {
    background:#7fcac8 url(../layout/contact_drawing_left.png) no-repeat;
    background-size:auto 100%;
    background-position: bottom right;
}

.flexspacer_contact_right {
    background:#7fcac8 url(../layout/contact_drawing_right.png) no-repeat;
    background-size:auto 100%;
    background-position: bottom left;
}

.contact {
    background:#7fcac8 url(../layout/contact_drawing.png) no-repeat;
    background-size:100% 100%;
    background-position: bottom left;
}

.contact h1 {
    position:absolute;
    top:0;
    left:0;
    width:100%;

    color:#487eb5;
    font-size:4.0em;
    text-transform: uppercase;
    line-height: 0.85;
}

.tuIdea {
    color:#e3f9ec;
    font-size:1.9em;
}

.contact h2 {
    position:absolute;
    top:4.4em;
    left:0;
    width:100%;

    color:#174471;
    font-size:2.4em;
    font-weight:normal;
    text-transform: uppercase;
    line-height: 0.9;

}

.contactForm {
    display:flex;
    flex-direction: row;
    position:absolute;
    top:16.5em;
    left:1.4em;
    width:90%;
    font-size:1.3em;
    margin-left:auto;
    margin-right:auto;
}

.contactDetails {
    flex:1;
    display:flex;
	flex-direction: column;
}

.contactDetails div {
	flex:1;
    display:block;
	width:27em;
}

.contactDetails label {
	font: 1.0em/1.6em Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
	display:block;
	margin:0;
	padding:0;
	padding-top:0.3em;
	width:10em;
	line-height:1;
	text-align: center;
	color:#0e3534;
	float:left;
}

.contactDetails input {
	font: 1.0em/1.6em Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
		display:block;
	background:#ebebeb;
	border:none;
	padding:0.5em;
	padding-top:0.3em;
	padding-bottom:0.3em;
	margin-top:-0.15em;
	border-radius: 0.4em;
	line-height:1;
	width:15em;
	height:1.3em;
}

.contactMessage {
    flex:1;
    line-height:1.5;
    margin-top:-1.65em;
	margin-bottom:1.6em;
    padding-left:3em;
    text-align:left;
    color:#0e3534;
}

.contactMessage textarea {
	font: 1.0em/1.4em Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
	background: #ebebeb;
	width:21em;
	height:8.3em;
    border:none;
    border-radius:0.4em;
    padding:0.5em;
}

.contactFormButton {
	position: absolute;
	bottom:3.7em;
    left:45%;

	background:#d2f9e2;
	box-shadow:none;
	border:none;
	color:#042d2c;

	padding:0.5em;
	padding-top:0.11em;
	padding-bottom:0.11em;
	border-radius:0.5em;
	width:8em;
	height:2.2em;
	font-size:1.2em;
}

#cfWaitingIndicator {
    display:none;
    position: absolute;
    bottom:1em;
    left:50%;

    height:2em;
    width:2em;
}

#form-messages {
    position:absolute;
    display:none;

    background:rgba(127, 202, 200, 0.7);

    font-size:1.3em;
    text-align: center;

    top:12.2em;
    left:10%;
    width:80%;
    height:2em;
    line-height:2em;

    border:0.14em solid #487eb5;
    border-radius: 0.5em;

    z-index:3;
}

#form-success-message {
    position:absolute;
    display:none;

    background:rgba(127, 202, 200, 0.7);

    font-size:1.3em;
    text-align: center;

    top:27em;
    left:35%;
    width:30%;
    height:2em;
    line-height:2em;

    border:0.14em solid #487eb5;
    border-radius: 0.5em;

    z-index:3;
}

.success {
    display:block;
    font-weight:bold;
}

.error {
    display:block;
    font-weight:bold;
    color:#aa0000;
}

div.xxoGame {
    position:absolute;
    color:#174471;
    top:35%;
    left:0;
    width:100%;
    height:50%;
    display:none; /*inline-block;*/
    padding:0.5em;
    font-size:200%;
}

#xxoMessage, #cfWaitingIndicator {
    min-height:1.2em;
    line-height:1.2;
}

p.waiting {
    background:url("../layout/waiting.gif") center center no-repeat;
    background-size:contain;
}

div.xxoBox {
    position:relative;
    display:inline-block;
    background:#d2f9e2;
    border-radius:0.5em;
    padding:0.5em;
}

div.xxoGrid {
    margin:auto;
    position:relative;
    display:block;
    width:6.1em;
    height:6.1em;
    overflow:visible;
}

div.xxoGrid div {
    position:absolute;
    display:block;
    width:2em;
    height:2em;
}

#linesHorz {
    left:0;
    top:31%;
    width:6em;
    height:2em;
    border-top:2px solid #3c9994;
    border-bottom:2px solid #3c9994;
}

#linesVert {
    left:31%;
    top:0;
    width:2em;
    height:6em;
    border-left:2px solid #3c9994;
    border-right:2px solid #3c9994;
}

#A1 {
    left:0;
    top:0;
}

#A2 {
    left:0;
    top:33%;
}

#A3 {
    left:0;
    top:66%;
}

#B1 {
    left:33%;
    top:0;
}

#B2 {
    left:33%;
    top:33%;
}

#B3 {
    left:33%;
    top:66%;
}

#C1 {
    left:66%;
    top:0;
}

#C2 {
    left:66%;
    top:33%;
}

#C3 {
    left:66%;
    top:66%;
}

div.O {
    background:url("../layout/xxo/o.svg") center center no-repeat;
    background-size:1.3em;
}

div.X {
    background:url("../layout/xxo/x.svg") center center no-repeat;
    background-size:1.3em;
}