body
{
  padding : 0;
  margin : 0;
  font-family: 'Open Sans', sans-serif;
}

*
{
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.row
{
  display : flex;
  flex-direction : row;
  flex-wrap : wrap;
  align-items : stretch;
  width : 100%;
  height : 100vh;
}

.col
{
  display : block;
  width : 50%;
  height : 100%;
}

.bg
{
  display : block;
  width : 100%;
  height : 100vh;
  background-color : #000;
  background-position : center;
  background-size : cover;
  background-image : url(../images/background.jpeg);
}

.layer
{
  display : block;
  width : 100%;
  height : 100%;
  background : rgba(0,0,0,0.6);
  position : relative;
}

.logo
{
  display : block;
  width : 350px;
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-50%, -50%);
}

.txtdiv
{
  //background : rgb(100,149,237);
  /*background : rgb(0, 150, 255);
  background : rgb(137, 207, 240);*/
  box-sizing : border-box;
  padding : 20px 5%;
  color : rgb(50,50,50);
  position : relative;
}

.txt-div
{
  display : block;
  //padding-top : 100px;
  position : absolute;
  width: 80%;
  top : 45%;
  left : 50%;
  transform: translate(-50%, -50%);
}

.txt-div h2
{
  display : block;
  font-size : 40px;
  font-weight : 900;
  padding: 0px;
}

.txt-div span
{
  display: block;
  font-size: 14px;
  color : rgb(70,70,70);
  width : 80%;
  padding : 0px;
  padding-bottom: 20px;
}

.txt-div div
{
  display: block;
  font-size: 13px;
  color : rgb(100,100,100);
  padding : 0px;
  padding-top: 20px;
  width : 80%;
}

form
{
  display: block;
  width: 350px;
  background : rgb(240,240,250);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

form input[name=email]
{
  display: block;
  width: 100%;
  padding : 10px 20px;
  font-size : 14px;
  //border-radius: 100px;
  background : rgb(240,240,250);
  border : none;
}

.btn
{
  display: block;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding : 30px 20px;
  background : rgb(100,149,237);
  color : #fff;
  position: absolute;
  top : 49%;
  right: -2px;
  transform: translate(0px, -50%);
  z-index: 9999;
  border : none;
  font-size: 14px
}

.err
{
  display: block;
  position: absolute;
  top : 100%;
  left: 0px;
  transform: translateY(20px);
  padding: 0px;
}

.err span
{
  box-sizing: border-box;
  width: 100%;
  padding: 10px 20px !important;
  background: rgb(240,240,255);
  border-radius: 5px;
}







@media all and (max-width : 768px)
{
  .row
  {
    height : auto;
  }

  .col
  {
    width: 100%;
    height: auto;
    min-height: 35vh;
  }

  .bg
  {
    width : 100%;
    height: 100%;
    min-height: 35vh;
  }

  .layer
  {
    display : block;
    width : 100%;
    height : 100%;
    background : rgba(0,0,0,0.6);
    position : relative;
  }

  .logo
  {
    display : block;
    width : 70%;
    position : absolute;
    top : 50%;
    left : 50%;
    transform : translate(-50%, -50%);
  }


  .txtdiv
  {
    //background : rgb(100,149,237);
    /*background : rgb(0, 150, 255);
    background : rgb(137, 207, 240);*/
    box-sizing : border-box;
    padding : 20px 5%;
    color : rgb(50,50,50);
    position : relative;
    text-align: center;
  }

  .txt-div
  {
    display : block;
    //padding-top : 100px;
    position : relative;
    width: 90%;
    top : unset;
    left : initial;
    transform: initial;
    margin: auto;
  }

  .txt-div h2
  {
    font-size : 25px;
  }

  .txt-div span
  {
    width : 100%;
    padding-bottom: 15px;
  }

  .txt-div div
  {
    padding-top: 15px;
    width : 100%;
  }

  form
  {
    width: 100%;
  }

}