/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

body,
html {
   height: 100%;
}

/*---------------------------------------------*/
a {
   font-size: 14px;
   line-height: 1.7;
   color: #666666;
   margin: 0px;
   transition: all 0.4s;
   -webkit-transition: all 0.4s;
   -o-transition: all 0.4s;
   -moz-transition: all 0.4s;
}

a:focus {
   outline: none !important;
}

a:hover {
   text-decoration: none;
}

span {
   width: 50%;
   font-family: Arial, Helvetica, sans-serif;
}

i {
   width: 50%;
   text-align: right;
}

/*---------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0px;
}

p {
   font-size: 14px;
   line-height: 1.7;
   color: #666666;
   margin: 0px;
}

ul,
li {
   margin: 0px;
   list-style-type: none;
}

/*---------------------------------------------*/
button {
   outline: none !important;
   border: none;
   background: transparent;
}

button:hover {
   cursor: pointer;
}

/*//////////////////////////////////////////////////////////////////
[ login ]*/

body {
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   padding: 15px;
   background-image: url('/images/index/fondo.svg');
   background-position: center center;
   align-items: center;
   background-size: cover;

   /* vh es para tomar la altura y el ancho de la pantalla */
}

.container-all {
   width: 1000px;
   height: 500px;

   background: #fff;
   border-radius: 10px;
   overflow: hidden;
}

.container-logo {
   width: 30%;
   height: 12%;
   background-color: rgba(229, 224, 224, 0.3);
   border-radius: 78% 22% 60% 39% / 48% 58% 42% 52%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.container-picture {
   width: 70%;
   background-color: #89bd29;
   border-radius: 0% 30% 18% 10% / 10% 93% 13% 0%;
   padding: 0px;
   /* display: flex;
  align-items: center;
   justify-content: center; */
}

.container-panel {
   width: 30%;
   background-color: white;
}

/*------------------------------------------------------------------
[  ]*/

.pic-logo {
   position: relative;
   margin-top: 6px;

   width: 80%;
}

.pic1 {
   margin-left: 7%;
   width: 80%;
}

.pic2 {
   margin-top: 20%;
   width: 30%;
}

/*------------------------------------------------------------------
[  ]*/

.panel-title {
   font-family: Poppins-Bold;
   font-size: 24px;
   color: #333333;
   line-height: 1.2;
   text-align: center;

   width: 100%;
   display: block;
}

/*---------------------------------------------*/

/*------------------------------------------------------------------
[ Button ]*/
.container-buttons {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 30px;
}

.button {
   font-size: 15px;
   line-height: 1.5;
   color: #fff;
   text-transform: uppercase;
   margin: 10px;

   width: 100%;
   height: 50px;
   border-radius: 25px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   align-items: center;
   padding: 0 25px;

   -webkit-transition: all 0.4s;
   -o-transition: all 0.4s;
   -moz-transition: all 0.4s;
   transition: all 0.4s;
}

.button:hover {
   background: #404040;
   color: white;
}

.b1 {
   background-color: #89bd29;
}

.b2 {
   background-color: #e6e7e8;
   color: #58595b;
}

.b3 {
   background-color: #244b9a;
}

/*------------------------------------------------------------------
[ Animation]*/

.pic1 {
   animation: anim 10s linear infinite;
}

@keyframes anim {
   25% {
      transform-origin: 60% 100%;
      transform: rotate(10deg);
   }

   50% {
      transform-origin: 100% 100%;
      transform: rotate(0deg);
   }

   75% {
      transform-origin: 60% 100%;
      transform: rotate(-10deg);
   }

   100% {
      transform-origin: 100% 100%;
      transform: rotate(0deg);
   }
}

/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width: 900px) {
   /* .wrap-login100 {
  padding: 177px 90px 33px 85px;
} */

   .container-all {
      height: 90%;
   }

   .container-picture {
      width: 100%;
      height: 55%;
      border-radius: 0% 0% 88% 12% / 10% 67% 25% 19%;
   }

   .container-panel {
      width: 100%;
      height: 45%;
   }

   .pic2 {
      width: 10%;
      margin-top: 0%;
   }

   .container-buttons {
      margin-top: 5%;
      padding: 0;
      height: 50%;
   }

   .button {
      height: 40%;
      margin: 5px;
   }
}

@media (max-height: 450px) and (orientation: landscape) {
   .container-picture {
      height: 100%;
      border-radius: 0% 30% 18% 10% / 10% 93% 13% 0%;
   }

   .pic2 {
      width: 10%;
      margin-bottom: 0px;
   }

   .container-panel {
      width: 100%;
      height: 100%;
   }

   .container-buttons {
      margin-top: 0;
      height: 90%;
   }

   .button {
      margin-top: 0;
      height: 20%;
      margin: 5px;
   }
}

@media (max-width: 400px) and (max-height: 500px) {
   .container-all {
      height: 95%;
   }

   .pic1 {
      width: 70%;
      margin-left: 15%;
   }

   .pic2 {
      width: 5%;
   }
}

@media (max-height: 300px) and (orientation: landscape) {
   .pic2 {
      width: 8%;
   }

   .container-picture {
      width: 50%;
   }

   .container-panel {
      width: 50%;
   }

   .flex-column {
      flex-direction: row !important;
   }
}