/*Ogólne*/
/*------------------------------------------*/
html, body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:0;
  font: 400 16px Lato, sans-serif;
  letter-spacing: 1px;
  line-height: 1.5;
  color: #444547;
  text-align: justify;
  overflow-x: hidden;
}

/*Zapobieganie dragowaniu strony poza jej granice w wersji mobilnej, co
powodowało ponowne renderowanie animacji*/
html, body { overscroll-behavior: none; }


ul li {list-style-type: circle;}

/*Okno dla SVG będącego tłem strony*/
#webIP {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
  opacity:0.3;
  cursor: default;
}

.row {
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
  margin-top:15px;
  margin-bottom:30px;
}

@media screen and (max-width: 768px) {.col-sm-5, .col-sm-6, .col-sm-5 { margin-bottom:30px;} }

.container-fluid { padding: 60px 0; }

circle:hover {cursor: grab;}


/*Effekty dla zdjęć*/
img {
  display: block;
  margin-top:0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-radius: 8px;
  filter: grayscale(0%) brightness(100%);
  transition: all 1s ease-in-out;
}
img:hover {
  filter: grayscale(50%) brightness(120%);
  transition: all 1s ease-in-out;
}
.imgBorder {
  border: 1px solid #efdcdc;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/*Ustawienia dla przycisków*/
.btnAera {
  border-radius:20px;
  color:white !important;
  background-color:#2929a3;
  border-color:#2929a3;
  transition: all 200ms ease-in-out;
}
@media (pointer: fine) {
  .btnAera:hover {
    background-color:#6f6fdc;
    border-color:#6f6fdc;
    transition: all 200ms ease-in-out;
  }
}
@media (pointer: coarse) {
  .btnAera:hover {
    background-color:#2929a3;
    border-color:#2929a3;
    transition: all 200ms ease-in-out;
  }
}
.btnAera:active {
  background-color:#12124c !important;
  border-color:#12124c !important;
}

.clickText {
  text-decoration: none !important;
  color: white;
  cursor: pointer;
  transition: all 200ms ease-in-out;
}
.clickText:hover {
  color:#a7c7f9;
  transition: all 200ms ease-in-out;
}
.clickText:active { color:#12124c !important;}

/*klasa do chowania linków do prezentacji w wersji mobile*/
@media (pointer: coarse) {.hideMedia { display: none; } }


/*Slider*/
input[type=range] {
  height: 33px;
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 26px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: #A7C7F9;
  border-radius: 50px;
  border: none;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: none;
  height: 26px;
  width: 37px;
  border-radius: 28px;
  background: #2929A3;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track { background: #A7C7F9;}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 26px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: #A7C7F9;
  border-radius: 50px;
  border: none;
}
input[type=range]::-moz-range-thumb {
  box-shadow: none;
  border: none;
  height: 26px;
  width: 37px;
  border-radius: 28px;
  background: #2929A3;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 26px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #A7C7F9;
  border: none;
  border-radius: 100px;
  box-shadow: none;
}
input[type=range]::-ms-fill-upper {
  background: #A7C7F9;
  border: none;
  border-radius: 100px;
  box-shadow: none;
}
input[type=range]::-ms-thumb {
  box-shadow: none;
  border: none;
  height: 26px;
  width: 37px;
  border-radius: 28px;
  background: #2929A3;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {background: #A7C7F9;}
input[type=range]:focus::-ms-fill-upper {background: #A7C7F9;}


.settingAera {
  display: flex;
  flex-wrap: wrap;

  /*#e2d9d9*/
  background: rgba(226, 217, 217, 0.2);

  border: 0.5px solid #A7C7F9;
  border-radius: 20px;
  justify-content: center;
  margin-top: 1em;
}

.comment {
  font-weight: 300;
  margin-top: 1em;
  font-size:15px;
  color:#7a7575;
}


/*Ustawienia obrazka tła dla białych sekcji*/
.bg-molecule-about {
  background-image:url('../images/moleculeUpLeft.png'), url('../images/moleculeDownRight.png');
  background-position: left top, right bottom;
  background-repeat:no-repeat;
}
.bg-molecule-cases {
  background-image:url('../images/moleculeUpRight.png'), url('../images/moleculeDownLeft.png');
  background-position: right top, left bottom;
  background-repeat:no-repeat;
}
.bg-molecule-contact {
  background-image:url('../images/moleculeUpRight.png');
  background-position: right top;
  background-repeat:no-repeat;
}
.bg-molecule-about, .bg-molecule-cases, .bg-molecule-contact {
  max-width:1440px;
  background-size:40%;
  margin:auto;
}
@media screen and (max-width: 768px) {
  .bg-molecule-about, .bg-molecule-cases, .bg-molecule-contact {background-size:60%;}

}


.bg-grey {
    color: white !important;
    background-image: linear-gradient(#7a7575, #e2d9d9);
}
.text-grey p, .text-grey li, .borderAera a {
  color:white;
  transition: all 1s ease-in-out;
}

.text-grey:hover p, .text-grey li:hover, .borderAera a:hover {
  color:#2929a3;
  transition: all 1s ease-in-out;
  transition-delay: 200ms;
}

.bg-white {
    z-index: 0;
    color:black !important;
    background-color: white
}


.animEffect {
  transition: all 1s ease-in-out;
}
.animEffect:hover {
  filter: contrast(120%) brightness(120%) drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)) grayscale(20%);
  transform:scale(1.05);
  transform-origin: center;
}
@media (pointer: coarse) { .animEffect:hover {filter: none;} }


/*tekst*/
.SectionTitle {
  margin-bottom: 30px;

  font-size: 2.3em;
  letter-spacing:2px;
  text-transform: uppercase;
  line-height:1;

  opacity: 0.8;
}

.underTitle {
  width: 95%;
  margin: auto;

  font-size: 20px !important;
  text-shadow: none;
  text-transform: none;
  color: #87a1c9;
}
.bg-grey .underTitle {color:#efdcdc;}

.subSectionTitle {
  padding-left: 0.5em;
  padding-bottom:0;
  margin-bottom:10px;
  margin-top:0;

  color: #a7c7f9;
  border-left: 2px solid #a7c7f9;

  text-align: left !important;

  text-transform: uppercase;
  letter-spacing:2px;
  font-size:1.5em;
  line-height:1.2;

  transition: all 2s ease-in-out;
}
.bg-grey .subSectionTitle {
  color: #2929a3;
  border-left: 2px solid #2929a3;
}


.fontWeight {
  font-weight: 600 !important;
  opacity: 0.9;
}

.borderAera {
  padding: 20px ;
  letter-spacing: 2px;

  background: rgba(122, 117, 117, 0.5);

  border: 0.5px solid #a7c7f9;
  border-radius:8px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 1s ease-in-out;
}
.borderAera:hover {
   background: rgba(122, 117, 117, 0.8);
}
.borderAera span {
  letter-spacing: 3px;
  transition: all 200ms ease-in-out;
}
.borderAera p:hover, .borderAera li:hover,  .borderAera span:hover {
  color:#a7c7f9;
  transition: all 200ms ease-in-out;
}

.slideanim {visibility:hidden;}
.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

.SectionTitle, .diffFontColor, .subSectionTitleAfter { color: #2929a3; }
.SectionTitle, .subSectionTitleAfter {text-shadow: 1px 4px 4px #e2d9d9;}
.bg-grey .subSectionTitleAfter  {text-shadow: 1px 4px 4px #7a7575;}
.bg-grey .SectionTitle {
  color: #a7c7f9;
  text-shadow: 1px 4px 4px #7a7575
}
.bg-grey .subSectionTitleAfter {
  color: #a7c7f9;
  border-left: 2px solid rgba(41, 41, 163, 0.6)
}


/*Sekcja navbar*/
/*------------------------------------------*/
.navbar {
    margin-bottom: 0;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
}

.navbar-brand  {
  color: #6f6fdc !important;

  transition: color 2s ease-out;
}

.navbar-brand:hover {
  color: white !important;
  -webkit-transform-origin: center;
  -webkit-transform-style: preserve-3D;
  -webkit-transform: rotatex(360deg);
  -webkit-transition: all 700ms ease-in-out;

  -ms-transform-origin: center;
  -ms-transform-style: preserve-3D;
  -ms-transform: rotatex(360deg);
  -ms-transition: all 700ms ease-in-out;

  transform-origin: center;
  transform-style: preserve-3D;
  transform: rotatex(360deg);
  transition: all 700ms ease-in-out;
}

.navbar li {text-transform: uppercase;}

.navbar a:before, .navbar a:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

.navbar a:before {
    top: 0;
    transform: translateY(10px);
}

.navbar a:after {
    bottom: 0;
    transform: translateY(-10px);
}

.navbar li a:hover:before, .navbar li a:hover:after, .navbar li.active a:before, .navbar li.active a:after {
    opacity: 1;
    transform: translateY(0px);
}

.nav-transparent { opacity:0.8; }



/*Sekcja pierwsza (logo itp.)*/
/*------------------------------------------*/
#firstSection {
    background-image: linear-gradient(#2929a3, #a7c7f9);
    color: #fff;
    padding-top: 60px;
    font-family: Montserrat, sans-serif;
}
@media (pointer: coarse) { #firstSection {height:100vh}}

/*Podświetlenia napis machine learnig*/
#firstSection p {
  margin: auto;
  width: 18em;
  line-height: 1;

  font-family: sans-serif;
  letter-spacing: 2px;
  font-size: 1.3em;
  overflow: hidden;

  opacity: 0.7;
  background: linear-gradient(90deg, #505da0, #fff, #fff, #505da0);
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
#firstSection h1 {
  padding: 0 !important;
  margin-bottom:0 !important;
  margin-left: auto;
  margin-right: auto;
  line-height: 80%;
  color: lightgrey;
  font-size: 2.7em;
  letter-spacing: 3px;

  opacity: 0.7;
}
@media (pointer: coarse) {
  #firstSection h1 {font-size: 2em;}
  #firstSection p {
   font-size: 0.9em;
   width: 15rem;
  }
}


.logo-small {
    color: #2929a3;
    font-size: 50px;
}
.logo {
    color: #2929a3;
    font-size: 200px;
}
@media screen and (max-width: 480px) { .logo { font-size: 150px; } }

/*Guziki do zmiany napisów*/
.carousel-control.right, .carousel-control.left { background-image: none; }
.carousel-indicators li {
    border-color:white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin:10px;
    width:5vw;
    max-width:30px;
    height:5vw;
    max-height:30px;
    border-radius:2.5vw;
    opacity: .5;
    transition: all 1s ease-out;
}
.carousel-indicators li.active {
    background-color: #D7D7D7;
    margin:10px !important;
    width:5vw !important;
    height:5vw !important;

    box-shadow: 0 4px 8px 0 #bbbbf9, 0 6px 20px 0 #d9d9fc;

    transition: all 1s ease-out;
}
.carousel-indicators li:hover {
  background-color: #2929a3;
}
.carousel-indicators {
  position: absolute;
  margin-bottom: 0;
}

.carousel-inner {
  height: 370px;
  width: 70%;
  margin: auto;
  padding-bottom: 20vh;
}

/*Miganie napisów*/
.item h4 {
  font-size: 35px;
  line-height: 1.375em;
  letter-spacing: 2px;
  margin: 20px 0;

  color:#b6d6ed;
  text-shadow: 0 0 5px white;
  /*
  -webkit-animation: neon 1s ease-in-out infinite alternate;
  -moz-animation: neon 1s ease-in-out infinite alternate;
  animation: neon 1s ease-in-out infinite alternate;
  */
}
.item span { font-style: normal; }
@-webkit-keyframes neon {
  from {
    text-shadow:
     0 0 10px #fff,
     0 0 20px  #fff,
     0 0 30px  #fff,
     0 0 40px  #228DFF,
     0 0 70px  #228DFF,
     0 0 80px  #228DFF,
     0 0 100px #228DFF,
     0 0 150px #228DFF;
  }
  to {
    text-shadow:
       0 0 5px #fff,
       0 0 10px #fff,
       0 0 15px #fff,
       0 0 20px #228DFF,
       0 0 35px #228DFF,
       0 0 40px #228DFF,
       0 0 50px #228DFF,
       0 0 75px #228DFF;
  }
}
@media (pointer: coarse) {
  .item h4 {
    font-size: 30px;
    line-height: 1.375em;
  }
  .carousel-inner {
    width: 95%;
    height: 420px;
  }
}

#contact-form-small {
  border-radius:20px;
  width:80%;
  max-width:400px;
  margin:auto;
}



/*Sekcja Introduction*/
/*------------------------------------------*/
#introduction ul {
  padding-left: 1.5rem;
}
#introduction ul li {
  margin-top: 0.5rem;
  background-image: linear-gradient(to right, rgba(41, 41, 163, 0.07),   rgba(0, 0, 0, 0) 10%);
  padding:0.3em;
  border-radius: 3px;
}

.importantText {
  font-size: 1.1em;
  text-shadow: 1px 1px 4px #e2d9d9;
}

.borderTop {
  min-height: 6.5em;
  padding:.2em;

  font-size: 1.3em;
  letter-spacing: 2px;
  text-shadow: 1px 1px 4px #e2d9d9;
  line-height:1.4;

  /*#e2d9d9*/
  background-image: linear-gradient(to bottom, rgba(167, 199, 249, 0.2),  rgba(0,0,0,0) 90%);

  border-radius:3px;
  border-top: 0.5px solid #a7c7f9;
}
@media screen and (max-width: 768px) { .borderTop {font-size: 1.2em;} }


/*Podświetlenia napisów*/
.functional {
  padding-bottom:2px;

  font-size: 1.2em;
  letter-spacing: 3px;
  line-height:1.2;
  text-shadow: 1px 1px 4px #e2d9d9;


  margin: 5px 0 5px 0;

  border-bottom: 0.1px solid #a7c7f9;
  border-radius:0;
  transition: all 1s ease-in-out;
}
/*.functional:hover,*/ .autoFunctional {
  color: white;
  background-color: rgba(41,	41,	163, 0.4);
  text-shadow: 0 0 10px #efdcdc;
  opacity:0.9;

  border-radius:8px;
  border-bottom-color: #7c7676;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all 1s ease-in-out;
}

/*Animacja dla Epidemic Concept*/
#moveDNA {
  position: absolute;
  top:25%;
  left: 10px;
  right: 10px;
  transition: all 2s ease-in-out;
}
@media screen and (max-width: 768px) { #moveDNA { top:10%;} }


.epidemicDelay:hover #moveDNA {
  opacity:0.1;
  filter: grayscale(50%);
  transition: all 2s ease-in-out;
}
.virusanim {
  opacity:0;
  visibility:hidden;
}
.epidemicDelay .virusanim {
  filter: grayscale(0%);
  transition: all 2s ease-in-out;
}
.epidemicDelay:hover .virusanim {
  opacity:0.9;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  filter: grayscale(50%);
  transition: all 2s ease-in-out;
}
.showvirus {
  opacity:0.1;
  transition: all 1s ease-in-out;
  visibility: visible;
}

/*Animacja dla ruchomych molekuł*/
#distributedSystem, #distributedSystem svg {
  height:460px;
  width: 100%;
}
@media screen and (max-width: 768px) { #distributedSystem, #distributedSystem svg {height:380px;}}



/*Sekcja Benefit*/
/*------------------------------------------*/
#benefits h4 {
  letter-spacing:2px;
  text-transform: uppercase;
  text-shadow: 1px 1px 4px #7a7575;
}
#benefits p {
  padding: 1px;

  letter-spacing:2px;

  /*#e2d9d9*/
  background-image: linear-gradient(to bottom, rgba(122, 117, 117, 0.2),  rgba(0,0,0,0) 90%);
  border-radius:3px;
  min-height: 6em;
}



/*Sekcja Applications*/
/*------------------------------------------*/
.caseTitle {
  letter-spacing: 2px;
  padding-top:0;
  padding-bottom:5px;
}

.leftEffect li, .leftEffect:not(ul) {
  width: 98%;

  text-align: justify;

  font-weight: 300;
  font-style: italic;

  color: #2929a3;
  background-image: linear-gradient(to right, rgba(41, 41, 163, 0.07),   rgba(0, 0, 0, 0) 10%);
  padding:0.3em;
  border-radius: 3px;
}

ul.leftEffect {padding-left: 1.5rem;}
.leftEffect li {
  margin: 0.3em 0;
  padding:0.1em 0 0.1em 0.3em;

  font-style: normal;
}
.leftEffect li:hover {
   background-image: linear-gradient(to right, rgba(41, 41, 163, 0.07),   rgba(0, 0, 0, 0) 20%);
}


.leftEffect li a {
  transition: all 1s ease-in-out;
}
.leftEffect li:hover a {
  color: #2929a3;
  transition: all 1s ease-in-out;
  transition-delay: 200ms;
}

.algorithm {
  width: 98%;
  margin-bottom: 1vh;
  text-align: left;

  letter-spacing: 3px;
  color: #2929a3;

  background-image: linear-gradient(to right, rgba(41, 41, 163, 0.1),   rgba(0, 0, 0, 0) 60%);
  padding:0.2em;
  padding-left: 0.3em;
  border-radius: 8px;
}

.readMe {
  font-style: italic;
  opacity:0.8;
}

.graphBox {
  padding:10px;
  border-radius:8px;

  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/*Przykłady algorytmów na Kernels*/
@media screen and (max-width: 768px) {
  #exemplesFirst {margin-bottom:0 !important;}
  #exemplesSecend {margin-top:0 !important;}
}

#systemWorksAnim-chart svg {
  height:350px;
  width: 100%;
}
#map_anim, #map_points, #graph_lines {height: 405px;}

#map_points {
  margin-top: 17px;
  margin-bottom: 28px;
  background-color: white; }

