@charset "utf-8";
/* CSS Document */


*{margin: 0; padding: 0; resize: none; border: none; outline: none; text-align: center; font-family: 'Oswald', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 14px;}

.wrapper1{width: 1130px;margin: 0 auto;}

/* */

/* CEDRAL */
.cedral .colores .opciones {width: 22%;position: fixed;z-index: 1;top: 260px;right: 10px;}
@media (max-width: 767px) {.cedral .colores .opciones {width: 28%;position: fixed;z-index: 1;top: 110px;right: 0px;}}
@media (min-width: 768px) and (max-width: 876px) {.cedral .colores .opciones {width: 31%;position: fixed;z-index: 1;top: 145px;right: 0px;}}
@media (min-width: 877px) and (max-width: 1088px) {.cedral .colores .opciones {width: 29%;position: fixed;z-index: 1;top: 130px;right: 0px;}}
@media (min-width: 1089px) and (max-width: 1213px) {.cedral .colores .opciones {width: 28%;position: fixed;z-index: 1;top: 160px;right: 0px;}}
@media (min-width: 1214px) and (max-width: 1303px) {.cedral .colores .opciones {width: 28%;position: fixed;z-index: 1;top: 210px;right: 0px;}}
@media (min-width: 1304px) and (max-width: 1365px){.cedral .colores .opciones {width: 25%;position: fixed;z-index: 1;top: 220px;right: 5px;}}
@media (min-width: 1366px) and (max-width: 1742px){.cedral .colores .opciones {width: 25%;position: fixed;z-index: 1;top: 220px;right: 5px;}}

