/*
Theme Name: Slavic Village 
Theme URI: 
Description: For Slavic Village
Version: v1.0
Author: Todd Heckeler
Author URI: http://consumedesign.com
*/

@import "_fonts/stylesheet.css";

html *, body *
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-rendering: geometricPrecision;
	font-smooth: always;
	font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
}

html, body
{
	padding: 0px;
	margin: 0px;
	font-family: proxima_nova_alt_rgregular, Arial, Helvetica, sans-serif;
	color: #343434;
	background-color: #fff;
	letter-spacing: .1em;
}

b
{
	font-family: proxima_nova_alt_rgbold, sans-serif;
}

a
{
	text-decoration: none;
	color: #FF0000;
}

a.href-line { text-decoration: underline; }
a:hover { color: #333; }
:focus { outline: none; }

*
{
	margin: 0;
	padding: 0;
}

.clear-all { clear: both; }
.float-left, .alignleft { float: left; }
.float-right, .alignright { float: right; }
.align-right { text-align: right; }
.align-left { text-align: left !important; }
.align-center { text-align: center; }
.clickable:hover { cursor: pointer; }
.no-background { background-image: none !important; }

::-moz-selection
{
	background: #FF0000;
	color: #fff;
	text-shadow: none;
}

::selection
{
	background: #F99A02;
	color: #fff;
	text-shadow: none;
}

.menu li, .sub-menu li, .products li { list-style-type: none; }

.social-buttons
{
	display: block;
	width: 158px;
	text-align: center;
	overflow: hidden;
}

.social-button
{
	width: 16%;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

.social-buttons svg
{
	width: 100%;
	height: auto;
}

.social-buttons path, .social-buttons polygon { fill: #ffffff; }
.social-buttons a:hover path, .social-buttons a:hover polygon { fill: #12374A; }

.footer-content:after, .footer-buffer:after, .footer:after, .gallery:after, .staff-list:after, .content-container:after, .page-nav:after, .img-blocks:after, .news-events:after, .news-events-block:after, .home-blocks:after, .list:after
{
	content: '\00a0';
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


.nav-ribbon
{
	position: fixed;
	top: 100px;
	left: 0;
	z-index: 101;
	font-family: brothersot, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	color: white;
	width: 174px;
	letter-spacing: 0.03em;
	-moz-user-select: none; 
	-khtml-user-select: none; 
	-webkit-user-select: none; 
	-o-user-select: none;
}

.side-menu-active .nav-ribbon
{
	width: 350px;
}

.nav-ribbon:after
{
	content: '';
	border-top: 30px #ff3a1e solid;
	border-right: 18px transparent solid;
	border-bottom: 30px #ff3a1e solid;
	border-left: 20px #ff3a1e solid;
	display: block;
	position: absolute;
	top: 0;
	right: 2px;
	pointer-events: none;
}

.nav-ribbon:before
{
	content: '';
	position: absolute;
	top: 16px;
	right: 0;
	z-index: 101;
	pointer-events: none;
	-ms-transform: rotate(45deg) skew(12deg, 12deg);
	-webkit-transform: rotate(45deg) skew(12deg, 12deg);
	transform: rotate(45deg) skew(12deg, 12deg);
	width: 26px;
	height: 26px;
	border-top: 1px transparent solid;
	border-right: 1px transparent solid;
	border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
	border-left: 1px rgba(255, 255, 255, 0.5) solid;
}

.nav-ribbon:hover
{
	cursor: pointer;
}

.phone-menu
{
	width: 60px;
	height: 60px;
	background: rgb(208, 49, 26);
	float: left;
}

@media only screen and (min-width: 1401px)
{

	.nav-ribbon:hover span:nth-of-type(2) { 
		left: -17px;
		width: 40px;
	}
	
	.nav-ribbon:hover span:nth-of-type(1) { 
		transform: rotate3d(0,0,1,45deg);
		top: 2px;
		left: 6px;
		width: 20px;
	}
	
	.nav-ribbon:hover span:nth-of-type(3) { 
		transform: rotate3d(0,0,1,-45deg);
		top: -2px;
		left: 6px;
		width: 20px;
	}
}

.side-menu-active .phone-menu
{
	background: rgba(15, 73, 114, 1);
}

.site-title
{
	background: #ff3a1e;
	height: 60px;
	line-height: 60px;
	width: 90px;
    text-align: center;
	float: left;
	overflow: hidden;
	white-space: nowrap;
}

.side-menu-active .site-title
{
	width: 260px;
}

.nav-ribbon-reduced .site-title
{
	width: 10px;
}

.nav-ribbon-reduced
{
	width: 100px;
	top: 10px;
}


.phone-menu span {
	position: relative;
    top: 0;
	left: 0;
	width: 26px;
	height: 4px;
	background: #ff3a1e;
	display: block;
	margin: 4px auto 0 auto;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	opacity: 1;
}

.phone-menu span {
	background-color: #fff;
}

.phone-menu span:first-of-type
{
	margin-top: 18px;
}

.side-menu-active .phone-menu span:nth-of-type(2) { opacity: 0; }

.side-menu-active .phone-menu span:nth-of-type(1) { 
	background: rgba(255, 255, 255, 1);
	transform: rotate3d(0,0,1,-45deg);
	left: 0;
	top: 8px;
	width: 26px;
}

.side-menu-active .phone-menu span:nth-of-type(3) { 
	background: rgba(255, 255, 255, 1);
	transform: rotate3d(0,0,1,45deg);
	left: 0;
	top: -8px;
	width: 26px;
}


.side-menu-active .phone-menu
{
	background: rgb(208, 49, 26);
}

.side-menu-active .nav-ribbon:after
{
	border-top: 30px #ff3a1e solid;
	border-right: 18px transparent solid;
	border-bottom: 30px #ff3a1e solid;
	border-left: 20px #ff3a1e solid;
}

.menu-main-container, .sub-menu
{
	width: 300px;
	background-color: rgba(0, 137, 150, 0.95);
	position: fixed;
	top: 0;
	right: 100%;
	z-index: 100;
	margin-right: 0;
	height: 100%;
	overflow: hidden;
	background: #00899f;
	background: -moz-linear-gradient(top, #ffffff 0%,#ffffff 50px,#00899f 211px,#00899f 70%,#007984 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 50px,#00899f 211px,#00899f 70%,#007984 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50px,#00899f 211px,#00899f 70%,#007984 100%);
}

.menu-main-container:before
{
	content: '';
    background-image: url(images/svd-logo.svg);
    background-position: center 30px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 20px;
    width: 260px;
    height: 300px;
}

.side-menu .menu
{
	top: 180px;
	width: 100%;
	position: relative;
	padding-right: 20px;
	padding-left: 20px;
}

.side-menu-active .menu-main-container
{
	margin-right: -300px;
}

.menu-active
{
	margin-left: 300px;
}


.side-menu-active .nav-ribbon-reduced .site-title
{
	width: 300px;
}

.side-menu-active .nav-ribbon-reduced
{
	width: 390px;
	top: 100px;
}


.side-menu .menu li a
{
	width: 100%;
	display: block;
	padding: 14px 20px 14px 20px;
	font-size: 22px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .2em;
	text-align: center;
	border-bottom: 1px rgba(255, 255, 255, 0.2) solid;
	color: rgb(232, 213, 211);
	position: relative;
	z-index: 1002;
}

.menu li:hover
{
	cursor: pointer;
}

.side-menu .menu li a:hover
{
	color: #fff;
	background-color: rgba(15, 73, 114, 1);
	padding-left: 28px;
	display: block;
}

.side-menu .menu > li:first-of-type, .side-menu .sub-menu > li:first-of-type { border-top: 4px white double; }
.side-menu .menu > li:last-of-type, .side-menu .sub-menu > li:last-of-type  { border-bottom: 4px white double; }

.menu-item { position: relative; }

.sub-menu
{
	height: 100%;
	z-index: 2001;
	background-image: none;
	background: rgba(217,179,67,0);
	top: 180px;
	width: 290px;
}

.sub-menu-active {
    margin-right: -290px;
}

.sub-menu li { margin: 0 10px 0 10px; }


.side-menu .sub-menu li a
{
	font-size: 16px;
}

/* ////////////////////////// * FULL IMG * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.full-img
{
	display: block;
	width: 100%;
	height: 800px;
	position: relative;
	z-index: 1;

}

.full-img:before {
    content: '';
    display: block;
    position: absolute;
    background-image: url(images/svd-logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 25%;
    height: 140px;
    right: 0;
    top: 62px;
    z-index: 1001;
    background-color: rgba(255, 255, 255, 0.8);
}

.full-img-back
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.full-img span
{
	position: absolute;
	right: 5%;
	bottom: 0;
	width: 90%;
	border-top: 2px rgba(255, 255, 255, 0.2) solid;
	padding-top: 20px;
	padding-bottom: 40px;
	padding-left: 40%;
	z-index: 1002;
}

.full-img h1
{
	font-size: 2.25vw;
	color: white;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .6);
}

.full-img small
{
	font-size: 1vw;
	color: #ff3a1e;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, .6);
	margin-top: 10px;
	display: block;
}

.full-img-title
{
	width: 100%;
    text-align: right;
    font-size: 4vw;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 74px;
    right: 0;
    z-index: 1001;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 5%;
    background: rgba(255, 255, 255, 0.2);
}

/* ////////////////////////// * RIGHT MENU * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.right-menu
{
	width: 240px;
	position: fixed;
	top: 8%;
	right: 0;
    padding: 20px 60px 20px 20px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px 0px 0px 6px;
	-moz-border-radius: 6px 0px 0px 6px;
	-webkit-border-radius: 6px 0px 0px 6px;
	z-index: 101;
}

.donate
{
	display: inline-block;
	width: 100%;
	height: 34px;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 6px;
	text-align: center;
	margin-top: 6px;
	letter-spacing: .1em;
	background-image: url(../images/donate.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	overflow: hidden;
}

.donate:hover
{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.right-menu-reduced
{
	top: 10px;
	padding: 6px;
	width: 65px;
}

.right-menu-reduced .donate
{
	width: 34px;
	width: 100%;
	background-position: -4px center;
	background-size: auto 100%;
	margin-top: 0;
	background-color: #fff;
}


.right-menu-reduced:hover
{
	width: 140px;
	background-position: center center;
}

.right-menu-reduced .social-buttons { height: 0; }


/* ////////////////////////// * LIST & STAFF * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.list, .staff-list
{
	display: block;
	clear: both;
	padding: 40px 20px 40px 20px;
	border-bottom: 1px silver dashed;
	color: rgb(52,52,52);
}

.list, .staff-list { padding: 10px 20px 10px 20px; }

.list:hover
{
    color: #333;
    background-color: #f9f9f9;
}

.list:last-of-type, .staff-list:last-of-type
{
	border-bottom: 0;
}

.list img, .staff-list img
{
	float: left;
	margin-right: 40px;
	margin-bottom: 20px;
	width: 25%;
	max-width: 200px;
	height: auto;
}

.list p { font-size: 16px; }


.staff-list img
{
	margin-bottom: 0;
}

/* ////////////////////////// * SOCIAL * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.header .social-icons
{
	width: 180px;
	height: auto;
	position: absolute;
	top: 40px;
	right: 20px;
	border-bottom: 0;
}

.header-fixed .social-icons
{
	top: 0;
}

.social-icons
{
	display: block;
	width: 100%;
	text-align: center;
	border-bottom: 1px black solid;
}

.social-icon
{
	width: auto;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.footer .social-icon
{
	margin-bottom: 10px;
	margin-right: 10px;
}

.social-icons svg
{
	width: auto;
	height: 100%;
}

.social-icons path, .social-icons polygon {
	fill: #333;
}

.social-icons a:hover path, .social-icons a:hover polygon {
	fill: #FF0000;
}

/* ////////////////////////// * PAGES * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.page .full-img {
    height: 350px;
}

/*
.page .full-img:before {
	background-image: linear-gradient( rgba(15, 73, 114, 0.2), rgba(15, 73, 114, 0.5) );
}
*/

.page .full-img h1 {
    font-size: 4vw;
	text-align: right;
	letter-spacing: 6px;
}

.page .content
{
	position: relative;
}

.page .content-container
{
	padding: 60px 16% 60px 16%;
	font-size: 18px;
    line-height: 22px;
	position: relative;
}

.page .content-container p { margin-top: 20px; }

.content-container > h1
{
	font-size: 42px;
	line-height: 48px;
	text-transform: uppercase;
	letter-spacing: 6px;
	padding-bottom: 20px;
	margin-bottom: 40px;
	border-bottom: 1px silver solid;
	display: block;
	margin-top: 40px;
}

.content-container > h1:first-of-type
{
	margin-top: 0;
}

.content-container ul { padding: 40px; }
.content-container li
{
	margin-bottom: 20px;
}
.page .wp-post-image
{
	width: 34%;
	height: auto;
	margin-bottom: 20px;
	margin-left: 60px;
	float: right;
}

.page-nav
{
	background-color: rgba(15, 73, 114, 0.1);
	display: block;
	width: 100%;
	position: relative;
	padding: 20px 0 20px 0;
	margin-bottom: 40px;
}

.page-nav a
{
	display: block;
	padding: 20px;
	background-color: rgba(51, 51, 51, 0.8);
	color: #FFF;
	width: 40%;
	position: relative;
	font-size: 1.2vw;
}

a[rel~="prev"]
{
	float: left;
	margin-left: 3%;
}

a[rel~="next"]
{
	margin-right: 3%;
	float: right;
	text-align: right;
}

.page-nav a:hover {
    background-color: rgb(217, 179, 67);
    color: #565758;
}

.page-date
{
	font-size: 26px;
	color: silver;
	width: 100%;
	display: block;
	text-align: right;
	margin-bottom: 20px;
}


/* ////////////////////////// * gallery * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.gallery
{
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px gray dashed;
	border-bottom: 1px gray dashed;
}

.gallery img
{
	width: 23%;
	height: auto;
	float: left;
	margin: 1%;
}

/* ////////////////////////// * FOOTER * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.footer
{
	width: 100%;
	position: relative;
	background-color: #3e5164;
	overflow: hidden;
}

.footer:before
{
	content: '';
    display: block;
    width: 200px;
    height: 60px;
    position: absolute;
    background-image: url(images/svd-logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    right: 72%;
    margin-top: -50px;
    padding: 20px;
    background-color: white;
    border-radius: 6px;
}

.footer-content
{
	margin-right: 10%;
    width: 60%;
    z-index: 1;
    color: #fff;
    font-size: 13px;
    line-height: 14px;
    float: right;
}

.footer-content a
{
	color: #fff;
}

.footer-content a:hover
{
	color: rgb(255, 58, 30);
}

.footer-content div
{
	width: 100%;
	height: 120px;
}

.footer-content div:nth-child(1){ border-bottom: 1px rgba(255, 255, 255, 0.4) solid; }

.footer-content .menu { padding-top: 60px; }

.footer-content div li
{
	display: inline-block;
	position: relative;
}

.footer-content div li:after
{
	content: '';
	position: absolute;
	right: -4px;
	top: 0;
	width: 0;
	height: 100%;
	border-right: 1px rgba(255, 255, 255, 0.4) solid;
}

.footer-content div li:last-of-type:after { border-right: 0; }

.footer-content div li a
{
	display: block;
	padding: 10px 20px 10px 20px;
	font-size: 20px;
	text-align: center;
	text-transform: uppercase;
}

.footer-content div:nth-child(2) > span
{
	display: inline-block;
	width: 20%;
	min-width: 220px;
	margin-top: 20px;
	position: relative;
	height: 100px;
	vertical-align: top;
	padding: 10px;
}

.footer-content div:nth-child(2) > span:after
{
	content: '';
	position: absolute;
	right: 10px;
	top: 0;
	width: 0;
	height: 70px;
	border-right: 1px rgba(255, 255, 255, 0.4) solid;
}

.footer-content div:nth-child(2) > span:last-of-type:after { border-right: 0; }

.footer .social-buttons { margin-top: 10px; }

.footer .social-buttons path, .footer .social-buttons polygon {
    fill: #fff;
}

.footer .social-buttons a:hover path, .footer .social-buttons a:hover polygon {
    fill: rgb(255, 58, 30);
}

.footer-arrow
{
	position: absolute;
	top: 0;
	right: 0;
	width: 6%;
	height: 100%;
	display: block;
}

.footer-arrow:before
{
	content: '';
	position: absolute;
	top: -180px;
	left: 0;
	width: 600px;
	height: 600px;
	background-color: rgba(255, 255, 255, 0.2);
	-ms-transform: rotate(45deg) skew(12deg, 12deg);
	-webkit-transform: rotate(45deg) skew(12deg, 12deg);
	transform: rotate(45deg) skew(12deg, 12deg);

}

.footer-arrow:after
{
	content: '';
	position: absolute;
	top: 80px;
    left: -48px;
    width: 80px;
    height: 80px;
	-ms-transform: rotate(45deg) skew(12deg, 12deg);
	-webkit-transform: rotate(45deg) skew(12deg, 12deg);
	transform: rotate(45deg) skew(12deg, 12deg);
	border-top: 2px transparent solid;
	border-right: 2px transparent solid;
	border-bottom: 2px white solid;
	border-left: 2px white solid;
}

.footer-buffer {
    text-align: right;
    width: 100%;
    padding: 40px;
    background-color: rgba(255, 255, 255, 1);
}

.footer-buffer > span {
    width: 33%;
    display: block;
    padding: 20px;
    float: right;
    clear: both;
}

.footer-content div:nth-child(2) > .mailchimp { width: 30%; }

.mailchimp input
{
	display: inline-block;
	padding: 6px;
	border-radius: 2px;
	border: 0;
	background-color: white;
	margin-top: 2px;
}

.consumedesign
{
	clear: both;
	float: right;
	width: 5%;
	margin-right: 40px;
	height: 92px;
}

.consumedesign svg {
	margin-top: 40px;
	width: 60px;
	height: 26px;
}

.consumedesign path {
	fill: #535353;
}


.consumedesign:hover path {
	fill: #FF0000;
}

/* ////////////////////////// * EXTRAS * \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.page-nav *, .img-blocks *, .side-menu *, .side-menu, .right-menu *, .right-menu, .news-events *, .footer *, .social-icons *, .list {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 1279px)
{
	a
	{
		overflow-wrap: break-word;
		word-wrap: break-word;
		-ms-word-break: break-all;
		word-break: break-word;
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	
	p
	{
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.nav-ribbon
	{
		top: 0;
		position: absolute;
		z-index: 1001;
	}
	
	.footer-buffer, .mailchimp, .site-title, .nav-ribbon:before, .nav-ribbon:after, .menu-main-container:before, .news-events:before, .img-blocks, #google_translate_element, .footer-arrow, .menu-footer-container, .footer-content div:nth-child(1)
	{
		width: 0 !important;
		height: 0 !important;
		display: none !important;
		content: none !important;
		border: 0 !important;
	}
	
	.full-img:before
	{
		top: 0;
		width: 100%;
		background-position: center right;
		background-size: auto 80%;
		height: 60px;
	}
	
	.menu-main-container, .sub-menu
	{
		width: 100%;
		background: #00899f;
		top: 58px;
		overflow: visible;
	}
	
	.side-menu-active .menu-main-container, .sub-menu-active { margin-right: -100%; }
	.side-menu .menu { top: 10px; }
	.full-img { height: 400px; }
	.news-events-block, .events a { width: 95% !important; }
	.news-events-block { padding: 30px 10px 30px 10px; }
	
	.footer:before
	{
		position: relative;
		top: 24px;
		right: auto;
		left: 5%;
		margin-top: 0;
		margin-left: 0;
		width: 80%;
		padding: 10px;
	}
	
	.footer { padding-bottom: 60px; }
	

	.footer-content
	{
			margin-right: 0;
			width: 100%;
			float: none;
	}

	.footer-content div
	{
		height: auto;
	}
	
	.footer-content div:nth-child(2) > span
	{
		position: relative;
		height: auto;
		min-width: auto;
		width: 100%;
		padding: 20px 10% 0 10%;
		margin-top: 0;
	}
	
	
	.footer-content div:nth-child(2) > span:nth-child(1) {
		margin-top: 34px;
 }


	
	.footer-content div:nth-child(2) > span:after {
     border-right: 0 rgba(255, 255, 255, 0) solid;
}
	
	.footer-content div > span
	{
		width: 100%;
	}
	
	
	.page .content-container
	{
		padding: 10px 16% 10px 16%;
		font-size: 14px;
		line-height: 20px;
	}
	
	.content-container > h1
	{
		font-size: 32px;
		line-height: 36px;
		margin-top: 40px;
	}
	
	.page .content-container img
	{
		width: 90%;
		float: none;
		height: auto;
		margin: 10px 5% 10px 5%;
	}
}