/* css */

/* X-Small devices (portrait phones, less than 576px)
/* No media query for `xs` since this is the default in Bootstrap
*/

/* Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {
	
	body, html {
		font-size: 18px;
	}
	h1 {
		font-size: 38px;

	}
	
	nav.navbar-light .navbar-brand {
		font-size: 20px;
	}	

	.content .row.orientation-left img[src$=".jpg"] {
		box-shadow: -20px 20px #F6C453;
		transition: all .4s ease;
	}
	
	.content .row.orientation-right img[src$=".jpg"] {
		box-shadow: 20px 20px #F6C453;
		transition: all .4s ease;
	}
	
	.content .row img[src$=".jpg"] {
		border: none;
	}
	
	.content .row > * {
		padding-right: calc(var(--bs-gutter-x) * .5);
		padding-left: calc(var(--bs-gutter-x) * .5);
	}
	
	section li.location {
		font-size: inherit;
	}
}
@media (max-width: 576px) { 
	.hero {
		padding: 40% 0 !important;
	}
	
	.hero h1{
		font-size: 26px !important;
	}
	
	.hero p{
		margin-bottom: 10px !important;
	}
	
	p{
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* Medium devices (tablets, 768px and up)
*/
@media (min-width: 768px) {

	.row.orientation-left {
		text-align: initial;
	}
	.row.orientation-right {
		text-align: right;
	}

	p {
		margin-bottom: 70px;
	}
		
}

/* Large devices (desktops, 992px and up)
*/
@media (min-width: 992px) {  }

/* X-Large devices (large desktops, 1200px and up)
*/
@media (min-width: 1200px) {  }

/* XX-Large devices (larger desktops, 1400px and up)
*/
@media (min-width: 1400px) { 
	.container {
		max-width: 1140px;
	}
}