/*Підключення шрифтів*/
@font-face {
    font-family: 'VinnytsiaSansBold';
    src: url('fonts/VinnytsiaSansBold.eot');
    src: url('fonts/VinnytsiaSansBold.eot') format('embedded-opentype'),
         url('fonts/VinnytsiaSansBold.woff2') format('woff2'),
         url('fonts/VinnytsiaSansBold.woff') format('woff'),
         url('fonts/VinnytsiaSansBold.ttf') format('truetype'),
         url('fonts/VinnytsiaSansBold.svg#VinnytsiaSansBold') format('svg');
	font-weight: bold;
  	font-style: normal;
}

@font-face {
    font-family: 'VinnytsiaSansReg';
    src: url('fonts/VinnytsiaSansReg.eot');
    src: url('fonts/VinnytsiaSansReg.eot') format('embedded-opentype'),
         url('fonts/VinnytsiaSansReg.woff2') format('woff2'),
         url('fonts/VinnytsiaSansReg.woff') format('woff'),
         url('fonts/VinnytsiaSansReg.ttf') format('truetype'),
         url('fonts/VinnytsiaSansReg.svg#VinnytsiaSansReg') format('svg');
	font-weight: normal;
  	font-style: normal;
}

@font-face {
    font-family: 'VinnytsiaSerif';
    src: url('fonts/VinnytsiaSerif.eot');
    src: url('fonts/VinnytsiaSerif.eot') format('embedded-opentype'),
         url('fonts/VinnytsiaSerif.woff2') format('woff2'),
         url('fonts/VinnytsiaSerif.woff') format('woff'),
         url('fonts/VinnytsiaSerif.ttf') format('truetype'),
         url('fonts/VinnytsiaSerif.svg#VinnytsiaSerif') format('svg');
	font-weight: normal;
  	font-style: normal;	
}

@font-face {
    font-family: 'VinnytsiaCity';
    src: url('fonts/VinnytsiaCity.eot');
    src: url('fonts/VinnytsiaCity.eot') format('embedded-opentype'),
         url('fonts/VinnytsiaCity.woff2') format('woff2'),
         url('fonts/VinnytsiaCity.woff') format('woff'),
         url('fonts/VinnytsiaCity.ttf') format('truetype'),
         url('fonts/VinnytsiaCity.svg#VinnytsiaCity') format('svg');
	font-weight: normal;
  	font-style: normal;	
}

html, body {
	height: 100%;
	margin: 0;
	scroll-behavior: smooth;
}	

code {
	font-size: 3em;
}

.maintitle {
	color: white; 
	text-shadow: black 0.3em 0.3em 0.3em;
	}

.maintitle h1 {
	font-family: VinnytsiaSansBold;
	font-size: 7vh;

}

.maintitle h2 {
	font-family: VinnytsiaSansReg;
	font-size: 3vh;	
}

.modal-lg {
	max-width: 1140px; /* or whatever you wish */
}

.bg-warning {
	background-color: #ffdc00;					
}

.modal-sm {
	max-width: 290px; /* or whatever you wish */				
}

.material-icons.md-36{ 
	font-size: 36px; 
}



.rotate_caret_down {
	-webkit-transform: rotate(-90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}


.sidemoder{
	position:relative;
	left:0px;
	border-top: 2px solid #ffdc00 ; 
	border-bottom: 2px solid #ffdc00; 
	border-right: 6px solid #ffdc00; 
	border-top-right-radius:5px; 
	border-bottom-right-radius: 5px;
	transition: left .4s ease-out;
	-moz-transition: left .4s ease-out;
  	-o-transition: left .4s ease-out;
  	-webkit-transition: left .4s ease-out;
}

.sidemoder:hover {
	left: 370px;
}


.per-filtr,
.form-filtr{
	position:relative;
	border-top: 2px solid #ffdc00 ; 
	border-bottom: 2px solid #ffdc00; 
}

.per-filtr{
	border-top-right-radius:5px; 
	border-bottom-right-radius: 5px;
	border-right: 6px solid #ffdc00; 
}

.form-filtr{
	border-left: 6px solid #ffdc00; 
	border-top-left-radius:5px; 
	border-bottom-left-radius: 5px;
}

.side-per-filtr {
 	left:-470px;
	transition: left .4s ease-out;
	-moz-transition: left .4s ease-out;
  	-o-transition: left .4s ease-out;
  	-webkit-transition: left .4s ease-out;
}

.side-form-filtr {
	right:-470px;
	transition: right .4s ease-out;
	-moz-transition: right .4s ease-out;
  	-o-transition: right .4s ease-out;
  	-webkit-transition: right .4s ease-out;
}


.side-per-filtr:hover{
	left: 0px;
}

.side-form-filtr:hover{
	right:0px;
}



.consultant:hover,
#off_consultants:hover,
#on_consultants:hover, 
.form_work:hover,
#on_form:hover,
#off_form:hover {
	cursor: pointer;
}




