.cssload-container {
    overflow: hidden;
}


.the-container {
    background-color: rgba(0,0,0,0.25);
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    position: absolute;
}

/*=== Trigger  ===*/
.animate {
  -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    -ms-animation-duration: 0.4s;
    -o-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
/*=== Optional Delays, change values here  ===*/
.one {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
animation-delay: 0.2s;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
      -moz-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
      -moz-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
      -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
 
  to {
    opacity: 1;
    -webkit-transform: none;
      -moz-transform: none;
      -ms-transform: none;
      -o-transform: none;
    transform: none;
  }
}
 
.fadeInUp {
  -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway';
}

#contact-img {
    background: url('../img/contact.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
}

#about-img {
    background: url('../img/me.jpg');
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
}

#light-img{
    background: url('../img/bloglight.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#bike-img{
    background: url('../img/blogbike.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#apps-img{
    background: url('../img/blogdaw.jpeg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#search-img{
    background: url('../img/blogbwc.jpeg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#past-img{
    background: url('../img/projpw.png');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#uw-img{
    background: url('../img/projuw.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#ultimate-img{
    background: url('../img/projuh.jpeg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;-webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#instagram-img{
    background: url('../img/projid.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;-webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#calc-img{
    background: url('../img/projcc.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#presentation-img{
    background: url('../img/projpd.jpeg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#low-img{
    background: url('../img/projlpa.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#finals-img{
    background: url('../img/projfg.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#smart-img{
    background: url('../img/projsr.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#accident-img{
    background: url('../img/projaig.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#facebook-img{
    background: url('../img/projfr.png');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 
#church-img{
    background: url('../img/projcw.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 

#speeder-img{
    background: url('../img/projse.jpg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    display: none;
} 

#home-img{
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    background: url('../img/background.jpeg');
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    z-index: -1;
}
    
#me {
    border-radius: 50%;
    position: absolute;
    height: 200px;
}

#welcome-text{
    color: white;
    font-weight: 300;
    font-size: 18px;
    min-width: 200px;
    padding-right: 11px;
}

#welcome-description {
    color: white;
    font-weight: 600;
    max-width: 650px;
    margin-top: -5px;
}

.welcome {
    position:absolute;
    margin-left:10vw;
}

.fa-lg, .fa-2x, .fa-3x, .fa-4x {
    color: white;
}

.fa-facebook-official, .fa-github, .fa-linkedin-square, .fa-file-pdf-o {
    margin-right: 50px;
}

.fa-facebook-official:hover {
    color: 	#3b5998;
    cursor: pointer;
}

.fa-github:hover {
    color: #9CDAF0;
    cursor: pointer;
}

.fa-linkedin-square:hover {
    color: #0077B5;
    cursor: pointer;
}

.fa-file-pdf-o:hover {
    color: #EEAC5A;
    cursor: pointer;
}

.fa-paper-plane-o:hover {
    color: #D87E95;
    cursor: pointer;
}

.fa-lg {
    -webkit-transition: color .2s ease-in-out, transform .2s ease-in-out;
    -moz-transition: color .2s ease-in-out, transform .2s ease-in-out;
    -ms-transition: color .2s ease-in-out, transform .2s ease-in-out;
    -o-transition: color .2s ease-in-out, transform .2s ease-in-out;
    transition: color .2s ease-in-out, transform .2s ease-in-out;
}

.fa-circle-o, .fa-circle {
    color: white;
    position:relative;
}

.fa-circle {
    color: white;
    cursor: pointer;
}

.circle-1 {
    margin-left: 200px;
}

.circle-2, .circle-3, .circle-4, .circle-5, .circle-6 {
    margin-left: 130px;
}

.lines {
    position:relative;
    top: 0;
    width: 600px;
    margin-left: 271px;
}

.labels {
    position: relative;
    top: 0;
    margin-left: 271px;
    color: #fff;
}

#label-1 {
    position:absolute;
    margin-left: -286px;
    margin-top: 10px;
    display: none;
    display: block;
    color: #fff;
}

#label-2 {
    position:absolute;
    margin-left: -76px;
    margin-top: 10px;
    color: #fff;
}

#label-3 {
    position:absolute;
    margin-left: 85px;
    margin-top: 10px;
    color: #fff;
}

#label-4 {
    position:absolute;
    margin-left: 227px;
    margin-top: 10px;
    color: #fff;
}

#label-5 {
    position:absolute;
    margin-left: 368px;
    margin-top: 10px;
    color: #fff;
}


#line-1 {
    position:absolute;
    margin-top: -12px;
    margin-left: -41px;
}

#line-2 {
    position:absolute;
    margin-top: -12px;
    margin-left: 107px;
}

#line-3 {
    position:absolute;
    margin-top: -12px;
    margin-left: 255px;
}

#the-circles {
    width: 100px;
}

.line {
    display: inline-block;
    width: 132px;
    top: 0;
    position: relative;
    margin-left: -5px;
    margin-right: -5px;
    height: 0.05px;
    border: solid 2px white; 
}

.label {
    display: inline-block;
    top: 0;
    position: relative;
    color: white;
}

#move-circles {
    position:absolute;
    margin-top: 10vh;
}

