@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: EVT;
  src: url(../fnt/EVT.ttf);
}

body {
  font-family: 'Philosopher', Arial, Helvetica, sans-serif;
  color: white;
  background-color: #363636;
  width: 100%;
  min-width: 700px;
  margin: 0 auto;
}

/*******************************************************************/

header{
  padding: 5px;
  text-shadow: 0px 0px 5px black, 0px 0px 5px black;
}

header a {
  display: flex;
}

header, header div {
  display: flex;
  align-items: center;
}

a{
  color: white;
  text-decoration: none;
  padding: 5px;
  cursor: pointer;
}

header #left a, #nav a{
  background-color: rgb(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 5px 10px;
  transition: 0.5s linear
}

header #left a:hover, #nav a:hover{
  background-color: rgb(0, 0, 0, 0.6);
  border-radius: 15px;
}

header #right{
  margin-left: auto;
}

header #right a{
  height: 40px;
  width: 40px;
}

/*******************************************************************/

nav{
  display: flex;
  align-items: center;
  padding: 0px 10px;
  margin-top: -10px;
  text-shadow: 0px 0px 5px black, 0px 0px 5px black;
}

#nav{
  margin-left: auto;
}

nav img{
  width: 60px;
  height: 60px;
  border-radius: 20px;
}

/*******************************************************************/

main{
  padding: 0px;
}

/*******************************************************************/

#general{
  display: flex;
  flex-wrap: wrap;
  height: 1000px;
  margin-top: -150px;
  overflow: hidden;
  font-family: 'EVT', 'Philosopher', Arial, Helvetica, sans-serif;
  font-size: 2em;
  }

#g_img1, #g_img2{
  width: 100%;
  height: 1000px;
  padding: 0px;
  position: absolute;
  z-index: -1;
  background-image: url(../img/we1.jpg);
  background-size: cover;
  background-position-y: center;
  background-position-x: center;
  opacity: 1;
}

#g_img2{
  background-image: url(../img/we2.jpg);
  opacity: 0;
  animation: anim 20s linear infinite;
}

@keyframes anim {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#g_text{
  width: 100%;
  text-align: center;
  margin: auto;
  text-shadow: 2px 2px 2px #000000, 0px 0px 5px #000000;
}

/*******************************************************************/

h2 a{
  font-size: 1.4em;
}

#schedule{
  padding-top: 50px;
  text-align: center;
}

#schedule > div{
  display: flex;
  flex-wrap: wrap;
}

#sh_news{
  font-size: 2em;
  border-radius: 15px;
  width: 80%;
  margin: 20px auto;
  align-items: center;
  }
  @media (min-width: 1000px) {
    #sh_news{
      width: 50%; }
}

#schedule div div{
  border: white 1px solid;
  border-radius: 15px;
  width: 98%;
  height: 200px;
  margin: 10px auto;
  overflow: hidden;
  font-size: 1.4em;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  padding-top: 0px;
  }
  @media (min-width: 800px) {
    #schedule div div {
      transition: 0.5s linear;
      padding-top: 320px;
      height: 400px;
      width: 48%; }}
  @media (min-width: 1400px) {
    #schedule div div {
      width: 31%; }
}

#schedule div div:nth-of-type(1) {
  background-image: url(../img/mo.jpg);
}
#schedule div div:nth-of-type(2) {
  background-image: url(../img/tu.jpg);
}
#schedule div div:nth-of-type(3) {
  background-image: url(../img/we.jpg);
}
#schedule div div:nth-of-type(4) {
  background-image: url(../img/th.jpg);
}
#schedule div div:nth-of-type(5) {
  background-image: url(../img/fr.jpg);
}
#schedule div div:nth-of-type(6) {
  background-image: url(../img/sa.jpg);
}
#schedule div div:nth-of-type(7) {
  background-image: url(../img/sa.jpg);
}

#schedule div div:hover{
  padding-top: 0px;
}

#schedule div div{
  text-shadow: 2px 2px 2px #000000, 0px 0px 5px #000000, 0px 0px 5px #000000;
}

#schedule div div p{
  text-align: left;
  margin-left: 10px;
}

/*******************************************************************/

#price{
  text-align: center;
  border: white 1px solid;
  border-radius: 15px;
  margin: 10px auto;
  width: 98%;
}

#price p{
  font-size: 1.5em;
}

/*******************************************************************/

#event{
  margin-top: 50px;
  text-align: center;
  padding: 40px 0px;
  background-color: rgb(31, 31, 31);
}

#event > div{
  display: flex;
  flex-wrap: wrap;
}

#event div div{
  border: white 1px solid;
  border-radius: 15px;
  width: 90%;
  height: 600px;
  box-sizing: border-box;
  margin: 10px auto;
  padding: 5px 40px;
  overflow: hidden;
  font-size: 1.3em;
  background-size: cover;
  background-position: center;
  text-shadow: 2px 2px 2px #000000, 0px 0px 5px #000000, 0px 0px 5px #000000;
  display: flex;
  flex-direction: column;
  }
  @media (min-width: 1200px) {
    #event div div {
      width: 48%; }
}

