.loader {
  width: 100%;
  align-items: center;
  background-color: white;
  display: flex;
  height: 400px;
  justify-content: center;
  margin: 0;

}

.loader-wheel {
  animation: spin 1s infinite linear;
  border: 2px solid rgba(30, 30, 30, 0.5);
  border-left: 4px solid red;
  border-radius: 50%;
  height: 50px;
  margin-bottom: 10px;
  width: 50px;
}

.loader-text {
  color: #000;
  font-family: arial, sans-serif;
}

.loader-text:after {
  content: 'Buscando las mejores ubicaciones';
  animation: load 10s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    content: 'Buscando las mejores ubicaciones';
  }
  33% {
    content: 'Espere por favor';
  }
  67% {
    content: 'Buscando las mejores ubicaciones';
  }
  100% {
    content: 'Espere por favor';
  }
}


/* otro SHEEP*/


@keyframes bob {
  0% {
    top: 0;
  }
  50% {
    top: 0.2em;
  }
}

.sceneMaster {
  margin-top: -200px;
    margin-left: 30%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  transform: translate3d(0, 0, 0);
}

.text {
  color: white;
  font-size: 2em;
  font-family: helvetica;
  font-weight: bold;
}

.sheep {
  display: inline-block;
  position: relative;
  font-size: 1em;
}
.sheep * {
  transition: transform 0.3s;
}
.sheep .top {
  position: relative;
  top: 0;
  animation: bob 1s infinite;
}
.sheep:hover .head {
  transform: rotate(0deg);
}
.sheep:hover .head .eye {
  width: 1.25em;
  height: 1.25em;
}
.sheep:hover .head .eye:before {
  right: 30%;
}
.sheep:hover .top {
  animation-play-state: paused;
}
.sheep .head {
  display: inline-block;
  width: 5em;
  height: 5em;
  border-radius: 100%;
  background: #211e21;
  vertical-align: middle;
  position: relative;
  top: 1em;
  transform: rotate(30deg);
}
.sheep .head:before {
  content: '';
  display: inline-block;
  width: 80%;
  height: 50%;
  background: #211e21;
  position: absolute;
  bottom: 0;
  right: -10%;
  border-radius: 50% 40%;
}
.sheep .head:hover .ear.one, .sheep .head:hover .ear.two {
  transform: rotate(0deg);
}
.sheep .head .eye {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 100%;
  background: white;
  position: absolute;
  overflow: hidden;
}
.sheep .head .eye:before {
  content: '';
  display: inline-block;
  background: black;
  width: 50%;
  height: 50%;
  border-radius: 100%;
  position: absolute;
  right: 10%;
  bottom: 10%;
  transition: all 0.3s;
}
.sheep .head .eye.one {
  right: -2%;
  top: 1.7em;
}
.sheep .head .eye.two {
  right: 2.5em;
  top: 1.7em;
}
.sheep .head .ear {
  background: #211e21;
  width: 50%;
  height: 30%;
  border-radius: 100%;
  position: absolute;
}
.sheep .head .ear.one {
  left: -10%;
  top: 5%;
  transform: rotate(-30deg);
}
.sheep .head .ear.two {
  top: 2%;
  right: -5%;
  transform: rotate(20deg);
}
.sheep .body {
  display: inline-block;
  width: 7em;
  height: 7em;
  border-radius: 100%;
  background: forestgreen;
  position: relative;
  vertical-align: middle;
  margin-right: -3em;
}
.sheep .legs {
  display: inline-block;
  position: absolute;
  top: 80%;
  left: 10%;
  z-index: -1;
}
.sheep .legs .leg {
  display: inline-block;
  background: #141214;
  width: 0.5em;
  height: 2.5em;
  margin: 0.2em;
}
.sheep:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 112%;
  width: 100%;
  height: 10%;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.4);
}


/* START MOBILE CSS */

/* SCENE */
.scene1Css{
    vertical-align: middle;
 

    border-radius: 10px;
    text-align: center;
    color: white;
    font-size: 18px;
    vertical-align: baseline;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    width: 100%;
        margin-top: -25px;
    }

