@charset "utf-8";
/* CSS Document */
body{
	background-color: #282828 ;
	color: #ffffff;
	margin: 0;
	
}
.navBar{
	position: fixed;
	width: 100%;
	text-transform: uppercase;
	height: 56px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	z-index: 1;
	background-color: #282828 ;
	color: #ffffff;
}

.namecard{
	padding-left: 16px;
	padding-right: 20px;
	font-family: 'Cabin', arial, sans-serif;
	
}
.namecard h1{
	letter-spacing: 1px;
	
}
.navLinks{
	padding-right: 16px;
	display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
	font-family: Lato, arial, sans-serif;
}

.page-card{
	padding: 10px;
}
.page-card:hover{
	padding: 10px;
	font-size:x-large;
}

.page{
	padding-top: 56px;
	font-family: Lato, arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items:center;
}

.block{
	display: flex;
	justify-content: center;
	max-width:1333.3px ;
	min-width: 300px;
}
.container{
	display: flex;
	margin-bottom:5%;
	max-width:1333.3px;
}


.center-image-section{
	position: relative;
	display: flex;
	justify-content: center;
}

img.center-image{
	
	width:90%;
	height: auto;
	
	
}

.overlay-left{
	position: absolute;
	top: 50%;
	left: 5%;
	font-size: 30px;
	padding: 10px 16px;
	width:25%;
	height: 5%;
	text-transform: uppercase;
	color: #282828;
	background-color: #ff0000;
	white-space: nowrap;
	
}

.left-overlay-text{
	font-size: 30px;
	margin: 0;
	vertical-align: middle;


}

@media only screen and (max-width: 1026px) {
	.left-overlay-text{
		font-size:20px;
		margin: 0;
		vertical-align: middle;
		
	
	}

}
@media only screen and (max-width: 500px) {
	.left-overlay-text{
		font-size:15px;
		margin: 0;
		vertical-align: middle;
		
	
	}

}
@media only screen and (max-width: 350px) {
	.left-overlay-text{
		font-size:12px;
		margin: 0;
		vertical-align: middle;
		
	
	}

}

/* call section start 
add a bigger one without fill in background then add border */
.block-start{
	background-color: #F5F5F5;
	color: #000000;
	text-transform: uppercase;
	padding: 10px 16px;
	font-size: 30px;
}


@media only screen and (max-width: 1026px) {
	.block-start{
		font-size: 17px;
	}

}
@media only screen and (max-width: 500px) {
	.block-start{
		font-size: 13px;
	}

}
@media only screen and (max-width: 350px) {
	.block-start{
		font-size: 11px;
	}

}







.side-image-section{
	position: relative;
	display: flex;
	justify-content: center;
}

.side-image{
	width:40%;
	height: auto;
	margin: 0 5%;
	
	
}

.side-text-box{
	width:30%;
	height: auto;
	margin: 5%;
	font-size: 30px;
	text-align: center;
	align-self: center;

}
@media only screen and (max-width: 1083px) {
	.side-text-box{
		font-size:25px;
		
		
		
	
	}

}
@media only screen and (max-width: 907px) {
	.side-text-box{
		font-size:20px;
		width: 90%;	
	}
	.side-image-section{
		flex-direction: column;
	}
	.side-image{
		align-self: center;	
	}

}
@media only screen and (max-width: 500px) {
	.side-text-box{
		font-size:15px;	
	}

}
@media only screen and (max-width: 350px) {
	.side-text-box{
		font-size:12px;
	}

}


.col-image-section{
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.col-image{
	width:40%;
	height: auto;
	margin: 0 5%;
	align-self: center;	
	
}

.col-text-box{
	width: 90%;	
	height: auto;
	margin: 5%;
	font-size: 30px;
	text-align: center;
	align-self: center;

}
@media only screen and (max-width: 1083px) {
	.col-text-box{
		font-size:25px;
		
		
		
	
	}

}
@media only screen and (max-width: 907px) {
	.col-text-box{
		font-size:20px;
		
	}

}
@media only screen and (max-width: 500px) {
	.col-text-box{
		font-size:15px;	
	}

}
@media only screen and (max-width: 350px) {
	.col-text-box{
		font-size:12px;
	}

}


.three-part-text-section{
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 350px;
	text-align: center;
	
}

.three-part-text-row{
	position: relative;
	display: flex;
	justify-content:center;
	flex-direction: row;
	flex-wrap: wrap;
	
}
.skill-list{
	
	font-size: 25px;
	margin-bottom: 20px;

}
.large-list-item{
	padding-bottom: 3%;
}


.mini{
	margin: 3px 0;
}

.normalize-list{
	list-style-type: none;
	padding: 0;
	margin:0;
}
.normalize-li{
	
	padding: 0;
	margin:0;
}




.large-text-box{
	width: 100%;	
	height: auto;
	
	font-size: 30px;
	text-align: center;
	align-self: center;

}
@media only screen and (max-width: 1083px) {
	.large-text-box{
		font-size:25px;
		
		
		
	
	}

}
@media only screen and (max-width: 907px) {
	.large-text-box{
		font-size:20px;
		
	}

}
@media only screen and (max-width: 500px) {
	.large-text-box{
		font-size:15px;	
	}

}
@media only screen and (max-width: 350px) {
	.large-text-box{
		font-size:12px;
	}

}