/*
  Common
*/
.ng-text-centered{
  text-align: center;
}

.ng-relative {
  position:relative;
}

.ng-has-text-underline {
  text-decoration: underline;
}

.ng-has-pointer {
  cursor: pointer;
}

/*
  Tailwind helpers
*/

.block {display: block;}

.flex {
  display:flex;
}

.justify-center {
  justify-content: center;
}

.items-center	{
  align-items: center;
}

.h-full	{
  height:100%;
}

.w-full	{
  width:100%;
}

.cursor-pointer {
  cursor:pointer;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.mb-4 {
  margin-bottom:1rem;
}

.max-w-96	{max-width: 24rem; }

@media (min-width:768px) {
  .md\:hidden {
    display: none;
  }

  .md\:block {
    display: block;
  }
}

@media (min-width:1024px) {
  .lg\:hidden {
    display: none;
  }

  .lg\:block {
    display: block;
  }
}

@media (min-width:1280px) {
  .xl\:hidden {
    display: none;
  }

  .xl\:block {
    display: block;
  }
}

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


/*
  Fontsize
*/
.ng-is-size-1 {
  font-size: 4.5rem !important;
}

.ng-is-size-2 {
  font-size: 2.4rem !important;
}

.ng-is-size-3 {
  font-size: 1.6rem !important;
}

.ng-is-size-4 {
  font-size: 1.2rem !important;
}

.ng-is-size-6 {
  font-size: 0.8rem !important;
}

@media (min-width:768px) {
  .ng-is-size-1-tablet {
    font-size: 4.5rem !important;
  }

  .ng-is-size-2-tablet {
    font-size: 2.4rem !important;
  }

  .ng-is-size-3-tablet {
    font-size: 1.6rem !important;
  }
}

/*
  Colors
*/
.ng-has-text-grey {
  color: rgba(255,255,255,0.55);
}

.ng-has-text-black {
  color: rgba(0,0,0,1);
}

.ng-has-text-yellow {
  color:rgb(244, 158, 0);
}

.ng-has-background-white {
  background-color: rgba(255,255,255,1);
}

/*
  Titles
*/
.ng-title {

}

/* .ng-title.has-underline:after {
  background: #ffffff;
  width: 100px;
  height: 3px;
  margin: 32px auto;
  content: "";
  box-sizing: border-box;
  display: block;
} */

/*
  Columns
*/
.ng-columns {
  display: flex;
}

.ng-columns.enable-wrap {
  flex-wrap: wrap;
}

.ng-column {
 box-sizing: border-box;
}

.ng-column.is-full {
  width:100%;
}

.ng-column.is-half {
  width:50%;
}

.ng-column.is-one-third {
  width:33.3333333%;
}

.ng-column.is-two-third {
  width:66.6666666%;
}

.ng-columns.has-squares .ng-column:before{
  content: "";
  float: left;
  padding-top: 100%;
}

@media (min-width:768px) {
  .ng-column.is-half-tablet {
    width:50%;
  }
  .ng-column.is-one-third-tablet {
    width:33.3333333%;
  }
  .ng-column.is-two-third-tablet {
    width:66.6666666%;
  }
}

@media (min-width:1024px) {
  .ng-column.is-one-third-desktop {
    width:33.3333333%;
  }
  .ng-column.is-two-third-desktop {
    width:66.6666666%;
  }
  .ng-columns.row-reverse-dektop {
    flex-direction: row-reverse;
  }
}

@media (min-width:1400px) {
  .ng-column.is-one-third-widescreen {
    width:33.3333333%;
  }
  .ng-column.is-two-third-widescreen {
    width:66.6666666%;
  }
}

/*
  Spacing
*/

.ng-has-padding-0 {
  padding:0 !important;
}

.ng-has-padding-1 {
  padding:8px;
}

.ng-has-padding-2 {
  padding:16px;
}

.ng-has-padding-4 {
  padding:32px;
}

.ng-has-padding-horizontal-2 {
  padding-left:16px;
  padding-right:16px;
}

.ng-has-margin-bottom-2 {
  margin-bottom:16px !important;
}

.ng-has-margin-bottom-4 {
  margin-bottom:32px !important;
}

@media (min-width:768px) {
  .ng-has-padding-horizontal-2-tablet {
    padding-left:16px;
    padding-right:16px;
  }
  .ng-has-padding-horizontal-2-tablet {
    padding-left:16px;
    padding-right:16px;
  }
  .ng-compensate-horizontal-padding-2-tablet {
    margin-left:-16px;
    margin-right:-16px;
  }
}

@media (min-width:1024px) {
  .ng-has-padding-horizontal-2-desktop {
    padding-left:16px;
    padding-right:16px;
  }
  .ng-has-padding-horizontal-2-desktop {
    padding-left:16px;
    padding-right:16px;
  }
}

/*
  Containers
*/
.ng-container {
  margin:auto;
  max-width:1133px;
}

.ng-container.is-narrow {
  margin:auto;
  max-width:900px;
}

/*
  Accordion
*/

.ng-accordion {

}
.ng-accordion-panel {

}
.ng-accordion-title {
  cursor:pointer;
  background-color:#FAFAFA;
  color:#666666;
  padding:8px 16px;
  margin-bottom:8px;
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  user-select: none;
}
.ng-accordion-text {
  max-height:0px;
  transition: max-height 1s ease-in-out;
  overflow:hidden;
  margin-bottom:8px;
}
/* .ng-accordion-text.ng-is-active{
  max-height:1000em;
} */

.ng-chevron {
  height:10px;
  width:10px;
  border-width: 0 2px 2px 0;
  border-color: #666;
  border-style: solid;
  transition: all .2s ease-in-out;
  transform: rotate(45deg) translate(-25%,-25%);
  position:absolute;
  right:24px;
  top:25px;
}

.ng-is-active .ng-chevron {
  transform: rotate(225deg) translate(-25%,-25%);
}

@media (min-width:768px) {

  .ng-accordion-title {
    font-size: 1.6rem;
  }
  .ng-accordion-text {
    padding-left:16px;
    padding-right:16px;
  }

}

/*
  Modal
*/
.ng-modal {
  display:none;
  position:fixed;
  height:100vh;
  width:100vw;
  top: 0;
  left: 0;
  z-index:9999;
  background: rgba(11, 11, 11,0.5);
  overflow: auto;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  font-size: 2rem;
}
.ng-modal-content {
  margin:auto;
  padding:32px;
  position:relative;
  width: 100%;
}
.ng-modal-content.is-narrow{
  max-width:500px;
}
.ng-modal-content.has-contain-image{
  height: 100%;
  width:100%;
}
.ng-modal.ng-is-active {
  display:flex;
}
body.ng-modal-is-active {
  overflow: hidden;
  padding-right:15px;
}

.ng-modal-close {
  position:absolute;
  color:#ccc;
  top:0px;
  right:16px;
  cursor:pointer;
}
.ng-modal-close:hover {
  color:#000;
}
/* correct ie display */
@media all and (-ms-high-contrast:none) {
  .ng-modal.ng-is-active {
    display:block;
  }
}

/*
  Badge
*/
.ng-badge {
  border-radius:50%;
  background-color:#DF2723;
  width: 50px;
  height:50px;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  font-size: 1.6rem;
}

.ng-badge.is-absolute {
  position:absolute;
  top:8px;
  left:8px;
}

/*
  Image Teaser
*/

.ng-image-teaser {
  position: relative;
  cursor: pointer;
  width:100%;
  background-color: #000;
  text-align: center;
  min-height: 200px;
}

.ng-image-teaser-image {
  max-height: 500px;
}

.ng-image-teaser-text {
  background-color: rgba(0, 0, 0, 0.8);
  position:absolute;
  bottom:0;
  left:0;
  padding:8px;
  width:100%;
}

/* Cover image */
.ng-cover-image {
  height:200px;
  background-position: center center;
  background-size: cover;
  width:100%;
}

/*
  Overview teaser
*/

.ng-overview-teaser {

}

.ng-overview-teaser-image-wrapper {
  position:relative;
}

.ng-overview-teaser-image {
  height:300px;
  background-position: center center;
  background-size: cover;
  width:100%;
  transition:background-position .2s ease-in;
}

.ng-overview-teaser:hover .ng-overview-teaser-image {
  background-position: left center;
}

.ng-overview-teaser-title {
  transition:color .2s ease-out;
}

.ng-overview-teaser:hover .ng-overview-teaser-title {
  color:rgb(244, 158, 0);
}

.ng-overview-teaser-filter {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-color:rgba(244, 158, 0, 0);
  transition:background-color .2s ease-out;
}

.ng-overview-teaser:hover .ng-overview-teaser-filter {
  background-color:rgba(244, 158, 0, 0.5);
}

/*
  Contain image
*/
.ng-contain-image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width:100%;
  height: 100%;
}

