/*________Loggin Acces parts_______*/
     div[id = "sobre"],[id ="cavildo"],[id ="talio"]{
       margin:auto;padding:auto;width:500px;height:auto;background: rgba(255, 156, 44, 0.4);
       margin-top:5%;border-radius:5px;border:double 2px white;box-shadow:1px 2px 5px black;
       animation:cambiando 5s linear infinite alternate;
       transition:background 3s;-webkit-transition:background 3s;
       position:absolute;z-index:1;
     }
     div[id = "sobre"]{
       display:block;
     }
     div[id ="cavildo"]{
       margin-top:1%;
       display:none;
     }
     div[id = "talio"]{
       display:none;
     }
     div[id ="sobrando"]{
       margin:auto;padding:auto;width:491px;height:400px;
       overflow-x:hidden;overflow-y:scroll;
     }
     li[id = "veta"]{
      float:vertical;padding:8px;
     }
     li[id = "eta"],[id ="dias"]{
      float:vertical;
      padding:5.3px;
     }
     h1[id = "tabera"]{
      font-size:50px;
      font-family:impact;
      text-shadow:1px 5px 2px white;
      color:rgba(102,100,0,0.7);
        cursor:pointer;
        letter-spacing:8px;
     }
     p[id = "coment"]{
      font-family:arial;color:white;font-size:18px;
     }
     h4[id = "tabera"]{
       color:blue;
       text-transform:uppercase;
       font-family:arial black;
       letter-spacing:3px;
       text-shadow:1px 2px 3px white;
       font-size:25px;
     }
     input[class="datas"]{
        background:rgba(0,0,0,0.5);width:368px;height:60px;border:1px solid black;font-size:18px;color:white;
        font-family:verdana;border-radius:5px;
     }
     input[class="datas"]:focus{
       background:aqua;color:black;
     }
     input[class="datas"]::placeholder{
        color:orange;
     }
     button[class="solido"]{
       background:dodgerblue;width:250px;height:50px;color:white;font-size:18px;box-shadow:2px 3px 5px black;
       font-size:18px;font-family:arial black;border-radius:5px;cursor:pointer;
     }
     button[class="solido"]:hover{
        background:skyblue;color:blue;text-shadow:2px 1px 5px white;
     }
     button[class="solido"]:active{
        background:transparent;color:yellow;text-shadow:2px 1px 5px red;box-shadow:2px 3px 5px black inset;
     }
     a[id ="get_it"]{
       color:blue;
       text-decoration:underline;
       font-family:verdana;
       font-size:1.5vw;
     }
     a[id ="get_it"]:hover{
       color:white;
     }
     a[id ="get_it"]:active{
        color:red;
     }
     body{

        margin:auto;padding:auto;width:100%;height:100%;
        background:url(https://images.freecreatives.com/wp-content/uploads/2016/02/Grass-Road-Background-For-Free-.jpg);
        position:absolute;background-position:fill;background-repeat:no-repeat;background-size:100%;
     }
     img[id ="pay_logo"]{
     width:100px;
     height:45px;
   }
    img[id ="pay_logo_2"]{
     width:100;
     height:45px;
   }
   div[id ="partido"]{
     display: none;
   }

/*______the animation Proces______*/
  
  @keyframes cambiando{

      0%{background:linear-gradient(to bottom right, transparent, deepskyblue);}
      25%{background:linear-gradient(to top left, transparent, aqua);}
      50%{background:linear-gradient(to bottom right, transparent, orange);}
      75%{background:linear-gradient(to top left, transparent, yellow);}
      100%{background:linear-gradient(to bottom right, transparent, red);}
  }

  @-webkit-keyframes cambiando{

     0%{background:linear-gradient(to bottom right, transparent, deepskyblue);}
      25%{background:linear-gradient(to top left, transparent, aqua);}
      50%{background:linear-gradient(to bottom right, transparent, orange);}
      75%{background:linear-gradient(to top left, transparent, yellow);}
      100%{background:linear-gradient(to bottom right, transparent, red);}
  }

  @-moz-keyframes cambiando{

     0%{background:linear-gradient(to bottom right, transparent, deepskyblue);}
      25%{background:linear-gradient(to top left, transparent, aqua);}
      50%{background:linear-gradient(to bottom right, transparent, orange);}
      75%{background:linear-gradient(to top left, transparent, yellow);}
      100%{background:linear-gradient(to bottom right, transparent, red);}
  }

/*________the radioButtons________________*/
  /* The container */
    .container {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size:2.2vw;
      color:white;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    h3[id ="positron"]{
      color:blue;
      font-size:1.8vw;
      font-family:arial;
    }

    /* Hide the browser's default radio button */
    .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    /* Create a custom radio button */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: #eee;
      border-radius: 50%;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
      background-color: #ccc;
    }

    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
      background-color: #2196F3;
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
      display: block;
    }

    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
      top: 9px;
      left: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
    }
    .container:hover{
      color:blue;
    }
    /*____avatar_(Gender selection)____*/
      img[id ="avatar"],[id ="idos"]{
        width:80px;
        height:78px;
      }
      button[id ="aval"]{
         width:83.2px;
         height:83.2px;
         border-radius:6px;
         /*border:2.2px solid white;*/
      }
      div[id ="portal"]{
         margin:auto;
         padding:auto;
         width:83.2px;
         height:83.2px;
         border:2.2px solid white;
         border-radius:6px;
         position: relative;
          overflow: hidden;
          display: inline-block; 
          background:linear-gradient(transparent, gray);
      }
