.container {
  width: 100%;
  height: 100vh;
 background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#logo{
  max-width: 250px;
  z-index: 13;
  position: relative;
}
.form-container {
  /*position: relative;
  padding: 50px 40px;*/

  position: relative;
  padding: 20px 40px;
  background-color: #F5F5F5E0;
  margin-bottom: 80px;
}
.form-container-in {
  position: absolute;
  background-color: #F5F5F530;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
  opacity: 0.9;
}
.log-container {
   text-align: center;
}
.flex-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center; /*centers items on the line (the x-axis by default)*/
  -webkit-box-align: center;
          align-items: center;
}
p.lead {
  padding: 15px 10px;
  position: relative;
  z-index: 10;
}

.row.full {
  width: 100%;
}
.left-divider {
  border-left: solid 1px #78909C;
  padding-left: 20px;
}
.lead-text {
  text-align: center;
  padding: 10px;
  font-weight: 300;
  font-size: 1.4em;
  line-height: 16px;
  text-transform: uppercase;
}
/* social */
#social-media {
  position:relative;
  top:100px;
  top:25vh;
  font-size:1rem;
  text-align:center;
  overflow:hidden;
}

.btnn {
  width:100%;
  clear:both;
  white-space:nowrap;
  font-size:1em;
  display:block;
  border-radius:5px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
  margin:2px;
  -webkit-transition:all .5s;
  transition:all .5s;
  overflow:hidden
}

.btnn:hover {
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.45);
}

.btnn:focus {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);
}

.btnn > span,.btnn-icon > i {
  float:left;
  padding:13px;
  -webkit-transition:all .5s;
  transition:all .5s;
  line-height:1em
}

.btnn > span {
  padding:15px 18px 15.1px;
  white-space:nowrap;
  color:#FFF;
  background:#b8b8b8
}

.btnn:hover > span {
  color:#212121;
  font-weight:900;
}

.btnn:focus > span {
  background:#9a9a9a
}

.btnn-icon > i {
  border-radius:5px 0 0 5px;
  position:relative;
  width:40px;
  text-align:center;
  font-size:1.3em;
  color:#fff;
  background:#212121
}

.btnn-icon > i:after {
  content:"";
  border:8px solid;
  border-color:transparent transparent transparent #222;
  position:absolute;
  top:13px;
  right:-15px
}

.btnn-icon:hover > i,.btnn-icon:focus > i {
  color:#FFF;
}

.btnn-icon > span {
  border-radius:0 5px 5px 0
}

/*Facebook*/
.btnn-facebook:hover > i,.btnn-facebook:focus > i {
  color:#3b5998;
  width:50%;
}

.btnn-facebook > span {
  background:#3b5998;
  width:50%;
}

/*Google Plus*/
.btnn-google:hover > i,.btnn-google:focus > i {
  color:#d34836;
  width:50%;
}

.btnn-google > span {
  background:#d34836;
  width:50%;
}
.media-container {
  padding: 5px 20px;
}
input.form-submit {
  padding: 5px 20px;
  font-size: 1.3em;
  font-weight: 300;
  text-transform: capitalize;
}








.padding-container{padding: 80px 10%;}
@media only screen and (min-device-width:320px) and (max-device-width : 480px) 
{
  .padding-container{padding: 80px 5%;}

  .form-container {padding: 20px 10px;}

  .flex-container {margin-top: 80px;}
}

@media only screen and (min-device-width:481px) and (max-device-width : 767px) 
{ 
  .flex-container {margin-top: 60px;}
}

@media only screen and (min-device-width:768px) and (max-device-width : 1024px) 
{
  .flex-container {margin-top: 40px;}
}