#event div div > *{
  width: 100%;
}

#event div div:nth-of-type(1){
  background-image: url(../img/event001.jpg);
}
#event div div:nth-of-type(2){
  background-image: url(../img/event002.jpg);
}
#event div div:nth-of-type(3){
  background-image: url(../img/event003.jpg);
}
#event div div:nth-of-type(4){
  background-image: url(../img/event004.jpg);
}
#event div div:nth-of-type(5){
  background-image: url(../img/event005.jpg);
}
#event div div:nth-of-type(6){
  background-image: url(../img/event006.jpg);
}
#event div div:nth-of-type(7){
  background-image: url(../img/event007.jpg);
}

#event div div:hover{
  background-image: none;
}

#event div div p:nth-of-type(1){
  margin-top: auto;
}

#event div div p{
  margin: 10px 0px;
  padding: 0px;
}

#event div div a{
  border: white 1px solid;
  width: 200px;
  border-radius: 20px;
  margin: 0px auto;
  margin-bottom: 20px;
  transition: 0.5s linear;
}

#event div div a:hover{
  background-color: white;
  color: #000000;
  text-shadow: none;
}

/*******************************************************************/

#gallery{
  margin-top: 50px;
  text-align: center;
}

#gallery div{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#gallery div div{
  width: 98%;
  height: 400px;
  margin: 10px auto;
  border-radius: 10px;
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  transition: linear 0.5s;
  }
  @media (min-width: 800px) {
    #gallery div div {
      width: 48%; }}
  @media (min-width: 1400px) {
    #gallery div div {
      width: 32%; }
}

#gallery div div:nth-of-type(1){
  background-image: url(../img/gallery/g_0001.jpg);
}
#gallery div div:nth-of-type(2){
  background-image: url(../img/gallery/g_0002.jpg);
}
#gallery div div:nth-of-type(3){
  background-image: url(../img/gallery/g_0003.jpg);
}
#gallery div div:nth-of-type(4){
  background-image: url(../img/gallery/g_0004.jpg);
}
#gallery div div:nth-of-type(5){
  background-image: url(../img/gallery/g_0005.jpg);
}
#gallery div div:nth-of-type(6){
  background-image: url(../img/gallery/g_0006.jpg);
}

#gallery div div:hover{
  scale: 1.03;
}

#goGallery{
  font-size: 1.5em;
  border: 1px solid white;
  border-radius: 20px;
  transition: 0.5s linear;
}

#goGallery:hover{
  color: #363636;
  background-color: white;
}

/*******************************************************************/

#about{
  margin-top: 50px;
  text-align: center;
  padding: 40px 0px;
  background-color: rgb(31, 31, 31);
}

#about > div{
  display: flex;
  flex-wrap: wrap;
  margin: 15px auto;
}

#about > div > *{
  width: 90%;
  margin: 10px auto;
  }
  @media (min-width: 1200px) {
    #about > div > * {
      width: 48%; }
}

#about div:nth-of-type(2), #about div:nth-of-type(4){
  flex-direction: column-reverse;
  }
  @media (min-width: 1200px) {
    #about div:nth-of-type(2), #about div:nth-of-type(4){
      flex-direction: unset;}
}

#about div:nth-of-type(1) .img{
  background-image: url(../img/about.jpg);
}
#about div:nth-of-type(2) .img{
  background-image: url(../img/as2.jpg);
  background-position: top;
}

#about div .img{
  background-size: cover;
  background-position: center;
  min-height: 500px;
  }
  @media (min-width: 1200px) {
  #about div .img{
    min-height: 700px;}
}

#about div div p{
  margin: auto;
  text-align: justify;
  text-indent: 1.5em;
  padding-bottom: 5px;
}

#about ul{
  text-align: left;
  margin: 0;
}

#about div div p:first-of-type{
  font-size: 1.2em;
}

/*******************************************************************/

#contacts{
  text-align: center;
  padding: 40px 0px;
  }

#contacts > div{
  display: flex;
  flex-wrap: wrap;
}

#contacts > div > *{
  width: 100%;
  margin: 10px auto;
  }@media (min-width: 1200px){
    #contacts > div > *{
    width: 47%; }
}

#map{
  height: 600px;
  width: 95%;
}

#contacts div div{
  text-align: center;
}
@media(min-width: 1200px){
  #contacts div div{
  text-align: left;}
}

.bold{
  font-weight: bold;
  font-size: 1.1em;
}

#contacts div div p:first-of-type{
  margin-top: 0px;
}

/*******************************************************************/

#preloader{
  width: 100%;
  height: 2000px;
  text-align: center;
  padding-top: 200px;
  font-size: 3em;
}