.consultant,
.form_work,
#off_consultants,
#off_form{
	filter:contrast(15%);
	-webkit-filter:contrast(15%);
}


.consultant.active,
.form_work.active{
	filter:contrast(100%);
	-webkit-filter:contrast(100%);
}


#calendar_data_picker {
	position: absolute;
	width:100%;
	bottom:20px;
	height:50px;
	z-index: 2;
	}

#selected_time{
	width:300px;
	height:40px;
	z-index: 2;
}

#button_change_time_r,
#button_change_time_f{
	content:"";
 	width:50px;
	height:50px;
	background-color:#6c757d;
        background-repeat:no-repeat;
        background-position: center center; 
	border-width: 4px;
	border-radius: 50%;
	border: solid #ffdd00;
	box-shadow: black 0.3em 0.3em 0.3em;
	z-index: 3;
}

#button_change_time_r{
	position: relative;
	background-image:url(https://cprvmr.edu.vn.ua/uploads/design/icons/white_icon_for_header/caret-left.svg);
	left:25px;
}
#button_change_time_f{
	position: relative;
	background-image:url(https://cprvmr.edu.vn.ua/uploads/design/icons/white_icon_for_header/caret-right.svg);
	right:25px;
}

#button_change_time_r:hover,
#button_change_time_f:hover{
	background-color: #cccccc;
}




.pagehead,
.sitefooter,
.newshead{
	position: relative;
	
}

/*Реалізація затемнюючого фільтра на блокові верхньої секції сторінки*/
.pagehead:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
   	opacity: 0.5;
    z-index: 1;
}

.newshead > img{
	width:100%;
}


.symbol-pagehead {

	position: absolute;
	width:100%;
	bottom:0;
	z-index: 2;
	}

.symbol-pagehead-calendar {
	position: absolute;
	width:100%;
	bottom:30%;
	z-index: 2;
	}

.symbol-direct {
	position: absolute;
	width:100%;
	bottom: -25px;
	z-index: 2;
	}

.symbol-direct-mobile{
	width:100%;
	z-index: 2;
	}

.topcard {
	background-color:#bbbbbb; 
	background-size: cover; 
	border-radius: 20px 20px 0 0; 
	background-position-x: center;
	}


.symbol-sitefooter {

	position: absolute;
	width:100%;
	bottom: -150px;
	z-index: 2;

	}


.iconform {
	box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.5); 
}

.flymenu{
	display: none; 
	position: fixed; 
	top:0; left:0; 
	width:100%; 
	height:100%; 
	background-color: rgba(0,0,0,0.2);
	z-index: 2000;
}


.flymenu2 {
	
	background-color:rgb(200,200,200);
	display: none;
	margin:0px auto 0;
	left:0;  right:0;
	border-radius:20px;
 	position: fixed;
	z-index: 2001;
	transform: scale(0.95);

}

.sub-sign {
-webkit-box-shadow: 6px 6px 0px 0px rgba(138,61,66,0.79);
-moz-box-shadow: 6px 6px 0px 0px rgba(138,61,66,0.79);
box-shadow: 6px 6px 0px 0px rgba(138,61,66,0.79);
}





.card {
  transition-duration: 2s;
}

.flying {
  transform: translate(-50%,-50%)
}


