/* CSS FILE FOR NEW INDEX PAGE */

@font-face {
	font-display: swap;
	font-family : 'Carlito';
	font-style  : normal;
	font-weight : 400;
	src         : url('fonts/carlito/carlito-v3-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap; 
	font-family : 'Carlito';
	font-style  : italic;
	font-weight : 400;
	src         : url('fonts/carlito/carlito-v3-latin-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family : 'Carlito';
	font-style  : normal;
	font-weight : 700;
	src         : url('fonts/carlito/carlito-v3-latin-700.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family : 'Carlito';
	font-style  : italic;
	font-weight : 700;
	src         : url('fonts/carlito/carlito-v3-latin-700italic.woff2') format('woff2');
}

body {
	font-family     : Calibri,Carlito,Arial,serif;
	color           : White;
	background-color: Black;
	margin          : 0;
}

.main-block {
	display         : flex;
	justify-content : space-between;
    width           : 100%;
	margin          : 0;
}

.left-block {
	display         : flex;
	justify-content : left;
	margin          : 0;	
	position        : relative;
}

.left-block:hover > .new-text {
	opacity   : 1; 
	transition: .3s;
}

.new-text { 
	text-align      : center;
	opacity         : 0;
	transition      : .3s;
	position        : absolute;
	top             : calc(50% - 0em);
	left            : 10%;
  	padding         : 6px 6px 6px 6px;
	/*margin          : 1em 0em 0em 0em;*/
	background-color: PowderBlue;
	border          : 3px OrangeRed solid;
	border-radius   : 10px; 
	color           : DarkRed;
}

.now-text { 
	text-align      : center;
	opacity         : 0;
	transition      : .3s;
	position        : absolute;
	top             : calc(50% - 0em);
	left            : 35%;
  	padding         : 6px 6px 6px 6px;
	/*margin          : 1em 0em 0em 0em;*/
	background-color: PowderBlue;
	border          : 3px OrangeRed solid;
	border-radius   : 10px; 
	color           : DarkRed;
}

.center-block {
	display         : flex;
	justify-content : center;
	margin          : auto;
}

.right-block {
	display         : flex;
	justify-content : right;
	margin          : 0;
	position        : relative; 
}

.right-block:hover > .now-text {
	opacity    :   1;
	transition : .3s;
}

#vmenu {	
	white-space     : nowrap;
}
	
#vmenu ul {
	list-style-type : none;
	display         : table-row;
}

#vmenu li {
	font-size       : 1.4em; /* 1.5em vo */
	color           : DarkRed;
    font-weight     : normal;
    white-space     : nowrap;
	padding         : 6px 6px 6px 6px;
	margin          : 1em 0em 0em 0em;
	background-color: LightYellow;
	border          : 3px OrangeRed solid;
	border-radius   : 10px; 
}

#vmenu li:first-child {
	margin          : 0em 0em 0em 0em;
}	

#vmenu a {
	display         : block;
	color           : DarkRed;
    font-weight     : normal;
}

li:hover {
	transform       : scale(1.1);
}

#vmenu a:hover {
	color           : OrangeRed;
}

img { 
  object-fit        : contain;
}

h1 {
	margin          : 0;
	background-color: Tan;
	color           : White;
	text-align      : center;
	font-size       : 3.5em;
	font-weight     : normal;	
}

.ban {
	display         : flex;
	margin          : 0;
	background      : Tan;
	color           : White;
	text-align      : center;
	justify-content : space-between;
	align-items     : center;
}

.left {
	text-align      : left;
    width           : 20%;
}

.right {
	display: flex;
	justify-content : right;
    width           : 20%;
}