html {
    height: 100%;
}


.right {float: right; 
	margin-right: 0px;
        position: relative;
        margin-top: 7px;
        margin-left: 10px;
		}

.left {float: left; 
		margin-left: 10px;
		margin-right: 10px;
		}
             
.clear {clear: both}
/*Блок выделения*/

::selection {background: #87CEFA; /*color: #fff*/}
::-moz-selection {background: #87CEFA; /*color: #fff*/}

header {
	width: 98%;
	background-color: #fff;
	float: left;
}

header {
	padding: 1%;
}

#logo {
	font-size: 2em;
	font-family: Comic Sans MS, sans-serif;
	color: silver;
}

.contact{
	font-size: 2em;
	font-family: Comic Sans MS, sans-serif;
	margin-left: 20px;
}

input[type=text].field {
	border-radius: 5px;
	border: 2px solid silver;
	padding: 5px;
	margin-left: 20px;
	margin-right: 20px;
}

input[type=text].focus {border: 2px solid #f48b8b}

#menu{
	color:#666;
	font-family: Comic Sins MS, sans-serif;
	font-size: 1.7em;
	
}

#menu hr{
	
	width: 300px;
	max-width: 100%;
	margin-top: 5px;
	margin-bottom: 10px;
}

#menuHrefs a {
	padding: 5px;
	border-radius: 5px;
	margin-right: 5px;
	color: #626262;
}

#menuHrefs a:hover {
	background-color: #f7f7f7;
}



/*Стили для футера*/
* {
  margin: 0;
  padding: 0;
}

html,
body,
#page-wrap {
  height: 100%;
}

.content {
  box-sizing: border-box;
  min-height: 100%;
  padding-bottom: 40px;
}




/*Стили для фото в верхней строке*/
.mini-profile-foto {
    height: 35px;
    width: 35px;
    overflow: hidden;
    padding: 20px;
}
.mini-profile-foto img
{
   position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 28px;
        width: 28px;
	margin-top: 0;
	transition: transform .4s ease-out;
        border-radius: 50%; /*Скругление углов*/
        box-shadow: 0 0 0 2px #286090, 0 0 13px #333;
}
/*Стили для фото на странице пользователя*/
.profile-foto img{
    position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 300px;
        max-width: 100%;
	margin-top: 0;
	transition: transform .4s ease-out;
        box-shadow: 0 0 0 2px #333333, 0 0 13px #333;
    
}

/* Загрузка картинок пользователем */

.image-upload > input
{
    display: none;
}

.image-upload img
{
    width: 200px;
    cursor: pointer;
}

/*Стили для адаптивной страницы с заданиями*/

.task-block {
    display: block;
    float: left;
    transition: width .2s;
    padding: 0px;
    padding-bottom: 5px;
}

@media only screen and (max-width: 599px) {
    .task-block {
        width: 90%;
        height: 40px;
        margin-left: 5%; /* Отступ слева */
        margin-right: 5%; /* Отступ справа */
    }
}

@media only screen and (min-width: 600px) {
    .task-block {
        width: 90%;
        height: 40px;
        margin-left: 5%; /* Отступ слева */
        margin-right: 5%; /* Отступ справа */
    }
}

@media only screen and (min-width: 1000px) {
    .task-block {
        width: 70%;
        height: 40px;
        margin-left: 15%; /* Отступ слева */
        margin-right: 15%; /* Отступ справа */
    }
}

.task {
    display: block;
    border: 1px solid #626262;
    position: relative;
    background: #fff;
    margin: 20px 20px 20px 0px;
    text-decoration: none;
    color: #474747;
    z-index: 0;
    height: 100%;
}

.task {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

.task-photo {
	position: relative;
	padding-bottom: 0px;
	overflow: hidden;
        /*background-color: #626262;*/
        height: 100%;
        
}

.task-photo img {
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
	margin-top: 0;
	transition: transform .4s ease-out;
}
/*Текст блока с заданием*/
.task-photo p {
    color: white;
    font-style: italic;
    padding: 10px 10px 10px 10px;
    font-size: 9pt;
    /*border: 1px solid #b5e9a7;*/
    transition: transform .4s ease-out;
    height: 100%;
    text-align: center;
}

#map {
        height: 400px;
      }
      
      
.map-block {
    display: block;
    float: left;
    transition: width .2s;
    padding: 0px;
}

@media only screen and (max-width: 599px) {
    .map-block {
        width: 90%;
        height: 400px;
        margin-left: 5%; /* Отступ слева */
        margin-right: 5%; /* Отступ справа */
    }
}

@media only screen and (min-width: 600px) {
    .map-block {
        width: 90%;
        height: 400px;
        margin-left: 5%; /* Отступ слева */
        margin-right: 5%; /* Отступ справа */
    }
}

@media only screen and (min-width: 1000px) {
    .map-block {
        width: 90%;
        height: 400px;
        margin-left: 5%; /* Отступ слева */
        margin-right: 5%; /* Отступ справа */
    }
}
.map-photo {
	position: relative;
	padding-bottom: 0px;
	overflow: hidden;
        background-color: #333333;
        
}
    
.btn-geo-left
{
    width: 98%;
    margin-right: 2%;
}
.btn-geo-right
{
    width: 98%;
    margin-left: 2%;
}

.answers
{padding-top: 50px }

.answer-block {
    display: block;
    width: 100%;
    float: left;
    transition: width .2s;
    padding: 20px;
}

@media only screen and (min-width: 450px) {
    .answer-block {
        width: 100%;
    }
}

@media only screen and (min-width: 600px) {
    .answer-block {
        width: 50%;
        
    }
}

@media only screen and (min-width: 1000px) {
    .answer-block {
        width: 25%;
    }
}

