/*
Theme Name: Válság szemüvegdiszkont
Theme URI: https://olcsoszemuveg.hu
Description: A Válság szemüvegdiszkont weboldal alapértelmezett sablonja.
Version: 1.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: 'Raleway', sans-serif; font-size: 17px; font-weight: 500; color: #bebebe; line-height: 24px; background: #0b0b0b; overflow-x: hidden; }

li { list-style-type: none; }
h1, h2, h3, h4, h5 { font-weight: normal; }

hr { margin-top: 80px; margin-bottom: 100px; border-top: 1px solid #323232; }

/* Classes */
.inner { max-width: 1400px; margin: auto; position: relative; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.sec_font { font-family: 'Lora', serif; }
.uppercase { text-transform: uppercase; }
.center { text-align: center; }
.two_column { margin-bottom: 30px; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 40px; -webkit-column-gap: 40px; column-gap: 40px; }
.vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.b_r_50p { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

/* Special */
.has_line { margin-bottom: 40px; padding-left: 60px; font-size: 14px; font-weight: 900; line-height: 100%; position: relative; }
.has_line:before { width: 40px; height: 2px; left: 0; top: 50%; margin-top: -1px; background: #c39d63; position: absolute; content: ''; }

/* Buttons */
.button { height: 50px; padding: 0 25px; font-size: 16px; font-weight: 900; color: white !important; line-height: 50px; background: #c39d63; display: inline-block; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; }
.button:hover { color: #0b0b0b !important; background: white; }

/* Animation */
.anim, :before, :after { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.anim_cubic { -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); }

/* Rows */
.row { font-size: 0; }
.row .col { font-size: 17px; vertical-align: top; display: inline-block; }
.row .col_50 { width: 50%; }


/*
---------------
	COOKIE
---------------
*/
#cookie { left: 0; right: 0; bottom: 0; font-size: 12px; line-height: 18px; color: #ccc; background: #000; border-top: 1px solid #333; position: fixed; z-index: 1000; visibility: hidden; opacity: 0; }
body.cookie_panel #cookie { visibility: visible; opacity: 1; }
#cookie .inner { padding: 30px 250px 30px 0; }
#cookie .inner .text a { text-decoration: underline; color: #ccc; }
#cookie .inner .text a:hover { color: white; }

#cookie .inner a.accept { right: 60px; top: 50%; margin-top: -25px; position: absolute; }
#cookie .inner a.close { width: 50px; height: 50px; right: 0; top: 50%; margin-top: -25px; text-indent: -9999px; position: absolute; }
#cookie .inner a.close svg { width: 20px; height: 20px; left: 15px; top: 15px; position: absolute; fill: white !important; }
#cookie .inner a.close svg path { fill: white !important; }
#cookie .inner a.close:hover svg { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }


/*
-------------
	MODAL
-------------
*/
.white-popup { width: auto; max-width: 480px; margin: 20px auto; padding: 30px; text-align: center; color: #000; background: white; position: relative; }
.white-popup .mfp-close { width: 40px; height: 40px; right: -20px; top: -20px; line-height: 42px; color: white; background: #c39d63; position: absolute; opacity: 1 !important; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.white-popup p { margin-bottom: 20px; font-size: 20px; }
.white-popup p:last-child { margin-bottom: 0; }
.white-popup p span.bigger { margin: 10px 0; font-size: 40px; font-weight: 700; color: #ec2d4e; line-height: 40px; display: block; }
.white-popup p.smaller { font-size: 14px; color: #999; line-height: 16px; }


/*
--------------
	HEADER
--------------
*/
#header { height: 120vh; background: url(images/img_header_girl.png) no-repeat center; background-size: cover; }
#header .inner { height: 100vh; }

/* Logo */
#header .logo { width: auto; height: 20px; left: 0; top: 50px; display: block; position: absolute; }

/* Text */
#header .slogan { width: 50%; margin-bottom: 30px; font-size: 100px; color: white; line-height: 90%; position: relative; }
#header .text { width: 50%; margin-bottom: 50px; font-size: 17px; color: #bebebe; }

#header .scroll_down { width: 40px; height: 70px; vertical-align: top; background: url(images/icon_arrow_down_white.svg) no-repeat center; border: 1px solid #323232; display: inline-block; }
#header .scroll_down:hover { background-color: #c39d63; background-position: center 90%; border-color: #c39d63; }

#header #timer { height: 70px; padding-left: 20px; font-size: 13px; font-weight: 900; vertical-align: top; color: white; line-height: 70px; display: inline-block; }

/* Alternative header */
#alt_header { height: 100px; }
#alt_header .inner { height: 100%; }
#alt_header .logo { width: auto; height: 20px; left: 0; top: 50px; display: block; position: absolute; }


/*
----------------
	ABOUT US
----------------
*/
#aboutus { margin-top: -50px; padding-top: 30px; position: relative; }
#aboutus p { margin-bottom: 20px; }
#aboutus h3 { margin-bottom: 15px; font-size: 20px; font-weight: 900; color: white; }

/* Intro */
#aboutus .intro { margin-bottom: 100px; position: relative; }
#aboutus .intro img { left: 10px; bottom: 10px; position: absolute; }
#aboutus .intro .entry { padding: 80px 80px 80px 450px; font-size: 30px; color: white; line-height: 1.5; border: 10px solid #1b1b1b; }
#aboutus .intro .entry span { font-size: 40px; color: #c39d63; }

/* Text */
#aboutus .row { line-height: 1.5; }
#aboutus .row .col_offers { padding-left: 50px; line-height: 1.5; }
#aboutus .row .col_offers ul { font-size: 25px; color: white; line-height: 1.7; }
#aboutus .row .col_offers ul li { padding-left: 30px; position: relative; }
#aboutus .row .col_offers ul li:before { width: 6px; height: 6px; left: 0; top: 20px; background: #c39d63; position: absolute; content: ''; }


/*
-------------
	SHOPS
-------------
*/
#shops { margin-bottom: 100px; }
#shops .shop_list { margin-left: -15px; margin-right: -15px; font-size: 0; }
#shops .shop_list .shop { width: 25%; padding-left: 15px; padding-right: 15px; font-size: 16px; vertical-align: top; color: #bebebe; display: inline-block; }
#shops .shop_list .shop img { width: 100%; height: auto; margin-bottom: 20px; display: block; }
#shops .shop_list .shop .count { width: 71px; height: 72px; margin-bottom: 30px; font-size: 18px; color: white; line-height: 72px; background: url(images/icon_circle.png) no-repeat left top; }
#shops .shop_list .shop .entry { padding-bottom: 50px; position: relative; }
#shops .shop_list .shop:hover .entry { padding-left: 20px; }
#shops .shop_list .shop .entry:before { width: 2px; height: 0; left: 0; top: 0; background: #c39d63; position: absolute; content: ''; opacity: 0; }
#shops .shop_list .shop:hover .entry:before { height: 100%; opacity: 1; }
#shops .shop_list .shop .entry h3 { margin-bottom: 15px; font-size: 20px; font-weight: 900; color: white; }
#shops .shop_list .shop .entry strong { color: white; }
#shops .shop_list .shop .entry .read_more { left: 20px; bottom: -30px; padding-right: 50px; font-size: 13px; font-weight: 900; color: white; line-height: 100%; background: url(images/icon_right_open.svg) no-repeat right center; background-size: auto 14px; position: absolute; opacity: 0; }
#shops .shop_list .shop .entry .read_more:hover { text-decoration: underline; }
#shops .shop_list .shop:hover .entry .read_more { bottom: 0; opacity: 1; }


/*
---------------
	CONTENT
---------------
*/
#content h1 { margin-bottom: 20px; font-size: 50px; color: white; line-height: 100%; }


/* 
--------------
	FOOTER
--------------
*/
#footer { padding: 30px 0; font-size: 15px; color: #999; background: #151515; }
#footer ul { font-size: 0; }
#footer ul li { margin-left: 20px; vertical-align: top; display: inline-block; }
#footer ul li a { font-size: 15px; text-decoration: underline; color: white; }
#footer ul li a:hover { text-decoration: none; }


/*
-----------
	RWD
-----------
*/
@media only screen and (max-width: 1400px) { 
	
	/* DEFAULT */
	.p_l_30 { padding-left: 40px; }
	.p_r_30 { padding-right: 40px; }
	
	/* COOKIE */
	#cookie .inner { padding: 30px 290px 30px 40px; }
	#cookie .inner a.accept { right: 100px; position: absolute; }
	#cookie .inner a.close { right: 40px; }
	
	/* HEADER */
	#header { height: 100vh; }
	
	/* HEADER: Logo */
	#header .logo { left: 40px; }
	
	/* HEADER: Text */
	#header .slogan { font-size: 80px; }
}

@media only screen and (max-width: 1200px) { 

	/* HEADER */
	#header { height: 90vh; }
	
	/* HEADER: Text */
	#header .slogan { font-size: 70px; }
	
	/* ABOUT US: Intro */
	#aboutus .intro .entry { padding: 50px 40px 50px 400px; font-size: 25px; line-height: 1.4; }
}

@media only screen and (max-width: 960px) { 

	/* DEFAULT */
	hr { margin-top: 60px; margin-bottom: 80px; }

	/* COOKIE */
	#cookie .inner { padding: 30px 200px 30px 40px; }
	#cookie .inner a.accept { right: 40px; position: absolute; }
	#cookie .inner a.close { width: 30px; height: 30px; top: -15px; margin-top: 0; background: #000; border: 1px solid #999; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
	#cookie .inner a.close svg { width: 12px; height: 12px; left: 8px; top: 8px; }
	#cookie .inner a.close svg path { fill: white !important; }
	
	/* HEADER: Text */
	#header .slogan { font-size: 60px; }
	
	/* ABOUT US: Intro */
	#aboutus .intro { margin-bottom: 70px; }
	#aboutus .intro img { width: 300px; height: auto; }
	#aboutus .intro .entry { padding: 40px 30px 40px 300px; font-size: 23px; line-height: 1.3; }
	
	/* ABOUT US: Text */
	#aboutus .row .col { width: 100%; display: block; }
	#aboutus .row .col_offers { margin-top: 50px; padding-left: 0; }
	#aboutus .row .col_offers ul { font-size: 23px; line-height: 1.5; }
	#aboutus .row .col_offers ul li { padding-left: 25px; }
	#aboutus .row .col_offers ul li:before { top: 14px; }
	
	/* SHOPS */
	#shops { margin-bottom: 70px; }
	#shops .shop_list .shop { width: 50%; }
	#shops .shop_list .shop:nth-child(3), 
	#shops .shop_list .shop:nth-child(4) { margin-top: 30px; }
	#shops .shop_list .shop .entry { padding-bottom: 0; }
	#shops .shop_list .shop:hover .entry { padding-left: 0; }
	#shops .shop_list .shop .entry:before { display: none; }
	#shops .shop_list .shop .entry .read_more { display: none; }
}

@media only screen and (max-width: 768px) { 

	/* DEFAULT */
	body { font-weight: 400; }
	.p_l_30 { padding-left: 20px; }
	.p_r_30 { padding-right: 20px; }
	
	hr { margin-top: 40px; margin-bottom: 60px; }
	
	/* COOKIE */
	#cookie .inner { padding: 20px 160px 20px 20px; }
	#cookie .inner .text p { display: contents; }
	#cookie .inner a.accept { right: 20px; }
	#cookie .inner a.close { right: 20px; }
	
	/* HEADER: Logo */
	#header .logo { left: 20px; }
	
	/* HEADER: Text */
	#header .slogan { font-size: 8vw; }
	
	/* ABOUT US: Intro */
	#aboutus .intro { margin-bottom: 50px; }
	#aboutus .intro img { width: auto; height: 100%; opacity: 0.3; }
	#aboutus .intro .entry { padding: 30px; font-size: 23px; line-height: 1.3; }
	
	/* SHOPS */
	#shops { margin-bottom: 50px; }
	
	/* FOOTER */
	#footer { padding: 20px 0; text-align: center; }
	#footer .left, 
	#footer .right { float: none; }
	#footer ul { margin-top: 20px; }
	#footer ul li { margin-left: 0; display: block; }
}

@media only screen and (max-width: 768px) and (orientation: landscape) { 

	/* HEADER */
	#header { height: auto; margin-bottom: 50px; }
	#header .inner { height: auto; }
	#header .vertical_middle { top: auto; padding-top: 120px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	
	/* ABOUT US */
	#aboutus { margin-top: 0; }
}

@media only screen and (max-width: 640px) { 

	/* DISPLAY: None */
	.hide_in_640 { display: none !important; }
	
	/* COOKIE */
	#cookie .inner { padding: 20px; }
	#cookie .inner a.accept { width: 100%; right: auto; top: auto; margin-top: 10px; text-align: center; display: block; position: relative; }
	
	/* HEADER */
	#header { height: 100vh; background-image: url(images/img_header_girl_rwd.png); background-position: right top; }
	#header .inner { height: auto; }
	#header .vertical_middle { top: auto; padding-top: 120px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	
	/* HEADER: Text */
	#header .slogan { width: 100%; font-size: 10vw; }
	#header .text { width: 100%; margin-bottom: 30px; }
	
	/* ABOUT US */
	#aboutus { margin-top: 0; padding-top: 0; }
}

@media only screen and (max-width: 480px) { 

	/* MODAL */
	.white-popup .mfp-close { right: 20px; }

	/* HEADER: Text */
	#header .slogan { font-size: 13vw; }
	
	/* SHOPS */
	#shops .shop_list { margin-left: 0; margin-right: 0; }
	#shops .shop_list .shop { width: 100%; margin-top: 50px; padding-left: 0; padding-right: 0; display: block; }
	#shops .shop_list .shop:nth-child(1) { margin-top: 0; }
}