/*Legenda w plotly i leaflet*/
.legend .lengendTilte { letter-spacing: 3px;}
.legend  {
  line-height: 18px;
  text-align: center;
  color: #555;

  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;

  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 20px;
}

#plotly_anim_legend {
    position: absolute;
    right:30px;
    bottom:147px;
}



/*Sekcja Cooperation*/
/*------------------------------------------*/
#cooperation ul {
  padding-left: 1.5rem;
}
#cooperation ul li {
  margin-top: 0.5rem;
}



/*Sekcja Contact*/
/*------------------------------------------*/
#Email {
  width:40%;
  border-radius:20px;
}
.Contact {
  border: 1px solid #2929a3;
  border-radius: 8px;
}

.contactAera {
  padding: 20px ;
  letter-spacing: 2px;

  /*#e2d9d9*/
  background: rgba(226, 217, 217, 0.2);

  border: 0.5px solid #A7C7F9;
  border-radius: 20px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*rozciągnięcie formularzq na mniejszym ekranie*/
@media screen and (max-width: 768px) { .form-group { padding:0; } }
/*------------------------*/



/*Sekcja Explore more*/
/*------------------------------------------*/
#explore ul {
  margin-top: 1em;
  padding-left: 1.5rem;
}
#explore ul li { line-height: 1.3;}