.fa-2x, .fa-3x {
    -webkit-transition: color .4s ease-in-out, transform .4s ease-in-out;
    -moz-transition: color .4s ease-in-out, transform .4s ease-in-out;
    -ms-transition: color .4s ease-in-out, transform .4s ease-in-out;
    -o-transition: color .4s ease-in-out, transform .4s ease-in-out;
    transition: color .4s ease-in-out, transform .4s ease-in-out;
}

.fa-angle-double-up:hover {
    -webkit-transform: translate3d(0,-9px,0);
    -moz-transform: translate3d(0,-9px,0);
    -ms-transform: translate3d(0,-9px,0);
    -o-transform: translate3d(0,-9px,0);
    transform: translate3d(0,-9px,0);
    color: #D87E95;
    cursor: pointer;
}

.fa-angle-double-down:hover {
    -webkit-transform: translate3d(0,9px,0);
    -moz-transform: translate3d(0,9px,0);
    -ms-transform: translate3d(0,9px,0);
    -o-transform: translate3d(0,9px,0);
    transform: translate3d(0,9px,0);
    color: #D87E95;
    cursor: pointer;
}

.fa-lg:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

#socialmedia {
    position: absolute;
    top: 90vh;
}

#arrows {
    position: absolute;
    margin-left: 5vw;
}

#arrow-up {
    margin-bottom: 15px;
}

.huge {
    font-size: 60px;
}

.semi-huge {
    font-size: 55px;
}

.not-as-huge {
    50px;
}

#current-count, #total-count {
    position: relative;
    color: white;
    text-align: center;
    font-family: 'Raleway';
    font-size: 20px;
    font-weight: 600;
}

#current-count {
    margin-top: -24px;
    margin-bottom: 7px;
    color: #D87E95;
}

#total-count {
    border-top: solid 1px white;
    margin-bottom: -5px;
    padding-top: 4px;
}

#outside {
    background: black;
    visibility: hidden;
} 

body {
    background: black;
}

#seemore {
    position: absolute;
    color: white;
    opacity: 0;
    margin-top: -28px;
    font-size: 18px;
    border: solid 1px #D87E95;
    padding: 10px;
}

#seemore:hover {
    background: #D87E95;
}

#popup-maybe {
    background: rgba(0,0,0,1);
    width: 100%;
    min-height: 100%;
    position:absolute;
    text-align: center;
    color: white;
    top: 0;
    left: 0;
    display:none;
}

#popup-title {
    font-size: 60px;
}

#popup-title2 {
    font-size: 60px;
}

.maline {
    margin-top: 40px;
}

.popup-text2-top {
    margin-top: 50px;
    font-size: 23px;
    font-weight: 200;
    margin-bottom: 40px;
    text-align: left;
}

.popup-text2 {
    font-size: 23px;
    font-weight: 200;
    margin-top: -20px;
    margin-bottom: 40px;
    text-align: left;
}

.popup-text {
    font-size: 25px;
    font-weight: 200;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: left;
}

.popup-total {
    margin-top: 80px;
    margin-left: 20vw;
    margin-right: 20vw;
}

.form-pad {
    padding-top: 60px;
    padding-right: 100px;
    padding-left: 100px;
}

.form-control {
    width: 100%;
}

.form-group {
    text-align: left;
}

.form-group2 {
    text-align: center;
}

.popup-close {
    font-size: 150px;
    position:fixed;
    font-weight: 100;
    top: -30px;
    left: -webkit-calc(100% - 100px);
    left: -moz-calc(100% - 100px);
    left: -ms-calc(100% - 100px);
    left: -o-calc(100% - 100px);
    left: calc(100% - 100px);
}

.popup-close:hover {
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
    cursor:pointer;
}

