img
  {
    border-radius: 0.375em;
    border-top-left-radius: 0.375em;
    border-top-right-radius: 0.375em;
    border-bottom-right-radius: 0.375em;
    border-bottom-left-radius: 0.375em;
    display: block;
    z-index: 0;
  }

    img.resp_image {
	max-width: 98%;
	margin:auto;
	border-radius: 3px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.9);
  }

    @media screen and (orientation: portrait) {
    img.resp_image { max-width: 98%; }
  }

    @media screen and (orientation: landscape) {
   img.resp_image { max-height: 98%; }
 }


/* %start%  "form" styling  */
         label {
         font-weight: 500;
         font-size: 1em;
         }
         #submit_button {
         background-color: #B22222;
         height: 40px;
         width: 25%;
         color: #FFFFFF;
         font-weight: bold;
         text-align:center;
         }
         input, textarea {
         background-color: #F3F3F3;
         color: #2F4F4F;
         width: 240px;
         margin-bottom: 5px;
         box-shadow: 3px 3px 1px 1px #696969;
         font-weight: 500;
         font-size: 1em;
         }
/*- %end% form styling  */
            

/* https://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/  */

/*------------------------------------*\
    $CAROUSEL
\*------------------------------------*/

@keyframes carousel {
0%    { left: 0%; }
11%   { left: 0%; }
12.5% { left: -100%; }
23.5% { left: -100%; }
25%   { left: -200%; }
36%   { left: -200%; }
37.5% { left: -300%; }
48.5% { left: -300%; }
50%   { left: -400%; }
61%   { left: -400%; }
62.5% { left: -500%; }
73.5% { left: -500%; }
75%   { left: -600%; }
86%   { left: -600%; }
87.5% { left: -700%; }
99.5% { left: -700%; }
100%  { left: 0%; }
}

.carousel{
    margin:0;
    padding:0;
    overflow:hidden;
    width:100%;
    background: #07c;
}
.panes{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    width:800%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
        
    -moz-animation:carousel 24s infinite;
    -webkit-animation:carousel 24s infinite;
    animation:carousel 24s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:12.5%; /* 100 / number of panes */
    z-index: 0;
}
.carousel img{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    z-index: 0;    
}


<!-- CONTACT FORM codepen.io/imprakash/pen/GgNMXO -->

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}


.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 90%;
  }
  .popup{
    width: 90%;
  }
}

<!-- END Codepen -->

.liststyle li {
  font:90% Arial,Verdana,Sans-Serif;
  color:rgb(255,217,102);
  font-size:1px;
  font-weight:lighter;
  line-height:1px;
}
.stuck {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
}

.h4-text {
  font-size:1.1em;
  font-weight:500;
  line-height:3em;
  white-space: nowrap;
  border: solid 1px black;
  border-radius: 10px;
  margin:7px;
  padding:7px;
  background-color:yellow;
  box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

.tabyb {
  font-weight:600;
  color:#429;
  background-color:gold;
  border-radius:5px;
  margin: 6px 0 6px 0;
  padding:3px;
  width:100%;
  box-shadow: 0 2px 3px rgba(0,0,0,0.9);
}

.tabyh3 {
  font-weight:600;
  font-size:1.3em;
  color:gold;
  background-color:#337;
  border-radius:5px;
  margin: 3px 0 7px 0;
  padding:5px;
  box-shadow: 0 3px 4px rgba(0,0,0,0.9);
/*  width:100%; */
}

.tabyh4 {
  font-weight:600;
  font-size:1.1em;
  color:#003;
  background-color:#ee7;
  border-radius:5px;
  margin: 3px 0 6px 0;
  padding:5px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.9);
/*  width:100%; */
}

/* PHOTO-GALLERY 1:2:4 columns */
* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

/* Create three equal columns that sits next to each other */
.col-3 {
  flex: 33.3%;
  max-width: 33.3%;
  padding: 0 4px;
}

/* Create a 2 span of 3 column */
.col-6 {
  flex: 66.6%;
  max-width: 66.6%;
  padding: 0 4px;
}

.column, .col-3, .col-6 img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 1200px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {
  .column, .col-3, .col-6 {
    flex: 100%;
    max-width: 100%;
  }
}

.box {
	width:40%;
	margin:0 auto;
	background:rgba(255,255,255,.2);
	padding:35px;border:2px solid #fff;
	border-radius:20px/50px;
	background-clip:padding-box;
	text-align:center;
}

.overlay {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,.7);
	transition:opacity .5s;
	visibility:hidden;
	opacity:0;
}

.overlay:target {
	visibility:visible;
	opacity:1;
}

.popup   {
	margin:70px auto;padding:20px;
	background:#fff;
	border-radius:5px;
	width:30%; 
	position:relative;
	transition:all 5s ease-in-out;
}

.popup h2  {
	margin-top:0;
	color:#333;
	font-family:Tahoma,Arial,sans-serif;
}

.popup .close {
	position:absolute;
	top:20px;
	right:30px;
	transition:all .2s;
	font-size:30px;
	font-weight:700; 
	text-decoration:none;
	color:#333;
}

.popup .close:hover  {
	color:#06d85f;
}

.popup .content  {
	max-height:30%;
	overflow:auto;
}

@media screen and (max-width:700px)	{
	.box {
		width:90%;
	}
	.popup  {
		width:90%;
	}
}