@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

html, body {
  height:100%;
}

body {
  overflow-x: hidden;
  font-family: 'Montserrat';
  /*background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 72%, rgba(0,0,0,1) 100%);*/
  background-repeat: no-repeat;
}
h3 {
  color: #009DDC;
  font-family: 'Montserrat', cursive;
  font-size: 20px;
}
p {
  font-weight: 500;
  line-height: 1.2;
}

.language-menu {
  position: relative;
  z-index: 999;
  float: right;
  margin-right: 50px;
  display: inline-flex;
}

.language-menu li {
  display: inline-block;
  padding-right: 15px;
}

.language-menu li a {
  color: #009DDC;
  font-size: 16px;
  letter-spacing: -0.3px;
  font-style: 'Montserrat';
  text-transform: uppercase;
  font-weight: 600;

}

.frame-type-menu_subpages ul {
  display:block;
  list-style:none;
  width:700px;
  max-width:90%;
  margin:auto;
  text-align:center;
  margin-bottom:20px;
}

.frame-type-menu_subpages li {
  display:inline-block;
  padding:5px;
  margin:2px;
  font-size:1.28em;
}

.frame-type-menu_subpages li a {
  padding:5px;
  border-radius:10px;
  font-weight:600;
  text-decoration: underline;
}

/*BANNER SECTION*/
.white-line-mobile {
  display: none;
}

.banner-section-wrapper {
  width: 100%;
  position: relative;
  /*height: calc(100vw * 0.47);*/
  background-image: url("/fileadmin/csbbcs/template/version2/images/home-bg.jpg");
  min-height: 1045px;
  background-size: auto;
  background-position: 50% 0%;
  background-repeat: no-repeat;
}
.banner-section-wrapper-contentpage {
  width: 100%;
  position: relative;
  /*height: calc(100vw * 0.47);*/
  background-image: url("/fileadmin/csbbcs/template/version2/images/content-bg.jpg");
  min-height: 321px;
  background-size: auto;
  background-position: 50% -2%;
  background-repeat: no-repeat;
}

.banner-section-inner-wrapper {
  position: relative;
}

.nav-link {
  padding: 0;
}

.csbbcs-logo-img {
  position: relative;
  z-index: 9999;
}

.white-line {
  border-bottom: 1.2px;
  border-style: solid;
  border-color: white;
  position: absolute;
  top: 54px;
  width: 79.2%;
  /* right: 348px; */
  left: 51%;
  transform: translate(-40%);
  overflow: hidden;
}

.ce-intext.ce-left .ce-gallery {
  margin-right: 260px;
}

.content-section-wrapper {
  min-height: 370px;
}

.content-section-wrapper-homepage .frame-default>p {
  color: #213E99;
  font-family: 'Montserrat', cursive;
  font-size: 20px;
  line-height: 1.1;
}

/*BANNER SECTION*/
.content-section-wrapper-contentpage h1 {
  font-size: 30px;
  color: #213E99;
  text-transform: uppercase;
}

.content-section-wrapper-contentpage h2 {
  font-size: 24px;
  color: #009DDC;
  text-transform: uppercase;
}

.content-section-wrapper-contentpage h3 {
  font-size: 20px;
  color: black;
  text-transform: uppercase;
}

.content-section-wrapper-contentpage .frame-default>p {
  /*font-size: 13px;*/
  color: black;
}

.banner-content p {
  color: #213E99;
}

.banner-content-lhs p {
  color: white;
  font-size: 16px;
}

.banner-content-rhs p {
  color: #213E99;
  font-size: 20px;
}

.banner-content {
  margin-top: 195px;
  display: block;
}

.banner-section-wrapper .banner-content-lhs {
  flex: 0 0 50%;
}

.banner-content-lhs>.frame {
  max-width: 300px;
}

.banner-section-wrapper .banner-content-rhs {
  margin-top: 20px;
  padding-left: 14.5%;
}

.banner-section-wrapper .banner-content-rhs p {
  font-weight: 600;
}

.banner-section-wrapper .banner-content-rhs {
  flex: 0 0 50%;
  margin-top: 60px;
  padding-left: 12.5%;
}

