/*-----------------------------------------------------------------------------------



    CSS INDEX
    ===================

    01. Default CSS (incl. Common CSS)


    (c) 2022 .netwings-IT 

    made for Jenkner, Schneider & Weber - Praxis fuer Krankengymnastik 
-----------------------------------------------------------------------------------*/
/*===========================
    1. COMMON css 
===========================*/

/* barlow-300 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/barlow-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/barlow-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/barlow-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/barlow-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/barlow-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/barlow-v12-latin-300.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* barlow-regular - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/barlow-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/barlow-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/barlow-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/barlow-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/barlow-v12-latin-regular.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* barlow-500 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/barlow-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/barlow-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/barlow-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/barlow-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/barlow-v12-latin-500.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* barlow-600 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/barlow-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/barlow-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/barlow-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/barlow-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/barlow-v12-latin-600.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* barlow-700 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/barlow-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/barlow-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/barlow-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/barlow-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/barlow-v12-latin-700.svg#Barlow') format('svg'); /* Legacy iOS */
}
/* hind-300 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/hind-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/hind-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/hind-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/hind-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/hind-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/hind-v16-latin-300.svg#Hind') format('svg'); /* Legacy iOS */
}

/* hind-regular - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/hind-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/hind-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/hind-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/hind-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/hind-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/hind-v16-latin-regular.svg#Hind') format('svg'); /* Legacy iOS */
}

/* hind-500 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/hind-v16-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/hind-v16-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/hind-v16-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/hind-v16-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/hind-v16-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/hind-v16-latin-500.svg#Hind') format('svg'); /* Legacy iOS */
}

/* hind-600 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/hind-v16-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/hind-v16-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/hind-v16-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/hind-v16-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/hind-v16-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/hind-v16-latin-600.svg#Hind') format('svg'); /* Legacy iOS */
}

/* hind-700 - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/hind-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/hind-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/hind-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/hind-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/hind-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/hind-v16-latin-700.svg#Hind') format('svg'); /* Legacy iOS */
}


