/* latin-ext */
@font-face {
  font-family: 'Terminal Dosis';
  font-style: normal;
  font-weight: 400;
  src: local('Dosis Regular'), local('Dosis-Regular'), url(https://fonts.gstatic.com/s/terminaldosis/v11/_IcvjW_kWHsIHjjUsLbdpH4yX9nggF7UFTm7Co78T5E.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Terminal Dosis';
  font-style: normal;
  font-weight: 400;
  src: local('Dosis Regular'), local('Dosis-Regular'), url(https://fonts.gstatic.com/s/terminaldosis/v11/_IcvjW_kWHsIHjjUsLbdpOTgmCqXnlFlkSe8HoXJthk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.diplayblockmenu{
    padding:0;
    margin:0px;
    width: 100%;	
	font-family:Terminal Dosis;
}
.diplayblockmenu ul{
    list-style:none;
}
.diplayblockmenu li{    
    list-style:none;
	overflow:hidden;
    position: relative;
	opacity:1;
    float: left;
    border: 1px solid #CCCCCC ;
	background: #FFFFFF;
	padding:3px;
	-moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.diplayblockmenu li:last-child{
    margin-right: 0px;
}
.diplayblockmenu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
	margin:0px;
}
.diplayblockmenu-icon{    
	opacity: 0.6;
	height: 58%;
	max-height: 58%;
	overflow:hidden;
	padding:0px;
    left: 0px;
    top: 0px;
	line-height:normal;
	margin:0px;
    text-align: center;
	-moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.diplayblockmenu-icon > div{    
	opacity: 0.9;
	height: 100%;
	max-height: 100%;
	overflow:hidden;
	padding:0px;
    left: 0px;
    top: 0px;
	line-height:normal;
	margin:0px;
}
.diplayblockmenu-icon img{    
	width:100%;
}
.diplayblockmenu-content{
    left: 0px;
    width: 100%;
    height: calc(40% - 5px);
	position:absolute;
	background: #FFFFFF;
	padding-top:2px;
    top: 60%;	
	line-height:normal;
	margin:0px;
}
.diplayblockmenu-main{
    border-top: 1px #000000 dotted;
	overflow:hidden;
    color: #000000;
	font-size:18px;
	text-transform:inherit;
	font-weight:bold;
    opacity: 0.8;
	height:calc(100% - 12px);
    text-align: center;
	line-height:normal;
	margin-top:1px;
	margin-bottom:5px;
	padding-top:1px;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px;
	left: 0px;	
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.diplayblockmenu-sub{
    text-align:center;
    font-size: 14px;
    color: #666;
    opacity: 0.8;
	line-height:normal;
	margin:0px;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.diplayblockmenu li:hover{
    background-color: #fff;
	opacity:1;
}
.diplayblockmenu li:hover .diplayblockmenu-icon{    
    color: transparent;
	opacity: 1;	
    -webkit-animation: moveFromTop 400ms ease;
    -moz-animation: moveFromTop 400ms ease;
    -ms-animation: moveFromTop 400ms ease;	
}
.diplayblockmenu li:hover .diplayblockmenu-icon > div{    
	opacity: 1;	
    -webkit-animation: moveFromTop 400ms ease;
    -moz-animation: moveFromTop 400ms ease;
    -ms-animation: moveFromTop 400ms ease;	
}
.diplayblockmenu li:hover .diplayblockmenu-content{    
	background:#000000;
}
.diplayblockmenu li:hover .diplayblockmenu-sub{
    color: #000;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes moveFromTop {
    from {
        -webkit-transform: translateY(-300%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        -moz-transform: translateY(-300%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        -ms-transform: translateY(-300%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(200%);
    }
    to {
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        -moz-transform: translateY(200%);
    }
    to {
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        -ms-transform: translateY(200%);
    }
    to {
        -ms-transform: translateY(0%);
    }
}