@import url("https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  letter-spacing: 0.04em;
}
body {
  font-family: "Signika Negative", sans-serif;
  font-weight: 300;
  padding: 2px;
}
.section {
  height: 100vh;
  width: 100%;
  position: relative;
  padding: 0;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: blur(0.5px);
   animation: section 8s ease;
   box-shadow: 0 0 70px black;
   background: URL(../image/Bundesarchiv_B_145_Bild-F079064-0006,_Bonn,_Gymnasium.jpg); 
}
.bg1 {
  background-color: #ccc;
}
.bg2 {
  background-color: #333;
}
.revealUp {
  opacity: 0;
  visibility: hidden;
}
.spacer {
  height: 50vh;
  background-color: #000;
}

.section{
	background-size: cover;
background-position: center;
}
//------------------------------------------------------------------

.waviy {
  position: relative;
}
.waviy span {
	box-shadow: 0 0 10px black;
	width: 80px;
  position: relative;
  display: inline-block;
  font-size: 100px;
  color: #fff;
  text-transform: uppercase;
  animation: flip 2s infinite;
  animation-delay: calc(.3s * var(--i));
}
@keyframes flip {
  0%,90% {
    transform: rotateY(360deg) 
  }
}

.text{
	display: grid;
	width: 1300px;
	color: white;
	left: 100px;
	 font-family: 'ofont.ru_Komi';
    src: url('../text/ofont.ru_Komi.ttf');
    font-weight: normal;
    font-style: normal;
    text-shadow: 0 0 10px black, 0 0 40px black;
}

.grid_text_1{
	display: grid;
	grid-template-columns: repeat(1, 1500px);
	border: 5px 5px black;
}
//-----------------------------------------------------------------


@keyframes  section{
0% {
    transform: translateY(100px);
    opacity: 0;
}
100%{
    transform: translateY(0);
    opacity: 1;
}
}


.ssilka_12{
position: absolute;
right: 30px;
top: 60px;
}

a{
	text-decoration: none;
	color: black;
	font-size: 29px;
	text-shadow: 0 0 40px white;
}

a:hover{
	color: white;
	text-shadow: 0 0 30px black;
}

.futer_body_1{
   overflow: hidden;
	background-color: #282828;
	width: 90px;
	height: 90px;
	max-width: 400px;
    justify-content: center;
    padding-top: 12px;
    border: solid 2px black;
    border-radius: 12px;
    position: absolute;
    bottom: 10px;
    margin: 0px 0xp 10px 0px;
    object-position: fixed;
}

.futer_body_1{
	width: 240px;
	box-shadow: 0 0 20px white;

}


.futer_image_1{
	left: -54px;
  top: -2px;  
	box-shadow: 7px 7px black;
}

.futer_image_3{
  top: -66px;
  left: 60px;
	box-shadow: 7px 7px black;
}
.li_2{
	/*box-shadow: 0 0 70px black;*/
	height: 65px;
}

/*----------------------------*/
.popup{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
top: 0px;
left: 0; 
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s ease 0s;
}

.popup_body{
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}


.popup_content{
  background: white;
  color: #000;
  padding: 30px;
  position: relative;
  width: 100%; 
height: 100%;
max-width: 600px;
max-height: 500px;
border-radius: 6px;
box-shadow: 0 0 10px white; 
}

.popup_close{
position: absolute;
right: 10px;
top: 5px;
font-size: 20px;
color: black;
text-decoration: none;
}

.popup_title{
margin: 0px 0px 1em 0px;
}

.popup:target {
  opacity: 1;
  visibility: visible;
}

.content_3{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin:0 auto;
max-width: 650px;
border: 3px solid black;
background: white;
border-radius: 10px;
text-align: center;
color: blue;
boreder-left: none;
overflow: hidden;
}

.li_1{
    border: 0.5px dashed green;
    padding: 6px;
   }

.li_1:hover{
	background: #DCDCDC;
}

/*-----------------------------------------------------------------------------------*/
   
  .popup_2{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
top: 0px;
left: 0; 
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s ease 0s;
}

.popup_body_2{
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.popup_content_2{
  background: white;
  color: #000;
  padding: 30px;
  position: relative;
  width: 100%; 
height: 100%;
max-width: 660px;
max-height: 510px;
overflow: auto;
border-radius: 6px;
box-shadow: 0 0 10px white; 
}

.popup_close_2{
position: absolute;
right: 10px;
top: 5px;
font-size: 20px;
color: black;
text-decoration: none;
}

 .popup_title_2{
margin: 0px 0px 1em 0px;
}
.popup_2:target {
  opacity: 1;
  visibility: visible;
}

.body_popup_image_1{
    box-shadow: 5px 5px black;
    border-radius: 10px;
    position: relative;
    float: right;
    right: 6px;
}

/*----------------------------------------------------------------*/
@font-face {
    font-family: 'Text_2';
    font-style: normal;
    font-weight: normal;
    src:
        url('text/ofont.ru_Nikoleta.ttf');
}


.popup_text_name_1{
	font-family: 'Text_2'; 
	margin: -2px 0px 0px 0px;
}

@font-face {
    font-family: 'Text_3';
    font-style: normal;
    font-weight: normal;
    src: url('text/ofont.ru_Art Nouveau-Bistro.ttf');
}
.popup_text_2{
	display: grid;
	grid-template-columns: repeat(1, 390px);
}

.gallery{
    display: flex;
    height: 130px;
    width: 390px;
    margin: 100px 0px 0px 0px;
 
}
.gallery_image{
    min-width: 0;
    flex: 1 1 10px;
    object-fit: cover;
    opacity: .7;
    transition: .5s;
    border-radius: 3px;
}
.gallery_image:hover{
    flex: 1 1 120px;
    opacity: .8;
}

.conteiner_iconoc_soc{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: absolute;
	float: right;
	right: 35px;
	bottom: 178px;
}

.conteiner_iconoc_soc_2{
	overflow: hidden;
	border-radius: 40px;
    box-shadow: 0 0 16px black;
}

.conteiner_iconoc_soc_2:hover{
	box-shadow: 0 0 16px blue;
	box-align: center;
}



@font-face {
    font-family: 'Text_45';
    font-style: normal;
    font-weight: normal;
    src: url('text/ofont.ru_Zekton.ttf');
}

/*----------------------------------------------------*/
.nastav_avotar_1{
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}

.text_popup_nastav{
display: grid;
grid-template-columns: repeat(1, 260px);
float: right;
bottom: 140px;
left: 12px;
}