/*
 Theme Name:   Specia Lifetime POOL
 Description:  POOLgroup GmbH - Anpassungen
 Author:       Frank Abeln
 Author URI:   https://www.pool.de
 Template:     specia-lifetime
 Version:      1.1
 Text Domain:  specia-lifetime-pool
*/

/*
 Schriften einbinden - Danach in allen css Dateien die Font-Familiy anpassen!
 Raleway = Standard für Überschriften
 open sans = Standard für Rest
 */

/* WOFF Schriften einbinden */
/*
@font-face {
 font-family: 'TheSansCd';
 src: url('css/fonts/TheSansCd-LF5.woff') format('woff'); 
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'TheSansCd';
 src: url('css/fonts/TheSansCd-LF5.woff') format('woff'); 
 font-weight: bold;
 font-style: normal;
}
*/

/* OTF Schriften einbinden */

@font-face {
  font-family: 'open_sans_condensed';
  src: url('css/fonts/opensanscondensed-light-webfont.woff') format('woff'),
       url('css/fonts/opensanscondensed-light-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
 }
 @font-face {
   font-family: 'open_sans_condensed';
   src: url('css/fonts/opensanscondensed-bold-webfont.woff') format('woff'),
        url('css/fonts/opensanscondensed-bold-webfont.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
  }
 
 /* ICONS */
 
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url('css/fonts/icons/materialicons-regular-webfont.woff') format('woff'),
        url('css/fonts/icons/materialicons-regular-webfont.woff2') format('woff2');
 }
 
 body {
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
 }
 
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
 
   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
   text-rendering: optimizeLegibility;
 
   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
 
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
 
 
 /*Top Scroller (Hüpfende Hand) nicht mehr hüpfen lassen*/
 .top-scroll {
   animation: none;
 }
 
 body {
   background-color: #1c294e00 !important;
   overflow-x: hidden;
 }
 
 html {
   background-color: #1c294e;
 }
 
 .container {
   padding-left: 0 !important;
   padding-right: 0 !important;
   width: 100vw !important;
   margin: 0 !important;
   z-index: 1;
 }
 
 .site {
   background-color: #0000;
 }
 
 .site img {
   width: 100%;
     margin-left: auto;
     margin-right: auto;
 }
 
 .navbar {
   z-index: 9 !important;
   background-color: #1B294F;
   box-shadow: none !important;
 }
 
 .header-pic {
   position: relative;
 }
 
 header {
   position: absolute;
   top: 10.2vw;
 }
 
 .home-teaser_background {
   background-image: url('img/22-AA-ATCM-Foto-Startseite.png');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   display: block;
   height: 70vh;
 }
 
 .home-teaser {
   background-color: #ffffffb8;
   max-width: 30vw;
   padding: 25px;
   float: right;
   position: relative;
   right: 5vw;
   height: 100%;
   overflow: auto;
 }
 
 .home-teaser {
   scrollbar-width: thin;
   scrollbar-color: rgba(211, 211, 211, 0.5) rgba(211, 211, 211, 0);
 }
 
 .teaser-vid {
   position: absolute;
   top: 2vw;
   left: 14vw;
   width: 57vw;
   transition: all ease-in-out 0.5s;
 }
 
 .teas-vid-btn {
   position: absolute;
   top: -3vw;
   right: 4vw;
   z-index: 100;
 }
 
 .toggle-teaser, .toggle-teaser:active, .toggle-teaser:focus {
   font-family: 'open_sans_condensed';
   border: none;
   color: red;
   font-weight: 600;
   font-size: 1vw;
   background: none;
   padding: 0;
 }
 
 .toggle-teaser:hover {
   font-family: 'open_sans_condensed';
   text-decoration: underline;
   border: none;
   color: rgb(255, 121, 121);
   background: none;
   font-weight: 600;
   font-size: 1vw;
 }
 
 .toggle-teaser img {
   width: 8vw !important;
 }
 
 .timeline-img {
   object-fit: cover;
   height: 23vw;
   object-position: 0%;
 }
 
 /* Works on Chrome, Edge, and Safari */
 .home-teaser::-webkit-scrollbar {
   width: 12px;
 }
 
 .home-teaser::-webkit-scrollbar-track {
   background: rgba(211, 211, 211, 0);
   border-radius:20px;
 }
 
 .home-teaser::-webkit-scrollbar-thumb {
   background-color: rgb(255, 255, 255);
   border-radius: 20px;
   border: 3px solid rgba(211, 211, 211, 0);
 }
 
 /*Social Media Button größer machen*/
 
 .header-top-info-1 .social li a i {
 
     width: 30px;
     height: 30px;
     font-size: 25px;
    
 }
 
 /* Blockeditor CSS Klassen */
 /* Bilder über ganzen Viewport */
 .fa_volle_bildbreite {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   background-color: #FAFAFA;
 }
 .fa_volle_bildbreite img {
   width: 100%;
 }
 
 html { scroll-behavior: smooth; } 
 
 .rahmen img{
   border: grey 5px solid;
   border-radius: 0.4em;
 }
 
 /* Text größe der Buttons in den einzelen Blocks anpassen */
 .wp-block-button__link {
     font-size: 14px;
 }
 
 
 /*Portfolio Schrift in der Höhe ausrichten ausrichten*/
 .grid figure figcaption, .grid figure figcaption > a {
     position: absolute;
     top: 25px;
     left: 0;
 }
 
 /* Blockeditor CSS Klassen */
 /* Bilder über ganzen Viewport */
 .fa_volle_bildbreite {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
 }
 
 /*Abstand der Comments-Box nach oben */
 #comments {
     margin: 1px auto;
 }
 #wpdcom .wpd-form-head {
     margin-top: 5px;
 }
 #wpdcom {
     margin: 0px auto 15px auto;
 }
 #wpdcom .wpd-comment-header .wpd-comment-author {font-size: 12px;}
 #wpdcom .wpd-comment-date {font-size: 10px;}
 #wpdcom .wpd-comment-text p {font-size: 12px;}
 #wpdcom .wpd-comment-footer .wpd-vote-result {font-size: 12px;}
 #wpdcom .wpd-comment-footer { padding-left: 5px;}
 #wpdcom hr { margin-top: 1px; margin-bottom: 1px;}
 #wpdcom .wpd-comment .wpd-comment-right { padding-bottom: 5px;}
 #wpdcom .wpd-comment .wpd-comment-right { width: calc(100% - 5px);}
 
 
 /*Frontend Statistik */
 .jqplot-highlighter-tooltip {background:rgba(0,0,0,.6);z-index:11000;font-size:13px;color:#fff!important;padding:2px 5px}
 .jqplot-highlighter-tooltip span{margin-right:5px;float:left;width:10px;height:15px;border:1px solid #000}
 
 /*sidebar Abstände*/
 .sidebar {
     margin-top: 20px;
 }
 
 /* HEADER */
 .header-pic_top {
   z-index: 1;
 }

 
 /* CONTENT ALLGEMEIN */
 
 .content_wrapper {
   max-width: 1670px;
   width: 90.234375vw;
   margin: 0 auto;
 }
 
 .content_txt_wrapper {
   background-color: #fff;
   padding: 44px;
   margin: 54px 0;
 }
 
 .blocksatz {
   text-align: justify;
 }
 
 .content_txt_wrapper .wp-block-column:not(:first-child) {
   margin-left: 44px;
 }
 
 .background-pic {
   position: fixed;
   z-index: -1;
   top: 0;
   width: 100vw;
 }
 
 .background-pic img {
   height: 100vh;
   object-fit: cover;
 }
 
 .content_txt_wrapper p {
   text-align: justify;
 }

 .quelle{
   font-size: 10px;
   font-weight: bold;
 }

 .mobileplatzhalter{
   display: none;
 }
 
 /* EXTRA PULLDOWN MENU */
 
 .sidemenu ul, .sidemenu li {
   list-style-type: none;
   list-style: none;
   list-style-image: none;
   font-size: 18px;
   background-color: rgba(188,220,237,0.8);  
   padding: 0 0.6vw;
 }
 
 .sidemenu li a {
   line-height: 40px;
 }
 
 .sidemenu .active {
   background-color:#EAF6FE;
 }
 
 .sidemenu .active > a:last-child {
   color: red !important;
   font-weight: 600;
 }
 
 .sidemenu li:not(:first-child) {
   border-top: 1px solid rgba(188,220,237,1);
 }
 
 .sidemenu li > ul {
   margin-left: 0;
 }
 
 .sidemenu ul {
   padding: 0 0 0 10px;
   margin: 0;
 }
 
 .sidemenu > li {
   background-color: #1c294e;
 }
 
 .sidemenu > li > a {
   color: #fff;
 }
 
 .sidemenu > li.active > a {
   color: #1c294e;
   font-weight: 600;
 }
 
 .sidemenu > li > ul > li, .sidemenu > li > ul > li > ul > li {
   display:none;
 }
 
 .sidemenu > li.active,.sidemenu > li.active > ul > li, .sidemenu > li > ul > li > ul > li.active {
   display: block !important;
 }
 
 .sidemenu li:hover ul li {
   display: block !important;
 }
 
 .sidemenu {
   padding: 0;
 }
 
 .menu-hauptmenu-container, .menu-hauptmenu-primary-menu-en-container {
   position: sticky;
   top: 110px;
 }
 
 /* FOOTER */
 
 .footer-copyright .container {
   background: #1c294e;
 }
 
 .centerfooter {
   max-width: 1670px;
   margin: 0 auto;
 }
 
 .footer-menu {
   list-style: outside none;
   margin-bottom: 0;
   padding: 0;
 }
 
 .footer-btn {
   float: right;
   padding: 0 20px;;
   position: relative;
   display: block;
 }
 
 .footer-btn a {
   color: #fff;
   font-size: 24px;
 }

 .footer-copyright ul {
  margin-right: 3vw;
}
 
 /* Der Antarktisvertrag */
 
 .der_antarktisvertrag_background {
   padding-bottom: 1px;
   padding: 0 6vw 1px;
 }
 
 .content_wrapper {
   width: 90.234375vw;
   margin: 0 auto;
 }
 
 .antVer_txt {
   background-color: #fff;
 }
 
 #menu-item-955-de, #menu-item-984-de {
   position: absolute;
   right:14vw;
 }
 
 #menu-item-955-en, #menu-item-984-en {
   position: absolute;
   right:12vw;
 }
 
 #menu-item-955-de a {
   padding: 0;
   padding-top: 10px;
 }
 
 #menu-item-955-en a {
   padding: 0;
 }
 
 #menu-item-955-de a, #menu-item-955-en a{
   height: auto !important;
 }
 
 .current-lang {
   background: #d6e2ed;
 }
 
 .current-lang a {
   color: #1B294F !important;
 }
 
 .sidemenu .lang-item {
   display: none !important;
 }
 
 
 /************** SLIDER ******************/
 .slider {
   -webkit-appearance: none;
   width: 100%;
   height: 15px !important;
   border-radius: 5px !important;
   background: #d3d3d3 !important;
   outline: none;
   opacity: 0.7 !important;
   -webkit-transition: .2s !important;
   transition: opacity .2s !important;
 }
 
 .slider:hover {
   opacity: 1 !important;
 }
 
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: #04AA6D !important;
   cursor: pointer;
 }
 
 .slider::-moz-range-thumb {
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: #04AA6D !important;
   cursor: pointer;
 }

 .info-btn {
   font-size: 16px;
   border: none;
   border-radius: 0;
   padding: 0;
   margin-left: 20px;
 }

 .info-btn:hover, .info-btn:active, .info-btn:focus {
   color:#1B294F;
   background: none;
   border: none;
 }

 .gast-pic {
   width: 25%;
   margin-left: 20px;
   margin-bottom: 20px;
   float:right;
 }

 .mobieltxt{
   display: none;
 }


 /************************RESPONSIVITY*****************/
 
 @media only screen and (max-width: 767px) {
   .content_txt_wrapper {
     background-color: #ffffffdb;
     margin: 0 auto;
   }

   .home-teaser {
    background-color: #ffffffdb;
   }
 
   .der_antarktisvertrag_background {
     padding: 0px;
     margin: 0 auto;
   }
 
   .wp-block-image {
     margin: 0;
   }
 
   .navbar-default .navbar-collapse, .navbar-default .navbar-form {
     background-color: rgba(188,220,237,1);  
   }
 
   .content_wrapper > .wp-block-spacer {
     display: none;
   }
 
   .content_txt_wrapper > .wp-block-column:first-child {
     display: none;
   }
 
   .content_txt_wrapper > .wp-block-column:not(:first-child) {
     flex-basis: 100% !important;
     margin: 0 auto;
   }
 
   .navbar-default .navbar-nav > li > a {
     font-size: 5vw !important;
     font-weight: 400 !important;
   }
 
   .navbar .navbar-nav > li {
     margin-right: 0px !important;
     padding: 10px 0 !important;
   }
   .dropdown-menu > li > a {
     font-weight: 400 !important;
     font-size: 5vw !important;
   }
 
   .home-teaser {
     float: none;
     right: auto;
     max-width: 100vw;
   }
 
   .footer-menu .footer-btn:first-child {
     margin-left: 20px;
   }
 
   .footer-btn {
     float:left;
   }

   .footer-btn a {
      font-size: 15px;
   }

   .timeline-img{
      height: 50vw;
   }

   .mobieltxt{
      display: block;
   }

   .wp-block-table table {
      width: 400px;
    }

    #menu-item-955-de, #menu-item-984-de, #menu-item-955-en, #menu-item-984-en {
     position: relative;
     right: auto;
    }

    .mobileplatzhalter{
      display: block;
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100vw;
      height: 100vh;
      z-index: 10000;
    }

    .container > .navbar-header{
      padding: 8vh 6vw;
    }

    /*.navbar-toggle .icon-bar {
      width: 33px !important;
      height: 3px !important;
      border-radius: 1px;
    }*/

    .teas-vid-btn {
      top: -8vw;
      right: 7vw;
    }

    .toggle-teaser img {
      width: 20vw !important;
    }

    /*loschi ist die Klasses der div um den Text im Menü*/
    .loschi{
      line-height: 7vw;
     }
  }

