@font-face {
    font-family: 'Raleway';
    src: url(../fonts/Raleway/static/Raleway-Light.ttf) format('truetype');
}

body {
    font-family: 'Raleway', Arial;

    font-size:18px;
}


.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}/*.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}*/.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}

.greywhite {
    background-color:#fff;
}

.grey {
    background-color:#f1f1f1;
}



.layout {
    width:100%;
    text-align:center;
    overflow: hidden; 
}

.centered-narrow-layout {
    margin: 0 auto;
    width:1320px;
}

.main-text {
    font-size:20px;
    line-height:1.5em;
}

.layer {
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.light-blue {
    color: #30afe4;
}

.light-blue-bg {
    background-color: #30afe4 !important;
}

.deep-blue {
    color: #083f75;
}

.deep-blue-bg {
    background-color: #083f75;
}

.dark-red {
    color: #e74c3c;
}

.dark-red-bg {
    background-color: #e74c3c;
}

.white {
    color:#ffffff !important;
}

.fixed-header {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #fff;
    z-index: 1000;
    overflow:hidden;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s, background 1s;
}

.sticky {
    background:rgba(255,255,255,0.5);
    border-bottom: 8px solid #083f75;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);  
    transition: border-bottom 0.5s, background 1s, backdrop-filter 1s, back-webkit-backdrop-filter 1s;  
}



.cart a {
    text-decoration:none;
    font-size:22px;
    display:inline-block;
    width:30px;

}

.cart a span {
    position:relative;
    left:20px;
    bottom:45px;
    display:inline-block;
    background-color:#e74c3c;
    color:#ffffff;
    border-radius:50%;
    width:34px;
    height:30px;
    text-align:center;
    padding-top:4px;
}

.product-quantity {
    font-size:24px;
    position:absolute;
    display:inline-block;
    background-color:lightgray;
    color:#ffffff;
    width:80px;
    height:40px;
    text-align:center;
    padding-top:12px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
}

.product-favorite {
    font-size:24px;
    position:sticky;
    bottom:100%;
    margin-left: auto;
    float:left;
    display:inline-block;
    text-shadow: 0px 0px 3px #000;
    color:#ffffff;
    width:80px;
    height:40px;
    text-align:center;
    padding-top:12px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
}

.isfavorite {
    color: #e74c3c !important;
}

.lista_termeknev {
    text-decoration:none;
    color:#000;
}

.cart-btn {
    padding:12px 8px;
    font-size:16px;
	font-weight:bold;
	cursor:pointer;
	background-color:#083f75;
	color:#ffffff;        
    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 6px;
    text-shadow: 1px 1px 8px #000;
    border-radius:8px;
    text-decoration:none;
}

.cart-btn:hover {
    background-color:#30afe4;
}

.pager-btn {
    text-align:center;
    padding:12px 8px;
    font-size:18px;
	font-weight:bold;
	cursor:pointer;
	width:3.5%;
    background-color:#30afe4;
	color:#ffffff;        
    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 6px;
    text-shadow: 1px 1px 8px #000;
    border-radius:8px;
    text-decoration:none;
}

.pager-btn:hover {
    background-color:#083f75;    
}

.active-pager {
    background-color:#083f75;
}

.red-btn {
    background-color:#e74c3c !important;
}

.red-btn:hover {
    background-color:red !important;
}

.cart-btn i {
    color:#ffffff !important;   
}

.active, .active i {
    color: #30afe4 !important;
}

.inactive {
	background-color:#e74c3c;
	color:#fff;;            
}

.inactive:hover {
	background-color:red;
	color:#fff;            
}

.inactive i {
	box-shadow: none;
    color: #fff !important;            
}

#mobile-menu {
    display:none;
    height:60px;
}

#mobile-menu .logo {
    padding-top:3px;
    padding-left:3px;
    flex:1;
}

#mobile-menu .logo a img {
    height:53px;
    padding-left: 15px;
}

.navigate-title {
    display:none;
}

#desktop-menu {
    height:80px;
}

#desktop-menu ul {
    list-style: none;
}

