@import url('https://fonts.googleapis.com/css?family=Vesper+Libre&display=swap');
@import url('https://fonts.googleapis.com/css?family=Andika&display=swap');
@font-face {
    font-family: 'Digital-7';
    src: url('../modules/font/lcd/lcd.woff2') format('woff2'),
        url('../modules/font/lcd/lcd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* body,html */

html,body {
	min-height: 100%;
}

.layout-boxed html, .layout-boxed body {
	height: 100%;
}


body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: 'Andika', sans-serif;
	color:#6e6e6e;
}


/********* system - font size *********/
.em2{ font-size:.2em; }
.em3{ font-size:.3em; }
.em4{ font-size:.4em; }
.em5{ font-size:.5em; }
.em6{ font-size:.6em; }
.em7{ font-size:.7em; }
.em8{ font-size:.8em; }
.em9{ font-size:.9em; }
.em1{ font-size:1em; }
.em11{ font-size:1.1em; }
.em12{ font-size:1.2em; }
.em13{ font-size:1.3em; }
.em14{ font-size:1.4em; }
.em15{ font-size:1.5em; }
.em16{ font-size:1.6em; }
.em17{ font-size:1.7em; }
.em18{ font-size:1.8em; }
.em19{ font-size:1.9em; }
.em20{ font-size:2em; }

/********* spacers *********/
.sp5{height:5px;}.sp10{height:10px;}.sp15{height:15px;}.sp20{height:20px;}.sp25{height:25px;}.sp30{height:30px;}.sp35{height:35px;}.sp40{height:40px;}.sp45{height:45px;}.sp50{height:50px;}.sp55{height:55px;}.sp60{height:60px;}.sp65{height:65px;}.sp70{height:70px;}.sp75{height:75px;}.sp80{height:80px;}.sp85{height:95px;}.sp90{height:90px;}.sp95{height:95px;}.sp100{height:100px;}.sp105{height:105px;}.sp110{height:110px;}.sp115{height:115px;}.sp120{height:120px;}.sp125{height:125px;}.sp130{height:130px;}.sp135{height:135px;}.sp140{height:140px;}.sp145{height:145px;}.sp150{height:150px;}.sp155{height:155px;}.sp160{height:160px;}.sp165{height:165px;}.sp170{height:170px;}.sp175{height:175px;}.sp180{height:180px;}.sp185{height:195px;}.sp190{height:190px;}.sp195{height:195px;}.sp200{height:200px;}.sp205{height:205px;}.sp210{height:210px;}.sp215{height:215px;}.sp220{height:220px;}.sp225{height:225px;}.sp230{height:230px;}.sp235{height:235px;}.sp240{height:240px;}.sp245{height:245px;}.sp250{height:250px;}.sp255{height:255px;}.sp260{height:260px;}.sp265{height:265px;}.sp270{height:270px;}.sp275{height:275px;}.sp280{height:280px;}.sp285{height:295px;}.sp290{height:290px;}.sp295{height:295px;}.sp300{height:300px;}.sp500{height:500px;}

/********* system font-colors *********/
.green{ color:#339900 !important}
.red {color:#ff0000  !important}
.blue {color:#275c7c  !important}
.grey {color:#bbbbbb  !important}
.dpurple {color:#670312  !important;} 

/********* system font-weight *********/
.bb {font-weight:bold !important}

/********* system font-link *********/

.link-blue {color:#275c7c  !important; cursor:pointer;text-decoration:none}	.link-blue:hover {color:#17374a  !importan;text-decoration:nonet} 
.link-green{ color:#339900 !important; cursor:pointer;text-decoration:none}	.link-green:hover{ color:#247100 !important;text-decoration:none} 
.link-red {color:#ff0000  !important; cursor:pointer;text-decoration:none}	.link-red:hover{color:#b00000  !important;text-decoration:none} 
.link-grey {color:#bbbbbb  !important; cursor:pointer;text-decoration:none}	.link-grey:hover {color:#8d8d8d  !important;text-decoration:none}

.menu-link {font-size:1em !important; color:#670312  !important; cursor:pointer;text-decoration:none}	.menu-link:hover {color:#cd0523  !important;text-decoration:none} 
.menu-link-active {font-size:1em !important; color:#cd0523  !important; cursor:pointer;text-decoration:none}	.menu-link-active:hover {color:#cd0523  !important;text-decoration:none} 

/********* system - focus *********/
.focus{
    border-color: rgba(82,168,236,.8);
    outline: 0;
    outline: thin dotted \9;
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}

/********* system - hr *********/
.hr{
	width:100%;
	height:1px;
	border-bottom:1px solid #eaeaea;
	padding:0px;
	margin:10px 0;
}

/********* system - backgrounds *********/
.bg-grey{ background-color:#e1e1e1 };

/********* align *********/
.center{text-align:center !important;}
.right{text-align:right !important;}
.left{text-align:left !important;}

/********* align-lang *********/
.rtl{text-align:right;direction:rtl;}
.ltr{text-align:left;direction:ltr;}

/********* system - hidden *********/
.hid{display:none;}

/********* system - no margin *********/
.nom{margin:0px !important;}

/********* system - no padding *********/
.nop{padding:0px !important;}

/********* system - border *********/
.bor{border:1px solid red !important;}
.bog{border:1px solid green !important;}
.bob{border:1px solid blue !important;}
.bos{ border:1px solid #bfbfbf !important;}/********* system - grey *********/
.nobor{border:0px !important; }

/********* system - full height *********/
.fh{ height:100%; }

/********* system - spacers *********/
.sp5{height:5px;}.sp10{height:10px;}.sp15{height:15px;}.sp20{height:20px;}.sp25{height:25px;}.sp30{height:30px;}.sp35{height:35px;}.sp40{height:40px;}.sp45{height:45px;}.sp50{height:50px;}.sp55{height:55px;}.sp60{height:60px;}.sp65{height:65px;}.sp70{height:70px;}.sp75{height:75px;}.sp80{height:80px;}.sp85{height:95px;}.sp90{height:90px;}.sp95{height:95px;}.sp100{height:100px;}.sp105{height:105px;}.sp110{height:110px;}.sp115{height:115px;}.sp120{height:120px;}.sp125{height:125px;}.sp130{height:130px;}.sp135{height:135px;}.sp140{height:140px;}.sp145{height:145px;}.sp150{height:150px;}.sp155{height:155px;}.sp160{height:160px;}.sp165{height:165px;}.sp170{height:170px;}.sp175{height:175px;}.sp180{height:180px;}.sp185{height:195px;}.sp190{height:190px;}.sp195{height:195px;}.sp200{height:200px;}.sp205{height:205px;}.sp210{height:210px;}.sp215{height:215px;}.sp220{height:220px;}.sp225{height:225px;}.sp230{height:230px;}.sp235{height:235px;}.sp240{height:240px;}.sp245{height:245px;}.sp250{height:250px;}.sp255{height:255px;}.sp260{height:260px;}.sp265{height:265px;}.sp270{height:270px;}.sp275{height:275px;}.sp280{height:280px;}.sp285{height:295px;}.sp290{height:290px;}.sp295{height:295px;}.sp300{height:300px;}


/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url("../images/logo.gif");
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

/********* system - override bootstrap focus settings *********/
.btn:focus,.btn:active {outline: none !important;}

/********* system - override bootstrap button-xs *********/
.btn-group-xs > .btn, .btn-xs {
	height: 25px !important;
	font-size: .875rem;
	line-height: .54;
	border-radius: .2rem;
}

.input-xs {
	height: 25px !important;
	padding: 2px 5px !important;
	font-size: .854em  !important;
	border-radius: .2rem  !important;
	border-color:#aaaaaa;
}

.input-xxs {
	height: 21px !important;
	padding: 2px 5px !important;
	font-size: .854em  !important;
	border-radius: .2rem  !important;
	border-color:#aaaaaa;
}

/********* system - override bootstrap input settings +placeholder *********/
input::-webkit-input-placeholder {color: #a59999 !important; font-size:.9em; }
input:-moz-placeholder {color: #a59999 !important; font-size:.9em;}
input::-moz-placeholder {color: #a59999 !important;  font-size:.9em;}
input:-ms-input-placeholder { color: #a59999 !important;  font-size:.9em;}


/********* Side-button *********/
.side-button{
	position:fixed;
	top:54%;
	right:-78px;
	width:180px;
	height:27px;
	z-index:999999;
	background-color:#339900;
	border-radius: 9px 9px 0 0;
	color:white;
	-webkit-transform: rotate(270deg);   
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
	cursor:pointer;
}



/********* Header *********/
.header{
	position:fixed;
	z-index:999;
	width:100%;
	height:81px;
	top:0;
	left:0;
	right:0;
	background-color:white;
    -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
         -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
	-webkit-box-shadow: -1px 3px 5px 1px rgba(158,158,158,1);
	-moz-box-shadow: -1px 3px 5px 1px rgba(158,158,158,1);
	box-shadow: -1px 3px 5px 1px rgba(158,158,158,1);
}

.header-name{
	position:absolute;
	z-index:1000;
	top:20px;
	left:104px;
	display:none;
	line-height:12px;
	border-bottom:1px solid #898989;
}

.header-name-font{
	font-size:.9em;
	font-family: 'Vesper Libre', serif;
	font-weight:500;
	background: -webkit-linear-gradient(bottom, #ac0000 , black);
	background: -o-linear-gradient(bottom, #ac0000, black);
	background: -moz-linear-gradient(bottom, #ac0000, black);
	background: linear-gradient(to bottom, #ac0000 , black); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.header-menu-lg{
	position:absolute;
	right:0px;
	top:31px;
    -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
         -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

/********* Logo LG shadow *********/
.logo-shadow{
	position:absolute;
	width:212px;
	height:100px;
	background-color:rgba(0,0,0,.3);
	border-radius:0 0 104px 104px;
	top:0px;
	left:6px;
}

/********* Header SM *********/
.header-sm{
	position:fixed;
	z-index:999;
	width:100%;
	height:90px;
	top:0;
	left:0;
	right:0;
	background-color:white;
	-webkit-box-shadow: -1px 3px 5px 1px rgba(158,158,158,1);
	-moz-box-shadow: -1px 3px 5px 1px rgba(158,158,158,1);
	box-shadow: -1px 3px 5px 1px rgba(158,158,158,1);
}

.header-sm-name{
	position:absolute;
	z-index:1000;
	top:0px;
	width:100%;
	height:36px;
	background: rgb(55,7,7);
	padding:4px 14px;
	background: linear-gradient(0deg, rgba(55,7,7,1) 0%, rgba(121,9,9,1) 100%);
}

.header-sm-name-font{
	font-size:.9em;
	font-family: 'Vesper Libre', serif;
	font-weight:500;
	color:white;
}

.header-menu-sm{
	position:absolute;
	right:10px;
	top:45px;
	width:220px;
	height:40px;
}

.dropdown-menu{
   margin: 0;
   list-style: none;
   white-space: nowrap;
   border: 1px solid #dfdfdf;
   padding: 10px;
   background-color: #ffffff;
   	-webkit-box-shadow: 0px 0px 19px 1px rgba(133,129,133,1);
	-moz-box-shadow: 0px 0px 19px 1px rgba(133,129,133,1);
	box-shadow: 0px 0px 19px 1px rgba(133,129,133,1);
}

.nav-sm{
	white-space:nowrap;
	font-size:1.1em;
	padding:10px;
}

/********* Logo *********/
.logo{
	width:207px;
	height:205px;
	background-color:white;
	border-radius: 104px;
	z-index:99;
	position:absolute;
	left:9px;
	top:-27px;
    -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
         -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.logo-inner{
	width:191px;
	height:191px;
	background-color:white;
	border-radius: 98px;
	position:absolute;
	left:8px;
	top:12px;
	background-image:url('../images/logo.png');
	background-size:contain;
	cursor:pointer;
    -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
         -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
	background-repeat:no-repeat;
}


.logo-bot{
	width:165px;
	height:165px;
	background-color:white;
	border-radius: 104px;
	z-index:99;
	position:absolute;
	left:0px;
	right:0px;
	margin:auto;
	top:0px;
}

.logo-bot-inner{
	width:162px;
	height:162px;
	background-color:white;
	border-radius: 98px;
	position:absolute;
	left:2px;
	top:2px;
	background-image:url('../images/logo_bot.png');
	background-size:contain;
	Xcursor:pointer;
	Xborder:2px solid #ff3300;
}

.XXlogo-bot-inner:hover{
	background-image:url('../images/logo.gif');
}

/********* Logo SM *********/
.logo-sm{
	width:77px;
	height:77px;
	background-color:white;
	border-radius: 50px;
	position:absolute;
	z-index:1001;
	top:5px;
	left:9px;
	background-image:url('../images/logo-sm.png');
	background-size:contain;
	background-repeat:no-repeat;
	-webkit-box-shadow: 0px 0px 19px 1px rgba(133,129,133,1);
	-moz-box-shadow: 0px 0px 19px 1px rgba(133,129,133,1);
	box-shadow: 0px 0px 19px 1px rgba(133,129,133,1);
}



/* Video frame */
#video_top {
	position: relative;
	background-color: black;
	height: 75vh;
	min-height: 25rem;
	width: 100%;
	overflow: hidden;
}

#video_top video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 0;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

#video_top .container {
	position: relative;
	z-index: 2;
}


@media (pointer: coarse) and (hover: none) {
	#video_top {
		background: url('videos/video.jpg') black no-repeat center center scroll;
	}
	#video_top video {
		display: none;
	}
}


/* scroll to top */

/* scroll to top */

.scrollToTop{
	width:70px; 
	height:70px;
	padding:10px; 
	position:fixed;
	bottom:40px;
	right:20px;
	display:none;
	background: url('../images/scroll_top.png') no-repeat;
	background-size: 70px 70px;
	z-index:999;
	cursor:pointer;
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
}

.scrollToTop:hover{
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */
}


/* Header animation */

.menu-round{
	position:absolute;
	width:98%;
	left:0px;
	right:0px;
	margin:auto;
	height:60px;
	top:120px;
	background-color:white;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
	-moz-box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
	box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
}

.menu-back{
	position:absolute;
	width:100%;
	height:60px;
	top:100px;
	background-color:white;
}

.menu-wrapper{
	position:absolute;
	width:94%;
	height:40px;
	top:140px;
	left:0px;
	right:0px;
	margin:auto;

}

.menu-sm{
	position:absolute;
	width:100%;
	height:50px;
	top:100px;
}


/* flip */

.flip {
  position: relative;
  text-align: center;
}

.flip_front, .flip_back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.flip_front, .flip_back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
cursor:pointer;
}

.flip_front {
/*background-color: #FFFFFF; */
}

.flip_back {
/* background-color: #FFFFFF; */
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.flip.effect_hover:hover .flip_front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.flip.effect_hover:hover .flip_back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}


/* Slider Wrapper */

.slider-wrapper{position: relative; z-index:9;}
.tp-caption a {color:#ffffff;}
.tp-caption a:hover {color:#ffffff;}
.tp-caption a.btn.btn-white { color:<?=$color2?>;}
.tp-caption a.btn.btn-white.btn-alt { color:#ffffff;}
.tp-caption a.btn.btn-white.btn-alt:hover, .tp-caption a.btn.btn-white.btn-alt:focus { color:<?=$color2?>;}
.tp-banner-container{width:100%; position:relative;	padding:0;}
.tp-banner{width:100%;position:relative;}
.tp-banner-fullscreen-container {width:100%;position:relative;padding:0;}



/* Content */
.content{
	margin-top:200px;
	width:100%;
}


/* Input type "date" placeholder hack */

  input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #828282;
    margin-right: 0.5em;
  }
  input[type="date"]:focus:before,
  input[type="date"]:valid:before {
    content: "";
  }


/* Gallery  */
.g-pic-wrapper{
	position:absolute;
	left:5%;
	right:5%;
	top:5%;
	bottom:25%;
	margin:auto;
	box-shadow: 0 0 0 1pt #9b9b9b;
	border:4px solid white;
	cursor:pointer;
	overflow:hidden;
}

.g-pic-wrapper:hover{
	box-shadow: 0 0 3pt 2pt #8dcee7;
}

.g-pic{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	background-size:cover;
	background-position:center;
	border:4px solid white;
	cursor:pointer;
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */
}

.g-pic:hover{
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	-moz-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
    -moz-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

.g-text{
	position:absolute;
	left:5%;
	right:5%;
	top:5%;
	top:77%;
	margin:auto;
	text-align:center;
	font-size:1.35em

}

/*========== Pie Chart ==========*/
.progress-pie-wrapper { text-align:center;}
.progress-pie { display:inline-block;}
.progress-pie.center-block{ display:block;}
.progress-pie.center-block .chart { margin:0 auto;}
.progress-pie .chart { position: relative; width: 180px; height: 180px; text-align: center; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%;}
.progress-pie .chart canvas { -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%;position: absolute; top: 0; left: 0;}
.progress-pie .pie-content {  position:absolute; height: 120px; width:120px; margin-top:30px; margin-left:30px; padding:20px 0; z-index: 2; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%; color:#ffffff;     /* Fallback for web browsers that doesn't support RGBa */background: rgb(0, 0, 0) transparent; /* RGBa with 0.6 opacity */background: rgba(50, 49, 59, 0.8);}
.progress-pie .pie-content .title-pie { font-size:14px; font-weight:bold; display:block; padding:0 12px;}
.progress-pie .pie-content .percent { font-size:40px; display:block; padding-top:5px; line-height:1.4;}
.progress-pie .pie-content .percent.icon-only { line-height:1.5; font-size:48px;}
.progress-pie .pie-content .percent.counter { line-height:1.2;}