@font-face {
    font-family: logoFont;
    src: url(fonts/Ubuntu-Regular.ttf);
}
@font-face {
    font-family: materialIcons;
    src: url(fonts/MaterialIcons-Regular.ttf);
}
*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
*::-webkit-scrollbar {
    display: block;
    width: 10px;
    height: 10px;
  }
*::-webkit-scrollbar-thumb {
    height:10px;
    width: 10px;
    background: #aaa;
    border-radius: 10px;
  }
*::-webkit-scrollbar-track {
    background: transparent;
  }
body{
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    display: contents;
    font-size: 14px;
    margin: 0px;
    background:#fff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

    header>.container>ul>li>ul{
        display: none;
        position: absolute;
        background-color: #ffe9e1;
    border:1px solid #fac2ad;
    padding: 20px;
    list-style: none;
    }
    header>.container>ul>li>ul.active{
        display: block;
    }
.image-right{
	max-width:150px;
	display:block;
	margin-left:15px;
	float:right;
}
.image-left{
	max-width:150px;
	display:block;
	margin-right:15px;
	float:left;
}
.modal .btn-close{
	float:right;
}
.icon{
	height:40px;
	margin:15px;
}
.pop-cover{
    transition: all 0.6s ease-out 0s;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.98);
    width:100%;
    height:0px;
    padding:0px;
    z-index: 190;
    overflow: hidden;
}
.pop-cover.active{
    height:100%;
    padding: 70px 0px;
}
.place-bottom{
bottom: 0px;
}
.place-top{
top: 0px;
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
hr{
    height: 1px;
    margin:15px 0px;
    border-color: #aaa;
    background-color: #aaa;
    color: #aaa;
}
.heading{
    background: #ddd;
    color:#222;
    padding-left: 0px !important;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
}
.heading>.material-icon {
    vertical-align:auto;
    margin: 0px 5px;
}
.container{
    width: 100%;
    max-width: 1080px;
    margin: 0px auto;
    padding: 0px 10px;
}
.top-container{
    padding: 60px 0px 0px 0px;
}
.row{
    margin:0px;
}
p{
margin:0px;
}
.material-icon {
    font-family: materialIcons;
    vertical-align: middle;
}
h1,h2,h3,h4,h5{
    font-weight: 500;
}
h1{
    font-size: 200%;
    margin: 10px 0px;
}
h2{
    font-size: 175%;
    margin: 8px 0px;
}
h3{
    font-size: 150%;
    margin: 6px 0px;
}
h4{
    font-size: 125%;
    margin: 4px 0px;
}
h5{
    font-size: 100%;
    margin: 2px 0px;
}
li{
    margin-bottom: 10px;
}
p{
    margin-bottom:10px;
}
.margin-10{
    margin:10px;
}
.margin-20{
    margin:20px;
}
a{
    color:inherit;
    text-decoration: none;
}
.language-data>a{
    height:20px;
    margin:5px 10px;
    line-height: 20px;
    display: inline-block;
}
.language-data>a>img{
    height:20px;
    border-radius: 10px;
    overflow: hidden;
    vertical-align: middle;
}
button.theme-switch
{
    background-color: #222;
    color: #ddd;
    border-radius: 20px;
    padding:5px 10px;
}
.review-slide{
    padding-left: 120px !important;
    position: relative;
    min-height: 120px;
}
.review-slide>.review-owner{
    position: absolute;
    left:20px;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}
.review-slide>.review-owner>img{
    overflow-clip-margin: unset;
    overflow: hidden;
    width:80px;
    height:80px;
    border-radius: 80px;
}
.review-slide>.review-text{
    border-radius: 20px;
    border: 1px solid rgba(50,50,50,0.5);
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
}
.review-slide>.review-text>span{
    font-size: smaller;
}
.review-slide>.review-text>p{
    margin:0 0px 5px 0px;
}
article{
    margin: 10px 0px 20px 0px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
    display: flow-root;
}
/*  SLIDER START */

.slider {
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
.big-slider .slide{
    height:300px;
}
.slides-data {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
.slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    max-width: 800px;
    margin: 0px;
    position: relative;
    padding: 10px;
  }

/*  SLIDER END */

/*  HEADER START */

header{
    z-index: 200;
    top:0px;
    width: 100%;
    position: fixed;
    background: #ddd;
    color:#222;
    box-shadow: 0px 0px 5px #000;
    max-height: 60px;
    font-size: 12px;
    padding:5px 0px;
}
header>.container{
    height: 50px;
    display: block;
    padding: 0px;
}
header>.container>*{
    display: inline-block;
}
header>.container>.logo-box{
    height:50px;
    margin:0px 20px 0px 0px;
    display: block;
    max-width: 800px;
    float: left;
}
header>.container>.logo-box h1{
    margin-top: 10px !important;
    font-size: 20px;
    line-height: 30px;
    display: inline;
    float: left;
    width: auto;
}
header>.container>.logo-box img{
height: 60px;
display: inline-block;
float: left;
margin: -5px 10px 0px 0px;
}
header>.container>ul{
    max-width:800px;
    height:50px;
    float:left;
}
header>.container>btn{
    padding:0px 10px;
    margin:0px;
    margin-left: auto;
    line-height: 50px;
    font-size: 30px;
    text-align: center;
    cursor:pointer;
    height: 50px;
    float:right;
}

/*  HEADER END */


/*  FOOTER START */

footer{
    margin-top: auto;
    background: #949494;
    border-top:4px solid #333;
    color:#000;
    padding:20px 0px;
}
footer p{
    text-align: justify;
}
footer .footer-icon{
    max-height: 60px;
    max-width: 100px;
    width: auto;
    margin:10px 20px 10px 0px;
    vertical-align: middle;
}
footer>.row>div{
padding: 10px 20px;
margin: 0px;
}
footer ul{
    list-style: none;
    padding:0px;
    margin:0px;
}
footer .logo-box{
    color:#666;
    text-shadow: 0px 0px 2px #000;
    margin:20px auto 30px auto;
}
footer h4{
    margin-bottom: 10px;
    margin-top: 5px;
}
footer .footnote>a{
    margin:10px;
}
/*  FOOTER END */

.linkbar{
    z-index: 200;
    background: rgba(255, 255, 255, 0.9);
    color: rgb(20, 20, 20);
    position:fixed;
    overflow:hidden;
    box-shadow: #999 0px 0px 5px;
}
.linkbar>a{
    padding: 10px;
    text-align: center;
    margin:0px;
    cursor: pointer;
    text-decoration: none;
}
.linkbar>a:hover{
    background: rgba(0, 0, 0, 0.1);
}
.linkbar>a>.material-icon{
    font-size: 36px;
    line-height: 40px;
}
.linkbar>a>img{
    height: 40px;
}