:root {
	--index: calc(1vw + 1vh);
	--color-blue: #235BB6;
}

 body{   
    font: normal 300 18px / 1.5 'TT Hoves', Arial, Helvetica, sans-serif;
    overflow-x: hidden;
	overflow-y: auto;
    overflow-anchor: none;
    color:#fff;
    text-align: left;
    min-width: 360px;
	min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #343434;
 }   
 body.family {
	background-color: #fff;
	overflow-y: auto;
 }
.content {
    width: 100%;
    position: absolute;
    background: #344;
	top: 0;
    right: 0;
    bottom: 0;
    left: 0;	
    padding: 0;
    background:url(/img/iceb.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;    
}

.family .content {
    background:url(/img/artem.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;	
	position: relative;
}
.family .content .internal {
	background:	#3760E1;
	color:#fff;
    width: 70vw;
    padding: 2vh 5vw;
	display: flex;
    justify-content: flex-end;
    min-height: 100vh;	
}
.inner {
    display: flex;
    flex-direction: column;
    max-width: 1900px;
    margin: auto;	
}
.inner h1 {
    font-size: 240px;
    margin: 0;
    font-weight: 500;
    text-transform: uppercase;
}
.header {
	margin-top:120px
}
.hint {
	font-size: 26px;
	max-width: 500px;
	line-height: 120%;
    margin-top: 1em;
}
.line,
.header {
    display: flex;
    padding: 0 100px;
    flex-wrap: wrap;   
    align-content: center;
    align-items: flex-start;
}
.fichi,
.items,
.hint{
	display:flex;
}
.fichi {
	flex-direction: column;
}
.items,
.row {
	display:flex;	
	flex-direction: row;	
	justify-content: space-between;
	margin:0.5em 0;
}
.row {flex-wrap:wrap;}
.item {
	background: #EE2195;
	padding: 1em;
    border-radius: 10px;	
}
.item:first-child {
	margin-right:1em;
}
.ficha {
    background: #fff;
    color: #000;
    padding: 0.5em 1em 1em 0.7em;
    border-radius: 10px;
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;	
    margin-right: 1em;	
	margin-bottom: 1em;	
}
.data .title {
	font-size: 28px;	
}
.margin-top {margin-top:50px}
.data .text {
	font-size: 20px;	
}
.back .svg svg{
    transform: rotate(180deg);
}
.slogan {
	font-size: 20px;	
    margin-left: 1em;
    line-height: 120%;	
}
.desc{
    font-size: 25px;	
	margin-bottom: 50px;
}
h1{
    font-size: 115px;
	font-weight:500;
	line-height: 100%;
	margin-top: 0.5em;	
}
h2 {
	font-size: 48px;	
	margin-bottom: 0;
}

.ficha.iq{flex:1}
.ficha:nth-child(3n) {
	margin-right: 0;	
}
div.svg {display: flex;}
.ficha .data {margin-left:1em;}
.ficha .data .title{font-size:24px;white-space: nowrap;}
.ficha .data .text{font-size: 14px;max-width: 280px;line-height: 1em;}
.line {
    height:fit-content;  
    width: calc(100% - 200px - 2em);
    align-items: flex-start;
}
.line.first {
	height: 10vh;
}
.line.main {
    width: calc(100% - 200px);
    margin: auto;
    height: 44vh;
}
.line.buttons {
    position: absolute;
    bottom: 0;
    margin-bottom: 100px;	
}
.line.buttons .second{
	justify-content: flex-start;
}
.frame{
	max-width:1200px;
    width: 100%;	
}
.frame .hint { max-width: none}
.btn {
    color: #fff;
	font-size: 24px;
    cursor: pointer;
    text-align: center;
	padding:20px 23px;
	border:2px solid #fff;
}
.btn.second {
	color: #000;
	background:#fff;
	margin-left:32px;
}

.btn:hover {
	filter: brightness(1.2);
}
.line.main span{
	font-size:75px	
}
.header .logo{
    flex-direction: column;
}
.inner .line.first .logo,
.inner .logo {
    width: calc(70% - 2em);
    display: flex;
    height:100%;
}
.inner .logo.second,
.inner .line.first .logo.second,
.inner .logo.timer {
    width: calc(30% - 2em);
    display: flex;
    height:100%;
}
.inner .first.logo {

}
.inner .logo.ibake{
    background:url(/img/ibake.svg);
	background-repeat: no-repeat;
    background-position: left;
    background-size: contain;  
	width: 100%;
    display: flex;
    height:100%;	
}
.inner .bm{
    background:url(/img/bmykn.svg);
	background-repeat: no-repeat;
    background-size: contain;  
	width: 100%;
	height: 60px;
}
.inner .first .logo.second{
	justify-content: flex-end;
}


.inner .line .logo{
	
}
	
.page {
    background:url(/img/bm.svg);
	background-repeat: no-repeat;
    background-position: left;
    background-size: contain;  
}
#clock2 {display:none;}

#clockdiv {
	font-size:64px;
	line-height: 1em;
	white-space: nowrap;
}
#load {
	position: absolute;
	width: 100%;
}
#load a{
	text-decoration:none;
}
#clockdiv .seconds {
	width:100px;
	display: inline-block;
}
#load {
	/*display:none;*/
}

