:root {
	--yellow: #FFBF00;
	--blue: #004BBB;
	--darkblue: #0C3B6E;
	--deepblue: #002852;
	--lightblue: #E3EDF7;
	--lightgreen: #87BD9F;
	--lightred: #FBE9E9;
	--green: #22864C;
	--orange: #DC6C09;
	--red: #D62323;
	--darkgray: #3A4249;
	--gray1: #F6F7F9;
	--gray2: #DBDFE3;
	--gray3: #828282;
	--gray4: #727981;
}

/* ==========================================================================
   Fonts
   ========================================================================== */
/*
 * Open Sans
*/
/* Regular */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans/opensans_regular.eot');
  src: url('../fonts/opensans/opensans_regular.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/opensans_regular.woff') format('woff'), url('../fonts/opensans/opensans_regular.ttf') format('truetype'), url('../fonts/opensans/opensans_regular.svg#opensans_regular') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans/opensans_regular_italic.eot');
  src: url('../fonts/opensans/opensans_regular_italic.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/opensans_regular_italic.woff') format('woff'), url('../fonts/opensans/opensans_regular_italic.ttf') format('truetype'), url('../fonts/opensans/opensans_regular_italic.svg#opensans_regular') format('svg');
  font-weight: 400;
  font-style: italic;
}
/* Semibold */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans/opensans_semibold.eot');
  src: url('../fonts/opensans/opensans_semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/opensans_semibold.woff') format('woff'), url('../fonts/opensans/opensans_semibold.ttf') format('truetype'), url('../fonts/opensans/opensans_semibold.svg#opensans_semibold') format('svg');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans/opensans_semibold_italic.eot');
  src: url('../fonts/opensans/opensans_semibold_italic.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/opensans_semibold_italic.woff') format('woff'), url('../fonts/opensans/opensans_semibold_italic.ttf') format('truetype'), url('../fonts/opensans/opensans_semibold_italic.svg#opensans_semibold') format('svg');
  font-weight: 600;
  font-style: italic;
}
/* Bold */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans/opensans_bold.eot');
  src: url('../fonts/opensans/opensans_bold.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/opensans_bold.woff') format('woff'), url('../fonts/opensans/opensans_bold.ttf') format('truetype'), url('../fonts/opensans/opensans_bold.svg#opensans_bold') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans/opensans_bold_italic.eot');
  src: url('../fonts/opensans/opensans_bold_italic.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/opensans_bold_italic.woff') format('woff'), url('../fonts/opensans/opensans_bold_italic.ttf') format('truetype'), url('../fonts/opensans/opensans_bold_italic.svg#opensans_bold') format('svg');
  font-weight: 700;
  font-style: italic;
}
/* ==========================================================================
   CLASS
   ========================================================================== */
/* Magazine */
/* ==========================================================================
   Main
   ========================================================================== */
.Magazine {
	background-color: var(--gray1);
	color: #666666;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	/* overflow-x: hidden; */
}
/* ==========================================================================
   Navbar
   ========================================================================== */
.Magazine .navbar-Ant,
.Magazine .navbar-Group {
	z-index: 1051;
	background-color: var(--darkblue);
}
.Magazine .navbar #navbar {
	justify-content: space-between;
	padding: 10px 0;
}
.Magazine .navbar .icon-menu {
	color: #252525;
}
.Magazine .navbar-toggle .icon-bar {
	background-color: #252525;
}
.Magazine .nav-title {
	color: #252525;
}
.Magazine .nav-title h3 {
	margin-bottom: 0;
	font-weight: 700;
}
.Magazine .nav-item a {
	color: #252525;
}
.Magazine .navbar-nav li a:hover {
	color: var(--yellow);
	text-decoration: none;
}
@media (max-width:767px) {
	.Magazine .navbar-nav li a {
		text-align: right;
	}
}

.nav-item .breadcrumb {
    display: flex;
    padding: 10px 40px;
    margin-bottom: 0;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.82);
    border-radius: 50px;
    font-size: 14px;
}
.nav-item .breadcrumb li, .nav-item .breadcrumb li a {
    display: flex;
    align-items: center;
    color: #6d6c6c;
    padding: 0;
}
.nav-item .breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0;
    color: unset;
    content: "";
    height: 6px;
    width: 6px;
    background: #a1a1a1;
    border-radius: 50%;
    margin-right: 10px;
    margin-left: 10px;
}
/* ==========================================================================
   Pages
   ========================================================================== */
.Magazine .Pages {
	background-color: #ffffff;
	margin-top: 30px;
	padding-left: 0;
	padding-right: 0;
}
.Magazine .Pages .page-header {
	margin: 15px 0 10px;
	padding-left: 15px;
	padding-right: 15px;
}
/* ==========================================================================
   Pages Menu
   ========================================================================== */
