@charset "UTF-8";
/* CSS Document */

html {
	scroll-behavior: smooth;
	background-color: #0044d0;
	font-size: 100%;
} 

body {
	display: flex;
	height: 100vh;
	margin: 0;
}

/* RESIAL REG */


@font-face {
	font-family: 'resial-black';
	src: 	url("../fonts/Resial-Black.woff") format('woff'),
			url("../fonts/Resial-Black.woff2") format('woff2'),
			url("../fonts/Resial-Black.ttf") format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'resial-bold';
	src: 	url("../fonts/Resial-Bold.woff") format('woff'),
			url("../fonts/Resial-Bold.woff2") format('woff2'),
			url("../fonts/Resial-Bold.ttf") format('truetype');
	font-style: bold;
}

@font-face {
	font-family: 'resial-medium';
	src: 	url("../fonts/Resial-Medium.woff") format('woff'),
			url("../fonts/Resial-Medium.woff2") format('woff2'),
			url("../fonts/Resial-Medium.ttf") format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'resial-regular';
	src: 	url("../fonts/Resial-Regular.woff") format('woff'),
			url("../fonts/Resial-Regular.woff2") format('woff2'),
			url("../fonts/Resial-Regular.ttf") format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'resial-light';
	src: 	url("../fonts/Resial-Light.woff") format('woff'),
			url("../fonts/Resial-Light.woff2") format('woff2'),
			url("../fonts/Resial-Light.ttf") format('truetype');
	font-style: thin;
}

@font-face {
	font-family: 'resial-thin';
	src: 	url("../fonts/Resial-Thin.woff") format('woff'),
			url("../fonts/Resial-Thin.woff2") format('woff2'),
			url("../fonts/Resial-Thin.ttf") format('truetype');
	font-style: thin;
}

/* RESIAL CONDENSED */

@font-face {
	font-family: 'resial-c-black';
	src: 	url("../fonts/Resial-CondensedBlack.woff") format('woff'),
			url("../fonts/Resial-CondensedBlack.woff2") format('woff2'),
			url("../fonts/Resial-CondensedBlack.ttf") format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'resial-c-bold';
	src: 	url("../fonts/Resial-CondensedBold.woff") format('woff'),
			url("../fonts/Resial-CondensedBold.woff2") format('woff2'),
			url("../fonts/Resial-CondensedBold.ttf") format('truetype');
	font-style: bold;
}

@font-face {
	font-family: 'resial-c-medium';
	src: 	url("../fonts/Resial-CondensedMedium.woff") format('woff'),
			url("../fonts/Resial-CondensedMedium.woff2") format('woff2'),
			url("../fonts/Resial-CondensedMedium.ttf") format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'resial-c-regular';
	src: 	url("../fonts/Resial-CondensedRegular.woff") format('woff'),
			url("../fonts/Resial-CondensedRegular.woff2") format('woff2'),
			url("../fonts/Resial-CondensedRegular.ttf") format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'resial-c-light';
	src: 	url("../fonts/Resial-CondensedLight.woff") format('woff'),
			url("../fonts/Resial-CondensedLight.woff2") format('woff2'),
			url("../fonts/Resial-CondensedLight.ttf") format('truetype');
	font-style: thin;
}

@font-face {
	font-family: 'resial-c-thin';
	src: 	url("../fonts/Resial-CondensedThin.woff") format('woff'),
			url("../fonts/Resial-CondensedThin.woff2") format('woff2'),
			url("../fonts/Resial-CondensedThin.ttf") format('truetype');
	font-style: thin;
}

/* DETAILS */


details {
	width: 100%;
	position: fixed;
	color: white;
	font-size: clamp(1rem, 2.4vw, 4rem);
	background-color:#0044d0;
	z-index: 10;
}

details summary:hover{color: black; cursor: pointer;}

details summary{
	font-family: resial-medium;
	text-decoration: underline;
	text-align: left;
	padding-left: 2%;
	padding-top: 1vh; 
	padding-bottom: 1vh; 
}

details summary a{
	text-decoration: underline;
	color: red;
	font-family: resial-medium;
	text-align: right;
	
}

summary {list-style: none;}
summary::-webkit-details-marker {display: none;}


