/* 

   Filename:  41_ChevyPU.css

   Author:    John G. (Skip) Todora

   Date:      February 05, 2022

   Revised:   July 12, 2025 to make the page cellphone friendly

   Website:   skipsmessyworkbench.com

*/



body {

    /* .bg-gradbg-grad-31-model-A { */

    background-color: #FFFFFF;

    /* background-image: linear-gradient(#c5f0c5, #90EE90); */

    /* background-color: #b5b5cf; */

    background-image: linear-gradient(#89b3cf, #185680);  

    /* #1E90FF #1EB3FF #66C4FF */

}



.box-art-img {

  display: flex;

  margin: auto;

  width: 75%;

  padding-left: 10px;

  padding-right: 10px;

}



p {

  text-align: left;

  padding-left: 10px;

  padding-right: 10px;

}



.modified-h3 {

	color: black;

	padding-bottom: 20px;

	text-align: center;

	font-weight: bold;

}



.centered {

  text-align: center;

  padding: 10px;

}



.white-text {

    color: white;

}



.red-text {

    color: red;

}



/* Center website */

.main {

  /* max-width: 1023px; */

  margin: auto;

}



.row {

  margin: 8px -16px;

}



/* Add padding BETWEEN each column */

.row,

.row > .column {

  padding: 8px;

}



/* Create four equal columns that floats next to each other */

.column {

  float: left;

  width: 25%;

}



/* Clear floats after rows */ 

.row:after {

  content: "";

  display: table;

  clear: both;

}



/* Content */

.content {

  background-color: white;

  padding: 10px;

}



.photo-number {

  text-align: center;

  font-weight: bold;

  font-size: 1.2em;

}



/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

  }

}



@media screen and (max-width: 900px) {

  .column {

    width: 100%;

  }

}



.display-text-btn {

  position: relative;

  padding: 5px;

  background-color: #154264;

  color: white;

  font-weight: bold;

  /* margin-left: 50px; */

  margin: auto;

  margin-bottom: 10px;

}



.close-text-btn {

  position: relative;

  padding: 5px;

  background-color: #154264;

  color: white;

  font-weight: bold;

  /* margin-left: 50px; */

  margin: auto;

  margin-bottom: 10px;

}





/* THIS IS FOR THE BUTTON CONTROL TO DISPLAY PHOTO TEXT */

.popup {

  /* position: fixed; */

  position: relative;

  z-index: 1;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0,0,0,0.4);

  display: none;

}



.popup-content {

  background-color: white;

  margin: 10% auto;

  padding: 20px;

  border: 1px solid #888888;

  width: 100%;

  /* width: 30%;

  font-weight: bolder; */

}



.popup-content button {

  display: block;

  margin: 0 auto;

}



.show {

  display: block;

}

/* END THIS IS FOR THE BUTTON CONTROL TO DISPLAY PHOTO TEXT */











































/* OLD CSS CLASSES */

/*

p {

	display: block;

	margin: auto;

	width: 100%;

	padding-left: 15px;

	padding-right: 15px;

 }



.centered {

  text-align: center;

  padding: 10px;

}

  

 iframe {

  display: flex;

  margin: auto;

  margin-top: 20px;

  margin-bottom: 20px;

  width: auto;

  height: auto;

 }



/* Slideshow container */

/*.slideshow-container {

  max-width: 1024px;

  position: relative;

  margin: auto;

  border-width: 5px;

  border-style: solid;

  border-color: #7F7F7F;

  z-index: 1;

}

  

/* Hide the images by default

.mySlides {

  display: none;

}

 

.slideshow-img {

  position: relative;

  margin: auto;

  width: 100%;

} */

  

/* Next & previous buttons

.prev, .next {

  cursor: pointer;

  position: absolute; */

  /* top: 40%;

  top: 0%;

  width: auto; */

  /* margin-top: -22px;

  padding: 16px;

  color: yellow;

  background-color: black;

  opacity: 0.5;

  font-weight: bold;

  font-size: 48px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}



.prev-bottom, .next-bottom {

  cursor: pointer;

  position: absolute; */

  /* top: 40%; */

  /* top: 87%;

  bottom: 0%;

  width: auto; */

  /* margin-top: -22px;

  padding: 16px;

  color: yellow;

  background-color: black;

  opacity: 0.5;

  font-weight: bold;

  font-size: 48px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

} */



  /* Position the "next button" to the right

  .next {

    right: 0;

    border-radius: 3px 0 0 3px;

  }



  .next-bottom {

  right: 0;

  border-radius: 3px 0 0 3px;

}



.next-bottom:hover, .prev-bottom:hover {

  background-color: rgba(0,0,0,0.8);

} */



/* On hover, add a black background color with a little bit see-through

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}

  

.picnumber {

  font-size: 28px;

	font-weight: bold;

	color: #800080;

	margin-left: 75px;

  margin-top: 30px;

}  */



/* Fading animation

.fade { */

  /* -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

} */

  

/*

@-webkit-keyframes fade {

  from {opacity: .4}

  to {opacity: 1}

}



  

@keyframes fade {

  from {opacity: .4}

  to {opacity: 1}

}



.descCenter {

	text-align: center;

	font-family: verdana;

	font-size: 16px;

  padding: 10px;

}



.descLeft {

  text-align: left;

	font-family: verdana;

	font-size: 16px;

	padding: 10px;

}



.first-p {

  padding-top: 60px;

}



@media screen and (max-width: 600px) {

  .column {

    width: 100%;

  }

}



ol {

  margin-left: 50px;

  margin-right: 50px;

}

  

li {

  padding-bottom: 10px;

}

*/