.Magazine .PagesMenu {
	padding: 10px 0;
	background-color: #f6f3f1;
	border-top: 3px solid var(--yellow);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	position: -webkit-sticky; /* Safari */
  	position: sticky;
	top: 0;
	z-index: 1;
}
.Magazine .PagesMenu .Left {
	float: left;
	width: 30%;
} 
.Magazine .PagesMenu .Right {
	float: left;
	width: 30%;
}
.Magazine .PagesMenu .Center {
	float: left;
	width: 40%;
}
.Magazine .PagesMenu .Counter {
	display: table;
	font-size: 1.3em;
	font-weight: 600;
	color: #252525;
	margin: auto;
	padding: 0 10px;
}
.Magazine .PagesMenu .Icon {
	float: left;
	font-size: 1.3em;
	color: #252525;
	cursor: pointer;
	padding: 0 10px;
}
.Magazine .PagesMenu .Right .Icon {
	float: right;
}
.Magazine .PagesMenu .Icon:hover {
	opacity: 0.8;
}
.Magazine .PagesMenu .Icon A {
	color: #252525;
}
@media (max-width: 768px) {
	.Magazine .PagesMenu {
		display: none;
	}
}
/* ==========================================================================
   Loader
   ========================================================================== */
.Magazine .Loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/*background-color: rgba(255,255,255,1.0);*/
	background-color: var(--darkblue);
	z-index: 1050;
	/*display: none;*/
}
.Magazine .Loader .Title {
	color: #fff;
	text-align: center;
	font-size: 2.4vw;
	font-weight: 200;
	margin-top: 75px;
}
.Magazine .Loader .progress-bar {
	background-color: var(--yellow);
}
/* ==========================================================================
   Pages Menu
   ========================================================================== */
.Magazine .PageSelect {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(14,14,14,0.8);
	z-index: 1150;
	display: none;
}
.Magazine .PageSelect .List {
	margin-top: 25px;
	overflow-y: auto;
    height: 95vh;
}
.Magazine .PageSelect .List LI {
	float: left;
	width: 12.5%;
	cursor: pointer;
	padding: 2px;
	opacity: 0.8;
}
.Magazine .PageSelect .List LI:hover {
	opacity: 1; 
}
.Magazine .PageSelect .List LI IMG{
	width: 100%;
	padding: 2px;
	border: 1px solid #333;
}
.Magazine .navbar li div {
	padding: 15px 20px;
}
.Magazine .navbar li:last-child div {
	padding-right: 0;
}
.Magazine .navbar.overdue {
	background-color: #cf2929;
}
.Magazine .navbar li.title-overdue > div {
	padding-top: 11px;
	padding-bottom: 11px;
	padding-right: 20px;
	font-size: 1.3em;
	color: #fff;
}
.Magazine .navbar.overdue li.title > div {
	color: #ccc;
}
/* ==========================================================================
   Page Elements
   ========================================================================== */