#explore .presentationList { margin-top: 1em}
#explore .presentationList li { list-style-type: none}


/*Stopka*/
/*------------------------------------------*/
footer {
  height: 100px;
  padding: 10px !important;
  color: white;
  letter-spacing:2px;
  background: linear-gradient(#a7c7f9,#2929a3);
  background-repeat: no-repeat;
}

footer .glyphicon {font-size: 35px;}


/*Ustawienia dla Cookie*/
/*------------------------------------------*/
/*Ustawienia sekcji w oparciu o absloute*/
#cookiePolicy {
  height:205px;
  padding:0;

  opacity:.9;
}

#cookieFunny {
  position:absolute;
  top: 0;
  left:calc(50% - 350px); /* Pozycjonowanie animacji cookie 700px */
}

#cookieFunny svg {
  display: block;
  margin: auto;
}

#cookieText {
 position:absolute;
 top: 100px;
 left:20%;
 bottom:-5px; /* sztuczne zciągnięcie w dół */
 width:60%;

 line-height:0.9;
 letter-spacing: 1px;
 font-size: 1em;
}

#cookiePolicy { display: none; }

/*Ustawienia dla wersji mobile */
@media screen and (max-width: 768px) {
  #cookieFunny {top:-15px;}

  #cookieFunny svg  {
    transform:scale(.7);
    transform-origin: center;
  }

  #cookieText {
    width:100%;
    top: 80px;
    left:0;
    padding-left:20px;
    padding-right:20px;
  }
}

@media screen and (max-width: 400px) {
  #cookieFunny {top:-25px;}
  #cookieFunny svg  { transform:scale(0.5);}
}