/*body{
    background: url(../images/fondos/06.webp);
    background-size: 100vw 100vh;
    background-attachment: fixed;
    margin: 0;
    font-family: monospace;
}*/
body{
    -moz-resize: none;
    -ms-resize: none;
        resize: none;
  -webkit-resize: none;
}

.flex-container{
      -moz-display: flex;
       -ms-display: flex;
           display: flex;
   -webkit-display: flex;
     -moz-height: 100%;
      -ms-height: 100%;
          height: 100%;
  -webkit-height: 100%;
       -moz-flex-direction:row;
       -ms-flex-direction:row;
           flex-direction:row;
   -webkit-flex-direction:row;
      -moz-flex-wrap:wrap;
       -ms-flex-wrap:wrap;
           flex-wrap:wrap;
   -webkit-flex-wrap:wrap;
      -moz-justify-content: space-evenly;
       -ms-justify-content: space-evenly;
           justify-content: space-evenly;
   -webkit-justify-content: space-evenly;
      -moz-align-items: stretch;
       -ms-align-items: stretch;
           align-items: stretch;
   -webkit-align-items: stretch;
    background-color: white;
    /*padding: 1%;*/
}

/*.flex-container div{
    background-color: gainsboro;
    width: 100px;
    height: 700px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    border: 2px solid black;
}*/

.flex-container img{
  /*
      -moz-width: 650px;
       -ms-width: 650px;
           width: 650px;
   -webkit-width: 650px;*/
    border: 0;
    border-radius: 8px;
}

#sim{
  /*
     -moz-width: 650px;
      -ms-width: 650px;
          width: 650px;
  -webkit-width: 650px;
    border: 0;*/
    /*align-items: center;*/
    /*height: 400px;*/
    /*background: url(../images/fondos/06.webp);*/
    /*background-size: 50vw 50vh;*/
    cursor: pointer;
}

#sim:active,
#sim:hover {
  outline: 0;
  font-style: italic;
}

img{
    border: 15px dashed white;
}

/*
@media (max-width:1600px){
    #sim{
        background-size: 50vw 50vh;
        width: 51%;
        height: 65%;
    }
}*/

