@charset "utf-8";
/* CSS Document */

#text-scroll { height: 250px; display: flex; align-items: center; justify-content:center; border: 2px solid; margin: 10px 0px; background-image:url("../images/work-images/kitchen-02-min.jpg"); background-position: 50% 55%; width: 100%;  background-repeat: no-repeat; background-size: cover;  } 

.scrw-container { display: flex; align-items: center; flex-direction: column; justify-content: center; font-size: 5rem; font-weight: 600;  text-transform: uppercase; max-height: 100%; }

#fevry-box { margin: 0; padding: 0;  box-sizing: border-box; text-shadow: 1px 1px 1px #fff; }

.scrw-container h1 { font-size: 4rem;  color: #000; }

.scrw-box { height: 6rem; margin: 0 auto; padding: 0; overflow: hidden; }
	
.scrw-box ul { margin: 0; padding: 0; animation: scrollUp 8s infinite;  }
	
.scrw-box ul li { display: flex; align-items: center; justify-content: center; height: 6rem; list-style: none; -webkit-text-stroke: 1px #E0DAD1; text-shadow: -2px 2px #fff; }

@keyframes scrollUp { 
	
	15%, 25% { transform: translateY(-20%); } 
	40%, 50% { transform: translateY(-40%); } 
	65%, 75% { transform: translateY(-60%); } 
	90%, 100% { transform: translateY(-80%); } }	

@media screen and (max-width:600px) { #text-scroll { height: 200px;} .scrw-container { font-size: 3rem; } .scrw-box { font-size: 4rem; height: 5rem; } .scrw-box ul li { font-size: 3rem; height: 5rem; } .scrw-container h1 { font-size: 3rem; } }

@media screen and (max-width:450px) { #text-scroll { height: 150px;} .scrw-container { font-size: 2rem; } .scrw-box { font-size: 3rem; height: 4rem; } .scrw-box ul li { font-size: 2rem; height: 4rem; } .scrw-container h1 { font-size: 2rem; } }