/*
  Full image grid
*/
.ng-full-image {
  height:100%;
  width:100%;
  position:relative;
}

.ng-full-image-background {
  background-position: center center;
  background-size: contain;
  background-color:#000;
  background-repeat: no-repeat;
  width:100%;
  height:100%;
}

.ng-full-image-description {
  position:absolute;
  width:100%;
  bottom: 0;
  left: 0;
  padding:8px;
  background-color: rgba(0,0,0,0.6);
}

/*
  Enlarge-image
*/
.ng-anlarge-image .infoimage-image {
  display:block;
  cursor: pointer;
}

.infoimage .infoimage-overlay {
  display:none;
  position: fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  /* background-color:$filter; */
  cursor: pointer;
}

.infoimage .infoimage-overlay.is-active {
  display:block;
}

.infoimage .infoimage-enlarge {
  position: absolute;
  /* bottom: map-get($spaces, 4);
  right: map-get($spaces, 2); */
  cursor: pointer;
  background-image: url(/typo3conf/ext/witron_landingpage_template/Resources/Public/Icons/slider-fullscreen.svg);
  background-position: center center;
  background-repeat: no-repeat;
  height:45px;
  width:45px;
}

/*
  Image grid
*/
/* .ng-image-grid {
  display: flex;
  flex-wrap: wrap;
}

.ng-image-grid a,
.ng-image-grid span {
  width:50%;
  box-sizing: border-box;
}

.ng-image-grid img {
  width:100%;
  height: auto;
}

@media (min-width:1024px) {
  .ng-image-grid a,
  .ng-image-grid span {
    width:33.3333333333%;
  }
} */

/*
  Correct some theme props
*/
#page_wrapper.transparent_header .content-area, #page_wrapper.sticky_header .content-area {
    padding-top: calc(50) !important;
}

@media (min-width:1200px) {
  #page_wrapper.transparent_header .content-area,
  #page_wrapper.sticky_header .content-area
  {
    padding-top: calc(180px) !important;/* correct h1 spacing */
  }
}


.entry-content > h1, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > h5, .entry-content > h6, .entry-content > hr {
  margin-top: 0rem !important;/* correct h1 spacing */
}

/*
  Internet Explorer Hacks
*/
/* Set 100% width for audio */
audio{
  width:100%;
}