
body{
	position:relative;
}

/* TYPOGRAPHY */

h1, h2, h3, h4{
	font-family: dharma-gothic-e, sans-serif;
}

h2{
	font-size:3rem;
	font-weight: 400;
	letter-spacing:0.1em;

	text-transform:uppercase;
}


/* jumbo */

#home .jumbotron{
	background-size: cover;
	background-position: center center;
	padding-top: 20%;
    padding-bottom: 20%;
}

#jumbo-logo{
	background-image:url("/images/logo.png");
    height: 50%;
    width: 100%;
    position: absolute;
    z-index: 500;
    content: ' ';
	top:0px;
	margin-top:10.5%;
	background-position:center center;
	background-size: contain;
	background-repeat:no-repeat;
	left:0px;
}
main #home > .jumbo-wrapper{margin-top:60px;position:relative;}
.scrollspy{
	position: relative;

	overflow-y: scroll;
}

@media (max-width:575.98px){
	#home .jumbotron{
		padding-top: 30%;
		padding-bottom: 20%;
	}
	main #home > .jumbo-wrapper{margin-top:57px;} /* adjust for collapsed menu */
}
@media(max-width:1023.99px) AND (orientation:portrait){
	#home .jumbotron{
		padding-top: 50%;
		padding-bottom: 50%;
	}
	#jumbo-logo{
		margin-top:20%;
	}
}

/* building blocks */

.section {padding-top:3vw;margin-top:-2rem;}


.expand-button{display:none;margin-bottom:20px;}
@media (max-width:575.98px) AND (orientation:portrait){
	.expandable.min{
		max-height:200px;
		overflow:hidden;
		position:relative;
	}
	.expandable.min::after{
		content: " ";
		position:absolute;
		width:100%;
		display:block;
		height:200px;
		top:0px;
		-webkit-box-shadow: inset 0px -73px 32px -57px rgba(255,255,255,1);
		-moz-box-shadow:inset 0px -73px 32px -57px rgba(255,255,255,1);
		box-shadow: inset 0px -73px 32px -57px rgba(255,255,255,1);
	}
}

/* images */

.imageblock{
	margin-bottom: 30px; 
}

.imageblock .wrapper{
	background-image: url('"/web/images/400x400.gif"');
	padding-bottom: 75%; /* this controls the aspect ratio of the box */
	height: 0;
    position: relative;
    background-size: cover;
    background-position: center center;
    display: block;
    content: " ";
	background-repeat:no-repeat;
}



.polaroid{
	display:block;
	height: 0;
    position: relative;
    display: block;
    content: " ";
	background-color:#fffef4;
	padding:1vw;
	-moz-box-shadow:  0px 0px 3px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 20%);
    box-shadow: 0 0.2vw 1.2vw rgba(0,0,0,0.2);
	padding-bottom: 110%;
	transition: background-color 0.5s;
	transition: box-shadow 0.5s;
	margin-top: 4vw;
}

@media (min-width:1200px){
	.polaroid{
		padding:12px;
		padding-bottom: 110%;
		margin-top: 40px;
	}
}

.polaroid:hover{background-color:white;    box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.4);}


.polaroid.tilt1{transform: rotate(3deg);}
.polaroid.tilt2 { transform: rotate(-1deg);translate: -3px 0px;}
.polaroid.tilt3 {transform: rotate(2deg); }
.polaroid.tilt4 { transform: rotate(-3deg);translate: -1px 0px;}
.polaroid.tilt5 { transform: rotate(-1deg);translate: 2px 0px;}


.imageblock .polaroid .wrapper,.imageblock .wrapper.square{padding-bottom: 100%;}
.imageblock .wrapper.portrait{padding-bottom: 125%;}


.polaroid .wrapper{
	 /*grayscale for background image*/
      -webkit-filter: grayscale(0.3); 
      -webkit-filter: grayscale(30%); 
      -moz-filter: grayscale(30%);
      filter: grayscale(30%);
	transition: filter 0.5s;
}

.polaroid .wrapper:hover{ 
	 -webkit-filter:inherit; 
    -webkit-filter: inherit; 
    -moz-filter: inherit;
	filter:inherit;
}


.inset-shadow::before {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -moz-box-shadow: inset 0px 0px 3px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0px 0px 3px 1px rgb(0 0 0 / 10%);
    box-shadow: inset 0 0.2vw 1.2vw rgb(0 0 0 / 10%);
}

.polaroid .inset-shadow::before {
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0px 0px 10px 3px rgb(0 0 0 / 20%);
    box-shadow: inset 0px 0px 10px 5px rgb(0 0 0 / 20%);
}

@media (min-width:1200px){
	.polaroid{
		padding:12px;
		padding-bottom: 110%;
		margin-top: 40px;
		
	}
}



/* nav */

a.nav-link {  
	font-family: dharma-gothic-e, sans-serif;
	color: #555;
    font-weight: 400;
	letter-spacing:0.1em;
	transition: color 1s;
	text-transform:uppercase;
	font-size:1.2rem;
}
a.nav-link.active{
	color:black;
	background-color:inherit;
}

a.nav-link:hover{
	color:black;
}


/* icons */

.ri::before, [class^="ri-"]::before, [class*=" ri-"]::before {
    display: inline-block;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	background-size:contain;
	background-repeat:no-repeat;
	content: " ";
	height: 1.2em;
    width: 1.2em;
}

.ri-maps::before{
	background-image: url("/images/icons/location-pin.png");
}

.ri-x::before{
	background-image: url("/images/icons/x-twitter.svg");
}

.ri-facebook::before{
	background-image: url("/images/icons/facebook-f.svg");
}

.ri-instagram::before{
	background-image: url("/images/icons/instagram.svg");
}

.btn-light {
    color: #212529;
    background-color: #f3f5f6;
    border-color: #f3f5f6;
}

/* gmap embed */
@media (min-width:1200px){
	#gmap{height:100%;}
}