.answer-btn{
    position: relative;
    width: 100%;
    }
    
 .err-text {
    display: block;
    /*border: 1px solid #b5e9a7;*/
    position: relative;
    background: #333333;
    margin-left: 20px;
    text-decoration: none;
    color: red;
    z-index: 0;
    width: inherit;
}

#users_items{
    width: 350px;
    padding: 4px;
    
    
}

@media only screen and (min-width: 450px) {
    #users_items {
        width: 350px;
    }
}

@media only screen and (min-width: 600px) {
    #users_items {
        width: 350px;
        
    }
}

@media only screen and (min-width: 1000px) {
    #users_items {
        width: 350px;
    }
}

.item_img {
    width: 75px; 
    height: 75px;
    padding: 5px; /* Поля вокруг текста */
    /*border: solid 1px white; /* Параметры рамки */}

.item_img_150 {
    width: 150px; 
    height: 150px;
    padding: 5px; /* Поля вокруг текста */
    /*border: solid 1px white; /* Параметры рамки */}


.item_dis {
    width: 100%; 
    height: 75px;
    overflow: scroll; /* Добавляем полосы прокрутки */
    padding: 5px; /* Поля вокруг текста */
    /*border: solid 1px white; /* Параметры рамки */
  }

#log {color: #9a9a98; text-align: 5;}
#email {color: #9a9a98;}
#pass1 {color: #9a9a98;}
#pass2 {color: #9a9a98;}

.btn-reg{margin-left: 20px; margin-top: 30px}

.text-block {
    display: block;
    /*border: 1px solid #b5e9a7;*/
    position: relative;
    background: #626262;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    color: gold;
    z-index: 0;
    width: inherit;
    border-radius: 0 20px; 
}

/*Текст под картинкой квеста*/
.text-block p {
    color: white;
    font-style: italic;
    padding: 10px 10px 10px 10px;
    font-size: 9pt;
    /*border: 1px solid #b5e9a7;*/
    
}



.btn-world {
  color: #fff;
  background-color: #747272;
  border-color: #747272;
}
.btn-world:hover,
.btn-world:focus,
.btn-world.focus,
.btn-world:active,
.btn-world.active{
  color: #fff;
  background-color: #626262;
  border-color: #626262;
}
.btn-world:active,
.btn-world.active,
.open > .dropdown-toggle.btn-world {
  background-image: none;
}
.btn-world.disabled,
.btn-world[disabled],
fieldset[disabled] .btn-world,
.btn-world.disabled:hover,
.btn-world[disabled]:hover,
fieldset[disabled] .btn-world:hover,
.btn-world.disabled:focus,
.btn-world[disabled]:focus,
fieldset[disabled] .btn-world:focus,
.btn-world.disabled.focus,
.btn-world[disabled].focus,
fieldset[disabled] .btn-world.focus,
.btn-world.disabled:active,
.btn-world[disabled]:active,
fieldset[disabled] .btn-world:active,
.btn-world.disabled.active,
.btn-world[disabled].active,
fieldset[disabled] .btn-world.active {
  background-color: #626262;
  border-color: #4cae4c;
}
.btn-world .badge {
  color: #5cb85c;
  background-color: #fff;
}

.logo{
   position: absolute;
	top: 2px;
	bottom: 0;
	width: 82px;
	margin-top: 0;
        /*margin-left: 15%; /* Отступ слева */
        /*margin-right: 15%; /* Отступ справа */
	transition: transform .4s ease-out;
        /*border-radius: 50%; /*Скругление углов*/
        /*box-shadow: 0 0 0 2px #286090, 0 0 13px #333;*/
}


.failModal {
    background: #626262;
    text-decoration: none;
    color: white;
}

.center {
    display: block;
    width: 100%;
    float: left;
    transition: width .2s;
    padding: 20px;
    margin-left: 30%; /* Отступ слева */
    margin-right: 30%; /* Отступ справа */
}

@media only screen and (min-width: 450px) {
    .center {
        width: 90%;
        margin-left: 5%; /* Отступ слева */
        margin-right: 5%; /* Отступ справа */
    }
}

@media only screen and (min-width: 600px) {
    .center {
        width: 90%;
        margin-left: 5%; /* Отступ слева */
        margin-right: 5%; /* Отступ справа */    
    }
}

@media only screen and (min-width: 1000px) {
    .center {
        width: 60%;
        margin-left: 20%; /* Отступ слева */
        margin-right: 20%; /* Отступ справа */
    }
}

.quest-photo span {
position: absolute;
	top		: 0 px;
	right		: 0 px;
	width		: 100%;
}

.item-block {
    position: relative;
    display: block;
    width: 25%;
    float: left;
    transition: width .2s;
    padding: 10px;
    
}

@media only screen and (min-width: 450px) {
    .item-block {
        width: 25%;
    }
}

@media only screen and (min-width: 600px) {
    .item-block {
        width: 25%;
        
    }
}

@media only screen and (min-width: 1000px) {
    .item-block {
        width: 25%;
    }
}

.item-pix {
    position: relative;
    width: 100%;
    height: 100%;
    transition: width .2s;
    padding: 10px;
    
}

/*Profile стили надетых предметов*/

/*Стиль левого оружия*/
#wea_slot_1{
    height: 100px;
    width: 100px;
}

/*Стиль правого оружия*/
#wea_slot_2{
    height: 100px;
    width: 100px;
}

/*Стиль брони*/
#arm_slot_1{
    height: 150px;
    width: 150px;
}

/*Стиль артефактов*/
#art_slot_1 {
    height: 60px;
    width: 60px;
}
#art_slot_2 {
    height: 60px;
    width: 60px;
}
#art_slot_3 {
    height: 60px;
    width: 60px;
}
/*Таблица с артефактами по центру*/
#art_on{
    position: relative;
    margin-right:85px;
    margin-left: 115px;
    width: 180px;
}

