/*
Theme Name:   Smiley Guy Studios
description:  
Author:       Skribbs/Lagoo
Template:     twentyseventeen
Version:      1.0.0
*/

html {
	height: 100%;
	margin: 0;
	padding: 0;

	font-size: 14pt;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	min-height: 100%;
	background-attachment: fixed;
	background-repeat:repeat;
}

li{
    list-style-position: inside;
}

.yellowback {
	color: #2c5b69;
	border-radius: 4px;
	background-color: #f8e8d9;
	box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
	padding: 10px;

}

#sgs-video iframe{
    width:100%;
    height:350px;
}

.yellowback .textwidget p{
    margin:0.5em;
    font-size:0.8em;
}

.yellowback .widget-title{
    font-size:1em;
}

#page {
	position: relative;
	/* needed for footer positioning*/
	background: #f0f0f0;
	/* real browsers */
	height: 100%;
	/* IE6: treaded as min-height*/
	min-height: 100%;
	/* real browsers */
}

.default #page,
.home #page {
	background: transparent;
}

.news #page {
	background: transparent;
}

* {
	font-family: "Quicksand", sans-serif;
}

.custom-header-media:before {
	height: 100%;
	background: none;
}

.navigation-top .wrap {
	position: fixed;
	max-width: 100%!important;
	padding: 0.75em 0;

	background-color: #FFF;
}

.navigation-top a {
/*    font-weight:normal;*/
/*    font-family: "Quicksand", sans-serif;*/
}

.navigation-top {
	position: fixed;
	z-index: 999!important;
	top: 0;
	right: 0;
	height: 1rem;
	padding-right: 3rem;
	width: auto;
	background: none;
	border: none;
    font-size:smaller;
}

.custom-logo-link {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width:225px;
	height: 3rem;
	z-index: 1002;
	padding: 5px;
	padding-left: 3rem;
	background-color: #FFF;
}

.custom-logo-link img {
	max-width: 100%!important;
	max-height: 100%!important;
}

.menu-toggle {
	width: 100%;
	margin: 0 auto;
	height: 3rem;
}

.main-navigation > div > ul {
	float: right;
}

.sow-contact-form-success{
    
}

.main-navigation a {
	padding: 0.25em 0.5em;
}
.main-navigation a.icon{max-width:20px; max-height:20px; cursor: pointer; margin: 0 10px -4px 10px; background-repeat:no-repeat; background-size:contain; background-position: center center;}
.main-navigation a.icon#facebook{background-image:url(images/facebook-dark.png);}
.main-navigation a.icon#twitter{background-image:url(images/twitter-dark.png);}
.main-navigation a.icon#facebook:hover{background-image:url(images/facebook-salmon.png);}
.main-navigation a.icon#twitter:hover{background-image:url(images/twitter-salmon.png);}

.main-navigation {
	background-color: #FFF;
}

.main-navigation a:hover,
.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a{
color:#f16265;
}


.js .main-navigation.toggled-on > div > ul {
	display: block;
	text-align: center;
	margin-top: 0;
	float: right;
}

.widget-title{font-weight:700;}
.gm-style .place-card-large,
.place-card, .place-card-large{display:none!important;}
.site-content {
	padding: 0;
	margin: 0;
}

.site-info {
	text-align: center;
	float: none;
	width: 100%;
    padding:0.2em;
    margin-bottom:0;
}

.site-header {
	z-index: 9999;
	position:absolute;
}

.site-footer {
	position: fixed;
	z-index: 9999;
	bottom: 0;
	left: 0;
	width: 100%;
/*	height: 3rem;*/
	text-align: center;
	margin: 0;
	padding: 0;
	background-color: #FFF;
    border-top:0;
}

.site-footer .wrap {
	padding: 0;
}

.site-content-contain {
	margin: 0 3rem;
}

.site-branding {
	display: none;
}


#band1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 3rem;
	height: 100vh;
	background-color: #FFF;
	z-index: 10050;
}

#band2 {
	position: fixed;
	top: 0;
	right: 0;
	width: 3rem;
	height: 100vh;
	background-color: #FFF;
	z-index: 10050;
}
#band3{
	position:fixed; top:0; left:0; width:100vw; height:3rem; background-color:#FFF; z-index:1000;
}

.home-wrapper .popuptext {
	box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	width: 30%;
	min-height: 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
	color: #2c5b69;
	background-color: #f8e8d9;
	position: absolute;
	bottom: 50%;
	left: 50%;
	margin-bottom: -6%;
	margin-left: -10%;
}

.home-wrapper .popuptext p {
	margin: 10px;
	padding: 0;
}

.home-wrapper {
	position: fixed;
	top: 3rem;
	z-index: 1000;
	width: calc(100% - 2rem);
	height: calc(100% - 3rem);
	margin: 0 -2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#default-wrapper,
#contact-wrapper {
	margin: 3rem;
	position: absolute;
	text-align: center;
	justify-content: center;
	align-items: center;
	display: grid;
	width: calc(100% - 6rem);
	height: 100%;
}

