@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {box-sizing: border-box; border: none; outline: none; margin: 0; padding: 0; resize: none; text-decoration: none; font-family: 'Roboto', sans-serif;}

html,body {min-height: 100vh; display: flex; flex-direction: column;}

header {background: #323232;}
header > div {max-width: 1160px; width: 100%; margin: 0 auto; padding: 15px; display: flex; justify-content: space-between; align-items: center;}
header .logo {color: #fedd2e; text-transform: uppercase;}
header nav {display: flex; justify-content: space-between; align-items: center;}
header nav a {color: #fff; margin-left: 30px;}
header nav a:hover {color: #fedd2e;}
header nav a.active {color: #fedd2e;}

.content {max-width: 1160px; width: 100%; margin: 0 auto; padding: 15px; flex: 1;}
.text {}
.text p {margin: 20px 0;}
.text ul li {margin-left: 10px;}

.refitems {display: flex; justify-content: space-between; flex-wrap: wrap;}
.refitems button {width: 23.5%; border: 1px solid #ddd; padding: 10px; margin-top: 25px;}
.refitems button .img {display: block; position: relative; border-radius: 10px; overflow: hidden;}
.refitems button .img img {display: block; width: 100%;}
.refitems button .img .txt {border-radius: 0 10px 0 10px; position: absolute; bottom: 0; left: 0; background: red; color: #fff; font-size: 13px; padding: 5px 10px;}
.refitems button .name {display: block; color: #757575; font-size: 15px; margin-top: 10px;}
.refitems button .info {display: block; border-top: 1px solid #ddd; margin-top: 10px;}
.refitems button .info p {display: block; color: #757575; font-size: 15px; margin: 10px 0;}
.refitems button .info p b {color: #000;}
.refitems button .info p strong {color: #000;}
.refitems button .addz {display: block; background: #f1dd2e; color: #000; text-transform: uppercase; font-weight: 600; text-align: center; padding: 13px 10px; border-radius: 5px; margin-top: 20px; font-size: 15px;}
.refitems button .addz:hover {background: #ffe500;}
.refitems button .more {display: block; color: #000; text-transform: uppercase; text-align: center; padding: 13px 10px; border-radius: 5px; margin-top: 8px; font-size: 13px; border: 1px solid #b3b3b3;}
.refitems button .more:hover {background: #f1dd2e; border-color: #f1dd2e;}
.refitems > div {width: 23.5%;}



@media (max-width: 1024px){
	.refitems button .info p {font-size: 13px;}
}

@media (max-width: 960px){
	.refitems button {width: 31.5%;}
}

@media (max-width: 900px){
	header > div {display: block; padding: 0;}
	header .logo {display: inline-block; padding: 15px;}
	header nav {padding: 15px; background: #2d2d2d; border-top: 1px solid #272727; overflow: auto; justify-content: flex-start;}
	header nav a {margin-right: 25px; margin-left: 0;}
	header nav a:last-of-type {margin-right: 0;}
}

@media (max-width: 760px){
	.refitems button {width: 48.5%;}
	header nav a {font-size: 14px;}
}

@media (max-width: 560px){
	.refitems button {width: 100%;}
	.text p {margin: 10px 0; font-size: 14px;}
}

@media (max-width: 360px){
	header .logo {font-size: 13px;}
	header nav a {font-size: 13px;}
}