@charset "utf-8";
* {box-sizing: border-box;margin: 0;padding: 0;}
:root {
--container:100%;	
--s-width:280px;
--main:#00ffcc;
--main-hover:#66ffe0;
--white: #ffffff;
--black: #262626;
--gray1: #F7F7F7;
--gray2: #F1F1F1;
--gray3: #EBEBEB;
--gray4: #CCCCCC;
}
.sprite {
  --size: 30px;
  width: var(--size);
  height: var(--size);
  background-image:url(../img/sprite.svg);
  background-size: var(--size) auto;
  background-repeat: no-repeat;
  display: inline-block;
}
body {
	margin:0;
	padding:0;
	background:var(--gray3);
	color:var(--black);
	font-family:'Open Sans',sans-serif;
	text-align:center;
}
.d-eps-bg,
.d-zip-bg,
.download-done{--size: 30px;}

.search-btn-bg,
.nav-burger-bg {--size: 22px;}

.nav-pl,
.nav-pl-bg,
.nav-lt-bg {--size: 18px;}

.nav-btn-bg,
.nav-btn-bg.minus{--size: 12px;}

.search-btn-bg {background-position:0 0;vertical-align: middle;}
.nav-btn-bg {background-position:0 -16px;vertical-align: middle;}
.nav-btn-bg.minus {background-position:0 -32px;}
.nav-burger-bg {background-position:0 -29px;}
.nav-burger-bg.minus {background-position:0 -59px;}
.nav-pl-bg {background-position:0 -73px;}
.nav-lt-bg {background-position:0 -96px;}
.d-eps-bg {background-position:0 -200px;}
.d-zip-bg {background-position:0 -240px;}
.download-done {background-position:0 -280px;}

.flex,.flex-c{display:flex;flex-wrap:wrap;justify-content:space-between;}
.flex-c{align-items: center;}
/* Buttons */
.search-btn,.nav-btn,.d-button,.brand-tags a,.category-button a {cursor:pointer;transition:background 0.2s;}
.search-btn:hover,.d-button:hover{background:var(--main-hover);}
.nav-btn:hover,.brand-tags a:hover,.category-button a:hover {background:var(--gray3);}
button{border:none;}
input[type=text]{text-align:left;padding-left:10px;outline:0;font-size:15px;}
input::-webkit-input-placeholder{color:var(--black);}
input:focus::-webkit-input-placeholder{color:transparent}
h1,h2,h3,h4,p,ul,li{margin:0;padding:0;}
h1{font-size:18.5px;font-weight:900;}
h2,h3{font-size:17px;font-weight:bold;}
p{font-size:15.5px;line-height:22px;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-35{margin-top:35px;}
.pd-10{padding: 10px;}
.pd-15{padding: 15px;}
.pd-20{padding:20px;}
.pd-20-0{padding:20px 0;}
.pd-35{padding:35px;}
.bd-t{border-top:2px solid var(--gray4);}
.bd{border:1px solid var(--gray4);}
.bg-w{background:var(--white);}
.bg-g{background:var(--gray1);}
a{color:var(--black);}

.container{width:var(--container);margin:0 auto;}
.header-container{padding:20px;justify-content:center;}
.layout{display:block;}
.main-col,.side-col{background:var(--gray1);}
/* Header elements */
.logo-header{width:100%;margin:5px auto 30px auto;}
.logo,.logo img{display:block;width:150px;height:27px;margin:0 auto;}

.search{width: var(--s-width);}
.search-bar{
	width:calc(var(--s-width) - 70px);
	height:32px;
	background:var(--gray2);
	border-radius:5px 0 0 5px;
	border:none;
}
.search-btn{
	width:70px;
	height:32px;
	background:var(--main);
	border-radius:0 5px 5px 0;
}
.nav-bar{width:22px;}
.nav-btn{display:none}
.nav-burger{display:block;width:22px;height:22px;margin-left:30px;}

/* Body elements */
.brand-header{text-align:center;}
.brand-title{padding:0 0 10px 0;}

.pg-ad-1,.pg-ad-2,.pg-ad-3{width:100%;height:280px;}
.premium-content{display:none;}

.brand-view{width:100%;margin:0 auto;position:relative;}
.brand-view img{width:320px;height:320px;}

.d-options{display:grid;grid-template-columns: repeat(1, 1fr);gap:20px;}
.d-note{font-size:13px;font-weight:bold;background:var(--gray2);}
.d-size{padding:2px 5px;margin-left:5px;}
.d-button{width:100%;height:60px;font-size:17px;background:var(--main);justify-content:center;}
.d-btn-txt{margin-left:10px;}
.d-info{padding:5px;font-size:12px;text-align:center;background:var(--gray2);}
.d-stats,.d-agreement{display:block;padding:5px;}
.d-stats-count{padding:2px 5px;margin-right:5px; background:var(--black);color:var(--white);}
.d-license{margin-top:5px;}

.brand-tags{width:100%;padding:0 35px 35px;text-align:center;}
.brand-tags a{display:inline-block;padding:5px;margin:5px;font-size:14px;text-decoration:none;border-radius:5px;}
.brand-tags a:hover{background:var(--gray3);}

.brand-about,.brand-note{text-align:justify;line-height:22px;}
.brand-about address{font-size:15px;margin-top:5px;}

.result-header{padding:20px 10px;}
.result-header h3{font-size:14px;}
.result-container{display:grid;grid-template-columns: repeat(2, 1fr);gap:16px;}
.result-group{background:var(--gray3);transition:box-shadow 0.2s;}
.result-group:hover{box-shadow:2px 2px 5px var(--gray4);}
.result-group a{display:block;width:100%;height:100%;text-decoration:none;}
.result-group img{width:100%;height:auto;background:var(--white);}
.result-dtl-container{min-height:58px;background:var(--gray3);}
.result-dtl{font-size:15px;line-height:normal;margin:0 auto;}

.category-button{padding:0 20px 20px 20px;}
.category-button a{display:block;text-decoration:none;font-size:14px;border-radius:5px;}

/* Footer elements */
footer{min-height:100px;margin:50px auto 0;}
.footer-container{padding:20px;border-top:1px solid var(--gray4);}
.page-links{margin:0 auto;text-align:center;}
.page-links a{margin:10px;display:inline-block;font-size:15px;}
.copyright{margin:10px auto;font-size:13px;}
.social{margin:20px auto;width:100%;}

/* Low priority elements */
.navigation{display:none;text-align: left;}
.blockStyle{display:block;}
.nav-counter{display:block;font-size:18px;padding-bottom:10px;border-bottom:1px solid var(--gray4);}
.navigation ul{margin-top:10px; -webkit-column-count:2;column-count:2;-webkit-column-gap:10%;column-gap:10%;text-align:left;}
.navigation li{list-style-type:none;}
.nav-pl{justify-content:flex-start;}
.nav-txt{margin-left:10px;}
.nav-author{display:block;}
.navigation a{text-decoration:none;line-height:30px;}
.navigation a:hover{text-decoration:underline;}
.download-container{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.8);}
.download-note{width:90%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);padding:14px;}
.download-note,.download-info a{color:var(--white);}
.download-info a:hover{color:var(--main);}
.download-loading{position:relative;margin:15px auto;height:100px;}
.download-done{display:none;margin:10px auto;}

