:root{
  --main-color:#CE202A;

}
/* *{
  border:1px solid green
} */

body,
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size:18px;
}

.maincontent {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.maincontent_wrapper {
  padding-top: 0;
}

.my-container{
  max-width:1600px;
  padding:2%;
  margin:0 auto;
}

img {
  width: 100%;
}

.highlight{
  color:var(--main-color);
}

.my-btn {
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	padding:12px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
  margin-top:10px;
}
.my-btn:hover {
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	background-color:#476e9e;
  color:#fff;
}
.my-btn:active {
	position:relative;
	top:1px;
}

.my-hr{
  border-top:1px solid #B3B3B3;
  max-width:70%;
  text-align: left;
  margin:10px 0 15px;
}

.my-header{
  /* max-width:1200px; */
  background-color:#f2f2f2;
  margin:0 auto;
  padding-inline:2%;
  text-align: center;
}

.my-header-content{
  max-width:1200px;
  margin:20px auto;
  padding-inline:2rem;
}

#hero{
  background-image: url('/imageserver/Reusable/mcelroy-metal23/hero-min.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height:50vh;
  display:grid;
  align-items: center;
  border-bottom:1px solid #00703D;
}

#hero-content{
  background-image: url('/imageserver/Reusable/mcelroy-metal23/logo.png'), linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.1) 100%);
  background-repeat: no-repeat;
  background-position: 10px 10px, 0 0;
  min-height:50vh;
  padding-left:3%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  /* text-align: center; */
  /* color:#fff; */
}

#logo{
  max-width:200px;
  margin:3%;
}


.section1{
  text-align: center;
}

.pic{
  float:right;
}

.panel-profiles img{
  max-width:200px;
}

/* ========================================== */

.my-grid{
  display:grid;
  grid-template-columns: repeat(2, 48%);
}

.grid-content{
  place-self:center;
  padding-left:10%;
  height:100%;
  width:100%;
  display:grid;
}

.colors{
  order:1;
}
.grid-image{
  display:grid;
  height:100%;
  width:100%;
  align-items: center;
}

.visualizer-grid{
  display:grid;
}

.visualizer-image{
  grid-column:1/4;
  grid-row:1/2;
}

.visualizer-content{
  grid-column:3/6;
  grid-row:1/2;
  align-self:center;
  justify-self: flex-end;
  max-width:800px;
  background-color:#f2f2f2;
  padding:6%;
}
.vis-text{
  display:inline-block;
}

.label-descrip{
  display:block;
  max-width:700px;
}

.title{
  font-weight:600;
}

.space{
  margin-inline:20px;
}

.line-break{
 border-top:2px solid black;
 max-width: 300px;
 margin: 0 auto;
 margin-top:10px;
}

#product-list{
  padding:2%;
}


.list-menu{
  /* background-color:#f2f2f2; */
  display:flex;
  justify-content: space-evenly;
  flex-wrap:wrap;
  padding:10px;
}

.menu-item {
  padding:.5%;
 border:none;
 text-align: center;
 cursor:pointer;
 min-width:230px;
 text-decoration: underline;
}

.menu-item:hover{
  color:var(--main-color);
}

.header-top{
text-align: center;
}

/* ========== Products ================ */

.list-grid .my-header{
  max-width:100%;
  background-color:#f2f2f2;
}
.my-header h1{
  padding:20px;
  margin:0;
}

.flex-group{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-evenly;
}

.flex-item{
  text-align:center;
  margin-bottom:1em;
  margin-inline:10px;
  max-width:300px;
}

.products .flex-item{
  max-width:300px;
  cursor:pointer;
  border:1px solid #000;
}

.products .flex-item .product-content:hover{
background-color:var(--main-color);

}
.flex-title{
  color:var(--main-color);
}
.flex-image img{
  max-height:75px;
  max-width:75px;
  margin:0 auto;
  text-align: center;
}
.flex-image{
  min-height:75px;
}

.products .flex-item img{
max-width:300px;
height:200px;
}
.product-content{
  display:block;
padding:4%;
background-color:#000;
color:#fff;
text-align:left;
}

.product-content:hover{
  color:#fff;
}

.product-content:focus{
  color:#fff;

}

.flex-item p{
font-size:.8rem;
flex-grow:2;
}

.doc-link{
margin-top:auto;
justify-self: flex-end;
}

.right{
  padding-left:10%;
}

/* =========== Modals ================ */
.modal-box{
  background-color:#fff;
  width:100%;
  height:100%;
  display:block;
  color: #57727A;
  font-size:clamp(16px, 1.5vw, 38px);
  font-family: 'Cinzel Decorative', cursive;
}

.modal-body{
  background-image: linear-gradient(rgba(255,255,255,.95) 0%, rgba(255,255,255,.95) 100%), url('./imageserver/Reusable/mcelroy-metal23/logo.png');
  background-repeat: no-repeat;
  background-size:50%;
  background-position:85%;
}

.modal-flex-item{
  align-self: center;
}

.modal-header{
  text-align: center;
}

.my-modal-content{
  max-width:550px;
}

.modal-dialog{
  max-width:75%;
  width:75%;
}

.specs-group{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.features-title{
  font-weight:700;
}

.modal-flex-group{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding-inline:20px;
}

.modal-flex-item img{
  max-width:650px;
}

.doc{
  color:var(--main-color);
}
.doc:hover{
  text-decoration: none;
}
.doc img{
  max-width:15px;
}
/* ================= Media Queries ================== */

@media only screen and (max-width:1400px){
  .visualizer-grid{
    display:block;
  }
  .my-hr{
    margin:10px auto;
}
  .visualizer-content{
    text-align: center;
    max-width:100%;
  }
}

@media only screen and (max-width:1200px){
  .modal-flex-group{
    flex-wrap:wrap;
  }
  .my-modal-content{
    max-width:100%;
  }
  .specs-grid{
    flex-wrap:wrap;
  }
}

@media only screen and (max-width: 992px) {
  .my-grid{
      display:block;
      text-align: center;
  }

  .specs-group{
    flex-wrap:wrap;
  }

  .right{
    padding-left:0;
  }

  .grid-content{
    padding:2rem;
  }
  #colors-header{
      grid-row:2/3;
  }
 
  .my-container{
      text-align: center;
  }
  .grid-right{
      height:35vh;
  }
}

@media screen and (max-width:768px) {
  .hero-content{
    background-color: var(--main-color);
    max-width:100%;
    min-height:0;
    text-align: center;
    color:#fff;
  }
  .list-grid{
    display:block;
  }
 
  .menu-item {
   padding:.5%;
  border:none;
  text-align: center;
  display:inline-block;
 }
 .menu-item h2{
  font-size:24px;
 }
 .btn{
  display:block;
}
#hero-content{
 text-align: center;
}
.pic{
 float:inherit;
}
#logo{
 max-width:100px;
}
}



@media screen and (max-width:300px){
  .flex-item {
    width:100%;
    height:100%;
  }
  .flex-item img{
    max-width:100%;
    height:100%;
  }
  .product-content{
    height:100%;
  }
  .tall{
    height:100%;
  }
}