/*

Theme Name: Portfolio Site

Author: Jack Frey

Description: This is the theme I made for my portfolio site.

Version: 0.0.1

Tags: bootstrap

*/



/* =WordPress Core

-------------------------------------------------------------- */

.alignnone {

    margin: 5px 20px 20px 0;

}



.aligncenter,

div.aligncenter {

    display: block;

    margin: 5px auto 5px auto;

}



.alignright {

    float:right;

    margin: 5px 0 20px 20px;

}



.alignleft {

    float: left;

    margin: 5px 20px 20px 0;

}



a img.alignright {

    float: right;

    margin: 5px 0 20px 20px;

}



a img.alignnone {

    margin: 5px 20px 20px 0;

}



a img.alignleft {

    float: left;

    margin: 5px 20px 20px 0;

}



a img.aligncenter {

    display: block;

    margin-left: auto;

    margin-right: auto

}



.wp-caption {

    background: #fff;

    border: 1px solid #f0f0f0;

    max-width: 96%; /* Image does not overflow the content area */

    padding: 5px 3px 10px;

    text-align: center;

}



.wp-caption.alignnone {

    margin: 5px 20px 20px 0;

}



.wp-caption.alignleft {

    margin: 5px 20px 20px 0;

}



.wp-caption.alignright {

    margin: 5px 0 20px 20px;

}



.wp-caption img {

    border: 0 none;

    height: auto;

    margin: 0;

    max-width: 98.5%;

    padding: 0;

    width: auto;

}



.wp-caption p.wp-caption-text {

    font-size: 11px;

    line-height: 17px;

    margin: 0;

    padding: 0 4px 5px;

}



/* Text meant only for screen readers. */

.screen-reader-text {

	clip: rect(1px, 1px, 1px, 1px);

	position: absolute !important;

	height: 1px;

	width: 1px;

	overflow: hidden;

}



.screen-reader-text:focus {

	background-color: #f1f1f1;

	border-radius: 3px;

	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);

	clip: auto !important;

	color: #21759b;

	display: block;

	font-size: 14px;

	font-size: 0.875rem;

	font-weight: bold;

	height: auto;

	left: 5px;

	line-height: normal;

	padding: 15px 23px 14px;

	text-decoration: none;

	top: 5px;

	width: auto;

	z-index: 100000; /* Above WP toolbar. */

}



/* =Theme Styles

-------------------------------------------------------------- */

html, body {

    height: 100%;

}

img {

    max-width: 100%;

}

#header {
	background-color: #1a4682;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#site-title {
	font-family: 'Ubuntu Mono', monospace;
	font-size: 4.5rem;
	font-weight: 400'Ubuntu Mono', monospace;;
    color: white;
	margin: 0 auto;
	word-spacing: -0.6rem;
}

#portfolio {
	margin-top: -2rem;
}

.btn-primary {
	background-color: #555555;
    border-color: #555555;
}

.btn-primary:hover {
	background-color: #333333;
    border-color: #333333;
}

#about-me {
	background: #f2f2f2;
}

#footer {
	text-align: center;
	color: white;
	background: #1a4682;
    padding: 1rem;
}

.content-padding {
    padding: 3rem 0;
    overflow: hidden;
}

.card-block {
	padding-bottom: .5rem;
}

.card-title, .modal-title, .section-title {
	font-family: 'Montserrat', sans-serif;
}

.card-subtitle, .modal-subtitle {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}

@keyframes card-fade-in {
    from {opacity: 0.0;}
    to {opacity: 1.0;}
}

.card {
	margin-top: 2rem;
	animation-name: card-fade-in;
    animation-duration: 4s;
}

.card:hover {
	box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
}

.card-img-top {
	min-width: 100%;
}

.modal-title {
	line-height: 1;
}

.modal-subtitle {
	font-size: 1rem;
}

.center-vertical {
	display: flex;
	align-items: center;
}

#contact-me a {
    color: #333;
}

#escapeRoom {
margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.modal-dialog {
		max-width: 80%;
	}
	
	.card-img-top {
		height: 118px;
	}
}

@media (min-width: 992px) {
	.card-img-top {
		height: 164px;
	}
}

@media (min-width: 1200px) {
	.card-img-top {
		height: 198px;
	}
}

@media (max-width: 991px) {
	.modal-body img {
		max-height: 350px;
	}
}

@media (max-width: 767px) {
	#showMore, #showLess {
	font-size: 1.3rem;
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #333;
    text-align: center;
    margin-top: 1rem;
	}
	
	.card {
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.card-img-top {
		max-height: 294px;
	}
	
	.modal-body img {
		max-height: 200px;
	}
}

@media (min-width:576px) and (max-width:767px) {
	.card {
		min-width: 510px;
	}
}