body {
  background-color: #78a3d4;
}

figure {
  margin: 0;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: underline;
}

.bg-lightblue {background-color: #eaf4ff;}
.bg-lightred {background-color: #bc6a6f;}
.bg-paleblue{background-color: #c6dffb;}
.bg-palered{background-color: #fcd5cd;}
.bg-quoteblue{background-color: #91b7e2;}

.clr-darkblue{color: #3b526d;}
.clr-navlink{color: #222B68;}
/* FONT
-------------------------------------------------- */
@font-face {
	font-family: 'Arkhip';
	src: url('../fonts/arkhip.eot'); /* IE 9 Compatibility Mode */
	src: url('../fonts/arkhip.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../fonts/arkhip.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/arkhip.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('../fonts/arkhip.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/arkhip.svg#arkhip') format('svg'); /* Chrome < 4, Legacy iOS */
}

/* MARGIN
-------------------------------------------------- */

.mb-15 {
  margin-bottom: 15px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-100 {
  margin-bottom: 100px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-100 {
  padding-bottom: 100px;
}

.zi-2 {
  z-index: 2;
}

.of-hidden {
  overflow: hidden;
}

/* BREADCRUMB
---------------------------------------------------*/
.breadcrumb {
    margin: 0;
    padding: 1rem 0;
    list-style: none;
}

.breadcrumb > li {
    font-size: 14px;
    display: inline-block;
    color: #78A3D4;
}

.breadcrumb > li + li:before {
    font-family: monospace;
    padding: 0 5px;
    color: #78A3D4;
    /* content: "/\00a0"; */
    content: ">";
}

.breadcrumb li a {
    color: #78A3D4;
}

/* NAVBAR
---------------------------------------------------*/

.navbar {
  box-shadow: 0px 10px 10px -8px rgb(0 0 0 / 20%);
  z-index: 1;
}

/* icon
-------------------------------------------------- */
.ico{
  display: flex;
  margin-right: 10px;
}

.i-ree{
  background: url("ui/icon/ree.png");
  background-repeat: no-repeat;
  width: 26px;
  height: 39px;
  margin-top: -15px;
}

.i-sub{
  background: url("ui/icon/sub.png");
  background-repeat: no-repeat;
  width: 26px;
  height: 28px;
}

.i-nd{
  background: url("ui/icon/nd.png");
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-top: -7px;
}

.i-cd{
  background: url("ui/icon/cd.png");
  background-repeat: no-repeat;
  width: 28px;
  height: 41px;
  margin-top: -17px;
}

.i-mon{
  background: url("ui/icon/mon.png");
  background-repeat: no-repeat;
  width: 29px;
  height: 26px;
  margin-top: -3px;
}

.i-news{
  background: url("ui/icon/news.png");
  background-repeat: no-repeat;
  width: 29px;
  height: 26px;
  margin-top: 4px;
}

.i-events{
  background: url("ui/icon/events.png");
  background-repeat: no-repeat;
  width: 29px;
  height: 26px;
  margin-top: -3px;
}

/* FIGURE
-------------------------------------------------- */
.element-bg{
  position: absolute;
}

.figure-wrapper {
  position: relative;
}

.bg-romb-image{
  background: url("ui/romb.png");
  background-size: cover;
}

.figure-laure{
  background: url("ui/laure.png");
  background-size: cover;
  width: 72px;
  height: 86px;
  z-index: -1;
  top: -41px;
  left: -11px;
}

.figure-leaf{
  background: url("ui/leaf.png");
  background-size: cover;
  width: 135px;
  height: 65px;
  z-index: -1;
  top: -29px;
  right: -4%;
}

.figure-sunflower{
  background: url("ui/sunflower.png");
  background-size: cover;
  width: 118px;
  height: 104px;
  z-index: -1;
  bottom: -50px;
  right: 0;
}

.figure-union{
  background: url("ui/union.png");
  background-size: cover;
  width: 266px;
  height: 633px;
  z-index: 0;
  bottom: 110px;
  right: 0px;
}

.figure-union2{
  background: url("ui/union2.png");
  background-size: cover;
  width: 244px;
  height: 633px;
  z-index: 0;
  bottom: 0px;
  left: 0px;
}

.union3 {
  bottom: -720px;
  right: 0px;
}

.figure-wheat{
  background: url("ui/wheat.png");
  background-size: cover;
  width: 88px;
  height: 144px;
  z-index: -1;
  bottom: 200px;
  left: 0;
}

.figure-leaf2{
  background: url("ui/leaf2.png");
  background-size: cover;
  width: 142px;
  height: 133px;
  z-index: -1;
  top: -184px;
  left: 22px;
}

.figure-rabbit{
  background: url("ui/rabbit.png");
  background-size: cover;
  width: 126px;
  height: 139px;
  z-index: -1;
  bottom: 65px;
  right: 168px;
}

.rabbit2{
  z-index: 0;
  bottom: -93px;
  left: 29%;
}

.figure-deep{
  background: url("ui/deep.png");
  background-size: cover;
  width: 134px;
  height: 169px;
  z-index: 0;
  bottom: 13px;
  left: 61%;
}

.figure-ornament{
  background: url("ui/ornament.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 62px;
  z-index: -1;
  bottom: 0px;
  left: 0;
}

.figure-ornament-dark{
  background: url("ui/ornament2.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 62px;
  z-index: 0;
  bottom: 0px;
  left: 0;
}

.figure-treedark{
  background: url("ui/treedark.png");
  background-size: cover;
  width: 37px;
  height: 147px;
  z-index: 0;
}

.figure-treelight{
  background: url("ui/treelight.png");
  background-size: cover;
  width: 37px;
  height: 147px;
  z-index: 0;
}

.figure-vector{
  background: url("ui/vector.png"), #eaf4ff;
  background-repeat: no-repeat;
  width: 100%;
  height: 150px;
  z-index: 0;
  bottom: 0px;
  left: 0;
}

.figure-vector2{
  background: url("ui/vector2.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 209px;
  z-index: 0;
  top: 0px;
  right: 0;
}

.figure-snow {
  background: url("ui/snow.png");
  z-index: 1;
  width: 100%;
  height: 588px;
  bottom: -42px;
  left: 0;
}

/* Set1*/
.treed1 {
  top: 234px;
  left: 65px;
}

.treed2 {
  top: 365px;
  left: 208px;
}

.treed3 {
  top: 190px;
  right: 244px;
}

.treed4 {
  top: 130px;
  right: 330px;
}

.treel1 {
  top: 191px;
  left: 208px;
  transform: scale(0.6);
}

.treel2 {
  top: 38px;
  right: 84px;
  transform: scale(0.6);
}

.treel3 {
    top: 94px;
    right: 168px;
}

.treel4 {
  top: 390px;
  right: 80px;
}

/* Set2 */

.treedcd1 {
  top: 54px;
  left: 65px;
  transform: scale(0.6);
}

.treedcd2 {
  top: 145px;
  right: 208px;
  transform: scale(0.6);
}

.treedcd3 {
  top: 80px;
  right: 114px;
}

.treelcd1 {
  top: -48px;
  left: 128px;
  transform: scale(0.6);
}

.treelcd2 {
  top: -12px;
      right: 254px;
      transform: scale(0.6);
}

.treelcd3 {
  top: 174px;
      left: 158px;
}

/* TITLE
-------------------------------------------------- */
.title {
  font-family: Arkhip;
  margin-bottom: 30px;
  display: -webkit-inline-box;
}

.quote {
  border-radius: .65rem;
  padding: 30px 50px;
  margin-left: 60px;
  margin-right: 60px;
  box-shadow: 0 10px 10px -3px rgb(0 0 0 / 20%);
}

.quote h5{
  font-family: Arkhip;
  line-height: 140%;
}

.quote img{
  margin-right: 15px;
}

/* CARD
-------------------------------------------------- */

/* CARD COLUMNS
-------------------------------------------------- */

.card-text:last-child {
    margin-bottom: 0;
    line-height: 1.2;
}

.card-columns .card {
    margin-bottom: .75rem;
}


@media (min-width: 576px){
  .card-columns {
      -webkit-column-count: 6;
      -moz-column-count: 6;
      column-count: 6;
      -webkit-column-gap: 1.25rem;
      -moz-column-gap: 1.25rem;
      column-gap: 1.25rem;
  }

  .card-columns .card {
      display: inline-block;
      width: 100%;
  }
}

/* CARD DECK
-------------------------------------------------- */

.card-deck .card {
    margin-bottom: 15px;
}

.card-deck {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (min-width: 576px){
  .card-deck {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      margin-right: -15px;
      margin-left: -15px;
  }

  .card-deck .card {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
      flex: 1 0 0%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      margin-right: 15px;
      margin-bottom: 0;
      margin-left: 15px;
  }
}


/* CARD-SET
-------------------------------------------------- */

.card .card-title {
    font-family: Arkhip;
}

.card-set {
  position: relative;
  z-index: 2;
}

.card-set > [class*="col"] {
  margin-bottom: 1.5rem;
}

.card-set > [class*="col"] .card {
  height: 100%;
}

/* ACCORDION
-------------------------------------------------- */

.accord-set {
  justify-content: center;
}

.accord-set > [class*="col"] {
  margin-bottom: 1.5rem;
}

.accord-set > [class*="col"] .accordion-item,
.accord-set > [class*="col"] .accordion-header
{
  height: 100%;
}

.accord-set > [class*="col"] .accordion-item {
    position: relative;
    border-radius: .65rem;
    min-height: 108px;
}

.accord-set > [class*="col"] .accordion-item .accordion-collapse {
    position: absolute;
    z-index: 10;
}

.accord-set > [class*="col"] .accordion-item .accordion-button {
    height: inherit;
    border-top-left-radius: .65rem;
    border-top-right-radius: .65rem;
    border: 0;
    transition: all 0.2s linear;
}

.accord-set > [class*="col"] .accordion-item .accordion-button:hover {
    box-shadow: 0 10px 10px -3px rgb(0 0 0 / 20%);
    background-color: #fff;
    transition: all 0.2s linear;
}

.accord-set > [class*="col"] .accordion-item .accordion-button:not(.collapsed) {
    color: #000;
    background-color: #fff;
}

.accord-set > [class*="col"] .accordion-item .accordion-button:not(.collapsed):hover {
    box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);
}

.accord-set > [class*="col"] .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-width: 1px;
    border-bottom-right-radius: .65rem;
    border-bottom-left-radius: .65rem;
}

.accord-set > [class*="col"] .accordion-item:last-of-type .accordion-collapse {
    border-bottom-right-radius: .65rem;
    border-bottom-left-radius: .65rem;
    border-width: 0;
    box-shadow: 0 10px 10px -3px rgb(0 0 0 / 20%);
    width: 100%;
}

.accord-set > [class*="col"] .accordion-item .accordion-collapse .accordion-body {
    background-color: #fff;
    border-bottom-right-radius: .65rem;
    border-bottom-left-radius: .65rem;
}

.accord-set > [class*="col"] .accordion-item .accordion-collapse .accordion-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accord-set > [class*="col"] .accordion-item .accordion-collapse .accordion-body ul li {
  font-size: 14px;
  overflow-wrap: break-word;
  padding: 6px 0;
  letter-spacing: 0.02em;
}

/* EVENTS
-------------------------------------------------- */
.events-set .card{
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: .65rem;
  color: #fff;
  transition: all 0.2s linear;
}

.events-set .card .card-footer{
  background-color: transparent;
  border: 0;
  text-align: right;
}

.events-set .card:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0 10px 10px -3px rgb(0 0 0 / 20%);
  transition: all 0.2s linear;
}

/* SMI
----------------------------------------------------*/

.smi .card .card-img-top{
  background-size: cover;
  background-position: center;
  border-top-left-radius: .65rem;
  border-bottom-left-radius: .65rem;
  width: 50%;
}

.smi .card{
  background-color: transparent;
  border-radius: .65rem;
  border: 0;
  color: #fff;
  transition: all 0.2s linear;
}

.smi .card .card-body{
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: .65rem;
  border-top-left-radius: 0rem;
  border-bottom-left-radius: 0rem;
}

/* NEWS
-------------------------------------------------- */
.news-set .card .card-img-top{
  background-size: cover;
  background-position: center;
  border-top-left-radius: .65rem;
  border-top-right-radius: .65rem;
  height: 180px;
  width: 100%;
}

.news-set .card{
  border-radius: .65rem;
  border: 0;
  color: #000;
  background-color: #fff;
  transition: all 0.2s linear;
}

.news-set .card:hover {
  box-shadow: 0 10px 10px -3px rgb(0 0 0 / 20%);
  transition: all 0.2s linear;
  background-color: #fff;
}

/* SMALL-CARD
-------------------------------------------------- */

.small-card .card .card-img-top{
  background-size: cover;
  background-position: top;
  border-top-left-radius: .65rem;
  border-top-right-radius: .65rem;
  height: 100px;
  width: 100%;
}

.small-card .card{
  background-color: #91B7E2;
}

.large-set .card{
  border-radius: .65rem;
  border: 0;
  color: #000;
  transition: all 0.2s linear;
  min-height: 108px;
}

.large-set .card:hover {
  box-shadow: 0 10px 10px -3px rgb(0 0 0 / 20%);
  transition: all 0.2s linear;
  background-color: #fff;
}

/* top-slider
-------------------------------------------------- */
.top-block {
 height: 100%;
 padding: 4rem;
 background-color: rgba(255, 255, 255, 0.5);
 border-bottom-left-radius: .65rem;
 border-bottom-right-radius: .65rem;
}

.top-block img{
  height: 62px;
  margin-right: 20px;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.customcarousel {
    margin: 4rem 4rem 1rem;
}

/* Carousel base class */
.carousel {
  margin: auto;
  width: 100%;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  top: 32rem;
  z-index: 10;
  left: 0;
  right: 0;
}

.carousel-caption p {
  font-family: Arkhip;
  font-size: 1rem!important;
  line-height: 1.4!important;
  margin-bottom: 0!important;
}

/* Declare heights because of positioning of img element */

.bd-placeholder-img {
  height: 500px;
  box-shadow: 0 10px 10px -3px rgb(0 0 0 / 20%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.carousel-item {
  height: 600px;
  text-align: center;
}

.carousel-indicators {
    align-items: center;
    bottom: 60px;
    z-index: 20;
}

.carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    background: #EAF4FF;
    box-shadow: 0px 4px 10px #557BB5;
    margin-right: 5px;
    margin-left: 5px;
    border: 0;
    border-radius: 2px;
    transform: rotate(-45deg);
}

.carousel-indicators .active {
    width: 9px;
    height: 9px;
}

@media (max-width: 1400px){
  .bd-placeholder-img {
    height: 400px;
  }

  .carousel-item {
    height: 530px;
  }

  .carousel-indicators {
      align-items: center;
      bottom: 90px;
  }

  .carousel-caption {
    top: 26rem;
  }
}

.partners{
  text-align: center;
}

.partners img{
  margin-bottom: 30px;
  height: 130px;
}

.partners p{
  font-size: 12px;
  line-height: 140%;
  color: #3B526D;
}
/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