.cedral .colores .opciones .item {display: inline-block;position: initial;width: 100px; height: 100px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 10px 0px 70px;}
@media (max-width: 767px) {.cedral .colores .opciones .item {display: inline-block;position: initial;width: 30px; height: 30px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 5px 15px 30px 0;}}
@media (min-width: 768px) and (max-width: 876px) {.cedral .colores .opciones .item {display: inline-block;position: initial;width: 55px; height: 55px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 5px 3px 40px}}
@media (min-width: 877px) and (max-width: 1088px) {.cedral .colores .opciones .item {display: inline-block;position: initial;width: 60px; height: 60px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 5px 2px 35px;}}
@media (min-width: 1089px) and (max-width: 1213px) {.cedral .colores .opciones .item {display: inline-block;position: initial;width: 70px; height: 70px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 5px 3px 35px;}}
@media (min-width: 1214px) and (max-width: 1303px){.cedral .colores .opciones .item {display: inline-block;position: initial;width: 80px; height: 80px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 5px 10px 50px;}}
@media (min-width: 1304px) and (max-width: 1365px){.cedral .colores .opciones .item {display: inline-block;position: initial;width: 80px; height: 80px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 5px 10px 50px;}}
@media (min-width: 1366px) and (max-width: 1742px){.cedral .colores .opciones .item {display: inline-block;position: initial;width: 80px; height: 80px;cursor: pointer;margin: 0 0px;border: 3px solid #ffffff;border-radius: 50%;overflow: hidden;margin: 5px 10px 50px;}}

.cedral .colores .opciones .item img {width: 100%; vertical-align: bottom; height: 199px;}

.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 13px;text-align: center;text-transform: uppercase;line-height: 20px;padding: 110px 0;color: #000000;position: absolute;width: 100px;}
@media (max-width: 767px) {.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 8px;text-align: center;text-transform: uppercase;line-height: 10px;padding: 34px 0;color: #000000;position: absolute;width: 0px;}}
@media (min-width: 768px) and (max-width: 876px) {.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 10px;text-align: center;text-transform: uppercase;line-height: 15px;padding: 57px 0;color: #000000;position: absolute;width: 60px;}}
@media (min-width: 877px) and (max-width: 1088px) {.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 10px;text-align: center;text-transform: uppercase;line-height: 12px;padding: 66px 0;color: #000000;position: absolute;width: 71px;margin: 0 0 0 -5px;}}
@media (min-width: 1089px) and (max-width: 1213px) {.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 10px;text-align: center;text-transform: uppercase;line-height: 12px;padding: 77px 0;color: #000000;position: absolute;width: 71px;}}
@media (min-width: 1214px) and (max-width: 1303px){.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 12px;text-align: center;text-transform: uppercase;line-height: 13px;padding: 90px 0;color: #000000;position: absolute;width: 90px;margin: 0 0 0 -5px;}}
@media (min-width: 1304px) and (max-width: 1365px){.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 12px;text-align: center;text-transform: uppercase;line-height: 13px;padding: 90px 0;color: #000000;position: absolute;width: 90px;margin: 0 0 0 -5px;}}
@media (min-width: 1366px) and (max-width: 1742px){.cedral .colores .opciones .item p {font-family: 'PT Sans', Helvetica, Arial, sans-serif;font-weight: 600;font-size: 12px;text-align: center;text-transform: uppercase;line-height: 13px;padding: 90px 0;color: #000000;position: absolute;width: 90px;margin: 0 0 0 -5px;}}

/*colores 1*/
.cedral .colores1 {padding: 54px 0 0; height: 700px; position: relative; background-repeat: no-repeat; background-size: 100%;/*background-color: #eeeeee;*/}

.cedral .colores1 h2 {font-size: 36px; font-family: 'Oswald', Helvetica, Arial, sans-serif; font-weight: 400; text-align: left; margin: 0 0 10px; color: #000000;}

.cedral .colores1 p {font-size: 22px; font-family: 'Oswald', Helvetica, Arial, sans-serif; font-weight: 500; text-align: left; margin: 0; color: #e96b00; width: 40%;}

.cedral .colores1 .opciones {position: fixed;/*absolute;*/ bottom: 90px; width: 100%; right: 0; text-align: center;}

.cedral .colores1 .opciones .item {display: inline-block; position: relative; width: 140px; cursor: pointer; margin: 0 20px; border: 3px solid #ffffff; border-radius: 50%; overflow: hidden;}

.cedral .colores1 .opciones .item img {width: 100%; vertical-align: bottom;}

.cedral .colores1 .opciones .item p { font-family: 'PT Sans', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 16px; text-align: center; text-transform: uppercase; line-height: 20px; padding-top: 55px; color: #000000; position: absolute; width: 100%; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);/*#000000*/;}

/**/

.cedralFlexCenter {display: flex;justify-content: center;width: 25%;}
@media (max-width: 767px) {.cedralFlexCenter {display: flex;justify-content: center;width: 40%;}}
@media (min-width: 768px) and (max-width: 876px) {.cedralFlexCenter {display: flex;justify-content: center;width: 38%;}}
@media (min-width: 877px) and (max-width: 1088px) {.cedralFlexCenter {display: flex;justify-content: center;width: 43%;}}
@media (min-width: 1089px) and (max-width: 1213px) {.cedralFlexCenter {display: flex;justify-content: center;width: 45%;}}
@media (min-width: 1214px) and (max-width: 1303px) {.cedralFlexCenter {display: flex;justify-content: center;width: 38%;}}
@media (min-width: 1304px) and (max-width: 1366px) {.cedralFlexCenter {display: flex;justify-content: center;width: 38%;}}
@media (min-width: 1367px) and (max-width: 1742px) {.cedralFlexCenter {display: flex;justify-content: center;width: 20%;}}

/* COLOR PICKER */
.colorPicker0 {width: 100%;height: 100%;position:fixed;top:0px; background-size: 80%; background-repeat: no-repeat; background-position-x: right;}
/*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPicker0 {width: 66%;height: 360px;left: 0;}}
@media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPicker0 {width: 66%;height: 70%;}}
@media screen and (min-width: 903px) and (max-width: 1088px) {.colorPicker0 {width: 80%;height: 545px;}}*/


.colorPicker1 {z-index:-1;}
.colorPicker2 {margin: 0 25%;} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPicker2 {margin: 0;}}*/

/* img */
.colorPickerIMG01a {background-image: url(../boceto/01b.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG01a {background-size:100%;height: 430px}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG01a {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG01a {background-size:100%;}}*/
/* ----- */
.colorPickerIMG02 {background-image: url(../IMG/simplisima-Azteca1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG02 {background-size:100%;}}*/
.colorPickerIMG02 {background-image: url(../IMG/simplisima-Beige1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG02 {background-size:100%;}}*/
.colorPickerIMG02 {background-image: url(../IMG/simplisima-Grafito1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG02 {background-size:100%;}}*/
.colorPickerIMG02 {background-image: url(../IMG/simplisima-Romana1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG02 {background-size:100%;}}*/
.colorPickerIMG02 {background-image: url(../IMG/simplisima-Soft1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG02 {background-size:100%;}}*/
.colorPickerIMG02 {background-image: url(../IMG/simplisima-Terracota1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG02 {background-size:100%;}}*/
.colorPickerIMG02 {background-image: url(../IMG/simplisima-Veteada1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG02 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG02 {background-size:100%;}}*/



.colorPickerIMG11 {background-image: url(../IMG/simplisima-Azteca1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG11 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG11 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG11 {background-size:100%;}}*/
.colorPickerIMG12 {background-image: url(../IMG/simplisima-Beige1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG12 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG12 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG12 {background-size:100%;}}*/
.colorPickerIMG13 {background-image: url(../IMG/simplisima-Grafito1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG13 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG13 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG13 {background-size:100%;}}*/
.colorPickerIMG14 {background-image: url(../IMG/simplisima-Romana1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG14 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG14 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG14 {background-size:100%;}}*/
.colorPickerIMG15 {background-image: url(../IMG/simplisima-Soft1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG15 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG15 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG15 {background-size:100%;}}*/
.colorPickerIMG16 {background-image: url(../IMG/simplisima-Terracota1.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG16 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG16 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG16 {background-size:100%;}}*/


.colorPickerIMG03 {background-image: url("../IMG/objeto-Amarillo1.png")} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG03 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG03 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG03 {background-size:100%;}}*/


/* ----- */
.colorPickerIMG07 {background-image: url(../boceto/07.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG07 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG07 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG07 {background-size:100%;}}*/
.colorPickerIMG05 {background-image: url(../boceto/09.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG05 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG05 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG05 {background-size:100%;}}*/
.colorPickerIMG03 {background-image: url(../boceto/03.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG03 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG03 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG03 {background-size:100%;}}*/
.colorPickerIMG04 {background-image: url(../boceto/04.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG04 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG04 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG04 {background-size:100%;}}*/
.colorPickerIMG08 {background-image: url(../boceto/08.png)} /*@media screen and (min-height: 372px) and (max-height: 500px) {.colorPickerIMG08 {background-size:100%}} @media screen and (min-width: 1280px) and (max-width: 1365px) {.colorPickerIMG08 {background-size:100%}} @media screen and (min-width: 903px) and (max-width: 1088px) {.colorPickerIMG08 {background-size:100%;}}*/


/**/

/* Common stuff */
.picker-wrapper, 
.slide-wrapper {position: relative; float: left;}
.picker-indicator,
.slide-indicator {position: absolute; left: 0; top: 0; pointer-events: none;}
.picker,
.slide {cursor: crosshair; float: left;}

/* Default skin */

.cp-default {width: 21%;float: right;border-radius: 0px;position: absolute;z-index: 1;right: 360px;top: 695px;}
/*@media screen and (max-width: 450px){.cp-default {width: 25%;position: absolute;z-index: 1;right: 0px;top: 1026px;margin: 0 37%;}}
@media screen and (min-height: 372px) and (max-height: 500px) {.cp-default {width: 29%;position: absolute;z-index: 1;right: -246px;top: 230px;margin: 0 27%;}}
@media screen and (min-height: 1024px) {.cp-default {width: 25%;position: absolute;z-index: 1;right: 360px;top: 1045px;}}
@media screen and (min-width: 903px) and (max-width: 1088px) {.cp-default {width: 30.3%;position: absolute;z-index: 1;right: -246px;top: 551px;margin: 0 27%;}}
@media screen and (min-width: 1366px) {.cp-default {width: 25%;position: absolute;z-index: 1;top: 695px;right: 160px;}}
@media screen and (min-width: 1400px) {.cp-default {width: 16%;float: left;border-radius: 0px;position: absolute;z-index: 1;right: 20.5%;top: 695px;}}*/

.cp-default .picker {width: 200px;height: 200px;}
/*@media screen and (min-height: 372px) and (max-height: 500px) {.cp-default .picker {width: 240px;height: 200px;}}*/

.cp-default .slide {width: 30px; height: 200px;}
.cp-default .slide-wrapper {margin-left: 10px;}
.cp-default .picker-indicator { width: 5px; height: 5px; border: 2px solid darkblue; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); background-color: white;}
.cp-default .slide-indicator {width: 100%; height: 10px; left: -4px; opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); filter: alpha(opacity=60); border: 4px solid lightblue; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: white;}

/* Small skin */

.cp-small {padding: 5px; background-color: white; float: left; border-radius: 5px;}
.cp-small .picker {width: 100px; height: 100px;}
.cp-small .slide {width: 15px; height: 100px;}
.cp-small .slide-wrapper {margin-left: 5px;}
.cp-small .picker-indicator {width: 1px; height: 1px; border: 1px solid black; background-color: white;}
.cp-small .slide-indicator {width: 100%; height: 2px; left: 0px; background-color: black;}

/* Fancy skin */

.cp-fancy {padding: 10px;/*    background-color: #C5F7EA; */background: -webkit-linear-gradient(top, #aaa 0%, #222 100%); float: left; border: 1px solid #999; box-shadow: inset 0 0 10px white;}
.cp-fancy .picker {width: 200px; height: 200px;}
.cp-fancy .slide {width: 30px; height: 200px;}
.cp-fancy .slide-wrapper {margin-left: 10px;}
.cp-fancy .picker-indicator {width: 24px; height: 24px; background-image: url(../../../cdn1.iconfinder.com/data/icons/fugue/bonus/icons-24/30347.png);}
.cp-fancy .slide-indicator {width: 30px; height: 31px; left: 30px; background-image: url(../../../cdn1.iconfinder.com/data/icons/bluecoral/87743.png);}

/* Normal skin */
.cp-normal {padding: 10px; background-color: white; float: left; border: 4px solid #d6d6d6; box-shadow: inset 0 0 10px white;}
.cp-normal .picker {width: 200px; height: 200px;}
.cp-normal .slide {width: 30px; height: 200px;}
.cp-normal .slide-wrapper {margin-left: 10px;}
.cp-normal .picker-indicator {width: 5px; height: 5px; border: 1px solid gray; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); background-color: white; pointer-events: none;}
.cp-normal .slide-indicator {width: 100%; height: 10px; left: -4px; opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); filter: alpha(opacity=60); border: 4px solid gray; background-color: white; pointer-events: none;}

/** atributos **/
.borderRadius10 {border-radius: 10px;}
.borderRadius15 {border-radius: 15px;}

.borderAmarillo {border: 3px solid rgb(255, 221, 0);}

/* titulo de la APP */ 
.tituloApp {font-size: 32px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 10px 0;text-align: left;}
@media (max-width: 767px) {.tituloApp {font-size: 90%;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 0 0 10px;}}
@media (min-width: 768px) and (max-width: 876px) {.tituloApp {font-size: 19px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 0 0 10px;}}
@media (min-width: 877px) and (max-width: 1088px) {.tituloApp {font-size: 22px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 0;}}
@media (min-width: 1089px) and (max-width: 1213px) {.tituloApp {font-size: 24px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 0;}}
@media (min-width: 1214px) and (max-width: 1303px) {.tituloApp {font-size: 26px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 10px 0;}}
@media (min-width: 1304px) and (max-width: 1365px) {.tituloApp {font-size: 26px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 10px 0;}}
@media (min-width: 1366px) and (max-width: 1742px) {.tituloApp {font-size: 26px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;margin: 10px 0;}}

.ubicTituloApp {right: 30px;float: right;width: 20%;position: fixed;z-index: 1;top: 20px;text-align: left;}
@media (max-width: 767px) {.ubicTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 10px;margin: 10px 0;}}
@media (min-width: 768px) and (max-width: 876px) {.ubicTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 10px;margin: 10px 0;}}
@media (min-width: 877px) and (max-width: 1088px) {.ubicTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 10px;margin: 10px 0;}}
@media (min-width: 1089px) and (max-width: 1213px) {.ubicTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 10px;margin: 20px 0;}}
@media (min-width: 1214px) and (max-width: 1303px) {.ubicTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 10px;margin: 20px 0;}}
@media (min-width: 1304px) and (max-width: 1365px) {.ubicTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 10px;margin: 20px 0;}}
@media (min-width: 1366px) and (max-width: 1742px) {.ubicTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 10px;margin: 20px 0;}}

.subTituloApp {font-size: 22px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 10px;color: #ffffff;}
@media (max-width: 767px) {.subTituloApp {font-size: 80%;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 5px;color: #ffffff;}}
@media (min-width: 768px) and (max-width: 876px) {.subTituloApp {font-size: 16px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 4px;color: #ffffff;}}
@media (min-width: 877px) and (max-width: 1088px) {.subTituloApp {font-size: 16px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 5px;color: #ffffff;}}
@media (min-width: 1089px) and (max-width: 1213px) {.subTituloApp {font-size: 16px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 5px;color: #ffffff;}}
@media (min-width: 1214px) and (max-width: 1303px) {.subTituloApp {font-size: 18px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 10px;color: #ffffff;}}
@media (min-width: 1304px) and (max-width: 1365px) {.subTituloApp {font-size: 18px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 10px;color: #ffffff;}}
@media (min-width: 1366px) and (max-width: 1742px) {.subTituloApp {font-size: 18px;font-family: 'Roboto Condensed', sans-serif;font-weight: 400;text-transform: uppercase;background-color: #8b8b8b; padding: 10px;color: #ffffff;}}
  
.ubicSubTituloApp {right: 30px;float: right;width: 20%;position: fixed;z-index: 1;top: 200px;}
@media (max-width: 767px) {.ubicSubTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 80px;}}
@media (min-width: 768px) and (max-width: 876px) {.ubicSubTituloApp {right: 20px;float: right;width: 25%;position: fixed;z-index: 1;top: 105px;}}
@media (min-width: 877px) and (max-width: 1088px) {.ubicSubTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 100px;}}
@media (min-width: 1089px) and (max-width: 1213px) {.ubicSubTituloApp {right: 30px;float: right;width: 22%;position: fixed;z-index: 1;top: 130px;}}
@media (min-width: 1214px) and (max-width: 1303px) {.ubicSubTituloApp {right: 22px;float: right;width: 23%;position: fixed;z-index: 1;top: 160px;}}
@media (min-width: 1304px) and (max-width: 1365px) {.ubicSubTituloApp {right: 22px;float: right;width: 23%;position: fixed;z-index: 1;top: 160px;}}
@media (min-width: 1366px) and (max-width: 1742px) {.ubicSubTituloApp {right: 22px;float: right;width: 23%;position: fixed;z-index: 1;top: 160px;}}	

/**/
/* Agregaremos algo de estilo para visualizar el 
   elemento sobre el que vamos a realizar la prueba */

.app {
  /*background-color: black;*/
  color: white;
  font-size: 2rem;
  padding: 40px;
  text-align: center;
}


/* Esta es la parte que nos interesa */
@media screen and (orientation: portrait ) {
  /* Cubre toda la pantalla del dispositivo */
  .mensaje {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    
    /* Con esto ajustamos la posición del texto */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Un color de fondo */
    
    background-color: #ffdd00;
    /* Debemos superponerlo */
    z-index: 1000;
  }
  
  /* El texto que vamos a mostrar */
  .mensaje::before {
    content: "Voltee su dispositivo para utilizar el Simulador";
	font-size: 3rem;
  }
	
  .mensaje1::before {
	width:340px;
   	height:340px; 
   	/*border:1px solid orange;*/
   	background-image:url("../boceto/logo-simplisima_webnEGRO-2.png");
   	background-repeat: no-repeat;
	  padding: 150px 0 0;
  }
  
  .app {
    display: none;
  }
}