/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr.dark {  
  border-top: 1px solid #d8d8d9;
  background-color: #d8d8d9;
}

 hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  background-color: #ccc;
  margin: 1rem 0 2rem;
  padding: 0;
  opacity: 1;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v47-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v47-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v47-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  font-size: 1em;
  line-height: 1.625em;
  color: #081322;
  font-family: 'Roboto', Arial, Verdana, sans-serif;
  background-color: #fff;
  font-weight: 300;
}

header {
  border-bottom:1px solid #fff;
  background-color: #e8ebed;
}

.header-container {
    border-bottom:24px solid #244b89;
}

.content-container {
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}

#headerpic-overlay {
  border-top:1px solid #fff;
  color:#fff;
}

#overlay-container {
  padding-top:0px;
}

.greyscale {
  filter: grayscale(0);
}

.showcase {
  position: relative;
  border:1px solid #dcdcdc;
}

.showcase .stretched-link {
  color:#fff;
  text-decoration: none;
}

.showcase .stretched-link:hover .greyscale {
  transition: all 750ms;
  filter: grayscale(1);
}

.bluebar {
  position:absolute;
  bottom:0;left:0;
  width:100%;
  background-color: rgba(36, 75, 135, 0.75);
  padding:10px 15px;
  color:#fff;
  text-align: center;
}

.border {
  border-color:#dcdcdc !important;
}

.bg-blue-trans {
  background-color: rgba(36, 75, 135, 0.80);
}

h1, .h1 {
  font-size:1.35rem;
  line-height: 1.75rem;
}

h2, .h2 {
  font-size:1.25rem;
  line-height: 1.75rem;
}

h3, .h3 {
  font-size:1.125rem;
  line-height: 1.75rem;
  font-weight:500;
  margin-bottom:1rem;        
}

h4, .h4 {
    font-size:1rem;
    line-height: 1.5rem;
    font-weight:500;
    margin-bottom:0;
}

.p {
  font-size:1rem;
}

.overlay-intro {
  font-size:1rem;
  line-height: 1.5rem;
  font-weight:500;
  margin-bottom: 5px;
}

.overlay-headline {
  font-size:1.5rem;
  line-height: 1.75rem;
  font-weight:400;
  margin-bottom:1.25rem;
}

strong, .strong {
  font-weight:500;
}

.fw-300 {
  font-weight:300 !important;
}
.fw-400 {
  font-weight:400 !important;
}


.small {
  font-size: 0.875rem;
}

a:link,
a:visited {
    text-decoration: none;
    color: #154889;
    font-weight: 500;
}

a:hover,
a:active,
a:focus {
    color: #000;
    text-decoration: none;
}


a.white:link,
a.white:visited {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
}

a.white:hover,
a.white:active,
a.white:focus {
    color: #fff;
    text-decoration: underline;
}

.btn-primary,
a.btn-primary {
  background-color:#244b89;
  color:#fff;
  border:0;
  padding:0.5rem 3rem;
  font-size:1.125rem;
  font-weight:500;
  border-radius: 7px;
  border:1px solid rgba(255, 255, 255, 0.35);
}

.btn-primary2 {
  background-color:#d3e3fc;
  color:#244b89;
  padding:0.5rem 3rem;
  font-size:1.125rem;
  font-weight:500;
  border-radius: 7px;
  border:1px solid rgba(255, 255, 255, 0.35);
}

.btn-primary2:hover {
  background-color:#fff;
  color:#000;
}

#top-bar a:link,
#top-bar a:visited {
    text-decoration: none;
    color: #2a2d30;
    font-weight: 400;
}

#top-bar a:hover,
#top-bar a:active,
#top-bar a:focus {
    color: #000;
    text-decoration:underline;
}

#logo {
  display:none;
}

#zert {
  position:absolute;
  left:190px;
  top:20px;
  width:80px;
  height:auto;
}


.figure .copyright {
  background-color:#000;
  background-color:rgba(0, 0, 0, 0.45);
  padding:0 10px;
  color:#fff;
  position:absolute;
  bottom:0; left:0;
  width:100%;
}

/* .figure  */
.copyright-vertical {
	position: absolute;
	top: 0;
	right: 5px;
  display:grid;
  height:100%;
  width:25px;
	z-index: 2;
	color: #fff;
  padding:10px 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  writing-mode: vertical-rl;
	line-height: 1;
	font-size: 10px;  
}

