.app-box {
    padding:0;
    border:0;
    background-color: var(--xvlgrey-color);
	 margin-top:130px;
}
.app-box.large {
	 margin-top:150px;
}

.app-box ul.nav.nav-scroll {
    padding: 0;
    margin:0;
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
	flex-wrap: wrap;
}

.app-box ul.nav.nav-scroll > li {
    border: 0;
    border-radius: var(--box-radius);
    -moz-border-radius: var(--box-radius);
    -webkit-border-radius: var(--box-radius);
    background-color:#FFFFFF;
    height:350px;
    margin-left:15px;
    margin-right:15px;
    margin-bottom:60px;
    -webkit-box-shadow: 0px 2px 3px 3px rgba(210,210,210,0.3); 
    box-shadow: 0px 2px 3px 3px rgba(210,210,210,0.3);
}
.app-box.large ul.nav.nav-scroll > li {
    height:500px;
}
.app-box ul.nav.nav-scroll > li > a {
	height: inherit;
	padding:0 15px 15px 15px;
	outline:none;
	display: block;
	position:relative;
	text-decoration: none;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box {
	position: relative;
	height: 100%;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box > div.image {
	margin: 0 -15px 0 -15px;
	-webkit-border-radius: 9px 9px 0 0;
	border-radius: 9px 9px 0 0;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box > div.image img {
	-webkit-border-radius: 9px 9px 0 0;
	border-radius: 9px 9px 0 0;
	width:100%;
	max-height:200px;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box .subject {
	color: var(--black-color);
	font-size: 1.8em;
	line-height: 1.1em;
	width:100%;
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
    -webkit-line-clamp:3;
	line-clamp:3;
	overflow:hidden;
	display: -webkit-box;
  	-webkit-box-orient: vertical;
	position: absolute;
	top: 220px;
	margin-bottom:15px;	
}
.app-box ul.nav.nav-scroll > li > a > .grid-box .header {
	font-size: 16px;
	color: var(--white-color);
   display: -webkit-box;
   display: -moz-box; 
   display: -ms-flexbox;
   display: -webkit-flex;
   display:flex;
	margin: 0 -15px;
	flex-direction: row;
	align-items: center;
	height: 50px;
	margin-bottom:10px;
	-webkit-border-radius: var(--view-radius) var(--view-radius) 0 0;
	border-radius: var(--view-radius) var(--view-radius) 0 0;
}
.tag-header {
	font-weight:700;
	padding-left:20px;
	padding-right:15px;
}
.cursor-default {
	cursor: default;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box .header .category{
	margin-left: 10px;
	width:100%;
}

.app-box ul.nav.nav-scroll > li > a > .grid-box .header .icon {
	width:50px;
	height:50px;
	display: flex;
	align-items:center;
	justify-content: center;
	margin-right:10px;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box .header .icon i{
	color: var(--white-color);
}

.app-box ul.nav.nav-scroll > li > a > .grid-box .description {
	font-size: 16px;
	color: var(--mdgrey-color);
	width:100%;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box .level {
	color: var(--mdgrey-color);
	font-size: 16px;
	font-family: Roboto-Medium;
	height:20px;
	text-align: left;
	width:100%;
	margin-bottom:20px;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box .summary {
	color: var(--black-color);
	font-size: 1em;
	line-height: 1.25em;
	padding: 0;
	margin-top: 20px;
	-webkit-line-clamp:2;
	line-clamp:2;
	overflow:hidden;
	display: -webkit-box;
  	-webkit-box-orient: vertical;
	width:100%;
	position: absolute;
	top: 320px;
}
.app-box ul.nav.nav-scroll > li > a > .grid-box .author {
	color: var(--mdgrey-color);
	font-size: .95em;
	position: absolute;
	height:25px;
	bottom:60px;
} 
.app-box ul.nav.nav-scroll > li > a > .grid-box .category {
	color: var(--white-color);
	font-size: 14px;
	position: absolute;
	text-align: left;
	bottom: 0;
	padding: 0 4px;
}
.search {
	position: fixed;
	height:60px;
	padding:15px 0;
	width:100%;
	background-color: #FCFCFC;
	top: 95px;
}
.float-right{
	float:right;
}

.blog-tags {
	position: absolute;
	bottom: 0;
	height: 52px;
}

.blog-tags .badge {
	font-size: small;
	color: var(--white-color);
	font-weight:normal;
	min-width:50px;
	border-radius: .8em;
	-webkit-border-radius: .8em;
	margin-right:20px;
}
.blog-tags .badge:nth-child(1){
	background-color: var(--daqua-color);
}
.blog-tags .badge:nth-child(2){
	background-color: #F7AA21;
}
.blog-tags .badge:nth-child(3){
	background-color: #92D4CF;
}
.blog-tags .badge:nth-child(4){
	background-color: #34A9BA;
}
.blog-tags .badge:nth-child(5){
	background-color: #2A448C;
}
.blog-tags .badge:nth-child(6){
	background-color: #800080;
}
.blog-tags .badge:nth-child(7){
	background-color: #808080;
}
.blog-tags .badge:nth-child(8){
	background-color: #222222;
}




@media screen and (min-width: 375px) and (max-width:600px) {
    .app-box ul.nav.nav-scroll>li {
        width:100%;
        margin-left:0;
        margin-right:0;
    }
    .grid-box {
    	-webkit-box-shadow: none;
    	box-shadow: none;
    }
    .grid-box .blog-box .row {
    	display:flex;
    	flex-direction: column;
    }
    .grid-box img.blog-image,
    .left-pane,
    .right-pane {
    	-webkit-border-radius:0;
    	border-radius:0;
    }
    .grid-box .blog-subject {
    		font-size:20px;
    }
}

@media screen and (min-width: 600px) and (max-width:830px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(50% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(100% - 32px);
    	height:620px;
	}
	.app-box ul.nav.nav-scroll > li > a > .grid-box .subject {
		top:360px;
	}
	.app-box ul.nav.nav-scroll > li > a > .grid-box .summary {
		top: 420px;
	}
    .app-box ul.nav.nav-scroll > li > a > .grid-box > div.image img {
    	max-height: 340px;
    }
}

@media screen and (min-width: 830px) and (max-width:970px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(33.333% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(50% - 32px);
    	height:485px;
    }
	.app-box ul.nav.nav-scroll > li > a > .grid-box .subject {
		top:210px;
	}
	.app-box ul.nav.nav-scroll > li > a > .grid-box .summary {
		top: 310px;
	}
    .app-box ul.nav.nav-scroll > li > a > .grid-box > div.image img {
    	max-height: 240px;
    }
}

@media screen and (min-width: 971px) and (max-width:1100px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(33.333% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(50% - 32px);
    	height:525px;
    }
    
	.app-box ul.nav.nav-scroll > li > a > .grid-box .subject {
		top:230px;
	}
	.app-box ul.nav.nav-scroll > li > a > .grid-box .summary {
		top: 340px;
	}
    .app-box ul.nav.nav-scroll > li > a > .grid-box > div.image img {
    	max-height: 240px;
    }
}

@media screen and (min-width: 1101px) and (max-width:1199px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(33.333% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(50% - 32px);
    	height:525px;
    }
    
	.app-box ul.nav.nav-scroll > li > a > .grid-box .subject {
		top:260px;
	}
	.app-box ul.nav.nav-scroll > li > a > .grid-box .summary {
		top: 340px;
	}
    .app-box ul.nav.nav-scroll > li > a > .grid-box > div.image img {
    	max-height: 240px;
    }
}

@media screen and (min-width: 1200px) and (max-width:1449px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(25% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(33.333% - 32px)
    }
}

@media screen and (min-width: 1450px) and (max-width:1649px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(25% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(33.333% - 32px)
    }
}

@media screen and (min-width: 1650px) and (max-width:1749px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(25% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(25% - 32px)
    }
	.app-box ul.nav.nav-scroll > li > a > .grid-box .subject {
		top:200px;
	}
	.app-box ul.nav.nav-scroll > li > a > .grid-box .summary {
		top: 320px;
	}
}

@media screen and (min-width: 1750px) {
    .app-box ul.nav.nav-scroll>li {
        width:calc(25% - 32px)
    }
    .app-box.large ul.nav.nav-scroll>li {
        width:calc(25% - 32px)
    }
}