@media only screen and (min-width: 1050px) {

	body {
		margin:0;
		font-family: 'Work Sans', sans-serif;
	}

	#holder {
		display: flex;
		flex-direction: column;
		height:100%;

	}

	

	#maincontent {
		display:flex;
		flex-grow:1;
		flex-shrink: 0;
		flex-direction: column;
		background-image: url(images/etiming_home.jpg);
		background-size: cover;
		background-position: center center;	
		margin-top:50px;
		padding-top: 50px;

	}

	#infotext {
		display: flex;
		flex-direction: row;
		flex: 3;
		justify-content:left;


	}

	.infobox {
		display: flex;
		flex:1;
		flex-direction: column;
		margin: 50px;
		padding: 60 70 60 70;
		vertical-align: middle;
		justify-items: center;
	}

	#infospace {
		height: 40%;
	}

	.infoholder.first {
		transform: skew(14deg);
		width: fit-content;
		padding: 0 10px;
		background-color: white;
	}
	

	.infoholder h2 {
		color: white;
		font-size: 3em;
		align-self: flex-end;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.infoholder h1 {
		transform: skew(-14deg);
		color: #FFB100;
		margin: 0px;
		font-size: 3.5em;
	}

	.infologo {
		max-width: 80%;
	}

	.info {
		margin-top:30px;
		padding: 10px 20px 30px 20px;;
		background-color: rgba(255,255,255, 0.8);
		border-radius: 10px;
		font-weight: 500;
	}

	.info h2 {
		font-weight: 600;
	}

	#logoholder {
		display:flex;
		flex: 1;
		align-items: flex-end;
		justify-content: flex-end;
	}

	#rrlogo {
		max-height: 100;
	}

}


/* Tablet */
@media only screen and (min-width: 700px) and (max-width: 1049px) {

	body {
		margin:0;
		font-family: 'Work Sans', sans-serif;
	}

	#holder {
		display: flex;
		flex-direction: column;
		height:100%;

	}


	#maincontent {
		display:flex;
		flex-grow:1;
		flex-shrink: 0;
		flex-direction: column;
		background-image: url(images/etiming_home.jpg);
		background-size: cover;
		background-position: center center;	
		margin-top:50px;
		padding-top: 20px;

	}

	#infotext {
		display: flex;
		flex-direction: row;
		flex: 3;
		justify-content:left;


	}

	.infobox {
		display: flex;
		flex:1;
		flex-direction: column;
		margin: 50px;
		vertical-align: middle;
		justify-items: center;
	}

	#infospace {
		height: 60%;
	}

	.infoholder.first {
		transform: skew(14deg);
		width: fit-content;
		padding: 0 10px;
		background-color: white;
	}

	.infoholder h2 {
		color: white;
		font-size: 2em;
		align-self: flex-end;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.infoholder h1 {
		color: #FFB100;
		margin: 0px;
		font-size: 2.5em;
	}

	.infologo {
		max-width: 50%;
	}

	.info {
		margin-top:30px;
		padding: 10px 20px 30px 20px;;
		background-color: rgba(255,255,255, 0.8);
		border-radius: 10px;
		font-weight: 500;
	}

	.info h2 {
		font-weight: 600;
	}

	#logoholder {
		display:flex;
		flex: 1;
		align-items: flex-end;
		justify-content: flex-end;
	}

	#rrlogo {
		max-height: 100;
	}

}

/* Mobile */

@media only screen and (max-width: 699px) {
	body {
		margin:0;
		font-family: 'Work Sans', sans-serif;
	}

	#holder {
		display: flex;
		flex-direction: column;
		height:100%;

	}


	#maincontent {
		display:flex;
		flex-grow:1;
		flex-shrink: 0;
		flex-direction: column;
		background-image: url(images/etiming_home.jpg);
		background-size: cover;
		background-position: center center;	
		margin-top:50px;

	}

	#infotext {
		display: flex;
		flex-direction: row;
		flex: 3;
		justify-content:left;


	}

	.infobox {
		display: flex;
		flex:1;
		flex-direction: column;
		margin: 50px;
		vertical-align: middle;
		justify-items: center;
	}

	#infospace {
		height: 60%;
	}

	.infoholder.first {
		transform: skew(14deg);
		width: fit-content;
		padding: 0 10px;
		background-color: white;
	}

	.infoholder h2 {
		color: white;
		font-size: 2em;
		align-self: flex-end;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.infoholder h1 {
		color: #FFB100;
		margin: 0px;
		font-size: 2em;
	}

	.infologo {
		max-width: 80%;
	}

	.info {
		margin-top:30px;
		padding: 10px 20px 30px 20px;;
		background-color: rgba(255,255,255, 0.8);
		border-radius: 10px;
		font-weight: 500;
	}

	.info h2 {
		font-weight: 600;
	}

	#logoholder {
		display:flex;
		flex: 1;
		align-items: flex-end;
		justify-content: flex-end;
	}

	#rrlogo {
		max-height: 100;
	}

}