/* Стилістика основного зображення на сторінці " Новина. Докладно про..."*/
.leftimg {

	float:left; /* Выравнивание по левому краю */
	margin: 7px 17px 7px 0; /* Отступы вокруг картинки */

   }
.rightimg  {
   float: right; /* Выравнивание по правому краю  */ 
   margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
   }


/* Стилістика галереї персоналу на сторінці "Про нас"*/
.personalcard {
	-webkit-filter: grayscale(.75);
  	filter: grayscale(.75);
	transition:	.3s;
}

.personalcard:hover {
 -webkit-filter: grayscale(0);
  filter: grayscale(0);
}


.iconostas {
	max-width:100%;
	border-radius: 20px 20px 0 0 ;
}

.moderator{
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	-ms-line-clamp: 4;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	display: -webkit-box;
	display: box;
	word-wrap: break-word;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	font-size: 0.8em;
}


.halfstiker	 {
	position: absolute; 
	bottom: 0px; 
	float:left; 
	width:100%; 
	background-color: rgba(150, 150, 150, 0.95); 
	color: white; 
	text-align: center; 
	padding: 5px; 
	padding-top: 20px;	
	border-radius: 5px;
}	

.stiker	 {
	position: absolute; 
	top: 80px; 
	float:left; 
	width:80%; 
	background-color: transparent; 
	color: black; 
	text-align: center; 
	padding: 5px; 
	padding-top: 20px;		
}	


.comunitylink {
	transition: 0.2s linear;
}

.comunitylink:hover {
	-webkit-transform: scale(1.05, 1);
  	transform: scale(1.05, 1);
}

.footerlink_shadow {
	
	transition: 0.2s linear;
}

.footerlink_shadow:hover {
	box-shadow: 0px 9px 23px 14px rgba(34, 60, 80, 0.2);
	-webkit-transform: scale(1.03);
  	transform: scale(1.03);

}
/*Стилістика виділення пунктім меню та елементів в футері сайта*/
.footerlink, 
.footerlink-l, 
.footerlink-r {
	transition: 0.2s linear;
}

.footerlink:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.footerlink-l:hover {
  -webkit-transform: translateX(-6px);
  transform: translateX(-6px);
}

.footerlink-r:hover {
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
}


.coverkval {
	opacity:1;
	transition: opacity 0.3s;
}


.coverkval:hover {
	opacity:0;

}




.spoiler_comunity {
    position: relative;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
    overflow: hidden;
    cursor: pointer;
}

.spoiler_comunity:after {
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.spoiler_comunity:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}



.news-galery {
	width:800; 
	height:600;
	border: 16px solid #f8f9fa;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


.news-galery-mobil > div > img {
	width:100vw; 
}



.news-galery-mobil {
	width:100vw; 
	
}




/*Стилістика галереї Топ-6 Візуального блоку "Актуально"*/
.actualno-galery {
	width: 760px; 
	height: calc(760px * .75);
	
}

.new_a {
	background-color: rgba(255, 220, 0, 1);
	text-align: center;
	border-radius:15px 15px 0  0 ;
	border-style: solid;
	border-color: #ffdc00;
	border-width: 2px 2px 0 2px;
	cursor:pointer;
}

.new_a.active {
	background-color: rgba(255, 255, 255, 1);
	margin-top:-1em;
}



/*Стилістика візиток Топ-6 Візуального блоку "Актуально"*/
.actualno-list {
	height:calc(760px * .75);
	width:100%;
	border-color: rgba(255, 220, 0, 1);
}

.actualno-item {
	position: relative; 
	width:100%; 
	height:16.6%; 
	cursor: pointer; 
	background-color: rgba(255, 220, 0, .2);
	border-width:  6px;
	border-style: solid; 
	border-color: #fff;
	border-radius: 0 15px 15px 0 ;
	background-origin: padding-box; 
}

.actualno-item.active{
	background-color: rgba(255, 220, 0, 1);
	border-color: #ffdc00;

}

.s-row:hover {
	background-color: #b1bfe2;
}


/* Стилістика Google Map */
#map {
    overflow: hidden;
    position: relative;
	width: 100%; 
	height:400px
}

