@charset "utf-8";
* {box-sizing: border-box;margin: 0;padding: 0;}
:root {
--header-height: 144px;
--sb-width: 190px;
--white: #ffffff;	
--black: #262626;
--cyan: #8ceeff;
--cyan2: #50e5ff;
--gray: #f7f7f7;	
--gray2: #cccccc;
}
body{margin:0;padding:0;background:#EBEBEB;font-family:"Open Sans",sans-serif;color:var(--black);text-align:center;}
button,.btn{font-family:"Open Sans",sans-serif;border:none;cursor:pointer;color:var(--black);background:var(--cyan);transition: background 0.2s;}
button:hover,.btn:hover{background:var(--cyan2);}
input[type=text]{font-family:"Open Sans",sans-serif;border:none;outline:0;text-align:left;padding-left:10px;color:var(--black);font-size:15px;}
input::-webkit-input-placeholder{color:var(--black);}input:focus::-webkit-input-placeholder{color:transparent}
li{list-style-type:none;}
h1,h2,h3,p,ul,li{margin:0;padding:0}
h1{font-size:24px;font-weight:900;}
h2{font-size:20px;font-weight:700;}
h3{font-size:16px;}
a{color:var(--black);text-decoration:none;}
.nav-btn:hover,.side-bar a:hover,.navigation a:hover,.note a:hover{color:var(--cyan);}
.flex,.flex-c{display:flex;flex-wrap:wrap;justify-content:space-between;}
.flex-c{align-items:center;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.pd-10{padding:10px;}
.pd-20{padding:20px;}
.pd-35{padding:35px;}
.bg-w{background:var(--white);}
.bg-g{background:var(--gray);}
.bd-t{border-top:1px solid var(--gray2);}
.bd-b{border-bottom:1px solid var(--gray2);}

.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;
}

.d-png-bg,
.d-svg-bg,
.note-done-bg,
.social-fb-bg {--size: 30px;}

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

.tools-burger-bg,
.tools-burger-bg.minus,
.tools-btn-bg,
.tools-color-bg,
.tools-react-bg,
.tools-c-svg-bg,
.tools-c-base64-bg,
.tools-favicon-bg{--size: 18px;}

.nav-bg,
.nav-bg.minus,
.nav-popular-bg,
.nav-latest-bg,
.d-license-bg{--size: 12px;}

.tools-burger{
	display:block;
	cursor:pointer;
	position:absolute;
	top:5px;
	left:var(--sb-width);
	padding: 5px;
	border-radius: 0 5px 5px 0;
	background:#1c1c1c;
}
.tools-burger-bg{background-position:0 -216px;}
.tools-burger-bg.minus{background-position:0 -24px;}

.side-bar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sb-width);
  height: 100vh;
  background:#1c1c1c;
  font-size:13px;
  z-index: 2000;
  transform: translateX(-101%);
  transition: transform 0.3s ease;	
}

.tools-btn,.side-bar li {
  width:var(--sb-width);
  padding:15px 20px;
  align-items:center;
  justify-content: flex-start;
  font-weight:700;
  color:var(--white);
  cursor: pointer;
  position: relative;
  transition: background 0.2s;	
}

.side-bar li:hover {color:var(--cyan);background:var(--black);}
.tools-btn{margin-top:20px;}
.tools-btn:hover{color:var(--white);}

.tools-txt{margin-left:15px;}

.tools-btn-bg{background-position:0 -432px;}
.tools-btn-bg.minus{background-position:0 -408px;}
.tools-color-bg{background-position:0 -240px;}
.tools-react-bg{background-position:0 -312px;}
.tools-c-svg-bg{background-position:0 -264px;}
.tools-c-base64-bg{background-position:0 -336px;}
.tools-favicon-bg{background-position:0 -288px;}
.d-license-bg{background-position:0 -304px;}

body.sidebar-open .side-bar {transform:translateX(0);}
body.sidebar-open .overlay {display:block;}

.overlay {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1500;
}