#items_on
{
    margin-top: 50px;
    position: relative;
    margin-right: 0px;
    margin-left:  30px;
    width: 350px;
}

.doll{
    /*background-image: url("../images/005-S3YjT0LZcl0.jpg"); /* Путь к фоновому изображению */
    display: block;
    /*border: 1px solid gray;*/
    position: relative;
    /*background-color: #cccccc;*/
    /*margin: 0px 0px 0px 0px;*/
    text-decoration: none;
    color: black;
    z-index: 0;
    height: 300px;
    width: 450px;
}

.item_count {
    /*border: 1px solid #b5e9a7;*/
    position: absolute;
    /*background: #626262;*/
    margin-top: -20px;
    margin-left: 3px;
    text-decoration: none;
    color: black;
    z-index: 0;
    width: inherit;
    font-weight: bold;
}

.in_text{
    position: relative;
    padding-left: 150px;
    width: 100%;
}
.item_cell
{
    position: relative;
    width: 150px;
}

#users_items
{
    width: 100%;
}

.item-text {
    display: block;
    /*border: 1px solid #b5e9a7;*/
    position: relative;
    text-decoration: none;
    color: whitesmoke;
    z-index: 0;
    width: 100%;
    height: 15px;
    margin-top: -10px;
}
.item-text p 
{
text-align: center;
font-size: 15px;
}

#ach-text {
    display: block;
    /*border: 1px solid #b5e9a7;*/
    position: relative;
    text-decoration: none;
    color: gray;
    z-index: 0;
    width: 100%;
    height: 15px;
    margin-top: -10px;
}
#ach-text p {
text-align: center;
font-size: 15px;
font-weight: bold;
}

#ach-count {
    display: block;
    /*border: 1px solid #b5e9a7;*/
    position: relative;
    text-decoration: none;
    color: black;
    z-index: 0;
    width: 100%;
    height: 15px;
    margin-top: -2px;
}
#ach-count p {
text-align: center;
font-size: 15px;
font-weight: bolder;
}

#ach-in-text p {
    text-align: left;
    font-size: 15px;
    padding-left: 15px;
    color: black;
    font-weight: bolder;
 }
 
 .ach-block {
    position: relative;
    display: block;
    width: 30%;
    float: left;
    transition: width .2s;
    padding: 10px;
    
}
 
 @media only screen and (min-width: 450px) {
    .ach-block {
        width: 30%;
    }
}

@media only screen and (min-width: 600px) {
    .ach-block {
        width: 25%;
        
    }
}