.button-63 {
  margin-left: 0px;
      -moz-align-items: center;
       -ms-align-items: center;
           align-items: center;
   -webkit-align-items: center;
    background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
    border: 0;
    border-radius: 8px;
    box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
    box-sizing: border-box;
    color: #FFFFFF;
    /*display: flex;*/
    font-family: Phantomsans, sans-serif;
    font-size: 20px;
      -moz-justify-content: center;
       -ms-justify-content: center;
           justify-content: center;
   -webkit-justify-content: center;
    line-height: 1em;
    max-width: 100%;
    /*min-width: 140px;*/
      -moz-min-width: 20%;
       -ms-min-width: 20%;
           min-width: 20%;
   -webkit-min-width: 20%;
    padding: 19px 24px;
    text-decoration: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .button-63:active,
  .button-63:hover {
    outline: 0;
    font-style: italic;
    background-image: linear-gradient(144deg,#FF40FF, #0042F3 50%,#FFDDEB);
  }
  
  @media (min-width: 1701px) {
    .button-63 {
      min-width: 1400px;
      font-size: 60px;
    }
    #sim{
      width: 1400px;
    }
    #buttonIZQ {
      margin: 0px 0px 10px;
      border: 5px outset rgba(0, 0, 0, 0.5);
      border-left: 1px outset rgba(255, 255, 255, 0.9);
      border-right: 5px outset gray;
      border-bottom: 1px outset gray;
    }
    #buttonDER {
      margin: 10px 0px;
      border: 5px outset rgba(0, 0, 0, 0.5);
      border-left: 1px outset rgba(255, 255, 255, 0.9);
      border-right: 5px outset gray;
      border-bottom: 1px outset gray;
      margin-left: 185px;
      visibility:visible;
    }
    #sim2{
      width: 0;
    }
  }

  @media (max-width: 1700px) {
    .button-63 {
      min-width: 1400px;
      font-size: 60px;
    }
    #sim{
      width: 1400px;
    }
    #buttonIZQ {
      margin: 0px 0px 10px;
      border: 5px outset rgba(0, 0, 0, 0.5);
      border-left: 1px outset rgba(255, 255, 255, 0.9);
      border-right: 5px outset gray;
      border-bottom: 1px outset gray;
    }
    #buttonDER {
      margin: 10px 0px;
      border: 5px outset rgba(0, 0, 0, 0.5);
      border-left: 1px outset rgba(255, 255, 255, 0.9);
      border-right: 5px outset gray;
      border-bottom: 1px outset gray;
      margin-left: 35px;
      visibility:visible;
    }
    #sim2{
      width: 0;
    }
  }

  @media (max-width: 1520px) {
    #buttonDER {
      margin-left: 30px;
    }
  }

  @media (max-width: 1520px) {
    #buttonDER {
      margin-left: 25px;
    }
  }

  @media (max-width: 1500px) {
    #buttonDER {
      margin-left: 20px;
    }
  }

  @media (max-width: 1475px) {
    #buttonDER {
      margin-left: 15px;
    }
  }

  @media (max-width: 1450px) {
    #buttonDER {
      margin-left: 3px;
    }
  }

  @media (max-width: 1430px) {
    .button-63 {
      min-width: 1300px;
    }
    #sim{
      width: 1300px;
    }
    #buttonDER {
      margin-left: 35px;
    }
  }

  @media (max-width: 1400px) {
    #buttonDER {
      margin-left: 20px;
    }
  }

  @media (max-width: 1350px) {
    #buttonDER {
      margin-left: 10px;
    }
  }

  @media (max-width: 1300px) {
    .button-63 {
      min-width: 1200px;
    }
    #sim{
      width: 1200px;
    }
    #buttonDER {
      margin-left: 0px;
    }
  }

  @media (max-width: 1285px) {
    #buttonDER {
      margin-left: 15px;
    }
  }

  @media (max-width: 1240px) {
    #buttonDER {
      margin-left: 0px;
    }
  }

  @media (max-width: 1220px) {
    .button-63 {
      min-width: 1100px;
    }
    #sim{
      width: 1100px;
    }
    #buttonDER {
      margin-left: 30px;
    }
  }

  @media (max-width: 1185px) {
    #buttonDER {
      margin-left: 20px;
    }
  }

  @media (max-width: 1150px) {
    #buttonDER {
      margin-left: 10px;
    }
  }

  @media (max-width: 1120px) {
    .button-63 {
      min-width: 950px;
    }
    #sim{
      width: 950px;
    }
    #buttonDER {
      margin-left: 50px;
    }
  }
 
  @media (max-width: 1100px) {
    #buttonDER {
        /*visibility: hidden;*/
        /*height: 0;
        font-size: 0;*/
        margin-left: 35px;
    }
  }

  @media (max-width: 1075px) {
    #buttonDER {
      margin-left: 30px;
    }
  }

  @media (max-width: 1030px) {
    #buttonDER {
      margin-left: 15px;
    }
  }

  @media (max-width: 1000px) {
    #buttonDER {
      margin-left: 5px;
    }
  }

  @media (max-width: 970px) {
    .button-63 {
      min-width: 900px;
    }
    #sim{
      width: 900px;
    }
    #buttonDER {
      margin-left: 10px;
    }
  }

  @media (max-width: 930px) {
    .button-63 {
      min-width: 840px;
    }
    #sim{
      width: 840px;
    }
    #buttonDER {
      margin-left: 20px;
    }
  }

  @media (max-width: 900px) {
    /*
    .button-63 {
      font-size: 20px;
      min-width: 650px;
    }*/
    #buttonIZQ {
      /*border-bottom: 10px solid white;*/
    }
    #buttonDER {
      /*border-top: 10px solid white;
      visibility:visible;*/
      margin-left: 10px;
    }
  }

  @media (max-width: 875px) {
    #buttonDER {
      margin-left: 0px;
    }
  }

  @media (max-width: 850px) {
    .button-63 {
      min-width: 800px;
    }
    #sim{
      width: 800px;
    }
    #buttonDER {
      margin-left: 5px;
    }
  }
  }

  @media (max-width: 800px) {
    .button-63 {
      min-width: 770px;
    }
    #sim{
      width: 770px;
    }
    #buttonDER {
      margin-left: 0px;
    }
  }

  @media (max-width: 775px) {
    .button-63 {
      min-width: 750px;
      font-size: 50px;
    }
    #sim{
      width: 750px;
    }
  }

  @media (max-width: 750px) {
    .button-63 {
      min-width: 710px;
    }
    #sim{
      width: 710px;
    }
  }

  @media (max-width: 700px) {
    .button-63 {
      min-width: 680px;
    }
    #sim{
      width: 680px;
    }
  }

  @media (max-width: 675px) {
    .button-63 {
      min-width: 650px;
    }
    #sim{
      width: 650px;
    }
  }
  
  @media (max-width: 650px) {
    .button-63 {
      min-width: 650px;
    }
    #sim{
      width: 650px;
    }
  }

  @media (max-width: 625px) {
    .button-63 {
      min-width: 610px;
    }
    #sim{
      width: 610px;
    }
  }

  @media (max-width: 600px) {
    .button-63 {
      min-width: 580px;
    }
    #sim{
      width: 580px;
    }
  }

  @media (max-width: 580px) {
    .button-63 {
      min-width: 560px;
    }
    #sim{
      width: 560px;
    }
  }

  @media (max-width: 565px) {
    .button-63 {
      min-width: 535px;
      font-size: 40px;
    }
    #sim{
      width: 535px;
    }
  }

  @media (max-width: 540px) {
    .button-63 {
      min-width: 515px;
    }
    #sim{
      width: 515px;
    }
  }

  @media (max-width: 520px) {
    .button-63 {
      min-width: 500px;
    }
    #sim{
      width: 500px;
    }
  }

  @media (max-width: 500px) {
    .button-63 {
      min-width: 475px;
    }
    #sim{
      width: 475px;
    }
  }

  @media (max-width: 480px) {
    .button-63 {
      min-width: 450px;
      font-size: 30px;
    }
    #sim{
      width: 450px;
    }
  }

  @media (max-width: 460px) {
    .button-63 {
      min-width: 430px;
    }
    #sim{
      width: 430px;
    }
  }

  @media (max-width: 435px) {
    .button-63 {
      min-width: 400px;
    }
    #sim{
      width: 400px;
    }
    #sim2{
      border-top: 10px solid white;
      border-radius: 8px;
      width: 400px;
    }
  }

  @media (max-width: 415px) {
    .button-63 {
      min-width: 380px;
    }
    #sim{
      width: 380px;
    }
    #sim2{
      width: 380px;
    }
  }

  @media (max-width: 380px) {
    .button-63 {
      min-width: 360px;
    }
    #sim{
      width: 360px;
    }
    #sim2{
      width: 360px;
    }
  }

  @media (max-width: 360px) {
    .button-63 {
      min-width: 350px;
    }
    #sim{
      width: 350px;
    }
    #sim2{
      width: 350px;
    }
  }
