html, body, div, span, object, h1, h2, h3, p, blockquote, pre,
em, img, strong, b, i, ol, ul, li, fieldset, article, section, form, label, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

a{color:#555;text-decoration:none;}
a:hover{color:#000;}
.slim a{color:#2277dd;}
.slim a:hover{color:#44aaff;}

    
h1{font-size:200%;margin-bottom:10px;}
.index h1{padding-top:6px;font-size:120%;letter-spacing:0.3em;text-transform: uppercase;}

h2{margin:0;padding:6px 8px;font-size:120%;text-transform:uppercase;color:#000;padding:30px 10px;margin:0 40px;letter-spacing:0.15em;}

html{overflow-y:scroll;}

html{width:100%;height:100%;}

body{
	font-family:'Segoe UI','Roboto',arial,sans-serif;
	width:100%;
	text-align:center;
	background-color:#eee;
}

header{
	margin:0;
	padding:0 0 10px 0;
	background-color:#fff;
	color:#fff;
	font-size:26px;
    height:100px;
    top: 0;
    position: sticky;
    z-index: 20;
    box-shadow: 0 0 1px 1px rgba(30,40,60,.1);
}

#header_top{
    background-color:#000;
    height:28px;
}

#header_inside{
    clear:both;
	max-width:1500px;
	margin:auto;
	padding:0 20px;
}

#header_inside div a{line-height:40px;}
#navlogo{float:left;background:#000;height:60px;width:60px;border-radius:30px;}
#navmenu{float:right;padding:10px 0 15px 20px;font-size:80%}
#searchingBox{float:left;margin-top:7px;border-bottom:1px solid #AAA;margin-right:100px;}
#searchingBox input{font-size:70%;width:300px;color:#888;border:none;}
#searchingBox input:focus{outline:none;color:#000;}
#navmenu a{margin-left:30px;color:#888;}
#navmenu a:hover{color:#555;}

#logo{
    display:block;
    margin:0 auto;
    background:url(/logo.png) no-repeat top left;
    background-size:contain;
    width:60px;
    max-width:100%;
    height:60px;
    color:transparent !important;
    vertical-align:middle;
}


#footer_inside{
	max-width:1200px;
	margin:0 auto;
	padding:10px 10px 30px 10px;
	color:#888;
	font-size:80%;
}

#breadcrumb{
	margin:0;
	padding:0;
	text-align:left;
}

#breadcrumb_inside{
	max-width:1120px;
	margin:auto;
	padding:15px 10px;
	color:#777;
	font-size:13px;
}

#breadcrumb_inside a{
	color:#777;
}

#breadcrumb_inside a:hover{
	color:#222;
}

.slim{
    max-width:1160px !important;
}

#page{
	max-width:1600px;
	text-align:left;
	margin:0 auto;
	padding:0;
}

img {
    aspect-ratio: attr(width) / attr(height);
}