@media only screen and (min-width: 1000px) {
    .ach-block {
        width: 16%;
    }
}
    
    .event-list {
		list-style: none;
		font-family: 'Lato', sans-serif;
		margin: 0px;
		padding: 0px;
	}
	.event-list > li {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
		padding: 0px;
		margin: 0px 0px 20px;
	}
        
        .event-list > .top {
		background: #FFFFFF;
                box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.14);
                border-radius: 20px;
		padding: 0px;
		margin: 0px 0px 40px;
        }
                
	.event-list > li > a > time {
		display: inline-block;
		width: 100%;
		color: rgb(255, 255, 255);
		background-color: orange;
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
                float: left;
	}
	.event-list > li:nth-child(even) > a > time {
		background-color: gray;
	}
	.event-list > li > a > time > span {
		display: none;
	}
	.event-list > li > a > time > .day {
		display: block;
		font-size: 56pt;
		font-weight: 100;
		line-height: 1;
	}
	.event-list > li > a > time > .month {
		display: block;
		font-size: 15pt;
		font-weight: 900;
		line-height: 1;
	}
        
        
        .event-list > li > a > time > .week {
		display: block;
		font-size: 13pt;
		font-weight: 900;
		line-height: 1;
                padding-top: 5px;
	}
	
	
	.event-list > li > .info {
		padding-top: 5px;
	}
        
        .org{
            font-style: normal; 
            font-weight: bold; 
            font-size: 10px; 
            line-height: 10px; 
            margin: 0px; 
            margin-left: 10px; 
            color: #5199FF;
        }
	.event-list > li > .info > .title {
                overflow: hidden;
                white-space: pre-line;
		font-style: normal;
                font-weight: bold;
                font-size: 36px;
		margin: 0px;
                color: rgba(1, 20, 47, 0.85);
	}
        
        .event-list > li > .info > .org_name {
		font-size: 12pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
                /*text-shadow: 1px 1px 2px black;*/
                padding-bottom: 10px;
                
	}
	.event-list > li > .info > .desc {
		font-size: 10pt;
		font-weight: 300;
		margin: 0px;
                color: gray; 
	}
        
        .info-text {
                font-size: 12pt;
                font-weight: 500;
                color: black;}
        
        .event-card-reg-btn{
            position: absolute;
            bottom: 10px;
            left: 10px;
            padding-right: 10px;
            width: calc(100% - 20px);
        }
        .blue-btn{
            background: #5199FF;
            border-radius: 20px;
            border: none;
            outline: none;
        }
        .blue-btn:hover{
            background: #5199FF;
            border: none;
            outline: none;
        }
        .blue-btn:active{
            background: #5199FF;
            border: none;
            outline: none;
        }
        .blue-btn:focus{
            background: #5199FF;
            border: none;
            outline:none !important;
        }
        .orange-btn{
            background: #FFAF50;
            border-radius: 20px;
            border-style: none;
        }
        .orange-btn:hover{
            background: #FFAF50;
        }
        .btn-reg1 {
            visibility: hidden;
        }
        
		
	.event-list > li > .info > ul,
	.event-list > li > .social > ul {
		display: table;
		list-style: none;
		margin: 0px 0px 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
	}
	.event-list > li > .social > ul {
		margin: 0px;
	}
	.event-list > li > .info > ul > li,
	.event-list > li > .social > ul > li {
		display: table-cell;
		cursor: pointer;
		color: rgb(30, 30, 30);
		font-size: 11pt;
		font-weight: 300;
                padding: 3px 0px;
	}
    .event-list > li > .info > ul > li > a {
		display: block;
		width: 100%;
		color: rgb(30, 30, 30);
		text-decoration: none;
	} 
    .event-list > li > .social > ul > li {    
        padding: 0px;
    }
    .event-list > li > .social > ul > li > a {
        padding: 3px 0px;
	} 
	.event-list > li > .info > ul > li:hover,
	.event-list > li > .social > ul > li:hover {
		color: rgb(30, 30, 30);
		background-color: rgb(200, 200, 200);
	}
	.facebook a,
	.twitter a,
	.google-plus a {
		display: block;
		width: 100%;
		color: rgb(75, 110, 168) !important;
	}
	.twitter a {
		color: orange !important;
	}
	.google-plus a {
		color: rgb(221, 75, 57) !important;
	}
	.facebook:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(75, 110, 168) !important;
	}
	.twitter:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: orange !important;
	}
	.google-plus:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(221, 75, 57) !important;
	}
        
	
	
		.event-list > li {
			position: relative;
			display: block;
			width: 100%;
			height: 120px;
			padding: 0px;
		}
		.event-list > li > a > time {
			display: inline-block;
		}
                
		
		.event-list > li > a > time {
			width: 120px;
			float: left;
		}
                
		.quiz_image_block {
			width: 120px;
			height: 120px;
			float: left;
                        border-radius: 20px 20px 20px 20px;
		}
		.event-list > li > .info {
                        white-space: nowrap; /* Запрещаем перенос строк */
                        overflow: hidden; /* Обрезаем все, что не помещается в область */
                        text-overflow: ellipsis; /* Добавляем многоточие */
		}
		.event-list > li > a > time
                {
			width: 120px;
			height: 120px;
			padding: 0px;
			margin: 0px;
		}
                
		.quiz_image {
			width: 120px;
			height: 120px;
			padding: 0px;
			margin: 0px;
                        border-radius: 20px 20px 20px 20px;
		}
		.event-list > i > .info {
			position: relative;
			height: 120px;
			text-align: left;
			padding-right: 40px;
		}	
		.event-list > li > .info > .title,
        .event-list > li > .info > .org_name,
		.event-list > li > .info > .desc {
			padding: 0px 10px;
            max-width: calc(100% - 56px);
		}
		.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.event-list > li > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 56px;
		}
		.event-list > li > .social > ul > li {			
			display: block;
            padding: 0px;
		}
		.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 9px;
		}
                
                .event-list > li > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 56px;
		}
		.event-list > li > .social > ul > li {	
			display: block;
                        padding: 0px;
                        height: 120px;
		}
                .event-list > li > .social > ul > li > img {	
			            display: block;
                        padding: 0px;
                        height: 120px;
                        width: 56px;
                        cursor: default;
		}
		.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 0px 0px 0px;
		}
                
                .event-list > li > .info > .title {
		font-style: normal;
                font-weight: bold;
                font-size: 12px;
                line-height: 12px;
		margin: 0px;
                color: rgba(1, 20, 47, 0.85);
		margin-bottom: 3px;
                height: 34px;
                display: block;
                /*text-shadow: 1px 1px 2px black;*/
                }
                
                .event-list > li > .info > .org_name {
		font-size: 10pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
                /*text-shadow: 1px 1px 2px black;*/
                }
                
                .event-list > li > .info > .desc {
		font-size: 9pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
                }
                .event-list > li > .info > .desc > .info-text{
                font-size: 9pt;
                font-weight: 400;
                color: black;
                }
                
        
        @media (min-width: 680px) {
		.event-list > li {
			position: relative;
			display: block;
			width: 100%;
			height: 170px;
			padding: 0px;
		}
		.event-list > li > a > time{
			display: inline-block;
		}
               
		
		.event-list > li > a > time {
			width: 170px;
			float: left;
		}
                
                .btn-reg1 {
                    visibility: visible;
                }
                
		.quiz_image_block {
			width: 265px;
			height: 170px;
			float: left;
                        overflow:hidden; /* this is important */ 
                        position:relative; /* this is important too */
		}
		.event-list > li > .info {
			overflow: hidden;
		}
		.event-list > li > a > time {
		
			width: 170px;
			height: 170px;
			padding: 0px;
			margin: 0px;
		}
                
                .quiz_image {
		
			width: 265px;
			height: 265px;
			padding: 0px;
			margin: 0px;
                        position:absolute;
                        top:-50px;
                        left:0px;
		}
                
		.event-list > li > .info {
			position: relative;
			height: 170px;
			text-align: left;
			padding-right: 40px;
		}	
		.event-list > li > .info > .title,
                .event-list > li > .info > .org_name, 
		.event-list > li > .info > .desc {
			padding: 0px 10px;
		}
		.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
                
                .event-list > li > .info > .title {
                font-style: normal;
                font-weight: bold;
                font-size: 20px;
                line-height: 20px;
                height:40px;
		        margin: 0px;
                margin-top: 0px;
                color: rgba(1, 20, 47, 0.85);
                /*text-shadow: 1px 1px 2px black;*/
                }
                
                .event-list > li > .info > .org_name {
		font-size: 12pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
                /*text-shadow: 1px 1px 2px black;*/
                padding-bottom: 6px;
                }
                
                .event-list > li > .info > .desc {
		font-size: 10pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
                }
                .event-list > li > .info > .desc > .info-text{
                font-size: 10pt;
                font-weight: 400;
                color: black;
                }
                
        }
                
        #quiz_btn{
            margin-top: 4px;
            box-shadow: 0px 0px 5px rgb(51, 51, 51);
            box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
        }
        
        #event-list:hover{
           text-decoration: none;
        }
        
        .quiz-list{
            padding-top: 70px;
        }
        .quiz-text{
            margin-top: 30px;
        }
        .cell{
            list-style-type: none; /* Убираем маркеры */
        }
        
        .game-type{
		font-size: 20pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
        }
        
        .orange_h1{
            color: orange;
            font-weight:bold;
            font-size: 20pt;
        }
        .head-text{
            color: #5199FF;
            font-size: 12pt;
        }
        
        .orange_head{
            color: orange; 
            font-size: 15pt; 
            font-weight:bold; 
            font-style: normal;
        }
        .block-name{
            font-style: normal; 
            font-weight: bold; 
            font-size: 22px;
            display: flex; 
            align-items: center; 
            color: rgba(1, 20, 47, 0.85);
            margin-bottom: 20px;
        }
        
        
        @media (min-width: 680px) {
        .orange_h1{
            color: #FFAF50;
            font-weight:bold;
            font-size: 35pt; 
        }
        .head-text{
            font-size: 15pt;
        }
        .orange_head{
            color: #FFAF50; 
            font-size: 25pt; 
            font-weight:bold; 
            font-style: normal;
        }
        .block-name{
            font-style: normal; 
            font-weight: bold; 
            font-size: 28px;
            display: flex; 
            align-items: center; 
            color: rgba(1, 20, 47, 0.85);
        }
        }
        
