body { 
    background: url('../images/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: hidden
}

h1 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 5em;
    color: #ffffff;
}

h3 {
    font-family: 'Ubuntu', sans-serif; 
    font-size: 2.2em;
    color: #ffffff;
    padding-bottom: 2%;
    padding-top: 2%;
}

p {
    font-family: 'Ubuntu', sans-serif;
    
    font-size: 1.9em;
    color: #ffffff;
}

.container-fluid {
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

.section {
    padding-top: 5%; 
}

.header-section-text {
    padding-top: 5%;
}

.phone-image {
    max-height: 500px;
    width: auto;
}

.widget-section {
    padding-top: 10%
}

.right-side-text {
    padding-left: 15%;
}

.get-it-section {
    margin: 0 auto;
    background-color: #3ACDFF; 
    padding-bottom: 10%; 
}

.note-text {
    padding-top: 5%;
    font-size: 1.2em;
}

/*ANIMATION SET UP*/

.right-side-image-container {
    animation: 1s ease-out 0s 1 slideInFromLeft;
}

.left-side-image-container {
    animation: 1s ease-out 0s 1 slideInFromRight;
    
}

/*KEYFRAMES*/

@keyframes slideInFromLeft {
    0% {
      transform: translateX(-200%);
    }
    100% {
      transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(200%);
      }
      100% {
        transform: translateX(0);
      }
}


@media screen and (min-width: 768px) {
    .note-text {
        font-size: 1.7em;
    }
}