@media (min-width:1400px) and (max-width:2700px) {
    #colorbox.Page-Popup-Scroll,
    .Page-Popup-Scroll #cboxContent,
    .Page-Popup-Scroll #cboxWrapper {
        width: auto!important;
        max-width: 980px!important
    }
    .scrollpopup-load #colorbox.Page-Popup-Scroll {
        width: 980px!important;
        left: 50%!important;
        margin-left: -490px;
        opacity: 1;
        transition: all .2s linear 0s
    }
    #colorbox.Page-Popup-Scroll {
        width: 100px!important;
        left: 50%!important;
        opacity: 0;
        margin-left: -50px;
        transition: all .2s linear 0s
    }
    .Page-Popup-Scroll #cboxContent #cboxLoadedContent {
        width: auto!important;
        max-width: 977px!important
    }
}

@media (min-height:992px) and (max-height:1030px) {
    .extra-scroll-box {
        height: 240px
    }
}

@media (min-height:800px) and (max-height:991px) {
    .extra-scroll-box {
        height: 260px
    }
}

@media (min-height:768px) and (max-height:799px) {
    .extra-scroll-box {
        height: 260px
    }
}

@media (min-height:600px) and (max-height:767px) {
    .main-logo {
        margin-bottom: 0
    }
    .fx-menu .scroll-nav li a {
        font-size: 18px;
        line-height: 20px
    }
    .extra-scroll-box {
        height: 210px
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .toggle-box-bottom {
        width: 70%
    }
}

@media (min-width:1000px) and (max-width:1024px) {
    .Backtop {
        bottom: 70px;
        right: 21px
    }
}

@media (min-width:768px) and (max-width:979px) {
    #colorbox.Page-Popup,
    .Page-Popup #cboxContent,
    .Page-Popup #cboxWrapper {
        width: 750px!important
    }
    .Page-Popup #cboxLoadedContent {
        width: 748px!important
    }
    #colorbox.Page-Popup {
        left: 50%!important;
        margin-left: -375px!important
    }
    .toggle-box-bottom {
        width: 70%
    }
}

@media (min-width:960px) and (max-width:991px) {
    .main-logo {
        margin-bottom: 0
    }
    .fx-menu .scroll-nav li a {
        font-size: 18px;
        line-height: 20px
    }
}

@media (min-width:768px) and (max-width:959px) {
    .main-logo {
        margin-bottom: 40px
    }
    .fx-menu .scroll-nav li a {
        font-size: 18px;
        line-height: 20px
    }
    .Fx-panel {
        padding-left: 30px;
        width: 260px
    }
    .Content-Warp {
        margin-left: 240px
    }
    .section-paralex .container {
        width: 500px
    }
    .Backtop {
        bottom: 60px
    }
}

@media (min-width:768px) and (min-height:1024px) {
    .extra-scroll-box {
        height: 390px
    }
}

@media (max-height:600px) {
    .extra-scroll-box {
        height: 130px
    }
}

@media (max-width:1280px) and (min-height:600px) {
    .fx-menu {
        margin-top: -134px
    }
    .toggle-box-bottom {
        width: 65%
    }
}

@media (min-width:768px) and (max-height:1024px) {
    .ipad .section-paralex {
        background-size: 250% auto;
        background-attachment: scroll
    }
}

@media (min-width:1024px) and (max-height:768px) {
    .ipad .extra-scroll-box {
        height: 150px
    }
    .ipad .section-paralex {
        background-size: 160% auto;
        background-attachment: scroll
    }
}

@media (max-width:767px) 
{
/* ipad */
.footer-share-box {
    display: none;
}
#navbgwhite {
	display:none;
}
#navbgblack {
	display:none;
}

    .Fx-panel,
    .toggle-box-bottom {
        width: 100%
    }
    .Content-Warp,
    .Fx-panel {
        padding-left: 15px;
        padding-right: 15px
    }
    .Fx-panel {
        height: 100px;
        z-index: 9999
    }
    .main-logo {
        display: inline-block;
        margin-bottom: 0;
        padding-top: 15px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        top: 0;        
    }
    .section-paralex .container {
        width: 100%;
        max-width: 100%;
        margin-right: 15px
    }
    .main-logo img {
        width: 100px;
        height: auto
    }
    .section-paralex {
        padding-top: 130px
    }
    .Content-Warp {
        margin-left: 0
    }
    .Content-Warp .page-header {
        margin: 0;
        padding-bottom: 0;
        padding-left: 36px;
        padding-top: 25px
    }
    #colorbox.Page-Popup,
    .Page-Popup #cboxContent,
    .Page-Popup #cboxLoadedContent,
    .Page-Popup #cboxWrapper {
        width: 100%!important
    }
    #colorbox.Page-Popup {
        left: 50%!important
    }
    .Outer-Fix {
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));;        transition: all .3s linear 0s;
        z-index: 9999;
        height: 200px; 
        min-height: 100px
    }
    .Outer-Fix.active-header {
    background: rgba(255, 255, 255, .85);        transition: all .3s linear 0s
    }
    .Popup-container .pop-intro figure {
        margin-bottom: 15px;
        margin-right: 15px
    }
    .Popup-container .pop-intro figure img {
        max-width: 100%;
        height: auto
    }
    .section-paralex.Section-Page {
        height: auto!important
    }
    .Section-Page .page-content {
        padding-bottom: 45px
    }
    