input:required+label:after,
select:required+label:after,
textarea:required+label:after {
    content: '*';
    vertical-align: top;
    color: #f00;
}

.fhp {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}


/* Navigation
*****************************/

.navbar-brand {
  padding: 0;
  margin-top:5px;
  width: 220px;
  height: 65px;
  background-image: url('../img/schott-schlosserei.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.nav-item {
  border-bottom:1px solid #ccc;
}

.nav-link:focus-visible {
  outline: 0;
  box-shadow:none;
}

.nav-item .nav-link {
  font-size:1.125rem;
  color:#fff;
  display:inline-block;
  width:100%;
}

.navbar-nav .nav-link.show {
  color: #154889;
  background-color: #fff;
  font-weight:500;
}

.dropdown-menu {
  background-color:#154889 !important;
  border:0;
}

.dropdown-item {
  color: #fff !important;
}

.dropdown-item:focus, .dropdown-item:hover {
  color: #fff;
  background-color: transparent;
}

.mlink a::before,
.dropdown-item::before {
	content: '';
	display: inline-block;
	height: 16px;
	width: 16px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23c8b8a9" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/></svg>');
	margin-right: 5px;
	vertical-align: -10%;
  transition: all 0.3s;
}

.mlink a:hover::before,
.dropdown-item:hover::before {
	content: '';
	display: inline-block;
	height: 16px;
	width: 16px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" class="bi bi-arrow-right-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/></svg>');
	margin-right: 1px;
  margin-left:4px;
	vertical-align: -10%;
  transition: all 0.3s;
}

.mlink a:link, .mlink a:visited {
	text-decoration: none;
	font-weight: 400;
	color: #fff;
}

.navbar-toggler {
	border:1px solid #333; 
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 33, 33, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 1px;
}


/* Ende Navigation
*****************************/

.blue {
  color:#244b89;
}

.bg-blue{
  background:#244b89;
  color:#fff;
}

.bg-grey {
  background-color:#e8ebed;
  color:#000;
}

.form-control {
  background-color: #fff;
  border-color:#ccc;
}

.form-control:focus {
  color: #333;
  border-color: #6d6b6c;
  outline: 0;
  box-shadow:none;
}

.form-check-input:focus {
  box-shadow:none;
}

.form-check-input {
  border-color: #ccc;
}
.form-check-input:checked {
  background-color: #47241a;
  border-color: #47241a;
}

ul.listing {
  padding-left:1rem;
}

ul.noicon {
  padding-left:1rem;
}

ul.check {
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg transform="translate(0, 6)" transform-origin="center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%2329a311" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>');
  padding-left:1.5rem;
}
ul.check li,
ul.check-2 li {
  font-weight:400;
  margin-bottom:0.75rem;
  padding-left:0.25rem;
}  


#aktuelles {
  position: relative;
  background-color: #e7ebee;
  border: 1px solid #dcdcdc;
}

#aktuelles-content {
  position:absolute;
  bottom:15px; right:30px;
  width:70%;
  height:215px;
  border:1px solid #f00;
}

#aktuelles-typ {
  position:absolute;
  bottom:0;left:0;
}  


.accordion-button {
  font-size:1.125rem;
}

.accordion-button:not(.collapsed) {
  color:#fff;
  background:#13427e;
  box-shadow: none;
}

.accordion-button.collapsed:hover {
  background:#fff;
}

