@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

img {
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:'Quicksand', sans-serif;;
    font-weight: 400;
    font-size: 16px;  
    letter-spacing:1px;
    overflow-x: hidden;
    overflow-y: scroll  
}
 
button:focus {
    outline:none !important;
    box-shadow:none !important;
}

.button:focus {
    outline:none !important;
    box-shadow:none !important;
}

.hide{
    display:none !important;
}

.show{
    display:block !important;
}
/*
strong {
    text-transform:uppercase;
}
*/
a:Hover {
    text-decoration: none;
}

p{
    line-height: 2;
}

.hidden{
    display:none;
}

.soft-green{
    color:#c0d23c;
}

.soft-gray{
    color:#c1d4d1;
}


/** header **/


.main-header.fixed-bar{
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 77px;
    top: -20px;
    background:#ffffff9c;
    transition: 300ms;
    box-shadow: -9px -9px 2.2px rgba(0, 0, 0, 0.034), 
                0 6.7px 5.3px rgba(0, 0, 0, 0.048), 
                -3px -11px 10px rgba(0, 0, 0, 0.06), 
                -1px 0px 20px rgba(0, 0, 0, 0.072), 
                1px -9px 33.4px 0px rgba(0, 0, 0, 0.086), 
                0px 20px 20px 0px rgba(0, 0, 0, 0.12);
                
}

.fixed-bar {
    position: fixed;
    top: 0;
    left: 0;
    transition:300ms;
  }
  @keyframes smoothScroll {
      0% {
          transform: translateY(-40px);
      }
      100% {
          transform: translateY(0px);
      }
  }


.fixed-bar .header-menu.no-mobile {
    padding-top:10px;
    
}

.main-header.fixed-bar .header-logo .logo {
    top: -145px;
    position: absolute;
}

.header-menu.no-mobile {
    margin-top: 15px;
}

.main-header.fixed-bar .header-menu {
    background: none !important;
    margin-top: 25px;
}

.main-header.fixed-bar .header-logo {
    position: absolute;
    display:block;
    align-items:center;
    justify-content:center;        

}


.main-header.fixed-bar .header-logo .logo img {
    max-width: 71px;
    margin-top: 162px;
}

header.main-header {
    position: relative;
    z-index: 999;
}

.main-header .header-container ul {
    /*  margin-top:25px;   */
    list-style:none;
	padding-left: 25px;
}

.main-header .header-container ul  li a {
    color:#005030;    
    font-weight: 600;
}


.main-header .header-container .header-logo .logo img {
    border-radius:0 0 15px 15px;
    box-shadow: 5px 5px 5px 5px   rgba(207, 207, 207, 0.164);
}


.main-header .header-container ul.dropdown-content {
    margin-top:unset;
    padding:unset;
}


.main-header .header-container ul.normal-menu li:before{
    content:"";
    height:3px;
    width:0px;
    display:block;
    background:#85b546;
    position:relative;
    top:-15px;
    margin-left: auto;
    margin-right: auto;
    transition:300ms;

}

.main-header .header-container ul.normal-menu li:hover:before{
    content:"";
    height:3px;
    width:100%;
    display:block;
    background:#85b546;
    position:relative;
    top:-15px;
    margin-left: auto;
    margin-right: auto;
    transition:300ms;

}



li.lang-li {
    position: absolute;
    margin-left: 40px;
    right: 0;
    margin-right: 20px;
    top:0;
    background:#004e2f
}

li.lang-li .language {
    color: #9ac46b;
    z-index:999;
    padding-top:-40px;
    padding-left:3px;
    padding-right:3px;
    margin-top:20px;
    display:block;
}



.main-header .header-container ul li.lang-li a {
    color: #9ac46b;
    padding-left:3px;
    padding-right:3px;
    transition:300ms;
}

.main-header .header-container ul li.lang-li a:hover {
    color: #f6bf4c;
    padding-left:3px;
    padding-right:3px;
    transition:300ms;
}

.main-header.fixed-bar a.dropbtn.language {
    margin-top: 37px;
    display: block;
    position: relative;
}








/** header end **/


/*** leaf ***/

section.leaf {
    position: absolute;
    top: 300px;
    z-index: 9999;
}


/*** -leaf- ***/



/*** Slider ***/


.main-slider {
    margin: -150px 50px 50px 50px;
}

.no-js .owl-carousel, .owl-carousel.owl-loaded {
    display: block;
    
}