.language {
	position: fixed;
	font-family: resial-medium;
	font-size: clamp(1rem, 2.4vw, 4rem);
	right: 2%;
	left: 67%;
	padding-top: 1vh;
	padding-bottom: 1vh;
	text-align: right;
	z-index: 12;
}

.language a {color: white; text-decoration: underline;}
.language a:hover{color: black;}


.mail {
	position: fixed;
	text-decoration: none;
	font-family: resial-medium;
	font-size: clamp(1rem, 2.4vw, 4rem);
	left: 33%;
	right: 33%;
	padding-top: 1vh;
	padding-bottom: 1vh;
	text-align: center;
	z-index: 12;
}

.mail a {color: white; text-decoration: none;}
.mail a:hover{color: black;}


details p {
	color: #F3F3F3;
	font-family: resial-regular;
	line-height: 115%;
	font-size: clamp(1.2rem, 1.6vh, 1.7rem);
	z-index: 10;
}

.bluehover:hover {color: black;}

details p a {
	text-decoration: underline;
	color: white;
	z-index: 10;
}

.infobanner{ 
	text-align: center;
	color: black;
	padding-left: 4px;
	padding-right: 4px;
	margin: 2px;
}

.infobanner a{color: black;}
.infobanner a:hover{color:white;}

.reload{text-decoration: none; color: white;}
.reload:hover{color: black;}

.blue { 
	background-color:#0044d0;
	text-align: justify;
	padding-top: 3px;
	padding-left: 8px;
	padding-right: 5px;
	padding-bottom: 3px;
	margin: 4px;
}

.box {display: flex}

.left {
	position: relative;
	width: 50%;
	text-align: justify;
	padding-top: 6px;
	padding-bottom: 6px; 
	padding-right: 8px;
	margin-bottom: 0px;
	margin-top: 0px;
	font-size: clamp(1.2rem, 1.3vmax, 1.7rem);
	padding-left: 10px;
	color: #2A6CF5;
	background-color: black;
	font-family: resial-c-regular;
	line-height: 125%;
	z-index: 10;
}

.right {
	position: relative;
	width: 50%;
	text-align: justify;
	padding-left: 10px;
	padding-top: 6px;
	padding-bottom: 6px; 
	padding-right: 8px;
	margin-bottom: 0px;
	margin-top: 0px;
	font-size: clamp(1.2rem, 1.3vmax, 1.7rem);
	color: #0044d0;
	background-color: #F3F3F3;
	font-family: resial-c-regular;
	line-height: 125%;
	z-index: 10;
}



/* DETAILS SPECIFICATION*/