#desktop-menu li {
    padding-top:30px;
    flex:initial;
    padding-right:16px;
}

#desktop-menu li a {
    text-decoration: none;
}


#desktop-menu .logo {
    padding-top:3px;
    padding-left:15px;
    flex:auto;
}

.logo-maxw {
    max-width: 300px;
}

#desktop-menu .logo a img {
    height:75px;
}

.darkmode {
    float:right;
}

.overflow {
    overflow-x: scroll;
    display: flex;
    gap: 10px;    
}

#search div .column100 {
    margin-top:100px;
}

.search-box {
    padding-top:20px;
    min-height:70px;
    margin-left:20px;
    margin-right:20px;
}

.search-box .input-container input {
    padding-top:18px;
}

.ui-widget-content {
    background:none !important;
    background-color: #30afe4 !important;
}

.ui-widget.ui-widget-content {
    border: 1px solid transparent;

}

.input-container {
    margin-bottom:0px;
}

.input-container input {
    border-bottom: 4px solid #083f75;
}

.input-container input:focus {
    border-bottom: 4px solid #30afe4;
}

.input-container label {
    color:#083f75;
    z-index:-1;
}

.input-container input:focus ~ label {
    color:#30afe4;
}

._fa_style_xs {
    font-size:18px;
}

._fa_style_s {
    font-size:24px;
}

._fa_style_m {
    font-size:48px;
}

.fa-trash-can {
    font-size: 32px;
}

.trashtd {
    width:30px !important;
    text-align:center !important;
}

footer {
    min-height:60px;
}

.white-text {
    color:#fff !important;
    text-decoration: none;
}

.white-text {
    color:#fff;
}

#category-list {
    padding-top:100px;
    min-height:80vh;
}

#product-list {
    padding-top:10px; 
}

.default-bg {
    padding-bottom:20px;
}

.mennyiseg {
    width:5%;
}

.mennyisege {
    padding-left:0 !important; 
    width:2%;
}



/*heading styles*/

.twelve {
    font-weight:400;  
    letter-spacing:8px; 
    text-transform:uppercase;
    padding-bottom:15px;
    padding-top:12px;
}

.column100 {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 6px;
    text-align: center;
    border-radius: 8px;
}

.column {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 6px;
    text-align: center;
    border-radius: 8px;
    max-width: 22.5% !important;
}

.image-box  {
    width:100%;
    margin-top: 0 !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    border-top-right-radius: 8px;;
    border-top-left-radius: 8px;;
}

.list-title {
    min-height:100px;
    margin-top:10px;
    margin-left:5px;
    margin-right:5px;
}

.fixed-height {
    height:300px;
}

.fixed-height2 {
    height:450px;
}

.btn {
	display:inline-block;
    text-decoration:none;
    padding:12px 24px;
    font-size:18px;
	font-weight:bold;
	cursor:pointer;
	background-color:#083f75;
	color:#ffffff;        
    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 6px;
    text-shadow: 1px 1px 8px #000;  
    border-width: 0px;      
}

.btn:hover {
	background-color:#30afe4;
}

.btn-border-radius {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.choose-btn {
	display:inline-block;
    text-decoration:none;
    padding:11px 24px;
    font-size:18px;
	font-weight:bold;
	cursor:pointer;
	background-color: #30afe4;
    border: solid 1px transparent;
	color:#ffffff;        
    box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 2px;
    text-shadow: 1px 1px 8px #000;  
}

.choose-btn:hover {
	background-color:transparent;
}

.choose-active {
    background-color:transparent;
}

.fa_style {
    color:#fff;
}

.vertical-align {
    padding-top:6px;
}

#orders-section {
    min-height:80vh;
    padding-top:100px;
}

#cart-section {
    padding-top:100px;
}

#cart-section-2 {
    padding-top:20px;
}

.cart-bottom {
    padding-bottom:16vh;
}

#product-list {
    min-height:80vh;
    padding-top:10px;
}

.cart-img {
    height:58px;
}

.cart-quantity {
    width:50px;
}