.checkbox-warning input[type="checkbox"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox {
  padding-left: 20px; }
  .checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
    .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
  .checkbox input[type="checkbox"] {
    opacity: 0; }
    .checkbox input[type="checkbox"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
    .checkbox input[type="checkbox"]:checked + label::after {
      font-family: 'FontAwesome';
      content: "\f00c"; }
    .checkbox input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
  .checkbox.checkbox-circle label::before {
    border-radius: 50%; }
  .checkbox.checkbox-inline {
    margin-top: 0; }
  #btn-count{
      margin-top: 5px;
  }
  #btn-count:hover,
  #btn-count:focus
  {
    color: #000;
    background-color: #fff;
    border-color: #adadad;
}

#btn-count.active {
    background-color: #ffbb33;
    color: #fff;
}

.navbar-nav li:hover {
    text-decoration: none; /* Убираем подчеркивание */
    /*color: #fff;  Цвет ссылки при наведении на нее курсора мыши */  
    background: #DCDCDC; /* Цвет фона */
   }
   
   .quiz_news{
       background-color: rgb(255, 255, 255);
       box-shadow: 0px 0px 5px rgb(51, 51, 51);
       box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
       padding: 0px;
   }
             
   
   #carousel-custom {
            margin: auto;
            padding-top: 45px;
        }
        #carousel-custom .carousel-indicators {
            margin: 10px 0 0;
            overflow: auto;
            position: static;
            text-align: center;
            white-space: nowrap;
            width: 100%;
        }
        #carousel-custom .carousel-indicators li {
            background-color: transparent;
            -webkit-border-radius: 0;
            border-radius: 0;
            display: inline-block;
            height: 20%;
            width: 20%;
            margin: 0 !important;
            
        }
        #carousel-custom .carousel-indicators li img {
            display: block;  overflow: hidden;
        }
        
.item > img, .item > a > img {margin: 0; height: 100% !important;
  width: 100% !important; overflow: hidden;}
        
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 230px;
}

@media only screen and (min-width: 450px) {

    .carousel-inner {
    height: 300px;
    }
}

@media only screen and (min-width: 550px) {

    .carousel-inner {
    height: 370px;
    }
}

@media only screen and (min-width: 768px) {

    .carousel-inner {
    height: 450px;
    }
}

@media only screen and (min-width: 1200px) {

    .carousel-inner {
    height: 200px;
    }
}

#location-carousel {
    height: 230px;
}

@media only screen and (min-width: 450px) {

    #location-carousel {
    height: 300px;
    }
}

@media only screen and (min-width: 550px) {

    #location-carousel {
    height: 400px;
    }
}

@media only screen and (min-width: 768px) {

    #location-carousel {
    height: 500px;
    }
}

@media only screen and (min-width: 1200px) {

    #location-carousel {
    height: 500px;
    }
}


		.map_event > .event-list > li {
			position: relative;
			display: block;
			width: 140px;
			height: 70px;
			padding: 0px;
                        margin: 0px 0px 10px;
		}
		.map_event > .event-list > li > a > time {
			display: inline-block;
		}
                
		
		.map_event >.event-list > li > a > time {
			width: 70px;
			float: left;
		}
                
		#quiz_image_map {
			width: 70px;
			float: left;
		}
		.map_event >.event-list > li > .info {
			background-color: rgb(245, 245, 245);
			overflow: hidden;
		}
		.map_event >.event-list > li > a > time
                {
			width: 70px;
			height: 70px;
			padding: 0px;
			margin: 0px;
		}
                
		#quiz_image_map {
			width: 70px;
			height: 70px;
			padding: 0px;
			margin: 0px;
		}
		.map_event >.event-list > i > .info {
			position: relative;
			height: 50px;
			text-align: left;
			padding-right: 40px;
		}	
		.map_event >.event-list > li > .info > .title, 
		.map_event >.event-list > li > .info > .desc {
			padding: 0px 10px;
		}
		.map_event >.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.map_event >.event-list > i > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 40px;
		}
        .map_event >.event-list > li > .social > ul {
            border-left: 1px solid rgb(230, 230, 230);
        }
		.map_event >.event-list > li > .social > ul > li {			
			display: block;
            padding: 0px;
		}
		.map_event >.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 9px;
		}
                
                .map_event >.event-list > li > .info > .title {
		font-size: 12pt;
		font-weight: 700;
		margin: 0px;
                color: orange;
                /*text-shadow: 1px 1px 2px black;*/
                padding-bottom: 4px;
                }
                .map_event >.event-list > li > .info > .desc {
		font-size: 9pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
                }
                .map_event >.event-list > li > .info > .desc > .info-text{
                font-size: 11pt;
                font-weight: 400;
                color: black;}
                
                
	
	.map_event > .event-list > li > a > time > .day {
		display: block;
		font-size: 19pt;
		font-weight: 100;
		line-height: 1;
                margin-top: -5px;
	}
	.map_event > .event-list > li > a > time > .month {
		display: block;
		font-size: 9pt;
		font-weight: 900;
		line-height: 1;
	}
        
        .map_event > .event-list > li > a > time > .week {
		display: block;
		font-size: 6pt;
		font-weight: 900;
		line-height: 1;
                margin-top: -10px;
	}

