@font-face{
	font-family: pfbeausanspr;
	src:url(../fonts/PFBeauSansPro-Regular.ttf);
}

@font-face{
	font-family: pfbeausanspr;
	src:url(../fonts/pfbeausanspro-reg-webfont.eot);
}

@font-family-base:        @font-face;

a, a:hover, a:focus {
	font-family: pfbeausanspr;
	text-decoration: none;
	color: #000;
}
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 0px;
	text-align: center;
}
body {
	font-family: pfbeausanspr;
	color: #000;
	padding:0;
	margin:0;
}
.row{
	margin:0 !important;
}
.col-xs-12{
	padding: 0 !important;
}
#header-container{
	background-color: #1e1413;
	top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: auto;
    position: fixed;
    transition: transform 0.5s cubic-bezier(0.8, 0.2, 0.2, 0.8);
}
.logo-div{
	padding: 10px;
	float: left;
	width: 170px;
}
.modal-header {
    padding: 2px !important;

}

#logo{
	width:130px;
	float:left;
	margin-left:30px;
	margin-top:5px;
}
#contact-head{
	text-align:right;
	float:right;
	font-size:20px;
	color: #000;
	padding-right: 30px!important;
	font-weight: bold;
}
#contact-head a{
	color: #000;
}
.title1{
	text-align: right;
    margin-top: 140px;
}
.title1 h1{
	font-size:44px;
	text-align: right;
}
.title1 h2{
	font-size:35px;
	text-align: right;
}
.info-div{
	width:100%;
	background: no-repeat url("../img/back1.jpg");
	background-size:contain;

	height:450px;
	
}
.slide-div{
	margin: 0px;
    padding: 0;
}
.slide-div img{
	width:100%;
	

}
.products-div{
	width:100%;
	text-align: justify;
	font-size:18px;
}
.products-div img{
	width:100%;
}
.img-prod{
	text-align:center;
}
.art-link{
	text-decoration: none;
    color: blue;
}
.art-link:hover{
	text-decoration: underline;
    color: blue;
}


.slide-div{
	overflow:hidden;
}
.res-img img{
	max-width:300px;
	width:100%;
}
.res-full-img{
	max-width:900px;
	width:100%;
}
.res-link{
	cursor:pointer;
}


.heder-line{
	background-color: #dff0d8;
}



.text-title{
	color: #98ab3f; 
	font-weight:bold;
}
.div-2{
	background-color:aliceblue;
}
.text-red{
	color:red;
}
.footer-div {
  text-align: left;
  padding: 3px;
  background-color:#3e6f30;
  font-size:20px;
}
.cmsblock .static-block .first-text {
    font-size: 15px;
    text-transform: uppercase;
    width: 80px;
    font-weight: 500;
    word-wrap: break-word;
    display: inline-block;
    line-height: 14px;
    color: #fff;
}
.row-footer{
	color: #fff;
}
.cmsblock .static-block .secon-text {
    font-size: 15px;
    line-height: 40px;
    vertical-align: bottom;
	color: #fff;
}
.owl-carousel img{
	width:200px;
}

    .owl-prev, .owl-next {
        width: 15px;
        height: 100px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: block !important;
        border:0px solid black;
    }
    .owl-prev { left: -20px; }
    .owl-next { right: -20px; }
    .owl-prev i, .owl-next i {transform : scale(2,5); color: #ccc;}
.owl-item{
	border: 1px solid;
	border-radius: 4px;
}	



.text-bold{
	font-weight:bold;
}
.animal-pic:hover{
	 transform: scale(1.1);
}
.animal-pic{
	overflow:hidden;
	
}
.animal-pic img{
	width:100%;
}
.text-center{
	text-align:center;
}
.caption {
    font-size: 15px;
   color:#000;
    text-align: justify;

}
section {
    display: block;
}
.gallery_block {
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.2);
}
.gallery_item {
    width: 25%;
    max-height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	padding:0;
}

{box-sizing:border-box}

