h1, h3 {
       color: black;
    }
     h5, h6 {
       color: black;
    }
    /* Container holding the image and the text */
    .container1 {
       position: relative;
       text-align: center;
       color: black;
    }
    .container2 {
         background-color: lightgray;
         color: darkcyan;
         height: 400px;
         /*background-image: url("https://pe8fka.bn1302.livefilestore.com/y4mausyBc6QDrnOOK50DEndOpmmKGtr4unq-ioF6kIL2f2k6-i5ufrGnIC2XRW-3f3mzjo0TCxsHmHOsPJDCxab0qqHFIeWlQ0NDU4sfWP44_oACeLntPpacJczkJE40gcPAJdSI16Kp31G2degqMBckKMkNiBDBUcw4QXJT6KVNZxo9F0lHSdi3NhkvCiwP7UTxoVbaBFvoelfEIX79ovMZA?width=600&height=500&cropmode=none");*/
         background-image: url("../img/calendar.png");
         background-repeat: no-repeat;
         background-position: center; 
         /*
         margin-left: 20px;
         margin-right: 20px;
         */
    }    
    .container5 {
         background-color: lightgray;
         color: darkcyan;
         height: 400px;
         /*background-image: url("https://pe8fka.bn1302.livefilestore.com/y4mausyBc6QDrnOOK50DEndOpmmKGtr4unq-ioF6kIL2f2k6-i5ufrGnIC2XRW-3f3mzjo0TCxsHmHOsPJDCxab0qqHFIeWlQ0NDU4sfWP44_oACeLntPpacJczkJE40gcPAJdSI16Kp31G2degqMBckKMkNiBDBUcw4QXJT6KVNZxo9F0lHSdi3NhkvCiwP7UTxoVbaBFvoelfEIX79ovMZA?width=600&height=500&cropmode=none");
         background-repeat: no-repeat, repeat;*/
         background-position: center; 
    }
     #div1 {
         width: 100%;
         height: 150px;
         border: 3px solid lightgray;
         background-color: darkcyan;
         padding:15px;
         }
    .rotation90 {
       transform: rotate(90deg);
    }
    
    
/*  overlapping bootstrap’s 
  .carousel-inner {
      width: 50%;
      margin: 0 auto;
      margin-bottom: 70px;
  }
  
  .item {
      width: 50%;
      margin: 0 auto;
      margin-bottom: 70px;
  }
  
  img { 
      height: 100%;
      max-width: none;
      left: 50%;
      position: relative;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
    }
  
  .carousel-caption {
			position: relative;
			top: 0;
			text-align: center;
			width: 280px;
            color:#000;
            bottom:-95px;  
}

.carousel-indicators-round li {
    border-radius: 10px;
    margin: 1px 3px;
    height: 10px;
    max-width: 10px;
    border: 1px solid #FFF;
    background-color: transparent;
}
.carousel-indicators .active {
    background-color: white;
    max-width: 12px;
    margin: 0 3px;
    height: 12px;
}
    
.slider-container {
	margin-top:35px;
	height:100%;
} 

.carousel-caption {
			position: relative;
			top: 0;
			text-align: center;
            color: white;
            bottom:-95px;  
            }
.carousel-indicators-round li {
    border-radius: 10px;
    margin: 1px 3px;
    height: 10px;
    max-width: 10px;
    border: 1px solid #FFF;
    background-color: transparent;
}
.carousel-indicators .active {
    background-color: white;
    max-width: 12px;
    margin: 0 3px;
    height: 12px;
}

*/



/*Carousel*/
 
    
.slider-container {
	margin-top:35px;
	height:100%;
}

.carousel-caption {
    color:white!important;
    bottom:-65px;  
}

carousel-img { 
      height: 100%;
      max-width: none;
      left: 50%;
      position: relative;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
    }

/*keep images centered inside carousels*/     
.carousel-inner > .item > img{
   margin:auto;
}

/*keep same size images inside carousels*/
.carousel .carousel-item img { 
    width: auto;
    height: 350px;
    max-height: 350px;
    object-fit: contain;
}

/* Change styles for span and cancel button on extra small screens */
/* for screens that are at least 320 pixels wide but less than or equal to 640 pixels wide 
240 pixels (old Android portrait mode)
320 pixels (iPhone 3 to 5 and iPhone SE portrait mode)
375 pixels (iPhone 6, 6s, 7, 8 and X portrait)
384 pixels (Android Nexus portrait)
414 pixels (iPhone 6 Plus, 6s Plus, 7 Plus and 8 Plus portrait)
480 pixels (iPhone 3 and 4 landscape mode)
568 pixels (iPhone 5 and iPhone SE landscape)
600 pixels (Android Nexus landscape, Kindle portrait)
667 pixels (iPhone 6, 7 and 8 landscape)
736 pixels (iPhone 6 Plus, 7 Plus and 8 Plus landscape)
768 pixels (iPad portrait)
812 pixels (iPhone X landscape)
1024 pixels (iPad landscape)

.parent {
  width: 100px;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>
*/
/*responsive screen*/
.stretch {
    width: 100%;
}
img { /* img-responsive img-center, allows the images to resize on base the different device screen size*/
    max-width: 100%;
    height: auto;
    /* object-fit: cover; Cut off the sides of an image, preserving the aspect ratio, and fill in the space*/
    
}
img:hover {
    opacity: 0.7; 
}

@media only screen and (max-width:375px) { /* and (min-width:320px)*/
 span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
     /*
    body {
           font-size: 17px; 
    }
    */
    h2 {
            font-size: 32px;
            font-weight: 900;
            font-style: bold;
    }
     h3 {
            font-size: 17px;
    }
}
@media only screen and (min-width:384px) {
    h2 {
            font-size: 45px;
            font-weight: 700;
            font-style: bold;
    }
}
  /*visitor counter*/
  .stat {
	padding:5px 5px;
	background:#336699;
	text-align:center;
	float:left;
	margin-left:auto;
	margin-left:auto;
	width:60px;
	height:60px;
}
.stat-count {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: 20px;
	overflow:hidden;
	font-family:"Georgia", Courier, monospace;
	padding: 0;
	position: relative;
}
.stat-detail {
	color:#fff;
	padding-top:10px;
	font: italic 1.3rem/1.75 "Georgia", Courier, monospace;
}
    /*
     p {
        text-align:left;
        color: darkcyan;
     }
     img {
          display: block;
          margin: auto;
          width: 70%;
          height: 70%;
          opacity: 1; 
      }
      img:hover {
         opacity: 0.7; 
      }
    */
.social-icon {
    background-color: Orange;
    display: inline-block;
    width: 33%;
    height: 72px;
    margin: 0 5px 5px 5px;
    position: relative;
}

table {
  border: none;
}