/*
Theme Name: Yes We Web 5.0
Theme URI: https://www.yesweweb.com/
Description: Custom theme for www.yesweweb.com site
Author: Istvan
Author URI: https://www.yesweweb.com/
version: 5.0
Tags: black, blue, grey, green (ex 9BCE17)
*/

:root {
	--bg-main: #0f172a;
	--bg-card: #1e293b;
	--brand-green: #9BCE17;
	--brand-green-hover: #b4e037;
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--transition: all 0.3s ease;
}

/* Grydallo Local */
.gyd-container  {max-width:1024px;}

/* basics */
*, html {padding:0; margin:0; border:0; font-size:100%; vertical-align:baseline; word-wrap:break-word; white-space:normal; box-sizing: border-box;}
html {overflow-y: -moz-scrollbars-vertical; overflow-y: scroll; width:100%; height:100%; font-size:62.5%;} /* Trick to have 1em=10px */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */
body {background: var(--bg-main); color: var(--text-main); height:100%; width:100%; margin:0; padding:0; font-size:1.6rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
::selection {background: var(--brand-green); color:#000;}
::-moz-selection {background: var(--brand-green); color:#000;}
body, p, ul li {line-height:1.6;}
h1 {font-weight:800; font-size:4.8rem; letter-spacing: -0.02em;}
h2 {font-weight:700; font-size:3.6rem; letter-spacing: -0.01em;}
h3 {font-weight:600; font-size:2.4rem;}
h4 {font-weight:600; font-size:2.0rem;}
h5 {font-weight:600; font-size:1.8rem;}
h6 {font-weight:600; font-size:1.6rem;}
h1, h2, h3, h4, h5, h6 {line-height:1.2; text-align:center; margin-bottom: 1rem;}
.grid_6 h3, .grid_6 h4, .subgrid_5 h3, .subgrid_5 h4 {text-align:left;}

@media only screen and (max-width: 1029px) { /*tablet and mobile*/
	body {font-size:1.2em;}
	body, p, ul li {line-height:1.2em;}
	/*h1 {font-weight:900; font-size:300%;}
	h2 {font-weight:700; font-size:200%;}
	h3 {font-weight:400; font-size:150%;}
	h4 {font-weight:200; font-size:125%;}
	h5 {font-weight:200; font-size:110%;}
	h6 {font-weight:200; font-size:100%;}*/
}

img {border:none; padding:0;}
img a {border:none;}
img.left {float:left; border:none; padding:0.5em 0 0 0; }
img.right {float:right; border:none; padding:0 0 0 0.5em; }

abbr, acronym {border-bottom:0.1em dotted #a5a5a5;}
big {font-size:150%;}
blockquote {margin:auto 0.5em; padding:0 0.5em; border-left:0.25em solid #a5a5a5;}
code, pre {font-family:"Courier New", Courier, monospace; width:90%; display: inline-block; word-wrap:break-word;}
q::before {content:"«";}
q::after {content:"»";}
table {border-spacing:0.25em; border-collapse:separate;}
table {border:1px solid #999;}
table tr {border-bottom:1px solid #999;}
th, td {vertical-align:top;}
thead th {font-weight:bolder; color:#8AA4BF; font-size:110%;}
tbody th {font-weight:bold;}
dl dt {font-weight:bold; color:#8AA4BF;}
dl dd {margin-left:4em;}
ul, ol {list-style-position:outside;}
ul li, ol li {margin-left:2em;}
#sidebar ul li, #sidebar ol li {margin-left:1em;}
ul {list-style-type:square;}
ul ul {list-style-type:disc;}
ul ul ul {list-style-type:circle;}
ol {list-style-type:decimal-leading-zero;}
ol ol {list-style-type:upper-latin;}
ol ol ol {list-style-type:upper-roman;}

.left {width:50%; float:left;}
.right {width:50%; float:right;}
.transparent {zoom:1; filter:alpha(opacity=50); opacity:0.5;}
.shadow {box-shadow: 0 0 7px #666; -moz-box-shadow: 0 0 7px #666; -webkit-box-shadow: 0 0 7px #666;}
.clear {clear:both;}
.col2 {-moz-column-count:2; -webkit-column-count:2; column-count:2;}
.col3 {-moz-column-count:3; -webkit-column-count:3; column-count:3;}
.col4 {-moz-column-count:4; -webkit-column-count:4; column-count:4;}
.col2, .col3, .col4 {-webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em;}

.wrapper {min-height:100%; height:auto !important; height:100%; margin:0 auto -40px; /* footer's height */}
.push {height:48px;}

/* Links */
a {color: var(--brand-green); text-decoration:none; transition: var(--transition);}
a:hover {color: var(--brand-green-hover); text-decoration:none;}
a:focus {outline: 0;}  /*remove firefox dotted border */

/* Grids */
.home-grid, .portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
	align-items: stretch;
}

@media only screen and (max-width: 600px) {
	.home-grid, .portfolio-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Boxes */
.home-box, .service-box, .portfolio-box, .archive-box {
	background: var(--bg-card);
	background: linear-gradient(145deg, #1e293b, #1a2332);
	border-radius: 20px;
	padding: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: var(--transition);
	overflow: hidden;
	display: flex;
	height: 100%;
	box-sizing: border-box;
}
.home-box, .service-box, .archive-box {
	flex-direction: row;
	align-items: flex-start;
	gap: 2rem;
}
.portfolio-box {
	flex-direction: column;
	padding: 0;
}
.home-box:hover, .service-box:hover, .portfolio-box:hover, .archive-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	border-color: var(--brand-green);
}
.archive-box {margin-top:1em;}
.home-thumb, .service-thumb { flex-shrink: 0; width: 64px; }
.home-box .home-thumb img, .service-box .service-thumb img {width: 100%; height:auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));}
.home-desc, .service-desc, .portfolio-desc { flex-grow: 1; }
.home-box .home-desc *, .service-box .service-desc *, .portfolio-box .portfolio-desc *, .archive-box * {text-align:left; margin: 0;}
.home-box .home-desc * a[rel], .service-box .service-desc * a[rel], .portfolio-box .portfolio-desc * a[rel], .archive-box a[rel]  {color: var(--text-main); text-decoration:none; font-weight: 700;}
.home-box .home-desc * a:hover, .service-box .service-desc * a:hover, .portfolio-box .portfolio-desc * a:hover , .archive-box a:hover {color: var(--brand-green); text-decoration:none;}
@media only screen and (max-width: 767px) { /*mobile*/
	.archive-box {height:auto;}
}

/* Header */
.headerout {height:auto; width:100%; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #334155; position: sticky; top: 0; z-index: 1000;}
.header {height:100%; margin:0 auto; padding:0 auto; color: var(--text-main);}
.logo h1 a {text-decoration: none;}
.logo img {max-width:100%; height:auto; max-height:50px; margin:1.5rem 0; filter: brightness(1.1);}
.nav {margin:0; text-align:right;}
.nav2 {font-size:1.6rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;}
ul.nav2 {list-style:none; margin:0; padding: 2.2rem 0;}
ul.nav2 li {list-style-type:none; margin:0; padding:0; display:inline-block;}
ul.nav2 li a, ul.nav2 li a:link, ul.nav2 li a:visited {color: var(--text-main); text-decoration:none; padding: 0.5rem 0.8rem; transition: var(--transition); border-radius: 4px; font-size: 1.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;}
ul.nav2 li a:hover, ul.nav2 li a:active, ul.nav2 li.current_page_item a {color: var(--brand-green); background: rgba(155, 206, 23, 0.1);}
ul.nav2 li ul {float:left; margin:0; padding:0;}
@media only screen and (max-width: 767px) { /*mobile*/
	.logo {padding-top:0.5em; text-align: center;}
	.logo img {max-height:40px; margin: 1rem 0;}
	.nav {text-align: center;}
	ul.nav2 {padding: 1rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;}
	ul.nav2 li {display: block; width: auto;}
	ul.nav2 li a, ul.nav2 li a:link, ul.nav2 li a:visited {font-size: 1.2rem; padding: 0.4rem 0.8rem;}
}

/* Intro */
.introout {height:180px; border:none; text-align:center; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 2rem;}
.introout::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(15,23,42,0.2) 0%, rgba(15,23,42,0.8) 100%); z-index: 1; }
@media only screen and (max-width: 1029px) { /*tablet and mobile*/
	.introout {height:120px;}
}
.in_home {background: url(images/in_way.jpg) no-repeat center center; background-size: cover;}
.in_about {background: url(images/in_computer.jpg) no-repeat center center; background-size: cover;}
.in_services {background: url(images/in_pencil.jpg) no-repeat center center; background-size: cover;}
.in_portfolio {background: url(images/in_books.jpg) no-repeat center center; background-size: cover;}
.in_contact-us {background: url(images/in_station.jpg) no-repeat center bottom; background-size: cover;}
.in_domains {background: url(images/in_slide.jpg) no-repeat center center; background-size: cover;}

.intro {margin:0; position: relative; z-index: 2;}
.intro p {font-size: 1.8rem; text-align:center; margin:0 auto; max-width:60rem; color: var(--text-main); line-height: 1.4;}
.intro span.biggest {font-size:1.5em; color:#82ac16; line-height:100%; font-weight:bold;}
.intro span.bold, .intro strong {font-size:100%; font-weight:bold;}
.intro strong {color:#82ac16;}

/* Content */
.contentout {margin:1em auto; padding:0;}
.post h2, h2.pagetitle, .post h2.blog {font-size:300%; color:#82ac16; margin:0.25em 0; font-weight:bold;}
/*.post h2 a[rel] {color:#000; text-decoration: none;}
.post h2 a:hover {color:#777;}*/
.post h2 small, h2.pagetitle small, .post h2.blog small {font-size:0.5em; margin:0 0.1em;}
/*.post h4, .post h4 a[rel] {color:white; text-decoration:none;}
.post h4 a:hover {color:#82ac16; text-decoration:none;}
.post ul {margin:0.5em 1em; padding:0;}
.post ul li {margin-left:20px; list-style: square;}*/
.entry p {margin-top:1em; margin-bottom:1em;}
p.tags {font-size:1em; font-style:italic; width:95%;}

/* Portfolio */
.portfolio-box .portfolio-thumb { order: 1; width: 100% !important; padding: 0 !important; }
.portfolio-box .portfolio-desc { order: 2; width: 100% !important; padding: 2.5rem !important; flex-grow: 1; display: flex; flex-direction: column; }
.portfolio-box .portfolio-desc h4 { margin-bottom: 1rem !important; }
.portfolio-box .portfolio-desc p { line-height: 1.6; }
.portfolio-box .portfolio-thumb img {max-width:100%; width: 100%; height:200px; object-fit: cover; border-radius: 12px 12px 0 0; border: none; transition: var(--transition);}
.portfolio-thumb img {text-decoration: none;}
.portfolio-box:hover .portfolio-thumb img { filter: brightness(1.1); }

/* Single */
.post-meta {text-transform:uppercase; font-size: 1.2rem; text-align:right; margin-bottom:1.5rem; color: var(--text-muted); font-weight: 600;}
.single-portfolio-thumb {text-align:center; margin-bottom: 2rem;}
.single-portfolio-thumb img {max-width:100%; height:auto; max-height:400px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem; background: var(--bg-card); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
@media only screen and (min-width: 768px) and (max-width: 1029px) { /*tablet*/
	.single-portfolio-thumb img {max-height:300px;}
}
@media only screen and (max-width: 767px) { /*mobile*/
	.single-portfolio-thumb img {max-height:250px;}
}

/* Domains */
.domains-box {min-height:430px;}
.domains-box ul {-moz-column-count:3; -webkit-column-count:3; column-count:3;}
.domains-box ul  {-webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em;}
@media only screen and (min-width: 768px) and (max-width: 1029px) { /*tablet*/
	.domains-box ul {-moz-column-count:2; -webkit-column-count:2; column-count:2;}
}
@media only screen and (max-width: 767px) { /*mobile*/
	.domains-box ul {-moz-column-count:1; -webkit-column-count:1; column-count:1;}
}

/* Page Navigation */
.navigation {width:60%; background:rgba(34,34,34,0.5); clear:both; margin:0.5em auto; text-align:center; padding:0.5em 0; border-radius:0.5em; -moz-border-radius:0.5em; -webkit-border-radius:0.5em;}
.navigation .alignleft, .navigation .alignmiddle, .navigation .alignright {padding:0; width:33%;}
.navigation .alignleft {float:left;}
.navigation .alignmiddle {display:inline;}
.navigation .alignright {float:right;}
@media only screen and (max-width: 767px) { /*mobile*/
	.navigation {width:95%; font-size:120%;}
}

/* Sidebar */
#sidebar {float:right; width:40%; margin:0; padding:0;}  /* if l_sidebar in 3col 38% */
#sidebar .sidebarblock {text-align:left;}
#sidebar h3 {font-size:1.5em; font-weight:bold; margin-bottom:5px;  color:white;}
#sidebar p {margin:0; padding: 0 0.5em 0 1em;}
#sidebar img {padding: 0; margin: 0; max-width:300px; max-height:300px;}
#sidebar ul {margin:0.5em 1em; padding:0;}
#sidebar ul li {margin-left:0.5em; list-style: square;}
#sidebar ul ul {margin:0.5em; padding:0;}
#sidebar ul ul li {padding:0 0 0 0.5em; list-style-type:square; color:#898989;}

/* Footer */
.footerout {height:auto; width:100%; background: var(--bg-main); margin-top:5rem; padding: 4rem 0; border-top: 1px solid rgba(255,255,255,0.05);}
.footer {height:100%; margin:0 auto; padding:0 auto; color: var(--text-muted); font-size: 1.4rem;}
.footer p, .footer h5 {padding:0.5rem 0; margin:0; color: var(--text-muted);}
.footer a {color: var(--text-muted); text-decoration: none; transition: var(--transition);}
.footer a:hover {color: var(--brand-green);}
.footer ul {margin-left:1em;}
.footer ul li {list-style-type:square; margin-left:0;}
.footer ul.checked, .footer ul.checked li {list-style-image: url(images/check.png); list-style-type:square;}
.footer ul.btmserv, .footer ul.btmserv li {list-style-type:none; margin-left:0.2em;}

/* Comments */
#respond {padding:0; margin-top:20px; width:360px; height:360px;}
#respond h3 {margin-bottom:3px;}
#commentform {margin:0; padding:0;}
#commentform p {text-transform:uppercase; font-size:10px; margin-bottom:5px; color:#7F7F7F;}
#comment{width:80%;}
#author, #email, #url, #comment, #submit {background: #232323; color:#FFFFFF; font-size:10px; margin:5px 0 0 0; padding:0; border: 1px solid #131313;}
#submit{margin:5px 5px 0 0; padding:3px; color:#FFFFFF;}
#comments{margin:0; padding:0}
ol.commentlist {list-style-type: none; margin:0; padding:0; color:#FFFFFF;}
.avatar{float:left; margin:0 12px 0 0;}
ol.commentlist li {margin:10px 0; padding:5px 0 5px 10px; list-style-type:none;}
ol.commentlist li.alt {/*background: #eee;*/}
ol.commentlist li p {margin: 6px 0 6px 0; padding: 0 12px 0 0; line-height:120%;}
ol.commentlist a {color:#000;}
cite {font-size:10px; font-weight: bold; font-style: normal;}
cite a{text-decoration: none; border-bottom: 1px dotted #465D71;}

/* Contact form */
.wpcf7-form {margin:0 auto; width:90%;}
.wpcf7-form th {font-weight:normal; text-align:left; font-size:1em; padding:0.5em 1em 0 0;}
.wpcf7-form input, .wpcf7-form textarea {background:rgba(34,34,34,0.5); color:#FFF; margin:0.25em 0.25em 0 0; padding:0.5em; border:1px solid #888;}
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form textarea {width:90%;}
.wpcf7-form .wpcf7-submitbt {clear:both; text-align:right;}
.wpcf7-form .wpcf7-submitbt input {padding:0.25em;}
.wpcf7-not-valid-tip-no-ajax {font:1em Arial, Tahoma, Helvetica, Verdana, sans-serif;}
div.wpcf7-response-output {font:1em Arial, Tahoma, Helvetica, Verdana, sans-serif; margin:0; padding:0;}

/* Search */
#searchform {padding:0; margin:1em 0;}
#searchform input#s {margin:0; padding:0.25em; border:0.1em solid #b6b6b6; color: #333333; font-size:1em; height: 16px; width:150px;}
#searchform input#searchsubmit {border:none; background:#333;color:#fff; text-transform:lowercase;}
	
/* Misc */
.wp-caption {border: 0.1em solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 0.25em; margin: 1em;}
.wp-caption img {margin: 0; padding: 0; border: 0 none;}
.wp-caption p.wp-caption-text {font-size:1em; padding: 0 0.25em 0.25em; margin: 0;}

/* zdMultilang */
.lang_switch {}
ul.zd_multilang_list {padding:0.4em 0; margin:0; list-style-type: none;}
ul.zd_multilang_list li {float:left; margin:0; display:block; padding:0 3px;}
ul.zd_multilang_list li a, ul.zd_multilang_list li a:link {margin:0; padding:0; color:#FFF; display:block; text-decoration:none;}
ul.zd_multilang_list li a:hover {color:#82ac16; text-decoration:none;}

/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
	/* width and height of list item (slide)*/ 
	width:450px;
	height:340px;
	overflow:hidden; 
	border-radius: 12px;
	}
@media only screen and (min-width: 768px) and (max-width: 1029px) { /*tablet*/
	#slider li, #slider2 li {max-height:305px; width:403px;}
}
@media only screen and (max-width: 767px) { /*mobile*/
	#slider li, #slider2 li {max-height:230px; width:303px;}
}
	
/* numeric controls */	
ol#controls{
	margin:0;
	padding:0;
	height:20px;	
	}
ol#controls li{
	margin:0 5px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:20px;
	line-height:20px;
	}
ol#controls li a{
	float:left;
	height:20px;
	line-height:20px;
	border:1px solid rgba(255,255,255,0.1);
	background: var(--bg-card);
	color: var(--text-main);
	padding:0 7px 3px 7px;
	text-decoration:none;
	border-radius: 4px;
	transition: var(--transition);
	}
ol#controls li a:hover{
	color: var(--brand-green);
	border-color: var(--brand-green);
	}
ol#controls li.current a{
	border:1px solid var(--brand-green);
	background: var(--brand-green);
	color: var(--bg-main);
	}
ol#controls li a:focus {outline:none;}
/* // Easy Slider */