.scene2Css{
    vertical-align: middle;
    background: mediumblue;
    border:1px solid mediumblue;
    width: 150px;
    height: 60px;
    border: 1px solid gray;
    border-radius: 10px;
    text-align: center;
    color: white;
    padding-top: 8%;
    margin-bottom: 10px;
     font-size:12px;
     margin: 0px auto;
    }

.scene3Css{
    vertical-align: middle;
    background: mediumvioletred;
    border:1px solid mediumvioletred;
    width: 150px;
    height: 60px;
    border: 1px solid gray;
    border-radius: 10px;
    text-align: center;
    color: white;
    padding-top: 8%;
     font-size:12px;
     margin: 0px auto;
    }


    .sceneRow1{
          vertical-align: middle;
    height: 2%;
    text-align: center;
    color: #ececec;
    font-size: 12px;
    margin: 0px auto;
    padding-left: 6%;
    display: flow-root;
    }

      .sceneRow2{
         vertical-align: middle;
    height: 2%;
    text-align: center;
    color: #ececec;
    font-size: 12px;
    margin: 0px auto;
    padding-left: 6%;
    display: flow-root;
    }

  .sceneRow3{
       vertical-align: middle;
    height: 2%;
    text-align: center;
    color: #ececec;
    font-size: 12px;
    margin: 0px auto;
    padding-left: 6%;
    display: flow-root;
    }

      .sceneRowGeneric{
       vertical-align: middle;
    height: 2%;
    text-align: center;
    color: #ececec;
    font-size: 12px;
    margin: 0px auto;
    padding-left: 6%;
    display: flow-root;
    }

    .sceneRow1Title{
         vertical-align: middle;
    text-align: center;
    color: #ececec;
    padding-top: 0.5%;
    font-size: 12px;
    
    font-family: -webkit-pictograph;
    font-style: normal;
    font-weight: bold;
    }

     .sceneRow2Title{
     vertical-align: middle;
    text-align: center;
    color: #ececec;
    padding-top: 0.5%;
    font-size: 12px;
    
    font-family: -webkit-pictograph;
    font-style: normal;
    font-weight: bold;
    }

       .sceneRow3Title{
     vertical-align: middle;
    text-align: center;
    color: #ececec;
    padding-top: 0.5%;
    font-size: 12px;

    font-family: -webkit-pictograph;
    font-style: normal;
    font-weight: bold;
    }


       .sceneRowGenericTitle{
     vertical-align: middle;
    text-align: center;
    color: #ececec;
    padding-top: 0.5%;
    font-size: 12px;

    font-family: -webkit-pictograph;
    font-style: normal;
    font-weight: bold;
    }



    .sceneRowAGeneric{
    vertical-align: middle;
    float:left;
    background: green;
    border:1px solid mediumvioletred;
    width: 40px;
    height: 40px;
    border: 1px solid gray;
    border-radius: 400px;
    text-align: center;
    color: red;
    padding-top: 4%;
     font-size:10px;
     margin: 0px auto;
     color:white;
    margin-right: 4px;
    margin-left: 4px;
    }


    



      .r2A{
    height: 37px;
    vertical-align: middle;
    float: left;
    /* background: #00b300; */
    width: 10%;
    /* height: 33px; */
    
        margin-left: 5px;
    /* border-radius: 40px; */
    text-align: center;
    /* padding-top: 2%; */
    /* color: white; */
    /* margin-right: 4px; */
    display: inline-table;
    /* cursor: pointer; */
 
    }

    .r2B{
      height: 37px;
      vertical-align: middle;
      float: left;
      /* background: #00b300; */
      width: 22%;
      /* height: 33px; */
      
          margin-left: 5px;
      /* border-radius: 40px; */
      text-align: center;
      /* padding-top: 2%; */
      /* color: white; */
      /* margin-right: 4px; */
      display: inline-table;
      /* cursor: pointer; */
   
      }


      .r2C{
        height: 37px;
        vertical-align: middle;
        float: left;
        /* background: #00b300; */
        width: 10%;
        /* height: 33px; */
        
            margin-left: 5px;
        /* border-radius: 40px; */
        text-align: center;
        /* padding-top: 2%; */
        /* color: white; */
        /* margin-right: 4px; */
        display: inline-table;
        /* cursor: pointer; */
     
        }

      







/* END   CSS*/