/*
Theme Name: Jakoda Faiskola
Theme URI: http://www.jakodafaiskola.hu/
Description: A Jakoda Faiskola weboldalának alapértelmezett sablonja
Author: Digitalform
Author URI: https://digitalform.hu/
Version: 3.0
*/


*{
margin: 0;
padding: 0;
border: 0;
text-decoration: none; 
list-style: none;
}
*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { font-family: 'PT Serif', serif; font-size: 17px; font-weight: 400; color: #666; background: url(images/bgr_body.png) repeat; }
body.rwd_menu__opened { overflow: hidden; }

input, button, select, textarea { font-family: 'PT Serif', serif; font-size: 16px; font-weight: 400; outline: none; }
input[type=submit], button { cursor: pointer; }
textarea { resize: vertical; }

h1, h2, h3, h4 { font-weight: 400; line-height: 100%; }
blockquote { margin-bottom: 20px; padding-left: 30px; font-size: 30px; color: #1f2831; line-height: 35px; border-left: 2px solid #c0241a; }
blockquote p:last-child { margin-bottom: 0 !important; }

hr { height: 20px; margin-bottom: 40px; border-bottom: 4px double #e4ddd0; clear: both; }

/*
-----------------
	CLASSES
-----------------
*/
.website { position: relative; }
.inner { max-width: 1300px; margin: auto; position: relative; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.t_a_c { text-align: center; }
.b_r_3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.uppercase { text-transform: uppercase; }
.vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.hide { display: none; }
.red { color: red; }
.decor { width: 100%; height: 25px; background: url(images/decor_white_bottom.png) no-repeat bottom center; }


/* Buttons */
.button { height: 60px; padding: 0 30px; font-size: 18px; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0,0,0,0.2); text-decoration: none !important; color: white !important; line-height: 60px; background: #669416; display: inline-block; position: relative; }
.button:hover {  z-index: 2; }
.button:before { width: 100%; height: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.1); position: absolute; content: ''; }
.button:hover:before { height: 100%; z-index: -10; }

/* Image classes */
.alignleft { margin: 0 20px 5px 0; float: left; }
.alignright { margin: 0 0 5px 20px; float: right; }
.aligncenter { margin: 0 auto 20px auto; display: block; }

/* Font */
:after, :before { font-family: 'fontello', sans; -webkit-font-smoothing: antialiased; }
.rubik { font-family: 'Archivo Black', sans-serif; }

/* Animation */
.anim { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.anim_long { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.anim_extra_long { -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; }
:before, :after, .anim_cubic { -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }


/*
----------------
	RWD MENU
----------------
*/
#rwd_menu { width: 100%; height: 0; left: 0; bottom: 0; text-align: center; background: #4e7111; position: fixed; z-index: 100; overflow: hidden; }
#rwd_menu ul { padding: 50px;  }
#rwd_menu ul li { border-bottom: 1px solid rgba(255,255,255,0.2); }
#rwd_menu ul li:last-child { border-bottom: none; }
#rwd_menu ul li a { padding: 10px 0; font-size: 45px; color: white; display: block; }
body.rwd_menu__opened #rwd_menu { height: auto; height: calc(100vh - 80px); overflow: auto; }


/*
----------------
	HEADER
----------------
*/
#header { height: 80px; background: white; position: relative; z-index: 100; }

/* Logo */
#header a.logo { height: 100%; padding: 0 30px 0 70px; left: 0; top: 0; font-size: 25px; color: white; line-height: 80px; background: #669416 url(images/logo.svg) no-repeat 30px center; background-size: auto 26px; display: inline-block; position: absolute; z-index: 2; }

/* Phone */
#header .phone { right: 110px; top: 27px; font-size: 23px; color: #e3530d; position: absolute; z-index: 2; }

/* Menu */
#header menu ul { width: 100%; padding-top: 27px; font-size: 0; text-align: center; position: relative; z-index: 1; }
#header menu ul li { margin: 0 20px; display: inline-block; }
#header menu ul li a { font-size: 18px; color: #6b6461; }
#header menu ul li a:hover { color: #222; }
#header menu ul li.current-menu-item a { color: #000; }

/* RWD button */
#header .rwd_button { width: 80px; height: 80px; right: 0; top: 0; font-size: 30px; color: white; background: #4e7111; position: absolute; z-index: 3; }

/* Language chooser */
#header ul.switcher-list { width: 40px; height: 40px; right: 50px; top: 20px; padding-top: 40px; text-align: center; text-transform: uppercase; line-height: 40px; background: #669416; position: absolute; overflow: hidden; z-index: 2; }
#header ul.switcher-list:hover { height: auto; overflow: auto; } 
#header ul.switcher-list li { width: 40px; height: 40px; display: block; }
#header ul.switcher-list li.active { left: 0; top: 0; position: absolute; }
#header ul.switcher-list li.active span { width: 40px; height: 40px; color: white; display: block; }
#header ul.switcher-list li a { width: 40px; height: 40px; color: white; display: block; }
#header ul.switcher-list li a:hover { background: #5c8614; }


/*
---------------
	SLIDER
---------------
*/
#slide { height: calc(100vh * 0.8); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }
#slide .cover { width: 100%; height: 100%; left: 0; top: 0; text-align: center; color: white; background: rgba(0,0,0,0.5) url(images/decor_white_top.png) no-repeat top center; position: absolute; }

#slide .cover h1 { width: 100%; max-width: 700px; margin: 0 auto 30px auto; font-size: 80px; position: relative; opacity: 0; }
#slide .cover h3 { margin-bottom: 50px; padding: 5px 30px; font-size: 40px; color: white; letter-spacing: 10px; display: inline-block; position: relative; opacity: 0; }
#slide .cover h3:before, #slide .cover h3:after { width: 100%; height: 1px; left: 0; top: 0; background: white; position: absolute; content: ''; opacity: 0.3; }
#slide .cover h3:after { top: auto; bottom: 0; }

body.loaded #slide .cover h1 { opacity: 1; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; transition-delay: 1s; -o-transition-delay: 1s; }
body.loaded #slide .cover h3 { opacity: 1; -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; transition-delay: 1.5s; -o-transition-delay: 1.5s; }


/*
--------------
	PANEL
--------------
*/
.panel { top: 0; padding: 5px; background: white; position: relative; opacity: 0; -moz-box-shadow: 0 2px 5px rgba(59,36,13,0.3); -webkit-box-shadow: 0 2px 5px rgba(59,36,13,0.3); box-shadow: 0 2px 5px rgba(59,36,13,0.3); }
.panel.show { top: -70px; opacity: 1; }
.panel .frame { border: 1px solid #e4ddd0; position: relative; }
.panel .content { max-width: 900px; min-height: 300px; margin-left: auto; margin-right: auto; padding: 80px 0; font-size: 18px; color: #6b6461; line-height: 160%; }
.panel .content p { margin-bottom: 20px; }
.panel .content p:last-child { margin-bottom: 0; }
.panel .content h2 { margin-bottom: 40px; font-size: 60px; color: #37302d; line-height: 100%; }


/*
------------------
	FRONTPAGE
------------------
*/
#frontpage { background: url(images/scroll_down.gif) no-repeat center 20px; }

/* About us */
.panel.aboutus { margin-bottom: 100px; }
.panel.aboutus .content { padding-bottom: 0; }
.panel ul.services { margin-top: 40px; font-size: 0; }
.panel ul.services li { width: 240px; height: 190px; padding-top: 20px; border-right: 1px solid #e4ddd0; display: inline-block; }
.panel ul.services li:last-child { border-right: none; }
.panel ul.services li a { font-size: 16px; color: #669416; display: block; }
.panel ul.services li a:hover { color: #37302d; }
.panel ul.services li a span { width: 100px; height: 100px; margin: auto; background: url(images/icon_services.png) no-repeat left top; display: block; }
.panel ul.services li a:hover span { background-position: 0 -100px; }
.panel ul.services li:nth-child(2) a span { background-position: -100px 0; }
.panel ul.services li:nth-child(3) a span { background-position: -200px 0; }
.panel ul.services li:nth-child(2) a:hover span { background-position: -100px -100px; }
.panel ul.services li:nth-child(3) a:hover span { background-position: -200px -100px; }

/* Terms */
.panel.terms .leaf { right: -1%; bottom: -10%; position: absolute; }

/* Species */
.species { background: url(images/bgr_wood.jpg) repeat center; background-attachment: fixed; }
.species .frame { padding-top: 150px; padding-bottom: 100px; background-image: url(images/decor_white_top__2.png), url(images/decor_white_bottom.png); background-repeat: no-repeat; background-position: center top, center bottom; position: relative; }
.species .frame h2 { margin-bottom: 20px; font-size: 60px; color: white; line-height: 100%; }
.species .frame p { margin-bottom: 40px; color: white; }
.species .frame ul li { width: 22%; margin-right: 3%; background: white; float: left; opacity: 0; -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.9); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.9); box-shadow: 0 5px 10px rgba(0,0,0,0.9); }
.species .frame ul li a.thumbnail { display: block; }
.species .frame ul li a.thumbnail img { width: 100%; display: block; }
.species .frame ul li .entry { padding: 5px; }
.species .frame ul li .entry a { padding: 20px 0; font-size: 20px; color: #6b6461; border: 1px solid #e4ddd0; display: block; }
.species .frame ul li .entry a:hover { color: #37302d; }

.species.show .frame ul li { opacity: 1; }

.species img.leaf { position: absolute; }
.species img.leaf_2 { left: 2%; bottom: 5%; }
.species img.leaf_3 { right: 5%; bottom: 20%; }


/*
--------------
	TITLE
--------------
*/
#title { height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; overflow: hidden; }
#title .cover { width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.5) url(images/decor_white_top.png) no-repeat top center; position: relative; }

#title .cover h2 { width: 100%; left: 0; bottom: 100px; font-size: 45px; text-align: center; color: white; position: absolute; }

#title .breadcrumb { width: 100%; height: 0; left: 0; bottom: 0; color: white; line-height: 40px; background: rgba(34,34,34,0.7); position: absolute; }
#title .breadcrumb a { font-weight: normal; text-decoration: underline; color: white; }
body.loaded #title .breadcrumb { height: 40px; -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; transition-delay: 1.6s; -o-transition-delay: 1.6s; }


/*
------------------
	CONTAINER
------------------
*/
#container { line-height: 25px; }
body.fixed_header #container { padding-top: 100px; }

#container h3 { margin-bottom: 10px; font-family: 'Archivo Black', sans-serif; font-size: 30px; color: #e3530d; line-height: 100%; }

/* Content */
#content { line-height: 160%; position: relative; }
#content .leaf { right: 0; bottom: -150px; position: absolute; z-index: 10; }

#container p { margin-bottom: 20px; } 

#content img { max-width: 100%; margin: 0 auto 20px auto; display: block; }

#content a { text-decoration: underline; color: #669416; } 
#content a:hover { color: #37302d; } 
#content strong { color: #37302d; } 

#content ul { margin-bottom: 20px; padding-left: 20px; text-align: left; display: inline-block; } 
#content ul li { list-style: disc; } 

#content table { width: 100%; margin-bottom: 30px; border: 2px solid #e4ddd0; } 
#content table thead td, 
#content table thead th { padding: 5px; font-weight: 700; color: white; background: #669416; } 
#content table thead td:first-child { width: 50%; } 
#content table tbody td { padding: 5px; border: 1px solid #e4ddd0; } 
#content table tbody td:first-child { width: 50%; font-weight: 700; color: #37302d; } 
#content table tbody td:nth-child(3) { width: 25%; } 
#content table td:nth-child(2), #content table td:nth-child(3) { text-align: center; } 

/* Contact */
#content.contact { width: 100%; padding: 0; position: relative; }
#content.contact:before { width: 50%; height: 100%; left: 50%; background: #f7f7f7; position: absolute; content: ''; }
#content.contact .contact_left { width: 50%; padding: 50px; padding-left: 0; }
#content.contact .contact_right { width: 50%; padding: 50px; padding-right: 0; }
.panel_contact_1 { margin-bottom: 50px; }

/* Species */
#content article.spec { position: relative; opacity: 0; }
#content article.spec.show { opacity: 1; }

/* Share */
#content ul.share { left: 0; top: 100px; margin-left: 0 !important; padding-left: 0; position: absolute; }
#content ul.share li { height: 40px; margin-bottom: 0; position: relative; z-index: 2; list-style: none; }
#content ul.share li:before { display: none; }
#content ul.share li a { width: 60px; height: 40px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-decoration: none; line-height: 40px; display: inline-block; position: relative; overflow: hidden; }
#content ul.share li a span { position: relative; z-index: 2; }
#content ul.share li a:before { width: 60px; height: 100%; margin: 0; font-size: 18px; color: #669416; line-height: 40px; display: inline-block; position: relative; z-index: 2; }
#content ul.share li a:after { width: 0; height: 100%; left: 0; top: 0; background: #669416; position: absolute; z-index: 1; content: ''; }
#content ul.share li a:hover { width: auto; padding-right: 20px; color: white; /*background: #669416;*/ }
#content ul.share li a:hover:before { color: #ceeba5; }
#content ul.share li a:hover:after { width: 100%; }

/* Gallery */
.fg-panel { margin-bottom: 20px; }
.fg-thumbail-selection .fg-album-thumbnail { margin-right: 40px !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.fg-thumbail-selection .fg-album-thumbnail:nth-child(4n) { margin-right: 0 !important; }


/*
---------------
	FOOTER
---------------
*/
#footer { padding: 70px 0 30px; font-size: 18px; color: #6b6461; background: white url(images/logo_footer.svg) no-repeat center 20px; background-size: auto 30px; }
#footer a { text-decoration: underline; color: #6b6461; }
#footer a:hover { color: #333; }

#footer ul { margin-bottom: 20px; padding: 0 30px 20px; font-size: 0; border-bottom: 1px solid #ddd; display: inline-block; }
#footer ul li { margin: 0 10px; vertical-align: top; display: inline-block; }
#footer ul li a { font-size: 18px; }

#footer p { margin-bottom: 0 !important; }
#footer p.small { font-size: 16px; }


/*
--------------
	FORM
--------------
*/
ul.form { margin-left: 0 !important; padding-left: 0 !important; }
ul.form li { width: 32%; min-height: 50px; margin-right: 2%; margin-bottom: 10px; float: left; list-style: none !important; position: relative; }
ul.form li:nth-child(3n) { margin-right: 0; }
ul.form li.full { width: 100%; float: none; clear: both; }
ul.form li a { text-decoration: underline; color: #000; }
ul.form li label { width: 100%; font-size: 15px; font-weight: 700; color: #333; display: block; }
ul.form li .wpcf7-form-control-wrap { display: block; }

ul.form li select, 
ul.form li textarea,  
ul.form li input[type=tel], 
ul.form li input[type=text], 
ul.form li input[type=email], 
ul.form li input[type=number] { width: 100%; height: 50px; padding-left: 10px; background: #f9f4f1; border: 2px solid #f9f4f1; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; }

ul.form li select:focus, 
ul.form li textarea:focus,  
ul.form li input[type=tel]:focus, 
ul.form li input[type=text]:focus, 
ul.form li input[type=email]:focus, 
ul.form li input[type=number]:focus { border-color: #ebdacf; }

ul.form li textarea { width: 100%; min-height: 150px; padding: 10px; resize: vertical; }

ul.form li input[type=submit]:disabled { text-shadow: none !important; color: #666 !important; background: #ddd; cursor: normal !important; }


/*
------------------
	RWD DESIGN
------------------
*/
@media only screen and (max-width: 1600px) {
	
	/* DISPLAY: None */
	.hide_in_1600 { display: none; }
	
	/* FRONTPAGE: Species */
	.species img.leaf_2 { width: 17%; left: 0; bottom: -5%; }
	.species img.leaf_3 { width: 13%; right: 1%; bottom: 2%; }
}

@media only screen and (max-width: 1400px) {
	
	/* DISPLAY: None */
	.hide_in_1400 { display: none; }
	
	/* DEFAULT */
	.p_l_20 { padding-left: 20px; }
	.p_r_20 { padding-right: 20px; }
	
	/* HEADER: Logo */
	#header a.logo { padding: 0 20px 0 60px; font-size: 20px; }
	
	/* HEADER: Phone */
	#header .phone { right: 30px; font-size: 20px; }

	/* HEADER: Menu */
	#header menu ul li { margin: 0 10px; }
	
	/* FRONTPAGE: Species */
	.species { margin-left: -20px; margin-right: -20px; }
}

@media only screen and (max-width: 1100px) {
	
	/* DISPLAY: None */
	.hide_in_1100 { display: none !important; }
	
	/* HEADER: Menu */
	#header menu ul { padding-right: 100px; }
	#header menu ul { text-align: right; }
	
	/* FOOTER */
	#footer { background: white; }
}

@media only screen and (max-width: 960px) {
	
	/* DISPLAY: None */
	.hide_in_960, 
	#header ul.switcher-list { display: none !important; }
	
	/* DISPLAY: Block */
	.show_in_960 { display: block !important; }
	
	/* HEADER: Logo */
	#header a.logo { width: 100%; padding: 0; padding-left: 70px; }

	/* SLIDER */
	#slide .cover { background: rgba(0,0,0,0.5); }
	
	/* FRONTPAGE: About us */
	.panel.aboutus { margin-bottom: 70px; }
	.panel ul.services { margin-top: 40px; font-size: 0; }
	.panel ul.services li { width: 33.3333333333%; padding: 0 20px; }
	
	/* FRONTPAGE: Species */
	.species .frame { padding-top: 100px; padding-bottom: 70px; }
	.species .frame ul li { width: 47%; margin-right: 3%; margin-bottom: 20px; }
	.species img.leaf_3 { width: 17%; }
	
	/* TITLE */
	#title .cover { background: rgba(0,0,0,0.5); }
}

@media only screen and (max-width: 768px) {
	
	/* DISPLAY: None */
	.hide_in_768 { display: none !important; }
	
	/* SLIDER */
	#slide { height: calc(100vh * 0.7); }
	#slide .cover h1 { max-width: none; font-size: 7vw; }
	#slide .cover h3 { font-size: 6vw; }
	
	/* PANEL */
	.panel.show { top: -50px; }
	.panel .content { max-width: none; padding: 50px 20px; }
	.panel .content h2 { margin-bottom: 40px; font-size: 7vw; }
	
	/* FRONTPAGE: About us */
	.panel ul.services li { width: 50%; }
	.panel ul.services li:nth-child(2) { border-right: none; }
	
	/* FRONTPAGE: Species */
	.species .frame h2 { font-size: 6vw; }
	
	/* TITLE */
	#title .cover h2 { font-size: 6vw; }
	
	/* FORM */
	ul.form li { width: 100%; margin-right: 0; float: none; }
}

@media only screen and (max-width: 640px) {
	
	/* DISPLAY: None */
	.hide_in_640 { display: none !important; }
	
	/* RWD MENU */
	#rwd_menu ul { padding: 0 30px;  }
	#rwd_menu ul li a { font-size: 40px; }

	/* SLIDER */
	#slide .cover h1 { font-size: 9vw; }
	#slide .cover h3 { font-size: 7vw; }
	
	/* PANEL */
	.panel .content { padding: 20px; }
	
	/* FRONTPAGE: About us */
	.panel.aboutus { margin-bottom: 50px; }
	
	/* TITLE */
	#title .cover h2 { font-size: 7vw; }
}

@media only screen and (max-width: 480px) {
	
	/* DISPLAY: None */
	.hide_in_480 { display: none; }
	
	/* RWD MENU */
	#rwd_menu ul li a { font-size: 35px; }
	
	/* SLIDER */
	#slide .cover h1 { font-size: 10vw; }
	
	/* FRONTPAGE: About us */
	.panel ul.services li { width: 100%; height: auto; padding: 20px; border-right: none; border-bottom: 1px solid #e4ddd0; }
	.panel ul.services li:nth-child(2) { border-bottom: none; }	
	
	/* SPECIES */
	.species .button { padding: 0; display: block; }
}