.img-responsive {
    width: 100%;
    margin-bottom: 50px;
}

.blandlink{
    color:white;
}

.blandlink:hover{
    color:white;
}

.blandlink:active{
    color:white;
}

.blandlink:focus{
    color:white;
}

.form-control {
    color: white !important;
    font-family: 'Raleway' !important;
    text-align: left !important;
}

#me {
    position: absolute;
    left: -webkit-calc(100% - 250px);
    left: -moz-calc(100% - 250px);
    left: -ms-calc(100% - 250px);
    left: -o-calc(100% - 250px);
    left: calc(100% - 250px);
}

textarea:focus, input:focus{
    outline: none;
}

@media(max-width:1000px) {
    .popup-total {
    margin-left: 15vw;
    margin-right: 15vw;
}
}

@media(max-width:830px) {
    .popup-total {
    margin-left: 10vw;
    margin-right: 10vw;
}
}

@media(max-width:600px) {
    .popup-total {
    margin-left: 5vw;
    margin-right: 5vw;
}
    
    #popup-title {
    font-size: 40px;
}

#popup-title2 {
    font-size: 40px;
}
    
    .popup-close {
    font-size: 100px;
    position:fixed;
    font-weight: 100;
    top: -25px;
    left: -webkit-calc(100% - 60px);
    left: -moz-calc(100% - 60px);
    left: -ms-calc(100% - 60px);
    left: -o-calc(100% - 60px);
    left: calc(100% - 60px);
}
}

@media(max-width:430px) {
    
    #popup-title {
    font-size: 30px;
}

#popup-title2 {
    font-size: 30px;
}
}

@media(max-width:862px) { 
    .form-pad {
    padding-right: 50px;
    padding-left: 50px;
}
}

@media(max-width:480px) { 
    .form-pad {
    padding-right: 0px;
    padding-left: 0px;
}
}



@media(max-width:400px) { 
    .fa-facebook-official, .fa-github, .fa-linkedin-square, .fa-file-pdf-o {
    margin-right: 30px;
}
}

@media(max-width: 824px) {
    .circle-1 {
    margin-left: 150px;
    }

    .circle-2, .circle-3, .circle-4, .circle-5, .circle-6 {
        margin-left: 110px;
    }
    
    #line-1 {
    margin-left: -91px;
    }

    #line-2 {
        margin-left: 37px;
    }

    #line-3 {
        margin-left: 165px;
    }
    
    .line {
        width: 112px;
    }
    
    #label-2 {
        margin-left: -127px;
    }

    #label-3 {
        margin-left: 13px;
    }

    #label-4 {
        margin-left: 136px;
    }

    #label-5 {
        margin-left: 259px;
    }
}

@media(max-width: 655px) {
    .circle-1 {
    margin-left: 100px;
    }

    .circle-2, .circle-3, .circle-4, .circle-5, .circle-6 {
        margin-left: 80px;
    }
    
    #line-1 {
    margin-left: -141px;
    }

    #line-2 {
        margin-left: -43px;
    }

    #line-3 {
        margin-left: 54px;
    }
    
    .line {
        width: 83px;
    }
    
    #label-2 {
        margin-left: -176px;
    }

    #label-3 {
        margin-left: -66px;
    }

    #label-4 {
        margin-left: 27px;
    }

    #label-5 {
        margin-left: 118px;
    }
}

@media(max-width: 525px) {
    .circle-1 {
    margin-left: 80px;
    }

    .circle-2, .circle-3, .circle-4, .circle-5, .circle-6 {
        margin-left: 60px;
    }
    
    #line-1 {
    margin-left: -161px;
    }

    #line-2 {
        margin-left: -83px;
    }

    #line-3 {
        margin-left: -05px;
    }
    
    .line {
        width: 63px;
    }
    
    #label-2 {
        margin-left: -196px;
    }

    #label-3 {
        margin-left: -106px;
    }

    #label-4 {
        margin-left: -33px;
    }

    #label-5 {
        margin-left: 38px;
    }
}

@media(max-width: 440px) {
    .circle-1 {
    margin-left: 55px;
    }

    .circle-2, .circle-3, .circle-4, .circle-5, .circle-6 {
        margin-left: 40px;
    }
    
    #line-1 {
    margin-left: -186px;
    }

    #line-2 {
        margin-left: -128px;
    }

    #line-3 {
        margin-left: -71px;
    }
    
    .line {
        width: 43px;
    }
    
    .labels {
        font-size: 13.5px;
    }
    
    #label-1 {
        margin-left: -283px;
    }
    
    #label-2 {
        margin-left: -216px;
    }

    #label-3 {
        margin-left: -148px;
    }

    #label-4 {
        margin-left: -95px;
    }

    #label-5 {
        margin-left: -42px;
    }
}