/* mimic row styles */
.banner-content-inner-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}




/********************************* MENU CSS START ******************************/
#menu {
  white-space: inherit;
  font-size: 20px;
  position: relative;
  z-index: 999999;
}

#menu li a {
  color: #009DDC;
  font-size: 16px;
  letter-spacing: -0.3px;
  font-style: 'Montserrat';
  text-transform: uppercase;
}

#menu li.level-1 {
  display: inline-block;
  margin-left: 10px;
  position: relative;
  line-height: 1;
  text-transform: uppercase;
}

#menu li {
  text-transform: uppercase;
  list-style: none;
}

#menu ul {
  padding: 10px;
}

.menu-wrapper {
  float: right;
}



.slicknav_menu .slicknav_icon-bar {
  background-color: #00abe2;
}

.slicknav_nav ul li a {
  color: white;
  font-weight: 600;
}

.slicknav_menu .slicknav_nav {
  text-align: center;
  font-size: 40px;
  font-family: 'Montserrat', cursive;
}

.slicknav_nav img {
  width: 230px;
}

#menu li.level-1:hover>ul.collapse {
  display: block;
  text-transform: uppercase;
}

#menu ul.collapse {
  display: none;
  background-color: #213E99;
  position: absolute;
  margin-left: 0px;
  padding-left: 0;
  max-width: 300px;
  font-size: 30px;
  line-height: 1;
  text-align: center;
  padding: 10px;
  transform: translateY(0px);
  z-index: 999999;
  text-transform: uppercase;
}

#menu ul li.level-2:hover .collapse {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

#menu .collapse {
  width: 205px;
}

#menu .child-ul>.level-3 {
  display: none;
}

#menu .collapse li {
  width: 100%;
  text-align: left;
  /*border-bottom: 1px #00abe2 solid;*/
  margin-bottom: 5px;
  margin-top: 5px;
}

#menu ul ul ul {
  display: none !important;
}

#menu li a:hover {
  text-decoration: none;
  color: white;
}

.slicknav_nav ul li a:hover {
  text-decoration: none;
  color: white;
}

.slicknav_menu .slicknav_nav ul li {

  font-size: 2rem;
  text-align: left;
}

.slicknav_nav a {
  font-size: 1.3rem;
  text-transform: uppercase;
}

/* temp fix due to rendering issue of typoscript menu */
#menu .level-1 > ul .level-1 {
  margin-left:0px;
  display:block;
}

/********************************* MENU CSS END ******************************/

/********************************* buttons and inputs ******************************/
.banner-header .button, .banner-header input, .banner-header optgroup, .banner-header select, .banner-header textarea {
  /*margin: 0;*/
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: #009DDC;
  width: 100%;
}

.radio-inline input[type="radio"] {
  margin-left:5px;
  margin-right:5px;
  width:auto;
}

.banner-header [type=button], [type=reset], [type=submit], button {
  background-color: #213E99;
  border-style: none;
  height: 30.3px;
  width: auto;
  font-family: 'Montserrat', cursive;
  text-transform: uppercase;
  font-size: 14px;
}


/*footer*/
.footer-wrapper {
  padding-top: 50px;
  background-color: #213E99;
  padding-bottom: 20px;
  margin-top: 141px;
}

.copyright-text-p {
  color: white;
}

.footer-inner-wrapper p{
  color:white;
  font-size:14px;
}


/* EXTENSIONS*/

/*NEWS SECTION*/
.news .news-list-view .article {
  padding-bottom: 15px;
  margin-bottom: 15px;
  width: 100%;
}

.news .news-list-view .article .teaser-text {
  margin: 0 10 10px 0;
  font-weight: 500;
}

.news .news-list-view .article h3 {
  margin-bottom: 10px;
}

.news .news-list-view .article h3, .news .news-list-view .article h3 a, .news .news-list-view .article h3 span {
  color: #009DDC;
}

.news .news-list-view .article-wrapper:nth-child(1) .article h3 {
  margin-bottom: 10px;
  font-size: 20px;
  margin-left: 5px;
  margin-right:5px;
}

