@font-face {
  font-family: 'Montserrat';
src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
}

* {
box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scrollbar-color:#353535 #181919;
}
::-webkit-scrollbar {
	width: 0.7vw;
}
::-webkit-scrollbar-track {
	background: #181919;
	background-color: #181919;
}
::-webkit-scrollbar-thumb {
	background: #353535;
}
::-webkit-scrollbar-thumb:hover {
	background: #ffffff;
}
body,html{min-height:100%;}

.error {
  color: #e80000;
}

[contenteditable] {
  outline: 0px solid transparent;
  border-radius: 0;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #FFF;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#FFF; opacity:1;}
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#FFF; opacity:1;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #FFF;}

.marker, .w25, .CRN, .ADD, .DELETE, .DELETE svg, .EDIT, .item, .item:after, 
.more:after, .share, .thumbs, .checkmark, .checkmark:after, 
.video-play, .video-poster, .ncd, .ncm, .nod, .nom, #online, 
.btn-white, .btn-tr, .TT-BR, .TT-BL, .TT-TL, .TT-TR, .TT-R, .edit-media, .open-media,
.open-close, .open-close svg, .frame, .edit-icon, .edit-category, .content, .social, .icon, .o10, .maintitle, .titleedit::after {
  -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; transition:all .3s ease-in-out;
}

.rel {position: relative;}

.inline {display: inline;}
.inline-block {display: inline-block;}
.max-content {width: max-content; width: auto;
  white-space: nowrap;}


.sidemenu>[expanded]>header:after {
  content: " ";
  transform: rotate(225deg);
  color: #d9d9d9;
}

.more {
  cursor: pointer;
}

.footer {
  background-color: rgba(6,75,88,.95);
}

.tag:before {
  display: inline-block;
  content: "#";
  position: absolute;
  left: -2vw;
  top: 0;
  opacity: 0.3;
}

.sidemenu header:after {
  display: inline-block;
  content: " ";
  position: absolute;
  right: 0.8vw;
  bottom: 49%;
  transform: translateY(-50%);
  color: #d9d9d9;
  font-size: 2.2vw;
  content: " ";
  border: 0.2vw solid transparent;
  border-width: 0 0.15vw 0.15vw 0;
  display: block;
  height: 0.9vw;
  position: absolute;
  transform: rotate(45deg);
  width: 0.9vw;
}

.arrow-input {
  width: 0;
  height: 0;
  border-top: 1vw solid transparent;
  border-bottom: 1vw solid transparent;
  border-left: 1vw solid #1f1f1f10;
  position: absolute;
  bottom: 50%;
  left: 1.6vw;
  transform: translateY(1vw);
}

.arrow-input-2 {
  width: 0;
  height: 0;
  border-top: 1vw solid transparent;
  border-bottom: 1vw solid transparent;
  border-left: 1vw solid #ffffff10;
  position: absolute;
  bottom: 50%;
  left: 1.6vw;
  transform: translateY(1vw);
}

.more:after {
  display: inline-block;
  content: " ";
  background-color: white;
  width: 3.6vw;
  height: 3.6vw;
  position: absolute;
  bottom: 0;
  right: 0.75vw;
  transform: translateY(1.8vw) rotate(45deg);
  z-index: -1;
}

.more.open:after {
  bottom: 100%;
  transform: translateY(1.8vw) rotate(45deg);
}
.board {
  background-color: #d9d9d9;
}

.board>[expanded] {
  margin-bottom: 8vw;
}

.subboard>[expanded] {
  margin-bottom: 3.6vw;
}

.hidden {display:none !important;}
.open {display:block;}

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.65vw; line-height: 2.5vw; font-weight: 600; font-size: 1.2vw; line-height: 1.8vw;
  color: #bdbdbd;
  background-color: #000;
	background-color: #181919;
  background-color: #011c2c;
  text-rendering: optimizeLegibility; shape-rendering: geometricPrecision; 
  -moz-font-smoothing: antialiased;-webkit-font-smoothing: antialiased;
}

button {
  border: none;
  padding: 0.8vw 3.6vw;
}
button:focus {outline:0;}

.content {
  position: relative;
  display: block;
}
.content.loading {
  top: -15vw;
  opacity: 0.1;
}
#app {
  position: relative;
  min-height: 100%;
}

main{ 
  width: 64%;
  position: relative;
  padding-left: 6.2vw;
}
.maintitle {
  color: rgb(255 255 255 / 30%);
  position: absolute;
  top: 2.8vw;
  right: -122.8vw;
  width: 120vw;
  transform-origin: 0 0;
  transform: rotate(90deg);
  letter-spacing: 0.3vw;
}
.loading .maintitle {
  top: -13vw;
  opacity: 0.1;
}

nav{
  position: absolute;
  top: 2.3vw;
  right: 0;
  z-index: 900;
  background-color: transparent;
  min-height: 100%;
  width: 36%;
}

