/* Schriften *********************************************************************************** */
/* latin-ext */
@font-face
  {
   font-family:                 'Montserrat';
   font-style:                  italic;
   font-weight:                 100 900;
   font-display:                swap;
   src:                         url('/webfonts/Montserrat_latin-ext_italic.woff2') format('woff2');
   unicode-range:               U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* latin */
@font-face
  {
   font-family:                 'Montserrat';
   font-style:                  italic;
   font-weight:                 100 900;
   font-display:                swap;
   src:                         url('/webfonts/Montserrat_latin_italic.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* latin-ext */
@font-face
  {
   font-family:                 'Montserrat';
   font-style:                  normal;
   font-weight:                 100 900;
   font-display:                swap;
   src:                         url('/webfonts/Montserrat_latin-ext_normal.woff2') format('woff2');
   unicode-range:               U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

/* latin */
@font-face
  {
   font-family:                 'Montserrat';
   font-style:                  normal;
   font-weight:                 100 900;
   font-display:                swap;
   src:                         url('/webfonts/Montserrat_latin_normal.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }



/* globale Variablen ******************************************************* */
:root
  {
    --error:                    #880000;
    --warning:                  #ff9900;
    --info:                     #0065c4;
    --success:                  #00aa00;
 
    --black:                    #000;
    --darkgrey:                 #4e514e;
    --grey:                     #bbb;
    --lightgrey:                #e4e4e4;
    --verylightgrey:            #f3f3f3;
    --deepBackground:           #333;
 
    --textWhite:                #ffffff;
    --textBlack:                #000000;
    --visited:                  #00387b;
    --ciColor:                  #888888; /* #00e0bb; */
    --ciColorMuted:             #88888888;
    --ciBack:                   #ffffff;
    --ciColorText:              #000000;
    --ciColorTextLight:         #00000088;
    --backgroundDark:           #333333;
    --backgroundBlack:          #1e1e1e;
    --backgroundDeepBlack:      #131313;
    --backgroundWhite:          #ebebeb;
    --hover:                    #c80000;

    --lineWhite:                #aaa;
    --lineBlack:                #555;
  
    --inherited:                #ff6600;
    --inheritedBack:            #fff8f3;
    --glory:                    #ffC800;
    --lineprinter:              #f8f5f0;
    --printcol:                 #663300;
    --greyOutline:              #dddddd;
    --outline:                  #444;
    --outlineWhite:             #fff;
    --white:                    #fff;

    --fontSize:                  13.5px;/* 12px; */ /* 16px; */
  }



/* HTML Tags *********************************************************************************** */
html, body
  {
   font-family:                 'Montserrat', sans-serif;
   font-optical-sizing:         auto;
   font-weight:                 300;
   font-style:                  normal;
   font-size:                   var(--fontSize);
   color:                       var(--textWhite);
   overflow-x:                  hidden;
   background-color:            var(--backgroundBlack);
  }

strong
  {
   font-weight:                 600;
  }

a
  {
   text-decoration:             underline;
   text-decoration-color:       #ffffff44;
   color:                       var(--textWhite);
   transition:                  text-decoration-color 0.25s linear;
  }

a:hover
  {
   text-decoration-color:       #ffffffff;
  }

h1, .h1 {font-size:             calc(var(--fontSize) * 2.0);} /* Hier war 3 */
h2, .h2 {font-size:             calc(var(--fontSize) * 1.75);}
h3, .h3 {font-size:             calc(var(--fontSize) * 1.5);}
h4, .h4 {font-size:             calc(var(--fontSize) * 1.2);}
h5, .h5 {font-size:             calc(var(--fontSize) * 1.0);}
h6, .h6 {font-size:             calc(var(--fontSize) * 0.95);}

h1.pre, h2.pre, h3.pre, h4.pre, h5.pre, h6.pre
  {
   font-weight:                 200 !important;
   text-transform:              none;
  }

h1.pre, .h1.pre {font-size:     calc(var(--fontSize) * 1);}
h2.pre, .h2.pre {font-size:     calc(var(--fontSize) * 0.8666);}
h3.pre, .h3.pre {font-size:     calc(var(--fontSize) * 0.7333);}
h4.pre, .h4.pre {font-size:     calc(var(--fontSize) * 0.6);}
h5.pre, .h5.pre {font-size:     calc(var(--fontSize) * 0.4666);}
h6.pre, .h6.pre {font-size:     calc(var(--fontSize) * 0.3333);}


@media (max-width: 768px)
  {
   body {font-size:             calc(var(--fontSize) * 0.95);}

   h1, .h1 {font-size:          calc(var(--fontSize) * 2.0);}
   h2, .h2 {font-size:          calc(var(--fontSize) * 1.75);}
   h3, .h3 {font-size:          calc(var(--fontSize) * 1.5);}
   h4, .h4 {font-size:          calc(var(--fontSize) * 1.2);}
   h5, .h5 {font-size:          calc(var(--fontSize) * 1.0);}
   h6, .h6 {font-size:          calc(var(--fontSize) * 0.95);}

   h1.pre {font-size:           calc(var(--fontSize) * 0.6666);}
   h2.pre {font-size:           calc(var(--fontSize) * 0.5666);}
   h3.pre {font-size:           calc(var(--fontSize) * 0.5);}
   h4.pre {font-size:           calc(var(--fontSize) * 0.4);}
   h5.pre {font-size:           calc(var(--fontSize) * 0.3333);}
   h6.pre {font-size:           calc(var(--fontSize) * 0.3166);}
  }

@media (max-width: 576px)
  {
   body {font-size:             calc(var(--fontSize) * 0.9);}

   h1, .h1 {font-size:          calc(var(--fontSize) * 1.5);}
   h2, .h2 {font-size:          calc(var(--fontSize) * 1.4);}
   h3, .h3 {font-size:          calc(var(--fontSize) * 1.2);}
   h4, .h4 {font-size:          calc(var(--fontSize) * 1.1);}
   h5, .h5 {font-size:          calc(var(--fontSize) * 1.0);}
   h6, .h6 {font-size:          calc(var(--fontSize) * 0.9);}

   h1.pre {font-size:           calc(var(--fontSize) * 0.5);}
   h2.pre {font-size:           calc(var(--fontSize) * 0.4666);}
   h3.pre {font-size:           calc(var(--fontSize) * 0.4);}
   h4.pre {font-size:           calc(var(--fontSize) * 0.3666);}
   h5.pre {font-size:           calc(var(--fontSize) * 0.3333);}
   h6.pre {font-size:           calc(var(--fontSize) * 0.3);}
  }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
  {
   font-weight:                 700;
   text-transform:              uppercase;
  }

h1.light, h2.light, h3.light, h4.light, h5.light, h6.light, .h1.light, .h2.light, .h3.light, .h4.light, .h5.light, .h6.light
  {
   font-weight:                 200;
  }

.block::before
  {
   display:                     inline-block;
   position:                    relative;
   content:                     '';
   min-width:                   0.42em;
   min-height:                  0.42em;
   margin:                      0 0.18em 0 0;
   background-color:            var(--ciColor);
  }

.blockAlign
  {
   display:                     flex;
   align-items:                 flex-start;
  }
  
.blockAlign::before
  {
   content:                     '';
   flex:                        none;
   width:                       0.42em;
   height:                      0.42em;
   margin-right:                0.18em;
   margin-top:                  0.5em;
   background-color:            var(--ciColor);
  }

.pseudoblock::before
  {
   display:                     inline-block;
   position:                    relative;
   content:                     '';
   min-width:                   1.25em;
   min-height:                  1.25em;
   margin:                      0px 0.7em 0 0;
   background-color:            #88888800;
  }

.smallPseudoblock::before
  {
   display:                     inline-block;
   position:                    relative;
   content:                     '';
   min-width:                   1em;
   min-height:                  1em;
   margin:                      0 0.35em 0 0;
   background-color:            #88888800;
  }

.smallPseudoblockAlign
  {
   display:                     flex;
   align-items:                 flex-start;
  }

.smallPseudoblockAlign::before
  {
   content:                     '';
   flex:                        none;
   width:                       0.84em;
   height:                      0.42em;
   margin-right:                0.36em;
   margin-top:                  0.5em;
   background-color:            #88888800;
  }

.realBlock
  {
   display:                     inline-block;
   position:                    relative;
   content:                     '';
   min-width:                   0.42em;
   min-height:                  0.42em;
   margin:                      0px 0.18em 0 0;
   background-color:            var(--ciColor);
  }

p
  {
   hyphens:                     auto;
  }



/* White Section ******************************************************************************* */
.whiteSection
  {
   background-color:            var(--backgroundWhite);
   color:                       var(--black);
  }

.whiteSection a
  {
   color:                       #000000;
   text-decoration-color:       #00000044;
  }

.whiteSection a:hover
  {
   text-decoration-color:       #000000ff;
  }
  


/* Scrollbar ----------------------------------------------------------------------------------- */
::-webkit-scrollbar
  {
   width:                       7px;
  }

::-webkit-scrollbar-thumb
  {
   background-color:            #bbb;
   border-radius:               3.5px;
  }

::-webkit-scrollbar-track
  {
   background: #e8e8e8;
  }

::-webkit-scrollbar-thumb:hover
  {
   background-color:            var(--ciColor);
  }


/* Bootstrap Override -------------------------------------------------------------------------- */
.btn
  {
   border-radius:               0 !important;
  }

.tooltip
  {
   opacity:                     0.75 !important;
  }

.invisible
  {
   opacity: 0;
  }

/* Cards */
.card
  {
   border-radius:               0;
   border:                      none;
  }

.cardbackground
  {
   background-size:             cover;
  }

.card-body
  {
   color:                       #00000000;
   backdrop-filter:             blur(0) contrast(1) brightness(1);
   -webkit-backdrop-filter:     blur(0) contrast(1) brightness(1);
   transition:                  all 0.25s linear;
   min-height:                  200px;
  }

.card-body .realBlock
   {
    opacity:                     0;
    transition:                  all 0.25s linear; 
   }

.card-body .light
  {
   color:                       #00000000 !important;
   transition:                  all 0.25s linear;
  }

.card-body:hover
  {
   color:                       #000000ff;
   backdrop-filter:             blur(10px) contrast(0.5) brightness(1.5);
   -webkit-backdrop-filter:     blur(10px) contrast(0.5) brightness(1.5);
  }

.card-body:hover .realBlock
  {
   opacity:                     1;
  }

.cardBodyActive
  {
   color:                       #000000ff;
   backdrop-filter:             blur(10px) contrast(0.5) brightness(1.5);
   -webkit-backdrop-filter:     blur(10px) contrast(0.5) brightness(1.5);
  }

.cardBodyActive .realBlock
  {
   opacity:                     1 !important;
  }

.cardBodyInactive
  {
   color:                       #00000000;
   backdrop-filter:             blur(0) contrast(1) brightness(1);
   -webkit-backdrop-filter:     blur(0) contrast(1) brightness(1);
  }

.fade
  {
   backdrop-filter:             blur(10px);
   -webkit-backdrop-filter:     blur(10px);
  }

body.modal-open
  {
   padding-right:               0 !important;
  }

.form-control:focus
  {
   border-color:                var(--ciColor);
   box-shadow:                  inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px var(--ciColorMuted);
  }

.modal-body
  {
   color:                       #000;
  }

.responsive-grid
  {
    display:                    flex;
    flex-wrap:                  wrap;
    justify-content:            center;
    gap:                        1rem;
    margin:                     auto;
  }

.responsive-grid > .item
  {
   display:                     flex;
   width:                       max(min(450px, 20vw), 350px);
   align-items:                 center;
  }



/* Navigation ---------------------------------------------------------------------------------- */
.navbar
  {
   min-height:                  100px !important;
   transition:                  all 0.25s linear;
   padding-top:                 10px !important;
  }

#spacer4navi
  {
   height:                      110px;
   transition:                  all 0.25s linear;
  }

#nav-cont
  {
   height:                      100px;
  }

.navbar-nav
  {
   padding-right:               30px;
  }

.bg-black
  {
   background-color:            var(--backgroundBlack) !important;
  }

.bg-deepblack
  {
   background-color:         var(--backgroundDeepBlack) !important;
  }

.bg-dark
  {
   background-color:            var(--backgroundDark) !important;
  }

.navbar-brand
  {
   padding:                     0;
   margin:                      13px 0 13px 30px;
  }

.navbar-toggler
  {
   margin-right:                10px;
  }

.navbar-brand img
  {
   width:                       343px;
   height:                      68px;
   margin-bottom:               6px;
   transition:                  all 0.25s linear;
  }

.nav-item
  {
   white-space:                 nowrap !important;
  }

.nav-link, .nav-link .active
  {
   color:                       var(--white) !important;
   text-decoration:             underline;
   text-decoration-color:     #ffffff00;
   text-decoration-thickness:   0.5px;
   transition:                  text-decoration-color 0.125s linear;
   text-transform:              uppercase;
  }

.nav-link:hover
  {
   text-decoration-color:     #ffffffff;
  }

.nav-link.active::before
  {
    display:                     inline-block;
    position:                    relative;
    content:                     "";
    min-width:                   0.42em;
    min-height:                  0.42em;
    margin:                      0px 0.18em 0 0;
    background-color:            var(--ciColor);
  }

/* Hamburger */
.navbar-toggler
  {
   border:                      none;
  }

btn:focus, a:focus
  {
   outline:                     none !important;
   box-shadow:                  none !important;
  }

.navbar-toggler:focus
  {
   outline:                     none !important;
   box-shadow:                  none !important;
  }

.navbar-toggler-icon .line
  {
   width: 24px;
   height: 2px;
   background-color: #ecf0f1;
   display: block;
   margin: 6px auto;
   -webkit-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
  }

.navbar-toggler-icon:hover
  {
   cursor: pointer;
  }

.navbar-toggler-icon.is-active .line:nth-child(2)
  {
   opacity: 0;
  }

.navbar-toggler-icon.is-active .line:nth-child(1)
  {
   -webkit-transform: translateY(8px) rotate(45deg);
   -ms-transform: translateY(8px) rotate(45deg);
   -o-transform: translateY(8px) rotate(45deg);
   transform: translateY(8px) rotate(45deg);
  }

.navbar-toggler-icon.is-active .line:nth-child(3)
  {
   -webkit-transform: translateY(-8px) rotate(-45deg);
   -ms-transform: translateY(-8px) rotate(-45deg);
   -o-transform: translateY(-8px) rotate(-45deg);
   transform: translateY(-8px) rotate(-45deg);
  }

@media (max-width: 1200px)
  {
   .navbar
     {
      min-height:               80px !important;
      height:                   80px !important;
      padding-top:              0px !important;
     }

   #spacer4navi
     {
      height:                   80px;
     }

   .navbar-collapse
     {
      background-color:        #000000ee;
     }

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

   .navbar-brand img
     {
      width:                       255px;
      height:                      50px;
      margin-bottom:               0px;
     }

   .nav-link, .nav-link .active
     {
      padding-left:             50px !important;
     }
  }



/* Dropdown */
.dropdown-menu
  {
   border-radius:               0 !important;
  }

.dropdown .dropdown-menu
  {
   height:                      auto;
   display:                     block;
   overflow:                    hidden;
   background-color:            var(--backgroundWhite);
   color:                       var(--black);
  }

#languageDropDown
  {
   left:                        -110px;
  }

.dropdown-item
  {
   font-weight:                 300;
   transition:                  background-color 0.125s linear;
   opacity:                     0.8;
   text-decoration:             underline;
   text-decoration-color:     #00000000;
   text-decoration-thickness:   0.5px;
   transition:                  text-decoration-color 0.125s linear;
  }

.dropdown-item:hover
  {
   background-color:            #fff;
   text-decoration-color:       #000000ff;
  }

.dropdown-item.active
  {
   background-color:            var(--backgroundWhite);
   color:                       var(--black);
  }

.dropdown-item.active::before
  {
    display:                     inline-block;
    position:                    relative;
    content:                     "";
    min-width:                   0.42em;
    min-height:                  0.42em;
    margin:                      0px 0.18em 0 0;
    background-color:            var(--ciColor);
  }

@media (max-width: 1200px)
  {
   .dropdown-item
     {
      padding-left:             70px !important;
     }
  }

.searchLink
  {
   border:                      1px solid #ffffff;
   cursor:                      pointer;
   transition:                  all 0.25s linear;
  }

.searchLink:hover
  {
   border:                      1px solid var(--ciColor);
  }


/* Teaser ************************************************************************************** */
#targetgroup-left
  {
   display:                     inline-block;
   position:                    absolute;
   width:                       100%;
   height:                      auto;
   aspect-ratio:                12/5;
   top:                         0;
   left:                        0;
   transition:                  left 0.5s ease-in-out;;
  }

#targetgroup-right
  {
   display:                     inline-block;
   position:                    absolute;
   width:                       100%;
   height:                      auto;
   aspect-ratio:                12/5;
   top:                         0;
   left:                        100%;
   transition:                  left 0.5s ease-in-out;;
  }

.targetgroupSpacer
  {
   width:                       100%;
   height:                      auto;
   aspect-ratio:                12/5;
  }

.line-container /* Container */
  {
   position:                    relative;
   margin-bottom:               15px;
  }

.horizontal-line-left /* Horizontaler Strich links */
  {
   position:                    absolute;
   top:                         50%;
   left:                        21px;
   width:                       calc(50% - 21px);
   height:                      1px;
   background-color:          #fff;
   transform:                   translateY(5px);
  }

.horizontal-line-right /* Horizontaler Strich rechts */
  {
   position:                    absolute;
   top:                         50%;
   right:                       21px;
   width:                       calc(50% - 21px);
   height:                      1px;
   background-color:          #fff;
   transform:                   translateY(5px);
  }

.vertical-line-middle /* Vertikaler Strich mittig */
  {
   position:                    absolute;
   bottom:                      5px;
   left:                        50%;
   width:                       1px;
   height:                      22px;
   background-color:          #fff;
   transform:                   translateX(-50%);
  }

.setTeaserSize
  {
   aspect-ratio:                12/5;
   height:                      auto;
  }

.teaserBut
  {
   cursor:                      pointer;
   background-color:            #ffffff00;
   transition:                  all 0.25s linear;
  }

.teaserBut:hover
  {
   background-color:            #ffffff44;
  }



/* Leistungen ********************************************************************************** */
.col-2-5
  {
   flex:                        0 0 40%;
   max-width:                   40%;
  }

.col-3-5
  {
   flex:                        0 0 60%;
   max-width:                   60%;
  }



@media (max-width: 1200px)
  {
   .col-2-5
     {
      flex:                     0 0 50%;
      max-width:                50%;
     }

   .col-3-5
     {
      flex:                     0 0 50%;
      max-width:                50%;
     }
  }

.servicesRight::after
  {
   content:                     "";
   background:                  var(--lineBlack);
   position:                    absolute;
   top:                         0;
   left:                        0;
   height:                      calc(100% - 15px);
   width:                       1px;
  }

.servicesLeft::after
  {
   content:                     "";
   background:                  var(--lineWhite);
   position:                    absolute;
   top:                         0;
   right:                       0;
   height:                      calc(100% - 15px);
   width:                       1px;
  }

.serviceLine
  {
   position:                    absolute;
   top:                         100%;
   left:                        -200px;
   width:                       calc(100% + 200px);
   height:                      1px;
   background-color:            var(--lineBlack);
   transform:                   translateY(8px);
  }

.serviceLine.right
  {
   position:                    absolute;
   top:                         100%;
   left:                        -3rem;
   width:                       calc(100% + 3rem);
   height:                      1px;
   background-color:            var(--lineWhite);
   transform:                   translateY(8px);
  }

.serviceWrapper
  {
   padding:                     inherit;
   height:                      100%;
   width:                       100%;
   box-sizing:                  border-box;
  }

.service
  {
   /* background-color:            #eee; */
   background-size:             100%;
   background-position:         center center;
   background-repeat:           no-repeat;
   position:                    relative;
   transition:                  background-size 0.25s ease;
  }

.service:hover
  {
   background-size:             110%;
  }
  
.serviceTitle
  {
   position:                    absolute;
   bottom:                      0;
   width:                       100%;
   height:                      18%;
   text-align:                  center;
   background-color:            #44444444;
   backdrop-filter:             blur(10px);
   color:                       #fff;
   transition:                  background-color 0.25s ease;
  }

.service:hover .serviceTitle
  {
   background-color:            #00000044;
  }

.serviceTitle p
  {
   position:                    absolute;
   top:                         50%;
   left:                        50%;
   transform:                   translateX(-50%) translateY(-50%);
   font-size:                   1.1vw;
   font-weight:                 400;
   line-height:                 1.43vw;
   hyphens:                     none;
  }

.box
  {
   font-size:                   1.5em;
   border:                      1px solid var(--ciColor);
   background-color:            #ffffff11;
   padding:                     3vw 4vw;
   font-style:                  italic;
  }


@media (max-width: 1200px)
  {
   .serviceTitle p
     {
      font-size:                1.5vw;
      line-height:              1.8vw;
     }
  }

@media (max-width: 992px)
  {
   .serviceTitle p
     {
      font-size:                3.2vw;
      line-height:              4.16vw;
     }
  }



/* Sicherheitstechnik ************************************************************************** */
#workflow
  {
   padding:                     0 10%;
   position:                    relative;
  }

#idea
  {
   position:                    absolute;
   left:                        18%;
   top:                         58.5%;
   transform:                   translateX(-50%);
   font-size:                   1.4vw;
  }

#conception
  {
   position:                    absolute;
   left:                        50%;
   top:                         58.5%;
   transform:                   translateX(-60%);
   font-size:                   1.4vw;
  }

#implementation
  {
   position:                    absolute;
   left:                        79%;
   top:                         58.5%;
   transform:                   translateX(-50%);
   font-size:                   1.4vw;
  }

@media (max-width: 992px)
  {
   #idea, #conception, #implementation
     {
      font-size:                2.1vw;
     }
  }

@media (max-width: 768px)
  {
   #workflow
     {
      padding:                  0;
     }

   #idea, #conception, #implementation
     {
      font-size:                2.8vw;
     }
   
   #idea
     {
      left:                     10%;
     }

   #implementation
     {
      left:                     86%;
     }
  }

.littleSpace
  {
   hyphens:                     auto;
   width:                       110px;
   text-align:                  center;
  }




/* Parallax ************************************************************************************ */
.parallax
  {
   min-height:                  calc(100vw / 3);
   background:                  no-repeat center center;
   background-size:             cover;
   position:                    relative;
   overflow:                    hidden;
  }



/* Standorte *********************************************************************************** */
#locationHeader
  {
   margin-bottom:               35px;
  }

#locationLine
{
 position:                      absolute;
 top:                           86%;
 left:                          20%;
 width:                         60%;
 height:                        1px;
 background-color:              #000;
}

#locationLine::after
  {
   content: "";
   position:                    absolute;
   bottom:                      -83px;
   left:                        50%;
   width:                       1px;
   height:                      83px;
   background-color:            #000000;
  }

#locationLine2
  {
   position:                    absolute;
   top:                         calc(80% + 93px);
   left:                        -4px;
   width:                       calc(100% + 7px);
   height:                      1px;
   background-color:            #000;
  }

@media (max-width: 768px)
  {
   #locationHeader
     {
      margin-bottom:            0;
     }

   #locationLine, #locationLine::after, #locationLine2
     {
      display:                  none;
     }
   
   #locationMallorca h5
     {
      text-align:               left !important;
     }

   #locationMallorca
     {
      margin-bottom:            20px;
     }
  }



/* Video *************************************************************************************** */
.video
  {
   width:                       100%;
   height:                      auto;
   display:                     block;
  }

.youtube iframe
  {
   width:                       100%;
   height:                      auto;
   
   display:                     block;
  }

.a16_10 iframe  {aspect-ratio:  16 / 10;}
.a16_9 iframe   {aspect-ratio:  16 / 9;}
.a2_1 iframe    {aspect-ratio:  2 / 1;}
.a19_8 iframe   {aspect-ratio:  19 / 8;}

.youtube-consent
  {
   padding:                     1rem;
   background:                  var(--backgroundAccent);
   border:                      1px solid var(--line);
   page-break-inside:           avoid;
   text-align:                  center;
  }

.youtube-consent i
  {
   font-size:                   4em;
   color:                       #ff0000;
   display:                     block;
  }

.youtube-consent p
  {
   margin: 0 0 0.5rem 0;
  }
  
.youtube-consent button
  {
   all:                         unset;
   padding:                     0.5rem 1rem;
   font-size:                   1rem;
   cursor:                      pointer;
   background-color:            #ddd;
   border:                      2px solid #ffffff00;
   transition:                  border 0.25s linear;
  }

.youtube-consent button:hover
  {
   border:                      2px solid #ffffffff;
  }



/* Diverses ************************************************************************************ */
.universalpic
  {
   width:                       100%;
   height:                      auto;
  }



.mini
  {
   font-size:                   calc(var(--fontSize) * 0.85);
  }



.w100
  {
   display:                     block;
   width:                       100%;
   height:                      auto;
   overflow:                    hidden;
  }

.w100 img
  {
   width:                       100%;
   height:                      auto;
  }


/* Galerie * "Masonry"-Layout ****************************************************************** */
#thumbgallery
  {
   column-count:                4;
   column-gap:                  16px;
   padding:                     16px 0 16px 0;
  }

#thumbgallery img
  {
   width:                       100%;
   height:                      auto;
   display:                     block;
   margin-bottom:               16px;
   cursor:                      pointer;
  }


   #thumbgallery, .gallery
     {
      column-count:             3;
     }

@media (max-width: 992px)
  {
   #thumbgallery, .gallery
     {
      column-count:             2;
     }
  }

@media (max-width: 768px)
  {
   #thumbgallery, .gallery
     {
      column-count:            1;
     }
     
   #thumbgallery img
     {
      cursor:                  default;
     }
  }

#gallery
  {
   position:                    fixed;
   top:                         0;
   left:                        0;
   width:                       100vw;
   height:                      100vh;
   overflow:                    hidden;
   backdrop-filter:             blur(10px) brightness(0.25);
   -webkit-backdrop-filter:     blur(10px) brightness(0.25);
   z-index:                     10000;
   opacity:                     0;
   display:                     none;
  }

#cotiWrap
  {
   position:                    fixed;
   top:                         0;
   left:                        0;
   width:                       100vw;
   height:                      100vh;
   overflow:                    hidden;
   z-index:                     10001;
   display:                     none;
   perspective:                 500px;
  }

.no-scroll
  {
   position:                    fixed;
   overflow:                    hidden;
   width:                       100%;
  }

#coti
  {
   position:                    absolute;
   top:                         0;
   left:                        0;
   transform:                   rotateX(0deg);
   transform:                   rotateY(0deg);
   cursor:                      grab;
   user-select:                 none;
  }

#galleryKiller
  {
   position:                    fixed;
   right:                       25px;
   top:                         10px;
   color:                       var(--white);
   font-size:                   calc(var(--fontSize) * 2);
   transition:                  all 0.125s linear;
   cursor:                      pointer;
  }

#galleryKiller:hover
  {
   color:                       var(--ciColor);
  }

.nodecoration
  {
   text-decoration:             none !important;
  }



/* Footer -------------------------------------------------------------------------------------- */
footer hr
  {
   margin:                      -5px 0 20px 0;
  }

/* Debug *************************************************************************************** */
#debug
  {
   position:                    fixed;
   left:                        0;
   bottom:                      0;
   min-width:                   50vw;
   min-height:                  5vh;
   overflow:                    hidden;
   background-color:            #0000ff;
   color:                       #fff;
   font-size:                   12px;
  }