/*
Theme Name: Susty Child
Theme URI: https://www.labseven.de
Description: A child theme of Susty Theme
Author: Jan Schwate
Author URI: https://www.labseven.de
Version: 1.0.2
Text Domain: susty-master
Template: susty-master
*/

/* Individuelle Anpassungen  */
/* zu nutzen mit var(--hover-color) */   
:root {
  --primary-color: rgb(0,101,143);
  --secondary-color: rgb(106,103,97);
  --dark-color: rgb(106,103,97);
  --light-color: rgba(168,167,162,0.1);
  --border-color: #e3e6f0;
  --text-color: #6c757d;
}

/* Anpassungen VC Composer */
html, body { overflow-x: hidden; }
.wpcf7-form-control-wrap { display: block; width: 100%; }
.form-group label { font-size: 0.7rem; display: none; }
.form-group .form-control { border: 0; padding: 1rem 0.75rem; }
.form-group br { display: none; }
.wpcf7-spinner { display: block; float: right; width: auto; margin: 0; }

/* Individuelle Styles */

body, h1, h2, h3 { font-family: 'Montserrat', sans-serif; }
a:link, a:active, a:active, a:visited { color: var(--primary-color) !important; }
body { hyphens: auto; }
.btn.focus, .btn:focus { outline: none !important; box-shadow: none !important;  }
.container { max-width: 1380px; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.2; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 400; }
h1, h2, h3, .text-primary { color: var(--primary-color) !important; }

h1 { font-size: 32px; }
.font-size-14 { font-size: 14px; }

.bg-dark { background: var(--dark-color) !important; }
.bg-primary, .btn-primary { background: var(--primary-color) !important; }
.btn-primary { border-color: var(--primary-color) !important; }
.bg-secondary { background: var(--secondary-color) !important; }
.bg-light { background: var(--light-color) !important; }
.bg-white-trans { background: rgba(255,255,255,0.95); }
.bg-primary-trans { background-color: rgba(0,101,143,0.5); }

.text-white-50, a.text-white-50, a.text-white-50:link, a.text-white-50:active , a.text-white-50:hover , a.text-white-50:visited  { color: rgba(255, 255, 255, 0.7) !important; }

#mainheader { box-shadow: 0 0 50px 8px rgba(0,0,0,0.06); }
#mainheader .nav-link { font-size: 1.1rem; font-weight: 500; }

.ls-img-logo { max-width: 18rem; }

#navtoggle { z-index: 99; position: fixed; top: 0; right: 0; left: auto; width: 65px; height: 65px; background: #fff !important; color: var(--primary-color) !important; font-size: 40px; line-height: 65px; text-align: center; padding: 0; border: 0; border-radius: 0; }


   
#gotop { position: fixed; display: block; z-index: 2; bottom: 0; right: 0; top: auto; left: auto; height: 50px; width: 50px; background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; text-align: center; line-height: 50px; font-size: 30px;  }
#gotop:hover { background:  var(--secondary-color) !important; border-color: var(--secondary-color); }

@media only screen and (max-width:991.98px){   

.ls-img-logo { max-width: 12rem; }

#mobil-navi { z-index: 990; position: fixed; top: 0; left: auto; right: 0; bottom: 0; overflow: hidden; overflow-y: auto; display: block; color: #fff; width: 300px; max-width: 100%; box-shadow: 0 0 50px 50px rgba(0,0,0,0.2); }
#mobil-navi .navhead { z-index: 995; position: fixed; top: 0; left: auto; right: 0; bottom: 0; display: block; width: 300px; max-width: 100%; color: #fff; height: 64px; padding: 20px 60px 10px 20px; }
#mobil-navi .navhead {}
#mobil-navi .navhead span.navitoggle { cursor: pointer; display: block; position: absolute; right: 0; top: 0; bottom: auto; left: auto; width: 64px; height: 64px; font-size: 30px; line-height: 64px; color: #000; text-align: center; }


#mobil-navi .navbody { padding: 90px 0 0 0; min-height: calc(80vH - 70px); }                                                         
#mobil-navi .navbody ul { display: block; list-style: none; margin: 0; padding: 0; border: 0; position: relative; }   
#mobil-navi .navbody ul li { display: block; list-style: none; margin: 0 20px; padding: 0; border: 0; position: relative; margin-bottom: 0.8rem;  }    
#mobil-navi .navbody ul li a > span { display: inline-block; border-bottom: 0px solid rgba(0,0,0,0.1); padding: 0 10px 5px 0; }     
#mobil-navi .navbody ul li a { display: block; border: 0; color: #000; font-size: 1.3rem; line-height: 1.1; padding: 10px 0 3px 0; font-weight: 500; }        
#mobil-navi .navbody ul li a:hover { color: var(--primary-color); }   
#mobil-navi .navbody ul li.active a > span.menu-underline { border-bottom: 5px solid var(--primary-color); }           
#mobil-navi .navbody ul li.active > a { }     
#mobil-navi .navbody > ul > li.active > a {  }   
#mobil-navi .navbody .nav-link { text-align: center; }
#mobil-navi .navbody .nav-link .btn { display: block; margin: 2rem 0; padding: 1rem; }
                                                 

#mobil-navi .navbody > ul ul { display: none; }   
#mobil-navi .navbody > ul li.active > ul { display: block; padding: 10px 0; }                             
#mobil-navi .navbody > ul li.active > ul li a { font-size: 1.0rem; line-height: 1.1rem; padding: 5px 20px 5px 20px; text-transform: none; }      
#mobil-navi .navbody > ul li.active > ul li.active > a { } 
                                                          
                                      
#mobil-navi .navfooter { display: block; color: #555; padding: 10px 20px; border-top: 1px solid rgba(0,0,0,0.1); }    
#mobil-navi form .ls-searchinput { width: 80%; background: rgba(0,0,0,0.1); border-radius: 0; }     
#mobil-navi form button { width: 20%; text-align: center; color: #fff; background: #008AC4; border-radius: 0; }         
} 