.rbox{
    background:#fff;
    padding:20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


.btn {background:#FFF0F3;color:#888;padding:3px 15px;left:5%;text-decoration:none;width:90%;}
.btn:hover{background:#222;color:#fff;}




#gform {color:#000;transition: height .5s ease;overflow : hidden;}
#gform:not(.active) {display: none;}
#gform input{color:#000;border:1px solid #888;}
#gform input[type="file"]{color:#000;border:1px solid #888;}
#gform textarea{color:#000;border:1px solid #888;margin-top:5px;}
#gform select{color:#000;border:1px solid #888;}


.f_email{display:none;}

.article h1{margin-bottom:30px;}
.article p{margin: 0.6em 0;line-height:150%;}
.article li{margin: 0.6em 0;line-height:150%;}
.article ul{margin-left:30px;}

@media (max-width:800px){
	#footer_inside{padding-bottom:60px;}
	#breadcrumb_inside div{display:none;}
}

@media (max-width:600px){
	#header_inside{font-size:80%;}
	#header_inside div a{line-height:30px;}
	#breadcrumb_inside{padding:10px 12px;}
	h1{font-size:150%;}
	h2{font-size:115%;}
	
	#logo{width:40px;height:40px;}
	#navlogo{height:40px;width:40px;border-radius:20px;}
	#navmenu{padding:3px 0 0 0;}
	#navmenu a{margin-left:16px;}
	header{padding:0;height:110px;}
	#header_top a{display:none;}
}

@media (max-width:900px){
    #searchingBox{margin-right:50px;}
    #searchingBox input{width:250px;}
}

@media (max-width:500px){
    #header_inside{padding:0 10px;}
    #searchingBox{margin-right:10px;}
    #searchingBox input{width:170px;}
    #searchingBox a{padding:6px 18px;}
}





.heart{color:#9f9093}
.heart.liked{color:#592693}


@font-face {
  font-family: 'icomoon';
  src:  url('../assets/fonts/icomoon.eot?mbcjdp');
  src:  url('../assets/fonts/icomoon.eot?mbcjdp#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?mbcjdp') format('truetype'),
    url('../assets/fonts/icomoon.woff?mbcjdp') format('woff'),
    url('../assets/fonts/icomoon.svg?mbcjdp#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-clock2:before {
  content: "\e94f";
}
.icon-search:before {
  content: "\e986";
}
.icon-trophy:before {
  content: "\e99e";
}
.icon-heart:before {
  content: "\e9da";
}





.boxes{clear:both;margin:10px 40px;}
.box{float:left;width:18%;margin:10px 2% 30px 2%;padding:20px 1.5%;background:#fff;height:300px;}
.box{
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.box:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.box_pic{text-align:center;height:224px}
.box_pic img{width:120px;height:120px;margin:0 auto;}
.box_pic span{display:block;height:44px;overflow:hidden}
.box_pic p{color:#AAA;font-size:75%;height:52px;overflow:hidden}
.box_mid{color:#888;font-weight:bold;text-align:center;padding:7px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}

.badge{position:absolute;text-align:center;font-weight:bold;background:#bfb0b3;color:#fff;height:24px;width:56px;border-radius:12px;line-height:24px;font-size:90%;margin-top:-32px;margin-left:-5px;letter-spacing: 0.05em;}
#cmenu{float:left;padding:20px 10px;margin:10px 40px;font-size:115%;letter-spacing:0.15em;text-transform:uppercase;font-weight:bold;}
.cselected{border-bottom: 3px solid #555;}
#hmenu{display:none;flex-direction:row;flex-wrap:wrap;padding:0 20px 10px 20px;background:#fff;max-width:800px;float:right;position:absolute;margin:65px 0 0 40px;z-index:999;border:1px solid #aaa;}
#hmenu div{margin-right:2%;width:23%;margin-top:20px;}
#hmenu a{text-transform:uppercase;display:block;padding:6px 15px 8px 15px;font-size:80%;border-radius:16px;}
#hmenu a.selected{background:#555;color:#fff;}
#hmenu a:hover{background:#000;color:#fff;}

#crmenu{float:right;}

#navmenu a{padding:5px 18px 7px 18px;font-size:80%;border-radius:16px;color:#fff;background:#592693;}
#navmenu a:hover{color:#fff;background:#000;}

#header_top h1{float:left;line-height:28px;color:#fff;font-size:14px;font-weight:normal;}
#spotleft{float:right;line-height:18px;}

@media (max-width:1200px){
    .box{width:25%;margin:10px 2% 30px 2%;padding:20px 2%;height:300px;}
}
@media (max-width:900px){
    .box{width:42%;margin:10px 2% 30px 2%;padding:20px 2%;height:300px;}
    #hmenu div{margin-right:2%;width:48%;margin-top:20px;}
    #crmenu{float:none;margin-bottom:0 !important;}
}
@media (max-width:600px){
    .box{width:92%;margin:10px 2% 30px 2%;padding:20px 2%;height:300px;}
    #header_top{height:56px;margin-bottom:10px;}
    #header_top h1{float:none;margin-bottom:0;}
    #spotleft{float:none;}
    #cmenu,#crmenu{font-size:95%;padding:10px 15px;margin:10px 5px 30px 5px;}
    #hmenu{padding:0 10px 10px 10px;margin:65px 5px 0 5px;}
    #hmenu div{margin-top:10px;}
    #hmenu a{padding:3px 5px 4px 5px;}
}