nav, nav a {color:#cecece; color: #bdbdbd;}

nav section {
  max-width: 32vw;
}
.full nav {
  display: none;
}
.full main {
  width: 88%;
}
.mobile nav {
  display: block;
  right: 11.9vw;
  background-color: #1f1f1f;
  background-color: #000;
  width: 64vw;
}

.ncd, .nod {
  position: absolute;
  top: 57vw;
  right: 3.6vw;
  height: 0;
  width: 0;
  border-top: 3.6vw solid transparent;
  border-bottom: 3.6vw solid transparent;
  transform: translateY(-4vw) translateX(0);
  z-index: 100;
  cursor: pointer;
  opacity: 0.1;

}
.ncd, .nod {
  position: absolute;
  top: 57vw;
  right: 3.6vw;
  height: 0;
  width: 0;
  border-top: 3.6vw solid transparent;
  border-bottom: 3.6vw solid transparent;
  transform: translateY(-4vw) translateX(0);
  z-index: 100;
  cursor: pointer;
  opacity: 0.1;

}
.ncd {
  border-left: 3.6vw solid #ffffff;
}
.nod {
  border-right: 3.6vw solid #ffffff;
  display: none;
}
.full .nod {
  display: block;
}
.ncm, .nom {
  position: fixed;
  top: 77vw;
  right: 3.6vw;
  height: 0;
  width: 0;
  border-top: 5.6vw solid transparent;
  border-bottom: 5.6vw solid transparent;
  transform: translateY(-7vw) translateX(0);
  z-index: 100;
  cursor: pointer;
  opacity: 0.3;

}
.ncm {
  border-left: 5.6vw solid #ffffff;
  display: none;
}
.nom {
  border-right: 5.6vw solid #ffffff;
  display: none;
}
.ncr {
  position: absolute;
  top: 0;
  left: -24vw;
  width: 24vw;
  z-index: 99;
  min-height: 100%;
  display: none;
}
.mobile .ncr {display: block;}
.mobile .nom {display: none;}
.mobile .ncm {display: block;}

.ncd:hover, .nod:hover {
  opacity: 1;
}
.full iframe, .mobile iframe {
  height: 48.7vw;
}

#articles {
  min-height: 105vh;
}

article {
  display: inline-block;
  width: 100%;
  position: relative; 
  background: #464646;
  margin-bottom: 6.3vw;
}

.article-data {
  background-color: rgba(255,255,255,.1);
  padding: 6.3vw 0 3.6vw 0;
  margin: -6.3vw 0 3.6vw 0;
  position: relative;
}

.language {z-index: 9;}

.languages {
	padding: 0;  
}

.language {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.languages a {
	padding: 0;
	color: #ffffff40; 
	border: none; 
	display: inline;
	margin: 0 3.6vw 0 0;
}
.languages .language.current a {
	color: rgba(255, 255, 255, 0.8);
	cursor: auto;
}
.languages a:hover {
	color: #ffffff; 
}

.item-array {
  display: inline-block;
  margin: 0 1vw 0 0;
}
.menuitem {
  position: relative;
  width: max-content;
  height: max-content;
}

.item {
  position: relative;
  padding: 1.4vw 6.6vw;
  border-bottom: none;
  border-top: none;
  border-left: none;
  outline: none;
  width: max-content;
  max-width: 100%;
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
}

.item .TT-TL, .rel .tooltip {
  z-index: 9999;
  top: -4.5vw;
}
.item:hover .tooltip, .rel:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transition-delay:0.7s;
}
.item.expand::after {
  display: inline-block;
  content: " ";
  position: absolute;
  right: 6.6vw;
  bottom: 0;
  width: 0;
  height: 0vw;
  margin-left: 1vw;
  border-left: 1vw solid transparent;
  border-right: 1vw solid transparent;
  border-top: 1vw solid #ffffff;
  border-bottom: 0vw solid #ffffff;
  transform: translateY(-0.3vw);
  opacity: 0.1;
}
.edit-category.open {
  background-color: rgba(255,255,255,.1);
}
.item.expand.open::after {
  border-top: 0vw solid #ffffff;
  border-bottom: 1vw solid #ffffff;
  bottom: 100%;
  transform: translateY(1.2vw);
}

.item.current::before {
  display: inline-block;
  content: " ";
  position: absolute;
  left: 4.9vw;
  top: 50%;
  width: 0;
  height: 0vw;
  margin-right: 1vw;
  border-top: 1vw solid transparent;
  border-bottom: 1vw solid transparent;
  border-right: 1vw solid #fff;
  z-index: 1;
  transform: translateY(-1vw);
  opacity: 0.1;
}
.brand {
  position: absolute;
  bottom: 4.5vw;
  color: #ffffff;
  opacity: 0.2;
}
.brand-logo-wrapper {
  min-width: max-content;
  height: 100%;
  position: absolute;
  right: 0;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.brand-logo {
  height: 2vw;
  width: auto !important;
  display: inline-block;
  opacity: 0.3; 
  margin-top: 0.33vw;
}

.checkbox {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 50%;
  right: 0;
  transform: translateY(-1.8vw);
  width: 3.6vw;
  height: 3.6vw;
  z-index: 1;
  }
/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 3.6vw;
  width: 3.6vw;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  display: block;
  top: 50%;
  left: 1.8vw;
  height: 1vw;
  width: 1vw;
  background-color: #ffffff10;
  border-radius: 50%;
  transform: translateY(-0.5vw);
}