/* Schleife */


.section-329 .page-content article h2
{
    padding-top: 30px
}

.section-350 .page-content article h2
{
    padding-top: 30px
}

.section-317 .page-content article h2
{
    padding-top: 30px
}

.section-323 .page-content article h2
{
    padding-top: 30px
}

.section-330 .page-content article h2
{
    padding-top: 30px
}

.section-3 .page-content article h2
{
    padding-top: 30px
}


/* Schleife */
    
    
    
    .slide-item .slider-caption {
        font-size: 14pt
    }
    .popup-header h1,
    .popup-header h2,
    .popup-header h3 {
        font-size: 15pt
    }
    .fx-footer .container-fluid .col-xs-6.col-sm-4 {
        width: 38%
    }
    .fx-footer .container-fluid .col-xs-6.col-sm-8 {
        width: 62%
    }
    .copyright {
        margin-right: 10px
    }
    .Widget-box.tweet {
        margin-left: 1em
    }
    .footer-share-box h4 {
        font-size: 12px
    }
    .Backtop {
        width: 40px;
        height: 40px;
        background: url(../images/colors/NATURAL-BEAUTY-back_to_top.png) no-repeat rgba(0, 0, 0, 0);
        background-size: 80px 40px;
        bottom: 50px;
        right: 20px
    }
    .Backtop:hover {
        width: 40px;
        height: 40px;
        background: url(../images/colors/NATURAL-BEAUTY-back_to_top.png) -40px 0 no-repeat rgba(0, 0, 0, 0);
        background-size: 80px 40px
    }
    .ipad .section-paralex,
    .iphone .section-paralex {
        background-size: 250% auto;
        background-attachment: scroll
    }
    .section-paralex {
        background-size: 250% auto
    }
    .iphone ul.form-list li input.input-box {
        font-size: 16px;
        padding: 2px 5px
    }
    #cbp-spmenu-s1 ul ul {
        padding-left: 10px
    }
}

@media (max-width:640px) {
    .Outer-Fix {
        height: auto;
        min-height: 100px
    }
    .section-paralex.Section-Page {
        height: auto!important
    }
    .Section-Page .page-content {
        padding-bottom: 45px
    }
    
/* Schleife */


.section-329 .page-content article h2
{
    padding-top: 30px
}

.section-350 .page-content article h2
{
    padding-top: 30px
}

.section-317 .page-content article h2
{
    padding-top: 30px
}

.section-323 .page-content article h2
{
    padding-top: 30px
}

.section-330 .page-content article h2
{
    padding-top: 30px
}

.section-3 .page-content article h2
{
    padding-top: 30px
}

/* Schleife */
    
    
    
    
    .slide-item .slider-caption {
        font-size: 14pt
    }
    .popup-header h1,
    .popup-header h2,
    .popup-header h3 {
        font-size: 15pt
    }
}

@media (min-width:360px) and (max-height:640px) {
    .section-paralex {
        background-size: 310% auto
    }
}

@media (min-width:640px) and (max-height:360px) {
    .section-paralex {
        background-size: 200% auto
    }
}

@media (max-width:639px) {
    .social-following {
        display: none
    }
    .fx-footer .container-fluid .col-xs-6.col-sm-4 {
        width: 45%
    }
    .fx-footer .container-fluid .col-xs-6.col-sm-8 {
        width: 55%
    }
    .footer-share-box ul.social-open li {
        margin: 0 2px
    }
    .footer-share-box ul.social-open li a {
        background-size: 21px 21px!important
    }
}

