@import url('https://fonts.googleapis.com/css2');
@import url('colorcss.css');

body {
    overflow-x: hidden;
    font-family: 'Montserrat',Arial, Helvetica, sans-serif;
    color: var(--DimGray);
}
/*==== Golbal ====*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
/* ===== TOP BAR HEADER =====*/
.top-bar{
    background: var(--FireBrick);
    height: 2.8vw;
    padding: .5vw 0;
}
.top-bar a {
    color: var(--White);
    text-decoration: none;
    font-size: 1.0vw;
}
.top-bar{ 
    color:var(--White);
    font-size:1.0vw;
}

.navbar {
    font-size: 1.15vw;
    font-weight: 600;
    letter-spacing: .1vw;
    z-index:1000;
}
.nav-itvw {
    padding: 0.5vw;
}

#carousel {
    box-shadow: 0 1vw 1vw rgba(0,0,0,1);
}
.carousel-inner {
    max-height: 38vw!important;
}
.carousel-itvw-next,
.carousel-itvw-prev,
.carousel-itvw-active {
    transition: transform 1.2s ease;
}

/*--- carousel-caption---*/
.carousel-caption {
    position: absolute;
    top:44%;
    transform:translateY(-50%);
    text-transform: uppercase;    
}

.carousel-caption h1{
    font-size: 3.8vw;   
    text-shadow: .1vw .1vw .3vw rgba(0,0,0,1);
}
.border-primary {
    border-top: .2vw solid var(--Maroon)!important;
}
.carousel-caption h3 {
    font-size: 1.5vw;   
    text-shadow: .1vw .1vw .2vw rgba(0,0,0,1);
}

.btn-lg {
    border-radius: 0;
    text-transform: uppercase;
    font-size: 1vw;
    border-width: medium;
}
.bg-custom{
    background-color: rgba(0, 0, 0, .4);
    color: var(--White);
    border-radius: 1vw;
    border-width: medium;
}
.btn-danger{
    background-color: var(--Maroon);
    border: .1vw solid var(--Maroon);
}

.btn-primary {
    background-color: var(--DodgerBlue);
    border: .1vw solid var(--DodgerBlue);
}

.btn-primary:hover,
.btn-primary:focus{
    background-color: var(--SkyBlue)!important;
    border: .1vw solid var(--SkyBlue)!important;
}
.col-8 h1 {
    font-size: 1.8vw;
    font-weight: 600;
    color: var(--White);
}
.btn-circle.btn-lg {
  width: 25px;
  height: 25px;
  padding: 5px 8px;
  font-size: .9vw;
  line-height: 1.33;
  border-radius: 25px;
  background-color: aliceblue;
  color: var(--Maroon);
}

.fixed {
    background-image: url('../images/bg-back.jpg');
}
.fixed-fixed-background {
    padding: 10vw 0;
}
.btn-tab {
    background-color: var(--stock);
}
.tooltip {
  display: inline;
  position: relative;
  top: 50px;
}
.tooltip:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
.tooltip:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}
p.big {
  line-height: 1.8;
  font-weight: 800;
  padding: 0rem;
}
.bigpad {
     height:4rem;
}
/* container */
.responsive-two-column-grid {
    display:block;
}

/* columns */
.responsive-two-column-grid > * {
    padding:1rem;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .responsive-two-column-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

footer {    
    background-color: #C82216;
    padding: 0rem 0rem 0rem;
}
footer img {
    height: 10rem;
    margin: 1.5rem auto;
}
footer p, footer a,
 {
    color: var(-White);
    text-decoration: none;
}
.footerc {
    color:black;
}
.textsmall {
    font-size: 2.8rem;
}
.stock{
    background-image: url('../images/bg-footer.jpg');
    background-color: var(--brow);
}
.stock a{
color: var(-OrangeRed);
}

ul.social {
    list-style-type: none;
    display: flex;
    max-width : 16rem;
    margin: 0 auto;
}
ul.social li {
    margin: 0 auto;
    font-size: 2.5rem;
}
footer i {
    font-size: 5rem;
    color:var(--White);
}
footer i:hover {
    font-size: 2.3rem;
}

/* Devices under 1199px (x1) */
@media (max-width: 1199.98px){

}

/* Devices under 768px (md) */
@media (max-width: 767.98px) {

}

/* -- Boostrap Mobile Gutter Fix --*/
.row, .container-fluid {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
/* -- Fixed background -- Image--*/
.fixed-background {
    position: relative;
    width: 100%;
    z-index: 1000!important;
}
.fixed-wrap {
    clip:rect(0, auto, auto, 0);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999 !important;
}
.fixed {
    z-index: -999!important;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position:  center center;
    -webkite-transform : translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
.ctd {
    color: var(--OrangeRed);
    font-weight: 300;
    }
.btn-info1 a{
    background: green;
}
.menu-item {
    background-color: lightgray;
}
.button1 {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.site-navigation {
  display: block;
  font-family: 'Titillium Web', sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin: 10px;
}

.site-navigation ul {
  background: var(--white);
  list-style: none;
  margin: 0;
  padding-left: 0;
  border-right: 1 solid red;
}

.site-navigation li {
    background: var(--white);
  color: #000;
  display: block;
  float: left;
  margin: 0 2px 0 0;
  padding: 12px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}
  
.site-navigation li a {
  color: brown;
  text-decoration: none;
  display: block;
}

.site-navigation li:hover {
  @include transition(background, 0.2s);
  
  cursor: pointer;
}

.site-navigation ul li ul {
  background: white;
  visibility: hidden;
  float: left;
  min-width: 250px;
  position: absolute;
  transition: visibility 0.65s ease-in;
  margin-top:12px;
  left: 0;
  z-index: 999;
  border-bottom: 1 solid #000;
}

.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
   visibility: visible;
}

.site-navigation ul li ul li {
  clear: both;
  padding: 5px 0 5px 18px;
  width: 100%;
  border-bottom: 1 solid #000;
}

.site-navigation ul li ul li:hover {
  background: #74b7e4;
}
.textcolor {
    color : var(--FireBrick);
}
.bgbacklogo {
    background-image: url("../images/logogray.jpg");
    background-repeat:no-repeat;
    text-align: center;
}
.menu-item {
    border-right: 1 solid lightgray ;
}

.carousel-inner > .carousel-item > img {
  width:640px;
  height:360px;
}
.list-group-item a {
    text-align: left;
    color:black;
    background-color: lightgray;
}