/* Cascading Style Sheets for "https://[www].schmucki-ict.com" and for "https://[www].schmucki-ict.swiss" */

body {
  background-color: white;
}

/* Navigation */
.navbar {
  overflow: visible;
  background-color: #FFFFFF;
  font-family: Arial;

  text-align: center;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 0px;
  padding-top: 0px;
  box-shadow: 0px 0px 0px 0px;
  -webkit-box-shadow: 0px 0px 0px 0px;
  -moz-box-shadow: 0px 0px 0px 0px;
  width: 100%;
  z-index: 100;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 18px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 25px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: grey;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 16px grey;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:visited {
  font-size: 18px;
  background-color: #ddd;
  color: black;
  text-decoration: none;
}

.dropdown-content a:hover {
  font-size: 18px;
  background-color: #ddd;
  color: black;
  text-decoration: none;
}

.dropdown-content a:active {
  font-size: 18px;
  background-color: #ddd;
  color: black;
  text-decoration: none;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Product and Service Image Slider */
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-button{border:3px;border-style:solid;border-radius:8px;border-color:#ffdb4f!important;display:inline-block;padding:4px 8px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-button:hover{color:#ffffff!important;background-color:#ffdb4f!important}
.w3-black,.w3-hover-black:hover{color:#ffdb4f!important;background-color:#7e6100!important}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-button-2{border:3px;border-style:solid;border-radius:8px;border-color:#394e85!important;display:inline-block;padding:4px 8px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-button-2:hover{color:#ffffff!important;background-color:#394e85!important}
.w3-black-2,.w3-hover-black-2:hover{color:#394e85!important;background-color:#719fcf!important}

/* Education */
.education h3 {
  font-size: 12pt;
  font-family: Arial;
  color: black; 
}

.education a {
  font-family: Arial;
  font-size: 12pt;
  color: black;
  text-decoration: underline;
}

.education a:visited {
  font-family: Arial;
  font-size: 12pt;
  color: black;
  text-decoration: underline;
}

.education a:hover {
  font-family: Arial;
  font-size: 12pt;
  color:  white;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.education a:active {
  font-family: Arial;
  font-size: 12pt;
  color: black;
  text-decoration: underline;
}

/* Contact */
.contact h3 {
  font-size: 10pt;
  font-family: Arial;
  font-style: italic;
  color: #707070;
}

/* Contact - support animation */
@-webkit-keyframes support-rotate {
  0% { -webkit-transform: rotate(0deg); }
  10% { -webkit-transform: rotate(36deg); }
  20% { -webkit-transform: rotate(72deg); }
  30% { -webkit-transform: rotate(108deg); }
  40% { -webkit-transform: rotate(144deg); }
  50% { -webkit-transform: rotate(180deg); }
  60% { -webkit-transform: rotate(216deg); }
  70% { -webkit-transform: rotate(252deg); }
  80% { -webkit-transform: rotate(288deg); }
  90% { -webkit-transform: rotate(324deg); }
  100% { -webkit-transform: rotate(360deg); }  
}

@-webkit-keyframes support-rotate2 {
  0% { -webkit-transform: rotate(360deg); }
  10% { -webkit-transform: rotate(324deg); }
  20% { -webkit-transform: rotate(288deg); }
  30% { -webkit-transform: rotate(252deg); }
  40% { -webkit-transform: rotate(216deg); }
  50% { -webkit-transform: rotate(180deg); }
  60% { -webkit-transform: rotate(144deg); }
  70% { -webkit-transform: rotate(108deg); }
  80% { -webkit-transform: rotate(72deg); }
  90% { -webkit-transform: rotate(36deg); }
  100% { -webkit-transform: rotate(0deg); }
}

.support {
  -webkit-animation-name: support-rotate; 
  -webkit-animation-duration: 0.5s; 
}

.support2 {
  -webkit-animation-name: support-rotate2;
  -webkit-animation-duration: 0.5s;
}

/* Contact - buttons animation */
.mail-button {
  background-image: url('images/mail_button.png');
  width: 319px;
  height: 92px;
  background-size: cover;
  display: block;
  transition: background-image 0.3s ease-in-out;
}

.mail-button:hover {
  background-image: url('images/mail_button_hover.png');
}

.jira-itsm-button {
  background-image: url('images/jira_itsm_button.png');
  width: 319px;
  height: 92px;
  background-size: cover;
  display: block;
  transition: background-image 0.3s ease-in-out;
}

.jira-itsm-button:hover {
  background-image: url('images/jira_itsm_button_hover.png');
}

/* Disclosure */

/*
#############
START RENEWAL
#############
*/

body.disclosure {
  background-color: black;
  color: #00ff41;
  font-size: 8pt;
  font-family: Courier;
  text-decoration: none;
  padding: 8px; 
}

.d_title {
  font-size: 10pt;
  font-weight: bold;
  text-align: center;
  text-decoration: none ;
}

.d_h1 {
  margin-top: 20px;
  margin-bottom: 0px;
}

.d_value {
  margin-top: 0px;
  margin-bottom: 2px;
}

.d_lang_buttons {
  width: 50px;
  height: 24px;
  background-size: cover;
  display: block;
}

.d_button_en {
  background-image: url('images/en.png');
}

.d_button_en:hover {
  background-image: url('images/en_hover.png');
}

.d_button_de {
  background-image: url('images/de.png');
}

.d_button_de:hover {
  background-image: url('images/de_hover.png');
}

.d_button_fr {
  background-image: url('images/fr.png');
}

.d_button_fr:hover {
  background-image: url('images/fr_hover.png');
}

.d_button_it {
  background-image: url('images/it.png');
}

.d_button_it:hover {
  background-image: url('images/it_hover.png');
}

.d_ssl {
  background-image: url('images/ssl_verification.png');
  width: 36px;
  height: 46px;
  background-size: cover;
  display: block;
}

.d_geolocation button {
  background-color: black;
  border: 2px solid #00ff41;
  border-radius: 10px;
  color: #00ff41;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin-top: 10px;
}

.d_geolocation button:hover {
  background-color: #00ff41;
  border: 2px solid #00ff41;
  border-radius: 10px;
  color: black;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin-top: 10px;
  box-shadow: 0 0 10px 6px rgba(67, 255, 100, 0.85);
}

/*
###########
END RENEWAL
###########
*/


#appinfo {
  font-family: Courier;
  font-size: 8pt;
  color: #00ff41;
  text-decoration: none;
  background-color: black;
  padding: 8px;
}

.disclosure a {
  font-family: Arial;
  font-size: 8pt;
  color: black;
  text-decoration: none;
}

.disclosure a:visited {
  font-family: Arial;
  font-size: 8pt;
  color: black;
  text-decoration: none;
}

.disclosure a:hover {
  font-family: Arial;
  font-size: 8pt;
  color: black;
  text-decoration: none;
}

.disclosure a:active {
  font-family: Arial;
  font-size: 8pt;
  color: black;
  text-decoration: none;
}

/* Disclosure - geolocation button */
.geolocation button {
  background-color: black;
  border: 2px solid #00ff41;
  border-radius: 10px;
  color: #00ff41;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
}

.geolocation button:hover {
  background-color: #00ff41;
  border: 2px solid #00ff41;
  border-radius: 10px;
  color: black;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  box-shadow: 0 0 10px 6px rgba(67, 255, 100, 0.85);
}

/* Disclosure - language buttons */
.disc_lang_button_en {
  background-image: url('images/en.png');
  width: 50px;
  height: 24px;
  background-size: cover;
  display: block;
}

.disc_lang_button_en:hover {
  background-image: url('images/en_hover.png');
}

.disc_lang_button_de {
  background-image: url('images/de.png');
  width: 50px;
  height: 24px;
  background-size: cover;
  display: block;
}

.disc_lang_button_de:hover {
  background-image: url('images/de_hover.png');
}

.disc_lang_button_fr {
  background-image: url('images/fr.png');
  width: 50px;
  height: 24px;
  background-size: cover;
  display: block;
}

.disc_lang_button_fr:hover {
  background-image: url('images/fr_hover.png');
}

.disc_lang_button_it {
  background-image: url('images/it.png');
  width: 50px;
  height: 24px;
  background-size: cover;
  display: block;
}

.disc_lang_button_it:hover {
  background-image: url('images/it_hover.png');
}