@import url('https://fonts.googleapis.com/css?family=Lato|Raleway');


body {
	background-color: #E8E8E8;
	font-family: "Lato";
	font-weight: 300;
	font-size: 22px;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-webkit-overflow-scrolling: touch;
	margin-top: 70px;
}

.news-container {
    display: flex;
	/*display: grid;*/
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1200px; /* Центруємо контент */
    margin: 0 auto;
	padding-left:16px;   /* ← відступи */
    padding-right:16px;  /* ← відступи */
	box-sizing:border-box;
	/*grid-template-columns: repeat(3, minmax(0, 1fr));*/
}

.news-card {
    flex: 0 0 calc(33.333% - 20px); /* Робимо картки гнучкими */
    max-width:calc(33.333% + 80px);
  	min-width: calc(1100/3);
	min-height:200px;
 	background:#E8E8E8;
  	padding:15px;
  	border:1px solid #cb5a27;
  	border-radius:8px;
  	box-shadow:0 4px 10px rgba(0,0,0,.5);
  	text-align:center;
	margin: 0 auto;
}

.news-card.wide {
   	flex:0 0 calc(33.333% * 3);
   	max-width:calc(33.333% * 3);
	min-width: 0;
	padding:15px;/* розтяг на всю ширину */
}

/* Ширина 2-х карток: 2*w + gap */
.news-card.wide-2{
  flex:0 0 calc((100% - 40px) / 2);
  max-width:calc((100% - 40px) / 2);
}

.news-card h2, h3, h4, h5, h6 {
    font-family: "Lato";
	font-weight: 100;
	font-size: 23px;
	color: #333;
	text-align: center;
	letter-spacing: .8px;
	position: relative;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.news-card p {
    flex-grow: 1;
	line-height: 28px;
	margin-bottom: 10px;
	font-family: "Lato";
	font-weight: 300;
	font-size: 20px;
	color: #999;
	text-indent: 0; /* Adjust the indentation value as needed */
}

.news-card a {
    display: inline-block;
    /*margin-top: 10px;*/
    color: #CB5A27;
    background: #E8E8E8;
    /*padding: 8px 12px;*/
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
}

.news-card a:hover {
    background: #E8E8E8;
}




.main-content{
    margin-bottom: 50px; /* Adjust the value as needed */
}


.container {
      max-width: 1200px;
      margin: 10 auto;
      padding: 40px;
    }

.column {
      width: 33.33%;
      float: left;
      padding: 10px;
    }

.clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

h1 {
	font-family: "Raleway";
	font-weight: 200;	
	color: #333;
	text-align: center;
	position: relative;
	text-shadow: 5px 5px 8px rgba(1, 1, 1, 1);
}

h2, h3, h4, h5, h6 {
	font-family: "Raleway";
	font-weight: 200;	
	color: #333;
	text-align: center;
	position: relative;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

p {
	list-height: 28px;
	margin-bottom: 10px;
	font-family: "Lato";
	font-weight: 300;
	font-size: 22px;
	color: #999;
	text-indent: 50px; /* Adjust the indentation value as needed */
}

p1 {
	list-height: 28px;
	margin-bottom: 10px;
	font-family: "Lato";
	font-weight: 300;
	font-size: 22px;
	color: #999;
}

.centered {
	text-aling: center;
}

a {
	color: #CB5A27;
}

a:hover, a:focus {
	color: #7B7B7B;
	text-decoration: none;
	outline: 0;	
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

.navbar {
	font-weight: 300px;
	font-size: 18px;
	padding-top: 15px;
	padding-bottom: 15px;
	
}

.navbar-inverse {
	background: #2d2d2d;
	border-color: #2d2d2d;
}

.navbar-inverse .navbar-nav >.active >a {
	background-color: #CB5A27;
}

.navbar-inverse .navbar-brand {
	color: #999;
	font-weight: bolder;
	font-size: 22px;
	letter-spacing: 1px;
		
}

.text-drop {
	color: white;
}

#headerwrap {
	background: url("../img/header-bg.jpg") no-repeat center top;
	margin-top: -20px;
	padding-top: 10px;
	text-align: center;
	background-attachment: relative;
	background-position: center center;
	min-height: 2vh;
	width: 100%;
	background-size: 100%;
	-webkit-background-size: cover;
	-moz-webkit-background-size: cover;
	-ms-webkit-background-size: cover;
	-o-webkit-background-size: cover;
	webkit-background-size: cover;
}

#headerwrap h1 {
	flex-grow: 1;
	margin-top: 55px;
	color: white;
	font-size: max(3.5vw,20px);
	font-weight: bold;
	letter-spacing: .8px;
	text-align: center;
	
}

#headerwrap h2 {
	color: #D8BBBB;
	font-size: max(2.5vw,20px);
	
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}

#footer {
	bottom: 0;
    width: 100%;
   	text-align: center;
	margin-bottom: -10px;
	padding-bottom: 100px;
	
}

#footer p {
	font-size: 2vh;
	text-transform: uppercase;
	letter-spacing: 1px;
	
}

.word { 
    width: 350px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 22px;
   }
.text-mirging-bottom {
	padding: 10px; /* Поля вокруг текста */
    margin-bottom: 70px; /* Отступ снизу */
}

.content-section {
    margin-bottom: 60px; /* Adjust the value as needed */
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.logo-image{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -16px;
}

/*Table Styling*/
table { 
  width: 100%; 
  border-collapse: collapse;
  font-family: "Lato";
}
/* зебра */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #E8E8E8; 
  color: #333; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: center;
  font-family: "Lato";
  
}

.col-lg-4, .col-lg-6 {
             padding: 15px; /* Add some padding to create space between the content and the border */
        }

.rounded-rectangle {
    width: 100%; /* Adjust the width as needed */
    background-color: #E8E8E8; /* Set the background color */
    border: 2px solid #cb5a27; /* Set the border color and thickness */
    border-radius: 20px; /* Set the border radius to create rounded corners */
    padding: 10px; /* Add padding inside the rectangle */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Add a shadow for depth */
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
  	.news-card,
	.news-card.wide-2{
		flex:0 0 100%; 
		max-width:100%; 
	}

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { border: 3px solid #ccc; }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%;
		font-size: 3vw;
        text-align: left;
    }
    
    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
    
    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "№	"; }
    td:nth-of-type(2):before { content: "Адреса"; }
    td:nth-of-type(3):before { content: "Виробництво"; }
    td:nth-of-type(4):before { content: "Транспортування"; }
    td:nth-of-type(5):before { content: "Постачання"; }
    td:nth-of-type(6):before { content: "Загальний,грн без ПДВ"; }
    td:nth-of-type(7):before { content: "Загальний, грн з ПДВ"; }

}