html, body, div, span, applet, object,
iframe, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}


	@-ms-viewport {
		width: device-width;
	}

	html {
		box-sizing: border-box;
		scroll-behavior: smooth;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}


body {
	line-height: 1;
	font-family: sans-serif;
	background: rgb(18,74,184);
	background: -moz-radial-gradient(circle, rgba(18,74,184,1) 0%, rgba(0,8,64,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(18,74,184,1) 0%, rgba(0,8,64,1) 100%);
	background: radial-gradient(circle, rgba(18,74,184,1) 0%, rgba(0,8,64,1) 100%);
/*	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#124ab8",endColorstr="#000840",GradientType=1); */
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-size: 13pt;
	color: #eee;
	font-weight: 300;
/*	text-shadow: 1px 1px 1px black;*/
}


a {
	text-decoration: none;
}

a:hover {
	cursor: pointer;
}


b, strong {
	font-weight: 600;
}



.block {
	display: block;

}

.first_title {
	display: block;
	text-align: center;
	width: 100%;
	font-weight: 600;
	font-size: 1.5em;
	padding: 1em;
	line-height: 1.8em;
	margin-top: .5em;

}



.StandWithUkraine {

	display: block;
	position: absolute;
	top: 2.4em;
	right: 2em;
}

.contentTop {
	padding: 0 1em 1em 1em;
	margin: 0em auto;
	background-color: rgba(0, 0, 0, 0.4);;
}


.contentTopGrad {
	position:relative;
	margin-bottom: -250px;
	display: block;
	height: 250px;
	opacity: 0.4;
	width: 100%;
	background-image: url("./border.png");
	background-repeat: repeat-x;
	background-size: contain;
	z-index: -2;
}


.content {
	width: 95%;
	max-width: 1500px;
	margin: 0em auto;
}


.backToTop {

	  --offset: 100px; /* control when the button appear */

  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 24px;
  border: none;
  outline: none;
  background-color: #111111;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  transition: all ease-in 0.3s;
  text-align: center;
  line-height: 50px;
}
.backToTop:hover {
  background-color: #fff;
  color: #111111;
  border: 2px solid #111111;
  font-size: 30px;
}



.top_cont {
	--offset: 1000px; 
	display: inline;
	width: 100%;

  position: sticky;
  bottom: 20px;      
/*  right: 0;*/
  margin-top: calc(100vh + var(--offset));

  padding: 0 1em 2em 0;
  width:max-content;
  margin-left:auto;
}

.top {

	box-shadow: 0px 0px 5px #00000066;

/*  height: 50px;*/
/*  width: 50px;*/

    /* visual styling */
  padding: 26px;
  margin-left: auto;

/*	aspect-ratio: 1;*/
  background: #1e3f9f;
  border-radius: 30px;
  font-size: 0;

}


.top:before {
  content: "";
  position: absolute;
/*  bottom: 30px;*/
	margin-top: -11px;
	margin-left: -5px;
	margin-bottom: 11px;
	margin-right: 5px;
	height: 20px;
	width: 20px;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}





.socialBar {
	position: absolute;
	top: 1.5em;
	left: 2em;
}

.socialBar img{
	transition: transform .2s;
	width: 2em;
	margin: .5em 0.3em;
}

.socialBar img:hover{
    transform:scale(1.2);
}

.socialBar a{
	text-decoration: none;
}



.color_block {
	display: inline-block;
	font-size: .7em;
	font-weight: 600;
	text-transform: uppercase;
	background-color: Gold;
	color: black;
	border-radius: 1em;
	padding: 0.2em 1em 0em 1em;
	margin-right: 1em;
	margin-bottom: .5em;
	position: relative;
	top: -2em;
}


.title {
	font-size: 2.5em;
	margin: 0 0 1em 0;
/*	line-height: 1em;*/
}


.title_footer {
	font-size: 2.5em;
	margin: 1em 0em;
	text-align: center;
}

.intro {
	padding: 1em;
	line-height: 140%;

}

.items a {
    text-decoration: underline dashed;
    color: #fff;
}

		.items a:hover {
    cursor: pointer;
}



.items {
	text-align: left;
	margin: 1.2em;
}


.cont0 {
	display: flex;
	flex-direction: row;
	justify-content: center;


}


.cont0_video {
	max-width: 590px;
}

.cont0_video video {
	border-radius: 200px;
/*	border:  1px solid #666;*/
		width: 100%;
/*	text-align: left;*/
}


/* .cont0_video:last-of-type {
 margin-top: 3em;
} */




.cont_footage {
	display: flex;
	flex-direction: row;
  	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4%;
}


.subCont1_rev {

	scale: 0.9;
	margin-bottom: 2em;
}






.subCont1_rev {
	text-align: center;
	line-height: 1.5em;
	min-width: 120px;
	border-radius: .5em;
	padding: .5em 1em;
/*	transition: transform .2s ease-out;*/


  -webkit-transition: background .5s ease-out;
  -moz-transition: background .5s ease-out;
  -o-transition: background .5s ease-out;
  transition: background .5s ease-out;
}




.subCont1_rev:hover {
  background: rgba(255,255,255,0.3);
}


.subCont1_rev img {
	height: 3em;
}

.subCont1_rev p {
	font-weight: 600;
	font-size: .7em;
	text-transform: uppercase;
}

.subCont1_rev span {
	font-size: .9em;
	line-height: 10px;
}

.subCont1_rev a {
	color: white;
}





.titles {
		margin: 0 auto;
		margin: .5em 0em;
		line-height: 1.2em;
}






.button_menu {
    display: flex;
    justify-content: center; /* Horizontal alignment (optional) */
    align-items: center;     /* Vertical alignment */
	text-align: center;
	border-radius: 5px;
	/*width: 100px;*/
	height: 3em;
	line-height: 3em;
	font-weight: 400;
	font-size: 0.9em;
	cursor: pointer;
	text-decoration: none;
	color: white;
	border:  .5px solid #666;
	margin-bottom: 1.5em;
	background-color: #bbbbbb33;
	text-transform: uppercase;
	padding: 1em;
}



.button_menu.selected_button {
	border:  2px solid Gold;
}

.button_menu:hover {
	background-color: rgba(127, 209, 255, 0.3);
}


.cont2 {
	display: flex;
  flex-wrap: wrap;
	gap: 3%;
  justify-content: center;
	align-items: stretch;
}



.cont2 .a:hover {

	color: white;
}






.aicon {

		background-image: url("./external_link.svg");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1.2em;

		text-decoration: dashed underline;

}

.cont2 a:link {
  color: #ddf;
		text-decoration: dashed underline;
}

.cont2 a:visited {
  color: #faf;
}

.cont2 a:hover {
  color: #F00;
}

.cont2 a:active {
  color: #Faa;
} 






.subCont2 {
	text-align: center;
	margin-bottom: 2em;
	line-height: 1.5em;
	max-width: 250px;
	background-color: rgba(60, 60, 60, 0.3);
	transition: transform .2s ease-out;
	color: white;
	box-shadow: inset 0 0 0 .5px #777;
	border-radius: .4em;

}




.subCont2 img {
	width: 100%;
	border-radius: .4em .4em 0 0;
	cursor: pointer;
}

.subCont2 video {
	width: 100%;
	border-radius: .4em .4em 0 0;
}



.subCont2 p {
	font-weight: 600;
	font-size: 1.2em;
	text-transform: uppercase;
	margin: 0 .5em;
}

.subCont2 span {
	padding: 0em .5em;
	display: block;
	margin: .5em auto;
}



.bottomButton {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.topButton {
	margin-top: 1em;
}


.preview_table {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}



.preview_table img {
	height: 100%;
	width: 100%;
}
.preview_table a {
	display: block;
	height: 2em;
	margin: .2em 0;
}





.filter-gray {
    filter: saturate(0);
    opacity: 0.5;
/*filter: blur(2px);*/
}



.inside {
	display: none;
}

section:first-of-type {
	color: gray;
}





.sort {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8em;
	margin: .5em 0;
	justify-content: center;
	background-color: rgba(5, 16, 75, .4);
/*	border: .5px solid rgba(255, 255, 255, 0.4);*/
/*	border-radius: 10px;*/
	padding: 0.5em;
}


.sort div {
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px dotted rgba(0, 0, 0, 0.4);
	padding: .4em .7em;
	margin: .3em;
	border-radius: .5em;
	cursor: pointer !important;
}




.buttonMore {
	display: block;
	background-color: #6f808d78;
	border-radius: 0.5em;
	width: 130px;
	line-height: 40px;
/*	heigth: 100px;*/
	margin: 1em auto;
/*	padding: 0.3em;*/
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	color: white;
	text-align: center;


}

.buttonMore:hover {
/*	outline:  2px solid #eee;*/
	background-color: rgba(127, 209, 255, 0.3);
}







.buttonMoreApp {
	display: inline-block;
	text-align: center;
	border-radius: 5px;
	width: 150px;
	font-size: 1em;
	line-height: 40px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	color: white;
	border:  .5px solid #666;
	margin: .5em auto;
	background-color: #bbbbbb33;
}

.buttonMoreApp:hover {
color: white;
/*	outline:  2px solid #eee;*/
	background-color: rgba(127, 209, 255, 0.3);
}




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

	.cont2 {
		grid-template-columns: repeat(auto-fill, 30%);
		gap: 30px;
	}


}


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

	.span_block {
		display: block;
	}
}



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

	.cont2 {
		grid-template-columns: repeat(auto-fill, 45%);
	}
}



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


	.cont0 {
		flex-direction: column-reverse;
		width: 100%;
	}

	.cont0_video {
		text-align: center;
		margin: 0 auto;
	}

	.cont0_video video {
		text-align: center;
	}


	.cont0_video:last-of-type {
	  margin-top: 0em;
	}

	.intro {
		width: 100%;

		margin: 0 auto;
	}


	.subCont2 {
	max-width: 30%;

	}

	.title {
		text-align: center;
			margin: 1em 0 1em 0;
	}


  .cont2 {
    gap: 15px;
  }

}



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

	.subCont2 {
	max-width: 46%;

	}

  .cont2 {
    gap: 20px;
  }
}


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

	.cont2 {
		grid-template-columns: repeat(auto-fill, 370px);
	}

	.intro .subCont1_rev {
		min-width: 110px;
	}

	.intro .cont_footage2 {
		justify-content: center;
	}

	.StandWithUkraine {
		right: 1em;
	}

	.socialBar {
		left: 1em;
	}
}

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


	.first_title {
		margin-top: 2em;
	}

}




@media screen and (max-width: 450px) {
	
/*	.cont0_video {
		width: 100%;
	}

	.cont0_video video {
		width: 100%;
	}

	.cont0_video:last-of-type {
	  margin-left: 0em;
	}

	.subCont2 {
		max-width: 90%;
		flex: 1 auto;
	}*/

  .cont2 {
    gap: 5px;
  }

  .subCont2 {
    max-width: 48%;
  }



	.socialBar {
		position: static;
		width: 100%;
		text-align: center;
		padding: 1em 0 0em 0;
	}

	.StandWithUkraine {
		position: static;
		display: inline-block;
		width: 100%;
		text-align: center;
		margin-top: 2em;
	}

	.first_title {
		margin-top: 0em;
	}

	.first_title {
	  padding: .5em;
	}


}


@media screen and (max-width: 360px) {
	
	.subCont1_rev {
		padding: 0em 0em;
	}

	.socialBar img{
		margin: .5em 0.15em;
	}

}


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.icon_preview {
	display: flex;
	flex-wrap: wrap;
	margin: 1em;
	justify-content: center;
	line-height: 1.5em;
}

.icon_preview img {
	position: relative;
	width: 1.2em;
	margin-left: .5em;
}

.span_block_inline {
	display: inline-block;
}