/*______Photo Avatar upload________*/
     div[id ="wrapar"]{
          margin:auto;
          padding:auto;
           width:83.2px;
           height:83.2px; 
          /*border:1px solid white;
          /border-top-left-radius:6px;
          border-bottom-left-radius:6px;*/
          border:2.2px solid white;
          border-radius:6px;
          background:linear-gradient(transparent, gray);
          position: relative;
          overflow: hidden;
          display: inline-block;
          cursor:pointer;
         }
         div[id ="wrapar"]:active{
            box-shadow: 1px 2px 6px black inset;background:rgba(0, 89, 70, 0.5);
         }
         div[id ="wrapar"]:hover button[id ="aval"]{
            color:white;
         }
          div[id ="wrapar"] input[type = file]{
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
          }
         /* button[class ="btn"]{
           padding: 8px 20px;
           border-radius: 8px;
           font-size:1.9vw;
           margin-top:30px;
           font-family:arial;
           color:orange;
           font-weight:bold;
         }*/
         input[name ="villa"]{
             width:100%;
             height:50px;
             border-radius:6px;
             border:solid 2.1px white;
             background:transparent;
             color:white;
             font-size:1.8vw;
             font-family:verdana;
             position:absolute;
             transform:translate(0px, 0px);
             transition:transform 2s;
             -webkit-transition:transform 2s;
       }
      input[name ="villa"]:focus{
      background:skyblue;
      color:black;
     }
     input[name ="villa"]::placeholder{
      color:white;
     }

/*________Mobile device___________*/
  @media only screen and (max-width:890px){

       div[id = "sobre"],[id ="cavildo"],[id ="talio"]{
          width:100%;
       }
       div[id ="sobrando"]{
         width:100%;
       }
       input[class="datas"]{
          width:90%;
       }
       h1[id = "tabera"]{
          font-size:6vw;
       }
       h4[id = "tabera"]{
          font-size:3.5vw;
       }
       h3[id ="positron"]{
        font-size:3.2vw;
      }
      a[id ="get_it"]{
       font-size:2.3vw;
     }
     .container{
       font-size:3.3vw;
     }
     button[class ="btn"]{
       font-size:3.8vw;
     }
     body{
      background:gray;
     }
  }