@charset "UTF-8";
/* CSS Document */
* {box-sizing: border-box;
	font-family: "Quicksand", sans-serif !important;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	}
/* // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 700 */
.quicksand-<uniquifier> {
  font-family: "Quicksand", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
      html,
      body {
        font-family: "Quicksand", Verdana, sans-serif;
        font-size: 20px;
        line-height: 1.5;
      }
      html {
        overflow-x: hidden;
      }
      h1 {
        font-size: 36px;
      }
      h2 {
        font-size: 30px;
      }
      h3 {
        font-size: 24px;
      }
      h4 {
        font-size: 20px;
      }
      h5 {
        font-size: 18px;
      }
      h6 {
        font-size: 16px;
      }

      .card-wrapper {
        display: flex;
      }
      /*.carousel-item {display:contents; } */
      .card {
        margin: 0 0.5em;
        width: calc(100% / 4);
      }

      /*header image on different size screens*/
      .image_full {
        display: block;
      }
      .image_medium {
        display: none;
      }
      .image_mobile {
        display: none;
      }
      .show-sm {
        display: none;
      }

      .clearfix {
        overflow: auto;
      }

      @media (min-width: 769px) and (max-width: 1279px) {
        .image_full {
          display: none;
        }
        .image_medium {
          display: block;
        }
        .image_mobile {
          display: none;
        }
        .show-lg {
          display: none;
        }
        .show-sm {
          display: block;
        }
        .carousel-item {
          height: 460px;
        }
        .flex-container {
          flex-direction: column;
        }
        .rightDiv {
          width: 100%;
        }
        .leftDiv {
          width: 100%;
        }
        .sidebarBook {
          display: none;
        }
        .sidebarimg-noshadow {
          display: none;
        }
        .modal-headline {
          margin: 15px 10px;
          font-size: 1.4em;
        }
        .modal-text-illustration {
          font-size: 1em;
          line-height: 1.2em;
          margin: 5px 15px;
        }
        .modal-authorName {
          font-style: italic;
          font-size: 0.9em;
          text-align: right;
          margin: 10px 20px 10px;
          line-height: 1em;
        }
        .button-Amazon {
          padding: 10px 10px;
          display: block;
          font-size: 20px;
          margin: 20px 70px;
        }
        .card-title {
          font-size: 1em;
          font-weight: 700;
        }
        .card-text {
          font-size: 0.8em;
        }
}
      @media screen and (max-width: 768px) {
        .page-numbers .page-number {
          display: none;
        }

        .seeAll{display: none;}
        .image_full {
          display: none;
        }
        .image_medium {
          display: none;
        }
        .image_mobile {
          display: block;
        }
        .carousel-indicators {
          display: none;
        }
        .card-wrapper {
          display: inline-block;
        }
        .carousel-item {
          display: contents;
        }
        .card {
          margin: 0 0.5em;
          width: calc(100% / 1);
        }
        .flex-container {
          flex-direction: column;
        }
        .rightDiv {
          width: 100%;
        }
        .leftDiv {
          width: 100%;
        }
        .sidebarBook {
          display: none;
        }
        .sidebarimg-noshadow {
          display: none;
        }
        .modal-headline {
          margin: 15px 10px;
          font-size: 1.4em;
        }
        .modal-text-illustration {
          font-size: 1em;
          line-height: 1.2em;
          margin: 5px 15px;
        }
        .modal-authorName {
          font-style: italic;
          font-size: 0.9em;
          text-align: right;
          margin: 10px 20px 10px;
          line-height: 1em;
        }
        .button-Amazon {
          padding: 10px 10px;
          display: block;
          font-size: 20px;
          margin: 20px 20px;
        }
        .w3-bar-item {
          font-size: 1.3em;
        }
        html,
        body {
          font-family: Verdana, sans-serif;
          font-size: 20px;
          line-height: 1.5;
        }
        html {
          overflow-x: hidden;
        }
        h1 {
          font-size: 36px;
        }
        h2 {
          font-size: 30px;
        }
        h3 {
          font-size: 24px;
        }
        h4 {
          font-size: 20px;
        }
        h5 {
          font-size: 18px;
        }
        h6 {
          font-size: 16px;
        }
      
        .carousel-control-prev {
          display: none;
        }
        .carousel-control-next {
          display: none;
        }
        flex-software > div {
          /*	width: 100px;*/
          margin: 5px;
        }
        .sm-logo {
          height: 40px;
          width: 40px;
        }
        .social {
          flex-wrap: wrap;
          flex-direction: row;
        }
		  .hide-small {display:none;}
      }
      .footer-email {
        width: 100%;
        font-size: 0.8em;
      }
		
.carousel-item{height:500px;}

.carousel-indicators {
  position:static;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
/*		background-color:aqua;*/
margin: 0px 10% 0px 10%;
width: 80%;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 30px;
  padding: 10px;
  margin-right: 10px;
  margin-left: 10px;
  text-indent: 0;
  cursor: pointer;
  text-align: center;
  font-size: 22px;
  font-weight: bolder;
	  background-color: #fff;
 border-radius: 100%;
  background-clip: padding-box;
  border: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}
.carousel-indicators .active {
  opacity: 1;
}

.seeAll {text-align: right; padding-right:50px; padding-bottom:10px; font-style: italic; font-size: 0.75em;}
.seeAll a {text-decoration: none;color:#2D2D2D}
.seeAll a:hover{color:darkblue; font-weight: bold}


/*header image on different size screens
.image_full{display:block;}
.image_medium{display:none;}
.image_mobile{display:none;}
.show-sm{display:none;}

/* overlay on images*/
.myOverlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-image: linear-gradient(rgba(255,255,255,.8), rgba(153,204,255,1));
	cursor:pointer;
	}
	
.myContainer:hover .myOverlay {
	opacity: 1;
	}

.image {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .5s ease;
	backface-visibility: hidden;
	}
.myText {
	/*font-family: Verdana, "sans-serif";*/
	color: #333;
	font-size: 18px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align:center;
	}/* end overlay on images */

.buttonCard {
	background-color: #04AA6D; /* Green */
	border: none;
	color: white;
	padding: 15px 12px;
	text-align: center;
	text-decoration: none;
	display: block;
	font-size: 20px;
	margin: 20px 2px;
	transition-duration: 0.4s;
	cursor: pointer;
	border-radius: 10px;
	}
.buttonCard2:hover {
	background-color: #008CBA;
	color: white;
	}



/*grey out more images on modal*/
.grey-out {
	object-fit: cover;
	transition:.4s ease;
	cursor:pointer;
	}
.container:hover .grey-out:not(:hover){
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	opacity:0.5;
	transform:scale(.9);
	}
	
/*
.footerSite {background-color: #000; padding:16px 0px; margin-left: auto; margin-right: auto; align-content: center; text-align: center}
.footerWords {color:#fff; text-decoration:none;}
.footerWords:hover {background-color: #333; display:inline; padding:16px 16px; top:0; bottom:0}
*/

.carousel-control-prev-icon,
.carousel-control-next-icon{border-radius: 50%}