@media only screen and (max-width: 479px) {


  title{
    font-size: 2em;
    font-weight: 100;
    color: #fff;
    display: block;
  }
  
p{
  font-size: 1em;
  font-weight: 200;
  color: rgba(255,255,255,0.5);
  display: block;
}

  .logo{
  position: absolute;
  width:270px;
  height:270px;
  margin: auto;
  z-index:98989;
background-image: url(../images/logo.png);
  background-size: 100%;
  background-repeat: no-repeat;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}
  
}

@media only screen and (max-width: 479px) {
  
  .logo{
  position: absolute;
  width:85%;
  height:270px;
  margin: auto;
  z-index:98989;
background-image: url(../images/logo.png);
  background-size:auto 100%;
  background-repeat: no-repeat;
    background-position: center center;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}
  
}





.logoimg{
  width:100%;
  height:300px;
}

.logotext{
  width:100%;
  height:40px;
  line-height:20px;
  font-size:14px;
  color:#fff;
  font-family: 'Barlow', sans-serif;
  text-align: center;
  letter-spacing: 1px;
}


@-webkit-keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

@-moz-keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

@-o-keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

@keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

#back {
  background: url(../images/bg_2.png) repeat 20% 20%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.4;
  z-index: -1;
  -webkit-animation-name: backgroundAnimate;
  -webkit-animation-duration: 300s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: backgroundAnimate;
  -moz-animation-duration: 3s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: backgroundAnimate;
  -o-animation-duration: 300s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: backgroundAnimate;
  animation-duration: 300s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#front {
  background: url(../images/bg_1.png) repeat 35% 35%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.6;
  z-index: -1;
  -webkit-animation-name: backgroundAnimate;
  -webkit-animation-duration: 100s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: backgroundAnimate;
  -moz-animation-duration: 100s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: backgroundAnimate;
  -o-animation-duration: 100s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: backgroundAnimate;
  animation-duration: 100s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


.eticaret-button{
  text-decoration: none !important;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  width: 100%;
  height: auto;
  font-size: 1em;
  border: 1px solid #fff;
  background-image: url(../images/button-bg-01.svg);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: auto 50%;
  color: #fff;
}

.eticaret-button:hover{
  text-decoration: none !important;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  width: 100%;
  height: auto;
  font-size: 1em;
  border: 1px solid #fff;
  background-color: #fff;
  background-image: url(../images/button-bg-01.svg);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: auto 50%;
  color: #000;
}