#map::after {
    background: transparent;
    background: -mz-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,1) 80%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 0,0)), color-stop(80%, rgba(255,255,255,1)));
    background: -webkit-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,1) 80%);
    background: -o-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,1) 80%);
    background: -ms-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,1) 80%);
    background: radial-gradientt(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,1) 80%);
    content: "";
    display: block;
    height: 100%;
	width: 100%;
    left: 0;
    top: 0;
	position: absolute;
	pointer-events:none;
	transition: background 1s;
	
}

#map:hover::after {
    background: transparent;
    background: -moz-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,0) 80%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 0,0)), color-stop(80%, rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,0) 80%);
    background: -o-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,0) 80%);
    background: -ms-radial-gradient(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,0) 80%);
    background: radial-gradientt(center, rgba(255, 255, 0, 0) 0%, rgba(255,255,255,0) 80%);
    content: "";
}


/*Стилістика кнопки "Вверх на почпток сторінки"*/

#buttonup {
	opacity:0; 
	height: 70px; 
	width: 70px; 
	box-shadow: black 0.3em 0.3em 0.3em;
	background-color: #ffdc00;
	position:fixed;
	bottom:10%;
	right:140px;
	transition: opacity 0.3s;	
}

#buttonup:hover {
	opacity:1;
}

#buttonup:active {
	bottom:95px;
	right:120px;
}

/* Стилістика списків матеріалів */		
.yelowli ul {
    list-style-image: none;
 }
.yelowli ul li{
    margin-bottom: .8em;
 }

.title_moder {
	border-style: solid;  
	border-width: 3px; 
	border-color: #17a2b8; 
	position: absolute; 
	left: 50%; 
	bottom: calc(100% + 17px); 
	width: 350px; 
	z-index: 2;
}

.arrow_moder {		
	position: absolute; 
	height:30px; 
	width:30px;
	background-size: cover; 
	background-image:url(https://cprvmr.edu.vn.ua/uploads/design/icons/kutyk.svg);
	left: 50%; 
	bottom: calc(100% - 10px); 
	z-index:3;
}

/*Стилістика концентратору подій на сторінці "Календар подій"*/
.parentstrip,
.stripevent,
.cardmaterial{
	 -webkit-transition:  1s ease-out ;
     -moz-transition:  1s ease-out ;
     -o-transition:  1s ease-out ;
     transition: 1s ease-out;

}
.parentstrip:hover {
	filter: brightness(1);
	-webkit-filter: brightness(1);
}

/*.stripevent:hover{
	 -webkit-transform: scale(1.1,1);
 	 transform: scale(1.1, 1);
} */

.cardmaterial:hover {
	 -webkit-transform: scale(1.05,1.05);
 	 transform: scale(1.05, 1.05);
	-webkit-box-shadow: 0px 0px 21px -3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 21px -3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 21px -3px rgba(0,0,0,0.75);
	back-ground: white;
}  

.jampshevron {
	position:absolute;
	animation: 1s jamping infinite;
	
}	
	@keyframes jamping {
  from {
    bottom: 50px;
	 opacity: .1;
	}

  to {
   bottom: 0px;
	opacity: .9;
}
		
		
.new a{
  position: relative;
  /* Это важно, если псевдоэлемент нужно позиционировать относительно этого блока */
}

.new a:after {
  content: "NEW";
  /* В любом случае необходим, даже пустой. Иначе не будет работать */
  
  position: absolute;
  left: 50px;
  top: 50px;

  width: 100px;
  height: 100px;

  background-image: url('https://cprvmr.edu.vn.ua/uploads/design/logo/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA2.JPG');

  background-size: 100px 100px;
  box-shadow: 1px 1px 5px #000;
}
		
.transparent_stiker	 {
	position: absolute; 
	bottom: 60px; 
	float:left; 
	width:500px; 
	background-color: rgba(150, 150, 150, 0.9); 
	color: white; 
	text-align: center; 
	font-size: 0.8em; 
	padding: 5px; 
	border-radius: 0 10px 0 0; 
	padding-top: 20px;		
}