.tools-caption {
  display: none;
  position: absolute;
  left: calc(5px + var(--sb-width));
  top: 50%;
  transform: translateY(-50%);
  background:var(--black);
  color: white;
  padding: 6px 12px 8px 18px;
  border-radius:6px;
  clip-path: polygon(7% 35%, 7% 0%, 100% 0%, 100% 100%, 7% 100%, 7% 65%, 0% 50%);
  font-size: 12px;
  white-space: nowrap;
}

/* Header elements */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background:var(--black);
  z-index: 1000;
}
.logo-menu{align-items:center;min-width:200px;margin:0 auto;}
.logo-header{width:140px;height:25px;}
.logo{display:block;width:100%;height:100%;background-image:url(https://seekicon.com/assets/img/logo-reverse.svg);background-size:cover;background-repeat:no-repeat;}
.nav-btn{display:none;}
.nav-burger{display:block;cursor:pointer;}
.nav-burger-bg{background-position:0 0;}
.nav-burger-bg.minus{background-position:0 -29px;}
.search {width:336px;height:34px;margin:20px auto;border-radius:8px;align-items: stretch;}
.search-bar, .search-btn {box-sizing: border-box;vertical-align: middle;height: 34px;}
.search-bar{width:266px;border-radius:8px 0 0 8px;border:none;}
.search-btn{width:70px;border-radius:0 8px 8px 0;}
.search-btn-bg{margin-top:4px;background-position:0 -118px;}
.user-menu{color:var(--white);} 

/* Body elements */
.main-container {
  padding-top: var(--header-height);
  transition: margin-left 0.3s ease;
}
.top-layout{display:block;}
.i-view{position:relative;}
.i-view h1{margin-bottom:10px;}
.i-view-link{text-decoration:underline;font-weight: bold;}
.i-view-icon{width:250px;height:250px;margin:0 auto;}
.i-view-icon img{width:100%;height:100%;}
.pg-ad-1,.pg-ad-2,.pg-ad-3{width:100%;height:280px;}
.pg-ad-3{width:100%;margin:20px auto 0 auto;}

.d-button{width:100%;justify-content:center;text-transform:uppercase;font-size:16px;font-weight:900;padding:10px;border:2px solid var(--cyan2);border-radius:8px;}
.d-size{padding:2px 10px;}
.d-png{background:var(--white);}
.d-png-bg{background-position:0 -200px;margin-right:15px;}
.d-svg-bg{background-position:0 -240px;margin-right:15px;}
.d-info{font-size:13px;align-items:center;justify-content:center;}
.d-info a{font-size:13px;text-decoration:underline;}
.d-stats {border-right: 1px solid var(--gray2);}
.d-stats span{display:block;padding:2px 6px;margin-bottom:5px;border:1px solid var(--gray2);border-radius:5px;}
.d-license-bg{margin-left:5px;}
.tags p,.tags a{display:inline-block;font-size:14px;margin:3px;}
.tags a{background:var(--white);padding:3px 8px;border:1px solid var(--gray2);border-radius:5px;transition:border-color 0.2s;}
.tags a:hover{border-color:var(--black)}
.s-icons-container{padding:0 20px 20px;}
.s-icons-header{padding:10px 20px;align-items: center;}
.s-icons-info,.s-icons-btn{font-size:14px;font-weight:bold;margin:0 auto;}
.s-icons-btn{border:2px solid var(--cyan2);border-radius:5px;padding:4px 8px;margin-top:5px;}
.s-icons{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;padding:20px;}
.s-icon{border-radius:25px;transition: box-shadow 0.2s;}
.s-icon:hover{box-shadow:2px 2px 10px var(--gray2);}
.s-icon a{padding:30px;display:block;}
.s-icon img{width:100%;height:100%;display:block;}

/* Footer elements */
footer{background:#F1F1F1;font-size:14px;align-items:flex-start;}
.foot-links a{display:inline-block;}
.foot-links a:hover{text-decoration:underline;}
.copyright,.social{text-align:center;margin:0 auto;}
.copyright{font-size:12px;}
.social-fb{display:block;}
.social-fb-bg{background-position:0 -319px;}

/* Low priority elements */
.navigation{display:none;text-align:left;background:#181818;color:var(--white);}
.blockStyle{display:block;}
.nav-counter{font-weight:700;display:block;margin-bottom:10px;}
.navigation ul{-webkit-column-count:2;column-count:2;-webkit-column-gap:6%;column-gap:6%;}
.navigation a{font-size:14px;line-height:28px;color:var(--white);}
.nav-popular,.nav-latest{align-items:center;justify-content: flex-start;}
.nav-popular-bg{background-position:0 -33px;margin-right:10px;}
.nav-latest-bg{background-position:0 -48px;margin-right:10px;}
.note-container{width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,0.8);}
.note{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
.note-info{color:var(--white);font-size:18px;}
.note a{font-size:18px;display:inline-block;color:var(--white);text-decoration:underline;}
.note-info span{display:block;}
.note-done{display:block;width:50px;height:50px;margin:25px auto;}
.note-done-bg{display:none;background-position:0 -280px;}

@media screen and (min-width:768px){
:root {--header-height: 116px;}
.s-icons-info,.s-icons-btn{margin:0;}
.s-icons{grid-template-columns: repeat(4, 1fr);padding:30px;}
.navigation ul{-webkit-column-count:3;column-count:3;}	
}
@media screen and (min-width:1024px){
:root {--header-height: 76px;}
.side-bar {
top: var(--header-height);
height: calc(100vh - var(--header-height));
transform: translateX(-140px);
z-index: 900;
}
.overlay {display: none !important;}
body:not(.sidebar-open) .main-container {margin-left:50px;}
body.sidebar-open .side-bar {transform: translateX(0);}
body.sidebar-open .main-container {margin-left: var(--sb-width);}	
body:not(.sidebar-open) .tools-txt {display:none;}
body:not(.sidebar-open) .tools-btn,.side-bar li{justify-content:flex-end;}
body.sidebar-open .tools-txt {display:block;}
body.sidebar-open .tools-btn,body.sidebar-open .side-bar li{justify-content:flex-start;}
body.sidebar-open .side-bar li:hover .tools-caption {display: none;}
body:not(.sidebar-open) .side-bar li:hover .tools-caption {display: block;}		
.top-layout{display:grid;grid-template-columns:1fr 336px;gap:20px;}
.logo-menu{margin:0;}
.logo-header{margin-right:10px;}
.search{margin:0;}
.nav-btn{display:flex;align-items:center;font-weight:bold;font-size:12px;text-transform:uppercase;letter-spacing: 0.5px;color:var(--white);margin-left:15px;cursor:pointer;}
.nav-bg{background-position:0 0px;margin-right:5px}
.nav-bg.minus{background-position:0 -16px;margin-right:5px}
.nav-burger,.tools-burger{display:none}
.pg-ad-3{width:336px;margin:0;}
.i-view-icon{width:350px;height:350px;}
.copyright{text-align:left;margin:0;}	
.social	{text-align:right;margin:0;}
.navigation ul{-webkit-column-count:4;column-count:4;}
}
@media screen and (min-width:1280px){
body:not(.sidebar-open) .side-bar {transform: translateX(0);}
body:not(.sidebar-open) .main-container {margin-left: var(--sb-width);}	
body.sidebar-open .side-bar {transform: translateX(-140px);}
body.sidebar-open .main-container {margin-left:50px;}	
body:not(.sidebar-open) .tools-txt {display:block;}
body:not(.sidebar-open) .tools-btn,.side-bar li{justify-content:flex-start;}	
body.sidebar-open .tools-txt {display:none;}
body.sidebar-open .tools-btn,body.sidebar-open .side-bar li{justify-content:flex-end;}
body.sidebar-open .side-bar li:hover .tools-caption {display: block;}
body:not(.sidebar-open) .side-bar li:hover .tools-caption {display: none;}	
.s-icons{grid-template-columns: repeat(8, 1fr);}
.navigation ul{-webkit-column-count:5;column-count:5;}	
}