.news .news-list-view .article-wrapper:nth-child(1) .article .news-list-date {
  display: none;
}


  .news .news-list-view .article-wrapper:nth-child(1) .teaser-text>a  {
  background-color: #213E99;
  border-style: none;
  height: 30.3px;
  width: auto;
  font-family: 'Montserrat', cursive;
  text-transform: uppercase;
  padding: 4px;
}

.news .news-list-view .article-wrapper:nth-child(1) .article {
    padding-bottom: 15px;
    margin-bottom: 15px;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #009DDC;
}

.news .article-wrapper:nth-child(1) .article .news-img-wrap {
    float: left;
    margin: 0px 12px 5px 0;
    background: #fff;
}

.news .news-list-view  .article .teaser-text p {
  color: black;
}

.news .news-list-view .article-wrapper:nth-child(1) .article p {
  font-size: 14px;
}

.news .news-list-view .article-wrapper:nth-child(1) .article .more {
  font-size: 13px;
  color: #009DDC;
  font-weight: 500;
}

.news .news-list-view .article .news-img-wrap {
  box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.26);
  max-width: 100%;
  height: 190px;
  width: 284px;
  overflow: hidden;
  float: none;

}

.news .news-list-view .article .news-img-wrap a {
  padding: 0px;
  width: 100%;
  height: 100%;
  position: relative;
  border: 0;
}

.news .news-list-view .article .news-img-wrap img {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.content-section-wrapper-homepage .news-list-view {
  top: -99px;
}

.news-list-view {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  position: relative;
}

.article h3 {
  font-size: 14px;
  color: #009DDC;
  font-family: 'Montserrat', cursive;
  margin-left: 0px;
  margin-top: 12px;
  margin-bottom: 16px;
  min-height: ;
}

.more {
  font-size: 13px;
  /*color: #009DDC;*/
  color: #213E99;
  font-weight: 500;
}

.para {
  font-weight: 500;
}

.news .news-list-view .article .news-list-date {
  font-size: 12px;
  color: #213E99;
  margin-top: 19px;
  font-weight: 600;
}

.news .article-wrapper:nth-child(1) .article .teaser-text {
    margin: 0px 5px 10px 5px;
}

.news .news-list-view .article .teaser-text {
  font-size: 13px;
  margin-top: 16px;
   !important font-weight: 500;
}

.news .news-list-view .footer {
  display: none;
}

/*
.news .news-list-view .page-navigation ul {
  float: right;
  display: none;
}*/

.news .news-list-view .news-img-wrap img {
  width: 230px;
  height: auto;
}

.content-section-wrapper-contentpage .page-navigation {
  display: block;
  float: left;
  width: 100%;
  padding-left:15px;

}

/* END EXTENSION NEWS */


/* START FELOGIN */
.banner-header .tx-felogin-pi1 {
  position: relative;
  z-index: 99999999;
  padding-top: 20px;
  top: -8px;
  float: right;
}

.banner-header .tx-felogin-pi1 .felogin-hidden {
  display:none !important;
}

.banner-header .tx-felogin-pi1 form {
  /*  position: relative;
  left: 24%;*/
}

.banner-header .tx-felogin-pi1>div {
  display: none;
}

.banner-header .tx-felogin-pi1 h3 div legend {
  display: none;
}

.banner-header .tx-felogin-pi1 h3 {
  display: none;
}

.banner-header .tx-felogin-pi1 legend {
  display: none;
}

.banner-header .tx-felogin-pi1 form fieldset>div {
  display: inline-block;
}

.banner-header .tx-felogin-pi1 form fieldset>div>label {
  display: inline-block;
  display: none;
}

.banner-header .tx-felogin-pi1 input, optgroup, select, textarea {
  max-width:145px;
}

.banner-header .tx-felogin-pi1 form {
  margin-right:15px;
}

.banner-header .tx-felogin-pi1 form > fieldset > div {
  color:white;
}

.banner-header .tx-felogin-pi1 form fieldset>div:nth-child(2), .tx-felogin-pi1 form fieldset>div:nth-child(3) {
  /*width: 35%;*/
}

.content-section-wrapper-contentpage .tx-felogin-pi1 label {
  min-width:110px;
}


.content-section-wrapper-contentpage .tx-felogin-pi1 input {
  margin-bottom:10px;
}

/* END FELOGIN */

/* accordion */
.frame-type-gridelements_pi1 .panel-default .panel-body > div > header {
  display:none;
}

/**/


/* START FEMANAGER */
.femanager_mailingListSubscriber .form-check-input {
  display:inline-block;
  position:relative;
}

.femanager_researchSummary #researchSummary, .femanager_address #femanager_field_address {
      min-width: 100%;
      margin-bottom:20px;
}
/* END FEMANAGER */