.discourse{color: #2A6CF5;text-decoration:none;}
.discourse:hover {color: white;}

.practice{color: #0044d0;text-decoration:none;}
.practice:hover {color: black;}


/* COLUMN LEFT */



.column1 {
	margin-top: 3vmax;
	height: auto;
	font-size: clamp(0.8rem, 1.1em, 1.1rem);
	width: 50%;
	overflow-y: auto; 
	padding: 0px;
	padding-right: 0%;
	box-sizing: border-box;
	color:#BABABA;
	background-color: black;
	font-family: resial-light;
	line-height: 120%;
	direction: rtl;
	
	scroll-behavior: smooth; /* Smooth scrolling */
}

.column1 h2 {
	font-family: resial-bold;
	color: #F3F3F3;
	padding-right: 5vw;
	padding-top:40vh;
	padding-bottom: 46vh;
	font-size: clamp(1.3rem, 8vw, 8rem);
}

.column1 h2 a{text-decoration: none; color: #F3F3F3;}
.column1 h2 a:hover{color: #1e5fe6;}

.column1 p {
	padding-right: 1vw;
	padding-left: 0vw;
	width: 94%;
	direction: ltr;
}

.column1 p a {color: #BABABA; text-decoration: underline;}
.column1 p a:hover {color: #1e5fe6;}

/* COLUMN RIGHT */

.column2 {
	margin-top: 3vmax;
	height: auto;
	font-size: clamp(0.8rem, 1.1em, 1.1rem);
	width: 50%;
	overflow-y: auto; 
	padding: 0px;
	padding-left: 0%;
	box-sizing: border-box;
	color:#5D5D5D;
	background-color:#F0F0F0;
	font-family: resial-light;
	line-height: 120%;
	scroll-behavior: smooth; /* Smooth scrolling */
}

.column2 h2 {
	font-family: resial-bold;
	color: black;
	padding-left: 5vw;
	font-size: clamp(1.3rem, 8vw, 8rem);
	padding-top:40vh;
	padding-bottom: 46vh;
}

.column2 h2 a{text-decoration: none; color: black;}
.column2 h2 a:hover{color: #0044d0;}

.column2 p {
	padding-left: 2vw;
	width: 94%;
}

.column2 p a {color: #5D5D5D; text-decoration: underline;;}
.column2 p a:hover {color: #0044d0;}

.top {color: grey; text-decoration: none; text-align: center; width: 100%; float: left; padding-top: 3vh; padding-bottom: 4vh; font-size: 1.5vmax;}
.top:hover {color: #0044d0;}

/* random */

img {
	position: relative;
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.anchor {
	position:absolute; 
	top:-94vh;
}



/* CSS FOR IMAGE SLIDER */

/* Slider container */
.slider {
	width: 100%;
	max-width: auto;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
  }
  
/* Slider image styling */
.slider img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	z-index: 1;
}
  
/* Common styling for slider buttons */
.slider button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: transparent;
	border: none;
	color: transparent; /* ARROW COLOR! */
	font-size: 2em;
	height: 100%;
	cursor: pointer;
	opacity: 0;
	z-index: 1;
  }
  
.slider button:hover {
	opacity: 0;
	color: #0044d0;
}
  
/* Position the left (previous) arrow */
.slider-prev {
	left: 0%;
	width: 0%;
}
  
/* Position the right (next) arrow */
.slider-next {
	right: 0%;
	width: 100%;
	height: 100%;
} 

/* MODAL IMAGE */

#myBtn {
	text-decoration: underline;
	line-height: 100%;
	background-color: transparent;
	border: none;
	padding: 0px;
	margin: 0px;
	z-index: 10;
	color: #F3F3F3;
	font-family: resial-regular;
	font-size: clamp(1.2rem, 1.6vh, 1.7rem);
}

#myBtn:hover {color: black}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content */
.modal-content {
  z-index: 20;
  margin: auto;
  padding: 10%;
  width: 55vmin;
	overflow: auto;
}

/* The Close Button */
.close {
	z-index: 20;
	position: fixed;
	padding: 35%;
	opacity: 0.0;
  	color: white;
	font-size: 3vh;
  	font-weight: bold;
}

.close:hover,
.close:focus {

  cursor: pointer;
}



@media only screen and (max-width: 700px) {

	.blue{
		font-size: 0.9em;
		padding-top: 2px;
		padding-left: 3px;
		padding-right: 3px;
		padding-bottom: 2px;
	}
	
	.blue a{font-size: 0.9em; padding: 0px;}
	.left {font-size: 0.7em; line-height: 100%;  padding-top: 4px; padding-bottom: 4px; }
	.right {font-size: 0.7em; line-height: 100%;  padding-top: 4px; padding-bottom: 4px; }
 	.infobanner {font-size: 1em; line-height: 100%; margin: 0px; padding-bottom: 5px;}
	#myBtn {font-size: 0.9em;}
	.column1 p {font-size: 0.7em; line-height: 120%}
	.column2 p {font-size: 0.7em; line-height: 120%}
	details p a {font-size: 0.9em;}
	details p {margin: 0px;}

}

@media only screen and (max-width: 350px) {

	.blue{
		font-size: 0.8em;
		padding-top: 2px;
		padding-left: 3px;
		padding-right: 3px;
		padding-bottom: 2px;
	}
	
	.blue a{font-size: 0.8em;}
	.left {font-size: 0.7em; line-height: 100%; padding-top: 4px; padding-bottom: 4px; }
	.right {font-size: 0.7em; line-height: 100%;  padding-top: 4px; padding-bottom: 4px; }
 	.infobanner {font-size: 1em; line-height: 100%; margin: 0px; padding-bottom: 5px;}
	#myBtn {font-size: 0.8em;}
	.column1 {font-size: 0.6em; line-height: 120%}
	.column2 {font-size: 0.6em; line-height: 120%}
	details p a {font-size: 0.9em;}
	details p {margin: 0px;}

}