@font-face {
  font-family: 'Handlee';
  src:  url('/fonts/Handlee-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('/fonts/Roboto.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;	
  font-display: swap;
}

@font-face {
  font-family: 'icomoon';
  src:  url('/fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  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-logo:before{content: "\f0ee"; font-size: 2.4rem; color: #d32222;}
.icon-bars:before{content: "\f0c9"; font-size: 2.5rem; color: #ddd; cursor: pointer;}

.icon-home:before{content: "\f015"; font-size: 1.4rem; color: #ddd; padding-right: 0.5rem; vertical-align: top; line-height: normal;}
.icon-register:before{content: "\f067"; font-size: 1.4rem; color: #ddd; padding-right: 0.6rem; vertical-align: top; line-height: normal;}
.icon-login:before{content: "\f023"; font-size: 1.4rem; color: #ddd; padding-right: 0.9rem; vertical-align: top; line-height: normal;}
.icon-upload:before{content: "\f0ee"; font-size: 1.4rem; color: #ddd; padding-right: 0.2rem; vertical-align: top; line-height: normal;}
.icon-images:before{content: "\f03e"; font-size: 1.4rem; color: #ddd; padding-right: 0.4rem; vertical-align: top; line-height: normal;}
.icon-contact:before{content: "\f0e5"; font-size: 1.4rem; color: #ddd; padding-right: 0.4rem; vertical-align: top; line-height: normal;}

.icon-users:before{content: "\f0ca"; font-size: 1.4rem; color: #ddd; padding-right: 0.6rem; vertical-align: top; line-height: normal;}
.icon-projects:before{content: "\f0c9"; font-size: 1.4rem; color: #ddd; padding-right: 0.4rem; vertical-align: top; line-height: normal;}
.icon-account:before{content: "\f2c0"; font-size: 1.4rem; color: #ddd; padding-right: 0.6rem; vertical-align: top; line-height: normal;}
.icon-logout:before{content: "\f08e"; font-size: 1.4rem; color: #ddd; padding-right: 0.4rem; vertical-align: top; line-height: normal;}

.icon-plus:before{content: "\f067"; font-size: 1.2rem; color: #ddd; padding-right: 0.6rem; vertical-align: top; line-height: normal;}
.icon-edit:before{content: "\f013"; font-size: 1.0rem; padding: 0.5rem; vertical-align: top; line-height: normal;}
.icon-edit-big:before{content: "\f013"; font-size: 2.0rem; padding: 0.5rem; vertical-align: top; line-height: normal;}

.icon-trash:before{content: "\f1f8"; font-size: 1.2rem; color: #ddd; padding-right: 0.4rem; vertical-align: top; line-height: normal;}
.icon-search:before{content: "\f002"; font-size: 1.4rem; color: #ddd; vertical-align: top; line-height: normal;}
.icon-info:before{content: "\f06a"; font-size: 1.4rem; padding-right: 0.4rem; vertical-align: top; line-height: normal;}
.icon-ok:before{content: "\f00c"; font-size: 1.0rem; color: #2F8609; padding-right: 0.4rem; vertical-align: top; line-height: normal;}
.icon-warning:before{content: "\f00c"; font-size: 1.0rem; color: #D69701; padding-right: 0.4rem; vertical-align: top; line-height: normal;}
.icon-error:before{content: "\f00d"; font-size: 1.0rem; color: #A30202; padding-right: 0.4rem; vertical-align: top; line-height: normal;}

.icon-up:before{content: "\f0d8"; font-size: 1.2rem; line-height: normal;padding-left: 0.2rem;}
.icon-down:before{content: "\f0d7"; font-size: 1.2rem; line-height: normal;padding-left: 0.2rem;}

body{
 	margin:0;
 	padding: 0;
	font-family: 'Roboto',Tahoma, helvetica, sans-serif;
	font-size: 16px;
	background-color: #262524;
	color: #eee;

}

html,body {
  height: 100%;
}

a{
	color: #35aaff;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}


.main-content{
  display: flex;
  flex-direction: column;
	flex: 1 0 auto;  /* vertical */
	padding-top: 5rem;
}

.main-content-lines {
  border-top: 0.14em solid #ffbb44;
  border-bottom: 0.14em solid #ffbb44;
  padding: 1em 0em;
  margin: 0;
}


.main-content h1{
	margin: 0;
	margin-bottom: 0.5rem;
	font-family: 'Handlee',Tahoma, helvetica, sans-serif;
	border-bottom: 0.1rem solid #ffbb44;

}

.main-content-form{
  display: block;
  width: 100%;
  max-width: 35rem;
  margin: 0 auto;
}

.form-small{
  display: block;
  background-color: #363534;
  padding: 1rem;
}

.form-content input[type="text"],.form-content-small input[type="text"],.form-content input[type="password"],.form-content select, textarea{
  display:block;
  width:100%;
  background: #f1f1f1;
  color:black;
  font-size: 1.2rem;
  padding: 0.5rem;
  margin: 0.25rem 0;
  border: 0.07rem solid #ccc;
  -moz-border-radius: 0.35rem;
  -webkit-border-radius: 0.35rem;
  border-radius: 0.35rem;
  -moz-box-shadow: 0 0.07rem 0.07rem #ccc inset, 0 0.07rem 0 #fff;
  -webkit-box-shadow: 0 0.07rem 0.07rem #ccc inset, 0 0.07rem 0 #fff;
  box-shadow: 0 0.07rem 0.07rem #ccc inset, 0 0.07rem 0 #fff;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  box-sizing: border-box;
}

.form-content-small input[type="text"]{
  font-size: 1.0rem;
  padding: 0.4rem;
  margin: 0.25rem 0;
}

.form-content input[type="text"]:focus,.form-content-small input[type="text"]:focus,.form-content input[type="password"]:focus,.form-content select:focus,textarea:focus{
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 0.07rem #e8c291 inset;
  -webkit-box-shadow: 0 0 0 0.07rem #e8c291 inset;
  box-shadow: 0 0 0 0.07rem #e8c291 inset;
}

.form-content input[type="submit"]{
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background-color: #2F8609;
  font-size: 1.2rem;   
  padding: 0.5rem 4rem;   
  border: 0;
  -moz-border-radius: 0.3rem;
  -webkit-border-radius: 0.3rem;
  border-radius: 0.3rem;
  margin: 1rem auto;
}



/* checkbox *************************************************************/


.checkbox-design {
  vertical-align: top;
  width: 1.19rem;
  height: 1.19rem;
  margin: 0 0.21rem 0 0;
  line-height: 1.7rem;
}
.checkbox-design + label {
  cursor: pointer;
  line-height: 1.7rem;
}
.checkbox-design:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox-design:not(checked) + label {
  position: relative;
  padding: 0 0 0 4.2rem;
}
.checkbox-design:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -0.28rem;
  left: 0;
  width: 3.5rem;
  height: 1.82rem;
  border-radius: 0.91rem;
  background: #CDCDCD;
  box-shadow: inset 0 0.14rem 0.21rem rgba(0,0,0,.2);

}
.checkbox-design:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -0.14rem;
  left: 0.14rem;
  width: 1.54rem;
  height: 1.54rem;
  border-radius: 0.7rem;
  background: #FFF;
  box-shadow: 0 0.14rem 0.35rem rgba(0,0,0,.3);
  transition: all .2s;

}
.checkbox-design:checked + label:before {
  background: #2F8609;
  /*background: #8cc0e0;*/
}
.checkbox-design:checked + label:after {
  left: 1.82rem;
}

/* checkbox *************************************************************/

.green-button,.red-button,.red-button-small{
  display: block;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #ffffff;
  background-color: #2F8609;
  padding: 0.5rem 2rem;
  border: 0;
  -moz-border-radius: 0.3rem;
  -webkit-border-radius: 0.3rem;
  border-radius: 0.3rem;  
}

.red-button{
  background-color: #A30202;
}

.red-button-small{
  background-color: #A30202;
  padding: 0.1rem 0.5rem;
}

.green-button:hover,.red-button:hover,.red-button-small:hover{
  text-decoration: none;
}

.action-result-error{
    color: red;
    text-align: center; 
    padding: 1.5rem;
}



.action-result-ok{
    color: #00f000;
    text-align: center; 
    padding: 1.5rem;
}


@media only screen and (max-width: 65rem ){ 
    .main-content{
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/*********************************************************************************/
/*********************************** pagination begin ****************************/
/*********************************************************************************/



.lb-pagination{
    text-align:center;
}

.lb-pagination a{
    color: #fff;
}

.lb-pagination-link{
    display: inline-block;
    white-space: nowrap;
    padding: 0 0.6em;
    margin: 0.4em 0.2em;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5em;
    text-decoration: none;	        
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    background-color: #35aaff;   
}


.lb-pagination-active{
	display: inline-block;	
    color: #FFF;
    background-color: #565554;	
    padding: 0 0.7em;
    margin: 0.4em 0.2em;
    font-size: 1.0em;
    font-weight: 400;
    line-height: 1.6em;
    text-decoration: none;	        
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;	
}

/*********************************************************************************/
/*********************************** pagination end ******************************/
/*********************************************************************************/

/*********************************************************************************/
/*********************************** breadcrumb begin ****************************/
/*********************************************************************************/

/* Style the list container */
.lb-breadcrumb ol {
  list-style: none; /* Remove default list bullets */
  padding: 0;
  margin: 0;
  display: flex; /* Use flexbox to display items inline */
  flex-wrap: wrap;
}

/* Display list items side by side */
.lb-breadcrumb li {
  display: inline;
}

/* Add a slash symbol (/) before each list item except the first */
.lb-breadcrumb li:not(:first-child)::before {
  padding: 1rem;
  content: ">"; /* Add a space after the slash */
}

/* Style the links */
.lb-breadcrumb li a {
  text-decoration: none;
}

/* Add a color on mouse-over */
.lb-breadcrumb li a:hover {
  text-decoration: underline;
}

/*********************************************************************************/
/*********************************** breadcrumb end ******************************/
/*********************************************************************************/

/*********************************************************************************/
/*********************************** header begin ******************************/
/*********************************************************************************/

.header{
	background-color: #363534;
    z-index: 1000;
    position: fixed;
    width: 100%;
    border-bottom: 0.07rem #444 solid;	
}

.header-content{
	max-width: 65rem;
	height: 4rem;
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin: 0 auto;
    padding: 0rem 0.25rem;	
}

.header-left{
    display: flex;
    flex-grow: 0;
    font-size: 2.0rem;
}

.header-left a{
    display:flex;
    color: #fff;
    text-decoration: none;        
}  

.header-right{
    display: flex;	
    justify-content:flex-end;   
}

.icon-bars{
    display: none;
}

.main-menu ul{
    display: flex;
    flex-direction: row;
	list-style: none; 
	margin: 0; 
	padding-left: 0; 
}

.main-menu a span{
    display: none;
}

.main-menu ul li{
	padding: 0.1rem;
	margin-left: 0.3rem;
}

.main-menu a {
	color: #fff;
	text-decoration: none;
	background-color: #4b4b4b;
	padding: 0.3rem 0.6rem;
	border-radius: 0.3rem;
}

.after-header{
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 65rem;
    margin: 0 auto;
}

@media only screen and (max-width: 40rem ){ 
	.icon-bars{
	    display: block;
	}

	.header-content{
	    padding: 0rem 0.5rem;	
	}

    .main-menu{
        display: block;
        position: fixed;
        width: 15rem;
        max-width: 70%;  
        right: 0;
        top: 0;		
        overflow-y: auto;
        z-index: 1010;
        background-color: #8d2424;
        -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
        -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
        -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
        transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;      
    }


    .main-menu ul{
        flex-direction: column;
    }    
    .main-menu ul li{
        display: block;
        padding: 0.1rem;
        margin-left: 0.1rem;
    } 
    .main-menu a{
        display: block;
        padding: 1.45rem 2rem; 
        background-color: #670101;
        border-radius: 0;
        font-size: 1.3rem;
    }
    .main-menu a span{
        display: inline-block;
    }     
    .mobile-menu-hide{
        visibility: hidden;
        -moz-transform: translateX(15rem);
        -webkit-transform: translateX(15rem);
        -ms-transform: translateX(15rem);
        transform: translateX(15rem);
    }    

}

/*********************************************************************************/
/*********************************** header end ******************************/
/*********************************************************************************/


/*********************************************************************************/
/*********************************** footer begin ******************************/
/*********************************************************************************/


.footer{
	flex: 0 0 auto;

}

.footer-content{
	max-width: 65rem;
    display: flex;
    align-items: center;
    justify-content:space-between;	
    margin: 0.5rem auto;
    padding: 0rem 0.25rem;	
    border-top: 0.12rem solid #ffbb44;
}



.footer-right{
	text-align: right;
}


.bottom-menu ul{
    display: flex;
    flex-direction: row;
    justify-content:flex-end; 
	list-style-type: square;
	margin: 0.5rem 0; 
}




.bottom-menu ul li:first-child{
	list-style: none;
}

.bottom-menu ul li{
	padding: 0.1rem;
	margin-left: 1.5rem;
}

.bottom-menu a {
}

@media only screen and (max-width: 65rem ){ 
    .footer-content{
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

@media only screen and (max-width: 45rem ){ 
    .bottom-menu ul{
        flex-direction: column;
        list-style: none;
    }
}

/*********************************************************************************/
/*********************************** footer end ******************************/
/*********************************************************************************/

/*********************************************************************************/
/*********************************** index (old) begin ******************************/
/*********************************************************************************/

.index-content{
	display: flex;
	flex-direction: column;
	height: 100%;
}

.index-banner{
	display: flex;
	text-align: center;
	font-size: 1.4rem;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
        padding-bottom:2rem;
}

.index-banner h1{
	border-bottom: none;
}

.index-page{
	display: flex;
	text-align: center;
	font-size: 1.0rem;
	flex-direction: column;
	justify-content: top;
	flex: 1 1 auto;
        padding-bottom:0rem;
}

.index-page h1{
	margin: 0;
	margin-bottom: 0.5rem;
	font-family: 'Handlee',Tahoma, helvetica, sans-serif;
        font-size: 1.4rem;
	border-bottom: 0.1rem solid #ffbb44;
}

.report{
    padding:0.5rem;
}

.index-page img{
	width: 100%;
        height: auto;
}

.index-howto{
	display: flex;
	flex-direction: row;
	flex: 0 1 auto;
}

.index-howto-item{
	display: flex;
	flex-direction: column;	
	flex: 1 1 33%;
	padding: 0 0.5rem;
	margin-bottom: 1rem;
}

.index-howto-item h2{
	font-size: 1.2rem;
}

.index-howto-item-order{
	display: flex;
	justify-content: center;
}

.index-howto-item-order span{
	font-size: 2.5rem;
	color: #ffffff;
	background-color: #444;
	padding: 0.3rem 1.1rem;
	border: 0;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;	

}

@media only screen and (max-width: 65rem ){ 
	.index-howto{
		flex-direction: column;
	}
	.index-howto-item{
		flex-direction: row;	
		flex: 0 1 auto;
		margin-bottom: 2rem;
	}
	.index-howto-item-order{
		align-self: center;
		margin-right: 1rem;
	}
}

/*********************************************************************************/
/*********************************** index (old) end ******************************/
/*********************************************************************************/

/*********************************************************************************/
/*********************************** gallery begin ******************************/
/*********************************************************************************/




.index-gallery{
	max-width: 65em;
	margin: 0 auto;
	
}

.index-gallery ul{
	display: flex;
	flex-wrap: wrap;
	list-style: none; 
	margin: 0; 
	padding-left: 0; 
}

.index-gallery ul li{
	display: flex;
	padding: 0.1em;
        flex-grow: 1;
	min-width: 200px;
}



.index-gallery-item{
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 100% 0 0 0;	
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;	
}

.index-gallery-item img{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;	
}

.index-gallery-item-panel{
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;	
	background:rgba(0,0,0,0.4);	 
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    font-size: 0.9rem;		
}

.index-gallery-item-panel-left{
	display: block;	
	padding: 0.2rem 0.3rem;
	flex-grow: 1;
	text-align: left;
	overflow: hidden;

}

.index-gallery-item-panel-right{
	display: block;
	padding: 0.2rem 0.3rem;
	text-align: right;

}



/*********************************************************************************/
/*********************************** gallery end ******************************/
/*********************************************************************************/

/*********************************************************************************/
/*********************************** other ******************************/
/*********************************************************************************/

.top-1rem{
  margin-top: 1rem;
}
.top-05rem{
  margin-top: 0.5rem;
}
.bottom-1rem{
  margin-bottom: 1rem;
}
.bottom-05rem{
  margin-bottom: 0.5rem;
}

.hidden{
  display: none;
}