.main-slider .slider-item {
    height: 768px;
    background-size: cover;
    background-position: center;
    width: 100%;
}

.main-slider .slider-item .box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.main-slider .slider-item .box .title {
    font-size: 45px;
    color: #fff;
    font-weight: 400;
    position: relative;
    display: inline-block;
    transition: 2000ms;
    transform: translatex(-80px);
    opacity:0

}
.main-slider .slider-item .box .title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 135px;
    height: 4px;
    background-color: #a0c157;
    width: 0;
    transition: 4000ms;
    opacity: 0;

}

.main-slider .owl-item.active .slider-item .box .title:before {

    width: 300px;
    opacity: 1;
}

.main-slider .owl-item.active .slider-item .box .title {
    transform: translateX(0);        
    opacity: 1;
}

/*** -Slider- ***/


/*** About ***/

    section.main-about,
    section.main-product,
    section.main-comment,
    section.main-category,
    section.gallery-page {
        display:block;
        position:relative;
        text-align:center;
        justify-content:center;
        align-items:center;

    }

    section.main-about .title, 
    section.main-product .title,
    section.main-comment .title,
    section.main-category .title,
    section.gallery-page .title{
        color:#6e5d38;
        font-size:30px;    
        font-weight:600;
        margin:50px 0;
    }
    
    section.main-about .text,
    section.main-product .text {
        color:#017446;
        font-size:18px;
        font-weight:500
    }


    .about-button{
        margin:30px 0;
        background:#f4f9f3;
        width:200px;
        height:40px;
        border:1px solid #789d2b;
        border-radius:unset;
        color:#789d2b;
        text-align:center;
        justify-content:center;
        padding-top:5px;
        margin-left: calc(50% - 100px);
    }
    
    .about-button a{
        color:#789d2b;
        padding:unset;
        justify-content:center;
        text-align:center;
        font-size:14px;
        transition:300ms;
    }
    
    
    .about-button:after{
        content:"";
        height:40px;
        width:0;
        background-color:#fff;
        position:relative;
        top:-1px;
        left:-1px;
        justify-content:center;
        text-align:center;
        transition:300ms;
    }
    
    
    .about-button:hover:after{
        background-color:#789d2b;
        position:absolute;
        width:200px;
        z-index:999;
    }
    
    .about-button:hover,
    .about-button:hover a{
        color:#f4f9f3;
        position:relative;
        z-index:9999;
    }
    
 

    section.main-about .image {
        position:relative;
        margin-top:-350px;
        z-index:-9
    }

/*** -About- ***/



/*** Product ***/

section.main-product .icon{
    margin-top: 100px;
}

.main-product .product-box {
    padding: 20px;
    margin: 20px;
    /*
    box-shadow: 
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgb(0 0 0 / 5%),
      0 22.3px 17.9px rgb(0 0 0 / 1%),
      0 41.8px 33.4px rgba(0, 0, 0, 0.0086);
      */

    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.034), 
                6px 6px 10px rgba(0, 0, 0, 0.048), 
                6px 6px 10px 0px rgb(0 0 0 / 0.1%), 
                6px 6px 10px 0px rgb(0 0 0 / 1%), 
                6px 6px 10px 0px rgba(0, 0, 0, 0.0086);
    height:700px;
    text-align:center;
    margin: 20px 20px 70px 20px;
}

.product-box span {
    color:#473c24;
    font-size:23px;
    padding:0 56px;
    margin-top:20px;
    display:block;
}


.product-box span.small{
     color:#473c24;
     font-size:15px;
     top:-45px;
     display:block;
     position:relative;
     font-weight:500;
}  


    
.product-button{
    background:#f4f9f3;
    width:200px;
    height:40px;
    border:1px solid #789d2b;
    border-radius:unset;
    color:#789d2b;
    padding-top:5px;
    position:relative;
    margin-left: calc(50% - 100px);
}
        
.product-button a{
    color:#789d2b;
    padding:unset;
    font-size:14px;
    transition:300ms;    
}        
        
.product-button:after{
    content:"";
    height:0;
    width:200px;
    background-color:#fff;
    position:relative;
    bottom:-1px;
    left:-1px;
    justify-content:center;
    text-align:center;
    transition:500ms;
}
        
    
.product-button:hover:after{
    background-color:#789d2b;
    position:absolute;
    height:40px;
    z-index:999;
}
        
