/* ---------------------------------------------------
Title: IDEENWERKSTATT TINTIFAX - Layout CSS
Author: Pierpaolo Federici - IDEENWERKSTATT TINTIFAX

------------------- Color Palette --------------------

    func-fit blue       -      rgb(0,139,210);
    func-fit gray       -      rgb(55,55,55);

------------------------------------------------------



/*======================== BASIC ========================*/

@font-face {
  font-family: 'Roboto';
  src: url(../fonts/RobotoCondensed-Regular.ttf);
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(../fonts/RobotoCondensed-Bold.ttf);
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Yanone Kaffeesatz';
  src: url(../fonts/YanoneKaffeesatz-ExtraLight.ttf);
  font-weight: 600;
  font-display: swap;
}


body    {font-family: 'Roboto', sans-serif; color: #444; letter-spacing: normal; /* height: 2500px; */}

.bold     {font-weight: bold;}
.center   {text-align: center;}
.underline{text-decoration: underline;}
.blue     {color: rgb(0,139,210);}

h1, h2, h3, h4, h5 {letter-spacing: normal;}

.highlight        {padding-left: 20px;}
.highlight:before {content:'\2606'; position: absolute; padding-right: 20px; font-size: 1em; margin-left: -20px;}


/*======================== HEADER ========================*/
header                      {background-color: rgba(55,55,55, 0.95); width: 100%; display: inline-block; position: fixed; z-index: 100;;}
header.menu-big             {height: 80px;}
header.menu-small           {height: 50px;}
.menu-big .logo-schrift     {width:80%; max-width: 300px; margin: 12px;}
.menu-small .logo-schrift   {width:100%; max-width: 215px; margin: 5px 0px 10px;}

header, .logo-schrift       {-webkit-transition: all 0.3s linear;
                            -moz-transition: all 0.3s linear;
                            -ms-transition: all 0.3s linear;
                            -o-transition: all 0.3s linear;
                            transition: all 0.3s linear;}


#navtools           {position: fixed; right: 0; top: 50%; z-index: 100; transform: translateY(-50%); display: none;}
#navtools ul        {margin-right: -155px;}
#navtools li        {list-style-type: none; display: block; right: 0; margin-bottom: 0; overflow: hidden; width: 200px; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;}
#navtools a         {display: block; text-decoration: none; font-weight: bold; background-color: rgba(0,0,0, 0.75); padding-left: 5px; -webkit-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s;}
#navtools a:before  {display: block; width: 40px; float: left;}
#navtools a.login:before {content: url(../images/ico-login.svg);}
#navtools a.mail:before {content: url(../images/ico-mail.svg);}
#navtools a.phone:before {content: url(../images/ico-phone.svg);}
#navtools a.facebook:before {content: url(../images/ico-facebook.svg);}
#navtools a.instagram:before {content: url(../images/ico-instagram.svg);}
#navtools a span    {line-height: 40px;}

#navtools li:hover  {margin-left: -150px;}
#navtools a:hover   {background-color: #fff;}


/* slide-show */
#slideshow {overflow: hidden;}
.bg-fade 	{position:relative; width:100%;}
.bg-fade ul {margin:0; height: 400px;}
.bg-fade li {display:block; position:absolute; width: 100%; height: 400px; left:0; top:0; background-position: center; background-size: cover; background-repeat: no-repeat;}

/*#index .bg1	{background-image: url('../images/slide01-neu.jpg');}
#index .bg2	{background-image: url('../images/slide02-neu.jpg');}
#index .bg3	{background-image: url('../images/slide03-neu.jpg');}*/
/*#index .bg4 {background-image: url('../images/slide04.jpg');}*/

#buchungpp  {position: absolute!important;
            top: 50%!important; left: 50%!important; transform: translate(-50%, -50%)!important;
            border: 2px solid #fff;
            background-color: rgba(0,139,210, 0.5)!important;
            z-index: 10!important;
            text-transform: uppercase;
            transition: all 0.1s linear;
            -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            -moz-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            -ms-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            -o-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            font: 200 4.6em 'Yanone Kaffeesatz', sans-serif !important; color: #fff; padding: 20px 10px 10px!important; letter-spacing: 5px; transition: all 0.1s linear;
            text-align: center;
            }
