@import url( '../fonts/stylesheet.css');

/* @import url('svg/fa-regular-400.svg'); */
/*
html {
  scroll-behavior: smooth;
}
:target:before {
    content: "";
    display: block;
    height: 200px;
    margin: -200px 0 0;
}
*/

body {
    font-family: 'poppinsmedium', sans-serif;
    background-color:#b5152b !important;
     font-size: 11px;
}

p {
    font-family: 'poppinslight', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #333;
}
.fett{
	font-family: 'poppinsbold', sans-serif;
}
a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#content a{
color:#b5152b !important;
}
#content .kontakt a, #content .kontakt2 a{
	color:#333 !important;
}
#content{
  background-color: #eee;
  }
}
@media screen and (max-width: 768px){
.navbar {
    padding: 15px 10px;
	background: #b5152b !important;
   	margin: -40px -40px 0 -40px !important;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 40px;
    z-index: 10000;
    width: 100%;
	}
.sidebar-header{
	display: none;
}
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
    background: #b5152b !important;
	}
.container-fluid{
	background-image: url(http://grundseite.de/opp-landing/v3/images/logo/OPPLogoWebsite_web_weiss.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}


.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebar {
    min-width: 250px;
    max-width: 250px;
/*     background: #7386D5; */
    color: #fff;
    transition: all 0.3s;
}
.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    color: #fff;
    transition: all 0.3s;
}
/*
#sidebar.active {
    margin-left: -250px;
}
*/


#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
	padding: 8px 0;
	font-size: 1em;
	display: block;
	width: 100%;
}

#sidebar ul li a:hover {
	color:#ccc;
    border-bottom: 3px solid #fff;
}

#sidebar ul li a:active {
   border-bottom: 3px solid #fff;
}
.selected{
	border-bottom: 3px solid #fff;
}
a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}
 #sidebarCollapse {
    width: 40px;
    height: 40px;

}

#sidebarCollapse span {
	width: 80%;
	height: 2px;
	margin: 0 auto;
	display: block !important;
	background-color: #fff !important;
	transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}
#sidebarCollapse span:first-of-type {
    /* rotate first one */
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    /* second one is not visible */
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    /* rotate third one */
    transform: rotate(-45deg) translate(1px, -1px);
}
#sidebarCollapse.active span {
    /* no rotation */
    transform: none;
    /* all bars are visible */
    opacity: 1;
    margin: 5px auto;
}
@media screen and (max-width: 768px) {
    /* Reversing the behavior of the sidebar: 
       it'll be rotated vertically and off canvas by default, 
       collapsing in on toggle button click with removal of 
       the vertical rotation.   */
    #sidebar {
        margin-left: -250px;
        transform: rotateY(100deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }

    /* Reversing the behavior of the bars: 
       Removing the rotation from the first,
       last bars and reappear the second bar on default state, 
       and giving them a vertical margin */
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }

    /* Removing the vertical margin and make the first and last bars rotate again when the sidebar is open, hiding the second bar */
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }
    }