main { padding-bottom: 5rem; }
main > article > h1 { padding-top: 5rem; }

.ls-lg-avatar { width: 9rem; height: 9rem; }
.shadow-lg { box-shadow: 0 0.425rem 2.5rem 0.425rem rgb(140 152 164 / 18%) !important; }

.ls-minh-2lines { min-height: 4rem; }
.ls_teampost strong { color: var(--primary-color) !important; font-weight:  400 !important; font-size: 1.1rem; }
.ls_teampost hr + p { color: var(--text-color) !important; font-size: 0.9rem; }

.ls-minh-headerheight { min-height: 30vH; }
.ls-teaserimg figure { width: 100%; position: relative; }
.ls-teaserimg figure div { width: 100%; }
.ls-teaserimg figure div img { width: 100%;  }

@media only screen and (min-width:768px) {   
.ls-ovvisible-y { overflow: visible !important; }
.ls-teaserimg figure div img { position: absolute; z-index: 901; margin-top: -65%; left: 0; right: 0; }
}

@media only screen and (min-width:991.98px) {   
.ls-teaserimg figure div img { margin-top: -45%; }
}
.card-frame { border: 1px solid var(--border-color); border-top: 0.25rem solid var(--border-color); padding: 3rem 1rem; border-radius: 0.25rem; font-weight: 500; }


.js-card-carousel.slick-initialized .slick-slide { display: flex; }    

.slick-prev:before, .slick-next:before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 2rem; color: #888;}    
.slick-prev:before { content: "\f053"; }
.slick-next:before { content: "\f054"; }
.slick-prev, .slick-next { width: 2rem; height: 2rem; }
.slick-next { right: -3rem; }
.slick-prev  { left: -3rem; }
.slick-dotted.slick-slider { margin-bottom: 40px; }

.nojs-slick-slider .js-slick-carousel { display: flex; margin: 0 -15px; flex-flow: row wrap;  }
.nojs-slick-slider .js-slick-carousel .js-slide { flex: 1 0 0%; width: calc(33.33% - 30px); min-width: calc(33.33% - 30px); max-width: calc(33.33% - 30px); margin-left: 15px; margin-right: 15px; }

@media only screen and (max-width:991.98px) {                               
.slick-prev:before, .slick-next:before { font-size: 24px; color: #aaa;}    
.slick-prev, .slick-next { z-index: 98; top: 80px; width: 30px; height: 30px; background: rgba(255,255,255,0.5); border: 0px solid #eee; box-shadow: none; border-radius: 0; }
.slick-next { right: -15px; border-radius: 360px;}
.slick-prev  { left: -15px; border-radius: 360px;}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { background: #fff; }    
h5, .h5  { font-size: 1.0rem; }
}

@media only screen and (min-width: 768px) and (max-width:1139.98px) {  
h4, .h4  { font-size: 1.0rem; }
}

@media only screen and (max-width: 575.98px) {      
h1 { font-size: 1.2rem; }
.h2, h2 { font-size: 1.4rem; }
h5, .h5  { font-size: 1.0rem; }
.font-size-14 { font-size: 1.0rem; }
}