/* Big tablets to 1200px (widths smaller than 1140px row) */
@media only screen and (max-width: 1200px) {
  
    .intro-text-box {
    width: 100%;
    padding: 0% 2%;
}
    .row { padding: 0% 2%; }
    
    .logo {
    height:80px;
    width: auto;
    float: left;
    margin-top: 10px;
}
    


/* Small tablets to big tablets 768px from 0 to 1023px */
@media only screen and (max-width: 1023px) {
    
    
       .main-nav { display: none;}
       .mobile-nav-icon { display: inline-block; }
    
    .mobile-nav-icon i {
        color: #fff;
    }
    
    .main-nav {
        float: left;
        margin-top: 20px;
        margin-left: 20px;
    } 
    
    .main-nav li {
        display: block;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 5px 0;
        font-size: 100%;
    }
    
    .sticky .main-nav {
    margin-top: 10px;
}
    
.sticky .mobile-nav-icon i {
        color: #555;
    }    

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    color: #555;
    padding: 10px 0;
}

    
    body { font-size: 18px; }
    
.avatar-massagen {
    
    height:100px;
    width: 200px;
    display: block;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2px;
    }
    
.massagen-box p {
        
        min-height: 230px;
        font-size: 80%;
}

.massagen-box {height: 492px;}
.massagen-box h3 {font-size: 90%;}
    
.preise-box ul li {
    
    padding: 5px 0;
    font-size: 90%;
}
    
    .massagen-btn { margin-top: 20px;}

    
.preise-box h3 {font-size: 90%}
    
.krankenkasse p {font-size: 70%;}
    
h2 {
    
    font-size: 150%;
    margin-top: 25px;
    margin-bottom: 25px;
    
}

.massagen-fussbad {height: 50vh;} 
    
    .timewaver-video,
    .juice-video
    {
        height:200px;
        width: 300px;
    } 
    header,
    .massagen-foot,
    .massagen-klassisch,
    .massagen-osteo,
    .massagen-hot-stone,
    .massagen-wirbel,
    .massagen-fussbad,
    .massagen-narben,
    .TimeWaver,
    .bodytec,
    .lifestyle-energetix,
    .juice-plus,
    .uber-mich,
    .kontakt {background-attachment: scroll;}
    
    }

/* Small phones to small tablets: 481px from 0 to 767px */
@media only screen and (max-width: 767px) {
    
     

    
.logo {
    height:50px;
    width: auto;
    float: left;
    margin-top: 10px;
}
    
    h2 {
    
    font-size: 150%;
    margin-top: 10px;
    margin-bottom: 10px;
    
}
    
    .row { 
        
    padding: 0% 2%; 
    margin: 0 0;
        }
    
.intro-text-box {
    
    width: 80%;
    font-size: 75%;
}    
 
    .col {width: 100%;
        margin: 1% 0 4% 0;}
    
    
    
    .massagen-box p {
        min-height: auto;
        font-size: 80%;
}
    
    .avatar-massagen,
    .timewaver-video,
    .juice-video
    {
    height:200px;
    width: 300px;
    display: block;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

    .massagen-box {
        
        height: auto;
        margin: 0 0;
    }
.massagen-box h3 {font-size: 90%;}
    .preise-box ul li {
    padding: 5px 0;
        text-align: center;
}
    
.behandlung-text {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    color: #fff;
    line-height: 145%;
    font-size: 75%;
    letter-spacing: 1px;
}    
    
.welcome-copy{
   font-size: 80%;
}
    
    .mich-box 
li, h3
{
    list-style: none;
    font-size: 75%;
}
    
.mich-box-weiterbildungen
li
{
    list-style: none;
    font-size: 75%;
} 
    
.lifestyle-energetix-text,.juice-plus-text { font-size: 80%;}
    
    .preise-box {
    background-color: #fff;
    border-radius: 5px;
    width: 90%;
    margin-left: 5%;
    box-shadow: 5px 5px #ededed;
    min-height: auto;
}

/* Small phones from 0 to 480px */
@media only screen and (max-width: 480px) {
 
    .massagen-box {
    padding: 3% 3%;
        margin: 10px 0; }
        
.preise-box { margin-top: 10px; }
    
    .col { margin: 0 0 4% 0;}
    
    
    
    }