@charset "utf-8";
/* CSS Document_index */

body * {
	margin: 0 auto;
}


.wrapper {
/*         background: url("img/2_fon.png") no-repeat center center fixed;
background-size: cover; */
    background-image:url("img/2_fon.png");
    background-size:cover; 
    background-repeat:no-repeat;
	height: calc(100vh * 0.97);
	animation-name: wrapper;
    animation-duration: 39s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end);
}

@keyframes wrapper {
    0% {
        background-image: url(img/2_fon.png);
    }
    33%
    {
        background-image: url(img/3_fon.png);
    }
    66%
    {
        background-image: url(img/1_fon.png);
    }
    100%
    {
        background-image: url(img/1_fon.png);
    }
}

.header { 
/*     height: 6.3%;
min-height: 5%;
max-height: 9%; */
    height: fit-content;
    min-height: 5%;
}

.logo {
    position: fixed;
    margin-top: 1.3vh;
    margin-left: calc(100vw * 0.01);
    display: inline-block;
    cursor: pointer;
    z-index: 3;
	
}

.menu {width: 100%;
	/* padding-right:0.5%; */
	/* top:5%; */
	position:fixed;
	background-color: #336699;	
}
 .knopka1, .knopka2, .knopka3, .knopka4 {
	 display:inline-block; margin-top: 1%; margin-bottom:1%; cursor:pointer; text-align:center;	 
 }
.knopka1 {margin-left:19.65%; background:rgba(51,153,255,0.7); }
	.knopka1:hover {
		background:rgba(51,153,255,0.5);}
.knopka2 { margin-left:7%;	}
	.knopka2:hover {
		background:rgba(51,153,255,0.5);}
.knopka3 { margin-left:7%;	}
	.knopka3:hover {
		background:rgba(51,153,255,0.5);}
.knopka4 { margin-left:7%;	}
	.knopka4:hover {
		background:rgba(51,153,255,0.5);}

.overlay-tabs {
    /* position: absolute; */
    display: flex;
    /* top: .8125rem; */
    /* left: 34.625rem; */
    background: rgba(0, 0, 150, .2);
    border: .125rem solid #252b3f;
    padding: .25rem .5rem;
    border-radius: .5rem;
    height: 7vh;
    min-height: 7vh;
    max-height: 7vh;
    width: calc(100vw * 0.6);
    max-width: calc(100vw * 0.6);
    min-width: calc(100vw * 0.6);
    transform: skew(45deg);
}

.overlay-tabs a {
    display: flex;
    border-bottom: none;
    text-decoration: none;
    width: calc(100vw * 0.33);
    justify-content: center;
    text-align: center;
 }
 
.overlay-tabs a:hover {
    background: rgba(73, 130, 290, .2);
}