@media (max-width:480px) {
    #cboxLoadedContent {
        padding-bottom: 10px
    }
    .toggle-content li p a {   
	color: #000;
    text-decoration: underline;   
}
    .Popup-container {
        padding: 0 5px 5px
    }
    .section-paralex.Section-Page {
        height: auto!important
    }
    .page-content h2 {
        font-size: 16pt
    }
    .Content-Warp .page-header h2 {
        font-size: 17pt
    }
    .Content-Warp .page-header {
        margin: 0;
        padding-bottom: 0;
        padding-left: 20px;
        padding-top: 25px
    }
    .footer-panel-popup {
    background: url(../images/spride-arrow-dup-down.png) -4px -5px no-repeat rgba(255, 255, 255, .8);        height: 30px;
        left: 15px;
        position: absolute;
        top: -30px;
        transition: all .3s ease 0s;
        width: 30px
    }
    .footer-panel-popup:hover {
        background-position: -5px -45px
    }
    .main-logo {
        margin-left: -35px;
        padding-top: 10px
    }
    .main-logo img {
        height: 60px;
        width: auto;
    }
    .main-logo img {
    -webkit-filter: drop-shadow(0px 0px 0px #7f7f7f)!important;
    filter: drop-shadow(0px 0px 0px #7f7f7f)!important;
}
    .Outer-Fix {
        min-height: 75px
    }
    .Fx-panel {
        height: 75px
    }
    .slick-next,
    .slick-prev {
        z-index: 9
    }
    .section-paralex {
        padding-top: 90px;
        background-size: 175% auto
    }
    .mobile-nav {
        top: 11px
    }
    .slide-item img {
        height: 230px
    }
    .fx-footer {
        z-index: 999
    }
    .footer-left p,
    .footer-share-box h4 {
        font-size: 10px
    }
}

@media (max-width:479px) {
    ul.form-list li label {
        display: block;
        float: none;
        font-weight: 400;
        line-height: 30px;
        margin-right: 0;
        min-width: 100%;
        text-align: left
    }
    ul.form-list li input.input-box {
        width: 100%
    }
    ul.form-list li small {
        padding-left: 0
    }
    ul.form-list li input.captcha-code {
        width: 50%;
        margin: 0 auto
    }
    .page-content .article .col-xs-6,
    ul.form-list li textarea {
        width: 100%
    }
    .Popup-container .pop-intro figure {
        margin-bottom: 15px;
        margin-right: 0;
        float: none;
        width: 100%;
        height: auto
    }
    .Popup-container .pop-intro figure img {
        max-width: 100%;
        height: auto;
        width: 100%
    }
    .page-content article .col-xs-6,
    ul.float-even-oddsmall-list li.even-large {
        width: 100%
    }
    ul.float-even-oddsmall-list li.odd-small {
        width: 30%;
        margin-bottom: 15px
    }
    .fx-footer .container-fluid .col-xs-6.col-sm-8 {
        width: 100%;
        text-align: center
    }
    .section-paralex {
        background-size: 275% auto
    }
}

@media (max-width:414px) {
    .slide-item .slider-caption {
        padding: 0 15px
    }
    .page-content {
        padding-left: 0;
        padding-right: 0
    }
    .page-content article h2 {
        font-size: 17pt
    }
    .slide-item .slider-caption {
        font-size: 12pt
    }
    ul.float-even-odd-list li {
        width: 100%;
        margin-bottom: 15px
    }
    .extra-scroll-box {
        margin-bottom: 15px
    }
    .Backtop {
        bottom: 42px;
        height: 40px;
        right: -3px
    }
}

@media (max-width:375px) {
    .footer-share-box {
        display: none
    }
    .copyright {
        margin-right: 0;
        display: block;
        text-align: center
    }
    .fx-footer .col-xs-6 {
        width: 100%
    }
    .slide-item img {
        height: 175px
    }
}

@media (max-width:360px) {
    .section-paralex {
        background-size: 310% auto
    }
}

@media (max-width:320px) {
    .section-paralex {
        background-size: 250% auto
    }
    .mobile-nav {
        top: 11px
    }
}

@media (min-height:0px) and (max-height:639px) {
    .Mopbile-menu-Warp {
        height: calc(100vh - 190px);
        overflow-y: scroll
    }
    ::-webkit-scrollbar {
        width: 2px
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color:#42698F;
        width: 2px
    }
    ::-webkit-scrollbar-track {
        width: 8px;
        border-radius: 3px;
        padding: 0 3px;
        background-color: #9D919B
    }
}