/* GLOBAL STYLES
-------------------------------------------------- */
/* Padd

ing below the footer and lighter body text */

@import url('https://fonts.googleapis.com/css?family=Prompt:300,400,500');


html {overflow-x: hidden;}

body {
  /*padding-top: 3rem;
  padding-bottom: 3rem;*/
  color: #5a5a5a;
  font-family: "Roboto", Helvetica Neue,Arial,sans-serif,Prompt !important;
  overflow-x: hidden;

}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 2rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 40rem;
  background-color: #f5cc59;
}


@media screen and (max-height:1300px){
  .carousel-item > img {
  height: 40rem !important;
  min-height: auto !important;
  object-position: center !important;
  object-fit: contain;
  }


  @media screen and (max-height:768px){

    .carousel-item > img {

        left: -50% !important;
        position: absolute;


    }

  }

}

.carousel-item > img {
     
    top: 0;
    left: 0;
    min-height: 36rem !important;
    min-width: 100%;
    width: auto !Important;
     height: auto;
    opacity:.9;
    object-fit: cover;
}

  /*new*/

@media screen and (min-width:1150px){


.carousel-caption h1 { font-size: 5em;}

}


  @media screen and (max-width:768px){
    .carousel-item > img {min-height: none !important;}

    .carousel-item {
      height: 29rem;
    }
    .carousel-caption { right: 5%; left: 5%;}
  }
 
 
@media screen and (max-width:400px){
body html { overflow-x: hidden !important;}
.carousel {
  margin-bottom: 0rem;
}
.h1, h1 {
  font-size: 2.0rem;
}

}



/*new*/

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }

  
      .gold-color  {
        background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    }
}

.clear-both { clear: both;}
.navbar-nav { text-transform: uppercase;}
@media (min-width: 768px){
  .navbar.navbar-expand-md { display: block !important;}
  .navbar-expand-md .navbar-collapse { text-align: center !important; display: block !important;}
  .navbar-expand-md .navbar-nav { display: block;}
  .navbar-expand-md .navbar-nav .nav-item { display: inline-block;}
  .navbar-brand img {   width: 215px; height: 116px;}
}

@media (max-width: 768px){ 

  .navbar-brand img{   width: 219px; height:50px;}

}