._right {
    text-align: right !important;
}

.table-margin {
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.loginform {
    height: 65.6vh;
    padding-top:150px;
    padding-bottom:77px;
}

.zoom-effect {
    -webkit-animation: zoomin 30s infinite;
    animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);       
}

.flex-many {
    flex:10;
}

.pager-margin-1 {
    margin-left:20px;
    margin-right:20px;
    margin-top:5px;
    margin-bottom:5px;
}

.pager-margin-2 {
    margin-left:10px;
    margin-right:10px;
    margin-top:5px;
    margin-bottom:5px;
}

.pointer {
    cursor:pointer;
}

.product-details-modal {
    display:none;
}

#modal-layer {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    animation-name: fadeIn;
    animation-duration: 0.4s;
    backdrop-filter: blur(8px);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 15% auto;
    margin-top: 3%;
    padding: 20px;
    /*border: 3px solid #083f75;*/
    width: 50%;
    border-radius:10px;
    animation-name: slideIn;
    animation-duration: 0.4s;
}

.modal-content h1 {
    font-size: 24px;
}

.popup_modal {
    width:100%;
}

.popup_modal h1 {
    width:100%;
    text-align:center;
    margin-bottom:20px;
}

.popup_modal p {
    width:90%;
    margin-left: 5%;
    margin-right: 5%;
}

.keyword-btn {
    width:100%;
    text-align:center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.keyword-btn a {
    float: none !important;
}

.popup_modal_img {
    width:90%;
    text-align:center;
    margin-left: 5%;
    margin-right: 5%;
}

#simple-modal-container {
    position:fixed;
    top:20vh;
    width:100%;
    height:0px;
    text-align:center;
    display:none;
}

#simple-modal-container span {
    border-radius:3px;
    border: solid 1px #fff;
    padding:5px;
    color:#fff;
    background-color:#e74c3c;
    font-size:16px;
}

fieldset {
    border: 3px solid #083f75;
    padding: 3px;
    border-radius:5px;
}
fieldset legend {
    padding: 6px;
    font-weight: bold;
    text-align:left;
}

.comment {
    width:100%;
    height:120px;
}

.table-margin {
    overflow:hidden;
}

.lapozo {
    width:720px;
}

.tableborderblue {
    border-bottom: 1px solid #083f75;
}

.tableborderblue:last-child {
    border-bottom: none;
}

.flexpadding {
    padding:5px;
}

.categoryname {
    font-size:22px;
    padding-left:60px;
    color:#083f75;
    padding-top:0;
}

.grecaptcha-badge {
    display:none;
}

.categoryname a {
    text-decoration:none;
    color:#30afe4;
}

.numberinput {
    border:none;
    text-align:center;
    height:68px;
    width:68px;
    position:relative;
    top:1px;
  }

input[type=number], .jelszo {
    /*for absolutely positioning spinners*/
    position: relative; 
    padding-top: 6px;
    padding-bottom: 3px;
    font-size: 22px;
  }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    opacity: 0;
    display:none;
  }

  input[type=number]::-webkit-outer-spin-button, 
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    appearance: textfield;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
  }

  .nopadding td, .nopadding th {
    padding-left: 0 !important;
    width:5% !important;
    text-align:right;
  }

  .__left {
    text-align:left !important;
  }


  .Score-Control {
    width: 105px;
  }
  
  .Score-Value-Container{ 
    position:relative;
    display: table; 
    overflow: hidden;
    box-shadow: 0 0 1px #000 inset;
    background-color:#fff;
    height:80px;
    width:66%; 
    float:left;
    font-size: 28px;
    vertical-align: middle; 
    text-align: center;
  }
  
  .Score-Value {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
  }
  
  .Score-UpDown{
    position:relative;
    height:80px;
    width:34%; 
    float:right;
  }
  
  .Score-Button-Container {
    display: table; 
    height: 50%; 
    width: 100%; 
    overflow: hidden; 
    box-shadow: 0 0 1px #000 inset;
    cursor:pointer;
  }
  
  .Score-Button {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    font-size: 20px;
    color:#fff;
  }

  .Score-Button.Blue {
    background-color: #083f75;
  }

  .Score-Button.Red {
    background-color: #e74c3c;
  }

  .login_in_header {
    position:absolute;
    width:215px;
    bottom:2px;
    font-size:14px;
    color:#083f75;
  }

  .login_in_header_mobile {
    position:absolute;
    font-size:10px;
    bottom:3px;
    color:#083f75;
    right:5px;
  }  

  .inactiveProductList {
    color:grey;
  }
  .inactiveProductList .flex-100.margin-s.row {
    visibility:hidden;
  }

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    95% {
        -webkit-transform: scale(1.20);
    }
    100% {
        -webkit-transform: scale(1);
    }

}