@media (min-width: 1700px) {
	.inner .first.logo {max-width:800px;}
}


@media (max-width: 1700px) {
	.ficha .data .title { white-space: wrap;}	
	.ficha.iq {flex: auto;}
	
.ficha:nth-child(3n) {
	margin-right: 1em;	
}	
.ficha:nth-child(2n) {
	margin-right: 0;	
}	
	
}
@media (max-width: 1400px) {
	.header {margin-top: 75px;}
    .line.buttons {margin-bottom: 60px;}
	h1 {font-size: 100px;}
	#clockdiv {font-size: 40px;}
	.inner .bm {height: 40px;}	
	.hint {font-size: 18px;max-width: 400px;}	
	.btn {font-size: 18px; padding: 12px 20px;}	
}
@media (max-width: 1300px) {
	.ficha { width: 40%;}
}	
@media (max-width: 1200px) {
	.ficha .data .title { white-space: wrap;line-height: 1em;margin-bottom: 5px;}	
	.ficha.iq {flex: auto;}
	h1 {font-size: 80px;}
	h2 {font-size: 36px; }
	.line, .header { padding: 0 50px;}
}
@media (max-width: 1100px) {
.inner .line.first .logo,
.inner .logo {width: calc(65% - 2em);}
.inner .logo.second,
.inner .line.first .logo.second,
.inner .logo.timer {width: calc(35% - 2em);}
}

@media (max-width: 991px) {
	.header {margin-top: 60px;}
    .line.buttons {margin-bottom: 40px;}
	.inner .bm {height: 40px;}	
	.hint {max-width: 300px;}	
	.btn {padding: 12px 20px;min-height: 22px;max-height: fit-content;}	
	.inner .line.first .logo, .inner .logo {width: calc(70% - 2em) ;}
	.line, .header { padding: 0 2em;}
	.inner .logo.ibake {background-position: center;}
}
@media (max-width: 768px) {
	
    .line, .header { padding: 0 24px;}	
	.line {width: calc(100% - 48px);}
	.line.main {width: calc(100% - 48px);}

	.inner .logo.timer {width: 100%;display: block;}	
    .inner .bm {height: 60px;}	
	 .line.buttons {position:initial;}
	.header {margin-top: 2em;}
	.hint {max-width: none;margin-bottom:30px;}
	.btn.second {margin-left: 0;}
	.inner .logo { width: 100%;}
	.items {    flex-direction: column;}
	.item { width: calc(100% - 2em);}
	.item:first-child {margin-right: 0;margin-bottom: 1em;}
	.ficha { width: 100%;        justify-content: flex-start;}
	.ficha,	
	.ficha:nth-child(3n),
	.ficha:nth-child(2n) {
		margin-right: 0;	
	}	
	h1 {font-size: 50px;}
	h2 {font-size: 24px; }
	#buttons {display: flex;justify-content: space-between;}
	#mobilem {display:none;}
	#clock2 {display:block;font-size: 40px;	}
	#load {width: 100%; margin-top:1em; position: initial;}
	#load a {width: 100%;}
}
@media (max-width: 576px) {
	h1 {font-size: 36px;}
	h2 {font-size: 22px;}
	.line, .header {width: calc(100% - 48px)}

	.inner .line.first .logo{width:100%;justify-content: center;text-align:center;line-height: 1.2em;font-size: 18px;}
	
	.line.first {height: auto;}
	.line.main {height: auto;width: calc(100% - 48px)}

	.line.buttons {display: flex;align-items: center;}
	.line.main span{font-size:50px}		
	.inner .first .logo.second {margin-top:1em;}
	.desc {font-size: 18px; margin-bottom:1em;}
	.data .title { font-size: 24px;}
	.data .text { font-size: 18px;}
	.hint {    margin-top: 0;}	
}