/* Slideshow container */
.slideshow-container {

  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
.art-img{
	width:100%;
	padding: 10px;
}
.art-col-info h3{
	font-size:17px;
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.gallery_item img{
	width:100%;
	padding:0;
	margin:0;
}
.main-info {
	font-size:15px;
	text-align:justify;
}
.art-caption{
	color: #0a11b8;
	font-weight:bold;
	font-size:20px;
}
.art-div{
	text-align:left;
}
.art-img-caption{
	width: 300px;
	float: left;
    padding: 10px;
}
hr{
	color: #3e6f30 !important;
	border: 1px solid !important;
}
.art-div p{
	font-size:15px;
	font-style: italic;
	color: 	dimgrey;
}

.art-div:hover{
	background-color: #dff0d8;
}

.advantage-img{
	width:100px;
}



.topnav {
  background-color: #3e6f30;

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd !important;
  color: black !important;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D !important;
  color: white !important;
}

.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
  margin-left: 5px;
}
.topnav .icon {
  display: none;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
.icon{
	color:#fff;
}


.footer_contact_textarea {
    height: 200px !important;
    padding-top: 15px;
}
.footer_contact_input {
    width: 100%;
    height: 47px;
	border-radius:5px;
    border: 1px solid;
    outline: none;
    padding-left: 20px;
    margin-bottom: 15px;
    color: #000;
    font-weight: 500;
}
#name1, #email1{
	width:45% !important;
}
.grecaptcha-badge {visibility: hidden;}
.about-img {
    width: 100%;

	
}
.catalog-img{
	max-width:300px;
	width:100%;
}
.catalog-text{
	font-size:20px;
}
.main-catalog-prod-img {
	color:#000;
	font-size:15px;
}
.lang-div{
	float:right;
}
.art-img-0{
	width:100%;
	max-width:700px;
}
.call-2-me{
	width:100px;
	position:fixed;
	left:10px;
	bottom:10px;
	z-index:1000;
	cursor:pointer;
}

.img-sert-div{
	border: 1px solid;
	margin:10px;
}
.img-sert-div>img{

	padding:5px;
}
.request-call-link{
	cursor:pointer;
	color: #2a2aef;
}
.request-call-link:hover{
	cursor:pointer;
	color: #2a2aef;
	text-decoration: underline;
}
/* Style the navbar */
#navbar {
  overflow: hidden;
  background-color: #99ab3f;
  color: #fff;
 
  z-index:1000;
}

/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}
.row-s {
		  display: -webkit-box;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display:         flex;
		  flex-wrap: wrap;
		}
.row-s > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.col-sm-3, .col-sm-12{
		padding-left: 5px !important;
		padding-right: 5px !important;
	}
	
#section-1-price{
	color: #000;
	margin-top: 10px;
}
.price-table{
	width:90%;
	margin: 0 auto;
}
.price-table thead{
	background-color: burlywood;
	text-align:center;
}
.price-table thead th{

	text-align:center;
}
.table-prod-title{
	background-color: chartreuse;
	font-weight: bold;
}	
	
	
	
@media screen and (max-width: 1041px) {
  .topnav a:not(:first-child) {display: none;}
   .topnav input {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

	#navbar>h3{
	 font-size:20px;
	 
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1041px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
   .topnav.responsive input {
    float: left !important;
	width:98% !important;
	 display: block;
	 margin: 5px;
  }
}

.lang-div a{
	display: block !important;
}
@media screen and (max-width: 940px) {
	
	
	
	#logo{
		width:80px;		
	}
	#contact-head{
		
		font-size:16px;
	}
	.title1{
		
		margin-top: 80px;
	}
	.slide-div img{
		width:100%
		
		
	}
	.info-div{
		width:100%;
		background: no-repeat url("../img/back1.jpg");
		background-size:contain;

		height:250px;
		
	}
	.products-div img{
		width:60%;
	}
}


@media screen and (max-width: 500px) {
	#logo{
		width:80px;		
	}
	#contact-head{
		
		font-size:16px;
	}
	.title1{
		
		margin-top: 80px;
	}
	.title1 h1{
		font-size:xx-large;
		
	}
	.title1 h2{
		font-size:unset;
		
	}
	.info-div{
		display:none;
	}
	.slide-div img{
		width:100%
		
		
	}
	.products-div{
		
		font-size:10px;
	}
	.products-div h2{
		
		font-size:20px;
	}
	.products-div img{
		width:60%;
	}
	.main-info{
		font-size:12px;
		padding:5px !important;
		
	}
	.caption{
		font-size:12px;
	}
	h2{
		font-size:18px;
	}
	h1{
		font-size:25px;
	}
	.art-div p {
		font-size: 13px;
		
	}
	.art-img-caption {
		width: 100%;
	}
	.art-col-info h3{
		font-size:14px;
	}
}