body { background-color: lightgrey;
  font-family: 'Hind', sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #646464; }


* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

i {color:black;}

.li1 {color:black;}
.li2 {font-weight: bold;list-style-type: square;list-style-position: inside;color: darkred;font-size:25px;list-style-position: outside;}
.li3 {color:black;}
.li4 {font-weight: bold;list-style-type: square;list-style-position: inside;color: #404040;font-size:17px;}
span {color: #404040;font-size:17px;}

.u1 {text-decoration: none; color: #404040;font-size:17px;}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none; }

.ul1 {margin-left: 0; 
      padding-left: 40px;
      text-align: left;}

.ul2 {margin-left: 0; 
      padding-left: 60px;}

.ul3 {font-family: Pisa LT Pro, bold;
    margin-left: 0; 
      padding-left: 40px;padding-right: 40px;
      -webkit-box-shadow: 5px 5px 15px 5px rgba(21,97,84,0.2); 
      box-shadow: 5px 5px 15px 5px rgba(21,97,84,0.2);
      }
.ul4 {float: left;}

h {color:cadetblue;
    text-shadow: -1px 0 darkgrey, 0 1px darkgrey, 1px 0 darkgrey, 0 -1px darkgrey
                 
    }

h1 {color:black;
    text-shadow: -1px 0 black, 0 1px lightgrey, 1px 0 lightgrey, 0 -1px darkgrey, 9px 8px 8px darkgrey;margin-bottom: 0.2em;}
h3 {margin-top: 0.3em;}
h5 {color: darkred;font-weight: bold;}
hr {border-top: 2px solid darkred; border-radius: 5px;margin-top: -0.8em;}
.hrunten {border-bottom: 2px solid darkred;margin-top: 0.6em;}

.span1 {background-color:darkred;color:white;margin-top: -1em;padding-bottom: 0;padding-top: 0.1em;opacity: 0.8}   
.span2 {border: 2px solid white; background-color:darkred;color:white;margin-top: -1em;padding-bottom: 0.3em;padding-top: 0.5em;opacity: 0.6;float: right;}   

img {max-width: 100%;}

.img1 {max-width: 80%}

.container {}

div.rechts {padding-left: 40px;}

div.untergrund {background-color: rgba(255,255,255,0.5);
                width: auto;
                padding: 50px;
                border-radius: 25px;
                border: 0px solid black;
                box-shadow: 3px 7px 15px darkgrey;
                color: black;
               }
div.untergrund2 {background-color: rgba(255,255,255,1);
                width:auto;
                padding: 10px;
                border-radius: 10px;
                border: 0px solid darkgrey;
                box-shadow: 3px 7px 15px darkgrey;
               }


div.transbox {margin: 30px;
           background-color: #ffffff;
           opacity: 0.6;}
div.transbox p {margin: 5px;
                font-weight: bold;
                color: #000000;}


.myButton {
	box-shadow: 4px 17px 16px -4px darkgrey;
	background:linear-gradient(to bottom, white 3%, darkred 100%);
	background-color:black;
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:9px 40px;
	text-decoration:none;
	text-shadow:6px 7px 15px darkgrey;
}
.myButton:hover {
    background: white;
	background-color:white;
    text-decoration: none;
    color:darkred;
}
.myButton:active {
	position:relative;
	top:1px;
}

.a6 {transition: all .8s ease-in-out;vertical-align: 2px; text-decoration: none;}
.a6:focus {color: white;}
.a6:hover {color: darkred; text-decoration: none; font-size: 1.5rem;}
.a6:active {color: white;}
.a6:visited {color: white;}
.a6:link {color: white;}

.a5 {transition: all .5s ease-in-out;color: white;vertical-align: 2px;}
.a5:focus {color:#000000;}
.a5:hover {text-decoration:none; text-shadow: 5px 10px 10px #000000; transform: scale(1.3)} 
.a5:active {color:#000000;}
.a5:visited {color:#000000;}
.a5:link {color:#000000;}

.a4 {transition:  all .8s ease-in-out;vertical-align: 2px;color:white;text-decoration: none;}
.a4:focus {color: black;}
.a4:hover {transition: all .8s ease-in-out;text-shadow: 5px 10px 10px #000000;text-decoration: none; color: black;}
.a4:active {color: black;}
.a4:visited {color: black;}
.a4:link {color: black;}

.a3 {vertical-align: 2px;}
.a3:hover {text-shadow: 5px 10px 10px #156154; }

.fade-in1 {
   
	opacity: 0;
	animation-name: fadeInOpacity1;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    animation-delay: 4s;
	animation-duration: 3s;
    animation-fill-mode: forwards;
}
.fade-in2 {
 
	opacity: 0;
	animation-name: fadeInOpacity2;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    animation-delay: 4s;
	animation-duration: 3s;
    animation-fill-mode: forwards;
}
.fade-in3 {
    
	opacity: 0;
	animation-name: fadeInOpacity3;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    animation-delay: 4s;
	animation-duration: 3s;
    animation-fill-mode: forwards;
}
.fade-in4 {
    
	opacity: 0;
	animation-name: fadeInOpacity4;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    animation-delay: 4s;
	animation-duration: 3s;
    animation-fill-mode: forwards;
}
.fade-in5 {
    
	opacity: 0;
	animation-name: fadeInOpacity5;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    animation-delay: 4s;
	animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes fadeInOpacity1 {
	0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes fadeInOpacity2 {
	0% {opacity: 0;}
    25% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeInOpacity3 {
	0% {opacity: 0;}
    50% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeInOpacity4 {
	0% {opacity: 0;}
    75% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeInOpacity5 {
	0% {opacity: 0;transform: scale(1.5)}
    90% {opacity: 1;}
	100% {opacity: 1;transform: scale(1)}
}




#logobox {display:none;}

#imgbox {}

#box {width:1px;
		height:80px;}

#circle {position: relative;
         width: 200px; 
         height: 200px; 
         top: -150px; 
         left: -10px;
         border-radius: 50%;
         background: linear-gradient(310deg, #ffffff, #ededed);
         box-shadow:  32px 32px 181px #156154,
             -32px -32px 81px #ffffff;}


.animation-one {
  -webkit-animation: rotate 4s linear infinite;
  -moz-animation: rotate 4s linear infinite;
  -o-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;}

.animation-two {
 opacity: 0;
 animation-name: blendin;
 animation-delay: 0s;
 animation-duration: 3s;
 animation-fill-mode: forwards;}

.animation-three {
 opacity: 0;
 animation-name: werbung;
 animation-delay: 2s;
 animation-duration: 4s;
 animation-fill-mode: forwards;}

.animation-four {
 opacity: 0;
 animation: werbung 4s, werbung2 6s;
 animation-delay: 2s;
 animation-duration: 6s;
 animation-fill-mode: forwards;}

.animation-five {
 opacity: 0;
 animation-name: blendin;
 animation-delay: 0s;
 animation-duration: 5s;
 animation-fill-mode: forwards;}


@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } 
}

@keyframes blendin {
    0% {
    opacity: 0; }
  100% {
    opacity: 1; }
}
@keyframes werbung {
    from { margin-left: -50%;}
     to {margin-left: 0%;}
    0% {
    left: -200px;opacity: 0; }
  60% {
    opacity: 1; }
    100% {
    opacity: 1; }
}
@keyframes werbung2 {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); } 
    
   33% {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3); }
  100% {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0); } 
   } 

@keyframes upscale {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); } 
  100% {
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0); } 
   } 

/*===========================
    RESPONSIVE - Mobile
===========================*/
@media screen and (max-width: 576px) {
    div.untergrund {
        padding: 20px;
        border-radius: 15px;
    }
    .ul1 {
        padding-left: 15px;
    }
    div.rechts {
        padding-left: 0;
    }
    .li2 {
        font-size: 18px;
        list-style-position: inside;
    }
    h1 {
        font-size: 1.5em;
    }
    .span1 {
        font-size: 0.9em;
    }
    .span2 {
        float: none;
        display: inline-block;
    }
    .myButton {
        padding: 9px 25px;
        font-size: 17px;
    }
    .float-right {
        float: none !important;
        display: block;
        margin: 0 auto;
    }
}

@media screen and (max-width: 400px) {
    div.untergrund {
        padding: 15px;
    }
    .ul1 {
        padding-left: 10px;
    }
    h1 {
        font-size: 1.3em;
    }
}