.accordion-button.collapsed {
  color:#000;
  background:#a0b4cc;
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.letterbox {
  background:#f6f6f6;
  padding:0 1em 1em 1em;
  border-radius:7px;
}

.letterfield {
  position:relative; 
  padding-top:10px;
  padding-bottom:7px;
  text-align:center;
  background:#fff;
  border-bottom:3px solid #fff;
  /* border-radius:7px; */
}

.letterfield:not(.invalid):hover {
  border-bottom:3px solid #13427e;
}

.letterfield.invalid {
  background:#f2f2f2;
  color:#444;
  border-bottom:3px solid #f2f2f2;
}

.letterfield.active {
  border-bottom:3px solid #154889;
}



/*
.greencircle {
  list-style: none;
  counter-reset: steps;
}
.greencircle li {
  counter-increment: steps;
  padding-left:0.5em;
}
.greencircle li::before {
  content: counter(steps);
  margin-right: 0.25em;
  margin-left:-2.5em;
  transform: translateY(10px);
  background: #4bad00;
  color: white;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  line-height: 1.5em;
  font-weight:500;
  font-size:1em;
}
*/
footer {
  background-color: #244b89;
  color:#fff;
  padding:1.75rem 0;
}

.footer-head {
  border-bottom:1px solid #57729d;
  padding-bottom:8px;
  font-weight:400;
}

.fw-400 {
  font-weight:400;
}

.fw-500 {
  font-weight:500;
}

.fw-700 {
  font-weight:700;
}

footer a:link,
footer a:visited {
    text-decoration: none;
    color: #fff;
    font-weight: 400;
}

footer  a:hover,
footer  a:active,
footer  a:focus {
    color: #fff;
    text-decoration: underline;
}

.navbar .has-megamenu{
  position:static!important;
}

.navbar .megamenu {
  left:0; right:0; 
  width:100%; 
  margin-top:0;  
  background-color:#000e2b;
  padding:0.5rem 1.5rem;
}

.menuhead {
  font-size:1.125rem;
  font-weight:500;
  line-height:2.5rem;
  border-bottom:2px solid #fff;
  margin-bottom:5px;
}

.mlink {
  line-height:2rem;
  padding-left:0;
}

.mlink .mlink {
  padding-left:20px;
}

.ma-box {
  background-color: #d5c9b4;
}

#sidebar {
  position:fixed;
  bottom:0; right:0;
  width:100%;
  display: flex;
  justify-content:space-around;
  background-color: #47241a;    
  padding-top:8px;
  z-index:100;
}

.sidebarbutton {
  color:#fff !important;
  text-align: center;
}

#backtopBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #154889;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  border:2px solid #fff;
}

#backtopBtn:hover {
  border:2px solid #fff;
}

#mobile-btm-bar {
    width: 100%;
    background: #154889;
    padding: 10px 10px 15px;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    margin:0;
    width:100%;
    z-index: 10;
    font-size:0.875rem;
    text-align:center;
}


@media (max-width: 991px) {
  .navbar-collapse {
      position: fixed;
      top: 86px;
      left: 0;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 15px;
      width: 100%;
      height: calc(100% - 86px);
      background:#154889;
      z-index:10;
      overflow-y: auto;
  }

  .nav-link {
    padding-left:15px;
    padding-right:15px;
  }

  .menuhead .last {
    border:0;
  }

  .navbar-collapse.collapsing {
      left: -100%;
      transition: height 0s ease;
  }

  .navbar-collapse.show {
      left: 0;
      transition: left 300ms ease-in-out;
  }

  .navbar-toggler.collapsed ~ .navbar-collapse {
      transition: left 500ms ease-in-out;
  }
}

@media (min-width: 576px) {
/*
  #overlay-container {
    display:flex;
    align-items: center;
  }
*/

  #headerpic-overlay {
    position:absolute;
    top:0; bottom:0;
    left:0; right:0; 
    color:#fff;
    border-top:0;
  }

  #overlay-container {
    padding-top:0px;
  }

  .oln {
    color:#a2a4a5;
    font-size:3rem;
    font-weight:500;
    /*
    display:inline-block;
    background: #4bad00;
    text-align: center;
    color: #fff;
    padding-top:0.5rem;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    font-weight:500;
    font-size:1.2rem;
    line-height:1.2rem;
    */
  }

}

@media (min-width: 768px) {

  h1, .h1 {
      font-size:1.5rem;
      line-height: 1.75rem;
      font-weight:600;
      margin-bottom:0;
  }

  h2, .h2 {
    font-size:1.375rem;
    line-height: 1.75rem;
    font-weight:500;
    margin-bottom:0;
  }

  h3, .h3 {
      font-size:1.125rem;
      line-height: 1.5rem;
      font-weight:500;
      margin-bottom:1.5rem;        
  }

  h4, .h4 {
    font-size:1rem;
    line-height: 1.5rem;
    font-weight:500;
    margin-bottom:0;
  }

  p {
    font-size:1.125rem;
    line-height: 1.75rem;
  }

  .innung-text {
    line-height: 40px;
    vertical-align: middle;
  }

  #aktuelles {
    position: relative;
  }

  #aktuelles-content {
    position:absolute;
    bottom:15px; right:30px;
    width:460px;
    height:215px;
  }

  #aktuelles-typ {
    position:absolute;
    bottom:0;left:0;
  }  


  .overlay-intro {
    font-size:1.125rem;
    line-height: 1.5rem;
    font-weight:500;
    margin-bottom:10px;
  }

  .overlay-headline {
    font-size:2rem;
    line-height: 2.5rem;
    font-weight:500;
    margin-bottom:1.5rem;
    color:#f7fae0;
  }


}