.bg-dark { background-color:#0C9A0F!important; background-image: url(../image/bg-green.jpg);background-position:40% 45%; background-repeat: no-repeat;} 


@media (max-width: 768px){ 
  .bg-dark { background-size:auto;}
}

@media (max-width:400px){ 
  .bg-dark { background-image:none;}
}



.navbar-toggler { background-color: rgba(0,0,0,.15);
  padding:  0.3rem;
  border-radius: 50rem;

}

/*color */

.green-col,.text-green  { color: #0C9A0F;}
.text-yellow { color:#FBF295;}
.text-gold {color:#FEDB37}
/*color */
.font-12px { font-size: 12px;line-height: 1;}
.font-13px { font-size: 13px;line-height: 1;}
.font-15x { font-size: 1.5rem;line-height: 1;}
.font-2x { font-size: 2rem;line-height: 1;}
.font-3x { font-size: 3rem;line-height: 1;}


.font-4x { font-size: 4rem;line-height: 1;}



/*typicon*/


strong { font-weight: 500;}

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

      @media screen and  (max-width:768px){
                .font-4x {
                  font-size: 2rem;
                  
                }
                .font-3x {
                  font-size: 1.5rem;
                  
              }
      }

/*background*/
.bg-con { background-size:cover; background-position:center; background-repeat: no-repeat; }

.bg-green { background-color: #0C9A0F;}

.bgleaf1 { background-image: url(../image/bg1st.jpg)}

.bgleaf2 { background-image: url(../image/bg2nd.jpg)}

.bgleaf3-l { background-image: url(../image/bg3-a.png); background-position-x:0vw ; background-size: 300px; overflow: hidden; background-repeat: no-repeat; }
.bgleaf3-r { background-image: url(../image/bg3-b.png); background-position-x:80vw ; background-size: 400px; overflow: hidden; background-repeat: no-repeat; }


.bghome { background-image: url(../image/pic2b.jpg)}

.bghome2 { background-image: url(../image/pic3b.jpg)}

.bg-gold { background-image: url(../image/goldbg.jpg)} 


@media screen and  (max-width:768px){

  .bgleaf3-l {background-position-x:-30vw ;}

}
@media screen and (max-width: 400px){
.bgleaf3-l {
    background-position-x: -45vw;
}
}
/* spacing */

.py-6 { padding-top: 5rem; padding-bottom: 5rem;}

.py-7 { padding-top: 7rem; padding-bottom: 7rem;}


.pb-20 { padding-bottom:20px;}
@media screen and  (max-width:768px){

    .p-5 { padding: 15px !important;}
    .py-6 { padding-top: 3rem; padding-bottom: 3rem;}

}


/*elelment*/
.min-600 { min-width: 600px; margin-left:auto; margin-right:auto;  }
.max-600 { max-width: 600px; margin-left:auto; margin-right:auto;  }
.max-900 { max-width: 900px; margin-left:auto; margin-right:auto;  }
.max-1000 { max-width: 1000px; margin-left:auto; margin-right:auto;   }

@media screen and (max-width:1000px){
  .max-1000  {max-width: 100% !important;}

}
@media screen and (max-width:768px){

  .min-600 { min-width:100% !important;  }

}
/* about us*/

.year-ul  { padding: 0 ; margin: 0; display: flex; justify-content: space-between; margin-top: 40px;}

.year-ul:before { content: ""; height: 1px; background: #ccc; width:84%; position: absolute; left: 8%; top: 51px; }

.year-ul li { list-style: none; text-align: center;position: relative; cursor: pointer;}


.year-ul li a { padding: 8px; background: #0C9A0F;
   border-radius:100rem; 
  display: inline-block;   z-index: 9;
  position: absolute;
  border: 4px solid white;
  left: 37%; }

.year-ul li.active a { background: #ffe259;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }

  .bg-year-2{ background-image:url(../image/year/y1a.jpg); background-color:#F1F2E4; background-size: 600px; background-position:top right ; background-repeat: no-repeat; } 
  .bg-year-1 { background-image:url(../image/year/y2a.jpg); background-color:#F1F2E4; background-size: 600px; background-position:top left ; background-repeat: no-repeat; } 
  .bg-year-3 { background-image:url(../image/year/y3.jpg) }
  .bg-year-4 { background-image:url(../image/year/y4.jpg) }
  .bg-year-5 { background-image:url(../image/year/y5.jpg) }
   

  .year-con { min-height: 400px;}


  .year-con  .bg-con { position: absolute ; width: 100%; display: none; }

  .year-con  .bg-con img { margin-bottom: 20px;}

    @media screen and ( max-width:768px){


      .year-con  .bg-con { position: relative ; }
      .bg-year-2,.bg-year-1 { background-image: none; }

    }



  /* animation */

  @-webkit-keyframes opa {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes opa {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-o-keyframes opa {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes opa {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }


  .year-con  .bg-con {
    -webkit-animation: opa 1s ease-in-out ; /* Safari 4+ */
    -moz-animation:    opa 1s  ease-in-out; /* Fx 5+ */
    -o-animation:      opa 1s  ease-in-out; /* Opera 12+ */
    animation:         opa 1s  ease-in-out; /* IE 10+, Fx 29+ */
  }

  /* gallery */

  .img-gallery{ object-fit: cover; width: 100%; height: auto; margin-left: 0; margin-right: 0; }

  #hometype .slide-content {margin-left: 0 !important; margin-right: 0!important; width: 100% !important; }

  .blueimp-gallery>.next, .blueimp-gallery>.prev { color: #FFF;}

  /*.blueimp-gallery { padding-bottom: 120px;}*/

@media screen and (min-width:1000px){

  body .blueimp-gallery > .indicator > li {
    display: inline-block;
    width: 5.5rem !important;
    height: 4rem !important;
    margin: 6px 3px 0 3px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid transparent;
    background: #ccc;
    background: rgba(255, 255, 255, 0.25) center no-repeat;
    border-radius: 5px;
    box-shadow: 0 0 2px #000;
    opacity: 0.75  ;
    cursor: pointer;
    background-size: cover !important;
}

}
body .blueimp-gallery>.next,body .blueimp-gallery>.prev { color:#FFF;}
.blueimp-gallery>.close:hover, .blueimp-gallery>.next:hover, .blueimp-gallery>.play-pause:hover, .blueimp-gallery>.prev:hover, .blueimp-gallery>.title:hover {
  color: #fff!important;
  opacity: 1;
}
body .blueimp-gallery>.close {
    padding: 15px;
    right: 30px;
    left: auto;
    margin: -15px;
    font-size: 45px;
    text-decoration: none;
    cursor: pointer;
}


.indicator { opacity: 0; transition: 1s ease-in-out;}

.indicator:hover { opacity:1;}

.fade.active { opacity: 1;}

.nav-tabs a.nav-link {
  background: #F1F2F2; color: #666; }

  .nav-tabs { text-transform: uppercase;}

  .opacity-50 { opacity: .5;}

.bgleaf3-r  img ,.bgleaf3-r .col-sm-6 p { float: left ; display: inline-block}

.bgleaf3-r  img { margin-right: 10px;}

.bgleaf3-r .col-sm-12 p  { font-size: 14px; line-height: 1.2;}
  /*contact*/

  .ul-contact { padding: 10px 0;}

  .ul-contact li { list-style-image: url('../image/gold.png '); margin-bottom: 10px; margin-left: 20px ; padding-left: 10px;}

  .bg-contact { background-image: url(../image/contactBG.jpg); background-position: left bottom ; background-size: 500px;}

  .bg-contact input { opacity: .8;}

  @media screen and (max-width:1024px){

    .bg-contact {  background-position-x:-20vw }

  }

  @media screen and (max-width:768px){

    .bg-contact { background-image: none;}
    body .blueimp-gallery>.next,body .blueimp-gallery>.prev { background: transparent; border: none;}
    body .blueimp-gallery>.next { right: 0;}
    body .blueimp-gallery>.prev { left: 0;}

    .bgleaf3-r .col-sm-12 img  { width: 50px; }
    .bgleaf3-r .pt-4,.bgleaf3-r  .py-4 {
      padding-top: 1rem!important;
  }
  }

  

  .btn-primary {
    color: #fff;
    background-color: #0d9a0f;
    border-color: #0c710d;
}
.btn-primary:hover {
    color: #fff;
    background-color: #d4ad4c;
    border-color: #b7943e;
}
/*footer*/
footer { font-size:13px;}
footer a { color: #FFF;}
footer a:hover {color: #EEE; text-decoration-line: none;}

footer .fa ,.top-nav .fa{ border:1px solid #fff; border-radius: 100px; text-align: center; 
  padding: 5px 8px; margin-right:5px;}

.top-nav a { color: #FFF;}
  

  .nav-item a { cursor: pointer;}

 a:hover {text-decoration: none;}


  /* masthead */
/* sticky str */

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

.sticky .text-muted img {
  height: 50px;
}
.text-muted {
  font-size: 16px;
} 
.sticky  .text-muted span { display: none !important; }
.masthead.sticky  {    box-shadow: 0 0 8px rgba(0,0,0,.5); }
.show-sm  { display: none;}

.sticky .navbar-brand  {float: left;
 
  height: 60px;
  padding: 0;}

  .sticky .navbar-brand img {    height: 60px;}

@media screen and (min-width:768px){

   .masthead  {min-height:75px !important;} 
  .sticky .navbar-nav{
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;}
  }
/* sticky end */
  /* masthead */
/*cd-top*/
  .cd-top{border-radius:100px;display:inline-block;height:40px;width:40px;position:fixed;bottom:40px;right:10px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.05);box-shadow:0 0 10px rgba(0,0,0,.05);overflow:hidden;text-indent:100%;white-space:nowrap;background:rgba(12, 154, 15, 0.75) url(../image/cd-top-arrow.svg) no-repeat center 50%;visibility:hidden;opacity:0;-webkit-transition:opacity .3s 0s,visibility 0s .3s,background-color .3s 0s;transition:opacity .3s 0s,visibility 0s .3s,background-color .3s 0s}
  .cd-top.cd-top--show,.cd-top.cd-top--fade-out,.cd-top:hover{-webkit-transition:opacity .3s 0s,visibility 0s 0s,background-color .3s 0s;transition:opacity .3s 0s,visibility 0s 0s,background-color .3s 0s}
  .cd-top.cd-top--show{visibility:visible;opacity:1}
  .cd-top.cd-top--fade-out{opacity:.5}
  .cd-top:hover{background-color:rgb(12, 154, 15) ;opacity:1}
  
  @media only screen and (min-width:768px){
    .cd-top{right:20px;bottom:20px}
  }

    @media only screen and (min-width:1024px){
      .cd-top{height:60px;width:60px;right:30px;bottom:30px}
    }

    /* cd-top */


    @media (min-width: 576px)and(max-width:1200px) {
       footer .container {
          max-width: none !important;
      }
    }

     

@media screen and (max-width:400px){
.d-smm-none { display: none;}

}

.socialBox { position: fixed; bottom: 30px; left: 15px; opacity: 0.6; z-index: 9;}

.socialBox:hover { opacity: 1;}

.social-border {    border: 1px solid #0d9a0f;
  background: rgba(255,255,255,.5);
  display: block;
  border-radius: 200px;
  padding: 5px 8px;}

.social-border  i.fa {    font-size: 30px;}