.top{  background: white; }
.background{ display:none; }

#container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

h1#projectTitles {
    color: rgb(128, 0, 0);
    text-shadow: none;
    font-family: Malgun Gothic;
    font-weight:bold;
    margin: 16px 0;
    padding: 0;
    line-height: 1em;
}

#middle, .subBackground {
    display: grid;
    align-items:center;
    text-align: center;
    vertical-align: middle;
    line-height: 2;
    float: left;
   height: calc(100vh - 165px);
    margin: 0;
  
}
.table{ color: rgb(128,0,0); }

.subBackground { position: absolute; float:none;  width: 100%; }

#background{
    z-index: 1;
    max-height: 680px;
    text-align: center;
}

.marketSector { display: inline-block;
    overflow-wrap: break-word;
    width: 95%;
    margin: 0 auto;
} /*padding: 0 1em; }*/

.carousel_one, .carousel_two{
    box-sizing: border-box;
    padding: 0 ;
}

.slick-slider {  margin-bottom: 0; }

button {
    font-size: 14px;
    display: inline;
    padding: 3px 6px;
    border: 2px solid #ccc;
    background: #fff;
    border-radius: 5px;
    outline: none;
    z-index: 6;
}
button:hover {
    border: 2px solid #888;
    background: #ffe;
    cursor: pointer;
}

#subCategoryName{
    padding: 0;
     border-top: solid  rgb(128, 0, 0);
     border-bottom: solid  rgb(128, 0, 0);
    font-weight: bold;
    color: rgb(128, 0, 0);
    text-align: center;
    font-family: Malgun Gothic;
}

/*#gridImage*/
.gridImage{
    display: inline-block;
    
    /*height: 25vh;*/
    position: relative;
    z-index: 999;
    box-sizing: border-box;
    width: 100%;
}

/*#gridImage img*/
.gridImage img {
	display:block;
    box-shadow:6px 12px 12px 0 rgba(16, 16, 16, 0.6);
	overflow: auto;
    margin: 0 auto;
    /*height: auto;*/
    z-index: 3;
}

.textbox{
	opacity: 1;
	color: white;
    width: 100%;
    margin: 0 auto;
	position: absolute;
	bottom: 10%;
    background-color: rgba(23,56,157,.9);
    line-height: normal;
    padding: 8px;
    z-index:4;
}

.textbox > span{ font-size: 1em; }

.imageHolder {
    width: 90%;
    height: 28vh;
    max-height: 300px;
}

    /*#gridImage img:hover*/
.gridImage img:hover {
    opacity: .9;
    z-index: 3;
  -webkit-transition: .3s ease-in-out;
    transition: ease-in .3s all;
    /*transition: .3s ease-in-out;*/
  -ms-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  -o-transform: scale(1.02);
  transform: scale(1.02);	

  -webkit-filter: grayscale(.2);
  -moz-filter: grayscale(.2);
  -ms-filter: grayscale(.2);
  -o-filter: grayscale(.2);
    filter: grayscale(.2);
    filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

.gridImage img:hover ~ .textbox {
    background-color: rgba(128, 0, 0, .9);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: .2s ease-in-out;
    transition: ease-in .2s all;
}

.dots-container{ display: none;}
#prev_Arrow{ padding-top: 3vh}
#prev_Arrow, #next_Arrow { text-align: center; }

#prev_Arrow img:hover, #next_Arrow img:hover { opacity: .5; }

#prev_Arrow img, #next_Arrow img {
    width: 20px;
    height: 25px;
    cursor: pointer;
    transform: rotate(90deg);
}

@media screen and (max-width: 600px){
    #middle{ position:relative; padding: 0; width: 100%; height: auto;}

    .titleProject{
        top: 0;
        width: 100%;
        height: auto !important;
    } 
    h1#projectTitles{ font-size: 2em; }
    #subCategoryName{ font-size: 1.1em; }
}

@media screen and (min-width: 600px) {
    #middle{ padding: 0; }
    h1#projectTitles{ font-size: 3vw; }
    #subCategoryName{ font-size: 1.6em; }
}
@media screen and (min-width: 992px) {
    #container{ width: 80%; }
}
@media screen and (min-width: 1245px) {
}
@media screen and (min-width: 1536px) {
    .carousel_one, .carousel_two { padding: 0; }
    .textbox > span{ font-size: 1.1em;}
    #container{ width: 65%;}
    /*h1#projectTitles{ font-size: 3em; }*/
    h1.specialProjectsTitle{ font-size: 2.6em }
    
    #subCategoryName{ font-size:2.1em; }
    
    p.specialProjectsFeature{ font-size: 2em !important; }
}

@media screen and (min-width: 2064px){
    #container{ width: 55%; }
}

@media screen and (max-height: 600px){
    #background{ max-height: 60vh; }   
}
@media screen and (min-height: 600px){
    #background{  max-height: 60vh; }
}

@media screen and (min-height: 937px) {
    #prev_Arrow {  padding-top: 11vh; }
}

@media screan and (min-height: 1000px) {
}