/*
  @media (max-height:800) {
    .button-63 {
      min-width: 350px;
      font-size: 50px;
    }
    #sim{
      width: 550px;
    }
  }
*/
  @media (max-width: 350px) {
    .button-63 {
      min-width: 340px;
    }
    #sim{
      width: 340px;
    }
    #sim2{
      width: 340px;
    }
  }

  @media (max-width: 320px) {
    .button-63 {
      min-width: 300px;
    }
    #sim{
      width: 300px;
    }
    #sim2{
      width: 300px;
    }
  }


/*
  @media (max-height: 950px) {
    #sim{
      width: 400px;
    }
  }
*/
  /*@media (min-width: 768px) {
    .button-63 {
      font-size: 20px;
      min-width: 196px;
    }
  }*/

.bg-RW{
    background: linear-gradient(to right, rgba(255, 0, 0, 0.7), rgba(255, 255, 255, 0.4));
}

.bg-YG{
    background: linear-gradient(to right, rgba(255, 255, 0, 0.5), rgba(0, 255, 0, 0.4));
}

.bg-P{
    background: linear-gradient(to right, rgba(45, 11, 61, 0.7), rgba(174, 0, 255, 0.5));
    /*background: linear-gradient(to right, rgba(174, 0, 255, 0.9), rgba(45, 11, 61, 0.5));*/
}