.checkbox:hover input ~ .checkmark {
  background-color: #ffffff30; background-color: #219721;
}
.checkbox .TT-TL {
    margin-left: 0.6vw;
    z-index: 9;
}
.checkbox:hover .TT-TL {
    opacity: 1;
    visibility: visible;
}

.checkbox input:checked ~ .checkmark {
  background-color: #bdbdbd;
}
.checkbox:hover input:checked ~ .checkmark {
  background-color: rgba(255, 0, 0, 0.5);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: block; display: none;
}

/* Style the checkmark/indicator */
.checkbox .checkmark::after {

  left: 0.15vw;
  top: -0.7vw;
  width: 0.9vw;
  height: 1.2vw;
  border: solid;
  border-color: #bdbdbd;
  border-width: 0 0.25vw 0.25vw 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox:hover input ~ .checkmark:after {
  border-color: #ffffff;
}

.active {
  position: absolute;
  top: 0;
}

.item:hover {border-color: #FFF;}

.filter-item {
  display: inline-block;
  position: relative;
  width: 100%;
  margin: 0 0 3.6vw 0;
}

.sidemenu {z-index: 901;}

#sidelogo {
  width: 11vw;
  min-height: 60vw;
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100%;
  fill: #bfbfbf; fill: #353535; 
}

#online {
  position: absolute;
  top: 4.02vw;
  right: 4.28vw;
  z-index: -1;
  background-color: #219721;
  border-radius: 50%;
  height: 2.42vw;
  width: 2.42vw;
  opacity: 0;
}
#online.loading {
  opacity: 1;
}
#online.erro {
  background-color: rgb(255, 0, 0);
  opacity: 0.7;
}
.add-article {
  margin-top: -28.6vw;
  z-index: 1;
}
#name {
  font-size: 3.06vw;
  margin: 10vw 3.5vw 2.2vw;
}

#Rname {
  position: absolute;
  font-size: 3.06vw;
  transform: rotate(90deg);
  position: absolute;
  right: -3.5vw;
  top: 25vw;
  display: none;
}



img, canvas {width: 100%; display: block; margin: 0; padding: 0;}

h1, .h1, .title, input, .menuText, textarea, button {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.2vw;
  line-height: 1.8vw;
  z-index: 9; 
}
h2, header, .sidemenu {
  font-size: 1.2vw;
  line-height: 1.8vw;
  font-weight: 600;
}
h2 {margin: 0; -webkit-margin-before: 0; -webkit-margin-after: 0;}

.LH3 {line-height: 3.5vw;}
.LH4 {line-height: 4.6vw}

ul {margin: 0;padding: 0;}
li {list-style-type: none;}