.product-button:hover,
.product-button:hover a{
    color:#f9f7f6;
    position:relative;
    z-index:9999;
}
     

.main-product .product-box:after{
    content:"";
    height:0;
    width:310px;
    background-color:#fff;
    position:relative;
    bottom:70px;
    left:20px;
    justify-content:center;
    text-align:center;
    transition:300ms;
}
        
    
.main-product .product-box:hover:after{
    background-color:#f4f9f3;
    border:1px solid #89b431;
    position:absolute;
    height:700px;
    z-index:-9;
}
     

button.owl-prev span{
    display: block;
    left: -15px;
    position: absolute;
    color:#979797;
    bottom:50%;
    font-size:70px;
    transition:300ms;
}

button.owl-next span{
    display: block;
    right: -15px;
    position: absolute;
    color:#979797;
    bottom:50%;
    font-size:70px;
    transition:300ms;
}

button.owl-next span:hover{
    right: -20px;
}

button.owl-prev span:hover{
    left: -20px;
}
 .owl-carousel .owl-nav.disabled {
    display: block;
}
.main-slider .owl-carousel .owl-nav.disabled {
    display: none !important;
}


.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #f8fbff;
}

.tab-content .ussage-table th {
    border: 1px solid #dee2e6;
    text-align: inherit;
    font-weight: 500;
    font-size: 14px;
    padding: 5px;
}






/*** -Product- ***/

/*** Comment ***/

.main-comment .item img {
    height: 150px;
    object-fit: contain;
    margin-bottom: -125px;
    display: block;
    text-align: center;
    align-items: center;
    margin-left: 10px;
    border-radius: 100%;
    /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); */
}
.comment-box {
    margin:70px;
    background:#fff;
    display:block;
    width:250px;
    height:350px
}

.comment-box .comment-text {
    padding: 80px 20px 20px 20px;
    font-size: 14px;
    min-height: 300px;
    color: #456101;
    font-weight: 600;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.comment-customer {
    font-size:25px;
    font-weight:800;
    color:#867146;
}

.item {
    margin-top: 50px;
}


.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
    background: #ffffff;


}

.owl-theme .owl-dots .owl-dot.active span:after,
 .owl-theme .owl-dots .owl-dot:hover span:after {
    content:"";
    margin-left:-6px;
    top:-5px;
    position:relative;
    widtH:20px;
    height:20px;
    display:block;
    border: 1px solid white;
    border-radius:100%;


}

.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin:0 10px;
    transition:300ms;
}

section.main-comment {
    margin-bottom: 100px;
}

/*** -Comment- ***/


/*** Contact ***/


section.page-image {
    position: relative;
    display: block;
    text-align: center;
    margin-top: -100px;
}


section.breadcrubs {
    list-style: none;
    color: #7a8f93;
    font-weight: 500;
    display: flex;
    align-items: center;
    position: relative;
    text-align: center;
    justify-content: center;
    padding:5px;
    }
section.breadcrubs a{
    color: #7a8f93;
}


.contact-text {
    display: block;
    position: relative;
    text-align: center;
    align-items: center;
    justify-content: center;
}


.contact-page .title {
    color: #6e5d38;
    font-size: 30px;
    font-weight: 600;
    margin: 50px 0;
}

.contact-page .icon {
    margin:70px
}


.contact-page .contact-list{
    margin-left: calc(50% - 277px);
    margin-top: 70px;
    margin-bottom: 30px;
    color: #8a9a9a;
    font-weight: 600;
}


.col-lg-3.footer-social.contact-social {
    margin-left: calc(50% - 110px);
    margin-bottom: 80px;
}

.col-lg-3.contact-social li a {
    color: #ffffff !important;
    transition: 300ms;
}


.col-lg-3.contact-social li{
    background:#e8e9ec !important;
    transition: 300ms;
}

.col-lg-3.contact-social li:hover{
    background:#89aca5 !important;
}


/*** -Contact- ***/



/*** +page+ ***/


.col-lg-12.home-banner-1 {
    background:#f1f3ed;
    margin-top:5px;
    height:325px
}

.col-lg-12.home-banner-2 {
    background:#eaf0ef;
    margin-top:5px;
    height:325px
}


.col-lg-12.home-banner-3 {
    background:#f3eded;
    margin-top:5px;
    margin-bottom:5px;
    height:325px
}

.page-banners img{
    height:300px;
    padding:30px;
    object-fit: contain;
}

