WebStatus/css/mobile.css

/* LOGO-WEBSTATUS */

@media only screen and (max-width: 967px) {
  h1{
    font-size: 6vw;
  }
}

@media only screen and (max-width: 467px) {
  h1{
    font-size: 10vw;
  }
}


/* GLOBAL-STATUS RESPONSIVE SHRINKING AND TEXT SHRINKING */
@media only screen and (max-width: 1067px) {
	.status {
		max-width: 93%;
	}
}

@media only screen and (max-width: 967px) {
	.status {
		max-width: 92%;
	}
}

@media only screen and (max-width: 867px) {
	.status {
		max-width: 90%;
	}
}

@media only screen and (max-width: 767px) {
	.status {
		max-width: 87%;
	}
}

@media only screen and (max-width: 517px) {
	.status {
		max-width: 80%;
	}


}

@media only screen and (max-width: 457px) {
	.status {
		max-width: 75%;
	}

	.status-text {
		font-size: 0.8em;
	}
	.status-time {
		margin-top: 2.5px;
		font-size: 0.8em;
	}
}



/* TIMELINE RESPONSIVE SHRINKING */

@media only screen and (max-width: 1439px) {
	.timeline .item .message {
		width: 95%;
	}
}

@media only screen and (max-width: 1200px) {
	.timeline .item .message {
		width: 94%;
	}
}

@media only screen and (max-width: 1000px) {
	.timeline .item .message {
		width: 93%;
	}
}

@media only screen and (max-width: 900px) {
	.timeline .item .message {
		width: 92%;
	}
}

@media only screen and (max-width: 700px) {
	.timeline .item .message {
		width: 89%;
	}
}

@media only screen and (max-width: 550px) {
	.timeline .item .message {
		width: 86%;
	}
}

@media only screen and (max-width: 450px) {
	.timeline .item .message {
		width: 81%;
	}
}

@media only screen and (max-width: 400px) {
	.timeline .item .message {
		width: 76%;
	}
}

@media only screen and (max-width: 350px) {
	.timeline .item .message {
		width: 71%;
	}
}

@media only screen and (max-width: 300px) {
	.timeline .item .message {
		width: 64%;
	}
}

/* TIMELINE DATE AND SERVICE INFO MOVE */
@media only screen and (max-width: 1750px) {
	.timeline-date {
		margin-left: -60px;
		margin-top: -130px;
	}

	.timeline {
		margin-top: 150px;
	}

	.timeline-info {
		position: absolute;
		margin-left: -33px;
		margin-top: -90px;
	}

	.timeline-services {
		margin-left: -69px;
		margin-top: -76px;
	}

	.vertical {
		grid-gap: 3px;
		grid-template-columns: 33% 33% 33% 33% 33% 33% 33%;
	}
}

@media only screen and (max-width: 430px) {
	.vertical {
		grid-gap: 3px;
		grid-template-columns: 33% 33% 33% 33% 33%;
	}
}

@media only screen and (max-width: 650px) {
	.status-annoucement {
		visibility:hidden
	}
}


/* MORE BOX RESIZING */
@media screen and (max-width: 700px){
	.more-box{
		width: 70%;
	}
	.more-popup{
		width: 70%;
	}
}

@media screen and (max-height: 700px){
	.more-popup {
		margin: 9% auto;
	}
}

@media screen and (max-height: 600px){
	.more-popup {
		margin: 2% auto;
	}
}

@media screen and (max-width: 400px){
	.more-popup {
		margin: 2% auto;
	}
}

/* COOKIE BANNER */

@media screen and (max-width: 600px){
  .cookies {
    height: 160px;
    padding-right: 0;
  }

  .cookies .text {
    width: 80%;
  }

  .cookies .cogs {
    position: absolute;
    top: 27%;
    left: 15px;
    font-size: 2em;
    color: white;
  }

  .cookies button {
    right: 39%;
    bottom: 10px;
  }
}