@media only screen and (min-width: 481px) and (max-width: 767px){
  .wp-block-table table {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 850px){
  .content_txt_wrapper .wp-block-column:not(:first-child) {
    margin-left: 25px;
  }
}

/*Responsivität der Position des Burger Menüs*/
@media only screen and (min-width: 500px){
  .navbar-toggle{
    margin-top: 3vw !important;
  }
  .navbar-toggle .icon-bar {
    width: 33px !important;
    height: 3px !important;
    border-radius: 1px;
  }
}
@media only screen and (min-width: 550px){
  .navbar-toggle{
    margin-top: 4vw !important;
  }
  .navbar-toggle .icon-bar {
    width: 33px !important;
    height: 3px !important;
    border-radius: 1px;
  }
}
@media only screen and (min-width: 600px){
  .navbar-toggle{
    margin-top: 5vw !important;
  }
  .navbar-toggle .icon-bar {
    width: 44px !important;
    height: 4px !important;
    border-radius: 1px;
  }
}
@media only screen and (min-width: 650px){
  .navbar-toggle{
    margin-top: 6vw !important;
  }
  .navbar-toggle .icon-bar {
    width: 55px !important;
    height: 5px !important;
  }
}
@media only screen and (min-width: 700px){
  .navbar-toggle{
    margin-top: 7vw !important;
  }
  .navbar-toggle .icon-bar {
    width: 55px !important;
    height: 5px !important;
  }
 
}
@media only screen and (min-width: 750px){
  .navbar-toggle{
    margin-top: 8vw !important;
  }
  .navbar-toggle .icon-bar {
    width: 55px !important;
    height: 5px !important;
  }
}


/*Landscape*/


}
@media only screen and (min-width: 700px) and (orientation : landscape){
  .navbar-toggle{
    margin-top: 15vw !important;
  }
  .navbar-toggle .icon-bar {
    width: 44px !important;
    height: 4px !important;
}
  
}

 
 /*#############
 ###############
 THE MODAL STYLE
 ###############
 #############*/
 
 .w3-container:after,.w3-container:before, .w3-container,.w3-panel {
   padding:0.01em 16px
 }
 .w3-panel{
   margin-top:16px;
   margin-bottom:16px
 }
 .w3-modal{
   z-index:10;
   display:none;
   padding-top:25vh;
   position:fixed;
   left:0;
   top:0;
   width:100%;
   height:100%;
   overflow:auto;
   background-color:rgb(0,0,0);
   background-color:rgba(0,0,0,0.4);
 }
 
 .w3-modal-content{
   margin:auto;
   background-color:#fff;
   position:relative;
   padding:20px;
   outline:0;
   width:600px;
   min-height: 50vh;
   animation: animatetop 0.4s;
 }
 @media (max-width:768px){
   .w3-modal-content{
     width:500px
   }
   .w3-modal{
     padding-top:50px
   }
 }
 @media (min-width:993px){
   .w3-modal-content{
     width:900px
   }
   .w3-hide-large{
     display:none!important
   }
   .w3-sidebar.w3-collapse{
     display:block!important
   }
 }
 @media (max-width:600px){
   .w3-modal-content{
     margin:0 10px;width:auto!important
   }
   .w3-modal{
     padding-top:30px
   }
   .w3-animate-top{
     position:relative;
     animation:animatetop 0.4s
   }
 }
   @keyframes animatetop{
     from{
       top:-300px;
       opacity:0
      } to{
        top:0;
        opacity:1
      }
    }
   .w3-card-4,.w3-hover-shadow:hover{
     box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
   }
   .w3-teal,.w3-hover-teal:hover{
     color:#fff!important;
     background-color:#009688!important
   }
 
 
 .passbild{
   display: none;
 }