body{
    color: white;
}

.dropdown-item:active{
    color: #000;
    background-color: transparent;
}

.company-logo{
    height: 10ex;
    width: 10ex;
}

.h-95{
    height: 100%;
}
.carousel{ 
    height: calc(100vh - 100px);
}

.carousel-inner,.carousel-item{ 
    height: 100%;
}

.navbar-brand{
    padding-top: 0%;
    padding-bottom: 0%;
}

.navbar{
    padding-top: 0%;
    padding-bottom: 0%;
    padding-left: 1ex;
}
/*
* TODO: Add padding variable to share .bg-site-theme gradient value with padding
*/
.navbar-nav{
    padding-left: min(25%);
}

/* 
* TODO: add browser support to gradient
*/
.bg-site-theme{
  background-color: rgb(0, 0, 0); /* For browsers that do not support gradients */
  background-image: linear-gradient(75deg,black 25%,#855f2d 25%);
}
@media only screen and (max-width: 992px) {
    .bg-site-theme{
        background-color: rgb(0, 0, 0); /* For browsers that do not support gradients */
        background-image: linear-gradient(45deg,black 250px,#855f2d 250px);
      }
    
      
}

/* 
* TODO: replace display tag with trigger
*/
@media only screen and (min-width: 992px) {
    #navbarSupportedContent{
        display: none;
        /* visibility: hidden; */
    }     
}

.navbar-theme{
    font-size: 1.2vw;
    font-size: max(1.6rem)
}

.navbar-theme .nav-item a.nav-link{
    font-weight: 600;
    color: white;
    padding-right: 4.2vw;
}

.navbar-dark-theme .nav-item a.nav-link{
    font-weight: 600;
    color: white;

}


.navbar-theme li:hover{
    
}


#navbarSupportedContent{
    background-color: #855f2d;
}

.bg-pblue{
    background-color: #583401;
}

.d-tilt{
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -o-transform: skew(45deg);
    /* clip-path: polygon(0% 0%, 45% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0%, 100% 45, 50% 50%, 0% 100%); */
}

/* #ink-carousel{
    background-image: url("assets/mill_2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
} */

.carousel-img{
    /* transform: translateX(-10%); */
    width: 120%;  
    object-fit: cover; 
    object-position: 50% 40%;
}
/*
#epoxy-carousel{
    background-image: url("assets/floor.jpg");
    background-size: cover;
}
*/
.carousel-bg-blue{
    position: absolute;
    left:48%;
    width: 100%;
	height: 100%;
	transform: skew(10deg);
	background: #583401;
    z-index: 1;
}

.carousel-text{
    z-index: 2;
}

.img-h-100{
    height: 100%;
}



.carousel-scrollbar::-webkit-scrollbar
{
	width: 12px;
	background-color: #583401;
}

.carousel-scrollbar::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

.carousel-navigator{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: auto;
    margin-bottom: 1rem;
    margin-left: auto;
    list-style: none;
}

.carousel-button{
    width:10em;
    transform: skew(20deg);
	background: #555;
}

.carousel-button:active {

    cursor: pointer;
    background-color: #fff;
    opacity: .5;
    transition: opacity .6s ease;
}

.carousel-button:focus {

    cursor: pointer;
    background-color: #fff;
    opacity: .5;
    
}

.carousel-button .active{

    cursor: pointer;
    background-color: #fff;
    opacity: .5;
    
}

.carousel-button [data-bs-target] {

    cursor: pointer;
    background-color: #fff;
    opacity: .5;
    
}


/* thumnail snipet*/
.wrap-thin {
	margin: 0 auto;
}
.demo-thin {
	margin-top: 15px;
}
a {
	text-decoration: none;
}
/* --- Container configuration ---------------------------------------------------------- */
.viewport {
	/*border: 3px solid #eee;*/
	float: left;
	height: 20vh;
	margin: 0 9px 9px 0;
	overflow: hidden;
	position: relative;
	width: 10vw;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
           class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
	margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
	display: block;
	position: relative;
}
.viewport a img {
	height: 332px;
	left: -20px;
	position: relative;
	top: -20px;
	width: 500px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
	display: none;
	font-size: 1.0em;
	font-weight: bold;
	height: 100%;
	padding-top: 120px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 100%;
	z-index: 100;
}
.viewport a span em {
	display: block;
	font-size: 0.45em;
	font-weight: normal;
}
/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
	background-color: rgba(15, 15, 15, 0.6);
	color: #fff;
	text-shadow: #000 0px 0px 20px;
}
.dark-background em {
	color: #ccc;
}

/*end of snippet*/



.btn {display: inline-block;  margin-right: 20px; letter-spacing: 2px; border:1px solid transparent }
.btn-round { border-radius:4px !important}
.btn i { margin-right:5px}
.btn.btn-large i { font-size: 24px;}

.button { margin-top:30px; margin-bottom: 30px}
.btn.btn-large { font-size: 1.0vw; padding: 18px 35px;}
.btn.btn-medium { font-size: 0.8vw; padding: 10px 22px;}
.btn.btn-small { font-size: 0.6vw; padding: 2px 14px; letter-spacing:1px}
.btn.btn-very-small {font-size: 9px; padding: 1px 12px; letter-spacing:1px}

.light-button { border:2px solid #000; display: inline-block; padding: 8px 20px 9px; font-size: 12px; color:#000; background-color: transparent;   }
.light-button:hover { background-color: #000; border: 2px solid #000; color:#fff}
.light-button i { color: #000}
.light-button:hover i {color:#fff}

.light-button-dark { border:2px solid #000; display: inline-block; padding: 8px 20px 9px; font-size: 0.7vw; color:#fff; background-color: #000;  }
.light-button-dark:hover { font-weight:600; background-color: transparent; border: 2px solid #000; color:#000}
.light-button-dark i { color: #fff}
.light-button-dark:hover i {color:#000}



.dropbtn {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: #f1f1f1;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd;}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {background-color: #3e8e41;}

  .dropdown-menu{
    background-color: #855f2d;
    border-color: transparent;
  }

  .dropdown-item{
    color: #f1f1f1;
  }

  .dropdown-item{
    color: #f1f1f1;
    font-size: 1.0vw;
    font-size: max(1.2rem);
  }

  .dropdown-item:hover{
    background-color: #583401;
    color: #f1f1f1;
  }

/* color for sub heading #cd9b00*/
  .grade-jumbotron{
    background-color: #583401;
    height: 100vh;
  }

  .nav-jumbotron{
    height: calc(100vh - 100px);
  }





  body{
    background: #F4F7FD;
    
}


.grade-card{
    width: 80vw;
    margin: auto;
}

.grade-card .card-header{
    background-color:#855f2d;
    height: 100%;
    margin:auto;
}


.grade-card .card-body{
    padding: 0%;
    color: #000;
    padding-top: 20px;
    padding-bottom: 20px;
}


.jumbotron-3{
    height:40vh;
    background-color:#855f2d;
}

.half-parent-size{
    height: 40%;
}

#reactor-about-us-img{
    width:40vw;
}

.about-us-body{
    color:#000;
    width:40vw;
}

.contact-body{
    margin-top: 30px;
    background-color: #f1f1f1;
    padding-left:10vw;
    padding-right:10vw;
    padding-top:10vh;
    padding-bottom:10vh;
    margin-right: 0px;
    margin-left: 0px;
}

.contact-header{
    background-color: #855f2d
}

.map-view{
    min-height: 300px;
}