@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html,body {
  /*background: url(https://farm3.staticflickr.com/2364/2243611451_d56b7fb3c2_b.jpg) fixed;*/
  background: rgb(9,9,121);
background: linear-gradient(45deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 79%);
  /*background-size: cover;*/
  font-family: Poppins,"open sans";
  color: white;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  width: 100vw;
  height: 100%;
  margin: 0 auto ;
}

#contenedor-form{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#login_cont {
  /*width: 50%;*/
  max-height: 90vh;
  background: rgba(30,30,80,0.6);
  /*margin-left: auto;
  margin-right: auto;*/
  /*margin-top: 50px;*/
  border: 1px solid rgba(50,50,100,0.6);
  border-radius: 3px;
  box-shadow: 365px 0 5px rgba(20,20,70,0.4) hidden;
  transition: all 0.7s;
  overflow: hidden;
  top: 0;
  /*left:33%;*/
  position: relative;
  margin: 0 auto;
  padding: 30px;
  transform: translateY(-50%, -50%);
  min-width: 240px;
}

#cont {
  max-width: 50%;
  max-height: 90vh;
  overflow: hidden;
  visibility: hidden;
  margin-left: 50%;
  margin-right: auto;
  transition: all 2s;
  background: rgba(30,30,30,0);
  padding: 1em;
  color: rgba(255,255,255,0);
  border-radius: 3px;
  text-align: center;
  position: relative;
  transform: translate(-50%, 0%);
  min-width: 240px;
}

form {
  background: rgba(60,60,60,0.7);
  text-align: right;
}

#login {
  text-align: center;
  text-shadow: 2px 2px 4px rgb(40,40,40);
}

hr {
  border: 1px solid rgba(50,50,100,0.6);
  transition: all 0.7s;
}

#email {
  margin-top: 1em;
  text-shadow: 2px 2px 4px rgb(40,40,40);
}

#pw {
  margin-top: 0em;
  text-shadow: 2px 2px 4px rgb(40,40,40);
}

input {
  background: transparent;
  border: 1px solid rgba(200,200,200,0.6);
  border-radius: 5px;
  width: 100%;
  height: 20px;
  /*margin-right: 5%;*/
  margin-top: 10px;
  /*float: right;*/
  color: rgb(200,200,200);
  padding-left: 0.4em;
  transition: all 0.3s;
  position: relative;
}

input::placeholder {
  color: rgb(210,210,210);
}

input:focus {
  border: 1px solid rgb(220,220,220);
  outline: none;
}

p {
  /*margin: 0;*/
  /*margin-top: 10px;*/
  /*padding-left: 0.7em;*/
  /*float: left;*/
  text-align: center;
}

ul {
  list-style: none;
  /*margin-left: 21%;*/
  margin-right: auto;
  /*float: left;*/
  position: relative;
    text-align: center;
    justify-items: center;
    transform: translate(-20px, 10px);
}

li {
  display: inline-grid;
  width: 100%;
}

.login_buttons{
  
}

.login_buttons{

}

button {
  padding: 8px;
  background: rgba(10,10,10,0.8);
  float: left;
  margin-left: 3px;
  border: 1px solid rgba(50,50,50,0.6);
  border-radius: 5px;
  color: rgb(210,210,210);
  text-decoration: none;
  transition: all 0.3s;
  text-transform: uppercase;
}

button:hover {
  border: 1px solid rgb(220,220,220);
}

button:focus {
  outline: none;
}

/*RESPONSIVE*/
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

img { max-width: 100%; height: auto; }

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}