/*
        Abo Formular
        
    */
    @media screen and (max-height: 860px){
      #sidebar ul.components {
        padding: 18vh 20% 20vh;
    }
    }
    @media screen and (min-height: 860px){
    #sidebar ul.components {
        padding: 20vh 20%;
    }
    }
    
    
    @media screen and (max-width: 768px){
      @media screen and (max-height: 768px){
        #sidebar ul.components {
        padding: 15vh 20% 18vh;
        }
      }
    }
    /* @media screen and (max-width: 768px){
      @media screen and (max-height: 600px){
      #sidebar .formfeld {
        display: none;
        }
      }
    }
    @media screen and (min-width: 768px){
      @media screen and (max-height: 650px){
      #sidebar .formfeld {
        display: none;
        }
        .small-screen-form-list{
        display: block;
      }
    } */
    
    
    @media screen and (min-width: 768px){
      @media screen and (min-height: 850px){
      #sidebar ul.components {
        padding: 20vh 20% 18vh !important;
        }
      }
    }
    
    @media screen and (min-height: 650px){
      .small-screen-form-list{
        display: none;
      }
      #formfooter{
        display: none !important;
      }
      #sidebar .formfeld {
      position: fixed;
      display: block;  
      }
    }
    
     @media screen and (min-height: 500px){
    
    .datimp{
      display: none;
     }
    }
     @media screen and (max-height: 500px){
    
    .small-screen-form-list{
      display: block;
     }
     .small-screen-subsitude{
       display: block;
     }
     .datimp a{
       font-size:90%;
     }
     .datimp{
       white-space: nowrap;
       display: flex;
     }
    }
     @media screen and (max-height: 650px){
      #formfooter{
        display: flex !important;
      }
      #sidebar .formfeld {
      display: none;
      }
    }
    @media screen and (max-height: 500px){
      .socials, .imp-dat, .small-screen{
      display: none !important;
      }
    }
    @media screen and (max-height: 430px){
    
    }
    
    /* ---------------------------------------------------
        Footer
    ----------------------------------------------------- */
    #formfooter{
    /* background-color: #ccc; */
    display: flex;
    margin: 2em 0em 0em;
    }
    .formfooterclass{
      width: 300px;
      border: 1px solid #efefef;
      margin: 2em auto;
      background-color: #b5152b;
      padding: 2em;
    }
    .formfooterclass input{
    color: #000 !important;
    }
    #formfooter .finput{
      width: 100%; 
    }
    .formfooterclass lable, .formfooterclass p, .formfooterclass .formbutton{
    color: #fff !important;
    }
    
      .formfeld {
      height: 31%;
      padding: 0.5em 0;
      bottom: 9em;
      left: 3em;
      max-width: 190px;
      }
      @media screen and (min-width: 1300px){
        @media screen and (min-height: 650px){
        
          .small-screen-form-list{
            display: none;
          }
          #formfooter{
            display: none !important;
          }
          #sidebar .formfeld {
          position: fixed;
          display: block;  
          }
          .formfeld {
          height: 31%;
          padding: 0.5em 0;
          bottom: 4em;
          left: 3em;
          max-width: 190px;
          }
        }
      }
      @media screen and (min-width: 1300px){
        @media screen and (max-height: 550px){
        
          .socials, .small-screen{
          display: none !important;
          }
          .datimp{
            display: flex;
          }
          .datimp a{
            font-size: 12px !important;
            white-space: nowrap;
            margin-right: 10px;
          }
          .imp-dat{
            display:none;
          }
        }
      }
      /* .formfeld {
        height: 31%;
        padding: 2em;
        bottom: 2em;
        right: 0.5em;
        width: 240px;
        position: fixed;
        background-color: #b5152b !important;
        display: table;
        border-radius: 15px;
        z-index: 1000;
      } */
      .formfeld-close{
        float:right;
      }
        .formfeld h3{
          font-weight: 600;
          font-size: 1em !important;
          color:#fff;
        }
        .formbutton{
          background-color: #710606 !important;
          width:100%;
          border:0;
        }
        .formfeld p, .formfeld h5 {
          color:#fff !important;
          font-size: 0.8em;
        }
        .formfeld .finput{
          width: 100%;
          color:#000;
          font-size: 12px !important;
        }
        #sidebar ul .formfeld p {
            padding: 0 10px;
        }
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: calc(100% - 250px);
    padding: 0;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}
@media screen and (max-width: 1024px){
	#content {
	padding: 40px;
	}
}
@media screen and (min-width: 768px){
#content.active {
    width: calc(100% - 250px);;
}
}
@media screen and (max-width: 768px){
	#content.active {
    width: calc(100% - 250px);
}
}
/*
#content .active .navbar{
	margin: -70px -40px 0 -40px !important;
	}
*/
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media screen and (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
    #content.active {
/*         width: calc(100% - 250px) !important; */
        width: 100% !important;
    }
/*
    #sidebarCollapse span {
        display: none;
    } 
*/
	#intro{
	margin-top: 75px;
	}   
}
@media screen and (min-width: 769px){
	.navbar{
		display: none !important;
	}

}