/** Youtube Video **/
.frame-type-youtubevideo_pi1 {
  width: 520px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:100%;

}
/** End youtube Video **/

/* END EXTENSIONS */


/********************************* RESPONSIVE ******************************/
@media (min-width:1921px) {
  .banner-section-wrapper{
    height: calc(100vw * 0.54);
    background-size: 100% auto;
  }
  .banner-section-wrapper:not(.banner-section-wrapper-contentpage) .banner-content {
    margin-top:calc(100vw * 0.14);
    margin-top: calc(100vw * 0.11);
  }

  .banner-section-wrapper-contentpage  {
    background-size:cover;
    height: calc(100vw * 0.27);
  }
}



@media (max-width: 1475px) {
#menu ul.collapse {
  display: none;
  background-color: #213E99;
  position: absolute;
  margin-left: 0;
  padding-left: 0;
  max-width: 300px;
  font-size: 30px;
  line-height: 1;
  text-align: center;
  padding: 10px;
  transform: translatex(-50%);
  max-width: 170px;
  z-index: 999999;
  text-transform: uppercase;
  left: 50%;
}
}
@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1225px;
  }

  #menu li.level-1 {
    margin-left: 13px;

  }

  #menu li.level-1 a {
    font-weight:600;
  }

  #menu li a {

    font-size:16.5px;

  }
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1140px;
  }

  .slicknav_nav {
    display: none;
  }

  .banner-section-wrapper {
    width: 100%;
    position: relative;
    /* height: calc(100vw * 0.47); */
    background-image: url(/fileadmin/csbbcs/template/version2/images/home-bg.jpg);
    min-height: 1045px;
    background-size: auto;
    background-position: 73% 0px;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .news .news-list-view .article .news-img-wrap {
    width: 100%;
    height: 235px;
  }

  .news .news-list-view .news-img-wrap {
    overflow: hidden;
  }

  .news-list-view {
    position: relative;
    top: -170px;
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
  }

  .banner-header .tx-felogin-pi1 form {
    position: relative;
  }

  .menu-wrapper {
    float: right;
    position: relative;
    /*right: -5%;*/
  }


  .banner-section-wrapper .banner-content-lhs {
    flex: 0 0 45%;
  }

  .banner-section-wrapper .banner-content-rhs {
    flex: 0 0 55%;
    padding-left: 45px;
    padding-right: 5%;
  }

  .news .news-list-view .news .article .news-img-wrap a {
    width: 100%;
  }
}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
  .banner-header .tx-felogin-pi1 form {
    position: relative;
    max-width: 100%;
  }

  .banner-section-wrapper {
    min-height:
  }

  .banner-section-wrapper {
    width: 100%;
    position: relative;
    background-image: url(/fileadmin/csbbcs/template/version2/images/home-bg.jpg);
    min-height: 1045px;
    background-size: auto;
    background-position: 72% 0px;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .banner-content {
    margin-top: 100px;
  }

  .container, .container-md, .container-sm {
    max-width: 770px;
  }

  .news .news-list-view .article {
    padding-bottom: 15px;
    width: 100%;
    padding-bottom: 30px;
  }

  .news .news-list-view .article h3 {
    margin-bottom: 10px;
    float: left;
  }

  .news .news-list-view .article .teaser-text {
    float: left;
  }

  .news .news-list-view .article .news-list-date {
    font-size: 12px;
    color: #213E99;
    margin-top: 19px;
    font-weight: 700;
    margin-left: 81px;
    position: relative;
    left: -79px;
  }

  .banner-section-wrapper .banner-content-rhs {
    margin-top: 100px;
  }
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
  .banner-section-wrapper {
    width: 100%;
    position: relative;
    /* height: calc(100vw * 0.47); */
    background-image: url(/fileadmin/csbbcs/template/version2/images/home-bg.jpg);
    min-height: 1045px;
    background-size: auto;
    background-position: 81% 0;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .news-list-view {
    position: relative;
    top: -9px;
  }

  .content-section-wrapper-homepage {
    top: 35px;
    position: relative;
  }



  .white-line {
    display: none;
  }

  .white-line-mobile {
    border-bottom: 0.5px;
    border-style: solid;
    border-color: #eeeef7;
    position: absolute;
    top: 59px;
    width: 60%;
    right: 28px;
    display: block;
  }



  .banner-header .tx-felogin-pi1 form {
    position: relative;

  }

  .banner-content-inner-wrapper {
    flex-direction: column-reverse;
  }

  .banner-section-wrapper .banner-content-lhs {
    flex: 0 0 100%;
    max-width: 100%;
    padding-bottom: 70px;
  }

  .banner-section-wrapper .banner-content-rhs {
    flex: 0 0 100%;
    margin-top: 10px;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  .banner-content-rhs>div:first-of-type {
    padding-top: 30px;
    padding-right: 5%;
    position: relative;
    top: 30px;
  }

  .banner-content-lhs>.frame {
    max-width: 100%;
    position: relative;
    top: 40px;
  }

  .banner-content.row {
    margin-top: 245px;
    padding-bottom: 80px;
  }

  .logo-link-divwrapper {
    display: none;
  }

  .banner-section-wrapper .banner-content-lhs {
    position: relative;
    top: 30px;
    padding-bottom: 50px;
  }

  .banner-content-lhs p {
    color: black;
  }

  .news .news-list-view .article {
    max-width: 440px;
  }
}

/*Break Point*/
@media (max-width: 616.98px) {
  .banner-section-wrapper {
    width: 100%;
    position: relative;
    background-image: url(/fileadmin/csbbcs/template/version2/images/home-bg.jpg);
    min-height: 1045px;
    background-size: auto;
    background-position: 81% 0%;
    background-repeat: no-repeat;
    overflow: hidden;
  }
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
  .news .news-list-view .article .news-list-date {
    font-size: 12px;
    color: #213E99;
    margin-top: 19px;
    font-weight: 700;
    position: relative;
  }

  .news-list-view {
    position: relative;
    top: 51px;
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
  }

  .banner-section-wrapper {
    background-position: 77% 0;
    background-color: white;
    min-height: 900px;
    overflow: unset;
  }

  .banner-header .tx-felogin-pi1 form {
    position: relative;

  }

  .white-line-mobile {
    border-bottom: 0.5px;
    border-style: solid;
    border-color: #f4f4fa;
    position: absolute;
    top: 59px;
    width: 270px;
    right: 21px;
    display: block;
  }

  .news .news-list-view .article .news-img-wrap {
    float: left;
    background: #fff;
    position: relative;
  }


  .frame-default .ce-gallery figure {
    margin-bottom: 10px;
    position: relative;
  }

  .banner-content-rhs>div:first-of-type {
    padding-right: 0;
  }

  .banner-content-rhs p {
    font-size: 17px;
    font-weight: 700;
  }

  .banner-header .tx-felogin-pi1, .tx-felogin-pi1 form, .tx-felogin-pi1 form>fieldset {
    text-align: center;
    width: 100%;
    display: block;
    float: none;
    /* this is being used to get closer to center.. not ideal */
  }

  .language-menu {
      position: relative;
      z-index: 999;
      float: right;
      margin-right: 50px;
      display: block;
      width: 100%;
      padding: 0;
      margin: auto;
      text-align: center;
  }

  .banner-header .tx-felogin-pi1 input, optgroup, select, textarea {
    max-width: 120px;
}

}

/********************************* RESPONSIVE ******************************/