/* common.css */

body {
  --text-color: #fafafa !important;
  --text-color_rev: #000000 !important;
  --bkg-color: #000000 !important;
  
  --text-head-color: #000000 !important;
  --bkg-head: #fafafa !important;
  --bkg-headrev: #000000 !important;

  --text-footer-color: #fafafa !important;
  --bkg-footer-color: #000000 !important;
}
body.dark-theme {
  --text-color: #000000 !important;
  --text-color_rev: #fafafa !important;
  --bkg-color: #fafafa !important;
  
  --text-head-color: #000000 !important;
  --bkg-head: #fafafa !important;
  --bkg-headrev: #000000 !important;

  --text-footer-color: #000000 !important;
  --bkg-footer-color: #fafafa !important;
}


@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
    --text-color: #000000 !important;
    --text-color_rev: #fafafa !important;
    --bkg-color: #fafafa !important;
  
    --text-head-color: #000000 !important;
    --bkg-head: #fafafa !important;
    --bkg-headrev: #000000 !important;
    
    --text-footer-color: #000000 !important;
    --bkg-footer-color: #fafafa !important;
  }
  body.light-theme {
    --text-color: #fafafa !important;
    --text-color_rev: #000000 !important;
    --bkg-color: #000000 !important;
    
    --text-head-color: #000000 !important;
    --bkg-head: #fafafa !important;
    --bkg-headrev: #000000 !important;
    
    --text-footer-color: #fafafa !important;
    --bkg-footer-color: #000000 !important;
  }
}

* {
  font-family: Cabin, Arial, Helvetica, sans-serif;
}


a {
	color: var(--text-color) !important;
	text-decoration:none !important;
}
a:hover{
	text-decoration:none !important;
}
	
/*container*/
.container-full{ width:100%; margin:0 auto;}
.container-fluid{ width:100% !important;}
.container-content{ padding: 0px 0px; }
/*container*/