.home-banner-1 span {
    color:#4a8c45;
    font-size:22px;
    font-weight:600;
    display:block;
    position:relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

}

.home-banner-2 span {
    color:#473c24;
    font-size:22px;
    font-weight:600;
    display:block;
    position:relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

}

.home-banner-3 span {
    color:#4a8c45;
    font-size:22px;
    font-weight:600;
    display:block;
    position:relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

}



/*** -page- ***/



/*** +comment+ ***/


.main-comment .icon,
.main-category .icon  {
    margin-top: 40px;
}



.main-comment .page-comment-box {
    background: #fff;
    padding: 20px;
    margin: 40px 20px;
    height: 250px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072);
    font-size: 15px;
    color: #029057;
    font-weight: 500;
    width: 100%;
    padding-left: 130px;
    padding-top: 40px;
    text-align: start;
    margin-left: -100px;
}



.main-comment .comment-image img{
    margin-left: 10px;
    position: relative;
    margin-top: 55px;
    height: 220px;
    width: 100%;
    object-fit: contain;
    z-index: 9;
}

span.surname {
    text-transform: uppercase;
}


.date {
    position: relative;
    display: block;
    top: -18px;
    /* padding-bottom: 0px; */
    font-size: 15px;
    color: #a3a3a3;
    font-weight: 300;
}


/*** -comment- ***/


/*** +category+ ***/


.main-product-slider{
    display: flex;
}

.item {
    width: 350px;
}

.main-category .product-box:after{
    content:"";
    height:0;
    width:320px;
    background-color:#fff;
    position:relative;
    bottom:20px;
    left:25px;
    justify-content:center;
    text-align:center;
    transition:300ms;
}
        
    
.main-category .product-box:hover:after{
    background-color:#f4f9f3;
    border:1px solid #89b431;
    position:absolute;
    height:700px;
    z-index:-9;
}


.main-category .product-box {
    padding: 20px;
    margin: 20px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgb(0 0 0 / 5%), 0 22.3px 17.9px rgb(0 0 0 / 1%), 0 41.8px 33.4px rgba(0, 0, 0, 0.086);
    height: 700px;
    text-align: center;
    margin: 20px 10px;
}


.product-title {
    display:block;
    position:relative;
    height:200px;
}

.main-category{
    margin-bottom:100px;
}


/*** -category- ***/



/*** +product+ ***/


.container.left {
    float: left;
    display: flex;
    /* align-items: start; */
    text-align: start;
    padding-left: 60px;
}

.product-text {
    padding: 50px 0;
}

.product-text hr {
    background:#e3b46f
}

.product-text .content{
    display:block;
    position:relative;
    text-align:start
}


.product-text .content strong {
    font-size: 35px;
    color: #635433;
}

span.small {
    font-size: 24px;
    color: #635433;
}


.product-text p {
    color: #3d8335;
    font-size: 15px;
    letter-spacing: 0.9px;
    font-weight: 600;
}


.product-text img {
    height:550px;
    object-fit:contain;
    position:absolute;
    display:block;
    top:-200px;
    left:100px
}


.product-tab {
    margin:80px 0;
    transition:300ms;
}

div#nav-tab {
    background: #02663d;
    color: #9bc369 !important;
    font-weight: 800;
    transition:300ms;
}

.nav-tabs .nav-item.show .nav-link
, .nav-tabs .nav-link.active {
    color:#fff;
    background:#9bc369;
    border-radius:unset;
    border: none;
    transition:300ms;
}

.product-tab .nav-link:hover {
    border: none;
    color:#fff;
    background:#9bc369;
    border-radius:unset;
}

.nav-link {
    color: #9bc369;
    transition:300ms;
}

div#nav-tabContent {
    border: 1px solid #9bc369;
    border-top: 2px solid #9bc369;
    top: -2px;
    display: block;
    position: relative;    
    padding: 25px;
}


img.product-gallery{
    width: 100%;
    height: 225px;
    object-fit: cover;
    transition:300ms
}

img.product-gallery:hover {
    filter:brightness(0.8);
    transform: scale(1.02);

}


