/*
  File: static/stylesheets/style.css
  Created @ 2018/11/22 08:00
  Last modified @ 2025/11/14 11:07
*/


/**********************************************************************************************************************************************************************
 * Alap formázások, közös rész
 **********************************************************************************************************************************************************************/

/* Általános formázások */
body, div, ul, li, p { margin: 0; padding: 0; } /* normalize.css kiegészítés */
body { color: #000; background: #fff; font: normal normal 19px/1.625 'Roboto Condensed', sans-serif; }
body.popupActive { overflow-y: hidden; }
section { float: left; width: 100%; } /* Chrome padding hiba jav. */
hr { float: left; width: 100%; border: none; }
.sep { float: left; width: 100%; }
    .sep span { float: left; width: 20%; height: 5px; background-color: #f5eb0e; }
    .sep span.sep2 { background-color: #6fccdd; }
    .sep span.sep3 { background-color: #ee3485; }
    .sep span.sep4 { background-color: #76c043; }
    .sep span.sep5 { background-color: #FF0000; }
.clearfix { display: block; clear: both; width: 100%; margin: 5px 0; height: 1px; font-size: 1px; overflow: hidden; }
.left-floated { clear: none !important; float: left; }
.right-floated { clear: none !important; float: right; }
.right-aligned { text-align: right; }
.center-aligned { text-align: center; }
img { max-width: 100%; }
@font-face {
    font-family: 'HoboStd';
    src: url('fonts/HoboStd-1.otf');
    font-weight: normal;
    font-style: normal;
}

/* Linkek */
a:link { color: #ea3084; text-decoration: underline; }
a:visited { color: #ea3084; text-decoration: underline; }
a:hover { color: #bd0153; text-decoration: underline; }
.linkForward,
.linkBack { text-transform: uppercase; }
.linkForward:after,
.linkBack:before { display: inline-block; padding: 0 10px 0 10px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f054"; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; }
.linkBack:before { padding: 0 10px 0 0; content: "\f053"; }

/* Gombok */
a.button, button.button { display: inline-block; padding: 0.2em 0.5em; color: #FFF; background: #ee3485; border-radius: 3px; text-decoration: none; }
.button:hover { background: #bd0153; transition: all .3s; text-decoration: none; }
a.button.large { padding: 1em 2em; }
span.button { display: inline-block; min-width: 50%; position: relative; padding: 1em; border: none; font-size: 1.5em; line-height: 25px; text-indent: 0; text-decoration: none; text-transform: uppercase; text-align: center; }
a.button.inactive { background: #CCC; cursor: not-allowed;  }

@keyframes headerFix {
    from { top: -5em; }
    to { top: 0; }
}

@keyframes loader {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes slogan {
    0% { transform: scale(0.1, 0.1) rotate(0deg); }
    50% { transform: scale(1.2, 1.2) rotate(-2.5deg); }
    100% { transform: scale(1, 1) rotate(-2.5deg); }
}

@keyframes slogan2 {
    0% { transform: scale(0.1, 0.1) rotate(0deg); }
    50% { transform: scale(1.2, 1.2) rotate(5deg); }
    100% { transform: scale(1, 1) rotate(5deg); }
}

@keyframes slogan3 {
    0% { transform: scale(0.1, 0.1) rotate(0deg); }
    50% { transform: scale(1.2, 1.2) rotate(-1deg); }
    100% { transform: scale(1, 1) rotate(-1deg); }
}

@keyframes navigationOverlay {
    from { left: -100%; }
    to { left: 0; }
}

@keyframes sliderLoad {
    from { left: 0; }
    to { left: -5%; }
}

@keyframes buttonLoader {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes product {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cast {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes upVisible {
    from { bottom: -2.5em; transform: scale(0.5, 0.5) rotate(0deg); }
    to { bottom: 0.1em; transform: scale(1, 1) rotate(-360deg); }
}

@keyframes upHide {
    from { bottom: 0.1em; transform: scale(1, 1) rotate(0deg); }
    to { bottom: -2.5em; transform: scale(0.5, 0.5) rotate(360deg); }
}

@keyframes itemHover { 
    0% { transform: rotate(-10deg) scale(1, 1); }
    100% { transform: rotate(0deg) scale(1.3, 1.3); }
}

@keyframes processing {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

@keyframes heartbeat {
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1); }
}
    
span.button i { opacity: 1 !important; animation: loader linear infinite 1s}

/* Idegen szavak */
.foreign-word { border-bottom: 1px dashed; }


/**********************************************************************************************************************************************************************
 * Fejléc
 **********************************************************************************************************************************************************************/

/* Elavult böngészős figyelmeztetés */
.browserAlert { float: left; width: 100%; margin: 0; padding: 10px 0; position: fixed; top: 0; z-index: 5000; color: #333; background-color: #FCF2AB; border-bottom: 1px solid red; text-align: center; }
    .browserAlertContent { width: 80%; margin: 0 auto; }
    .browserAlert p { float: left; width: 100%; margin: 0; padding: 5px 0; }
    .browserAlert a { color: #C4100F; font-weight: bold; }
    .browserAlert a:hover { border: none; }

/* Fejléc tartalom */
.header { float: left; width: 100%; padding: 0.5em 2% 0.5em; position: relative; box-sizing: border-box; background-color: #FFF; text-align: center; }
.fixed .header { padding: 0.5em 2% 0; position: fixed; left: 0; top: 0; z-index: 12; background: #ee3585; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); animation: headerFix 1s; }
    .headerInner { width: 100%; max-width: 1450px; margin: 0 auto; }
    a.logo { display: inline-block; float: left; margin: 0 1em 0 0; padding: 0.2em 0.7em; position: relative; box-sizing: border-box; color: #FF0000; background: #ee3485; border-radius: 30px; text-decoration: none; text-align: center; }
    .fixed a.logo { margin-bottom: 0.3em; padding: 0; border-radius: 0; }
        .logo img { display: inline-block; float: left; max-width: 30px; padding: 0.2em; background: #FFF; border-radius: 50%; }
        .fixed .logo img { max-width: 30px; transition: all .3s; }
        .logo span { display: inline-block; float: left; margin: 0.4em 0 0 0.3em; color: #FFF; font: normal 900 150%/1 'HoboStd', serif; }
        a.logo:before { content: ''; width: 0; height: 0; position: absolute; right: -11px; top: 15%; transform: rotate(-15deg); border-left: 15px solid #ee3485; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
        .fixed a.logo:before { display: none; }
            
    .sloganContent { float: left; width: 53%; margin-left: 1%; position: relative; background: gray;}
    .fixed .sloganContent { display: none; }
        .sloganContent .item { display: none; float: left; margin-top: 0.5em; padding: 0.3em 0.5em; position: absolute; left: 0; top: -0.5em; background: #f6eb12; border-radius: 10px; font-size: 80%; font-style: italic; transform: scale(1, 1) rotate(-2.5deg); animation: slogan 1s; }
        .sloganContent .item:nth-child(2) { left: auto; right: 5%; top: -0.2em; z-index: 2; color: #FFF; background: #6fccdd; transform: scale(1, 1) rotate(5deg); animation: slogan2 1s; } 
        .sloganContent .item:nth-child(3) { left: 25%; top: 1.6em; color: #FFF; background: #ee3485; transform: scale(1, 1) rotate(-1deg); animation: slogan3 1s; }
            .sloganContent .item:after { content: ''; width: 0; height: 0; position: absolute; left: 10%; bottom: -10px; border-left: 10px solid transparent; border-top: 10px solid #f6eb12; border-right: 10px solid transparent; } 
            .sloganContent .item:nth-child(2):after { border-top-color: #6fccdd; }
            .sloganContent .item:nth-child(3):after { border-top-color: #ee3485; }
        .sloganContent .item.active { display: inline-block; }
            
    .navButton { display: block; float: right; margin-top: 1.15em; padding: 0.25em 0.5em; position: relative; z-index: 11; color: #036ece !important; background: #ee3485; border-radius: 3px; }
        .fixed .navButton { margin-top: 0.1em; padding: 0.15em 0.5em; transition: all .3s; }
        .navButton .lineContent { display: block; float: left; width: 1.5em; padding: 0.3em 0 0; }
            .navButton .line:first-child:before { content: ''; display: block; float: left; width: 100%; height: 3px; background: #FA0000; background: #FFF; }
            .navButton .line:first-child:after { content: ''; display: block; float: left; width: 100%; height: 3px; margin-top: 0.4em; background: #6fccdd; background: #FFF; }
            .navButton .line + .line:before { content: ''; display: block; float: left; width: 100%; height: 3px; margin-top: 0.4em; background: #76c043; background: #FFF; }
            .navButton:hover .line:first-child:before { transform: scale(1.20, 1); transition: all .5s; }
            .navButton:hover .line:first-child:after { transform: scale(1.20, 1); transition: all .5s; }
            .navButton:hover .line + .line:before { transform: scale(1.20, 1); transition: all .5s; }
        .navButton .title { float: left; margin-left: 0.5em; color: #ee3485; color: #FFF; font-size: 110%; line-height: 1.6; text-transform: uppercase; } 
    .navigationContent { display: block; width: 0; position: absolute; right: 0; top: 100%; z-index: 15; overflow: hidden; }
    .navigationContent.active { width: 25%; }
        .navigation { display: block; width: 100%; margin: 0; padding: 0; position: relative; right: -100%; background: #ee3485; background: #FFF; list-style-type: none; }
        .active .navigation { right: 0; transition: all .4s; }
        .inactive .navigation { right: -100%; transition: all 10s; }
            .navigation li { margin: 0; padding: 0; border-top: 1px solid #ffb0b0; }
            .navigation li:first-child { border-top: none; }
                .navigation a { display: block; padding: 0.5em 3%; color: #ee3485 !important; text-align: left; text-decoration: none; }
                    .navigation a:after { content: '\f105'; float: left; margin-right: 1em; font-family: fontAwesome; }
                .navigation .close a { text-align: center; }
                    .navigation .close a:after { display: none; }
    .navigationOverlay { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 11; background: rgba(0, 0, 0, 0.3); animation: navigationOverlay .3s; }
        .navigationOverlay .closeNavigation { float: left; width: 30px; height: 30px; position: absolute; right: 0; top: 0; }
            .navigationOverlay .closeNavigation:before { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 48%; background: #FFF; transform: rotate(45deg); }
            .navigationOverlay .closeNavigation:after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 48%; background: #FFF; transform: rotate(-45deg); }            
    .logoMobil { display: none; }
            
    .cartButtonContent { float: right; margin: 1.5em 1em 0 0; }
    .fixed .cartButtonContent { margin-top: 0.54em; }
    .cartButton { display: inline-block; float: right; margin: 0; position: relative; font-size: 150%; line-height: 1; }
    .fixed .cartButton { font-size: 130%; transition: all .3s; }
        .cartButton .piece { float: left; padding: 0.1em 0.3em; position: absolute; right: -0.2em; top: -1.2em; color: #FFF; background: #6fccdd; border-radius: 50px; font-size: 45%; font-weight: bold; }
        .fixed .cartButton .piece { color: #ee3485; background: #FFF; }
        .fixed .cartButton.active .piece { color: #FFF; background: #6fccdd; }
        
    .cartContentSimple { display: none; float: left; min-width: 30%; position: absolute; right: 2%; top: 3.5em; z-index: 11; }
    .fixed .cartContentSimple { top: 2.34em; }
    .cartContentInnerSimple { float: left; width: 100%; box-sizing: border-box; margin: 1.5em 0 0; position: relative; background: #FFF; border: 2px solid #ee3485; border-radius: 5px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); }
    .cartButtonContent:hover .cartContentSimple { display: block; }
    .cartContentSimple.active { display: block; }
        .cartContentSimple .close { display: inline-block; width: 1em; height: 1em; position: absolute; top: 0.5em; right: 2%; }
            .cartContentSimple .close:before { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 50%; background: red; transform: rotate(45deg); }
            .cartContentSimple .close:after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 50%; background: red; transform: rotate(-45deg); }
        .cartContentSimple .close:hover { transform: scale(1.1, 1.1); transition: all .3s; }
        .cartContentSimple:after { content: ''; display: none; width: 0; height: 0; position: absolute; right: 30%; top: -7px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 5px solid #ee3485; }
        .cartContentSimple h3 { margin: 0; }
        .cartListSimple { display: table; float: left; width: 96%; margin: 0 2% 0.5em; }
            .cartListSimple .row { display: table-row; }
            .cartListSimple .row.package { background: #6fccdd; }
                .cartListSimple .cell { display: table-cell; padding: 0.2em 2%; text-align: left; vertical-align: middle; }
                .cartListSimple .cell.right {  text-align: right; }
                .cartListSimple .cell.center { text-align: center; }
                .cartListSimple .row.package .cell { color: #FFF; }
                .cartListSimple img { max-width: 50px; }
                    .cartListSimple .delContent { display: block; }
                        .cartListSimple .del { display: inline-block; padding: 0.1em 0.5em; color: #FFF; background: #FF0000; border: 1px solid #FFF; border-radius: 3px; font-size: 65%; font-weight: bold; text-decoration: none; }
                        .cartListSimple .del:hover { box-shadow: 0 0 4px rgba(255, 0, 0, 0.8); border: 1px solid #ffbcbc; transition: all .3s; }
        .cartContentSimple .moreCartButton { display: block; float: left; width: 100%; box-sizing: border-box; padding: 0.25em 2%; color: #FFF; background: #ee3485; text-decoration: none; }
        .cartContentSimple .moreCartButton:hover { background: #bd0153; transition: all .3s; ; transition: all .3s; }
        .cartContentSimple a { text-decoration: none; }
        .cartContentSimple .note { display: block; font-size: 80%; color: red; }
        .cartContentSimple .empty { display: inline-block; padding: 1em 0 1em; color: red; }
    
    .loginButton { display: inline-block; float: right; margin: 0.9375em 0.625em 0 0; font-size: 160%; line-height: 1; text-decoration: none !important; }
    .loginButton.active { margin: 0.5em 0.5em 0 0; color: #76c14a; }
        .loginButton span { display: block; padding: 0.2em 0.2em; color: #FFF; background: #76c14a; border-radius: 3px; font-size: 50%; }
        .fixed .loginButton { margin-top: 0.4em; font-size: 135%; transition: all .3s; }
        .fixed .loginButton.active { margin: 0.2em 0.59em 0 0; }
        .fixed .header .cartButton,
        .fixed .header .loginButton { color: #FFF; }
            .fixed .header .loginButton span { color: #FFF; background: none; }
            
    .searchContent { float: left; width: 100%; box-sizing: border-box; margin: 0.5em 0 1em 0; padding: 0.5em 0; background: #6fccdd; box-shadow: 0 -2px 8px rgba(111, 204, 221, 0); border-top: 0 solid #b6f4ff; border-bottom: 0px solid #cef7ff; }
        .searchClose { display: none; }
        .searchInnerContent { width: 100%; max-width: 1450px; box-sizing: border-box; margin: 0 auto; padding: 0 2%; text-align: center; }
            .searchBox { display: inline-block; width: 40%; position: relative; }
                .searchBox input[type=text] { display: inline-block; width: 100%; height: 2.5em; box-sizing: border-box; padding: 0 1%; background: #FFF; border: 0px solid #FFF; border-radius: 0; }
                .searchBox input[type=text]:focus { outline: none; }
                .searchBox input[type=text]::placeholder { color: #6fccdd; }
                .searchBox button { position: absolute; right: 0; top: 0.2em; color: #6fccdd; background: none; border: none; font-size: 150%; }
            .labelContent { display: inline-block; padding: 0; text-align: left; }
                .labelContent .label { display: inline-block; margin-left: 0.5em; padding: 0 0.5em; color: #FFF; background: #ee3485; border-radius: 3px; font-size: 80%; text-decoration: none; }
                .labelContent .label.active { background: #76c14a !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border: 1px solid #FFF; }
            
.breadcrumb { max-width: 1450px; box-sizing: border-box; margin: 0 auto; padding: 0 2%; list-style-type: none; }
    .breadcrumb li { float: left; padding-left: 1em; position: relative; font-size: 80%; }
    .breadcrumb li:first-child { padding-left: 0; }
        .breadcrumb li:before { content: '\f105'; position: absolute; left: 0.3em; font-family: fontAwesome; }
        .breadcrumb li:first-child:before { display: none; }
        .breadcrumb a { text-decoration: none; }
        
.shareBox { width: 100%; max-width: 1450px; margin: 0 auto; padding: 0.5em 2%; }

/*
    .sloganContent { display: none; float: left; width: 96%; height: 2em; margin-top: 0.5em; padding: 0 2%; position: relative; color: #FFF; background: #fa0000; font: normal normal 150%/1.625 'Roboto Condensed', serif; }
        .sloganContent .sloganItem { display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0em; }
        .sloganContent .sloganItem:first-child { display: block; }
            .sloganItem > span { display: table; width: 100%; height: 100%; }
                .sloganItem > span > span { display: table-cell; vertical-align: middle; }
*/

/**********************************************************************************************************************************************************************
 * Tartalom
 **********************************************************************************************************************************************************************/

/* Általános elemek */
h1 { float: left; width: 100%; margin: 0.2em 0 0.3em; padding: 0; position: relative; color: #ee3485; box-sizing: border-box; font: normal bold 200%/1.625 'Roboto Condensed', serif; }
h2 { float: left; width: 100%; margin: 0.3em 0; padding: 0; box-sizing: border-box; color: #ee3485; font: normal 900 180%/1.625 'Roboto Condensed', serif; }
h3 { float: left; width: 100%; margin: 0.3em 0; padding: 0; box-sizing: border-box; color: #ee3485; font: normal 900 150%/1.625 'Roboto Condensed', serif; }
h4 { float: left; width: 100%; margin: 0.3em 0; padding: 0; box-sizing: border-box; font: normal 900 125%/1.625 'Roboto Condensed', serif; }
h5 { float: left; width: 100%; margin: 0.3em 0; padding: 0; box-sizing: border-box; font: normal 900 100%/1.625 'Roboto Condensed', serif; }
h6 { float: left; width: 100%; margin: 0.3em 0; padding: 0; box-sizing: border-box; font: normal 900 75%/1.625 'Roboto Condensed', serif; }
p { float: left; width: 100%; margin: 0; padding: 0.25em 0; box-sizing: border-box; }

/* Táblázatok */
table { float: left; width: 100%; margin: 1em 0; border-collapse: collapse; border: none; }
    table tr:nth-child(even) { background: #ececec; }
    table th { padding: 0.5em 1em; text-align: left; }
    table td { padding: 0.5em 1em; }
.responsiveTable { float: left; width: 100%; margin: 1em 0; overflow-x: auto; }
    .responsiveTable .note { display: none; float: left; width: 100%; padding: 1em; box-sizing: border-box; font-size: 90%; text-align: center; }

/* Listák */
ul, ol { clear: left; margin: 0; padding: 0 0 0 5%; }
ul { margin: 0; padding: 0 0 0 4%; }
ul.noList { list-style-type: none; padding: 0 0 0 2%; }
    li { padding: 0.5% 0; }

/* Idézet */
blockquote { float: left; margin: 1em; padding: 0.5em 1%; box-sizing: border-box; position: relative; font-size: 80%; }
    blockquote:before,
    blockquote:after { display: inline-block; float: left; color: #ea3084; font-family: FontAwesome; font-size: 2em; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    blockquote:before { content: "\f10d"; }
    blockquote:after { content: "\f10e"; }
    blockquote:before { position: absolute; top: -0.5em; left: 5px; }
    blockquote:after { position: absolute; bottom: -0.5em; right: 5px; }
    blockquote .quote { line-height: 1.2; }
    blockquote .author { float: right; padding: 0.5em 0; font-size: 90%; font-weight: bold; }
    
.offerContent { float: left; width: 100%; box-sizing: border-box; padding:  0.5em 2% 0.5em; color: #ee3485; background: #f5f5f5; text-align: center; }   

/* Csomag slider */
.sliderContent { float: left; width: 100%; padding: 0.5em 0; position: relative; overflow: hidden; }
    .sliderContent .leftButton,
    .sliderContent .rightButton { display: none; }
    .sliderInnerContent { display: flex; flex-wrap: wrap; float: left; width: 100%; position: relative; text-align: center; }
        .sliderInnerContent .item { display: block; float: left; width: 24%; box-sizing: border-box; padding: 1em 1% 1.5em; position: relative; color: #FA0000; text-align: center; text-decoration: none; }
            .sliderInnerContent .title { display: block; width: 94%; box-sizing: border-box; margin-left: 3%; padding: 0.2em 0.3em 0.2em; color: #FFF; background: #8e258a; border-radius: 0.75em; line-height: 1.2; font-weight: bold; transform: rotate(-0deg); }
            .sliderInnerContent .actionFlag { display: block; float: left; width: 2.5em; height: 2.1em; padding: 0.4em 0 0; position: absolute; right: 17%; bottom: 20%; z-index: 3; color: #FFF; background: url(images/bgHeartP.svg) no-repeat center center; background-size: 100% 100%;  font-size: 120%; font-weight: bold; text-align: center; transform: rotate(-10deg); transition: all .3s; }
            .sliderInnerContent .item:hover .actionFlag { transform: scale(1.3, 1.3); animation: itemHover linear .3s; box-shadow: none; animation: heartbeat linear infinite 1s; }
            .sliderInnerContent .extraDiscountFlag { display: block; float: left; width: 100%; box-sizing: border-box; padding: 0.2em 1em; position: absolute; left: 0; bottom: 0; color: #8e258a; background: rgba(255, 255, 255, 0.92); font-weight: bold; }
            .sliderInnerContent .buttonContent { width: 100%; position: absolute; left: 0; bottom: 0; text-align: center; }
                .sliderInnerContent .buttonContent span { display: inline-block; padding: 0.05em 0.4em; color: #FFF; background: #8e258a; border-radius: 3px; transition: all .3s; }
                .sliderInnerContent .item:hover .buttonContent span { background: #801d7c; }
            .sliderInnerContent .item:nth-child(2) .title { background: #6fccdd; }
            .sliderInnerContent .item:nth-child(2) .actionFlag { background: url(images/bgHeartB.svg) no-repeat center center; background-size: 100% 100%; }
            .sliderInnerContent .item:nth-child(2) .extraDiscountFlag { color: #6fccdd; }
            .sliderInnerContent .item:nth-child(2) .buttonContent span { background: #6fccdd; }
            .sliderInnerContent .item:nth-child(2):hover .buttonContent span { background: #57b1c1; }
            .sliderInnerContent .item:nth-child(3) .title { background: #76c043; }
            .sliderInnerContent .item:nth-child(3) .actionFlag {  background: url(images/bgHeartG.svg) no-repeat center center; background-size: 100% 100%;  }
            .sliderInnerContent .item:nth-child(3) .extraDiscountFlag { color: #76c043; }  
            .sliderInnerContent .item:nth-child(3) .buttonContent span { background: #76c043; }
            .sliderInnerContent .item:nth-child(3):hover .buttonContent span { background: #68af38; }
            .sliderInnerContent .item:nth-child(4) .title { background: #FA0000; }            
            .sliderInnerContent .item:nth-child(4) .actionFlag {  background: url(images/bgHeartR.svg) no-repeat center center; background-size: 100% 100%; }
            .sliderInnerContent .item:nth-child(4) .extraDiscountFlag { color: #FA0000; }
            .sliderInnerContent .item:nth-child(4) .buttonContent span { background: #FA0000; }
            .sliderInnerContent .item:nth-child(4):hover .buttonContent span { background: #ea0202; }
            .sliderInnerContent .item:nth-child(5) .title { background: #f15c24; }        
            .sliderInnerContent .item:nth-child(5) .actionFlag {  background: url(images/bgHeartO.svg) no-repeat center center; background-size: 100% 100%;  }
            .sliderInnerContent .item:nth-child(5) .extraDiscountFlag { color: #f15c24; }   
            .sliderInnerContent .item:nth-child(5) .buttonContent span { background: #f15c24; }
            .sliderInnerContent .item:nth-child(5):hover .buttonContent span { background: #da4d18; }
            .sliderInnerContent img { display: block; width: 85%; margin: 0.5em auto; }
            
/* Termékek */
h1 span {  display: inline-block; margin: 0 0 0 0.5em; padding: 0.1em 0.35em; position: relative; top: -0.5em; color: #FFF; background: #ee3485; border-radius: 50%; font-size: 50%; line-height: 1; transform: rotate(0deg); }
.catDesc { float: left; width: 100%; padding: 0 0 1em; }
.productContent { display: flex; flex-wrap: wrap; float: left; width: 100%; padding: 0.5em 0; }
    .productBox { float: left; width: 24.25%; box-sizing: border-box; margin: 0 1% 1% 0; padding: 0.5em 1% 2.7em; position: relative; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border: 0px solid #FFF; border-radius: 3px; text-align: center; }
    .productBox:nth-child(4n + 4) { margin-right: 0; }
    .productBox:after { content: ''; width: 80%; height: 0; position: absolute; left: 10%; bottom: 0; }
    .productBox:hover { box-shadow: 0 0 3px rgba(238, 53, 133, 0.6); transition: all .3s; }
        .productBox .title { float: left; width: 100%; margin-bottom: 0.2em; color: #ee3485; font-weight: normal; line-height: 1.3; text-decoration: none; text-transform: uppercase; }
            .productBox .title span { display: block; width: 100%; padding: 0.2em 0 0.2em; position: relative; color: #ee3485; font-weight: normal; font-size: 80%; text-transform: none; }
        .productBox .imageContent { display: inline-block; position: relative; }
        .productBox .price { display: inline-block; margin-top: 0.2em; padding: 0.1em 0.5em; position: absolute; right: 5%; bottom: 30%; color: #FFF; background: #76c14a; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); border: 2px solid  #FFF; border-radius: 3px; transform: rotate(-5deg); font-weight: bold; text-decoration: none; }
        .productBox .price.action { background: red; }
            .productBox .price .oldPrice { display: block; font-size: 80%; font-weight: normal; line-height: 1; text-decoration: line-through; }
            .productBox > .actionFlag { display: block; float: left; width: 2.5em; height: 2.1em; padding: 0.4em 0 0; position: absolute; left: 17%; bottom: 20%; z-index: 3; color: #FFF; background: url(images/bgHeartR.svg) no-repeat center center; background-size: 100% 100%; font-size: 120%; font-weight: bold; text-align: center; text-decoration: none; transform: rotate(-10deg); transition: all .3s; }    
            a:hover + .actionFlag { transform: scale(1.3, 1.3); animation: itemHover linear .3s; box-shadow: none; animation: heartbeat linear infinite 1s; }
        .productBox .flagContent { float: left; max-width: 40%;  padding: 0.5em 2%; position: absolute; right: 0%; bottom: 40%; }
            .productBox .flagContent .actionBox { display: block; margin: 0 0 0.3125em; padding: 0.1em 0.3em; color: #FF0000; background: #f6eb12;  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); border: 1px solid #FFF; border-radius: 3px; font-size: 80%; text-decoration: none; }            
            .productBox .flagContent .freeDelivery { display: block; box-sizing: border-box; margin: 0 0 0.25em; padding: 0.1em 0.3em; color: #FFF; background: #76c043; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); border: 1px solid #FFF; border-radius: 3px; }
                .productBox .freeDelivery i { font-size: 120%; }
                .productBox .freeDelivery span { display: inline-block; margin-left: 0.5em; font-size: 70%; line-height: 1.15; }
            .productBox .flagContent .new { display: block; box-sizing: border-box; padding: 0.1em 0.2em; color: #FFF; background: #ff0101; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); border: 1px solid #FFF; border-radius: 3px; font-size: 80%; text-transform: uppercase; text-decoration: none; }            
        .productBox .soon { float: left; width: 86%; margin: 0 5%; padding: 0.25em 2%; color: #FFF; background: red; border-radius: 3px; font-size: 80%; line-height: 1.3; }
        .productBox .imageItem { display: none; width: 100%; opacity: 0; }
        .productBox .imageItem.active { display: block; position: relative; z-index: 3; opacity: 1; animation: product 1s; }
        .productBox .tempImage { display: block; left: 0; top: 0; position: absolute; z-index: 1; }
        .catBox img { border-radius: 5px; }
        .productBox .cartButtonContent { width: 100%; box-sizing: border-box; padding: 0.5em 4% 0.3em; position: absolute; left: 0; bottom: 0; background: #f5f5f5; text-align: center; }

            .productBox .addCartButton { float: right; display: inline-block; padding: 0.05em 0.4em; color: #FFF; background: #ee3485; border-radius: 3px; text-decoration: none; }
            .productBox .addCartButton:hover { background: #bd0153; transition: all .3s; transition: all .3s; }
                .productBox .addCartButton i { font-size: 90%; }
            .productBox .priceBox { display: inline-block; float: left; color: #ee3485; font-weight: bold; font-size: 140%; line-height: 1.2; }
                .productBox .priceBox .oldPrice { display: inline-block; color: #b1b1b1; font-size: 60%; text-decoration: line-through; }
            .productBox .button-right { float: right; }
                
            .productBox .moreButton { float: right; display: inline-block; padding: 0.05em 0.4em; color: #FFF; background: #6fccdd; color: #ee3485; background: #FFF; border-radius: 3px; text-decoration: none; }
            .productBox .moreButton:hover { transform: scale(1.1, 1.1); transition: all .3s; }
                .productBox .moreButton i { font-size: 90%; }
            .productBox .notifiedButton { display: inline-block; float: right; padding: 0.05em 0.4em; color: #FFF; background: #ee3485; border-radius: 3px; text-decoration: none; }
            
            .productBox .conditionAmount { float: right; padding: 0 0.5em; color: #FFF; background: #ee3485; border-radius: 3px; font-size: 90%; }
        .productBox .videoIcon { width: 100%; position: absolute; left: 0; bottom: 45%; color: #FFF; font-size: 200%; text-align: center; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); }
        .catBox .moreButtonContent { width: 100%; position: absolute; left: 0; bottom: 0.5em; text-align: center; } 
            .catBox .moreButtonContent a { display: inline-block; padding: 0.05em 0.4em; color: #FFF; background: #ee3485; border-radius: 3px; text-decoration: none; }
            .catBox .moreButtonContent a:hover { background: #bd0153; transition: all .3s; }
                .catBox .moreButtonContent a i { font-size: 90%; }
    .moreProductButtonContent { float: left; width: 100%; padding: 1.5em 0; text-align: center; }
        .moreProductButton { display: inline-block; padding: 0.2em 0.5em; color: #FFF !important; background: #ee3485; border-radius: 3px; text-align: center; text-decoration: none !important; }
        .moreProductButton:hover { background: #bd0153; transition: all .3s; }
        .moreProductButton .loader { display: none; width: 0.75em; height: 0.75em; position: relative; top: 0.1em; border: 3px solid #FFF; border-left-color: #ee3485; border-radius: 50%; line-height: 0; }
        .moreProductButton.active i:first-child { display: none; }
        .moreProductButton.active .loader { display: inline-block; animation: buttonLoader linear infinite 1s; }
.hide { display: none; }

/* Termék aloldal */
.productDetail {  float: left; width: 100%; }
    .productDetail .leftContent { float: left; width: 65%; box-sizing: border-box; padding: 0 2% 0 0; }
        .productDetail .imageContent { float: left; width: 96%; margin: 0 2%; position: relative; overflow: hidden; }
            .imageContent .leftButton {  display: inline-block; padding: 0.2em 0.4em; left: 0; top: 38%; position: absolute; background: rgba(228, 228, 228, 0.8); border-radius:  3px; font-size: 170%; line-height: 1; }
            .imageContent .rightButton { display: inline-block; padding: 0.2em 0.4em; right: 0; top: 38%; position: absolute; background: rgba(228, 228, 228, 0.8); border-radius: 3px; font-size: 170%; line-height: 1; }
            .imageContent .leftButton.inactive,
            .imageContent .rightButton.inactive { color: #dadada; }
            .imageContent .leftButton:hover,
            .imageContent .rightButton:hover { background: rgba(228, 228, 228, 1); transition: all .3s; }
            .productDetail .imageInnerContent { display: table; float: left; width: 100%; position: relative; }
                .productDetail .imageContent .item { display: table-cell; width: 100%; text-align: center; vertical-align: middle; }
                    .productDetail .imageContent img,
                    .productDetail .imageContent iframe { max-width: 100%; }
            .productDetail .imageContent .status { float: left; width: 100%; text-align: center; }
                .productDetail .imageContent .status span { display: inline-block; width: 0.5em; height: 0.5em; margin: 0 0.2em; background: #dadada; border-radius: 50%; }
                .productDetail .imageContent .status span.active { background: #ee3485; transform: scale(1.1, 1.1); }
            .productDetail .description .more { display: none; }
    .productDetail .rightContent { float: left; width: 35%; }
        .productDetail .rightContent .buttonContent { float: left; width: 100%; box-sizing: border-box; margin: 0 0 0.25em; padding: 0.5em 2%; border: 2px solid #ee3485; border-radius: 5px; text-align: center; }
            .productDetail .buttonContent .price { float: left; color: #ee3485; font-size: 150%; font-weight: bold; line-height: 1.3; }
                .productDetail .buttonContent .oldPrice { display: block; font-size: 100%; font-weight: normal; font-style: italic; text-decoration: line-through; }
                .productDetail .buttonContent .actionPrice { font-size: 85%; }
            .productDetail .buttonContent .piece { display: inline-block; }
                .productDetail .buttonContent .piece input { display: inline-block; width: 2.5em; height: 1.8em; margin: 0 0.5em; color: #FFF; background: #ee3485; border: none; border-radius: 3px; font-weight: bold; text-align: center; }
                .productDetail .buttonContent .piece a { display: inline-block; position: relative; top: 0.1em; font-size: 120%; }
            .productDetail .buttonContent .addCartButton { display: inline-block; float: right; padding: 0.2em 0.5em; color: #FFF; background: #ee3485; border-radius: 3px; text-decoration: none; }
            .productDetail .buttonContent .addCartButton:hover { background: #bd0153; transition: all .3s; }
            .productDetail .buttonContent .conditionAmount { float: right; padding: 0.2em 0.5em; color: #FFF; background: #ee3485; border-radius: 3px; }
            
            .productDetail .rightContent h2 { margin: 0.5em 0 0.2em; padding: 0 1%; font: normal bold 165%/1.625 'Roboto Condensed', serif; text-align: center; }
            .productDetail .relatedContent { float: left; width: 100%; box-sizing: border-box; border: 2px solid #ee3485; border-radius: 5px; }
                .productDetail .relatedContent .relatedBox { float: left; width: 98%; box-sizing: border-box; min-height: 4em; margin: 0 1%; padding: 0.35em 3%; color: #6fccdd; border-top: 1px solid #ee3485; text-decoration: none; }
                .productDetail .relatedContent .relatedBox:first-child { border-top: none; }
                    .productDetail .relatedBox img { display: block; float: left; width: 20%; margin-right: 1em; }
                    .productDetail .relatedBox span { display: block; float: left; width: 70%; padding: 0.3em 0 0.5em; color: #ee3485; }
                    .productDetail .relatedBox .more { float: right; width: auto; }
                    .productDetail .relatedBox:hover .more { transform: scale(2, 2); transition: all .3s; }
            .savings { float: left; width: 100%; box-sizing: border-box; margin: 0.25em 0; padding: 0.5em 2%; color: #FFF; background: #76c043; border-radius: 5px; text-align: center; }
                .savings span { display: inline-block; margin-left: 0.5em; font-weight: bold; font-size: 120%; }
            .productDetail .actionBox { float: left; width: 100%; box-sizing: border-box; margin: 0; padding: 0.5em 2%; color: #FF0000; border-radius: 5px; text-align: center; }
                .productDetail .actionBox > span { display: block; color: #000; }
                    .productDetail .actionBox .remainingTime { display: inline-block; margin-left: 0.25em; color: #000; }
                        .productDetail .actionBox i { position: relative; top: 0.1em; font-size: 130%; }
                        .productDetail .actionBox .remainingTime span { display: inline-block; margin: 0; padding: 0; color: #FF0000; background: #FFF; border-radius: 3px; font-size: 180%; font-weight: bold; line-height: 1.3; }
                        .productDetail .actionBox .remainingTime span.text { margin: 0 0.3em 0 0.3em; color: #000; font-size: 80%; font-weight: normal; }
            .productDetail .notifiedButton { display: inline-block; float: right; padding: 0.2em 0.5em; color: #FFF; background: #ee3485; border: none; border-radius: 3px; font-weight: bold; text-align: center; text-decoration: none; }
            .productDetail .notifiedButton:hover { transform: scale(1.1, 1.1); transition: all .3s; }
            .productDetail .freeDeliveryBox { float: left; width: 100%; box-sizing: border-box; margin: 0.25em 0; padding: 0.6em 2%; color: #FFF; background: #76c043; border-radius: 5px; text-align: center; text-transform: uppercase; }
                .productDetail .freeDeliveryBox i { font-size: 130%; }
                .productDetail .freeDeliveryBox span { margin-left: 0.75em; }
    .otherPurchasedContent { float: left; width: 100%; position: relative; overflow: hidden; }
        .otherPurchasedContent .leftButton { left: 0; top: 40%; position: absolute; font-size: 170%; }
        .otherPurchasedContent .rightButton { right: 0; top: 40%; position: absolute; font-size: 170%; }
        .otherPurchasedContent .leftButton.inactive,
        .otherPurchasedContent .rightButton.inactive { color: #dadada; }
        .otherPurchasedContent .leftButton:hover, 
        .otherPurchasedContent .rightButton:hover { transform: scale(1.5, 1.5); transition: all .3s; }
        .otherPurchasedInnerContent { display: flex; flex-wrap: wrap; float: left; width: 100%; position: relative; }
            .otherPurchasedInnerContent .productBox { width: 20%; }
            
    .optionalContent { float: left; width: 100%; margin: 0.25em 0 0; border: 2px solid #ee3485; border-radius: 5px; }
        .optionalContent .head { float: left; width: 100%; box-sizing: border-box; margin: 0 0 0.5em; padding: 0.5em 2%; color: #FFF; background: #ee3485; text-align: center; }
            .optionalContent .head > span { display: block; }
                .optionalContent .head .remain { display: inline-block; padding: 0 0.3em; color: #FF0000; background: #FFF; border-radius: 3px; font-weight: bold; line-height: 1.2; }
        .optionalContent .firstButtonContent { float: left; width: 100%; box-sizing: border-box; padding: 0.25em 2% 0.5em; text-align: center; }
            .optionalContent .addFirstButton { display: inline-block; }
        .optionalContent .optionalBox { float: left; width: 100%; box-sizing: border-box; padding: 0.1em 2%; position: relative; }
            .optionalBox .addButtonContent { float: left; width: 10%; padding: 0.4em 0 0; }
                .optionalBox .addButtonContent a { display: inline-block; padding: 0.1em 0.4em 0; color: #FFF; background: #ee3485; border-radius: 3px; }
                .optionalBox .addButtonContent a:hover { transform: scale(1.1, 1.1); transition: all .3s; }
                .inactive .optionalBox .addButtonContent a { background: #CCC; }
            .optionalBox .image { float: left; width: 15%; }
                .optionalBox .image img { display: block; width: 100%; }
            .optionalBox .name { float: left; width: 75%; box-sizing: border-box; padding: 0.3em 0 0 2%; }
                .optionalBox a { text-decoration: none; }
        .optionalContent .optionalTempImage { display: block; position: absolute; }
        .optionalContent .addTemp { display: inline-block; float: left; padding: 0.1em 0.5em; position: absolute; z-index: 5; color: #FFF; background: #6fccdd; border-radius: 5px; font-size: 80%; }
    .selectedContent { float: left; width: 100%; box-sizing: border-box; margin: 1em 0 1em; padding: 0.2em 2% 0.2em; border: 1px dashed #ee3485; border-radius: 5px; text-align: center; }
        .selectedContent .head { float: left; width: 100%; }
        .selectedContent .selectedItem { display: inline-block; float: left; margin: 0.25em 0.5em 0.25em 0; padding: 0.1em 0.5em; position: relative; color: #FFF; background: #6fccdd; border-radius: 5px; font-size: 80%; text-decoration: none; }
            .selectedContent .selectedItem:hover { background: red; }
            .selectedContent .selectedItem:hover:after { content: '\f00d'; display: inline-block; position: absolute; right: -0.8em; top: -1em; z-index: 2; color: red; font-family: fontAwesome; }
        .selectedContent .note { display: block; float: left; width: 100%; box-sizing: border-box; margin: 0.5em 0; padding: 0 2%; color: #FFF; background: red; border-radius: 3px; font-size: 90%; }
        .hide { display: none !important; }
        
    .subscriptionContent { float: left; width: 100%; padding: 0.5em 0 0; text-align: center; }
        .subscriptionContent .subscriptionButton { display: inline-block; padding: 0.2em 0.5em; color: #FFF; background: #6fccdd; border-radius: 3px; text-decoration: none; }
        .subscriptionContent .subscriptionButton:hover { transform: scale(1.1, 1.1); transition: all .3s; }
            .subscriptionButton.saved:after { content: '\F00C'; margin-left: 0.5em; font-family: fontAwesome; }
            
    .productSliderContent { float: left; width: 100%; position: relative; overflow: hidden; }
        .productSliderInnerContent { float: left; width: 100%; position: relative; }
            .productSliderContent .item { display: block; float: left; width: 20%; box-sizing: border-box; padding: 0 0.5%; text-align: center; }
                .productSliderContent .item img { width: 100%; }
                .productSliderContent .item .title { display: block; float: left; width: 100%; text-align: center; }
        .productSliderContent .leftButton { display: inline-block; position: absolute; left: 0; top: 20%; z-index: 10; color: #ee3485; font-size: 200%; line-height: 1; }
        .productSliderContent .rightButton { display: inline-block; position: absolute; right: 0; top: 20%; z-index: 10; color: #ee3485; font-size: 200%; line-height: 1; }    
        .productSliderContent .inactive { display: none; }
            
/* Kosár */
.cartStatus { margin: 0; padding: 0; list-style-type: none; }
    .cartStatus li { float: left; }
.cartList { display: table; width: 100%; }
    .cartList .row { display: table-row; }
    .interlaced .row:nth-child(even) { background: #ececec; }
        .cartList .row.head .cell { font-weight: bold; }
        .cartList .cell { display: table-cell; padding: 0.5em 2%; border-top: 2px solid #dadada; vertical-align: middle; }
        .interlaced .cell { border-top: none; }
        .cartList .packageHead .cell { background: #6fccdd; }
        .cartList .packageHead .name { font-weight: bold; text-transform: uppercase; }
        .cartList .packageHead + .package .cell,
        .cartList .package + .package .cell,
        .cartList .package + .packageHead .cell { border-top: none; }
        .cartList .package,
        .cartList .package .cell { background: #e2faff; }
        .cartList .package .cell:first-child { border-left: 10px solid #6fccdd; }
        .cartList .package .cell:last-child { border-right: 2px solid #6fccdd; }
        .cartList .packageHead + .row .cell { border-top: none; }
        .cartList .cell.image { width: 10%; }
        .cartList .cell.name { width: 45%; }
        .cartList .row:first-child .cell { border-top: none; }
        .cartList .cell.center { text-align: center; white-space: nowrap; }
        .cartList .cell.right { text-align: right; white-space: nowrap; }
        .cartList .cell > i { color: #76c14a; font-size: 280%; }
        .cartList .cell img { max-width: 100px; }
        .cartList input { display: inline-block; width: 2.5em; height: 1.8em; margin: 0 0.5em; color: #FFF; background: #ee3485; border: none; border-radius: 3px; font-weight: bold; text-align: center; }
        .cartList .piece { display: inline-block; position: relative; top: 0.1em; font-size: 120%; }        
        .cartList .buttonContent { float: left; width: 100%; padding: 0.3em 0 0; }
            .cartList .del { display: inline-block; padding: 0.1em 0.5em; color: #FFF; background: red; border: 1px solid transparent; border-radius: 3px; font-size: 65%; font-weight: bold; text-decoration: none; }
            .cartList .del:hover { box-shadow: 0 0 4px rgba(255, 0, 0, 0.8); border: 1px solid #ffbcbc; transition: all .3s; }
            .cartList .price { display: block; }
            .cartList .discount { display: inline-block; padding: 0 0.5em; color: #FFF; background: red; border-radius: 3px; font-size: 80%; font-weight: bold; transform: rotate(-4deg); }
        .cartList a { text-decoration: none; }
        .cartList .button { float: right; }
        .cartList .relatedContent { display: block; padding: 0.5em 0 0; }
            .cartList .relatedItem { display: inline-block; margin: 0 0.25em 0.25em 0; padding: 0 0.5em; color: #FFF; background: #6fccdd; border-radius: 3px; font-size: 80%; }
.cartSum { float: left; width: 100%; box-sizing: border-box; margin: 0.5em 0 0; padding: 0.3em 2%; color: #FFF; background: #ee3485; border-radius: 3px; font-size: 120%; text-align: right; }
        .cartList .cell span.note { display: block; color: #FF0000; font-size: 80%; font-style: italic; }
        .cartList .freeDelivery { display: inline-block; margin: 0 0 0 0.5em; padding: 0.1em 0.3em; position: relative; top: 0.5em; color: #FFF; background: #76c043; border-radius: 3px; text-align: center; }
            .cartList .freeDelivery i { font-size: 120%; }
            .cartList .freeDelivery span { display: inline-block; margin-left: 0.5em; font-size: 70%; line-height: 1.15; }
        .cartSync { display: inline-block; float: left; margin-bottom: 0.5em; padding: 0 0.5em; border: 1px solid #ee3485; border-radius: 3px; font-size: 90%; line-height: 1.4; text-decoration: none !important; }
        .cartSyncSuccess { display: inline-block; float: left; margin-bottom: 0.5em; padding: 0 0.5em; color: #3eaa48; border: 1px solid #3eaa48; border-radius: 3px; font-size: 90%; line-height: 1.4; }

/* Pénztár */
.purchaseModeContent { float: left; width: 100%; box-sizing: border-box; margin: 1em 0; padding: 1em 2% 1em; background: #ececec; border-radius: 3px; text-align: center; }
    .purchaseModeContent ul { display: block; width: 100%; margin: 0; padding: 0; list-style-type: none; }
        .purchaseModeContent li { float: left; width: 50%; padding: 0; }
            .purchaseButton { float: left; width: 100%; box-sizing: border-box; padding: 0.5em 5%; position: relative; color: #FFF !important; background: #c3c3c3; font: normal bold 110%/1.6 'Roboto Condensed', serif; text-transform: uppercase; text-decoration: none !important; }
            .purchaseButton.active { background: #6fccdd; }
                .purchaseButton.active:after { content: ''; width: 0; height: 0; position: absolute; left: calc(50% - 6px); bottom: -10px; border-left: 12px solid transparent; border-top: 10px solid #6fccdd; border-right: 12px solid transparent; }
    .loginContent { display: none; float: left; width: 100%; box-sizing: border-box; margin: 1em 0 0; padding: 0.5em 2%; background: #fdfdfd; border-radius: 3px; }
    .loginContent.active { display: block; }
        .loginContent h3 { color: #ee3485; }
        .loginBox.formBox,
        .formBox .loginBox { float: left; width: 60%; }
            .loginBox p { width: 50%; position: relative; }
            .loginBox label { width: auto; left: 4%; top: 1em; position: absolute; color: #FFF; }
            .loginBox input:focus + label { left: 4%; top: -1.1em; color: #000; font-size: 80%; transition: all .3s; }
            .loginBox input.filled + label { left: 4%; top: -1.1em; color: #000; font-size: 80%; transition: none; }
            .loginBox .submit { float: right; width: 100%; text-align: left; }
                .loginBox .submit button { float: right; }
        .socialLoginBox { float: left; width: 40%; text-align: center; }
            .socialLoginBox a { display: inline-block; width: 1.8em; margin: 0.3em 0.5em 0; padding: 0.25em 0; color: #FFF; border-radius: 3px; font-size: 150%; line-height: 1; }
            .socialLoginBox a:hover { transform: scale(1.2, 1.2); transition: all .3s; }
            .socialLoginBox .googleLoginButton { background: #FF3E30; } 
            .socialLoginBox .facebookLoginButton { background: #3b5989; }
    .purchaseModeContent .formMessage { text-align: left; }
            
    .orderSum { display: table; width: 100%; background: #ececec; border-radius: 3px; text-align: left; }
        .orderSum .row { display: table-row; }
            .orderSum .row > span { display: table-cell; padding: 0.2em 2%; }
    .orderContent .submit { width: 100%; padding: 1em 0 1em; }
        .orderContent .submit button { float: right; }
        
    .bankcard img { max-width: 200px !important; margin-left: 35% !important; }
        
/* Ügyfélkapu */
.orderDetail { display: table; float: left; width: 100%; background: #ececec; }
    .orderDetail .row  { display: table-row; }
        .orderDetail .row > span { display: table-cell; padding: 0.5em 2%; }
        .orderDetail .row > span:first-child { width: 40%; font-weight: bold; }
.downloads { margin: 0; padding: 0; list-style-type: none; }

.item { position: relative; }
    .item .have {  padding: 0.01em 0.1em 0.02em; position: absolute; right: 10%; top: 0; color: #76c14a; background: #FFF; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); border: 1px solid #ececec; border-radius: 50%; font-size: 150%; line-height: 1; }
    .item .have.remove { color: red; }
    .have:hover { color: #ee3585; transition: all .2s; }
            

/* Szöveges oldalak */
.contentBlock { float: left; width: 100%; padding: 0 0 1em 0; }
    .contentBlockInner { width: 100%; max-width: 1450px; margin: 0 auto; padding: 0 2%; box-sizing: border-box; }
        .contentBlockInner img { max-width: 100%; height: auto !important; }
        
/* Szereplők */
.castContent { float: left; width: 100%; position: relative; overflow: hidden; }
    .castContent .leftButton { display: inline-block; padding: 0.2em 0.4em; position: absolute; left: 0; top: 45%; z-index: 10; background: rgba(228, 228, 228, 0.9); border-radius: 3px; font-size: 200%; line-height: 1; }
    .castContent .rightButton { display: inline-block; padding: 0.2em 0.4em; position: absolute; right: 0; top: 45%; z-index: 10; background: rgba(228, 228, 228, 0.8); border-radius: 3px; font-size: 200%; line-height: 1; }     
    .castInnerContent { float: left; width: 100%; position: relative; left: -5%; animation: sliderLoad .8s; }
    .castContent .castBox { float: left; width: 20%; text-align: center; animation: cast1 linear infinite 1s; }
        .castBox .name { float: left; width: 100%; padding: 1em 0 0; }
            .castBox .name span { display: inline-block; padding: 0.2em 1em; position: relative; color: #FFF; background: #6fccdd; border-radius: 5px; }
                .castBox .name span:after { content: ''; width: 0; height: 0; position: absolute; top: -10px; right: 15%; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #6fccdd; }
            .castBox.female .name span { background: #ee3485; }
                .castBox.female .name span:after { border-bottom-color: #ee3485; }
            .castBox img { max-width: 150px !important; }
                
/* Szerző */
.author h1 + p img:first-child { display: inline-block; float: left; max-width: 250px; margin: 0 2em 0.5em 0.5em; border-radius: 50%; border: 8px solid #ee3585; }
.author img + span { margin-left: -3em; }        

/* Űrlapok */
.formBox { float: left; width: 100%; }
    .formBox p { float: left; width: 50%; box-sizing: border-box; padding: 0.5em 1%; }
    .formBox p.fullWidth { width: 100%; }
        .contactBox label { display: inline-block; margin: 0 0 0.8em 0.8em; padding: 0.2em 1em; position: relative; color: #FFF; background: #ee3485; border-radius: 3px; transform: rotate(-5deg); }
            .contactBox label:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 25%; bottom: -7px; border-left: 7px solid transparent; border-top: 7px solid #ee3485; border-right: 7px solid transparent; } 
        .contactBox input[type=checkbox] + label { color: #000; background: none; transform: none; }
            .contactBox input[type=checkbox] + label:after { display: none; }
        .contactBox .captcha label { min-width: 120px; }
        .contactBox .captcha input { float: left; width: 80% !important; }
        .formBox input[type=text],
        .formBox input[type=password],
        .formBox input[type=email],
        .formBox input[type=number] { width: 100%; box-sizing: border-box; height: 2.5em; padding: 0 0.5em; color: #FFF; background: #6fccdd; border: 1px solid #FFF; border-radius: 3px; }
        .formBox textarea { width: 100%; box-sizing: border-box; height: 6em; padding: 0.5em; color: #FFF; background: #6fccdd; border: 1px solid #FFF; border-radius: 3px; }
        .formBox input[type=text]:focus,
        .formBox input[type=text]:hover,
        .formBox input[type=eamil]:focus,
        .formbox input[type=email]:hover,
        .formBox textarea:focus,
        .formBox textarea:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: all .3s; }
        .formBox button { display: block; height: 2.5em; margin: 0 auto; padding: 0 2em; color: #FFF; background: #ee3485; border: 1px solid #FFF; border-radius: 3px; font-weight: bold; text-transform: uppercase; cursor: pointer; }
        .formBox button:hover { background: #bd0153; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: all .3s; }
        .formBox button .loader { display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.5em; position: relative; top: 0.1em; border: 3px solid #FFF; border-left-color: transparent; border-radius: 50%; line-height: 0; animation: loader 1s linear infinite; }
        .formBox input[type=checkbox],
        .formBox input[type=radio] { display: none; }
        .formBox input[type=checkbox] + label,
        .formBox input[type=radio] + label { display: block; float: right; width: 70%; box-sizing: border-box; padding: 0.3em; border-radius: 3px; text-align: left; }
        .formBox input[type=checkbox]:checked + label,
        .formBox input[type=radio]:checked + label { color: #FFF; background: #6fccdd; }
        .formBox input[type=radio] + label + input[type=radio] + label,
        .formBox input[type=checkbox] + label + input[type=checkbox] + label { margin-top: 0; }
            .formBox input[type=checkbox] + label:before { content: '\f0c8'; margin-right: 0.5em; color: #6fccdd; font-family: fontAwesome; }
            .formBox input[type=checkbox]:checked + label:before { content: '\f14a'; color: #FFF; }
            .formBox input[type=radio] + label:before { content: '\f10c'; margin-right: 0.5em; color: #6fccdd; font-family: fontAwesome; }
            .formBox input[type=radio]:checked + label:before { content: '\f192'; color: #FFF; }      
            p input[type=checkbox]:first-child + label { margin-left: 30%; }
            .formBox img { display: inline-block; float: left; margin-left: 1em; }
        .formBox .checkBoxContent { float: left; width: 50%; }
            .formBox .inputBox .checkBoxContent p { width: 100%; }
            
    .inputContent { display: flex; flex-wrap: wrap; padding: 0 0 1em; }
    .formBoxLeft { float: left; width: 49.5%; margin-right: 1%; }
    .formBoxRight { float: left; width: 49.5%; }
        .formBox .inputBox { float: left; width: 100%; box-sizing: border-box; margin: 0 0 1em; padding: 0 2% 0.5em; background: #ececec; border-radius: 3px; }
        .inputContent .inputBox { height: 100%; margin: 0; }
            .inputBox h3 { color: #ee3585; }
            .formBox .inputBox p { width: 50%; }
            .formBox .inputBox p.fullWidth { width: 100%; }
            
            .inputBox label { display: block; float: left; width: 30%; box-sizing: border-box; padding: 0.3em 2% 0 0; text-align: right; }
            .inputBox .fullWidth label { width: 15%; padding-right: 1%; }
            .inputBox .error label { color: red; font-weight: bold; }
                .inputBox label span { display: block; }
            .formBox .inputBox input[type=text],
            .formBox .inputBox input[type=password],
            .formBox .inputBox input[type=email],
            .formBox .inputBox input[type=number],
            .formBox .inputBox textarea { width: 70%; }
            .formBox .inputBox select { width: 70%; height: 2.5em; color: #FFF; background: #6fccdd; border: 1px solid #FFF; }
            .formBox .inputBox .fullWidth input[type=text],
            .formBox .inputBox .fullWidth input[type=password],
            .formBox .inputBox .fullWidth input[type=email],
            .formBox .inputBox .fullWidth input[type=number],
            .formBox .inputBox .fullWidth textarea { width: 35%; }
            .formBox .inputBox .fullWidth select { width: 35%; height: 2.5em; color: #FFF; background: #6fccdd; border: 1px solid #FFF; }


            .formBox .submit { width: 100%; }
            .formBox .inputBox .captchaInput { float: left; max-width: 200px; }
            .formBox .inputBox .shortNumber { width: 100px; }
            .formBox .inputBox input.short,
            .formBox .inputBox select.short { width: 8em; }
            .formBox .phoneBox { float: left; width: 100%; }
            .formBox .phoneBox input[type=number] { -moz-appearance: textfield; }
            .formBox .phoneBox input[type=number]:first-of-type { width: 3em; margin-left: 0.5em; }
            .formBox .phoneBox input[type=number]:nth-of-type(2) { width: 3em; margin-left: 0.25em; }
            .formBox .phoneBox input[type=number]:nth-of-type(3) { width: 6em; margin-left: 0.25em; }            
            
            .formBox .phoneBox input[type=number]::-webkit-outer-spin-button,
            .formBox .phoneBox input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
            
        .formBox .paymentTypeBox > span { float: left; padding-top: 0.3em; color: #898989; font-style: italic; }
        .formBox .GLSSelectorBox { float: left; width: 100%; padding: 0.5em 0 0 30%; }
        .selectedGLSPoint { float: left; width: 70%; box-sizing: border-box; margin: 0.5em 0 0 30%; padding: 0.5em; background: #FFF; border-radius: 3px; }
            
    .uploadContent { float: left; width: 98%; box-sizing: border-box; margin: 0.5em 1%; padding: 0.5em; border: 1px dashed #8c8c8c; border-radius: 3px; text-align: center; }
        .uploadContent .uploadButton { display: inline-block; padding: 0.2em 0.5em; color: #FFF; background: #6fccdd; border-radius: 3px; text-decoration: none; }
        .uploadContent .uploadButton:hover { background: #4aa8b9; transition: all .3s; }
        .uploadButton + input[type=file] { display: none; }
        .uploadBox { float: left; width: 100%; padding: 0 0 1em 0; }
            .uploadBox .uploadItem { display: inline-block; float: left;  margin: 0 0.5em 0.5em 0; padding: 0.1em 0.5em; position: relative; color: #FFF; background: #76c14a; border-radius: 3px; text-decoration: none; }
                .uploadBox .uploadItem:hover:after { content: '\f00d'; position: absolute; right: -0.9em; top: -0.9em; z-index: 2; color: red; font-family: fontAwesome; }
            .uploadBox .uploadItem img { display: block; float: none; max-width: 60px; margin: 0.25em auto; }
            
    .childBox { float: left; width: 100%; box-sizing: border-box; margin-bottom: 0.5em; position: relative; border: 2px dashed #c3c1c1; border-radius: 3px; }
        .childBox .sequenceNumber { position: absolute; left: 1%; top: 0; color: #c3c1c1; font-size: 200%; font-weight: bold; }
    
    .loginContent .inputBox h3 { text-align: center; }
    .loginContent .inputBox p { width: 50%; }
    .loginContent .inputBox input[type=text],
    .loginContent .inputBox input[type=password],
    .loginContent .inputBox input[type=email] { width: 100%; }
    .loginContent .inputBox .submit { width: 100%; }
        .loginContent .inputBox .submit a { display: inline-block; margin-right: 1em; }
    .loginContent .inputBox label { width: auto; padding: 0; text-align: left; }
    
    .downloadCodeBox { float: left; width: 100%; }
        .downloadCodeBox p { width: 100%; }
            .downloadCodeBox input[type=text] { width: 2em; }
                .downloadCodeBox input[type="text"] + input[type=text] { margin-left: .25em; }
            
.formMessage { float: left; width: 100%; margin: 1em 0; padding: 0.5em 2%; box-sizing: border-box; color: #ffffff; background-color: #3eaa48; border-radius: 3px; font-size: 115%; }
    .formMessage p:first-child .fa { position: relative; top: 5px; margin-right: 10px; font-size: 150%; }
    .formMessage p:first-child:before { content: '\f00c'; margin-right: 1em; position: relative; top: 5px; font-family: fontAwesome; font-size: 150%; }
    .formMessage p { float: left; width: 100%; margin: 0; padding: 0.2em 0 !important; }
    .formMessage ul { float: left; width: 90%; margin: 0; padding: 0 0 0 10%; color: #ffffff; list-style-type: square; }
    .formMessage li { padding: 0.5%; font-size: 90%; background: none; }
    .formMessage li:before { margin: 0; content: ""; }
    .formMessage a { color: #FFF; }
.formMessageError { color: #ffffff !important; background-color: #ff0000; }
    .formMessageError p:first-child:before { display: none; }
    .formMessageError p { margin: 0 !important; padding: 0.2em 0 !important; }
    .formMessageError a { color: #FFF; }
    .formMessage .note { font-size: 80%; font-style: italic; }
    .formMessage .moreButton { float: right; padding: 0.2em 1em; color: #ee3485; background: #FFF; border-radius: 3px; text-decoration: none; }
    .formMessage .moreButton:hover { transform: scale(1.1, 1.1); transition: all .3s; }
    
.messageBox { float: left; width: 100%; box-sizing: border-box; margin: 0.5em 0; padding: 0.25em 2%; color: #FFF; background: #6fccdd; border-radius: 3px; }
    .messageBox h2 { color: #FFF; }
    .messageBox p:first-child .fa { position: relative; font-size: 150%; }
    .messageBox p { float: left; width: 100%; margin: 0; padding: 0.5em 0 !important; }
    .messageBox ul { float: left; width: 95%; margin: 0; padding: 0 0 0 5%; color: #ffffff; list-style-type: square; }
    .messageBox li { padding: 0.2em 0; font-size: 100%; background: none; }
    .messageBox li:before { margin: 0; content: ""; }
    .messageBox a { color: #FFF; }    

/* Értesítő */
.notifiedEmail { display: inline-block; padding: 0.5em 1em; color: #FFF; background: #6fccdd; border-radius: 3px; }
            
.statusProcessing { float: left; width: 96%; padding: 1em 2%; color: #FFF; background: #76c250; text-align: center; }
    .statusProcessing i { position: relative; margin-right: 1em; animation: processing 1s infinite; }
    
/* Bemutatkozás */
.aboutBox { width: 70%; margin: 2em auto 1em; background: #f4ec39; overflow: hidden; border: 0px solid #78c14e; border-radius: 10px; }
    .aboutBoxLeft { float: left; width: 71%; padding: 0 2%; }
    .aboutBoxRight { float: left; width: 25%; }
        .aboutBox img { display: block; max-width: 100%; }
        
/* Ajánló */
/*
.offerContent { float: left; width: 100%; }
    .offerBox { float: left; width: 23%; margin: 0 1% 1em; text-align: center; text-decoration: none !important; }
        .offerBox .imageContent { display: block; width: 100%; }
        .offerBox img { display: block; width: 100%; }
        .offerBox .name { display: block; width: 96%; padding: 0.3em 2%; color: #FFF; }
        .offerBox a { display: inline-block; padding: 0.2em 0.5em; color: #FFF;  text-decoration: none; }
*/
.offerBox { float: left; width: 100%; box-sizing: border-box; margin: 0.5em 0; padding: 0.5em 2%; color: #FFF; background: #ee3485; border-radius: 3px; font-size: 115%; }
    .offerBox > p:first-child:before { content: '\f05a'; float: left; margin-right: 1em; color: #FFF; font-family: fontAwesome; font-size: 150%; line-height: 1.2; }
    .offerBox a { color: #FFF; }
    .offerBox .moreButton { float: right; padding: 0.2em 1em; color: #ee3485; background: #FFF; border: 1px solid transparent; border-radius: 3px; text-decoration: none; transition: all .3s; }
    .offerBox .moreButton:hover { border-color: #ee3485; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
        
.testimonialContent { float: left; width: 100%; padding: 0 0 1em; }
    .testimonialContent blockquote { float: left; width: 29.333333%; margin: 0 1%; padding: 1em 1%; }
        .testimonialContent blockquote img { display: block; float: left; max-width: 150px; margin: 0.5em 1em 0.5em 0; }
        .testimonialContent p { padding: 0; }
        .hiddenContent { display: none; }   
        
.bookBox { float: left; width: 100%; max-width: 240px; box-sizing: border-box; margin: 1em 0; padding: 0; position: relative; background: #ee3485; border-radius: 5px; text-align: center; text-decoration: none !important; }
    .bookBox img { display: block; width: 100%; box-sizing: border-box; border: 2px solid #ee3485; border-radius: 3px; }
    .bookBox img:first-child { position: absolute; left: 0; top: 0; z-index: 2; transform: rotateY(-22deg) skew(0, 3deg); -webkit-transform: rotateY(-22deg) skew(0, 3deg); transform-origin: 0 0; backface-visibility: visible; border: none; border-top: 2px solid #FFF; border-right: 2px solid #FFF; box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.35); }
    .popupActive .bookBox img:first-child,
    .navActive .bookBox img:first-child { transform: none; }
    .bookBox .title { display: none;  padding: 1em 1% 0.5em; color: #FFF; text-decoration: none; text-transform: uppercase; }
.bookDesc { float: left; width: 100%; box-sizing: border-box; padding: 1em 5%; }

.GLSSelectorMap { width:100%; max-width: 600px; height: 400px; margin: 0 auto; }

@keyframes explosive {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes grow {
    0% { transform: scale(1, 1); color: #FFF; }
    50% { transform: scale(2, 2); color: red;}
    100% { transform: scale(1, 1); color: #FFF; }
}

@keyframes toWhite {
    0% { background: #76c043; }
    50% { background: #FFF; }
    100% { background: #76c043; }
}

.grow { animation: toWhite .7s; }
.grow span { animation: grow .7s; }
.explosiveItem { float: left; width: 5px; height: 5px; position: absolute; z-index: 100; border-radius: 50%; background: red; animation: explosive 1s forwards;  }

/**********************************************************************************************************************************************************************
 * Lábléc
 **********************************************************************************************************************************************************************/

a.scrollDown { position: fixed; bottom: 1em; right: 0; padding: 0.25em 0.25em 0.4em 0.25em; z-index: 1000; font-size: 2em; line-height: 1; text-align: center; color: #fff; background-color: #FF0000; transition: all 0.3s ease 0s; text-decoration: none; }
    .scrollDown .fa { color: #fff; }
    .scrollDown span { display: none; padding-left: 0.25em; }
.scrollDown:hover { background-color: #b10606; }
    .scrollDown:hover span { display: inline; }
    .scrollDown:hover .fa { -webkit-transform: rotate(45deg); -webkit-transition: all .3s linear; transform: rotate(360deg); transition: all .3s linear; }
.footer { float: left; width: 100%; padding: 1em 0; font-size: 0.875em; background-color: #76c14a; }
    .footerInner { width: 90%; max-width: 1440px; margin: 0 auto; }
        .footerTop { float: left; width: 100%; text-align: center; }
            .footerTop ul { display: inline-block; margin: 0; padding: 0; list-style-type: none; }
                .footerTop ul li { float: left; }
                    .footerTop li a { display: inline-block; font-size: 150%; }
                    .footerTop li a.fb { color: #3b5998 !important; }
                    .footerTop li a.yt { color: #cc181e !important; }
                    .footerTop li a.in { color: #d801ff !important; }
                    .footerTop li a.newsletter { color: #ee3485 !important; }
                    .footerTop li a span { display: none; }
                    .footerTop li a:hover :is(.fa, img) { -webkit-transform: rotate(45deg); -webkit-transition: all .3s linear; transform: rotate(360deg); transition: all .3s linear; }                
                    .footerTop li img { display: inline-block; height: 1em; position: relative; top: 2px; }
        .footerInnerL { float: left; width: 70%; }
            .footerInnerL span { display: block; }
            .footerInnerL ul { display: inline-block; margin: 0.5em 0 0; padding: 0; list-style-type: none; }
                .footerInner ul li { float: left; padding-right: 1em; }
            .footerInnerL .label { display: inline-block; float: left; margin-right: 0.65em; line-height: 4.5; }
            .footerInnerL a:hover { color: #fff; text-decoration: none; }
        .footerInnerR { float: right; max-width: 30%; padding-top: 1.5em; }
            .footerInnerR span { float: left; padding-right: 0.75em; line-height: 2.5; }
            .logo-web200 { display: inline-block; float: left; width: 150px; }
                .logo-web200 img { width: 100%; }
                .logo-web200:hover img { transform: scale(1.05, 1.05); transition: all .3s; }
            
.upButton { display: inline-block; padding: 0.1em 0.35em 0.2em; position: fixed; left: calc(50% - 20px); bottom: -2.5em; z-index: 9; color: #FFF !important; background: #ee3585; border: 2px solid #FFF; border-radius: 50%; font-size: 130%; line-height: 1; }
.upButton:hover { transform: scale(1, 1); transition: all .3s; }

.upButtonActive { bottom: 0.1em; animation: upVisible 0.5s; }
.upButtonInactive { animation: upHide 0.4s; }       

.searchButton { float: left; width: 1em; height: 1em; padding: 0.3em; position: fixed; right: 0; top: 9%; color: #FFF !important; background: red; box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); border-left: 1px solid #FFF; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; border-top-left-radius: 5px; border-bottom-left-radius: 5px; font-size: 150%; line-height: 1; }

/* Lábléc animációk */
.logo-web200:hover { -webkit-animation-name: animation-scale; animation-name: animation-scale; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

/* Popup */
.popupOverlay { float: left; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 15; background: rgba(0, 0, 0, 0.7); overflow-y: auto; text-align: center;  }
.popupOverlay.max-width { display: flex; align-items: center; justify-content: center; }
    .popupContent { display: inline-block; width: 90%; box-sizing: border-box; padding: 1em 1% 1em; position: relative; background: #FFF; border-radius: 5px; text-align: left; }
    .popupOverlay:not(.max-width) .popupContent { max-width: 1180px; margin-top: 5em; }
    .max-width .popupContent { width: 100%; height: 100%; padding: 1em 0; border-radius: 0; }
        .popupContent .top { float: left; width: 100%; padding: 0.2em 0 0; border-bottom: 1px solid #e7e7e7; text-align: center; }
            .popupContent .closeTop { display: inline-block; text-decoration: none; }      
        .popupContent .close { position: absolute; width: 1.5em; height: 1.5em; right: 1%; top: 0.5em; }
        .popupContent .close:hover { transform: scale(1.2, 1.2); transition: all .3s; }
            .popupContent .close:before  { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 50%; background: red; transform: rotate(45deg); }
            .popupContent .close:after  { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 50%; background: red; transform: rotate(-45deg); }            
        .popupContent .messageBox { float: left; width: 100%; box-sizing: border-box; margin: 1.5em 0 0.5em; padding: 0.5em 2%; color: #000; background: #d2ffb8; border-radius: 3px; text-align: center; }
            .popupContent .messageBox i { color: #46ab46; font-size: 130%; }
        .popupContent .errorBox { color: #FFF; background: #FF0000; text-align: left; }
            .popupContent .errorBox i { margin-right: 0.5em; color: #FFF; }
        .productCartBox { display: table; float: left; width: 100%; margin-top: 1em; }
            .productCartBox > span { display: table-cell; padding: 0 2%; vertical-align: middle; }
            .productCartBox .name { width: 40%; }
            .productCartBox .image img { width: 100px; }
            .productCartBox .price { white-space: nowrap; }
            .productCartBox .delButton { display: inline-block; padding: 0.1em 0.5em; color: #FFF; background: red; border: 1px solid transparent; border-radius: 3px; font-size: 65%; font-weight: bold; text-decoration: none; white-space: nowrap; }
            .productCartBox .delButton:hover { box-shadow: 0 0 4px rgba(255, 0, 0, 0.8); border: 1px solid #ffbcbc; transition: all .3s; }
            .productCartBox .more { text-align: right; }
            .productCartBox .button { float: right; clear: both; width: 90%; box-sizing: border-box; min-width: 0; margin: 0.5em 0; background: #ee3485; border-radius: 3px; text-align: center; }
            .productCartBox .button:hover { transform: none; background: #bd0153; transition: all .3s; }
            .productCartBox .button.checkout { background: #3eaa48; }
            .productCartBox .button.checkout:hover { background: #279031; }
        .popupContent > h2 { text-align: center; }
        .max-width .popupContent > h2 { padding: 0 5%; }
            
        .popupContent .offerBox { float: left; width: 100%; box-sizing: border-box; margin: 1em 0 0; padding: 0.5em 2%; color: #FFF; background: #ee3485; border: 1px solid transparent; border-radius: 3px; font-size: 100%; text-decoration: none; text-transform: uppercase; transition: all .3s; }
            .popupContent .offerBox:before { content: '\f05a'; float: left; margin-right: 1em; color: #FFF; font-family: fontAwesome; font-size: 150%; line-height: 1; } 
        .popupContent .offerBox:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-color: #FFF; }
        .popupContent h3.related { text-align: center; }
        .popupContent .popupRelatedContent { float: left; width: 100%; position: relative; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); overflow: hidden; }
            .popupContent .popupRelatedContent .popupRelatedContentInner { float: left; width: 100%; position: relative; background: #f5f5f5; text-align: center; }
                .popupRelatedContent .relatedBox { display: block; float: left; width: 25%; box-sizing: border-box; margin: 0; padding: 0.5em 0.5%; background: #f5f5f5; text-align: center; text-decoration: none; }
                .popupRelatedContent .popupRelatedContentInner.notFill .relatedBox { display: inline-block; float: none; }
                    .popupRelatedContent img { display: block; width: 100%; }
                    .popupRelatedContent .title { display: block; padding: 0.5em 0 0; font-size: 90%; line-height: 1.3; text-align: center; }
                .popupRelatedContent .leftButton { display: inline-block; padding: 0.2em 0.4em; position: absolute; left: 0; top: 35%; z-index: 1; background: rgba(228, 228, 228, 0.9); border-radius: 3px; font-size: 200%; line-height: 1; }
                .popupRelatedContent .rightButton{ display: inline-block; padding: 0.2em 0.4em; position: absolute; right: 0; top: 35%; z-index: 1; background: rgba(228, 228, 228, 0.9); border-radius: 3px; font-size: 200%; line-height: 1; }
            .popupContent iframe { max-width: 100%; }
            .popupContent .bottomButtonContent { float: left; width: 100%; padding: 1em 0; text-align: center; }
                .popupContent .bottomButtonContent a { display: inline-block; padding: 0.2em 0.5em; color: #FFF; background: #ee3485; border-radius: 3px; text-decoration: none; }
                .popupContent .bottomButtonContent a:hover { }
                
        .shippingBox { display: flex; flex-wrap: wrap; float: left; width: 100%; box-sizing: border-box; padding: 0; margin-bottom: 0.5em; background: #e7e7e7; border-radius: 3px; }
            .shippingBox .dateBox { display: block; float: left; width: 15%; box-sizing: border-box; padding: 0.2em 1%; background: #76c14a; text-align: center; }
                .shippingBox .dateBox .note { color: #FFF; font-size: 80%; }
            .shippingBox .itemContent { float: left; width: 85%; box-sizing: border-box; padding: 0.5em 2%; }
                .shippingBox .item { display: inline-block; margin: 0 0.2em 0.2em 0; padding: 0.1em 0.5em; color: #FFF; background: #6fccdd; border-radius: 3px; font-size: 80%; text-decoration: none; }
                .shippingBox input[type=text] { width: 100%; box-sizing: border-box; height: 2em; padding: 0 2%; background: #FFF; border: none; text-align: center; }
                
        .popContent .relatedContent { float: left; width: 100%; }
        
        
.loaderOverlay { float: left; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 15; background: rgba(0, 0, 0, 0.4); overflow-y: auto; text-align: center; }
    .loaderContent { float: left; width: 100%; margin-top: 1em; text-align: center; }
    .loaderOverlay .loaderContent { margin-top: 10em; }
        .loaderContent > span { display: inline-block; width: 3.5em; height: 3.5em; border: 3px solid #FFF; border-left-color: #ee3485; border-radius: 50%; animation: loader 1s linear infinite; } 
        .loaderContent .textContent { float: left; width: 100%; padding: 0.5em 0; text-align: center; }
            .loaderContent .textContent span { display: inline-block; padding: 0.1em 0.5em; color: #FFF; background: #ee3084; }
    .loaderClose { display: block; float: left; width: 1em; height: 1em; position: absolute; right: 1%; top: 2%; }
        .loaderClose span { display: block; width: 100%; height: 2px; position: absolute; left: 0; top: 0; background: #FFF; transform: rotate(45deg); }
        .loaderClose span:first-child { transform: rotate(-45deg); }
        .loaderClose:hover { transform: scale(1.2, 1.2); transition: all .3s; }            
        
/* Dátum választó naptár */
.calendarBox { width: 96%; max-width: 400px; padding: 0 0; position: absolute; left: 2%; z-index: 100; overflow: hidden; color: #FFF; background: #ee3485; border-right: 1px solid #ee3485; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
    .calendarInnerBox { float: left; width: 100%; position: relative; }
        .calendarHeader { padding: 0.4em 1% 0.4em; font-weight: bold; text-align: center; text-transform: uppercase; }
            .calendarHeader a { float: right; display: inline-block; margin: 0 0.3em 0 0; padding: 0 0.5em; color: #FFF; background: #0d5fae; border-radius: 3px; font-size: 150%; text-decoration: none; }
            .calendarHeader a:first-child { float: left; margin: 0 0 0 0.3em; }
            .calendarHeader select { color: #000; background: #FFF; border: none; font-weight: normal; } 
        .calendar { display: table; width: 100%; border-collapse: collapse; }
            .calendar > span { display: table-row; }
                .calendar > span > span,
                .calendar > span > a { display: table-cell; padding: 0.2em 1% 0.3em; position: relative; border: 1px solid #ee3485; text-align: center; }
                .calendar > span > span { color: #ee3485; background: #eaeaea; }
                .calendar > span > span:first-child,
                .calendar > span a:first-child { border-left: 1px solid #ee3485; }
                .calendar > span > a { color: #ee3485; background: #FFF; text-decoration: none; }
                .calendar > span > a:hover { color: #FFF; background: #ee3485; text-decoration: none;}
                .calendar > span .selected { color: #FFF; background: #ee3485; }
                    .calendar > span .startDate:before { content: '\f105'; position: absolute; left: 3px; top: 20%; font-size: 110%; font-family: fontAwesome; }
                    .calendar > span .endDate:before { display: none; }
                .calendar > span span.noActive { }
                .calendar .head > span { color: #FFF; background: #ee3485; border-left: none !important; }        
                .calendar .head > span.sunday { color: #d60000; }
.calendarClose { display: none; }

/* Kereső ajánlatok */
.autoFill { display: flex; flex-wrap: wrap; max-height: 500px; z-index: 101 !important; background: #FFF; border: 2px solid #6fccdd; overflow-y: auto; }
    .autoFill > span { display: block; float: left; width: 96%; padding: 0.2em 2%; cursor: pointer; }
    .autoFill > span:hover,
    .autoFill > span.active { background: #ececec; }
    .autoFill a { display: block; float: left; width: 25%; box-sizing: border-box; padding: 0.4em 2%; text-align: left; }
    .autoFill a:hover { background: #f5f5f5; transition: all .3s; }
        .autoFill img { display: block; width: 60%; margin: 0 auto; }
        .autoFill a > span { display: block; float: left; width: 100%; padding: 0; }
            .autoFill .name { display: block; float: left; width: 100%; color: #717171; font-size: 80%; line-height: 1.2; text-align: center; }
            .autoFill .price { display: block; font-size: 80%; font-weight: bold; text-align: center; } 


/**********************************************************************************************************************************************************************
 * Reszponzív részek
 **********************************************************************************************************************************************************************/

@media only screen and (max-width: 1280px) {
    .aboutBox { width: 80%; }
}

@media only screen and (max-width: 1120px) {
    .aboutBoxLeft { width: 64%; }
    .aboutBoxRight { width: 32%; }
}

@media only screen and (max-width: 980px) {
    .header { padding: 0 2%; background: #ee3585; }
    .fixed .header { padding: 0 2%; }
    .logoContent { display: block; float: left; width: 104.1666666%; padding: 0.1em 0 0.1em; position: relative; left: -2.08333333%; color: #ee3585; background: #FFF; line-height: 1; }
    .fixed .logoContent { display: none; }
    .fixed .logoMobil { display: inline-block; float: left; margin: 1em 0 0 0.5em; color: #FFF; font: normal 900 105%/1 'HoboStd', serif; text-decoration: none; }
    a.logo { float: none; width: 70%; max-width: 350px; margin: 0; padding: 0; background: none; font-size: 100%; text-align: center; }
        a.logo:before { display: none; }
        a.logo img { float: none; max-width: 10%; padding: 0; background: none; }
        a.logo .title { float: none; margin-left: 0.5em; position: relative; top: -0.4em; color: #ee3585; white-space: nowrap; }
    .sloganContent { display: none; }
    .navButton { float: left; margin: 0.15em 0; padding: 0; background: none; text-align: center; text-decoration: none !important; }
        .navButton .title { display: block; float: none; margin: 0; font-size: 50%; }
    .fixed .navButton { margin-top: 0.25em; }
    .navigationContent.active { width: 100%; }
    .cartButtonContent { margin: 0.6em 3% 0 0; }
    .fixed .cartButtonContent { margin-top: 0.78em; }
    .cartButton { margin: 0.4em 3% 0 0; margin: 0; color: #FFF !important; }
    .cartButtonContent:hover .cartContentSimple { display: none; }    
    .loginButton,
    .loginButton { margin: 0.4em 1em 0 0; color: #FFF !important; }
    .loginButton.active { color: #76c14a !important; }
        .loginButton span { display: none; }
    .fixed .loginButton,
    .fixed .loginButton.active { margin-top: 0.6em; }
        .cartButton .piece { right: -0.8em; top: -0.5em; color: #ee3485; background: #FFF; }
        .cartButton.active .piece { color: #FFF; background: #6fccdd; }
        
    .searchContent { margin: 0; background: #FFF; }
        .searchBox input[type=text]::placeholder { color: #ee3585; }
        .searchBox button { color: #ee3585; }
    .searchContent.active { height: 100%; position: fixed; left: 0; top: 0; z-index: 15; background: rgba(255, 255, 255, 0.95); }
        .searchContent.active .searchBox { width: 80%; }
        .searchBox input[type=text] { height: 2em; border: 1px solid #ee3585; }
        .searchBox button { top: 0.1em; }
        .searchContent.active .searchBox input[type=text] { height: 2.5em; border: 1px solid #ee3585; }
        .searchContent.active .searchBox button { top: 0.2em; }
        .autoFill { width: 96% !important; box-sizing: border-box; padding-top: 1em; left: 2% !important; border: none; }
        .searchContent.active .searchClose { display: inline-block; float: left; width: 1.5em; height: 1.5em; position: absolute; right: 5%; top: 0.8em; }
            .searchContent.active .searchClose:after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 48%; background: #ee3585; transform: rotate(45deg); }
            .searchContent.active .searchClose:before { content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 48%; background: #ee3585; transform: rotate(-45deg); }
    .searchContent.active .labelContent { display: none; }
    body.activeSearch { overflow: hidden; }
    
    .breadcrumb { padding: 0.5em 2%; }
    
    h1 { font: normal bold 160%/1.2 'Roboto Condensed', serif; }
    h2 { font: normal bold 130%/1.2 'Roboto Condensed', serif; }    
    h3 { font: normal bold 115%/1.2 'Roboto Condensed', serif; }       
    
    .sliderContent .leftButton { display: inline-block; padding: 0.2em 0.4em; position: absolute; left: 1%; top: 45%; z-index: 10; background: rgba(228, 228, 228, 0.9); border-radius: 3px; font-size: 200%; line-height: 1; }
    .sliderContent .rightButton { display: inline-block; padding: 0.2em 0.4em; position: absolute; right: 1%; top: 45%; z-index: 10; background: rgba(228, 228, 228, 0.8); border-radius: 3px; font-size: 200%; line-height: 1; }    
    .sliderInnerContent { width: 100%; left: 0; animation: none; }
        .sliderInnerContent .item { width: 50%; }
    .productBox { width: 49.5%; margin: 0 1% 1% 0; }
    .productBox:nth-child(2n + 2) { margin-right: 0; }
    .castInnerContent { width: 100%; left: 0; animation: none; }
        .castInnerContent .castBox { width: 25%; }
    .castContent .leftButton { display: inline-block; position: absolute; left: 3%; top: 40%; z-index: 10; font-size: 200%; }
    .castContent .rightButton { display: inline-block; position: absolute; right: 3%; top: 40%; z-index: 10; font-size: 200%; }    
    
    .formBox p { width: 100%; }
        .formBox label { margin: 0 0 1em 0; }
        
    .author img:first-child { display: block; float: none; max-width: 200px; margin: 0 auto 0.5em; }
    .author span { display: block; float: left; width: 100%; margin-left: 0 !important; }
    
    .contentBlock .captchaImage { margin-bottom: 0.8em; }
    .simplePayContent { padding: 0; }
    .countryNoteBox { width: 100%; padding: 0; }
    .aboutBox { width: 100%; }
    .captcha { text-align: center; }
        .captcha .fa { display: none; }
        .captcha img { display: inline-block; float: none; }
    .contentBlock form label.checkBox { display: block; float: left; width: 90%; margin: 0; padding: 0 0 0 1em; position: relative; box-sizing: border-box; line-height: 1.25; text-align: left; }
    .contentBlock form input.checkBox { float: left; width: 8%; margin: 1em 0 0 0; transform: scale(2); }
    .checkboxContent { width: 100%; }
    .offerBox { width: 46%; margin: 0 2% 1em; }
        .offerBox .name { height: 3em; }
    .testimonialContent blockquote { width: 96%; margin: 0 0 1em; padding: 1em 2%; }
    .submit { text-align: center; }
    
    .productDetail { padding: 0 0 1em; }
    .productDetail .leftContent { width: 100%; padding: 0; }
        .productDetail .description { float: left; width: 100%; max-height: 10em; margin-bottom: 1em; position: relative; overflow: hidden; }
        .productDetail .description.full { max-height: none; padding: 0 0 1em; }
            .productDetail .description .more { display: block; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; background: #FFF; text-decoration: none; }
            .productDetail .description .more:hover { color: #ee3485; }
        .productDetail .description:after { content: ''; float: left; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 2;  background: rgba(255,255,255,0); background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,0.9) 90%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(1%, rgba(255,255,255,0.01)), color-stop(90%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,0.9) 90%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,0.9) 90%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,0.9) 90%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,0.9) 90%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 ); }
        .productDetail .description.full:after { display: none; }
    .productDetail .rightContent { width: 100%; }
        .productDetail .rightContent h2 { font: normal bold 130%/1.2 'Roboto Condensed', serif; }
        .productDetail .imageContent iframe { max-width: 80%; max-height: 250px; }
        .productDetail .rightContent .buttonContent { margin: 0; position: fixed; left: 0; bottom: 0; z-index: 10; background: #FFF;  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.25); border: none; border-radius: 0; }
        .productDetail .buttonContent .price { width: 100%; padding: 0 0 0.25em; font-size: 125%; }
        .productDetail .buttonContent .oldPrice { display: inline-block; margin: 0 1em 0 0; }
        .productDetail .buttonContent .piece { float: left; width: 50%; }
            .productDetail .buttonContent .addCartButton { float: none; padding: 0.2em 1em; }
        .otherPurchasedContent .productBox { width: 100%; }
        .savings { padding: 0 2%; }
        .productDetail .freeDeliveryBox { padding: 0.3em 2% 0.2em; }
        .productDetail .buttonContent .conditionAmount { /*float: none;*/ }
        
    .productSliderContent .item { width: 33.333333333%; }
        
    .cartList { display: block; }
        .cartList .row { display: block; float: left; width: 100%; box-sizing: border-box; margin-bottom: 0.5em; padding: 0.2em 0; position: relative; border: 2px solid #ee3585; border-radius: 3px; }
        .cartList .packageHead { margin-bottom: 0; padding: 0; border-bottom-width: 0; border-radius: 0; }
        .cartList .package + .packageHead { margin-bottom: 0.5em; border-top: none; border-bottom-width: 2px; }
        .cartList .package { margin-bottom: 0; border-top: none; border-bottom: none; border-radius: 0; }
        .cartList .head { display: none; }
            .cartList .row .cell { display: block; float: left; width: 50%; box-sizing: border-box; padding: 0.2em 2%; border-top: none; text-align: center; }
            .cartList .row .cell:nth-child(1),
            .cartList .row .cell:nth-child(2),
            .cartList .row .cell:nth-child(5) { width: 100%; }
            .cartList .row .cell:nth-child(5) { font-weight: bold; font-size: 120%; text-align: right; }
            .cartList .package .cell:first-child { border-left: none; }
            .cartList .package .cell:last-child { border-right: none; }
            .cartList .packageHead .cell { width: 100%; }
            .cartList .packageHead .cell.right { text-align: center; }
            .cartList .packageHead .cell:nth-child(1),
            .cartList .packageHead .cell:nth-child(3),
            .cartList .packageHead .cell:nth-child(4),
            .cartList .packageHead .cell:nth-child(5) { display: none; }
            .cartList .package + .packageHead .cell:nth-child(4),
            .cartList .package + .packageHead .cell:nth-child(5) { display: block; }
                .cartList .del { position: absolute; left: 2%; bottom: 1em; }
            
    .purchaseModeContent ul { display: block; width: 100%; padding: 0; }
        .purchaseModeContent li { width: 100%; }
            .purchaseButton.active:after { display: none; }
    .loginContent { margin: 0; }
        .loginContent .inputBox p { width: 100%; }
    .loginBox.formBox,
    .formBox .loginBox { width: 100%; text-align: center; }
        .loginBox.formBox p { padding: 0.7em 0; }
        .loginBox label { top: 1.2em; }
        .loginBox input:focus + label { top: -0.9em; }
        .loginBox .submit { text-align: center; }
        .loginBox .submit button { margin-bottom: 0.5em; }
    .socialLoginBox { width: 100%; }
    
    .childBox .sequenceNumber { float: left; width: 100%; position: relative; left: auto; top: auto; text-align: center; }
    
    .bankcard img { margin-left: 0 !important; }
            
    .formBoxLeft,
    .formBoxRight { width: 100%; margin: 0; }
    .formBox .inputBox p { width: 100%; }
    .formBox .checkBoxContent { width: 100%; }
    .inputBox label { width: 100%; margin: 0; padding: 0 0 0.3em 2%; text-align: left; }
    .orderContent .inputBox input[type=text],
    .orderContent .inputBox input[type=email],
    .orderContent .inputBox textarea { width: 95%; }
    .orderContent .inputBox select { width: 95%; }
    p input[type=checkbox]:first-child + label { margin-left: 0; }
    .formBox input[type=checkbox] + label,
    .formBox input[type=radio] + label { width: 100%; }
    .formBox .inputBox input[type=text],
    .formBox .inputBox input[type=email],
    .formBox .inputBox input[type=password],
    .formBox .inputBox textarea { width: 100%; } 
    .formBox .inputBox select { width: 100%; }
    .inputBox .fullWidth label { width: 100%; padding: 0 0 0.3em 2%; }
    .formBox .inputBox .fullWidth input[type=text],
    .formBox .inputBox .fullWidth input[type=password],
    .formBox .inputBox .fullWidth input[type=email],
    .formBox .inputBox .fullWidth input[type=number],
    .formBox .inputBox .fullWidth textarea { width: 100%; }    
    .formBox .GLSSelectorBox { padding-left: 0; }
    .selectedGLSPoint { width: 100%; margin-left: 0; }
    .GLSSelectorMap { margin-top: 2em; }
    
    .footer { padding: 1em 0 6em 0; text-align: center; }
    .footer .label { display: block; width: 100%; }
    .footerInner { width: 90%; }
    .footerInnerL { float: left; width: 100%; margin: 0.5em 0; line-height: 2; }
    .footerInnerR { display: inline-block; float: none; width: auto; min-width: 300px; padding: 0; }
    .footerInnerR span,
    .footerInnerR .logo-web200 { float: none; }
    
}

@media only screen and (max-width: 640px) {
    a.logo { width: 70%; }
        a.logo > span { margin-left: 0.2em; }
        a.logo .title { font-size: 150%; }
        a.logo .subTitle { font-size: 80%; }
        a.logo img { max-width: 9%; }
    .sloganContent { height: 3.5em; }
    a.button,
    button.button { font-size: 90%; }
    .button .fa1 { display: none; }
    .formMessage .fa1 { display: none; }
    .offerBox { width: 96%; margin: 0 2% 1em; }
        .offerBox .name { height: auto; }
    a.scrollDown { display: none !important; }
    .formBox button { width: 100%; }
    .formMessage { margin: 0.5em 0; padding: 0.25em 2%; font-size: 100%; line-height: 1.3; }
    .contactBox .captcha label { float: left; }
    .contactBox .captcha input { width: 60% !important; }
    .contactBox img { margin-top: 2.5em; }
    
    .cartContentSimple { width: 100%; box-sizing: border-box; height: 100%; padding: 0.5em 2% 2em; position: fixed; left: 0; right: auto; top: 0; box-shadow: none; border: none; border-radius: 0; overflow-y: auto; }
        .cartContentSimple .moreCartButton { padding: 0.5em 2%; position: fixed; left: 0; bottom: 0; }
        .cartListSimple { width: 100%; margin: 0.5em 0 0; }
            .cartListSimple .cell { vertical-align: top; }
            .cartListSimple .cell span { display: block; font-size: 90%; }
            .cartListSimple .cell.price { width: 27%; }
    
    .footerInnerL ul li { width: 100%; padding: 0; }
    
    .popupContent { width: 96%; box-sizing: border-box; height: 96%; margin: 0; padding: 1em 2% 0.5em; position: fixed; left: 2%; top: 2%; border-radius: 5px; overflow-y: auto; }
    .max-width .popupContent { width: 100%; height: 100%; left: 0; top: 0; border-radius: 0; }
        .popupContent .closeTop { display: block; width: 100%; text-align: center; }
            .popupContent .closeTop i { float: left; font-size: 130%; }
        .popupContent .close { top: 0.2em; }
        .productCartBox { display: block; }
            .productCartBox span { display: block; width: 100% !important; padding: 0.25em 0; text-align: center !important; }
            .productCartBox .button { float: none; }
        .popupContent .close1 { display: none; }
        .popupRelatedContent .relatedBox { width: 50%; }
            .popupRelatedContent .relatedBox .title { font-size: 85%; }
        
        .shippingBox .dateBox { width: 100%; }
        .shippingBox .itemContent { width: 100%; }
        
}

@media only screen and (max-width: 480px) {
    a.logo { width: 90%; } 
        a.logo .title { font-size: 120%; }
        a.logo .subTitle { font-size: 75%; }
    .aboutBoxLeft { width: 100%; }
    .aboutBoxRight { width: 100%; }
    .cookieConfirm { position: absolute; }    
    
    .sliderInnerContent { width: 100%; }
        .sliderInnerContent .item { width: 100%; }
    .productBox { width: 100%; margin: 0 0 3%; }
    .castInnerContent { width: 100%; left: 0; animation: none; } 
        .castContent .castBox { width: 50%; }
        
    .productSliderContent .item { width: 100%; }
        
    .optionalBox .image img { margin: 0.4em 0 0; }
    
    .searchBox { display: block; width: 100%; }
    .labelContent { display: block; width: 100%; padding: 0.5em 0 0; }
    .autoFill a { width: 50%; padding: 0.2em 2%; }
}

@media only screen and (max-width: 380px) {
    ul.social { font-size: 65%; }
   .sloganContent { height: 5em; font-size: 98%; } 
}