/*
    Created on : 24.09.2016, 15:06:49
    Author     : Lointc
*/
@font-face {
    font-family:  new-font; /* Имя шрифта */
    src: url(fonts/new-font.ttf); /* Путь к файлу со шрифтом */

}
@font-face {
    font-family:  other-font; /* Имя шрифта */
    src: url(fonts/other-font.ttf); /* Путь к файлу со шрифтом */

}

@font-face {
    font-family:  another; /* Имя шрифта */
    src: url(fonts/another.ttf); /* Путь к файлу со шрифтом */

}

@font-face {
    font-family:  menufont; /* Имя шрифта */
    src: url(fonts/9868.otf); /* Путь к файлу со шрифтом */

}
@font-face {
    font-family:  newfont; /* Имя шрифта */
    src: url(fonts/btcMTm0i.otf); /* Путь к файлу со шрифтом */

}
/* Шапка сайта*/

   #top { /* Верхняя часть с заголовком страницы */
       background-color: #fff;
         background-image:  url(../images/0641.jpg);
          background-size:contain;
          background-repeat: no-repeat;
          box-sizing: border-box;
     height:80vh;
	  font-family: another;
     color:#555;
     font-size: 7em;
     text-align: center;
     box-sizing: border-box;
   }
      .small-text {
       width:10em;
       display: block;
       font-size: 0.5em;
       margin: auto;
       border-top: 1px solid;
       font-family: another;
   }
   .lang{
font-family: another;
    margin-right:20px;
    color:#555;
    font-size: 0.3em;
    text-shadow: 4px 4px 4px #aaa;
    font-variant:  small-caps;
    display:inline-block;
    position: absolute;
    text-decoration:none;
    top:0;
    right:0;

}
.top-text {
    position: absolute;
    display:inline-block;
    padding-top:20vh;
    right:10vw;
}

   .main {
       display: block;
       background-color: #2C2C2C;
       width:100%;
           height:100%;
           background-image:  url(../images/another.jpg);
           background-size:contain;
           background-repeat: no-repeat;
           background-position: 50% 100% ;
   }
/* Тело сайта */
body{
    font-family:  menufont;
    background-image:  url(../images/symphony.png);
     background-repeat:  repeat;
     padding:0;
     margin:0;
   }
   .container {
       width:100%;
       box-sizing: border-box;
   }
      #content h1 { /* Основное содержание страницы */
   font-family: other-font;
        display: block;
        color: #555;
        text-align: center;
        margin:auto;
	font-size:7em;
   }

   .news {
       margin:1em;
       font-size: 18pt;
       border: 1px solid #ccc;
       font-family:newfont;
       cursor: pointer;
   }
      .date {
       color:red;
        display: block;
        background-image:  url(../images/wavecut.png);
         font-family: another;
         padding-left:2em;

   }
   .news-foto {
       width:40%;
       overflow: hidden;
       max-height: 420px;
   }
   .news-foto img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
   }
   .news-content {
      width:60%;
   }
   .news-foto, .news-content {
       float:left;
   }
   .news-text {
       padding-left:1em;
        display:none;
   }
    .news-caption {
       padding-left:1em;
       font-size: 2.2em;
       text-align: center;

   }
   .another-foto {
       width:100%;
       padding:1em;
       display:none;
   }
.julia {color:red; }
.another_news {display: none;}
.all_news {display:block; text-align: center; font-size: 2em; cursor: pointer;}
/*------------------------------------*\
	НАВИГАЦИЯ
\*------------------------------------*/
#nav{

        width:100%;
        box-sizing: border-box;
        display: block;
	list-style:none;
	font-weight:bold;
	margin:0;
        background-image:  url(../images/wavecut.png);
        height:2em;

}
#nav li{
	float:right;
	margin-right:10px;
	position:relative;
	display:block;
        z-index: 999;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	text-decoration:none;
	text-shadow:1px 1px 1px rgba(0,0,0,0.9); /* Тень текста, чтобы приподнять его на немного */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;

}
#nav li a:hover{
	color:#fff;
	background: #555;
	opacity: 0.8;
	text-decoration:underline;

}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity:0; /* Устанавливаем начальное состояние прозрачности */
	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
	padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;

}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	left:-40px; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	/*//background:#6b0c36;
	//background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
	text-decoration:underline;
        background: #555;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */

}