.Magazine .Page {
	position: relative;
	border-bottom: 25px solid var(--gray1);
}
.Magazine .Page {
	position: relative;
	border-bottom: 35px solid var(--gray1);
}
.Magazine .Page .Background {
	width: 100%;
	height: auto;
	text-align: center;
    background-color: var(--gray1);
}
.Magazine .Page .Background IMG {
	width: 100%;
	height: auto;
}
@media (min-width:735px) {
	.Magazine .Page.Zoom .Background IMG {
		width: auto;
		max-height: 86vh;
		max-width: 100%;
		transition: 0.3s;
	}
}
.Magazine .PageElement {
	position: absolute;
}
.Magazine .PageElementWrapper {
	/*position: absolute;
	width: 100%;
	height: auto;*/
}
.Magazine .PageElement.Product {
	width: 14%;
	height: auto;
	color: #FFF;
	background: var(--darkblue);
	text-align: center;
}
.Magazine .PageElement.Product .Price {
	font-size: 1.8em;
	font-weight: 700;
}
.Magazine .PageElement.Product .Currency {
	font-size: 1em;
	font-weight: 700;
	background: #FCBF00;
	color: #000000;
}
@media (max-width: 600px) {
	.Magazine .PageElement.Product .Price {
		font-size: 1em;
	}
	.Magazine .PageElement.Product .Currency {
		font-size: 0.6em;
	}
}
.Magazine .PageElement.Animated IMG {
	width: 100%;
	/*height: auto;*/
}
.Magazine .PageElement.Movie {
	/*width: 6%;
	height: auto;*/
	/*padding: 1%;*/
	padding: 0.5%;
	background-color: var(--darkblue);
}
@media (max-width: 340px) {
	.Magazine .PageElement.Movie {
		padding: 0 1%;
	}
}
.Magazine .PageElement.Movie I {
	color: #ffffff;
}
.Magazine .PageElement.Movie I.fa-3x {
	font-size: 3vw;
}
.Magazine .PageElement.Details {
	width: 3.5%;
	height: auto;
	/*padding: 7px;*/
	/*background-color: red;*/
}
.Magazine .PageElement.Details I.fa-plus {
	color: #ffffff;
}
.Magazine .PageElement.Details I.fa-circle {
	color: var(--darkblue);
}
.Magazine .PageElementWindow {
	position: fixed;
	left: 0%;
	right: 0%;
	top: 10%;
	margin: 5% auto;
	display: none;
	background-color: #fff;
	color: #333;
	padding: 1rem;
	transition: all 0.3s;
}
.Magazine .PageElementWindow.size-small {
	width: 25%;
}
.Magazine .PageElementWindow.size-medium {
	width: 500px;
}
.Magazine .PageElementWindow.size-big {
	width: 75%;
}
@media (max-width: 768px) {
	.Magazine .PageElementWindow {
		width: 90%;
	}
	.Magazine .PageElementWindow.size-small {
		width: 90%;
	}
	.Magazine .PageElementWindow.size-medium {
		width: 90%;
	}
	.Magazine .PageElementWindow.size-big {
		width: 90%;
	}
}
@media (max-width: 340px) {
	.Magazine .PageElementWindow {
		width: 90%;
	}
	.Magazine .PageElementWindow.size-small {
		width: 90%;
	}
	.Magazine .PageElementWindow.size-medium {
		width: 90%;
	}
	.Magazine .PageElementWindow.size-big {
		width: 90%;
	}
}
.Magazine .PageElementWindow H3 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-top: .5rem;
	margin-bottom: 1rem;
	color: var(--blue);
    text-transform: uppercase;
}
.Magazine .PageElementWindow H4 B {
	font-size: 1.5vw;
	color: #9C0303;
}
.Magazine .PageElementWindow P {
	font-size: 0.8em;
	font-weight: 300;
}
.Magazine .PageElementWindow .WindowClose {
	color: var(--blue);
	position: absolute;
    right: 8px;
    top: 8px;
}
.Magazine .PageElementWindow .WindowClose:hover {
	cursor: pointer;
}
.Magazine .PageElementWindow .Producer {
    color: var(--darkblue);
	font-weight: 600;
}
.Magazine .PageElementWindow .Image {
	max-width: 100%;
	margin-bottom: 1rem;
}
/* .Magazine .PageElementWindow .Image IMG {
	width: 100%;
} */
.Magazine .PageElementWindow .PriceTag {
	height: auto;
	color: #333;
	background: #fff;
	text-align: right;
}
.Magazine .PageElementWindow .PriceTag .Price {
	font-size: 1em;
	font-weight: 700;
}
.Magazine .PageElementWindow .PriceTag .Currency {
	font-size: 1em;
	font-weight: 700;
	background: #FCBF00;
	color: #000000;
}
.Magazine .PageElementWindow .MoreTag a {
	display: block;
    background-color: var(--yellow);
	color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
    width: 100%;
    padding: 15px 10px;
	transition: opacity 0.1s ease-in;
}
.Magazine .PageElementWindow .MoreTag a span {
	background-color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    float: right;
    position: relative;
}
.Magazine .PageElementWindow .MoreTag a:hover {
	opacity: 0.8;
}
.Magazine .PageElementWindow .MoreTag a span i {
	color: var(--darkblue);
    font-size: 14px;
    position: absolute;
    left: 9px;
}
.Magazine .PageElementWindow .Price-wrapper {
    border-top: 1px solid var(--darkblue);
    border-bottom: 1px solid var(--darkblue);
	float: right;
	position: relative;
	margin-bottom: 15px;
}
.Magazine .PageElementWindow .Price {
	color: var(--yellow);
    font-weight: bold;
    font-size:100px;
}
.Magazine .PageElementWindow .Price2 sup {
	color: var(--yellow);
    font-weight: bold;
	font-size: 50px;
    top: -1em;
}
.Magazine .PageElementWindow .Unit {
	color: var(--darkblue);
    font-weight: 600;
	position: absolute;
    bottom: 25px;
    right: 5px;
}
.Magazine .active-overlay .overlay {
	position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.4);
}
.Magazine .active-element {
	display: block;
}
.Magazine .BottomInfo {
	position: relative;
	border-bottom: 60px solid var(--gray1);
}
/* ==========================================================================
   Pin
   ========================================================================== */
.Magazine .ring-container {
	position: relative;
}
.Magazine .circle {
	width: 15px;
	height: 15px;
	background-color: #ffa500;
	border-radius: 50%;
	position: absolute;
	top: 23px;
	left: 23px;
}
.Magazine .ringring {
	border: 3px solid #ffa500;
	border-radius: 30px;
	height: 31px;
	width: 31px;
	position: absolute;
	left: 15px;
	top: 15px;
	animation: pulsate 1s ease-out;
	animation-iteration-count: infinite; 
	opacity: 0.0
}
@keyframes pulsate {
	0% {transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}