/*
 * Globals
 */

body {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

ul{
  margin: 0px;
}

/*
 * Base structure
 */

body {
  color: #fff;
  text-align: center;
}
html,
body {  
  width: 100%;
  height: 100%;
  background-color: #333;
  background: url('../img/bg.jpg');
  background-position: center center;
  background-size: cover; 
}



/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  height: 100%;
  max-width: 700px;
  margin-right: auto;
  margin-left: auto;
}


.up{
  position: relative;
  top: calc(50% - 203px);
  background: url('../img/up.png');
  background-position: center center;
  background-size: cover;
  height: 406px;
  width: 699px;
  
}


.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  background-color: #0c130f;
  padding: 10px 0;

}

.footer ul {
    padding-inline-start: 0px;
}
.footer ul li {

  display: inline-block;
  padding-right: 24px;
}
.footer ul li:last-child  {
  padding-right: 0px;
}
.footer ul li i{
  padding-right: 8px;
}


@media (max-width: 1000px) {
  body{
    background: url('../img/mbg.jpg');  
    background-position: center center;
  background-size: cover; 
  }
  .site-wrapper {
    height: 100%;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
  }
  .up{
      background: url('../img/mup.png');
    background-position: center center;
    background-size: cover;
    min-height: 620px;
    width: 100%;
    top: calc(50% - 300px);
  }
  
}


@media (max-width: 734px) {
  body{
    background: url('../img/sbg.jpg');  
    background-position: center center;
  background-size: cover; 
  }
  .site-wrapper {
    height: 100%;
    max-width: 100%;
    padding: 0 20px;
    margin-right: auto;
    margin-left: auto;
  }
  .up{
      background: url('../img/sup.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 380px;
    width: 100%;
    top: calc(50% - 190px);
  }
  
}
 
@media screen and (max-height: 724px) and (orientation: landscape) {
  .site-wrapper {
    height: 100%;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
  }
  .up{
      background: url('../img/up.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
  }
  
}