html {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	scroll-behavior: smooth;
	background-color: rgb(246,245,248);
}

body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: rgb(246,245,248);

	-webkit-text-size-adjust: 100%;
}

.wrapper {
}
.content {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.content-row {
	height: 100%;
}

.row20 {
  vertical-align: top;
  display: inline-block;
  width: 19%;
}
.row25 {
  vertical-align: top;
  display: inline-block;
  width: 24%;
}
.row33 {
  vertical-align: top;
  display: inline-block;
  width: 32%;
}
.row40 {
  vertical-align: top;
  display: inline-block;
  width: 39%;
}
.row50 {
  vertical-align: top;
  display: inline-block;
  width: 49%;
}
.row60 {
  vertical-align: top;
  display: inline-block;
  width: 59%;
}
.row67 {
  vertical-align: top;
  display: inline-block;
  width: 66%;
}
.row100 {
  vertical-align: top;
  display: block;
  width: 100%;
}
.vcenter {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.menu {
	position: absolute;
	height: 0px;
  	background: url('bg.jpg');
  	background-repeat: no-repeat;

        position: fixed;
        width: 100%;
        height: 70px;
        top: 0px;
        z-index: 1;
}
.menu .content {
	z-index: 1;
}
.menu a {
  	display: inline-block;
	vertical-align: top;
  	color: #fff;
  	padding: 12px;
  	cursor: pointer;
  	text-decoration: none;
  	margin-top: 15px;
  	font-size: 16px;
  	font-family: Arial;
	text-shadow: 0 0 2px rgba(255,255,255,0.3);
  	font-smooth: auto;
}
.menu a:hover {
  	background-color: rgb(120,38,231);
  	color: #fff;
	border-radius: 15px;
  	text-decoration: none;
}
.menu .logo {
  	margin-top: 13px;
  	margin-left: 20px;
  	font-size: 30px;
  	line-height: 17px;
  	text-shadow: 0 0 2px rgba(255,255,255,1);
  	height: 17px;
}

.banner_none {
	background-image: none;
}
.banner1 {
	background-image: url('banner01.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 50%;
}
.banner6 {
	background-image: url('banner06.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 50%;
}
.banner7 {
	background-image: url('banner07.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 50%;
}
.banner8 {
	background-image: url('banner08.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 50%;
}
.banner_qr {
	background-image: url('bannerqr.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 50%;
}
#mainbanner {
  	-moz-transition    : 1s ease;
  	-o-transition      : 1s ease;
  	-webkit-transition : 1s ease;
  	transition         : 1s ease;
}

.flag img {
  border: 0px;
  height: 15px;
  border-radius: 12px;
  text-decoration: none;
}


h1 {
}
h2 {
  text-shadow: 0 0 1px black;
  font-size: 30px;
  line-height: 36px;
}

.button {
  display: inline-block;
  padding: 10px;
  border: rgb(120,38,231) 1px solid;
  border-radius: 9px;
  background-color: rgb(120,38,231); /* #49b #38a rgb(120,38,231) */
  text-decoration: none;
  color: #fff;
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  font-weight: normal;
  line-height: 16px;
}
.button + input[type='button'],
.button + input[type='submit'],
.button + select,
.button + a {
  cursor: pointer;
}


.style1 {
	background: url('bg.jpg');
	repeat: no-repeat;
	height: 100%;
}
.style1 .content {
	height: 100%;
}
.style1 .content-row {
 	text-align: center;
  	color: #fff;
  	font-family: Arial;
}

.style2 {
  padding-top: 5%;
  padding-bottom: 5%;
}
.style2 .content {
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  color: #333;
  font-family: Arial;
  font-size: 15px;
  line-height: 25px;

  padding: 20px;
  background-color: #fff;
  border-radius: 20px;
}

.style3 {
  height: 100%;
}
.style3 .content {
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  color: #333;
  font-family: Arial;
  font-size: 15px;
  line-height: 24px;
  height: 100%;
}
.style3 .row33 {
  width: 28%;
  padding: 2%;
}

.style4 {
  background: url('bg.jpg');
  repeat: no-repeat;
}
.style4 .row25 {
  width: auto;
  height: auto;
  padding: 50px;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;

  font-family: Arial;
  font-size: 12px;
  line-height: 24px;
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  text-align: left;
  color: rgba(240,240,240,0.8);
}
.style4 .row25 b {
  color: rgba(255,255,255,0.8);
  font-family: Arial;
  font-size: 16px;
  line-height: 22px;
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
}
.style4 .row25 a {
  color: rgba(255,255,255,0.8);
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  text-decoration: none; 
}

.style4 .row100  {
  padding: 50px;
  width: auto;
}
.style4 .row100, .style4 .row100 a {
  color: rgba(240,240,240,0.8);
  font-family: Arial;
  font-size: 12px;
  line-height: 18px;
  text-shadow: 0 0 1px rgba(0,0,0,0.3);
  text-decoration: none;
}
.style4 .row100 a {
  text-decoration: none;
}
.style4 .row100 a img {
  text-decoration: none;
  height: 30px;
}



@media (max-width: 800px) {
   .menu .logo {
  	display: none;
   }
   .menu {
	background: none;
	background-image: none;
   }
   .menu .content {
	margin-top: 5px;
	width: 73%;
	background-color: rgba(0,0,0,0.9);
	border-radius: 15px;
	padding: 1px;
	padding-left: 8px;
	padding-right: 8px;
   }
   .menu a {
	height: 15px;
	margin: 0;
  	padding: 12px;
	padding-left: 6px;
  	padding-right: 6px;
  	color: #eee;
  	font-size: 14px;
	text-shadow: 0 0 1px rgba(200,200,200,0.5);
   }

   .vcenter {
  	position: static;
  	top: 0px;
  	-webkit-transform: none;
  	-ms-transform: none;
  	transform: none;
   }

   .banner1, .banner6, .banner7, .banner8, .banner_qr {
	background-size: auto 90%;
	background-position: center 0%;
   }

   .style1 .row40 {
        position: absolute;
	top: 460px;
	width: 100%;
        height: 50%;
   }
   .style1 .row60 {
        position: absolute;
	top: 0px;
	width: 100%;
        height: 330px;
        padding-top: 130px;
   }

   .style2 {
	padding: 3%;
   }
   .style2 .row50 {
	display: block;
        width: 100%;
	height: auto;
   }
   .style2 .content {
	font-size: 15px;
   }

   .style3 {
	padding: 2%;
   }
   .style3 h2 {
	text-align: center;
   }
   .style3 .row60 {
	display: block;
        width: 100%;
	height: auto;
   }
   .style3 .row50 {
	display: block;
        width: 100%;
	height: auto;
   }
   .style3 .row40 {
	display: block;
        width: 100%;
	height: 45%;
  	margin-top: 10%;
   }
   .style3 .content {
	font-size: 15px;
   }

   #content_door .row40 {
	height: auto;
   } 
   #content_door .row60 {
	height: 63%;
        padding-top: 0px;
   }
   #content_door .row100 {
	padding: 4%;
	width: 93%;
   }
   #content_door .banner8 {
	background-image: url('banner08h.png');
	background-size: auto 105%;
   }

   .style4 .row25 {
        width: 90%;
 	padding: 4%;
	padding-top: 30px;
	padding-bottom: 30px;
   }
   .style4 .row100 {
        width: 90%;
 	padding: 4%;
	text-align: left;
   }
   .style4 .row25 a,
   .style4 .row100 a {
   }


  @media (max-height: 800px) {
   body, html {
	height: 800px;
   }
   .menu .content a {
	padding-left: 4px;
  	padding-right: 4px;
   }  
   .banner1 {
	background-size: auto 100%;
   }
   .banner1, .banner6, .banner7, .banner8, .banner_qr {
	background-size: auto 75%;
   }
   .style1 .row40 {
	top: 420px;
	height: 370px
   }
   .style1 .row60 {
        height: 320px;
        padding-top: 100px;
   }
   .style2 .content {
	font-size: 12px;
   }
   .style3 .content {
	font-size: 12px;
   }
 }
}

@media (max-width: 400px) {
  .menu .content {
	width: 93%;
	padding-left: 5px;
	padding-right: 5px;
   }
   .menu a {
  	padding: 10px;
	padding-left: 2px;
  	padding-right: 2px;
   }
   .style2 .content {
	font-size: 12px;
	line-height: 21px;
   }
   .style3 .content {
	font-size: 12px;
	line-height: 21px;
   }
}