.navbar {
  min-height:50px !important;
  border-style: none !important;
  padding:0px !important;
  /*background: linear-gradient(to bottom, #160000 0%, #ff002a 75%, rgba(176,236,255,0) 100%) !important;*/
  background-color: var(--bkg-head, #fff) !important;
  color: var(--text-head-color, #000) !important;
  font-size:14px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.navbar a {
	color: var(--text-head-color) !important;
}
.navbar-inside { 
  text-align:center; 
  padding:15px 0px 12px 0px;
  
}
.navbar-logo-full{ display:block; }
.navbar-logo-768{ display:none; }
.navbar-logo { padding-bottom:5px; }


/*NAVBAR-mobile*/
.menu-content {
   max-height: 0;
   overflow: hidden;
   padding: 0px 0px 0px 0px;
   background-color: rgba(255, 255, 255, 0.8);
}
.collapsible-menu {
   display:block;
   background-color: none;
   position: fixed;
   top: 10px;
   width: 100%;
   display:block;
   z-index: 1;
   padding: 0px 0px 0px 0px;
}
.collapsible-menu ul {
   list-style-type: none;
   padding: 0px;
}
.collapsible-menu a {
   font-size:18px;
   line-height:20px;	
   color:#fff;
   display:block;
   padding: 10px;
   text-decoration: none;
}
.collapsible-menu a:hover {
      color:#8b1e48;
      background-color:#fff;
}
.collapsible-menu label {
   font-size:15px;
   line-height:20px;
   font-color:#000;
   background: url(../../img/icon/menu_blk.png) no-repeat left bottom;
   padding: 15px 0px 10px 40px;
}
input#menuchkbox {
     display: none;
}
            /* Toggle Effect */
input:checked ~ label {
   
 background-image: url(../../img/icon/close_blk.png);
}
input:checked ~ .menu-content {
   padding-top:50px;
   max-height: 100%;
   width: 100%;
   height: 100%;
   background-color: none;
   color:#fff;
}



body {
  padding-top:80px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
  background-color: var(--bkg-color, #fff) !important;
color: var(--text-color, #000) !important;  
}



/*Animation header section*/
header .navbar-logo-img {
  height: 53px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
}
header .navbar-fixed-top { 
	padding:0px 0px 0px 0px !important;
	-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
}
header .navbar-menu {
  padding: 18px 0px 10px 0px;
	-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
}
header .navbar-menu-ss{
  padding:20px 0px;
}
header .navbar-menu-ss a img{
  width:40px;
}
header .navbar-menu-ss a img:hover{
  transform: scale(1.1,1.1);
}
header .navbar-btn { 
	padding: 3px 25px;
  font-size: 20px;
}
header.smaller .navbar-logo-img {
	height: 40px;
}
header.smaller .navbar-fixed-top { 
	padding:0px 0px 3px 0px !important; 
}
header.smaller .navbar-menu {
  padding: 12px 0px 0px 0px;  
}
header .navbar-menu-ss{
  padding:5px 0px;
}
header.smaller .navbar-btn { 
	padding: 0px 25px;
  font-size: 18px;
}
/*END Animation header section*/


/*nav-btn*/
.navbar-btn {
    color: #fff !important;
    position: relative;
    display: inline;  
    border: 2px;
    border-style: none none none none;
    border-color: #faa31b;
    -webkit-transition: color .5s;
    transition: color .5s;
}
.navbar-btn-selected {
    background: var(--bkg-headrev); 
}
.navbar-btn:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  -webkit-transform:scaleX(0);
      -ms-transform:scaleX(0);
          transform:scaleX(0);
  -webkit-transition: -webkit-transform .5s;
          transition:         transform .5s;
}
.navbar-btn:hover {
  transform: scale(1.2);
}
.navbar-btn:hover:before {
  background-color: var(--bkg-headrev); 
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}


/*NAV language section*/
.navbar-sec-lang{
   color: var(--text-head-color) !important;
   font-weight:bold;
   font-size:14px;
   padding-right:20px;
}
/*END NAV language section*/


@keyframes jump {
  0%   {transform: translate3d(0,0,0) scale3d(1,1.1,0.5);}
  40%  {transform: translate3d(0,30%,0) scale3d(1,1.1,0.5);}
  100% {transform: translate3d(0,50%,0) scale3d(1,1.1,0.5);}
}
.jump {
  transform-origin: 50% 50%;
  animation: jump .7s linear alternate infinite;
}


/*Section (footer)*/
.sec-footer{
  /*background: var(--bkg-footer-color) !important;
  color: var(--text-footer-color) !important;*/
  
  background-color: var(--bkg-footer-color) !important;
  color: var(--text-footer-color) !important;
  height: 500px;
  padding: 20px;    
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
/*END Section (header)*/


/*Section (color-bar)*/
.sec-color-bar{
   border-bottom:18px solid;
   border-bottom-color: #194E83; 
}
.sec-color-bar-fixed{
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   border-bottom:18px solid;
   border-bottom-color: #194E83;  
}
/*END Section (color-bar)*/


@media(max-width:1900px) {

   
}

@media(max-width:768px) {
 
   body {
      padding-top:70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
      background-color: var(--bkg-color, #fff) !important;
      color: var(--text-color, #000) !important;  
   }
   
  .navbar-inside {   
    padding:15px 0px 10px 0px;    
  }
  
  header .navbar-logo-img {    
    height: 45px;
     -webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s; 
  }
  header.smaller .navbar-logo-img {
    height: 30px;
  }
   
   .collapsible-menu {
      top: 5px;
   }
	
   
   /*NAV language section*/
   .navbar-sec-lang{
      padding-right:0px;
   }
   /*END NAV language section*/
  
  .sec-footer{
    height: 350px;
  }
  
}


@media(max-width:480px) {
  
   .navbar-inside {   
      padding:15px 0px 10px 0px;    
   }
   
   /*Animation header section*/
   header .navbar-logo-img {    
      height: 45px;   
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; 
   }   
   header.smaller .navbar-logo-img {
      height: 30px;
   }
   /*END Animation header section*/
   
   
   .sec-footer{
      height: 300px;
   }
  
  
}