/* Common CSS Rules */
@import "sgvo_common.css";

/* Menu CSS Rules */
@import "sgvo_menu.css";

/* Header CSS Rules */
@import "sgvo_header.css";


/* Trademark CSS Rules */
@import "sgvo_tm.css";


/* Demo CSS Rules */
@import "sgvo_demo.css";


/* Services CSS Rules */
@import "sgvo_services.css";


/* About CSS Rules */
@import "sgvo_about.css";


/* Studio CSS Rules */
@import "sgvo_studio.css";


/* Contact CSS Rules */
@import "sgvo_contact.css";


/* Footer CSS Rules */
@import "sgvo_footer.css";



/*	*************************************************************
	**                       HTML5 TAGS                        **
	************************************************************* */

header {
	align-items												: center;
	background												: var(--header-bg);
	box-shadow												: rgba(0, 0, 0, 0.45) 5px 5px 10px 0px;
	color													: var(--header-color);
	display													: grid;
	grid-template-columns									: 85px auto 85px;
	grid-template-rows										: auto;
	grid-template-areas:
		"hdr_logo hdr_tm hdr_nav"
		"hdr_contact hdr_contact hdr_contact";
	justify-items											: center;
	max-width												: var(--max-width);
	opacity													: 0.95;
	position 												: sticky;
		top													: 0;
	width													: 100%;
	z-index													: 1000;
}

header a {
	color													: #c5cfc8;
}

nav {
	align-items												: center;
	color													: #FFF;
	display													: flex;
	flex-direction											: row;
	grid-area												: hdr_nav;
	height													: 50px;
	justify-content											: end;
	padding													: 1em;
}



/*	*************************************************************
	**                      SECTION TAGS                       **
	************************************************************* */


/*	_____________________________________________________________
	Header Section Class Tags */

.sec_tm {
	background												: var(--tm-bg);
	color													: var(--tm-color1);
	display 												: none;
	height													: 2.5em;
}



/*	**********************************************************
	**                      MISC TAGS                       **
	********************************************************** */


.post button{
	background: #d6694d;
    border: none;
    border-radius: 5px;
    box-shadow: none;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 1rem;
    font-style: italic;
    line-height: 1rem;
    margin: 0.5rem;
    padding: 0.25rem;
    transition: box-shadow 0.3s;
}

.post button:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    padding: calc(0.25rem - 0px);
}



/*	**********************************************************
	**                    MEDIA QUERIES                     **
	********************************************************** */

@media (min-width: 600px) {

	header {
		grid-template-areas:
			"hdr_logo hdr_contact hdr_nav";
	}

}

@media (min-width: 780px) {

	header {
		grid-template-columns								: 85px auto;
		grid-template-rows									: auto;
		grid-template-areas:
			"hdr_logo hdr_nav"
			"hdr_logo hdr_contact";
	}

}