/* mystyle_home.css */
html { display: inline-block; margin: 0px auto; text-align: left;}
div {padding: 20px; text-align: left; font-size: 20px;}
.button { background-color: #32cd32; border: none; color: white; padding: 5px 5px;text-decoration: none; font-size: 18px; margin: 0px; width: 120px; height: 40px; cursor: pointer;}
.button1 { background-color: #6666ff; border: none; color: white; padding: 5px 5px;text-decoration: none; font-size: 18px; margin: 0px; width: 120px; height: 40px; cursor: pointer;}
.button2 { background-color: #ffcc00; border: none; color: white; padding: 5px 5px;text-decoration: none; font-size: 18px; margin: 0px; width: 120px; height: 40px; cursor: pointer;}
.button_setting { font-family:'Material Icons Outlined'; color: black; padding: 0px; text-decoration: none; font-size: 100%; margin: 0px; width: auto; height:auto; cursor: pointer; border:none;}
.sidenav {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: white; overflow-x: hidden; transition: 0.5s; margin-top: 81px;}
input[type=text], select {  width: 100%; height: 36px; padding: 8px 8px;  margin: 8px 0;  display: inline-block;  border: 1px solid #ccc;  border-radius: 4px;  box-sizing: border-box; font-family: Candara,Verdana, sans-serif; font-size:16px;}
input[type=date], select {  width: 100%; height: 36px; padding: 8px 8px;  margin: 8px 0;  display: inline-block;  border: 1px solid #ccc;  border-radius: 4px;  box-sizing: border-box; font-family: Candara,Verdana, sans-serif; font-size:16px;}
* {box-sizing: border-box;}
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {max-width: 100%; position: relative; margin: auto;}
.text {color: black; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}
.fade {-webkit-animation-name: fade; -webkit-animation-duration: 8s; animation-name: fade; animation-duration: 8s;}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
div.scrollmenu {
  background-color: white;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: white;
}
.a1 {
	
}
/* unvisited link */
.a1:link {
  color: white;
}
/* visited link */
.a1:visited {
  color: white;
}
/* mouse over link */
.a1:hover {
  color: white;
}
/* selected link */
.a1:active {
  color: white;
}
.dropbtn {
  color: white;
  padding: none;
  font-size: 14px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 230px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 10px 5px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: cc0000;}
.dropdown:hover .dropdown-content {display: block;}

.broucher {
  color: white;
  animation-name: download;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes download {
  from {color: white;}
  to {color: #000080;}
}
.menu1 {
  background-color: rgb(241, 94, 46);
  animation-name: menu11;
  animation-duration: 2s;
}

@keyframes menu11 {
  from {background-color: rgb(241, 94, 46, 0.5);}
  to {background-color: rgb(241, 94, 46);}
}
.menu2 {
  background-color: rgb(241, 94, 46, 0.5);
  animation-name: menu21;
  animation-duration: 2s;
}

@keyframes menu21 {
  from {background-color:rgb(241, 94, 46);}
  to {background-color: rgb(241, 94, 46, 0.5);}
}
.text1 {
  color: white;
  animation-name: text11;
  animation-duration: 2s;
}

@keyframes text11 {
  from {color: blue}
  to {color: white;}
}
.text2 {
  color: blue;
  animation-name: text21;
  animation-duration: 2s;
}

@keyframes text21 {
  from {color:white;}
  to {color: blue;}
}
.text1:hover {
	color: black;
	}
	
	/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 90%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 16px;
  font-weight: bold;
}

@font-face {
    font-family: Bungee_Spice;
    src: url(fonts/Bungee_Spice/BungeeSpice-Regular.ttf);
}
@font-face {
    font-family: Domine;
    src: url(fonts/Domine/Domine-VariableFont_wght.ttf);
}
@font-face {
    font-family: Prompt;
    src: url(fonts/Prompt/Prompt-Regular.ttf);
}
@font-face {
    font-family: Scope One;
    src: url(fonts/Scope_One/ScopeOne-Regular.ttf);
}
@font-face {
    font-family: Abril Fatface;
    src: url(fonts/Abril_Fatface/AbrilFatface-Regular.ttf);
}
@font-face {
    font-family: Titan One;
    src: url(fonts/Titan_One/TitanOne-Regular.ttf);
}
@font-face {
    font-family: Noto Color Emoji;
    src: url(fonts/icons/NotoColorEmoji-Regular.ttf);
}
@font-face {
    font-family: Material Icons;
    src: url(fonts/MaterialIcons/MaterialIcons-Regular.ttf);
}
@font-face {
    font-family: Material Icons Outlined;
	font-weight: 200;
    src: url(fonts/MaterialIcons/MaterialIconsOutlined-Regular.otf) format('opentype');
}
@font-face {
    font-family: Material Icons Two Tone;
    src: url(fonts/MaterialIcons/MaterialIconsTwoTone-Regular.otf);
}
@font-face {
    font-family: Material Icons Round;
    src: url(fonts/MaterialIcons/MaterialIconsRound-Regular.otf);
}
@font-face {
    font-family: Material Icons Sharp;
    src: url(fonts/MaterialIcons/MaterialIconsSharp-Regular.otf);
}