/* Using em for your padding-left is going to ensure the padding scales in proportion to the font-size. */

.content1, .content2 {
    font-family: "Dela Gothic One", sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #FFFFFF;
    padding-left: 0.25em;
}
.content2 {
    color: #FFCC00;
}

@media only screen and (max-width: 767px) {
    .content1, .content2 {
        font-size: 2rem !important;
        padding-left: 0.25em;
    }
}

.outer1, .outer2 {
/*     overflow: hidden !important; */
	
}

.outer1 div, .outer2 div {
    display: inline-block;
}


.loop1, .loop2 {
    white-space: nowrap;
    animation: loop-anim 10s linear infinite;
}

@media only screen and (max-width: 767px) {
    .loop1, .loop2 {
        animation: loop-anim 3.5s linear infinite;
    }
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50% /* This works because of the div between "outer" and "loop" */
    }
}


/* An example of a media query for devices between 767 and 1024 pixels (tablets). Change out the pixel values to control the breakpoints. Target the correct class and make your changes. */

@media only screen and (min-width: 767px) and (max-width: 1024px) {
   .content1, .content2 {
        font-size: 2.25rem !important;
        padding-left: 0.25em;
    }
}


/* What your ''loop'' class should look like if you decide to reverse the direction. */

.loop1, .loop2 {
    white-space: nowrap;
    animation: loop-anim 10s linear infinite;
    animation-direction: reverse;
}

@media only screen and (max-width: 767px) {
    .loop1, .loop2 {
        animation: loop-anim 3.5s linear infinite;
        animation-direction: reverse;
    }
}


/* How to rotate the sliding text. Just add the transform property to your ''outer'' class and change the degrees to whatever you need. When rotated, the text doesn't go perfectly from the left edge of the screen to the right edge of the screen, but if you're just using text without a background, it's pretty much unnoticeable. If you want to fix it, however, the process is the same as for the banner. Add in width, a negative margin and hide the overflow - an example is available a little further down and the process is explained in the video. */

.outer1 {
/*     overflow: hidden  !important; */
    transform: rotate(-5deg);
	background-color: green;
	margin-top: 3em;
}
.outer2 {
/*     overflow: hidden  !important; */
    transform: rotate(5deg);
	background-color: purple;
	margin-top: -3em;
}


/* An example of two ''outer'' classes, styled to look like banners. The margin-top, the z-index and the position: relative are there to make them overlap. Don't forget to fix the overflow if you use this. */

.outer-top {
    /* overflow: hidden  !important; */
    background-color: #ffcc00;
    padding: 1% 0;
    transform: rotate(-3deg);
    width: 110%;
    margin-left: -5%;
    z-index: 2;
    position: relative;
}

.outer-bottom {
    /* overflow: hidden  !important; */
    background-color: #635bff;
    padding: 1% 0;
    transform: rotate(3deg);
    width: 110%;
    margin-left: -5%;
    z-index: 1;
    margin-top: -3%;
    position: relative;
    border: solid 4px #111111;
}