.load {
    display:block;
    width: 100%;
    padding: 10px;
    text-align: center;
    color:black;
}
.load:hover {
    color:red;
}
.cont_h1 {
font-family: other-font;
display: block;
color: #555;
text-align: center;
margin: auto;
font-size: 7em;
}

.press {
    display: inline-block;
     background-image:  url(../images/wavecut.png);
    padding: 10px;
    margin: 5px;
    vertical-align: top;
}
.press_load {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: black;
}

/* CALENDAR*/

    .calendar_div {
             display: block;
        width:100%;
           height:100%;
           background-image:  url(images/004small.jpg);
           background-size:contain;
           background-repeat: no-repeat;
           background-position: 0% 0% ;
    }


.float_calendar {
 margin:auto;
}
.head_row th{

    font-family: verdana;
    color: black;
    opacity: 0.8;
    padding:3pt;
    min-width: 100px;
    font-size:12pt;
    border: 1px solid white;
    }
    .day_number {
    background:white; padding:5px; color:#0070FB; font-weight:bold; float:right;  width:20px; text-align:center; opacity: 0.8;
    }
    .calendar-day {

        border: 1px solid #aaa;
        min-height: 150px; min-width: 150px;
    }
     .calendar-day:hover {
        background-color:#0070FB;
        border: 1px solid white;
        min-height: 150px; min-width: 150px;
        color:white;
    }
    .month_header {
            font-family: other-font;
    color: black;
    text-align: center;
    }
    .current_event {
        display: block;
         font-size: small;
        text-align: right;
        margin-top:25%;
        width: 98px;
        cursor: pointer;

    }
    .calendar {
        margin:auto;
    }
    .arrow {
        color:black;
        text-decoration: none;
    }

    #calendar_show {
        width: 600px;
        height: 380px;
        position: absolute;
        background-image:  url(../images/wavecut.png);
        border: 2px solid white;
        display: none;
        color:black;

    }
    .calendar_text {
        padding:20px;
        text-align: center;
    }
    .close {
        width: 100%;
        text-align: center;
        font-weight: 900;
        cursor: pointer;

    }


    .text {
        width:25%;
        margin:auto;
        padding:5%;
        font-family: other-font;
        font-size: 22pt;
    }


    @media screen and (max-width: 1279px) {
        .float_calendar {
            margin:0;
            margin-top: 50%;
            width: 99% !important;
        }
      .head_row th{
          padding: 0;
          margin: 0;
          min-width: 14%;
        font-size: smaller;
      }
      .current_event {
          font-size: smaller;
      }
}
@media screen and (max-width: 800px) {
    #top {
        height: 200px;
        font-size: 16pt;
        background-size:  contain;
    }
       .lang{
    font-size: 1em;}
.news {
       margin:0;
       font-size: 1em;
    }
      .date {
       color:red;
        display: block;
        background-image:  url(../images/wavecut.png);
         font-family: another;
   }
   .news-foto {
       width:40%;
       overflow: hidden;
       max-height: 420px;
   }
   .news-foto img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
   }
   .news-content {
      width:60%;
      overflow: hidden;
   }
   .news-foto, .news-content {
       float:left;
   }
   .news-text {
       padding-left:1em;
   }
    .news-caption {
       padding-left:0;
       font-size: 1em;
       font-weight: 900;
   }
   .another-foto {
       width:100%;
       padding:1em;
   }

   #nav{
        width:100%;
        box-sizing: border-box;
        display: block;
	list-style:none;
	font-weight:bold;
        height: auto;
	margin:0;
        background-image:  url(../images/wavecut.png);
}
#nav li{
	margin-right:10px;
	display:block;
        z-index: 888;
        float: none;
}

#nav ul{
	list-style:none;
	position:absolute;
	left:99px;
        position:  static;
        opacity: 1;
}
}