#map-page {
        height: 80vh;
        position: relative;
        z-index: 1;
      }
#locations-page{
          height: 80vh;
          overflow: scroll;
      }
      

.hidden-check{
    display: none;
}

#hidden-lable{
    z-index: 3;
  position: absolute;
  top: -10px;
  margin-left: -250px;
    left: 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    display: block; /* Блочный элемент */
    height: 50px;
    width: 50px;
    border: 5px black;
}
#check-zone{
    z-index: 2;
    display: block; /* Блочный элемент */
    position: absolute;
    top: 35vh;
    margin-left: 220px;
    height: 50px;
    width: 50px;
}

#slideout_inner {
position: absolute;
top: 10px;
left: -100vw;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
overflow: scroll;
height: 80vh;
width: 97vw;
}

@media only screen and (min-width: 768px) {
#slideout_inner {width: 60vw;}
}

@media only screen and (min-width: 992px) {
#slideout_inner {width: 40vw;}
}

#slideout:checked + label > #check-zone {
display: none;
}
#slideout:checked {
left: 250px;
}
#slideout:checked + label > #slideout_inner {
left: 250px;
background-color: rgba(255,255,255,0.7);
}

.event-list-min {
		list-style: none;
		font-family: 'Lato', sans-serif;
		margin: 0px;
		padding: 0px;
	}
	.event-list-min > li {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
		padding: 0px;
		margin: 0px 0px 40px;
	}
        .event-list-min > li > a {
            text-decoration: none;
        }
        
        .event-list-min > .top {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 50px rgb(51, 51, 51);
		box-shadow: 0px 0px 50px rgba(61, 133, 198, 1);
		padding: 0px;
		margin: 0px 0px 40px;
        }
                
	.event-list-min > li > a > time {
		display: inline-block;
		width: 100%;
		color: rgb(255, 255, 255);
		background-color: orange;
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
	}
	.event-list-min > li:nth-child(even) > a > time {
		background-color: gray;
	}
	.event-list-min > li > a > time > span {
		display: none;
	}
	.event-list-min > li > a > time > .day {
		display: block;
		font-size: 56pt;
		font-weight: 100;
		line-height: 1;
	}
	.event-list-min > li > a > time > .month {
		display: block;
		font-size: 15pt;
		font-weight: 900;
		line-height: 1;
	}
        
        .event-list-min > li > a > time > .week {
		display: block;
		font-size: 13pt;
		font-weight: 900;
		line-height: 1;
                padding-top: 5px;
	}
	
	
	.event-list-min > li > a >.info {
		padding-top: 5px;
		text-align: center;
	}
	.event-list-min > li > a >.info > .title {
		font-size: 17pt;
		font-weight: 700;
		margin: 0px;
                color: orange;
                /*text-shadow: 1px 1px 2px black;*/
                padding-bottom: 6px;
	}
	.event-list-min > li > a > .info > .desc {
		font-size: 10pt;
		font-weight: 300;
		margin: 0px;
                color: gray; 
	}
        
        .event-list-min > li > a > .info > .info-text {
                font-size: 12pt;
                font-weight: 500;
                color: black;}
        
		
	.event-list-min > li > a > .info > ul,
	.event-list-min > li > a > .social > ul {
		display: table;
		list-style: none;
		margin: 0px 0px 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
	}
	.event-list-min > li > a > .social > ul {
		margin: 0px;
	}
	.event-list-min > li > a > .info > ul > li,
	.event-list-min > li > a > .social > ul > li {
		display: table-cell;
		cursor: pointer;
		color: rgb(30, 30, 30);
		font-size: 11pt;
		font-weight: 300;
                padding: 3px 0px;
	}
    .event-list-min > li > a > .info > ul > li > a {
		display: block;
		width: 100%;
		color: rgb(30, 30, 30);
		text-decoration: none;
	} 
    .event-list-min > li > a > .social > ul > li {    
        padding: 0px;
    }
    .event-list-min > li > a > .social > ul > li > a {
        padding: 3px 0px;
	} 
	.event-list-min > li > a > .info > ul > li:hover,
	.event-list-min > li > a > .social > ul > li:hover {
		color: rgb(30, 30, 30);
		background-color: rgb(200, 200, 200);
	}
	.facebook a,
	.twitter a,
	.google-plus a {
		display: block;
		width: 100%;
		color: rgb(75, 110, 168) !important;
	}
	.twitter a {
		color: orange !important;
	}
	.google-plus a {
		color: rgb(221, 75, 57) !important;
	}
	.facebook:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(75, 110, 168) !important;
	}
	.twitter:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: orange !important;
	}
	.google-plus:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(221, 75, 57) !important;
	}

		.event-list-min > li {
			position: relative;
			display: block;
			width: 100%;
			height: 100px;
			padding: 0px;
		}
		.event-list-min > li > a > time {
			display: inline-block;
		}
                
		
		.event-list-min > li > a > time {
			width: 100px;
			float: left;
		}
                
		#quiz_image-min {
			width: 100px;
			float: left;
		}
		.event-list-min > li > a > .info {
			background-color: rgb(245, 245, 245);
                        /*white-space: nowrap; /* Запрещаем перенос строк */
                        /*overflow: hidden; /* Обрезаем все, что не помещается в область */
                        text-overflow: ellipsis; /* Добавляем многоточие */
                        height: 100%;
		}
		.event-list-min > li > a > time
                {
			width: 100px;
			height: 100px;
			padding: 0px;
			margin: 0px;
		}
                
		#quiz_image-min {
			width: 100px;
			height: 100px;
			padding: 0px;
			margin: 0px;
		}
		.event-list-min > i > .info {
			position: relative;
			height: 100px;
			text-align: left;
			padding-right: 40px;
		}	
		.event-list-min > li > a > .info > .title, 
		.event-list-min > li > a > .info > .desc {
			padding: 0px 10px;
		}
		.event-list-min > li > a > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.event-list-min > i > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 40px;
		}
        .event-list-min > li > a > .social > ul {
            border-left: 1px solid rgb(230, 230, 230);
        }
		.event-list-min > li > a > .social > ul > li {			
			display: block;
            padding: 0px;
		}
		.event-list-min > li > a > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 9px;
		}
                
                .event-list-min > li > a > .info > .title {
		font-size: 12pt;
		font-weight: 700;
		margin: 0px;
                color: orange;
                /*text-shadow: 1px 1px 2px black;*/
                padding-bottom: 4px;
                }
                .event-list-min > li > a > .info > .desc {
		font-size: 9pt;
		font-weight: 400;
		margin: 0px;
                color: gray;
                }
                .event-list-min > li > a > .info >.info-text{
                font-size: 9pt;
                font-weight: 400;
                color: black;
                }