a {border: none; outline: none; text-decoration: none;}
.selected, .gray {cursor: default; color: #d9d9d9; color: #464646;}

.slide, .card25, input, textarea {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}


input, textarea {
  color: #000;
  z-index: 9;
  user-select: text;
  cursor: auto;
  border: none;
}


.PNT, button  {cursor:pointer;}

textarea {
  resize: none;
  line-height: 1.8vw;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 3.6vw;
}

textarea::placeholder {
  color: #d9d9d9; color: #1b1b1b;
  font-size: 1.8vw;
}
fieldset {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
}
.fileUpload {
  position: relative;
  overflow: hidden;
}
.uploadFile {
  position: absolute;
  top: 0;
  left: -20%;
  width: 120%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.DIS {color:#bdbdbd;}
.BCD {background-color: #1b1b1b;} 
.BCM {background-color: #464646;} 
.BCL {background-color: #ffffff}
.TCD {color: #000000;}
.TCM {color: #bdbdbd;}
.TCL {color: #ffffff;}
.Z1 {z-index: 1;}
.Z2 {z-index: 2;}
.Z10 {z-index: 10;}

.ABS, .ATL, .ATR, .ABR, .ABL {position: absolute;}
.ATL, .ATR {top: 0;}
.ABL, .ABR {bottom: 0;}
.ATL, .ABL {left: 0;}
.ATR, .ABR {right: 0;}
.FL {float: left;}
.FR {float: right;}
.RL {position: relative;}
.max100 {max-width: 100%;}

.MT {margin-top: 1.8vw;}.MR {margin-right: 1.8vw;}.MB {margin-bottom: 1.8vw;}.ML {margin-left: 1.8vw;}
.MT2 {margin-top: 3.6vw;}.MR2 {margin-right: 3.6vw;}.MB2 {margin-bottom: 3.6vw;}.ML2 {margin-left: 3.6vw;}
.MT-2 {margin-top: -3.6vw;}.MR-2 {margin-right: -3.6vw;}.MB-2 {margin-bottom: -3.6vw;}.ML-2 {margin-left: -3.6vw;}
.MT4 {margin-top: 7.2vw;}.MR4 {margin-right: 7.2vw;}.MB4 {margin-bottom: 7.2vw;}.ML4 {margin-left: 7.2vw;}
.PT {padding-top: 1.8vw;}.PR {padding-right: 1.8vw;}.PB {padding-bottom: 1.8vw;}.PL {padding-left: 1.8vw;}
.PT2 {padding-top: 3.6vw;}.PR2 {padding-right: 3.6vw;}.PB2 {padding-bottom: 3.6vw;}.PL2 {padding-left: 3.6vw;}

.BT {border-top: 0.8vw solid #efefef;}
.BR {border-right: 0.8vw solid #FFF;}
.BB {border-bottom: 0.8vw solid #efefef;}
.BL {border-left: 0.8vw solid #efefef;}

.DIB {display: inline-block;}

.TAC {text-align: center;} .TAR {text-align: right;}

.CV {background-size: cover; background-position: center; background-repeat: no-repeat;}
.CN {background-size: contain; background-position: center; background-repeat: no-repeat;}
.CNT {background-size: contain; background-position: top; background-repeat: no-repeat;}
.R50 {border-radius:50%;}
.WB {background-color: rgba(255, 255, 255, 0.3);}
.WT {color: #bdbdbd;}
.WB {background-color: white}
.GT {color: #464646;}
.GB {background-color: #464646;}

.o5 {opacity: 0.05;}
.o10 {opacity: 0.10;} .o10:hover {opacity: 1;}

.w5{width: 8.0vw;}
.w12{width: 11%;}
.w25{width: 6.7vw; background-color: rgba(255,255,255,.1)}
.w25 :hover {background-color: rgba(0,0,0, 0.5);}
.w50{width: 50%;}
.w80{width: 83.5%;}
.w100, .W100{width: 100%;}
.H100{height: 100%;}

.slides {
  display: none;
}
.slides.open {
  display: block;
}

.slide {
  min-height:32.2vw;
  padding-top: 56.25%;
  max-height:100%;;
  background-color: #464646;
  padding-right: 0;
  border: none;
  }

.media {
  position: absolute;
  top: 0;
  overflow: hidden;
  min-height: 32.2vw;
  width: 100%;
}

.thumbs {
  position: absolute;
  width: 6.4vw;
  opacity: 1;
  top: 0;
  right: 3.6vw;
  background-color: rgba(255,255,255,.1);
}
.thumbs.open {
  top: 35vw;
  width: 20vw;
  opacity: 0;
}
.thumb {
  padding-top: 56.25%;
  position: relative;
}
.thumb .play {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  border-top: 0.9vw solid transparent;
  border-bottom: 0.9vw solid transparent;
  border-left: 1.5vw solid #ffffff80;
  transform: translateY(-0.8vw) translateX(-0.5vw);
  z-index: 1;
}
.thumb img, .thumb .img {
  position: absolute;
  top: 0;
  min-height: 3.6vw;
  width: 100%;
}
.bigimg {
  height: 32.3vw;
}
.slide, .card25 {position: relative; margin: 0; overflow: visible; box-sizing: border-box;}

a {color: #bdbdbd;}
a:hover {color: #ffffff;}

.menuText:hover {background-color: rgba(0, 0, 0, 0.5);}
.SCR {background-color: white; height: 8vw; width: 0.8vw; margin-right:3.6vw; z-index:99;}


iframe {
  margin: 0 0 0 0;
  border: none;
  height: 32.3vw;
  width: 1920px;
  max-width: 100.2%;
}

.video-poster {
  z-index: 1;
  width: 100%;
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  border-top: 3.6vw solid transparent;
  border-bottom: 3.6vw solid transparent;
  border-left: 6vw solid #ffffff80;
  transform: translateY(-4vw) translateX(-2vw);
  z-index: 1;
  cursor: pointer;
}
.video-play:hover, .video-play:active {
  border-left: 6vw solid #ffffff;
}

.html5-endscreen, .ytp-title, .ytp-title-channel, .ytp-chrome-top  {
  display: none !important;
}

.title {
  color: #000;
  padding: 0.9vw 3.6vw 0.9vw 3.6vw; 
  margin: -3.6vw 0 0 0;
  min-width: 9vw;
  width: max-content;
  max-width: 100%;
  min-height: 3.6vw;
}

.titleedit::after {
  transition-delay: 0.3s;
  position: absolute;
  display: inline-block;
  right: 1vw;
  z-index: 999;
  width: 1vw;
  height: 1vw;
  background-color: #219721;
  border-radius: 50%;
  opacity: 0;
  content: "";
}
.titleedit.loading::after {
  opacity: 1;
}
.titleedit.error::after {
  background-color: #e80000;
  opacity: 1;
}

.bg { position: absolute; z-index: -1;}

.btnTL, .btnTR, .btnBR, .btnBL {width: 20vw; height: 12vw; position: absolute; z-index: 9; outline: 0;}
.btnBL {width: 95%;}
.btnTL .CRN, .btnBL .CRN {left: 0;}
.btnTL .CRN, .btnTR .CRN {top: 0;}    
.btnTR .CRN, .btnBR .CRN, .menuClose .CRN, .menuOpen .CRN {right: 0;}
.btnBL .CRN, .btnBR .CRN {bottom: 0;}
  
.btnBL:hover .title, .btnTL:hover .CRN, .btnCL:hover .CRN, .btnOP:hover .CRN, .menuOpen:hover .CRN, .menuClose:hover .CRN {border-color: #FFF;}

.CRN {height: 3.5vw; width: 3.5vw; box-sizing: border-box; position: absolute; border-color: rgba(255, 255, 255, 0.3);}

.search {
  width: fit-content;
}

.search input, .input-dark {
  background-color: #1f1f1f;
  background-color: #000;
  border: none;
  color: #ffffff; color: #bdbdbd;
  width: 22vw;
  padding: 1.4vw 3.6vw 1.4vw 3.6vw;
}

.input-light {
  color: #000;
  background-color: #ffffff;
  border: none;
  padding: 0.9vw 3.6vw 0.9vw 3.6vw;
}
.input-light::placeholder { 
  color: #000;
}
.input-light:focus {
  outline: none;
  background-color: #fff;
}
.input-light:focus .input-light::placeholder { 
  color: rgb(56, 56, 56);
}
.addSC {
  left: 25vw;
  top: 0;
  position: absolute;
}
.bg-01 {
  background-color: inherit;
}

.search input::placeholder, .input-dark::placeholder {
  color: #bdbdbd;
}

.search input:focus, .input-dark:focus {
  outline: none;
  color: #ffffff;
  background-color: #1f1f1f;
}

.input-wrapper {
  position: relative;
}

.arrow-input-dark, .search input::before {
  width: 0;
  height: 0;
  border-top: 1vw solid transparent;
  border-bottom: 1vw solid transparent;
  border-left: 1vw solid #ffffff;
  position: absolute;
  bottom: 50%;
  left: 1.6vw;
  transform: translateY(1vw);
  opacity: 0.1;
}

.search button {  
  display: none;
  position: absolute;
  right: -0.2vw;
  top: -0.5vw;  
  height: 4.2vw;
  width: 4.4vw;
  background-image: url(search.html);
  background-color: transparent;
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0;
  outline: 0;
  cursor: pointer;
  opacity: .7;
  }

.search button:focus {background-color: transparent;}

.ADD {
  z-index: 110; 
  height: 3.6vw;
  padding: 0.7vw;
  width: 100%;
  border: none; 
  border-radius: 0; 
  outline: 0; 
  background-color: #ffffff20;
  position: relative;
  background-image: url(add-slide.html);
  background-size: 2vw;
  background-position: center;
  background-repeat: no-repeat;
}
.ADD:hover {background-color: #090; background-color: rgba(0, 255, 0, 0.3); background-color: #219721;}

.DELETE {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  z-index: 99999; 
  height: 3.6vw;
  width: 3.6vw;
  border: none; 
  padding: 0.7vw;
}
.DELETE:hover {background-color: rgba(255, 0, 0, 0.5);}

.DELETE svg {
  fill: #000; 
  transform: rotate(45deg); 
  opacity: 0.1;
}

.DELETE:hover svg {opacity: 1;}

.TT-BR {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  background-color: #fff;
  bottom: -5vw;
  color: #000;
  padding: 0.9vw 3.3vw;
  width: max-content;
  z-index: 9;
}
.TT-BR::after {
  display: inline-block;
  content: " ";
  background-color: white;
  width: 2.4vw;
  height: 2.4vw;
  position: absolute;
  top: 0;
  right: 0.5vw;
  transform: translateY(-1.2vw) rotate(45deg);
  z-index: -1;
}

.TT-R {
  visibility: hidden; 
  opacity: 0; 
  position: absolute;
  right: -9.5vw;
  background-color: #fff;
  top: 50%;
  color: #000;
  padding: 0.9vw 3.3vw 0.9vw 2.3vw;
  width: max-content;
  transform: translateY(-1.8vw);
  z-index: 9;
}
.TT-R::after {
  display: inline-block;
  content: " ";
  background-color: white;
  width: 2.5vw;
  height: 2.5vw;
  position: absolute;
  top: 0;
  left: -1.2vw;
  transform: translateY(0.55vw) rotate(45deg);
  z-index: -1;
}
.edit-icon {
  position: absolute;
  width: max-content;
  min-width: 3.6vw;
  height: 3.6vw;
  top: 50%;
  right: -4.5vw;
  transform: translateY(-1.8vw);
  z-index: 1;
}
.edit-icon svg {
  width: 1.12vw;
  height: 100%;
  opacity: 0.02;
  fill: #ffffff;
}
.edit-icon .TT-TL {
  margin-left: -1vw;
  z-index: 9;
}
.edit-icon:hover svg {
  opacity: 1;
  fill: #219721;
}
.edit-icon:hover .TT-TL {
  visibility: visible;
  opacity: 1;
}

.add-icon {
  position: absolute;
  width: max-content;
  min-width: 3.6vw;
  height: 3.6vw;
  top: 50%;
  right: -7.5vw;
  transform: translateY(-1.8vw);
  z-index: 1;
}
.add-icon svg {
  width: 1.12vw;
  height: 100%;
  opacity: 0.02;
  fill: #ffffff;
}
.add-icon .TT-TL {
  margin-left: -1vw;
  z-index: 9;
}
.add-icon:hover svg {
  opacity: 1;
  fill: #219721;
}
.add-icon:hover .TT-TL {
  visibility: visible;
  opacity: 1;
}

.DELETE:hover .TT-BR {
  visibility: visible;
  opacity: 1;
  transition-delay:0.5s;
}
.ADD:hover .TT-BR {
  visibility: visible;
  opacity: 1;
  transition-delay:0.5s;
}


.TT-BL {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  background-color: #fff;
  bottom: -5vw;
  color: #000;
  padding: 0.9vw 3.3vw;
  width: max-content;
}
.TT-BL::after {
  display: inline-block;
  content: " ";
  background-color: white;
  width: 2.4vw;
  height: 2.4vw;
  position: absolute;
  top: 0;
  left: 0.5vw;
  transform: translateY(-1.2vw) rotate(45deg);
  z-index: -1;
}
.TT-TL {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 0;
  background-color: #fff;
  top: -5vw;
  color: #000;
  padding: 0.9vw 3.3vw;
  width: max-content;
}
.TT-TL::after {
  display: inline-block;
  content: " ";
  background-color: white;
  width: 2.4vw;
  height: 2.4vw;
  position: absolute;
  bottom: 0;
  left: 0.5vw;
  transform: translateY(1.2vw) rotate(45deg);
  z-index: -1;
}
.open-media-btn {
  width: 8vw;
  height: 8vw;
  z-index: 99;
  cursor: pointer;
}
.open-media:hover .TT-BL {
  visibility: visible;
  opacity: 1;
  transition-delay:0.5s;
}

.EDIT {
  z-index: 110; 
  margin-top: -2.6vw;
  height: 3.6vw;  
  border: none; 
  opacity: 0.3;
  cursor: pointer;
}
.EDIT:hover {
  opacity: 1;
  background-color: #000;
  background-color: transparent;
}
.edit-contacts {
  margin-top: -4.8vw;
}
.edit-c {
  display: inline-block;
  position: relative;
  right: -3.6vw;
}

.overlay {
  z-index: 99;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0.8;
}

.link {background-image: url('link.html'); background-size: 49%; background-repeat: no-repeat; background-position: center;}

.bookmark {background-image: url('bookmark.html'); background-size: 49%; background-repeat: no-repeat; background-position: center;}

.bookmarked {background-image: url('bookmarked.html'); background-size: 49%; background-repeat: no-repeat; background-position: center;}


.menuOpen {position:absolute; right: 0; top:0; width: 15vw; height: 100%; z-index: 99; box-sizing: border-box; outline: none;}
.menuClose {box-sizing: border-box; position: absolute; left: -1vw; top: 0; width: 5vw; height: 5vw; z-index: 999; outline: none;}

.mSH {height: 12vw; width: 22vw; position: absolute;}
.btnOP, .btnCL {width: 10vw; height: 10vw; position: absolute; right: 20vw;}
.btnSH {background-color: #464646; height: 3.6vw; width: 3.6vw;  display: block; position: relative; padding: 1vw;}
.btnSH:hover {background-color: #000;}
.closed .btnCL {display: none;}
.closed .btnOP {display: block;}
.closed .menuClose {display: none;}
.open .btnCL {display: block;}
.open .btnOP {display: none;}

.btnTR:hover .menuTR {display: block;}

.menuI {width: 86vw;}
.CUR {border-right-color: #FFF;}

.STR {
  position: absolute;
  right: 3.2vw; top: 3.2vw;
  text-align: right;
  text-decoration: none;  
}

.lng {margin: -0.9vw 0 0 0;background-color: rgba(255,255,255,.1)}

.edit-media {
  z-index: 2;
  visibility: hidden;
  opacity: 0;
}
.open-media{
  z-index: 1;
  height: 7.2vw;
  width: 10.8vw;
}

.edit-media, .frame {
  width: 6.4vw;
  height: 3.6vw;
}
.frame {
  opacity: 0.7;
}
.open-media:hover .frame {
  opacity: 1;
}
.open-media:hover .open-close, 
.open-media:hover .CTR,
.open-media:hover .CBR,
.open-media:hover .CBL {
  opacity: 1;
}
.edit-media.open, .frame.open {
  width: 40vw;
  height: 21.6vw;
}
.edit-media.open {
  opacity: 1;
  visibility: visible;
}
.open-close {
  width: 2.2vw;
  height: 2.2vw;
  opacity: 0.15;
  top: -1vw;
  background-image: url(add-slide.html);
  background-size: 2vw;
  background-position: center;
  background-repeat: no-repeat;
  left: -1vw;
}
.open-close {
  transform: rotate(270deg);
}
.open-close.open {
  transform: rotate(225deg);
}

.edit-image {
  z-index: 2;
}

input.XS {
  width: 3.6vw;
  padding: 0.8vw;
}
input.S {
  width: 6.3vw;
  padding: 0.9vw;
}
input.M {
  width: 16vw;
}
input.L {
  width: 22vw;
}
input.XL {
  width: 32.33vw;
}
.input.label {
  bottom: -2vw;
}
.input.label.right {
  bottom: -2vw;
  right: 5.8vw;
}

.CTL, .CTR, .CBR, .CBL {
  width: 1.15vw;
  height: 1.15vw;
}
.CTL {
  border-top: 0.3vw solid #ffffff20; 
  border-left: 0.3vw solid #ffffff20;
}
.CTR {
  border-top: 0.3vw solid #ffffff20; 
  border-right: 0.3vw solid #ffffff20;
}
.CBR {
  border-bottom: 0.3vw solid #ffffff20; 
  border-right: 0.3vw solid #ffffff20;
}
.CBL {
  border-bottom: 0.3vw solid #ffffff20; 
  border-left: 0.3vw solid #ffffff20;
}

.contacts {
  position: relative;
}

.messenger {
  background-image: url(messenger-logo-white.html);
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  width: 4vw;
  height: 4vw;
}
.skype {
  background-image: url(skype-logo-white.html);
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  width: 4vw;
  height: 4vw;
}
.whatsup {
  background-image: url(whatsup-logo-white.html);
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  width: 4vw;
  height: 4vw;
}
.contact {position: relative;}
.BTXT {
  font-size: 5.2vw;
  line-height: 4.8vw;
  color: white;
}

article footer {
  position: relative;
  min-height: 17vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

image-slice {
  margin: 0px 10px;
}

.canvas-container {
  width: 100% !important;
  height: auto !important;
  position: relative;
  top: 0;
  z-index: 1;
}
canvas {
  width: 100% !important;
  height: auto !important;
  background: #5d5d5d; 
  touch-action: none;
position: relative;
}

.op01 { opacity: 0.08; }
.op01:hover { opacity: 1; }

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.file-btn-wrapper, .brand-btn-wrapper {
  overflow: hidden;
  z-index: 99;     
  display: inline-block;
  position: relative;
}
.file-btn-wrapper:hover button, .brand-btn-wrapper:hover button {
  background-color: #219721; 
  color: white;
}

.file-btn {
color:white;
background-color: #00000030;
border: 1px solid transparent;
line-height: 3.5vw; 
padding: 0 1vw;
cursor: pointer;
}

.file-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 25vw;
  height: 3.6vw;
  cursor: pointer;
}

.brand-btn-wrapper input[type=file] {
  font-size: 3.6vw;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: auto;
  min-width: fit-content;
  height: 3.6vw;
  cursor: pointer;
}

.upload {
 z-index: 999;
}

.filename {
  background-color: transparent;
  color: white;
  opacity: 0.3;
  width: 43vw;
}
.filename:hover, .filename:focus {
  background-color: white;
  color: black;
  opacity: 1;
}

.canvas2 {
  position: absolute;
  z-index: 99;
  top: 0;
  right: 3.6vw;
  width: 6.4vw !important;
}

.pos {
  position: absolute;
  top: 47%;
  right: -2vw;
  opacity: 0.1;
}
.btn-white {
  background-color: white;
  color: black;
  text-align: center;
  padding: 0.9vw 3.6vw;
  width: max-content;
  cursor: pointer;
}
.btn-tr {
  background-color: #ffffff20;
  color: #bdbdbd;
}
.btn-white:hover, .btn-tr:hover {
  background-color: #219721;
  color: white;
}

.logo {
	width: 16vw;
	margin: 3.6vw 3.6vw;
	opacity: 0.8;
	position: absolute;
	z-index: 1;
	opacity: 0.1;
}
.loading-container {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 62%;
  overflow: hidden;
}
.indicator {
  height: 2px;
  width: 100%;
  background-color: #219721;
  opacity: .4;
}
.indicator.loading {
  opacity: 1;
  width: 95%;    
}
.indicator.loaded {
  width: 100%;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999;
}
.readmore {
  position: absolute;
  top: 3.6vw;
  right: 3.6vw;
}
.share {
  background-image: url(share.html);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
  height: 5.6vw;
  width: 5.6vw;
  cursor: pointer;
  opacity: 0.6;
}
.share:hover {
  opacity: 1;
}
.social {
  position: absolute;
  right: 75.6vw;
  bottom: 0;
  width: 20vw;
  opacity: 0;
  z-index: 2;
}
.social.open {
  opacity: 1;
  right: 5.6vw;
}
.social .icon {
  opacity: 0.6;
  z-index: 1;
  position: relative;
  float: right;
  width: 5.6vw;
  height: 5.6vw;
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #464646;
}
.social .icon:hover {
  opacity: 1;
}
.facebook {
  background-image: url(facebook.html);
}
.twitter {
  background-image: url(twitter.html);
}
.pinterest {
  background-image: url(pinterest.html);
}
.markki {
	width: 4vw;
	float: right;
	opacity: 0.12;
}
.markki:hover {
	opacity: 1;
}

.markki-image {
	width: 7.2vw;
	height: 7.2vw;
	z-index: 999;
	position: absolute;
	top: 1.6vw;
	right: 3.6vw;
	background-image: url(../images/markki-piho.html);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: cover;
	border-radius: 50%;
}
.markki-name {
	font-size: 2.5vw;
	margin-top: 12vw;
}

.cart-container {
  width: 62%;
  height: 34vw;
  /* background-color: #142215; */
  background-color: #28724F;
  padding: 3.6vw;
  /* border-radius: 2px; */
  position: absolute;
  top: 3.6vw;
  right: 6.5vw;
  z-index: 2;
  opacity: 0;
  overflow: hidden;
  transform: scale(0.04) translateX(0) translateY(0);
  transform-origin: top right;
}
.cart-container.open {
  opacity: 1;
  height: auto;
  transform: scale(1) translate(-3.6vw, 0vw);
}


@media (max-width: 490px) {

  .loading-container { width: 88%; }
  
  body {
    font-size:3.9vw; 
    line-height: 4.6vw;
  }
  h1, .h1, .title, input, textarea, button {
    font-size: 3.9vw; 
    line-height: 5.6vw; 
    padding:1.6vw 3.6vw;
  } 

  .logo {
      width: 25vw;
  }

  #Rname {
      position: absolute;
      font-size: 5.9vw;
      transform: rotate(90deg);
      position: absolute;
      right: -11vw;
      top: 37vw;
      display: block;
  }
  #name {display: none;}

  .AVR, .AVL {top: -6vw; height: 12vw; width: 12vw; }
  .AVR {right:-3.5vw;}
  .AVL {left:-3.5vw;}

  .nod, .ncd {display: none;}
  .nom {display: block;}
  

  nav {
    position: relative; 
    top: 0;
    width: 100%; 
  }
  main {
    width: 100%;
    padding: 9vw 0 9vw 0;
  }
  .lang {
    margin-top: 8vw;
  }
  .lang .items {
    background-color: #181919;
    padding: 0 22vw 22vw 0;
  }
  .contacts {
    padding-top: 8vw;
  }
  .markki-image {
    width: 12vw;
    height: 12vw;
    z-index: 999;
    position: absolute;
    top: 6vw;
    right: 6vw;
    background-image: url(../images/markki-piho.html);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    border-radius: 50%;
  }
  .markki-name {
    font-size: 7.5vw;
    margin-top: 18vw;
  }
  a .title {max-width:100%;}

  .thumbs { width: 8.4vw; }
  .thumb img, .thumb .img {
    min-height: 4.6vw;
  }
  .bigimg {
    height: 56.3vw;
  }
  .title { margin-top: -8.8vw; min-width: 15vw;}
  .ADD { 
      height: 8.4vw;
      padding: 1.6vw;
  }
  .article-data {
      padding: 6.3vw 0 27.6vw 0;
  }
  .PL {padding-left: 8vw;} 
  .ML {margin-left: 3.6vw;} .MT {margin-top: 3.6vw;} .MR {margin-right: 3.6vw;} .MB {margin-bottom: 3.6vw;}
  .ML2 {margin-left: 12vw;} .MT2 {margin-top: 12vw;} .MR2 {margin-right: 12vw;} .MB2 {margin-bottom: 12vw;}
  .ML4 {margin-left: 4vw;} .MT4 {margin-top: 4vw;} .MR4 {margin-right: 4vw;} .MB4 {margin-bottom: 4vw;}

  .MT8 {margin-top: 15vw;}
  .MB8 {margin-bottom: 15vw;}
  .SCR {display: none;}  
  #sidelogo {top: 6vw; right:0; height: 12vw; width: 12vw;  fill: #ccc; fill: #4c4c4c;}
  #online {        
      top: 10.4vw;
      right: 4.63vw;
      background-color: rgb(0, 255, 0); background-color: #219721;
      height: 2.76vw;
      width: 2.76vw;
  }

  .more:after {
      width: 7.2vw;
      height: 7.2vw;
      right: 1.5vw;
      transform: translateY(3.6vw) rotate(45deg);
  }
  .more.open:after {
      bottom: 100%;
      transform: translateY(3.6vw) rotate(45deg);
  }
  article { margin-bottom: 12vw; }
  article footer {min-height: 49.6vw;}
  .pos { display: none; }
  nav section {
      max-width: 100%;
  }
  .menu-items {
      position: relative;
      display: block;
  }
  .item {
      padding: 3.6vw 12vw 3.6vw 12vw;
  }
  .search input, .input-dark, .input-light {
      width: 100%;
      padding: 3.6vw 0 3.6vw 12vw;
  }
  
  .MT2 {
      margin-top: 12vw;
  }
  .item.expand::after {
      right: 12vw;
      margin-left: 1vw;
      border-left: 2vw solid transparent;
      border-right: 2vw solid transparent;
      border-top: 2vw solid #ffffff;
      transform: translateY(-1.2vw);
      opacity: 0.5;
  }
  .item.expand.open::after {
      border-top: 0vw solid #ffffff;
      border-bottom: 2vw solid #ffffff;
      bottom: 100%;
      transform: translateY(3vw);
  }
  .item.current::before {
    display: none;
}
  .btn-white {
      padding: 1.6vw 12vw;
  }

  .phone {
      margin-top: 1.8vw;
  }
  .messenger, .skype, .whatsup {
      
      width: 12vw;
      height: 12vw;
  }
  
  .share {
    height: 15.6vw;
    width: 15.6vw;
  }

  .social {
      right: 75.6vw;
      width: 74vw;
      background-color: #464646;
  }
  .social.open {
      opacity: 1;
      right: 15.6vw;
  }
  .social .icon {
      width: 15.6vw;
      height: 15.6vw;
  }
  .readmore {
      position: absolute;
      top: 12vw;
      right: 12vw;
  }
  .maintitle {
    color: rgb(255 255 255 / 20%);
    font-size: 3.7vw;
    top: 85vw;
    right: -232vw;
    width: 222vw;
    letter-spacing: 1vw;
}
}