img.product-registration {
    display: block;
    position: relative;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

.fancybox-container {
    z-index: 999999;
}



/*** -product- ***/



/*** +gallery+ **/


.gallery-header {
    margin:90px 0;
}

.gallery-header strong {
    text-align:start !important;
    display:block;
    font-size:30px;
    color: #635433;
}

.gallery-header .small{
    font-size: 24px;
    color: #635433;
    text-align:start;
    display:block;
}

.gallery-header .text {
    padding:20px 60px;
    line-height: 1;
}


.gallery-header .text {
    padding:20px 60px;
    line-height: 1;
}

.gallery-header .image img {
    height:175px;
    position:absolute;
    width:100%;
    margin-left:-100px;
    bottom:0
}

.gallery-header i.las {
    display:block;
    position:relative;
    text-align:center;
    justify-content:center;
    align-items:center;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size:35px;
}

.gallery-image{
    margin-bottom:20px;
}


/*** -gallery- **/




/*** Footer ***/

#footer{
    background:#004c2d;
    height:268px;
}

.footer-logo img {
    top:-1px;
    position:relative;    
}

.footer-logo img {
    top:-2px;
    position:relative;    
}

.footer-li{
    display: flex;
    justify-content: space-between;
}

#footer .footer-menu li {
    color:#ffffffd1;
    font-weight:500;
    font-size:16px;
    text-transform: uppercase;
    position:relative;
    display:flex;
    text-align:start;
    justify-content:space-between    
}

.col-lg-4.footer-social {
    list-style: none;
}


#footer .copyright {
    position: relative;
    display: block;
    text-align: center;
    justify-content: end;
    padding-left: 0 !important;
}


.col-lg-3.footer-social {
    list-style:none;
}


.col-lg-3.footer-social li{
    padding:10px;
    margin:7px;
    background:#fff;
    width:40px;
    height:40px;
    border-radius:100%;
    text-align:center;
    align-items:center;
    justify-content:center;
    padding-top:8px;
    display:block;
    transition:300ms;
}

.col-lg-3.footer-social li a{    
    color:#501e00;
    transition:300ms;
}

.col-lg-3.footer-social li.instagram:hover{
    background: #833ab4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.col-lg-3.footer-social li.twitter:hover{
    background:#1DA1F2;
}

.col-lg-3.footer-social li.facebook:hover{
    background:#3b5998;
}

.col-lg-3.footer-social li.youtube:hover{
    background:#FF0000;
}

.col-lg-3.footer-social li.instagram:hover a,
.col-lg-3.footer-social li.facebook:hover a,
.col-lg-3.footer-social li.twitter:hover a,
.col-lg-3.footer-social li.youtube:hover a{
    color:#fff;
}

#footer .copyright{
    color:#fff;
    display:block;
    position:relative;
    align-items:center;
}


.copyright a{
    color:#ffffff73;
}
.footer-content{
    display:block;
    position:relative;
    top:50px;
}


#footer .footer-bottom {
    display:flex;
    margin-top:50px;
}


#footer .footer-bottom .copyright {
    padding-top:15px;
    display:block;
    position:relative
}

#footer .footer-content{
    max-width:80%;
    margin-left:35px;

}


.footer-phone a {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-top: 10px;
    display:block;
    text-align:end;
}

.footer-phone a span{
    padding-left:10px;
}



/*** -Footer- ***/







.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #005030;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: #c0d23c;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #7c9e3e;
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

.main-comment .form-control{
    transition:300ms
}

.main-comment .form-control{
    border: 1px solid #6e5d38;
    height: 55px;
}

.main-comment textarea#description {
    height: 150px;
}

.main-comment .form-control::placeholder {
    color: #005030;
    font-weight: 500;
    transition:300ms
    
}


.main-comment .form-control:focus {
    color: #005030;
    background-color: #fff;
    border-color: #c0d23c;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(192 210 60);
}

.main-comment .form-control:focus::placeholder {
color: #005030;
font-weight: bold;


}

.main-comment a.comment-button{
    display: block;
    position: absolute;
    top: 400px;
    left: -95px;
    transition: 300ms;
}

.main-comment a.comment-button:hover{
    display: block;
    position: absolute;
    top: 400px;
    left: -62px;
    transition: 300ms;
}


a.comment-page-button {
    position: fixed;
    left: -95px;
    display: flex;
    transition: 300ms;
}


a.comment-page-button:hover {
    left: -62px;
    transition: 300ms;
}

a.comment-page-button img,
.main-comment a.comment-button img{
width: 100%;
height: 135px;
object-fit: contain;
}


.lang-ul{
    display: none !important;
    transition:300ms;
}

.lang-li:hover  .lang-ul{
    display: block !important;
}



.page-comment-box p{
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.over {
    color: red;
}