.ui-widget-content li {
    border-top:solid 1px #083f75 !important;
    border-left:solid 1px #083f75 !important;
    border-right:solid 1px #083f75 !important;
}    

.breathing-animation {
    -webkit-animation: breathing 5s ease-out infinite normal;
    animation: breathing 5s ease-out infinite normal;    
}

@keyframes breathing {
    0% {
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    25% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  
    60% {
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    100% {
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
    }
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeOut {
    from {opacity: 1} 
    to {opacity: 0}
}

#modal-layer.fadeOut {
    animation-name: fadeOut;
    animation-duration: 0.4s;
}

@media only screen and (max-width: 1320px) {   
    .centered-narrow-layout {
        width:100%;
    }

    #mobile-menu {
        display:flex;
    }
    #mobile-menu .logo {
        padding-top:5px;
    }

    #desktop-menu {
        display:none;
    }

    .column {
        max-width: 20% !important;
    }

    .categoryname {
        padding-left:20px;
        font-size:18px;
    }

    .navigate-title {
        display:inherit;
        font-size:26px;
        padding-bottom:20px;
        color:#083f75;
    }       

}

@media only screen and (max-width: 960px) {   
    .flex-3 {
        flex:2;
    }

    .flex-4 {
        flex:2;
    }    

    .header-bg {
        height: 50vw;
    }    

    .main-title {
        font-size:32px;
        top:25vw;
    } 
    .second-title {
        font-size:24px;
    }
    
    .w3-table th, .w3-table td {
        font-size:16px;
    }

    .cart-img {
        height:36px;
    } 
     
}

@media only screen and (max-width: 720px) {   
    .flex-2,.flex-3,.flex-4  {
        flex:100%;
    }

    .pager-btn {
        padding:8px 16px;
        font-size:14px;
        font-weight:400;
    }  

    .modal-content {
        padding: 10px;
        border: 1px solid #083f75;
        width: 85%;
        font-size:16px;
    } 

    .modal-content h1 {
        font-size: 18px;
    }    

    .column {
        max-width: 100% !important;
    } 
    
    .cart-quantity {
        width:42px !important;
    } 
}

