/*---------------------------------------------*\
  QTruck                        
  style.css                                     
  Ver. 1.0.3 - 2026.02.15.                   
\*---------------------------------------------*/
@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('../fonts/myriadpro-regular.woff') format('woff');
}
body { 
  background: #fff;
  color: #888 !important;
  font-family: 'Myriad Pro Regular' !important;
}

header{
	height: 300px;
	background-image: url("../images/main.jpg");
}
header h1{
  margin: 0 auto;
  padding-top: 30px;
  text-align: center;
  font-size: 64px;
  color: #fff;
  width:250px;
}
header h1 span{
	color: #EE7E22;
}
header h3{
	text-align: center;
	font-size: 32px;
	color: #fff;
	margin-top: 20px;
}
.langselect{
  width: 100px;
  position: relative;
  display: flex;
  right: -80%;
  top: -60px;
}
.langbox{
  display: flex;
  font-weight: 700;
  color: #fff;
  padding: 0.35rem 0;  
}
.langbox img{
  margin-right: 0.35rem;
}
.langs{
  position: absolute;
  right: 0;
  top: 100%;
  background-color: rgba(255,255,255,.6);
  padding: 10px;
  margin: 0;
  border-radius: 3px;
  font-size: 14px;
  width: auto;
  color: #000;
  visibility:hidden;
  backdrop-filter: blur(10px);
  text-align: right;
  -webkit-transition: 0.4s ease;
  -moz-transition: 0.4s ease;
  -o-transition: 0.4s ease;
  transition: 0.4s ease;  
}
.langbox:hover .langs{
  visibility:visible;
}
.langs li{
  display: block;
  list-style: none;
  white-space: nowrap;  
}
.langs li a{
  color:#000 !important;  
}
.navicon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding-bottom: 5px;
  font-size: 16px;
  justify-content: flex-start;
}
.navicon i {
  width: 44px;
  font-size: 22px;
  margin-left: 7px;
}
.btn-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #EE7E22;
  border-color: #EE7E22;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin: 2px;
}
a.btn-yellow, .btn-yellow{
  background-color: #FDF2EA !important;
  border-color: #FDF2EA;
  color: #EC7D30 !important;  
}
a.btn-yellow:hover, .btn-yellow:hover{
  background-color: #FDF2EA !important;
  border-color: #FDF2EA;
  color: #EC7D30 !important;  
}
.toptitle{
	color: #fff;
}
.toptitle span{
	font-size: 14px;
}
.title-container{
	margin: 0 auto;
}
#carousel {
  margin: 0px auto;
  overflow: hidden;
  position: relative;
  width: 768px;
  margin-top:48px;
}
.carousel-slide {
  position: relative;
  border: 10px solid transparent;
  color: #888;
  float: left;
  font-size: 20px;
  height: 82px;
  width: 256px;
}
.titlebox {
  top: 0px;
  color: #333 !important;
  position: absolute;
  font-size: 22px !important;
  background-color: #fff; /*rgb(255,255,255,0.6);*/
  border: 1px #ddd solid;
  width: 100%;
  text-align: center;
  height: 32px;
  border-radius: 5px;
  cursor:pointer;
}
.titlebox.active{
  border: 2px #EE7E22 solid;
}
.rakodas h3, .szallitas h3{
	text-align: center;
	width:100%;
}
.form-check-input:checked {
  background-color: #EE7E22;
  border-color: #EE7E22;
}
#products{
  margin-top: 82px;
}
.product{
  height: 48px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1), 0 2px 4px 0 rgb(0 0 0 / 0.1);
  border-radius: 5px;
  cursor:pointer;
}
.product p{
  margin:0;
  margin-top:5px;
  line-height: 1;
}
.product-left{
  float:left;
  padding-left: 1rem !important;
  margin-top: 5px;  
}
.price-left{
  float:right;
  margin-right:0px;
  margin-top:-30px;
  color: #EE7E22;
}
.product-right{
  float:right;
  padding-left: 15px !important;
}
.static{
  margin-top: -40px;
  background-color: #fff;
  border-radius: 15px;
  min-height: 330px;
  color: #888;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1), 0 2px 4px 0 rgb(0 0 0 / 0.1);
  padding:10px;  
}
.static h3{
  color: #333;
  margin-top: 50px;
  font-size: 38px;
  text-align: center;  
}
.trorder{
  border-radius: 10px;
  background-color: #ccc;
  color: #000;
  padding: 20px;
  margin-top: 20px;  
}
a.btn-front, .btn-front{
  background-color: #EC7D30;
  border-color: #EC7D30;
  color: #fff !important;
  padding: 1rem 8rem;  
}
a.btn-front:hover, .btn-front:hover{
  background-color: #d16721;
  border-color: #d16721;
}
.emsg{
  font-size: 12px;
  min-height: 16px;
  color:red;
  width:100%;
}
footer{
  min-height:100px;
  padding: 20px;
  margin-top: 30px;
  background-color: #181832;
  color: #fff;
}
.footerbox{
  text-align: right;
}
footer a{
  color:#ee7e22 !important;
}
footer a:hover{
  color:#fff !important;
}
  /*-----------------------------------*\
  $SCREENS
\*-----------------------------------*/
@media screen and (max-width: 800px) {

header h1{
  font-size: 48px;
}
header h3{
  font-size: 22px;
}
.carousel-slide {
  width: 100vw;
}
}