@import 'bodystyle.css' screen;

@font-face {font-family: "Noteworthy Light";
  src: url("/font-face/016f50054d487d421dc18257a191a3ad.eot"); /* IE9*/
  src: url("/font-face/016f50054d487d421dc18257a191a3ad.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/font-face/016f50054d487d421dc18257a191a3ad.woff2") format("woff2"), /* chrome、firefox */
  url("/font-face/016f50054d487d421dc18257a191a3ad.woff") format("woff"), /* chrome、firefox */
  url("/font-face/016f50054d487d421dc18257a191a3ad.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/font-face/016f50054d487d421dc18257a191a3ad.svg#Noteworthy Light") format("svg"); /* iOS 4.1- */
}

a:link, a:visited {text-decoration: none; color: #b33131;}
a:hover {text-decoration: underline;}

.bodyRight a:link, .bodyRight a:visited {text-decoration: inherit; color: inherit; font-size: inherit;}
a:hover {text-decoration: underline;}

.td_eshop_link_big {

  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
a.header1:link, a.header1:visited {font-size: 18pt;}

.griditem {
  position: relative !important; left: auto !important;; top: auto !important;
}

body, div {margin: 0;  color: #222;}
html {  width: 100%;
  box-sizing: border-box;}

  
.padding15 {padding: 15px; float: left; width: 100%;}
.padding25 {padding: 25px; float: left; width: 100%;}
.padding45 {padding: 45px; float: left; width: 100%;}

.TDblockSite {position: absolute; left: 50%; margin-left: -217px; width: 435px; margin-top: 150px;}
/* WHITEFIELD LOADING */
.td_whitefield {width: 100%; height: 100%; display: block; background-color: #fff; position: fixed; top: 0; left: 0; z-index: 100000;}
.td_loading {position: absolute; top: 50%; left: 50%; z-index: 100000; transform: translate(-50%,-50%);}


h2.grey_bg {text-align: center; background-color: #eee; padding: 7px; margin: 5px; width: calc(100% - 10px);}

/* MENU **********************************************************/

div.sCode {  float: left; width: 100%; padding: 1px; margin-bottom: 15px; border-bottom: 3px dotted #eee; padding-bottom: 15px;}
div.sCode input {float: left; width: calc(50% - 8px); box-sizing: border-box; margin: 4px;}
div.sCodeMessage {float: left; width: calc(100% - 10px); margin: 5px; padding: 10px; text-align: center; color: white; box-sizing: border-box;}  

body { 
  width: 100%;
  float: left;
  box-sizing: border-box;
  background-image: url('/files/bg.png');
}

a.sq_link {
  float: left; width: 100%; position: relative;
}

.TDformGroup  {float: left; width: 100%;}
label.error {display: none !important;}

a.sq_link span.skew_text {
  position: absolute; bottom: 10px; left: -30px; width: 70%; color: white; font-size: 14pt; background: none; overflow: hidden;
}

a.sq_link span.skew_text span.text {
  position: relative; color: white; font-size: 14pt; background: none; z-index: 5; text-transform: uppercase;
}

a.sq_link span.skew_text span.skew {
  top: 0; left: -30px;
  background-color: #b33131;  transform: skew(30deg, 0deg) ;
  position: absolute; width: calc(100%); height: 100%;
}


a.sq_link img {
  float: left; width: 100%; position: relative;
}



div.ThreeBoxCollect {float: left; width: 100%; margin-top: 15px; position: relative;}
div.ThreeBoxCollect a:link, div.ThreeBoxCollect a:visited {float: left; width: 100%; padding: 7px; background-color: #eee; text-align: right; margin: 2px 0;  font-weight: bold;}
div.ThreeBoxCollect span.bg { position: absolute; top: 2px; height: calc(100% - 4px); width: 30px; background-color: #b33131; z-index: 5; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap;}
div.ThreeBoxCollect span.bg span.label {transform: rotate(-90deg); background: none; color: white; font-size: 14pt; width: 300px; text-align: center; white-space: nowrap;  font-weight: bold;}

a.twoButtons {float: left; width: 100%; padding: 25px; text-align: center; background-color: #b33131; color: white; border: 1px solid #b33131; margin: 5px 0; font-size: 16pt;}
a.twoButtons:hover {color: #b33131; background-color: white; text-decoration: none;  }

div.ThreeBoxCollect span.how_enjoy {font-size: 12pt; margin-left: -30px; width: calc(100% + 30px); background: #eee; color: #b33131; padding-left: 30px; font-weight: bold; text-align: right;}
div.ThreeBoxCollect span.score {background: none; color: #777; font-size: 12pt; width: auto;}
div.ThreeBoxCollect span.counter {background: none; color: #777; font-size: 12pt;  width: auto;}

div.starbox {float: left; width: 100%; margin-top: 5px;}
/* div.starbox:hover img.star {filter: grayscale(100%);}  */
div.starbox img.star {float: left; width: 25px; cursor: pointer;}
div.starbox span.counter {float: left; width: 25px;}

div.starbox a {width: auto !important; background: none !important; padding: inherit !important; margin: 0 !important;}

div.starbox img.star.shut {filter: grayscale(100%);}


.desktop {display: block; float: left; width: 100%; position: relative;}
.mobile {display: none; float: left; width: 100%;  position: relative;}

header {float: left; width: 100%;}
h3 {font-size: 16pt; color: #b33131;}
/* NEWSPART */
.bodyLeft h5 {font-size: 20pt; color: #b33131; float: left; margin-bottom: 10px; font-weight: normal; width: 100%;}
.bodyLeft h3 {width: 100%; float: left; padding: 7px 15px; background-color: #f0f0f0; font-size: 16pt; color: #aaa; font-weight: normal;}
.bodyLeft span {width: 100%; float: left;  padding: 3px 15px; background-color: #aaa; font-size: 10pt; color: #fff;}
.bodyLeft .newsbody {width: 100%;  float: left; padding: 7px 15px; background-color: #f0f0f0; font-size: 10pt; color: #000; margin-bottom: 10px; }
.bodyLeft .newsbody img {width: 100%;  float: left; }



.container {float: left; width: 100%; margin-top: -75px;}
.fullWidth {float: left; width: 100%; }
.padding25 {padding: 25px;}
.flags {margin-top: 13px; width: auto; float: right;}
.flags img {width: 25px; height: 25px; margin-right: 3px; opacity: 0.5; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);}
.flags img:hover, .flags img.activeFlag {opacity: 1; -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);}
.centered {border: 1px solid #ddd; background-color: white; margin-left: 50%; transform: translate(-50%, 0%); float: left; display: block; width: 100%; max-width: 1280px; box-sizing: border-box;}
.centered {margin-top: 5px; margin-bottom: 5px; overflow: hidden;}

.td_slick {width: 100%; float: left; max-height: 366.42px; overflow: hidden;}
.td_slick img {width: 100%; margin: 0;}

.td_slick2 {width: 100%; float: left;}

.td_slick2 img {width: 100%; margin: 0;}


.td_slickEshop {width: 100%; float: left;}
.td_slickEshop .td_eshop_iconbox  {display: none;}
.td_slickEshop img.iconCart  {margin-left: 50%; transform: translate(-50%, 0);}
.gridPointer {cursor: pointer;}

.redskew {position: relative; z-index: 15; float: right; width: 205px;  margin-top: 10px; height: 36px; background-image: url('/files/redskew_right.svg'); background-size: 100% 100%; margin-bottom: -1px;}

.icons {float: right; width: 25px; height: 25px; margin: 5px 5px; opacity: 0.8; transition: 0.2s;}
.icons:hover {opacity: 1; transform: scale(1.1);}

.redPart {float: left; width: 100%; min-height: 150px; background-color: #b33131; padding: }
.redPart p, .redPart li {color: white;}
.redPart1 {padding: 35px; margin-top: 25px; background-color: #f0f0f0; border-top: 5px solid #b33131;}
.redPart1 img {width: 285px;}
.redPart1 li:nth-of-type(1){margin-left: 5px;}
.redPart1 li:nth-of-type(2){margin-left: 15px;}
.redPart1 li:nth-of-type(3){margin-left: 25px;}
.redPart1 li:nth-of-type(4){margin-left: 35px;}
.redPart1 p, .redPart1 li {color: #000;}

a.fullLink:link, a.fullLink:visited {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


a.logo {margin-left: 35px; transform: translate(0,-135px); width: 250px; float: left; display: block; margin-right: 50px;}
a.logo img {width: 100%; transition: 0.15s;}
a.logo img:hover {width: 100%;}
.menu {display: none;}
footer .centered {padding: 10px; text-align: center;}

.bodyLeft {float: left; width: 340px; padding-top: 0px; position: relative; z-index: 1; margin-top: -60px;}
.bodyRight {float: left; width: 900px; position: relative;   z-index: 1; margin-top: -98px; padding: 0 20px;}

div.thumbnails {width: 100%; float: left;}
div.thumbnail {width: calc(20% - 10px);  margin: 5px; float: left;}
div.thumbnail img {transition: 0.2s; width: 100%; height: auto; opacity: 0.8; }
div.thumbnail img:hover {width: 100%; height: auto; opacity: 1; transform: scale(1.05);}
	
div.redskewmotto  {position: absolute; top: 345px; right: -50px; z-index: 15;}
div.redskewmotto .element {background-color: #b33131; width: 330px; height: 40px; top: 50%; left: 50%; transform: translate(-50%,-50%); 
transform: skew(-50deg, 0deg) ;
-webkit-transform: skew(-50deg, 0deg) ;
-moz-transform: skew(-50deg, 0deg) ;
-o-transform: skew(-50deg, 0deg) ;
-ms-transform: skew(-50deg, 0deg) ;}

div.redskewmotto .motto {position: absolute; color: white; font-family: "Noteworthy Light"; top: 50%; left: 50%; transform: translate(-60%,-50%); z-index: 16; font-size: 16pt; width: 270px; text-align: center;}
div.redskewmottomobile {display: none;}

a.contactButton {background-color: #eee; margin: 25px; width: calc(25% - 50px); padding: 25px; float: left; font-size: 16pt; text-align: center; color: #b33131; }
a.contactButton:hover {background-color: white; }

.icon64 {width: 64px; height: 64px; float: left;}
.icon32 {width: 32; height: 32px;  float: left;}

.eshopMenu {float: left;}

.bodyRight .table-first-hide td:nth-of-type(1):not([colspan="2"]) { display: none;}

@media only screen and (max-width: 1279px) {
a.logo {margin-left: 25px; transform: translate(0%,-43%); width: 150px; float: left; display: block; margin-right: 0; margin-bottom: 0px;}
div.redskewmotto {top: 60px;}
.bodyLeft {width: 20%;}
.bodyRight {width: 80%; margin-top: -45px; padding-right: 25px;}
.centered {border: 0;}
}

@media only screen and (max-width: 1023px) {
a.contactButton {width: 100%; margin-left: 0;}
.mobile {display: block;}	
.desktop {display: none;}	
a.logo {margin-left: 5%; transform: translate(0%,-43%); width: 20%; float: left; display: block; margin-right: 0; margin-bottom: -40px;}
div.redskewmotto {top: 80px;}

.bodyLeft {display: block; width: 100%; margin-top: 10px; padding-top: 35px;}
.bodyRight {padding-left: 0;}
.bodyRight, .container {margin: 0;   width: 100%; padding-right: 0px;}
.container {padding: 5%; padding-top: 0;}
.centered {border: 0; margin: 0; transform: translate(0,0);}
.redPart {padding: 5%;}
.redPart1 {margin: 0;}
.menu {display: block; float: right; width: 15%; margin: 15px; margin-left: 0;}
.td_body p {text-align: justify;}
.redskew {width: 100%;  height: auto; float: left; background: none; background-color: #b33131; margin-top: 0; border-bottom: 5px solid #f0f0f0; padding: 10px 5% 5px 5%;;}
.flags {margin: 0;}
.flags img {width: 30px; height: 30px; margin-right: 7px;}
.icons {width: 30px; height: 30px; margin: 0; margin-left: 10px;}
.social-icon {float: right;}
.flags {margin-left: 10px !important;}
.sq_link img { display: none; }
a.sq_link span.skew_text { width: 110%;}
}



@media only screen 
and (min-device-width : 200px) 
and (max-device-width : 700px) 
and (orientation : portrait) { 
div.noMobile {display: none;}
div.redskewmottomobile {display: block; float: left; width: 100%; padding: 10px 5%; background-color: #b33131; text-align: center; font-size: 6vw; color: white; font-family: "Noteworthy Light"; border-bottom: 1px solid white;}
a.logo {margin-left: 5%;transform: translate(-0%,-43%);  width: 40%; float: left; display: block;}
.redskewmotto {display: none;}
.menu {display: block; float: right; width: 35%; margin: 15px; margin-left: 0;}
.redskew {padding: 10px 5% 5px 5%;;}
.flags {margin: 0;}
.flags img {width: 30px; height: 30px; margin-right: 7px;}
.icons {width: 30px; height: 30px; margin-left: 10px;}
.redPart1 img {width: 100%;}
.container {padding-top: 15px};
}