/*GENERAL*/
.innerBlock { padding: 3em 0; margin: 0 auto; max-width: 1000px;}
.clearCols { height:0; clear:both;}

/*SPLASH*/
.FullCoverBackgroundImage {background: url(/SiteData/Images/2022-Website/Features-Pages/Order-Management/heroSalesOrderManagement.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  height: 650px; margin-top: -38px;}
.BillboardTextBlock2 {color: #000000; width: 90%; margin-top: 200px; margin-left: 3em; background-color: rgba(0, 0, 0, 0.6); padding: 20px; text-align: center;}
.FullCoverBackgroundImage h1 {color: #FFFFFF; font-size: 32pt;}
.FullCoverBackgroundImage h2 {color: #FFFFFF; font-size: 18pt;}

/*BLUE BLOCK*/
.blueBlock {background: #00b0f0; color: white; text-align: center; padding: 50px;}
.featuresLabel {font-weight: 1000; font-size: 18pt; color: #FFBC00;}
.blueBlock h3 {font-size: 26pt; color: white; margin-top: 10px;}
.blueBlock h4 {font-size: 18pt; color: white;}

/*FEATURE BLOCK*/
.feature {width: 50%; float: left; margin: 10px 0; padding: 0 10px; height: 155px;}
.feature img {float: left; width: 20%; max-width: 100px;}
.feature p {float: left; width: 70%; padding: 0 5%; font-size: 14pt; margin-top: 0;}

/*EXPANDING PANEL*/
.accordion {
  background-color: #d1d1d1!important;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 16pt;
  transition: 0.4s;
  }

.active, .accordion:hover {
  background-color: #FFFFFF;
}

.accordion:after {
  content: '▲';
  color: #777;
  float: right;
  font-size: 16pt
  
}

.active:after {
  content: '▼';
  transition-duration: 0.5s ;
  }

.panel {
  padding: 0px 10px;
  max-height: 0;
  border-left: 1px solid #d1d1d1;
  border-right: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
  overflow: hidden;
  transition: max-height 0.8s ease-out;
}

.panel .feature:nth-of-type(1), .panel .feature:nth-of-type(2) {margin-top: 30px;}

@media only screen and (max-width:1022px) {
.FullCoverBackgroundImage {background: #244459; margin-top: -9px;  height: auto;}
.BillboardTextBlock2 {color: #000000; width: 90%; margin: 50px auto; background-color: rgba(0, 0, 0, 0);}
.blueBlock {padding: 20px;}

  .feature {width: 100%; height: auto; padding: 0 20px;} 
}