@media(max-width: 1045px) {
    #welcome-description {
        width: 530px;
    }
}

@media(max-width: 913px) {
    #welcome-description {
        font-size: 25px;
        width: 480px;
    }
    
    .welcome {
        margin-left: 11vw;
    }
}

@media(max-width: 864px) {
    #welcome-description {
        font-size: 22px;
        width: 420px;
    }
}

@media(max-width: 791px) {
    #welcome-description {
        font-size: 21px;
        width: 350px;
    }
    .welcome {
        margin-left: 12vw;
    }
}

@media(max-width: 709px) {
    #welcome-description {
        font-size: 19px;
        width: 300px;
    }
    #me {
        height: 150px;
    }
    .welcome {
        margin-left: 13vw;
    }
}

@media(max-width: 579px) {
    #welcome-description {
        font-size: 19px;
        width: 450px;
    }
    #me {
        display: none;
    }
    .welcome {
        margin-left: 15vw;
    }

}

@media(max-width: 549px) {
    #welcome-description {
        font-size: 19px;
        width: 400px;
    }
    .welcome {
        margin-left: 15vw;
    }

}

@media(max-width: 489px) {
    #welcome-description {
        font-size: 15px;
        width: 350px;
    }
    .welcome {
        margin-left: 15vw;
    }
    #arrow-up, #arrow-down {
        font-size: 10px;
    }
    #current-count, #total-count {
        font-size: 19px;
        margin-bottom: 2px;
    }
    #current-count {
        margin-top: -17px;
        padding-bottom:5px;
    }
    
    #arrows {
        margin-left: 7vw;
    }
    
}

@media(max-width: 419px) {
    #welcome-description {
        font-size: 15px;
        width: 280px;
    }
    .welcome {
        margin-left: 18vw;
    }

}

@media(max-width: 337px) {
    #welcome-description {
        font-size: 15px;
        width: 260px;
    }
    .welcome {
        margin-left: 18vw;
    }

}

@media(max-height: 410px) { 
    .welcome, #arrows {
        margin-top: 20px;
    }
    #me {
        margin-top: 25px;
    }
}

@media(max-width: 579px) and (min-height: 480px) { 
    #arrows, .welcome {
        margin-top: 100px;
    }
    
    #me {
        display: block;
        margin-top: -50px;
    }
}

@media(max-width: 709px) {
    #me {
    left: -webkit-calc(100% - 200px);
        left: -moz-calc(100% - 200px);
        left: -ms-calc(100% - 200px);
        left: -o-calc(100% - 200px);
        left: calc(100% - 200px);
}
}

@media(max-width: 579px) {
    #me {
    left: -webkit-calc(50% - 75px);
        left: -moz-calc(50% - 75px);
        left: -ms-calc(50% - 75px);
        left: -o-calc(50% - 75px);
        left: calc(50% - 75px);
}
}

@media(max-width: 579px) and (min-height: 527px) {
    #arrows, .welcome {
        margin-top: 120px;
    }
}

@media(max-width: 579px) and (min-height: 576px) {
    #arrows, .welcome {
        margin-top: 130px;
    }
}

@media(max-width: 579px) and (min-height: 676px) {
    #arrows, .welcome {
        margin-top: 140px;
    }
}

@media(max-width: 579px) and (min-height: 721px) {
    #arrows, .welcome {
        margin-top: 150px;
    }
    
    #me {
        height: 200px;
        left: -webkit-calc(50% - 100px);
    }
}

@media(max-width: 579px) and (min-height: 744px) {
    #arrows, .welcome {
        margin-top: 160px;
    }
    
}

@media(max-width: 579px) and (min-height: 810px) {
    #arrows, .welcome {
        margin-top: 170px;
    }
    
}

@media(max-width: 579px) and (min-height: 874px) {
    #arrows, .welcome {
        margin-top: 190px;
    }
    
}

@media(max-width: 579px) and (min-height: 908px) {
    #arrows, .welcome {
        margin-top: 200px;
    }
    
}

@media(max-width: 579px) and (min-height: 955px) {
    #arrows, .welcome {
        margin-top: 210px;
    }
    
}


#blah {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    overflow-x:hidden;
}