@media screen and (min-width:768px){
	.header-container{justify-content:space-between;}
    .logo-header{width:130px;margin:0;}
	.nav-burger{margin:0;}
	.result-container,.d-options{grid-template-columns: repeat(3, 1fr);}
	.d-info,.brand-tags{text-align:left;}    
	.navigation ul{-webkit-column-count:3;column-count:3;}
}
@media screen and (min-width:1024px){
	:root {--container:844px;--s-width:260px;}
	.header-container,.footer-container{padding:20px 0;}
	.nav-bar{width:330px;}
	.nav-burger{display:none;}
	.nav-btn{display:block;width:150px;padding:10px 15px;margin-left:15px;font-size:12px;font-weight:700;border-radius:5px;}
	.nav-btn:hover{background:var(--gray3);}
	.nav-btn-txt{margin-left:10px;}
	.brand-header{text-align:left;}
	.pg-ad-2{display:block;}
	.premium-content,.premium-content-2{display:block;width:100%;margin-top:10px;}
	.premium-header{padding:10px 20px;border-bottom: 1px solid var(--gray3);}
	.premium-link span,.premium-link a{font-size:13px;}
	.premium-link b{text-decoration:underline;}
	.premium-result{padding: 20px 0;}
	.premium-result a{width:140px;height:130px;line-height: 130px; margin:0 10px 10px 10px;display:inline-block;border: 1px solid var(--gray2);}
	.premium-result img{max-width:100%;max-height:100%;vertical-align:middle;}
	.page-links{margin:0;text-align:left;}
	.page-links a{margin:0 10px 0 0;}
	.social{margin:0;width:100px;}
	.navigation ul{-webkit-column-count:4;column-count:4;}
}@media screen and (min-width:1280px){
	:root {--container:1200px;--s-width:520px;}
	.layout{display:grid;grid-template-columns:1fr 336px;gap:20px;}
	.result-container{grid-template-columns: repeat(2, 1fr);}
	.result-dtl-container{min-height:68px;}
	.result-dtl{font-size:13px;}
	.navigation ul{-webkit-column-count:4;column-count:4;}
}