/*
Theme Name: Tárkányi Ügyvédi Iroda
Theme URI: http://tarkanyi.hu
Description: A Tárkányi Ügyvédi Iroda weboldalának alapértelmezett sablonja
Author: Digitalform
Author URI: http://digitalform.hu
Version: 3.0
*/

*{
margin: 0;
padding: 0;
border: 0;
text-decoration: none; 
}

*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

::selection { color: #60464a; background: #d1c9bd; }

body { font-family: 'PT Serif', serif; font-size: 17px; color: #777; line-height: 25px; overflow-x: hidden; }
body.rwd_menu__opened { overflow-y: hidden; }

textarea, input, select, button { font-family: 'PT Serif', serif; font-size: 18px; outline: none; }

h1, h2, h3, h4 { font-weight: normal; line-height: 100%; }

/* Classes */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.inner { max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; }
.alignleft { margin: 0 20px 5px 0; float: left; }
.alignright { margin: 0 0 5px 20px; float: right; }
.aligncenter { margin: 0 auto 20px auto; display: block; }
.vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.t_a_c { text-align: center; }
.hide { display: none !important; }
.red { color: #fc192e; }
.b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

/* Cols */
.row { width: 100%; font-size: 0; display: block; }
.row .col { font-size: 17px; vertical-align: top; display: inline-block; position: relative; }
.row .col_33 { width: 33.3333333333%; }
.row .col_40 { width: 40%; }
.row .col_50 { width: 50%; }
.row .col_60 { width: 60%; }
.row .col_66 { width: 66%; }

/* Font */
.uppercase { text-transform: uppercase; }

/* Animation */
.anim, 
:before, 
:after { -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_cubic { -webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1); }

/* Button */
.button { height: 50px; padding: 0 20px; font-size: 16px; text-transform: uppercase; text-decoration: none !important; color: white !important; line-height: 50px; background: #d3c4b4; cursor: pointer; display: inline-block; position: relative; }
.button:hover { background: #60464a; }

.button_2 { background: #60464a; }
.button_2:hover { background: #63caf7; }


/*
---------------
	COOKIE
---------------
*/
#cookie { width: 400px; right: 30px; bottom: 30px; padding: 20px; font-size: 14px; line-height: 17px; color: #05212c; background: white; position: fixed; z-index: 1000; visibility: hidden; opacity: 0; -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2); box-shadow: 0 2px 3px rgba(0,0,0,0.2); }
body.cookie_panel #cookie { visibility: visible; opacity: 1; }
#cookie p { margin-bottom: 10px; }
#cookie a { text-decoration: underline; color: #05212c; }
#cookie a.accept { height: 30px; font-size: 18px; text-decoration: none; position: relative; }
#cookie a.accept:after { width: 100%; height: 1px; left: 0; bottom: 0; background: #05212c; position: absolute; content: ''; }
#cookie a.accept:hover:after { width: 0; left: 50%; }


/*
-------------------
	NAVIGATION
-------------------
*/
#rwd_menu { width: 100%; left: 0; top: 100px; bottom: 0; background: rgba(211,196,180,0.9); position: fixed; z-index: 9; visibility: hidden; opacity: 0; }


/*
---------------
	HEADER
---------------
*/
#header { height: 150px; }
#header .inner { height: 100%; }
#header .inner:before { width: 1px; height: 100%; left: 100px; top: 0; background: #e9e9e8; position: absolute; content: ''; z-index: 1; }
#header .inner:after { width: 2px; height: 50px; left: 100px; top: 0; background: #06222d; position: absolute; content: ''; z-index: 1; }

/* Logo */
#header .logo { left: 120px; font-size: 20px; color: #06222d; line-height: 25px; letter-spacing: 5px; position: absolute; }

/* Menu */
#header menu { height: 30px; right: 0; position: absolute; }
#header menu ul li { margin: 0 15px; vertical-align: top; display: inline-block; }
#header menu ul li:last-child { margin-right: 0; }
#header menu ul li a { height: 30px; padding: 0 5px; font-size: 18px; color: #051f2a; display: block; position: relative; }
#header menu ul li a:after { width: 0; height: 1px; left: 50%; bottom: 0; background: #051f2a; position: absolute; content: ''; }
#header menu ul li a:hover:after { width: 100%; left: 0; }


/*
---------------------------
	SLIDE AND ABOUT US
---------------------------
*/

/* Slide */
#slide_aboutus { height: calc(100vh - 150px); }
#slide_aboutus .slide { height: calc(100vh - 300px); position: relative; z-index: 2; }
#slide_aboutus .slide .slide_image { height: 100%; background-color: #05212c; background-repeat: no-repeat; background-position: center; background-size: cover; }
#slide_aboutus .slide .slide_image:after { width: 1px; height: 100%; left: 100px; top: 0; background: white; position: absolute; content: ''; opacity: 0.2; }

/* Phone */
#slide_aboutus .phone { width: 100%; height: 300px; left: 0; bottom: 0; position: absolute; z-index: 1; }
#slide_aboutus .phone:before { width: 50%; height: 100%; left: 0; top: 0; background: #d1c9bd; position: absolute; content: ''; }
#slide_aboutus .phone .inner { height: 100%; }
#slide_aboutus .phone .inner:before { width: 1px; height: 100%; left: 100px; top: 0; background: #c4beb4; position: absolute; content: ''; }
#slide_aboutus .phone .inner:after { width: 70px; height: 70px; left: 65px; bottom: 40px; background: #d1c9bd url(images/icon_phone.svg) no-repeat center; background-size: auto 30px; border: 1px solid #c4beb4; position: absolute; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
#slide_aboutus .phone .wrapper { width: 50%; height: 150px; left: 0; bottom: 0; padding-left: 160px; font-size: 25px; color: #05212c; position: absolute; }

/* About us */
#slide_aboutus .aboutus { width: 50%; right: 0; bottom: 0; position: absolute; z-index: 3; }
#slide_aboutus .aboutus .wrapper { max-width: 600px; padding: 50px; background: white; }
#slide_aboutus .aboutus .wrapper h1 { margin-bottom: 20px; font-size: 40px; color: #06212c; }
#slide_aboutus .aboutus .wrapper p { margin-bottom: 10px; }
#slide_aboutus .aboutus .wrapper p:last-of-type { margin-bottom: 0; }


/*
------------------
	EXPERTISES
------------------
*/
#expertises { background: #05212c; position: relative; }
#expertises:after { width: 50%; height: 80px; left: 0; bottom: 0; background: #d1c9bd; position: absolute; content: ''; }
#expertises .wrapper { height: 100%; padding: 80px 100px; color: white; }
#expertises .wrapper:before { width: 50%; height: 80px; left: 0; bottom: 0; background: #05212c; position: absolute; content: ''; z-index: 2; }
#expertises .wrapper:after { width: 100px; height: 80px; left: 0; bottom: 0; background: #d1c9bd; position: absolute; content: ''; z-index: 3; }
#expertises .wrapper h3 { padding-top: 80px; font-size: 20px; font-weight: 700; line-height: 25px; position: relative; }
#expertises .wrapper h3:before { width: 2px; height: 50px; left: 0; top: 0; background: white; position: absolute; content: ''; }
#expertises .wrapper h4 { margin-bottom: 20px; font-size: 14px; text-transform: uppercase; color: #d1c9bd; letter-spacing: 5px; }
#expertises .wrapper ul { font-size: 0; }
#expertises .wrapper ul li { width: 50%; min-height: 250px; margin-bottom: 80px; padding: 20px 0 20px 30px; font-size: 17px; vertical-align: top; border-left: 1px solid rgba(255,255,255,0.2); display: inline-block; list-style: none; }
#expertises .wrapper .col.text { padding-right: 20px; }


/*
----------------
	LAWYERS
----------------
*/
#lawyers { position: relative; }
#lawyers:before { width: 50%; height: 100%; left: 0; top: 0; background: #d1c9bd; position: absolute; content: ''; }
#lawyers .wrapper { padding: 80px 100px 0 100px; background: #d1c9bd; }
#lawyers .wrapper:before { height: 300px; left: 100px; top: 0; right: 0; background: white; position: absolute; content: ''; }
#lawyers .wrapper:after { width: 1px; left: 100px; top: 300px; bottom: 0; background: #c4beb4; position: absolute; content: ''; }
#lawyers .wrapper .row .col .lawyer { max-width: 320px; margin-left: auto; margin-right: auto; font-size: 17px; color: #05212c; }
#lawyers .wrapper .row .col .lawyer .thumbnail { margin-bottom: 20px; }
#lawyers .wrapper .row .col .lawyer .thumbnail img { width: 100%; height: auto; display: block; }
#lawyers .wrapper .row .col .lawyer h3 { padding-top: 70px; font-size: 20px; font-weight: 700; color: #05212c; position: relative; }
#lawyers .wrapper .row .col .lawyer h3:before { width: 2px; height: 50px; left: 0; top: 0; background: #05212c; position: absolute; content: ''; }
#lawyers .wrapper .row .col .lawyer .post { margin-bottom: 20px; font-size: 15px; color: #666; }


/*
-----------------
	CONTACT
-----------------
*/
#contact { color: white; background: #05212c; position: relative; }
#contact:before { width: 50%; height: 80px; left: 0; top: 0; background: #d1c9bd; position: absolute; content: ''; }
#contact .inner { padding-top: 160px; padding-bottom: 80px; }
#contact .inner:before { width: 100%; height: 80px; left: 0; top: 0; background: #d1c9bd; position: absolute; content: ''; }
#contact .inner:after { width: 1px; height: 80px; left: 100px; top: 0; background: #c4beb4; position: absolute; content: ''; }
#contact .inner p { margin-bottom: 10px; }
#contact .inner p:last-of-type { margin-bottom: 0; }
#contact .inner p.small { font-size: 14px; opacity: 0.5; }
#contact .inner a { text-decoration: underline; color: white; }
#contact .inner a:hover { text-decoration: none; }


/*
---------------
	FOOTER
---------------
*/
#footer { }



/*
-------------------
	RWD DESIGN
-------------------
*/
@media only screen and (max-width: 1600px) {
	
	/* HEADER */
	#header { height: 130px; }
	
	/* SLIDE AND ABOUT US: Slide */
	#slide_aboutus { height: calc(100vh - 130px); }
	#slide_aboutus .slide { height: calc(100vh - 280px); }
}

@media only screen and (max-width: 1440px) {
	
	/* HEADER */
	#header { height: 110px; }
	
	/* SLIDE AND ABOUT US: Slide */
	#slide_aboutus { height: calc(100vh - 110px); }
	#slide_aboutus .slide { height: calc(100vh - 260px); }
}

@media only screen and (max-width: 1200px) {
	
	/* HEADER */
	#header { height: 100px; }
	#header .inner:before { left: 50px; }
	#header .inner:after { left: 50px; }
	
	/* HEADER: Logo */
	#header .logo { left: 70px; }
	
	/* HEADER: Menu */
	#header menu { right: 30px; }
	
	/* SLIDE AND ABOUT US: Slide */
	#slide_aboutus { height: calc(100vh - 100px); }
	#slide_aboutus .slide { height: calc(100vh - 200px); }
	#slide_aboutus .slide .slide_image:after { left: 50px; }
	
	/* SLIDE AND ABOUT US: Phone */
	#slide_aboutus .phone { height: 250px; }
	#slide_aboutus .phone .inner:before { left: 50px; }
	#slide_aboutus .phone .inner:after { width: 60px; height: 60px; left: 20px; bottom: 20px; background-size: auto 25px; }
	#slide_aboutus .phone .wrapper { height: 100px; padding-left: 100px; }
	
	/* SLIDE AND ABOUT US: About us */
	#slide_aboutus .aboutus .wrapper { padding: 40px; }
	#slide_aboutus .aboutus .wrapper h1 { font-size: 35px; }
	
	/* EXPERTISES */
	#expertises:after { display: none; }
	#expertises .wrapper { padding: 50px 50px 0 50px; }
	#expertises .wrapper:before { display: none; }
	#expertises .wrapper:after { display: none; }
	#expertises .wrapper .col.col_33 { width: 100%; margin-bottom: 50px; display: block; }
	#expertises .wrapper .col.col_66 { width: 100%; display: block; }
}

@media only screen and (max-width: 960px) {
	
	/* DISPLAY: None */
	.hide_in_960 { display: none !important; }
	
	/* HEADER: Menu */
	#header menu ul li { margin: 0 10px; }
	#header menu ul li a { padding: 0; font-size: 17px; }
	
	/* LAWYERS */
	#lawyers:before { display: none; }
	#lawyers .wrapper { padding: 50px; background: #d1c9bd; }
	#lawyers .wrapper:before { left: 0; }
	#lawyers .wrapper:after { display: none; }
	
	/* CONTACT */
	#contact:before { display: none; }
	#contact .inner { padding: 50px; font-size: 16px; }
	#contact .inner:before { display: none; }
	#contact .inner:after { display: none; }
	#contact .inner .left { margin-bottom: 20px; float: none; }
	#contact .inner .right { float: none; }
}
	
@media only screen and (max-width: 768px) {
	
	/* DISPLAY: None */
	.hide_in_768 { display: none !important; }
	
	/* SLIDE AND ABOUT US: Slide */
	#slide_aboutus { height: auto; }
	#slide_aboutus .slide { height: auto; }
	#slide_aboutus .slide .slide_image { height: 50vh; }

	/* SLIDE AND ABOUT US: About us */
	#slide_aboutus .aboutus { width: 100%; right: auto; bottom: auto; position: relative; }
	#slide_aboutus .aboutus .wrapper { max-width: none; padding: 50px 30px 50px 70px; position: relative; }
	#slide_aboutus .aboutus .wrapper:before { width: 1px; height: 100%; left: 50px; top: 0; background: #e9e9e8; position: absolute; content: ''; }
	#slide_aboutus .aboutus .wrapper h1 { font-size: 6vw; }
	
	/* EXPERTISES */
	#expertises .wrapper h3 { padding-top: 50px; }
	#expertises .wrapper h3:before { height: 30px; }
	
	/* LAWYERS */
	#lawyers .wrapper { padding: 50px 30px; }
	#lawyers .wrapper .row .col .lawyer { max-width: 90%; }
	#lawyers .wrapper .row .col .lawyer h3 { padding-top: 50px; }
	#lawyers .wrapper .row .col .lawyer h3:before { height: 30px; }
	
	/* CONTACT */
	#contact .inner { padding: 30px; }
}

@media only screen and (max-width: 640px) {
	
	/* HEADER */
	#header .inner:before { left: 30px; }
	#header .inner:after { left: 30px; }
	
	/* HEADER: Logo */
	#header .logo { left: 50px; }
	
	/* SLIDE AND ABOUT US: Slide */
	#slide_aboutus .slide .slide_image:after { left: 30px; }
	
	/* SLIDE AND ABOUT US: About us */
	#slide_aboutus .aboutus .wrapper { padding: 50px 30px 50px 50px; }
	#slide_aboutus .aboutus .wrapper:before { left: 30px; }
	#slide_aboutus .aboutus .wrapper h1 { font-size: 7vw; }
	
	/* EXPERTISES */
	#expertises .wrapper { padding: 50px 30px 20px 30px; }
	#expertises .wrapper ul li { width: 100%; min-height: inherit; margin-bottom: 30px; display: block; }
	
	/* LAWYERS */
	#lawyers .wrapper:before { height: 200px; }
	#lawyers .wrapper .row .col { width: 100%; display: block; }
	#lawyers .wrapper .row .col:first-child { margin-bottom: 50px; }
	#lawyers .wrapper .row .col .lawyer { max-width: 70%; }
}

@media only screen and (max-width: 480px) {
	
	/* LAWYERS */
	#lawyers .wrapper .row .col .lawyer { max-width: 100%; }
	
	/* COOKIE */
	#cookie { width: auto; left: 30px; }
}