html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 100%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

input { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

body, html{
  background: #090909;
}
.Wrapper{
  width: 100%;
  background-image: url(../images/bg.jpg);
  background-size: cover;
  height: 100vh;
}
.Blocks {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
    padding:0 50px;
    padding-top: 5%;
    }
    .Picture{
      width: 35%;
    }
    .Picture img{
      width: 100%;
    }
    .WrapButton{
/*      width: 30%;*/
      padding: 0;
      border-radius: 50px;
      background: green;
      font-size: 20px;
      color: #ffffff;
      margin-top: 50px;
    /*  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;*/
    }
    .WrapButton img{
      width: 22%;
      float: right;
    }
    .WrapButton a{
      color: #ffffff;
      text-align: center;
    }
    a:hover{
      text-decoration: none;
    }
    .WrapRight{
      display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
    
    }
    .WrapBlocks{
      width: 100%;
      margin: 0 auto;
      text-align: center;
      display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    align-items: flex-start;
/*    height: 100vh;*/
    }

.BlockButton{
  width: 100%;
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: -14%;
}
.Arrow{
  width: 100px;
  animation: RowBounce 2s ease 2s infinite normal forwards;
}
.Arrow img{
  width: 100%;
}
.WhatsApp{
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.WhatsApp span{
  line-height: 2.9;
  font-size: 35px;
  font-weight: bold;
}


@keyframes RowBounce {
  0% {
    animation-timing-function: ease-in;
    opacity: 1;
    transform: translateY(45px);
  }

  24% {
    opacity: 1;
  }

  40% {
    animation-timing-function: ease-in;
    transform: translateY(24px);
  }

  65% {
    animation-timing-function: ease-in;
    transform: translateY(12px);
  }

  82% {
    animation-timing-function: ease-in;
    transform: translateY(6px);
  }

  93% {
    animation-timing-function: ease-in;
    transform: translateY(4px);
  }

  25%,
  55%,
  75%,
  87% {
    animation-timing-function: ease-out;
    transform: translateY(0px);
  }

  100% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0px);
  }
}

    @media(max-width:767px) and (orientation: portrait){
      .WrapBlocks{
        height: 100vh;
      }
      .Blocks{
      display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
    padding-top: 0;
/*    height: 100vh;*/
      }
      .Arrow{
  width: 70px;
}
      .Wrapper{
        background-position: right;
        height: 100vh;
      }
      .Picture{
      width: 90%;
    }
    .BlockButton{
  margin-top: 2%;
}
.WrapButton{
  width: 90%;
}
.WhatsApp span{
  font-size: 25px;
}

    }


     @media(max-width:1024px) and (orientation: landscape){
      .WrapBlocks{
        height: 100vh;
        display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
      }
      
      .Arrow{
  width: 70px;
}
      .Wrapper{
        background-position: right;
        height: inherit;
      }
     
    .BlockButton{
  margin-top: -7%;
}

.WhatsApp span{
  font-size: 25px;
}
.WrapButton img{
      width: 20%;
    }
    .WrapButton{
      margin-top: 20px;
    }
    .Blocks{
      padding-top: 0;
    }
    }

    @media(min-width:768px) and (max-width:1024px) and (orientation: portrait){
.Blocks{
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 5%;
}
.BlockButton{
  margin-top: 10%;
}
.Picture{
  width: 60%;
}
    }

    @media(min-width:768px) and (max-width:1200px) and (orientation: landscape){

.WrapBlocks{
  height: 100vh;
}

    }


    @media(width:1024px) and (orientation: landscape){

.WrapBlocks{
  height: 100vh;
}
.Blocks{
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 0;
}
.BlockButton{
  margin-top: 6%;
}
.Picture{
  width: 40%;
}

    }


    @media(width:1024px) and (min-height:500px){

.WrapBlocks{
  height: 100vh;
}
.Blocks{
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 0;
}
.BlockButton{
  margin-top: -10%;
}
.Picture{
  width: 40%;
}

    }


    @media(min-width:200px) and (max-width: 300px) and (orientation: portrait){
.WhatsApp span {
    font-size: 18px;
}
}