.overlay-tabs .tab {
    display: flex;
    align-items: center;
    /* padding: 0 1.75rem; */
    color: #f5f5f5;
    border-radius: .25rem;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.overlay-tabs .tab:hover {
    background: rgba(73, 130, 290, .2);
}

.overlay-tabs .tab .text {
    font-weight: 900;
    font-size: calc(100vw * 0.02);
    line-height: 1rem;
    width: 100%;
    transform: skew(-45deg);
}

.podlojka { background-color: rgba(51,102,153, 0.5);
	margin-top:10%;
	margin-bottom:-1%;
	width:45%;
	height:45%;
	background-position:center;

}
.nazvanie {
	font-family:Verdana, Geneva, sans-serif;
	font-size:3.7vw;
	color:#ffffff;
	text-align:center;
	margin-top:2%;
}
.nazvanie2 {
	font-size:2.5vw;
	font-family:Verdana, Geneva, sans-serif;
	color:#ffffff;
	text-align:center;
	margin-top:5%;
    	margin-left: 5%;
    	margin-right: 5%;
	margin-bottom: 1%;
}
 .polosa {width: 40%;
 height: 2px;
 margin:auto%;
 background-color: white;
 background-position:center;
 }
 
 .lightrope {
    min-height: 36px;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    z-index: 10000
}

.lightrope div {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: flash-1;
    animation-name: flash-1;
    background: #00f7a5;
    border-radius: 50%;
    box-shadow: 0 1.3333333333px 16px 7px #00f7a5;
    display: block;
    display: inline-block;
    height: 8px;
    list-style: none;
    margin: 0 75px;
    padding: 0;
    position: relative;
    width: 8px
}

.lightrope div:nth-child(odd) {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-name: flash-2;
    animation-name: flash-2;
    background: aqua;
    box-shadow: 0 1.3333333333px 16px 7px rgba(0,255,255,.5)
}

.lightrope div:nth-child(4n+2) {
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
    -webkit-animation-name: flash-3;
    animation-name: flash-3;
    background: #f70094;
    box-shadow: 0 1.3333333333px 16px 7px #f70094
}

.lightrope div:nth-child(odd) {
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s
}

.lightrope div:nth-child(3n+1) {
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s
}

.lightrope div:before {
    background: #222;
    border-radius: 3px;
    content: "";
    height: 2.6666666667px;
    left: 1px;
    position: absolute;
    top: -1.3333333333px;
    width: 6px
}

.lightrope div:after {
    border-bottom: 2px solid #222;
    border-radius: 50%;
    content: "";
    height: 5.3333333333px;
    left: 5px;
    position: absolute;
    top: -4px;
    width: 162px
}

.lightrope div:last-child:after {
    content: none
}

.lightrope div:first-child {
    margin-left: -150px
}


@-webkit-keyframes flash-1 {
    0%,to {
        background: #00f7a5;
        box-shadow: 0 1.3333333333px 16px 7px #00f7a5
    }

    50% {
        background: rgba(0,247,165,.4);
        box-shadow: 0 1.3333333333px 16px 7px rgba(0,247,165,.2)
    }
}

@keyframes flash-1 {
    0%,to {
        background: #00f7a5;
        box-shadow: 0 1.3333333333px 16px 7px #00f7a5
    }

    50% {
        background: rgba(0,247,165,.4);
        box-shadow: 0 1.3333333333px 16px 7px rgba(0,247,165,.2)
    }
}

@-webkit-keyframes flash-2 {
    0%,to {
        background: aqua;
        box-shadow: 0 1.3333333333px 16px 7px aqua
    }

    50% {
        background: rgba(0,255,255,.4);
        box-shadow: 0 1.3333333333px 16px 7px rgba(0,255,255,.2)
    }
}

@keyframes flash-2 {
    0%,to {
        background: aqua;
        box-shadow: 0 1.3333333333px 16px 7px aqua
    }

    50% {
        background: rgba(0,255,255,.4);
        box-shadow: 0 1.3333333333px 16px 7px rgba(0,255,255,.2)
    }
}

@-webkit-keyframes flash-3 {
    0%,to {
        background: #f70094;
        box-shadow: 0 1.3333333333px 16px 7px #f70094
    }

    50% {
        background: rgba(247,0,148,.4);
        box-shadow: 0 1.3333333333px 16px 7px rgba(247,0,148,.2)
    }
}

@keyframes flash-3 {
    0%,to {
        background: #f70094;
        box-shadow: 0 1.3333333333px 16px 7px #f70094
    }

    50% {
        background: rgba(247,0,148,.4);
        box-shadow: 0 1.3333333333px 16px 7px rgba(247,0,148,.2)
    }
}

 
 @media (max-width: 800px){
	 	.logo { margin-left: 1%; height:5%}
		.logo img { width: 60%; height:10vh;}
		.knopka1 {margin-left:13%; width:15%}
		.knopka2, .knopka3, .knopka4 {margin-left:2.5%; width:15%}
 }
 @media (max-width: 500px){
	 .logo {height:2%; margin-top:2%; height:2%}
	 .logo img { width: 60%; height:10vh;}
	 .knopka1 {width:15%}
	 .knopka2, .knopka3, .knopka4 {margin-left:3%; width:15%}
	 .podlojka {width:40%; height:30%}
	 /*.nazvanie {font-size:25px;} 
	 .nazvanie2 {font-size:20px;} */
 }