/*
Theme Name: DanF
Theme URI: 
Author: Dan Floroian / Cristian Boldisor
Author URI: 
Description: Custom Wordpress theme for the website of the Jewish Community of Brasov.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: danf

This theme, like WordPress, is licensed under the GPL.

"We are the Borg. Lower your shields and surrender your ships. We will add your biological and technological distinctiveness to our own. Your culture will adapt to service us. Resistance is futile."
*/


/****************************************/
/* CSS VARIABLES
/****************************************/
:root {
	--background: rgba(0, 214, 170, .85);
	
	--link-color: #33a6f2;
	--link-hover-color: #75c8ff;
	
	--main-color: #33a6f2;
	--main-color-lighter: #75c8ff;
	
	--main-color-inv: #f9f9f9;
	--main-color-lighter-inv: #ffffff;
	
	--text-color: #0c3058;
	
	--lightgrey: #eee;
	--grey: #ddd;
	
	--darkgrey: #2a2f3a;
	--darkgrey-inv: #f9f9f9;
	
	--warning-color-lighter: #fff3cd;
	--warning-color: #ffdca5;
	
	--hot-color: #ff5722;
	--hotter-color: #f44336;
}
/****************************************/



/****************************************/
/* HTML ELEMENTS 						*/
/* including Eric Meyer’s CSS Reset 	*/
/****************************************/
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea,
header, nav, section, article, aside, figcaption, figure, footer /* HTML5 tags too */ {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
/*
:focus { 
	outline: 2px;
}
*/
html {
	height: 100%;
}
body { 
	height: 100%;
	overflow-x: hidden;
	font-family: 'Heebo', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
}
ol, ul { 
	/*list-style: none; */
}
a {
	color: var(--link-color);
	text-decoration: none;
	-webkit-transition: color 0.2s ease;
			transition: color 0.2s ease;
}
a:hover, 
a:active, 
a:focus {
	color: var(--link-hover-color);
}
h1,
h2,
h3,
h4 {
	margin: 1em 0 0.5em;
	line-height: 1.25em;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.6667em;
}
h3 {
	font-size: 1.125em;
}
h4 {
	font-size: 1em;
}
p {
}
p:not(:last-child) {
	margin-bottom: 1em;
}
img {
	max-width: 100%;
}
figure > img {
	display: block;
	max-width: 100%;
	height: auto !important;
}
b,
strong {
	font-weight: 700;
}
textarea{ 
	resize: none; 
	overflow: hidden; 
}
::-webkit-input-placeholder { color: inherit; -webkit-text-fill-color: initial; }
:-moz-placeholder 			{ color: inherit; -webkit-text-fill-color: initial; }
::-moz-placeholder 			{ color: inherit; -webkit-text-fill-color: initial; }
:-ms-input-placeholder 		{ color: inherit; -webkit-text-fill-color: initial; }
input:-internal-autofill-selected { background-color: #fefefe; }

@media screen and (min-width: 1200px) {
	h1 {
		font-size: 3em;
	}
	h2 {
		font-size: 2.5em;
	}
	h3 {
		font-size: 1.25em;
	}
	h4 {
		font-size: 1em;
	}
}

/****************************************/








/****************************************/
/* COMMON ELEMENTS
/****************************************/

/****************************************/




/****************************************/
/* SINGLE ELEMENTS
/****************************************/

/* site loader */
#site-loader {
	position: fixed;
	z-index: -9999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	opacity: 0;
	-webkit-transition: opacity 0.5s ease 0s, z-index 0s ease 0.5s;
			transition: opacity 0.5s ease 0s, z-index 0s ease 0.5s;
}
#site-loader.on {
	z-index: 9999;
	opacity: 1;
	-webkit-transition: opacity 0.5s ease 0s, z-index 0s ease 0s;
			transition: opacity 0.5s ease 0s, z-index 0s ease 0s;
}
.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	background: #fff url('img/logo-48x48.png') 50% 50% no-repeat;
}
.loader.loading .spinner {
	-webkit-animation: sk-rotateplane 2.4s infinite ease-in-out;
			animation: sk-rotateplane 2.4s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(240px) rotateY(0deg) }
	50% { -webkit-transform: perspective(240px) rotateY(0deg) }
	100% { -webkit-transform: perspective(240px) rotateY(360deg) }
}
@keyframes sk-rotateplane {
	0% { 
				transform: perspective(240px) rotateY(0deg);
		-webkit-transform: perspective(240px) rotateY(0deg);
	} 50% { 
				transform: perspective(240px) rotateY(0deg);
		-webkit-transform: perspective(240px) rotateY(0deg);
	} 100% { 
				transform: perspective(240px) rotateY(360deg);
		-webkit-transform: perspective(240px) rotateY(360deg);
	}
}

/*
@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(240px) }
	25% { -webkit-transform: perspective(240px) rotateY(180deg) }
	50% { -webkit-transform: perspective(240px) rotateY(180deg) rotateX(180deg) }
	75% { -webkit-transform: perspective(240px) rotateY(360deg) }
	100% { -webkit-transform: perspective(240px) rotateY(360deg)  rotateX(360deg) }
}
@keyframes sk-rotateplane {
	0% { 
				transform: perspective(240px) rotateX(0deg) rotateY(0deg);
		-webkit-transform: perspective(240px) rotateX(0deg) rotateY(0deg)
	} 25% { 
				transform: perspective(240px) rotateX(-180.1deg) rotateY(0deg);
		-webkit-transform: perspective(240px) rotateX(-180.1deg) rotateY(0deg)
	} 50% { 
				transform: perspective(240px) rotateX(-180deg) rotateY(-179.9deg);
		-webkit-transform: perspective(240px) rotateX(-180deg) rotateY(-179.9deg)
	} 75% { 
				transform: perspective(240px) rotateX(-360.1deg) rotateY(-179.9deg);
		-webkit-transform: perspective(240px) rotateX(-360.1deg) rotateY(-179.9deg)
	} 100% { 
				transform: perspective(240px) rotateX(-360deg) rotateY(-359.9deg);
		-webkit-transform: perspective(240px) rotateX(-360deg) rotateY(-359.9deg)
	}
}
*/

/****************************************/