.panel-layout {
	margin: 3rem auto;
	padding: 0 3rem 3rem 3rem;
}

.so-panel {
	padding: 0;
	margin: 0 auto;
}



#map-container {
	width: 140vw;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
}

#map-container iframe {
	width: 100%!important;
	height: 100%!important;
	position: relative;
	top: 0!important;
	left: 0!important;
}

#contact-info {
	z-index: 10;
	position: absolute;
	left: 20px;
	width: 50vw;
	max-width: 600px;
}


#contact-info form {
	padding: 20px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #2c5b69;
	background-color: #f8e8d9;
	box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	margin: 0 50px 50px 0;

}

#contact-info form input,
#contact-info form textarea {
	font-size: 1.1rem;
	font-weight: 700;
	font-family: 'Quicksand',sans-serif;
	resize: none;
}

#contact-info form button {
	margin: 20px auto 0;
	text-align: center;
	display: block;
	border-radius: 5rem;
}

#custom_contact_form{
/*    background-color: #f8e8d9;*/
    padding: 20px;
}
#custom_contact_form form{
/*    background-color: #f8e8d9;*/
}

#custom_contact_form form button {
	margin: 20px auto 0;
	text-align: center;
	display: block;
	border-radius: 5rem;
}

#contact-info form h1 {
	font-size: 14pt;
	font-weight: 700;
	text-align: center;
}

#contact-info form br {
	display: none;
}

#contact-info form label {
	margin-bottom: 0;
	font-size: 1.0rem;
	color: #2c5b69;
}


.sow-contact-form-success{
    padding: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c5b69;
    background-color: #f8e8d9;
    box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin: 0 50px 50px 0;
    border: #c0c0c0 solid 1px;
}

.sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper > * {
	margin-bottom: 0;
	height: 200px;
	max-width: 100%;
	object-fit: contain;
}

#award-title{
	margin-bottom:-50px; padding-bottom:0;
}

#awards2 ul{
	list-style-type: none;
	display:grid;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	grid-template-columns: 1fr 1fr 1fr;
}
.widget ul li, .widget ol li{
	border:none!important;
}
@media (max-width:992px) {
	#map-container iframe {
		width: 100vw!important;
		position: fixed!important;
		margin-bottom: 3rem;
	}
	#contact-info {
		position: relative;
		width: 90vw;
	}
	#contact-info form {
		margin-top: 50vh;
		margin-bottom: 3rem;
	}


}

/* PROJECT */

.hero-wrap {
	width: calc(100% - 6rem);
	margin: 0 3rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 100%;
	align-content: stretch;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 100%;
}


.project-wrapper {
	height: calc(100% - 6rem);
	margin: 3rem 0 0 0;
}

.project-wrapper .panel-layout {
	margin: 0;
	padding: 0;
}

#hero-image {
	position: fixed;
	top: 3rem;
	left: 3rem;
	width: calc(50% - 3rem);
	height: calc(100% - 4rem);
	display: block;
}

#hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#hero-image .gradient {
	position: absolute;
/*	display: none;*/
	z-index: 100;
	width: 25%;
	height: 100%;
	top: 0;
	right: -30px;
}
.skribbs #hero-image .gradient {
	display: none;
}

#hero-content {
	margin-bottom: 3rem;
    margin-top:2rem;
	padding: 40px 80px;
	padding: 40px;
}

.nofi #hero-content {
	max-width: 800px;
	margin: 0 auto;
}

#hero-content .logo {
	margin: 0 auto;
	text-align: center;
/*	width: 500px;*/
	height: 300px;
	max-width: 100%;
	display: block;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#hero-content .logo img{
	max-width:100%; max-height:100%;
}

#hero-content .blurb {
	font-weight: 700;
	padding: 30px 50px;
	font-size: 1.2rem;
	text-align: center;
}

#news-wrapper {
	margin: 3rem;
	padding: 5rem 5vw;
}
#news-wrapper {
	margin: 3rem;
	padding: 2rem 0rem;
}
.news-wrap {
    position:relative;
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.news-link.prev{
    background-color: #f8e8d9;
    position: absolute;
    right: 0px;
    bottom: 0px;
    border-radius: 3px;
    margin: 10px;
}

.news-link.next{
    background-color: #f8e8d9;
    position: absolute;
    left: 0px;
    bottom: 0px;
    border-radius: 3px;
    margin: 10px;
}

.spacer{
    padding:30px;
}


@media(max-width:935px) {
	.news-wrap {
		grid-template-columns: auto;
	}
}

.news-wrap .news-item {
	margin: 10px;
	grid-row-end: span 1;
}

.news-wrap .news-item.has-image {
	margin-top: 15%!important;
	grid-row-end: span 2;
}

.news-item .news-content {

	color: #2c5b69;
	border-radius: 3px;
	background-color: #f8e8d9;
	box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.news-item img {
	width: calc(100% - 40px);
	height: auto;
	z-index: 5;
	margin: -15% 20px -10px 20px;
}

.news-item h1, .news-link h1 {
	margin: 0;
	padding: 0;
	color: #2c5b69;
	font-weight: 700;
	font-size: 14pt;
	padding: 1rem;
	text-align: center;
}

.news-item .date {
	text-align: right;
	display: block;
	font-weight: 700;
	font-size: 10pt;
	opacity:0.65;
	padding:5px;
}

#projects-wrapper {
	margin: 3rem;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	grid-template-rows: 1fr 1fr 1fr;
	align-content: stretch;
	align-items: center;
	justify-content: stretch;
	background-color: #FFF;
}

#projects-wrapper a {
	position: relative;
}

