/* 

***************
date: 14.07.2020
version 1.0

*********
i = prefix for index, prefix is being choosed in order to prevent conflicts with the 
website css


*/

a.nav:link{
  text-decoration: none;
  color: white;
}

a.nav:hover {
  text-decoration: none;
  color: white;
}

a.nav:visited {
  text-decoration: none;
  color: white;
}

hr.white {
  border-top: 1px solid white;
  width: 30%;
  opacity: 30%;
  max-width: 936px;
}

.i_headerContainer{
  width: 100%;
  /*background: linear-gradient(-45deg,  #23d5ab, #23a6d5, #e73c7e, #ee7752);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;*/
  background-image: url('/images/bg/bg_top_media.jpg');
  /*background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);*/
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  background-color:#F06E55;
}

@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

.i_headerContainerSnow{
  width: 100%;
}

.i_headline{
  width: 100%;
  margin: 0 auto;
  font-style: normal;
  font-weight: 900;
  font-size: 80px;
  line-height: 100px;
  text-align: center;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}

hr.i_white {
  border-top: 1px solid #ffffff;
  width: 80%;
  opacity: 30%;
  max-width: 936px;
}

.i_hotTopicsContainer{
    width: 100%;
    background: #FFFFFF;
}

.i_bottomBanners, .i_topBannerWrapper{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 90%;
  max-width: 960px;
  align-items: stretch;
  justify-content: space-between;
  margin: auto;
}

.i_mosaicLogo{
  position: relative;
  width: 31%;
  background: rgba(0, 70, 125, 0.3);
  border: 2px solid rgba(255, 255, 255, 0);
  box-sizing: border-box;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s;
  margin: 1%;
}

.i_topBanner{
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  background: rgb(40 170 225);
  border: 1px solid rgb(40 168 222);
  box-sizing: border-box;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s;
  margin: 1%;
}

.i_mosaicLogo:hover, .i_mosaicLogo:hover svg path, .i_topBanner:hover{
  stroke:#28AAE1;
  background: #00467D;
  transform: scale(1.03);
}

.i_mosaicLogoImg{
  display: block;
  width: 40%;
  margin: 24px auto 0 auto;
}

.i_topBannerImg{
  width: 15%;
  margin: 8px 6px 8px 12px;
}

.i_mosaicLogo div{
  text-align: center;
  font-style: normal;
  font-weight: 100;
  color: #FFFFFF;
  padding: 0 24px 0px 24px;
}

.i_topBanner div{
  text-align: center;
  font-style: normal;
  font-weight: 100;
  color: #FFFFFF;
  padding: 8px 6px 8px 12px;
}

.i_customerLogos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-right: 0%;
  margin-left: 0%;
  opacity: 50%;
}

.i_customerLogos > img{
  height: 48px;
  margin: 32px;
}

.i_contactContainer{
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}

.i_contactContainer > img{
  line-height: 24px;
}

.i_jobs, .i_portal{
  display: flex;
  align-items: center;
  margin: 16px;
  transition: transform .2s; /* Animation */
  filter: drop-shadow(0px 1px 1px rgba(6, 36, 105, 0.3));
}

.i_jobs:hover, .i_portal:hover{
  transform: scale(1.1);
  filter: drop-shadow(0px 8px 4px rgba(6, 36, 105, 0.15));
  cursor: pointer;
}

.i_jobs > img, .i_portal > img{
  height: 36px;
}

.i_jobs > div, .i_portal > div{
  margin-left: 8px;
}

.i_ContactWrapper{
  display: inline-block;
  text-align: center;
}


.i_columnContainer{
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  
}

.i_header{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 0px;
}

.i_header > img{
  width: 100%;
  margin-top: 16px;
}

.i_chatCall {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 80%;
  max-width: 564px;
  background: white;
  border: 2px solid rgba(255, 255, 255, 0);
  box-sizing: border-box;
  border-radius: 24px;
  margin: auto;
}

.i_chatCall > img {
  width: 100px;
  margin: 24px 12px 24px 32px;
  display: block;
  height: 100%;
}

.i_chatCall > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  width: 300px;
  margin: 24px 32px 24px 0px;
  height: auto;
}

.i_chatCallTriangle{
  width: 25%;
  height: 24px;
  background-image: url('/images/frontpage/ic_triangle.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top -2px left 20%;
  margin: auto;
}

.frontSpaceToChat{
  width: 10px;
  height: 300px;
}

.botFooter{
  width: 100%;
  background-image: url('/images/frontpage/footer_clouds.svg');
  background-repeat: no-repeat;
  background-size: 4266px 800px;
  background-position: bottom;
}

.deer{
  width: 64px;
  margin-bottom: -12px;
  margin-left: 23%;
}

@media only screen and (min-width: 2300px) {
  
  .i_chatCallTriangle {width: 15%;}

}

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

  .i_threeColumns       {display:block; margin: 0 auto; max-width: 460px; margin-top: 64px;}
  .i_threeColumnsHeadline{text-align: left;}
  .i_columnContainerBig {width: 85%;}
  .i_headerText{font-size: 44px;}

}

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

  .i_headerContainer{background-size: cover;}
  .i_columnContainer{width: 90%;}
  hr.i_white {display: none;}
  .i_mosaicLogo{width: 48%; background: rgba(0, 70, 125, 0.6);}
  .i_mosaicLogoImg{width: 60%;}
  .i_topBannerImg{width: 30%; margin: 8px 12px 8px 12px;}
  .i_topBanner div{padding: 8px 12px 8px 12px;}
  .i_customerLogos  {width: 96%; margin-right: 2%; margin-left: 2%;}
  .i_customerLogos > img{ height: 32px; margin: 12px;}
  .i_chatCall{width: 70%;}
  .i_chatCall > img{margin: 24px;}
  .i_chatCall > div{margin: 0px 32px 24px 32px;}
  .frontSpaceToChat{height: 200px;}
  .i_chatCall > img{width: 80px;}
  .deer{margin-bottom: -8px; margin-top: 32px;}
  
}