#city-menu {
        font-size: 10pt;
    }

@media only screen and (min-width: 750px) {  
    #city-menu {
        font-size: 6pt;
}}

@media only screen and (min-width: 1000px) {
    #city-menu {
        font-size: 10pt;
    }}

/* FoMo */
.fomo {
position: fixed;
left: 15px;
bottom: 15px;
width: 300px;
vertical-align: middle;
font-size: 14px;
line-height: 90px;
border: 1px solid #C0C0C0;
border-radius: 20px;
display: none;
z-index: 3;
}

.f-message {
background-color: #FFFFFF;
z-index: 10;
}

.fomo-img {
float: left;
width: 90px!important;
margin-right: 10px;
border-radius: 20px;
}

.f-text {
font-family: inherit;
font-size: 11px;
font-weight: normal;
width: 190px;
line-height: normal;
display: inline-block;
vertical-align: middle;
}

.f-text-cont {
float: left;
height: 90px;
line-height: 90px;
display: inline-block;
vertical-align: middle;
}

@media only screen and (min-width: 750px) {  
.fomo {
position: fixed;
right: 70px;
left: auto;
bottom: 15px;
width: 350px;
vertical-align: middle;
font-size: 14px;
line-height: 90px;
border: 1px solid #C0C0C0;
display: none;
z-index: 3;
}

.fomo-img {
float: left;
width: 90px!important;
margin-right: 10px;
}

.f-text {
font-family: inherit;
font-size: 14px;
font-weight: normal;
width: 210px;
line-height: normal;
display: inline-block;
vertical-align: middle;
}
    
}

/* End FoMo */

@media only screen and (max-width: 599px) {
    #search_btn {
        width: 100%;
        height: 40px;
        margin-top: -40px;
    }
}

.ymaps-layers-pane {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

.date-small-box {
        height: 40px;
        width: 40px;
        background-color:blue;
        position: absolute; 
        top: 0px; 
        left: 0px; 
        border-radius: 20px 0px 20px; 
        background: #5199FF; 
        text-align: center;
        z-index: 2;
    }
    .date-small-date{
        display: inline-block;
        padding-top: 2px;
        font-style: normal; 
        font-weight: 500; 
        font-size: 17px; 
        color: #FFFFFF;
    }
    .date-small-month1{
        visibility: hidden;
    }
    
    .date-small-month2{
        position: absolute;
        visibility: visible;
        font-style: normal; 
        font-weight: 500; 
        font-size: 12px; 
        line-height: 10px; 
        color: #FFFFFF;
        top: 24px;
        left: 3px;
    }
    
    .date-small-week{
        display: inline-block; 
        font-style: normal; 
        font-weight: 500; 
        font-size: 8px; 
        color: #FFFFFF; 
        vertical-align: text-top;
        padding-left: 2px;
    }


@media (min-width: 680px){
    .date-small-box {
        height: 60px;
        width: 60px;
        background-color:blue;
        position: absolute; 
        top: 0px; 
        left: 0px; 
        border-radius: 20px 0px 20px; 
        background: #5199FF; 
        text-align: center; 
        vertical-align: text-top;
    }
    .date-small-date{
        display: inline-block;
        padding: 0px;
        font-style: normal; 
        font-weight: 500; 
        font-size: 28px; 
        color: #FFFFFF;
    }
    .date-small-month1{
        float:left;
        display: inline-block;
        visibility: visible;
        font-style: normal; 
        font-weight: 500; 
        font-size: 10px; 
        color: #FFFFFF;
        margin-top: -5px;
        margin-left: 8px;
    }
    .date-small-month2{
        visibility: hidden;
        line-height: 0px;
    }
    
    .date-small-week{
        display: inline-block; 
        font-style: normal; 
        font-weight: 500; 
        font-size: 10px; 
        color: #FFFFFF; 
        vertical-align: text-top; 
        padding-left: 2px;
        padding-top: 2px;
    }
}

.sticky-top-block{
    position: relative;
}

@media (min-width: 1000px){
    .sticky-top-block{
    position: sticky; 
    top: 70px;
}
}

.hidden-info-text{
    display: none;
    
}

@media (min-width: 680px){
.hidden-info-text{
    display: inline;
}
}

.info-link{
    display: block;
    width: 100%;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
}
@media (max-width: 681px){
.location-href:active,
.location-href:hover,
.location-href:visited,
.location-href{
    text-decoration: none;
    color: black;   
}
}

@media (min-width: 680px){
.info-link{
  display: none;
  width: 0px;
}
}


/* Стили для event_main */
.img-min{
    width: 40px;
    height: 40px;
    padding: 0px;
    margin: 0px;
    float: left;
}

.ind-search-btn{
    padding-left: 0px; 
    margin-top: 50px;
}
@media (min-width: 600px){
.ind-search-btn{
    padding-left: 0px;
    margin-top: 20px;
}
}

.event-reg-btn{
    width: 100%; 
    height: 50px; 
    line-height: 35px; 
    font-size: 18px;
}

@media (min-width: 1000px){
.event-reg-btn{
    width: 300px; 
    height: 50px; 
    line-height: 35px; 
    font-size: 18px;
}
}

.event-discription{
    padding-top: 0px;
}

@media (min-width: 1000px){
.event-discription{
    padding-top: 90px;
}
}

.event-name-block{
    display: table-cell; 
    position: absolute; 
    z-index:2; 
    font-size: 12pt; 
    color: white; 
    width: 100%;
    text-align: center;  /* не поддерживается Opera Mini [opera.com] */
    visibility: hidden;
}

@media (min-width: 750px){
.event-name-block{
    line-height: 450px;
    visibility: visible;
    font-size: 30pt; 
}
}

img{
    width: 100%;
}

.navbar-default {
  background-color: white;
  border-color: #e7e7e7;
}

.nav > li > a > span {
  color: black;
  }

.quest-date{
    padding-top: 0px;
    margin-top: 0px;
}

#reg-form{
    padding-left: 35px;
    padding-right: 35px;
}