#projects-wrapper a:hover > .project-thumb {
	opacity: 1;
	border: 20px solid #FFF;

	-webkit-transition: all 0.25s;
	/* Safari */
	transition: all 0.25s;

}

#projects-wrapper a .project-thumb {
	display: flex;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	font-weight: 700;
}

#projects-wrapper a .project-thumb .logo {
	padding-bottom: 10px;
	margin-bottom: 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	height: auto;
	width: auto;
	max-height: 140px;
	max-width: 200px;
	position: relative;
	object-fit: contain;
}

#projects-wrapper img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}



.gallery{text-align:center; display:grid; align-items:center; justify-content: center; grid-template-columns: 1fr 1fr 1fr; grid-gap:5px;}

.gallery-item{
		margin: 0;
		padding: 0!important;
		max-width: 100%!important;
		width: 100%;
		border: none;
		outline: none;
		display:block;
		text-align:center;
}
.gallery-item .gallery-icon{
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
}
.gallery-item .gallery-icon a{
	box-shadow: none;
		background: none;
		display: block;
		max-width: 100%;
		border: none;
		margin: 0;
		padding: 0;
}
.gallery-item a img{display: block;
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow:none!important;
	margin:0;padding:0;
}


.go_back{
    right:55px;
    z-index:99;
    padding:10px;
    font-size:1rem;
    font-weight: 600;
    text-transform:lowercase;
    position:absolute;
    display:none;
}

.entry-content a img, .comment-content a img, .widget a img{
	box-shadow: 0 0 0 3px #fff;
}

@media (max-width:1200px) {
	#projects-wrapper {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/*
@media(max-width:1100px) {
    .spacer{
        padding:20px;
    }
}
@media(max-width:1028px) {
    .spacer{
        padding:0px;
    }
}
*/


@media(max-width:1000px) {
	.home-wrapper .hero {
		position: relative;
		top: 0;
		left: 0;
		display: block;
		margin: 0;
		padding: 0;

	}
	.home-wrapper .popuptext {
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
		width: calc(100% - 2rem);
		z-index: 10000;
	}

	.hero-wrap {
		grid-template-rows: 55vw 50%;
		grid-template-columns: 100%;
		margin: 5vw;
		width: calc(100% - 10vw);
	}


	.panel-layout {
		margin: 5vw 5vw;
		padding: 0 3rem 3rem 3rem
	}
	.panel-layout {
		margin: 2rem 0 5rem 0;
		padding: 0rem;
}

	#hero-image {
		position: relative;
		margin: 0;
		width: 95vw;
		height: calc(100% - 6rem);
		padding: 0;
		top: 0;
		left: 0;
	}
	.skribbs #hero-image {
		position: relative;
		margin: 0;
		width: 95vw;
		height: 50%;
		padding: 0;
		top: 0;
		left: 0;
	}
	#hero-image .gradient {
		display: block;
		bottom: 0;
		top: auto;
		height: 120px;
		left: 0;
		width: 100%;
	}
	#hero-content {
		margin-bottom: 0rem;
		padding-top: 0;
		z-index: 3000;
	}

	.nofi #hero-content {
		padding: 50px 20px;

	}

	#hero-content .logo {
		margin-top: -15vw;
	}
}

@media (max-width:805px) {
	li.social.menu-item-object-page{
		padding:10px;
	}
	li.social.menu-item-object-page a{
		text-align:center;
		margin:0 auto;
	}	
	.site-header{background-color:#FFF; height:3rem;}
	.navigation-top{padding-right:2rem;}
	#band1,
	#band2 {
		max-width: 3rem;
		width: 5vw;
	}
	#projects-wrapper {
		grid-template-columns: 1fr 1fr;

		margin: 5vw;
	}
}

@media (max-width:768px) {
	.custom-logo-link {
		left: 0px;
        max-width:none;
		z-index: 998;
		background-color: #FFF;
	}
	.navigation-top .wrap{
		padding:0;
	}
}

@media (max-width:600px) {
	#projects-wrapper {
		grid-template-columns: 1fr;
	}
}