#buchungpp:hover {border-color: rgb(55,55,55); background-color: rgba(0,139,210, .8)!important;}
/*#buchungpp a span {transition: all 0.1s linear;}*/
/*#buchungpp a    {text-decoration: none;}
#buchungpp a:hover h1   {color: rgb(55,55,55);}
#buchungpp a:hover span {border-color: rgb(55,55,55);}
#buchungpp h1   {font: 200 2.5em 'Yanone Kaffeesatz', sans-serif; color: #fff; text-align: center; margin: 0; padding: 25px 15px; letter-spacing: 5px; transition: all 0.1s linear;}
#buchungpp .down {border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 15px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}*/



.motto      {position: absolute; width: 270px; top:50%; left: 0; right: 0; margin: -80px auto auto; border: 2px solid #fff; z-index: 10;
            -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            -moz-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            -ms-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            -o-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
            filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));}
.motto a    {text-decoration: none;}
.motto a:hover h1   {background-color: #fff; color: rgb(0,139,210);}
.motto h1   {font: 200 2.5em 'Yanone Kaffeesatz', sans-serif; color: #fff; text-align: center; margin: 0; padding: 25px 15px; letter-spacing: 5px; transition: all 0.3s linear;}

.logo-ecke  {position: absolute; right: -50%; bottom: -40%; width: 100%; height: 50%; background-color: #000; transform: rotate(-45deg); mix-blend-mode: color;}


/* Über uns */
#info             {color: #fff; overflow: hidden;}
#info .container  {width:100%; max-width: 100%; padding: 0;}
#info .columns    {width:100%; margin: 0; }
#info .ffit-blue  {background-color: rgb(0,139,210);}
#info .ffit-gray  {background-color: rgb(55,55,55);}
#info .wide       {height: 360px;}
#info .high       {height: 320px;}
#info h4          {padding: 30px 20px 0; line-height: 1em; font-size: 1.6em;}
#info h5          {padding: 0px 20px 20px; letter-spacing: 1px; margin: 0; box-sizing: border-box;}
#info a           {text-decoration: none;}
#info p           {padding: 0 20px;}
#info ul          {margin-top: 10px;}
#info li          {list-style: none; padding-left: 20px;}
#info li:before   {content:'\2713'; position: absolute; margin-left: -20px;}
#info ul.ausbildung a {color: #fff; transition: all 0.3s linear;}
#info ul.ausbildung a:hover {color: #444;}
#info ul.ausbildung li:before {content: '\21E2';}
.ffit-gray .img01         {background: url('../images/box-georg-01.jpg') no-repeat center; background-size: cover;}
.ffit-gray .img02         {background: url('../images/box-georg-02.jpg') no-repeat center; background-size: cover;}
.ffit-blue .img01       {background: url('../images/box-andreas-01.jpg') no-repeat center; background-size: cover;}
.ffit-blue .img02       {background: url('../images/box-andreas-02.jpg') no-repeat center; background-size: cover;}

#info .tooltip    {cursor: pointer; display: inline-block; padding-bottom: 0; margin-bottom: 20px;}
#info .tooltip:hover {color: rgb(0,139,210);}


/*Kurse*/
section#kurse   {margin: 70px 0 120px 0;}
section#kurse .container {width: 95%; max-width: 100%;}
#kurse h4       {color: rgb(0,139,210); margin: 0;}
#kurse #kursplan{width: 100%; min-height: 850px; border: 1px solid rgb(0,139,210);}
#kurse .ico img {max-width: 100px;}
#kurse .ghost-button {background-color: rgb(0,139,210); cursor: pointer;}
#kurse .ghost-button:hover {background-color: rgb(55,55,55);}

/* Unser Angebot */
section#angebot     {margin: 0; padding: 80px 0;}
#angebot-wrap       {position: relative; display: inline-block; width: 100%; overflow: hidden;}
#angebot .container {height: 100%; width: 90%;}
#angebot .box       {text-align: center; margin-top: 20px; padding: 20px 1% 1% 1%;}
#angebot .box img   {width:90%;}
#angebot h3         {font-size: 2em;}
#angebot h4         {margin: 0; font-size: 1.6em;}
#angebot h5         {margin: 0; padding: 10px 0; font-weight: 700; font-size: 1em;}
#angebot a          {text-decoration: none; color: #444; transition: background-color 0.3s ease-in, color 0.3s ease-in;}

#angebot ul          {margin-top: 10px;}
#angebot li          {list-style: none; padding-left: 20px;}
#angebot li:before   {content:'\2713'; position: absolute; margin-left: -20px;}

#angebot .slide       {background-color: rgb(0,139,210); color: #fff; padding: 20px 0; font-size: 1.1em;}
#angebot .slide img   {margin-top:20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}


/* Foto */
section#foto      {margin-top: 70px;}
#foto div.img     {background:url('../images/foto.jpg') no-repeat center; background-size: cover; height: 550px; width: 100%;}
#foto .motto      {position: relative; top:170px;}


/*PREISE*/
section#preise      {padding: 70px 0; letter-spacing: normal; background:url('../images/mitgliedschaften.jpg') no-repeat center; background-size: cover; overflow: hidden;}
/*section#preise      {color: #fff; padding: 70px 0; text-align: center; letter-spacing: normal; background:url('../images/mitgliedschaften.jpg') no-repeat center; background-size: cover;}*/
/*#preise .box        {background-color: rgb(55,55,55); margin-top: 20px; margin-bottom: 20px;}
#preise .box h4     {padding: 30px 0; margin: 0; font-weight: bold; letter-spacing: normal;}
#preise h3          {font-size: 2em;}
#preise h5          {letter-spacing: normal;}
#preise .box .preis {font-size: 2.9em; font-weight: normal; display: block; background-color: #fff; color: rgb(0,139,210);}
#preise .box .preis:after {content: " €"; font-size: 0.8em; font-weight: normal;}
#preise .box .text  {font-size: 1.4em; display: block; font-weight: normal; padding: 10px 0;}
#preise .box a      {text-decoration: none;}
#preise .ghost-button {background-color: rgb(0,139,210);}
#preise .ghost-button:hover {background-color: #fff; color: rgb(0,139,210);}
*/

/*AKTUELLES*/
#aktuelles {padding: 70px 0;}

#aktuelles .ghost-button {background: rgb(0,139,210); margin: inherit;}
#aktuelles .ghost-button:hover {color: rgb(0,139,210); background-color: #fff; border-color: rgb(0,139,210);}

/* GMAP */
#gmap #map_canvas{height: 500px; width: 100%;}



/*======================== FOOTER ========================*/

footer {background-color: rgb(55,55,55); color: #fff; padding-top: 40px;}
footer h5 {font-weight: 700; line-height: 1.2em;}
footer h6 {color: rgb(0,139,210); font-size: 1.2em; margin: 0;}
footer a  {text-decoration: none; color: rgb(0,139,210);}
footer a:hover {color: #fff;}
footer p  {color: #fff;}

footer .logo-foot {position: relative; width: 85%; max-width: 200px; margin: 5px 0 20px 0; left: 50%; transform: translateX(-50%);}

footer .social      {text-align: center;}
footer .social a {display: block; width: 50px; height: 50px; display: inline-block; margin: 10px;
                  -webkit-transition: 0.4s;
                  -moz-transition: 0.4s;
                  transition: 0.4s;}

footer a.facebook         {background-image: url('../images/facebook.png');}
footer a.facebook:hover   {background-image: url('../images/facebook_on.png');}
footer a.youtube          {background-image: url('../images/youtube.png');}
footer a.youtube:hover    {background-image: url('../images/youtube_on.png');}
footer a.instagram        {background-image: url('../images/instagram.png');}
footer a.instagram:hover  {background-image: url('../images/instagram_on.png');}

footer form {color: black;}
footer form .button-primary {background-color: rgb(0,139,210); border:none;
                            /* background color transition */
                            -webkit-transition: 0.3s;
                            -moz-transition: 0.3s;
                            transition: 0.3s;}
footer form .spam         {display: none;}
footer .alert-success     {font-size: 1.2em; color: rgb(0,139,210);}

footer #impr-agb      {width: 100%; margin: auto; text-align: center; padding: 10px 0; box-sizing: border-box;}

/* Back to top button */
#back-top   {position: fixed; z-index: 100; right: 20px; bottom: 20px; display: none;}

/* arrow icon (span tag) */
#back-top span {width: 50px; height: 50px; display: block; margin-bottom: 7px; background: rgb(0,158,227) url('../images/up-arrow.png') no-repeat center center;
              /* background color transition */
              -webkit-transition: 0.3s;
              -moz-transition: 0.3s;
              transition: 0.3s;
}
#back-top a:hover span {background-color: rgb(60,60,60);}




/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Larger than mobile */
@media (min-width: 400px) {

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

  .menu-big .logo-schrift     {width:80%;}

  #info h5        {font-size: 1.2em;}

  footer .logo  {display: none;}
  footer .kontakt, footer .form {width: 100%!important;}
  
}

/* Larger than tablet */	
@media (min-width: 750px) {


  .bg-fade ul, .bg-fade li {height: 710px;}
  .probetraining    {width: 400px; top:50%; margin: -80px auto auto;}
  .probetraining h1 {font-size:4em; padding: 20px 10px 10px 10px; line-height: 60px;}

  .motto  {width: 400px; top:50%; margin: -80px auto auto;}
  .motto h1   {font-size:4em; padding: 20px 10px 10px 10px; line-height: 60px;}

  .logo-ecke {bottom: -15%;}
  

  #info .high     {height: 260px;}
  #info h5        {font-size: 1.2em;}

  #feedback .bubble-r     {padding-left: 90px;}
  #feedback .quote:before {content: "“"; font:400 20rem Arial, sans-serif; line-height: 0px; position: absolute; margin: 80px 0 0 -75px;}
  #feedback .bubble-r .quote:before {color: rgb(220,220,220);}
  #feedback .bubble-r span::after {content: "„"; font: 4em Arial, sans-serif; line-height: 0; position: absolute; padding-left: 5px; color: rgb(220,220,220);}


  #galerie .gal-grid .columns {width: 25%;}

  footer .container {width: 100%;}
  footer .logo  {display: block;}
  footer .logo-foot {max-width: 100%;}
  footer .kontakt {width: 30.6666666667%!important;}
  footer .form    {width: 39.3333333333%!important;}
  footer form   {padding: 0px 20px 0 50px;}
  footer .border {border-left: 1px dotted rgb(0,139,210);}

  footer #impr-agb {text-align: left; padding-left: 50px;}

}

/* Larger than desktop */
@media (min-width: 1000px) {

  .onlymob {display: none;}
  #navtools{display: block;}

  #info .columns  {width:25%;}
  #info h5        {font-size: 1em;}
  #info .high       {height: 430px;}
  #info .wide       {height: 540px;}
  
}
	
/* Larger than Desktop HD */
@media (min-width: 1200px) {
  #info .high     {height: 370px;}
  #info .wide       {height: 370px;}

  #angebot h5         {font-size: 1.4em;}

}

/* Wide Screen */
@media (min-width: 1400px) {

}




/*====================== buttons =======================*/

.ghost-button {
  display: block;
  width: 50%;
  max-width: 200px;
  min-width: 150px;
  padding: 8px;
  margin: 20px auto;
  color: #fff;
  border: 1px solid #fff;
  font-size: 1.2em;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: rgb(0,139,210);
  transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.ffit-blue .ghost-button:hover {color: rgb(0,139,210);}
.ffit-gray .ghost-button:hover {color: rgb(55,55,55);}

footer .ghost-button {width: 100%; max-width: 100%; min-width:135px; padding: 5px; margin: 15px 0; font-size: 1.1em; color: #fff;}

@media (min-width: 1200px) {
  footer .ghost-button {width: 100%; max-width: 100%; font-size: 1em;}
}



/*====================== bubbles =======================*/
.bubble-r, .bubble-l
{
position: relative;
padding: 20px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble-r {margin-bottom: 20px;}


.bubble-l:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 20px 0 20px 45px;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
right: -25px;
top: 15px;
display: none;
border-color: transparent rgb(0,139,210);
}

.bubble-l
{
background-color: rgb(0,139,210);
color: #fff;
}



@media (min-width: 750px) {
  .bubble-r, .bubble-l {margin: 20px 0;}
  .bubble-r:after, .bubble-l:after {display: block;}
}


#virtualtour {
  overflow: hidden;
  .columns {
    margin-left: 0;
    text-align: center;
    width: 100%;
    h4 {
      margin: 25px 0 20px;
    }
    iframe {
      height: 400px;
    }
    @media (min-width: 960px) {
      width: 50%;
      iframe {
        height: 700px;
      }
    }
  }
}
/*.map-container iframe{
  pointer-events: none;
}
.map-container iframe.clicked{
  pointer-events: auto;
}*/