@media (min-width: 992px) {
/*  
  .hide-nav {
    top:-142px;
  }
*/

  .topcon {
    line-height: 40px;
    vertical-align: middle;
  }

  .navbar-brand {
    display: none;
  }

  #logo {
    display:inline-block;
    width:270px;
    height:auto;
    margin-top:-20px;
    margin-bottom:5px;
  }

  #zert {
    display:inline-block;
    position:relative;
    bottom:-20px;
    left:-30px;
    width:114px;
  }

  .navbar {
      position:absolute;
      top:40px; right:0;
      /* width:100%; */
  }

  .navbar-nav {
      margin: 0;
      padding-right: 0;
  }

  .last {
      margin-right: 0;
  }

  .navbar .navbar-nav .nav-link {
      padding: 0 10px;
      color: #244b89;
      text-align: center;
      outline: none;
      font-weight: 400;
      font-size: 1.125rem;
      line-height: 1.75rem;
      text-decoration: none;
      /* border-right:1px solid #fff; */
  }

  .navbar-nav .nav-link.show {
    background-color: transparent;
    font-weight: 500;
    /* border-bottom:2px solid #244b89; */
  }

  .nav-item {
    border-bottom:0;
  }

  .navbar .navbar-nav .last .nav-link {
      border-right:0;
  }

  .navbar-nav .nav-link:hover {
      color: #000;
  }

  #index #nav-home  {
    color: #244b89;
  }

  .navbar .has-megamenu{
    position:static!important;
  }

  .navbar .megamenu {
      left:0; right:0; 
      width:100%; 
      margin-top:0;  
      background-color:#927b6a;
      padding:1rem 1.5rem;
  }

  .menuhead {
    font-size:1.25rem;
    font-weight:500;
    line-height:2.5rem;
    border-bottom:1px solid #86b4ee;
    margin-bottom:5px;
  }

  .dropdown-menu {
    background-color:#927b6a;
  }

  .dropdown-item {
    color: #fff !important;
  }

  .dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    background-color: transparent;
  }

  h1, .h1 {
      font-size:1.5rem;
      line-height: 1.75rem;
      font-weight:600;
      margin-bottom:0;
  }

  h2, .h2 {
    font-size:1.375rem;
    line-height: 1.75rem;
    font-weight:500;
    margin-bottom:0;
  }

  h3, .h3 {
      font-size:1.25rem;
      line-height: 1.5rem;
      font-weight:500;
      margin-bottom:1.5rem;        
  }

  h4, .h4 {
    font-size:1rem;
    line-height: 1.5rem;
    font-weight:500;
    margin-bottom:0;
  }

  .overlay-intro {
    font-size:1.25rem;
    line-height: 1.5rem;
    font-weight:500;
  }

  .overlay-headline {
    font-size:2.5rem;
    line-height: 3rem;
    font-weight:500;
    margin-bottom:2rem;
    color:#f7fae0;
  }

  .innung-text {
    line-height: initial;
    vertical-align: middle;
    width:80%;
  }

}

@media (min-width: 1200px) {
 
  .hide-nav {
    top:-152px;
  }

  .navbar .navbar-nav .nav-link {
    padding: 0 15px;
  }

  #logo {
    width:300px;
    margin-top:-20px;
  }

  .navbar {
    top:55px; right:0;
  } 

  .innung-text {
    width:75%;
  }

  .overlay-intro {
    font-size:1.25rem;
    line-height: 1.5rem;
    font-weight:500;
  }

  .overlay-headline {
    font-size:2.625rem;
    line-height: 3rem;
    font-weight:500;
    margin-bottom:2.5rem;
    color:#f7fae0;
  }  

}

@media (min-width: 1400px) {  
  
  header {

  }
  
  .hide-nav {
    top:-165px;
  }

  .innung-text {
    line-height: 40px;
    vertical-align: middle;
  }

  #logo {
    width:340px;
    margin-top:-20px;
  }

  .overlay-text {
    font-size:1.125rem;
  }

  .innung-text {
    width:80%;
  }  

}

@media (min-width: 1600px) {
  .container {
      max-width: 1464px;
  }
}

@media (min-width: 1920px) {
  body {
      max-width: 1920px;
  }
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}



@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


.imgscale:hover img {
  transform: scale(1.4);
}