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

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}


/* Part A - Main Boxes  */

.myworkboxblock {
	max-width: 1430px;
	margin: 0 auto;
	overflow: hidden;
	padding: 20px;
}

.myworkbox {
	width: 31.13%;
	float: left;
	padding: 1.1%;
	display: block;
	color: #000;
}

.myworkboxfeat {
	width: 31.13%;
	float: left;
	padding: 1.1%;
	display: none;
	color: #000;
}



/* Part B - Sub Boxes  */

.myworkimage {
	overflow: hidden;
	height: 350px;
	margin-bottom: -3px;
	box-shadow: 2px 3px 7px 0px #999;
	display: block;
}

.myworkimage img {
	object-fit: cover;
	width: 100%;
  	height: 100%;
  	display: block;
  	position: relative;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

.myworktextbox {
	height: 250px;
	background-color: white;
	box-shadow: 2px 3px 5px 0px #999;
	display: block;
	
	/* Fade In/Out */
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.myworktext {
	padding: 40px;
	font-family: 'Krub', sans-serif;
	font-weight: 400;
	font-size: 16px;
}






/* Part C - Sub Box Titles */

h5 {
	margin: 0 auto;
	font-weight: 700;
	font-size: 28px;
	font-family: 'Krub', sans-serif;
}

	/* Part C1 - Graphics */

	.box-gt {
		margin: 0 auto;
		font-weight: 600;
		font-size: 16px;
		font-family: 'Krub', sans-serif;
		letter-spacing: 3px;
		color: #ED1B24;
	}

	.box-gl {
		border-style: solid; 
		border-width: 0.5px;
		color: #ED1B24;
	}

	/* Part C2 - Architecture */

	.box-at {
		margin: 0 auto;
		font-weight: 600;
		font-size: 16px;
		font-family: 'Krub', sans-serif;
		letter-spacing: 3px;
		color: #F7941D;
	}

	.box-al {
		border-style: solid; 
		border-width: 0.5px;
		color: #F7941D;
	}

	/* Part C3 - Technology */

	.box-tt {
		margin: 0 auto;
		font-weight: 600;
		font-size: 16px;
		font-family: 'Krub', sans-serif;
		letter-spacing: 3px;
		color: #197B30;
	}

	.box-tl {
		border-style: solid; 
		border-width: 0.5px;
		color: #197B30;
	}

	/* Part C4 - Photography */

	.box-pt {
		margin: 0 auto;
		font-weight: 600;
		font-size: 16px;
		font-family: 'Krub', sans-serif;
		letter-spacing: 3px;
		color: #92278F;
	}

	.box-pl {
		border-style: solid; 
		border-width: 0.5px;
		color: #92278F;
	}

	/* Part C5 - Videography */

	.box-vt {
		margin: 0 auto;
		font-weight: 600;
		font-size: 16px;
		font-family: 'Krub', sans-serif;
		letter-spacing: 3px;
		color: #A67C52;
	}

	.box-vl {
		border-style: solid; 
		border-width: 0.5px;
		color: #A67C52;
	}







/* Part D - Hover Elements */

.myworkbox a {
	text-decoration: none;
}

.myworkbox:hover .myworktextbox {
	background-color: #0054A6;
	color: #fff;
	
	/* Fade In/Out */
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.myworkboxfeat:hover .myworktextbox {
	background-color: #0054A6;
	color: #fff;
	
	/* Fade In/Out */
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	/* Part D1 - Hover Elements - Graphics */

	.myworkbox:hover .box-gl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkbox:hover .box-gt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-gl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-gt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	/* Part D2 - Hover Elements - Architecture */

	.myworkbox:hover .box-al {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkbox:hover .box-at {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-al {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-at {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	/* Part D3 - Hover Elements - Technology */

	.myworkbox:hover .box-tl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkbox:hover .box-tt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-tl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-tt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	/* Part D4 - Hover Elements - Photography */

	.myworkbox:hover .box-pl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkbox:hover .box-pt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	.myworkboxfeat:hover .box-pl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-pt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	/* Part D5 - Hover Elements - Videography */

	.myworkbox:hover .box-vl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkbox:hover .box-vt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-vl {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.myworkboxfeat:hover .box-vt {
		color: #fff;
		
		/* Fade In/Out */
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}






/* Part E - Mobile Sizes */

@media only screen and (min-width: 1201px){
	
}
	
@media only screen and (max-width: 1125px){
	
	/* Part A - Main Boxes  */
	
	.myworkbox {
		width: 47%;
		float: left;
		padding: 1.5%;
		display: block;
		color: #000;
	}
	
	.myworkboxfeat {
		width: 47%;
		float: left;
		padding: 1.5%;
		display: block;
		color: #000;
	}
}
	
@media only screen and (max-width: 980px){
	
	/* Part A - Main Boxes  */
	
	.myworkbox {
		width: 47%;
		float: left;
		padding: 1.5%;
		display: block;
		color: #000;
	}
	
	.myworkboxfeat {
		width: 47%;
		float: left;
		padding: 1.5%;
		display: block;
		color: #000;
	}
	
	/* Part B - Sub Boxes  */
	
	.myworkimage {
		height: 300px;
	}
	
	.myworktextbox {
		height: 225px;
	}
	
	.myworktext {
		padding: 30px;
		font-size: 15px;
	}
	
	/* Part C - Sub Box Titles */
	
	h5 {
		font-size: 26px;
	}

		/* Part C1 - Graphics */

		.box-gt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 15px;
			font-family: 'Krub', sans-serif;
			letter-spacing: 3px;
			color: #ED1B24;
		}

		.box-gl {
			border-style: solid; 
			border-width: 0.5px;
			color: #ED1B24;
		}

		/* Part C2 - Architecture */

		.box-at {
			margin: 0 auto;
			font-weight: 600;
			font-size: 15px;
			font-family: 'Krub', sans-serif;
			letter-spacing: 3px;
			color: #F7941D;
		}

		.box-al {
			border-style: solid; 
			border-width: 0.5px;
			color: #F7941D;
		}

		/* Part C3 - Technology */

		.box-tt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 15px;
			font-family: 'Krub', sans-serif;
			letter-spacing: 3px;
			color: #197B30;
		}

		.box-tl {
			border-style: solid; 
			border-width: 0.5px;
			color: #197B30;
		}

		/* Part C4 - Photography */

		.box-pt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 15px;
			font-family: 'Krub', sans-serif;
			letter-spacing: 3px;
			color: #92278F;
		}

		.box-pl {
			border-style: solid; 
			border-width: 0.5px;
			color: #92278F;
		}

		/* Part C5 - Videography */

		.box-vt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 15px;
			font-family: 'Krub', sans-serif;
			letter-spacing: 3px;
			color: #A67C52;
		}

		.box-vl {
			border-style: solid; 
			border-width: 0.5px;
			color: #A67C52;
		}
}
	
@media only screen and (max-width: 736px){
	
	/* Part A - Main Boxes */
	
	.myworkbox {
		width: 100%;
		padding: 2% 0%;
	}
	
	.myworkboxfeat {
		width: 100%;
		padding: 2% 0%;
		display: block;
	}
	
	/* Part B - Sub Boxes */
	
	.myworkimage {
		width: 35%;
		float: left;
		height: 150px;
	}
	
	.myworktextbox {
		width: 65%;
		float: left;
		height: 150px;
	}
	
	.myworktext {
		padding: 20px;
		font-size: 14px;
	}
	
	/* Part C - Sub Box Titles */
	
	h5 {
		font-size: 20px;
		margin-bottom: -10px;
	}
	
		/* Part C1 - Graphics */

		.box-gt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 12px;
			margin-bottom: -5px;
		}

		.box-gl {
			display: none;
		}
	
		/* Part C2 - Architecture */

		.box-at {
			margin: 0 auto;
			font-weight: 600;
			font-size: 12px;
			margin-bottom: -5px;
		}

		.box-al {
			display: none;
		}
	
		/* Part C3 - Technology */

		.box-tt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 12px;
			margin-bottom: -5px;
		}

		.box-tl {
			display: none;
		}
	
		/* Part C4 - Photography */

		.box-pt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 12px;
			margin-bottom: -5px;
		}

		.box-pl {
			display: none;
		}
	
		/* Part C5 - Videography */

		.box-vt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 12px;
			margin-bottom: -5px;
		}

		.box-vl {
			display: none;
		}
}
	
@media only screen and (max-width: 480px){
	
	/* Part A - Main Boxes */
	
	.myworkbox {
		width: 100%;
		padding: 2% 0%;
	}
	
	.myworkboxfeat {
		width: 100%;
		padding: 2% 0%;
		display: block;
	}
	
	/* Part B - Sub Boxes */
	
	.myworkimage {
		width: 35%;
		float: left;
		height: 150px;
	}
	
	.myworktextbox {
		width: 65%;
		float: left;
		height: 150px;
	}
	
	.myworktext {
		padding: 15px;
		font-size: 13px;
	}
	
	/* Part C - Sub Box Titles */
	
	h5 {
		font-size: 18px;
		margin-bottom: -10px;
	}
	
		/* Part C1 - Graphics */

		.box-gt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 11px;
			margin-bottom: -5px;
		}

		.box-gl {
			display: none;
		}
	
		/* Part C2 - Architecture */

		.box-at {
			margin: 0 auto;
			font-weight: 600;
			font-size: 11px;
			margin-bottom: -5px;
		}

		.box-al {
			display: none;
		}
	
		/* Part C3 - Technology */

		.box-tt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 11px;
			margin-bottom: -5px;
		}

		.box-tl {
			display: none;
		}
	
		/* Part C4 - Photography */

		.box-pt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 11px;
			margin-bottom: -5px;
		}

		.box-pl {
			display: none;
		}
	
		/* Part C5 - Videography */

		.box-vt {
			margin: 0 auto;
			font-weight: 600;
			font-size: 11px;
			margin-bottom: -5px;
		}

		.box-vl {
			display: none;
		}
	
}