/* imports */

/* Images  */
img, object, embed, video {
	
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */

  width: auto\9;
  /* IE7-8 need help adjusting responsive images */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


/*  content within db responsive */

div{ /* Makes the divs visible */
	/*background-color: #E5E3E3;*/
	/*border: .1em solid #EF0B0B;*/
}

.wrapper {
	margin: 0 auto;
	padding: 0px;
	max-width: 95%;
}



  .largepedtable {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.medpedtable {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.smallpedtable {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive Photo Gallery */

.photogalleryContainer {
	overflow: hidden;
	text-align: center;
}

.photogalleryImagesContainer {
	display: inline-block;
	margin: 0 0 15px 14px;
	padding: 4px;
	text-align: center;
	border-radius: 2px;
	vertical-align: top;
	word-wrap: break-word;
	max-width:300px;
}

.photogalleryimg {
	max-width: 250px;
	width:100%;
	max-height:250px;
	overflow:hidden;
	object-fit: cover;
	top: 0;
    left: 0;
    border:1px solid #ccc;
   padding:5px;
   margin:5px;
   margin-bottom:20px;
   background:#f2f2f2;
-webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
-moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
}



/* ======================
   Resets
   ====================== */
*,
*:before,
*:after {
  box-sizing: border-box;
}

.row {
  margin: 0 -10px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
}

.row:last-child {
  margin-bottom: 0;
}

/* Base for all columns */
[class*="col-"] {
  padding: 20px 10px;
  container-type: inline-size; 
}

/* ======================
   Desktop (≥ 800px)
   ====================== */
@media all and (min-width: 800px) {

  .col-1     { flex: 0 0 98%; }
  .col-1-2   { flex: 0 0 48%; }
  .col-1-3   { flex: 0 0 32.33%;}
  .col-2-3   { flex: 0 0 65.66%; }
  .col-1-4   { flex: 0 0 24%; }
  .col-3-4   { flex: 0 0 74%; }

  .row {
    align-items: stretch;
  }

  /* Main fix: full-height background using pseudo-element */
  .colBackground {
    position: relative;
    z-index: 1;
    background-color: transparent;   /* outer is transparent */
  }

  .colBackground::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F6F1ED;
    z-index: -1;
    border-radius: 0;   /* remove if you don't want rounded corners */
  }

  /* Inner content padding + flex for vertical spacing */
  .colBackground > * {
    position: relative;
    z-index: 2;
  }

  .colBackground {
    display: flex;
    flex-direction: column;
    padding: 20px 10px;   /* padding stays on the content */
  }

  .colBackground h1 {
    margin-top: 0;
    margin-bottom: 1em;
  }
}

/* ======================
   Mobile (below 800px)
   ====================== */
@media all and (max-width: 799px) {
  .row {
    flex-direction: column;
    gap: 20px;
  }

  [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .colBackground {
    background-color: #F6F1ED;
    padding: 20px 10px;
  }

  .colBackground::before {
    display: none;   /* not needed on mobile */
  }
}


@media all and ( min-width: 960px ) {
 
 .largepedtable {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.medpedtable {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
.smallpedtable {
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}
}