p {
    font-family: 'Roboto', sans-serif !important;
}

.quote {
    font-size: 24px;
}

.screenshots {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 250px;
    width: 100%;
    margin: 10px 0px;
}

.screenshot {
    height: 250px;
    margin-right: 8px;
    border-radius: 8px;
    box-shadow: 0px 0px 6px rgba(139, 224, 215,0.8);
}

.example {
    color: rgba(139, 224, 215, 0.6);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
}

.blurred {
    filter: blur(2px);
}

.overlay {
    top: 50px;
    font-size: x-large;
    display: flex;
    justify-content: flex-start;
    width: 800px;
}

.white {
    color:  rgba(255, 255, 255, 0.5);
}

.chevron::before {
	border-style: solid;
	border-width: 0.4em 0.4em 0 0;
	content: '';
	display: inline-block;
	height: 2.5em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 2.5em;
}

.chevron.right:before {
	left: 0;
	transform: rotate(45deg);
}

.chevron.bottom:before {
	top: 0;
	transform: rotate(135deg);
}

.chevron.left:before {
	left: 0.25em;
	transform: rotate(-135deg);
}

#rightscroll {
    position: absolute;
    top: 250px;
    right: 2.5em;
    cursor: pointer;
}
#leftscroll {
    position: absolute;
    top: 250px;
    left: 2.5em;
    cursor: pointer;
}


.endorsement {
    display: flex;
    flex-direction: column;
}

.opacity-30 {
    opacity: 0.1;
}


/* ================ */
@media (max-width: 800px) {
    .screenshots {
      flex-direction: column;
    }
    .screenshot {
        margin-bottom: 8px;
    }
  }

  @media (max-width: 1440px) { 
    .hide-sm-screens {
        display: none;
    }
   }