#toTop{
width: 65px;
padding: 5px;
bottom:-40px; /* отступ кнопки от нижнего края страницы*/
right: 5px;
}



@media screen and (min-width: 680px) {
.hide-desktop {
    display: none !important;
}
}

.event-main-img{
    height: 500px;
}

.event-main-img-b{
    position: absolute;
    width:100%;
    height: 500px;
    background:#000;
    opacity:0.7;
    top: 0px;
    left: 0px;
}

@media only screen and (max-width: 750px) {
.event-main-img{
    height: calc(100vw*0.66);
    max-height:100vh;
}

.event-main-img-b{
    position: absolute;
    width:100%;
    height: calc(100vw*0.66);
    max-height:100vh;
    background:#000;
    opacity:0.7;
    top: 0px;
    left: 0px;
}
    }
    
/*Preloader start*/
#p_prldr{
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
background: #FFF;
z-index: 30;}
 
.contpre small{font-size:25px;}
 
.contpre{
width: 250px;
height: 100px;
position: absolute;
left: 50%;top: 48%;
margin-left:-125px;
margin-top:-75px;
color:#fff;
font-size:40px;
letter-spacing:-2px;
text-align:center;
line-height:35px;}
 
#p_prldr .svg_anm {
position: absolute;
width: 41px;
height: 41px;
/*background: url(images/oval.svg) center center no-repeat;*/
background-size:41px;    
margin: -16px 0 0 -16px;}
/*Preloader End*/
/*LoginForm Start*/
.line-login {
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                position: relative;
            }
.line-login span {
                background-color: #ffffff;
                position: relative;
                z-index: 1;
                padding: 0px 25px;
            }

.line-login:before {
                content: '';
                display: block;
                width: 40%;
                height: 1px;
                background-color: #e5e5e5;
                position: absolute;
                top: 50%;
                right: 0px;
                margin-top: -1px;
                z-index: 0;
            } 
            
.line-login:after {
                content: '';
                display: block;
                width: 40%;
                height: 1px;
                background-color: #e5e5e5;
                position: absolute;
                top: 50%;
                left: 0px;
                margin-top: -1px;
                z-index: 0;
            }
            
.btn-login-block {
                text-align: center;
                position: relative;
            }
            
            .close{
                font-size: 30px;
                z-index: 5;
            }
/*LoginForm End*/


@media only screen and (min-width: 320px) {
    .event-list > li > .info > .title{
        font-size: 8px;
        line-height: 8px;
        margin-bottom: 1px;
        height: 37px

    }
}
@media only screen and (min-width: 371px) {
    .event-list > li > .info > .title{
        font-size: 10px;
        line-height: 10px;

    }
}

@media only screen and (min-width: 389px) {
    .event-list > li > .info > .title{
        font-size: 13px;
        line-height: 12px;

    }
}

@media only screen and (min-width: 482px) {
    .event-list > li > .info > .title{
        font-size: 14px;
        line-height: 14px;

    }
}
@media only screen and (min-width: 754px) {
    .event-list > li > .info > .title{
        font-size: 19px;
        line-height: 19px;

    }
}
@media only screen and (min-width: 1000px) {
    .event-list > li > .info > .title{
        font-size: 20px;
        line-height: 18px;

    }
}

.scrollbar::-webkit-scrollbar {
            width: 12px;
        }
        
.scrollbar::-webkit-scrollbar-track {
            border-radius: 8px;
            background-color: #eee;;
            border: 1px solid #cacaca;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        }
        
.scrollbar::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #a1a0a0;
}

.custom-mfp-arrow-right {
    right: 0%;
    color: #FFF;
}

.custom-mfp-arrow-left {
    left: 0%;
    color: #FFF;
}