@media only screen and (max-width: 480px) {   
    .main-title {
        font-size:18px;
        top:28vw;
    }  
    
    p {
        font-size:16px;
    }    

    .second-title {
        font-size:16px;       
    }       

    .header-bg {
        height: 100vw;
        z-index:-1;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 200%;
        -webkit-animation: zoomin 10s infinite;
        animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
        overflow:hidden;
    }

    #search div .column100 {
        margin-top:80px;
    }

    .submit-btn-box {
        width:100%;
    }
    
    .search-box {
        min-height:120px;
    }   

    .flex-1 {
        flex:100%;
    }
 
    .footer-menu {
        text-align:center;
    }

    .margin-m {
        margin:5px;
    }

    .w3-table th, .w3-table td {
        padding: 2px 2px;
        font-size:13px;
    }

    .cart-quantity {
        font-size:12px !important;
    }

    .cart {
        bottom:0;
    }

    .cart a span {
        width:25px;
        height:25px;
        padding-top:0;
        font-size:18px;
    }    
    
    .w3-table td:first-child {
        padding-left:0;
    }

    .w3-table {
        overflow:auto;
    }

    .cart-img {
        width:40px;
        height:auto;
    }
    
    .responsive-btn {
        padding:2px 4px;
        font-size:12px;
        font-weight:bold;  
    }

    .table-margin {
        margin-right: 0px;
        margin-left: 0px;
        overflow:auto;
    }   
    
    .pager-margin-1,.pager-margin-2 {
        margin-left:5px;
        margin-right:10px;
    }


    .pager-btn {
        padding: 8px 12px;
        font-size: 12px;
        float:left !important;      
    }    

    .btn {
        padding: 8px 12px;
        font-size: 16px;
    }

    .choose-btn {
        padding: 11px 24px;
        padding: 7.5px 12px;
        font-size: 16px;
        float:right !important;        
    }  

    .flex-btn {
        flex:2;
    }

    .flex-btn1 {
        width:43px !important;
        flex:none !important;
    }

    .categoryname {
        padding-left:5px;
        font-size:14px;
    }    

    .fa-trash-can {
        font-size: 20px;
    }

    .numberinput {
        height:34px;
        width:34px;
        position:relative;
        top:1px;
        font-size:16px !important;
    }

    .Score-Control {
        width: 75px;
      }    

    .Score-Value-Container{ 
        height:55px;
      }
      
      .Score-UpDown{
        height:55px;
      }   
      
    /*jquery ui mobile search*/
    .ui-widget-content {
        font-size:14px !important;
    }

    #cart-section-2 {
        min-height:0vh;
    }    

    .keszlet_font {
        font-size:11px;
        font-weight:bold;
    }
}

/*dark mode css*/

.light {
    color: #000;      
}

.dark {
    color: #fff;     
}

.dark input[type=text],.dark input[type=number] {
    background-color:transparent;
    color: #fff !important;
}


.dark .fixed-header {
    background:rgba(42,43,46,1);
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;     
}

.dark .navigate-title {
    color:#fff;
    background:rgba(42,43,46,1); 
}

.dark .sticky {
    background:rgba(42,43,46,0.5);
    border-bottom: 8px solid #083f75;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);  
    transition: border-bottom 0.5s, background 1s, backdrop-filter 1s, back-webkit-backdrop-filter 1s; 
}

.light #desktop-menu li a {
    color:#083f75;
    font-weight:700;
}

.dark #desktop-menu li a {
    color: #fff !important;
}

.dark section {
    background-color: #2a2b2e;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;     
}

.dark .lista_termeknev {
    color: #fff;
}

.dark a i, .dark div i {
    color: #fff;
}

.light a i, .light div i {
    color: #083f75;
}

.dark .column {
    background-color: #2a2b2e;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 24px;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;         
}

.dark label {
    color:#fff;
}

.dark fieldset {
    border: 3px solid #fff;
    padding: 3px;
}

.dark textarea {
    border: 1px solid #fff;
    background-color:transparent;
    color:#fff;
}

.dark .jelszo {
    background-color:transparent;
}

.dark .quantityinput {
    background-color:transparent;
    box-shadow: 0 0 1px #fff inset;
}

.dark .numberinput {
    background-color:transparent;
}

.m-menu.dark {
    background-color: #2a2b2e !important;
    color: #fff;  
}

.m-menu.dark a {
    color: #fff;  
}

.m-menu.dark i {
    color: #fff;  
}

.dark .h1-page {
    background-color:#2a2b2e;
    color:#fff;

    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;   
}

.dark nav a {
    color:#fff;
    font-size:14px;
    text-decoration: none;
}

.dark .greywhite {
    background-color:inherit;    
}

.dark .grey {
    background-color:inherit;
}

.dark .tableborder {
    border-bottom: 1px solid #f7f7f7;
}

.dark .tableborder:last-child {
    border-bottom: none;
}

.dark .tableborderblue {
    border-bottom: 1px solid #f7f7f7;
}

.dark .tableborderblue:last-child {
    border-bottom: none;
}



.m-menu.dark {
    background-color: #2a2b2e !important;
    color: #fff;
}