/*
mor: #93268f
koyu gri: #999999
açık gri: #f2f2f2
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html {width:100%; height:100%;}
body{font-family:'maaxregular'; font-size:14px; line-height:19px; background-color:#fff; height:100%; width:100%; color: #000;}



a{text-decoration:none; color:inherit}

strong{font-weight:bold}
i{font-style:italic}
.desc a{color:#ee3839}

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}


#go-up{position:fixed; font-size:12px; color:#999; right: 20px; bottom: 10px; font-family:'maaxblack'}
#go-up:hover{color:#000;}

#years-bar #bar:before {
    content: '';
    width: 2px;
    display: block;
    background-color: #000;
    height: 100%;
    position: absolute;
    left: 7px;
}

#dateFilter{
	display: block;
    top: calc(50% + 23px);
    font-size: 10px;
    letter-spacing: 0.1em;
    left: -16px;
    color: #fff;
    white-space: nowrap;
    position: relative;
    transform: rotate(270deg);
}
#years-bar{
	width: 15px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding-left: 20px;
}
#years-bar:before {
    content: '';
    width: 2px;
    height: 100%;
    display: block;
    background-color: #fff;
    position: absolute;
    left: 27px;
}
#years-bar #bar{height: 150px; position:relative; top:0; z-index: 10}
#years-bar .draggable{width: 15px; height: 2px; background-color:#000; position:absolute; cursor:s-resize;}
#years-bar #barTop{top: 0;}
#years-bar #barTop:before{height: 10px; content: ''; margin-top: -10px; width: 100%; display:block;}
#years-bar #barTop:after{height: 5px; content: ''; width: 100%; display:block;}
#years-bar #barBottom{bottom: 0;}
#years-bar #barBottom:after{height: 10px; content: ''; width: 100%; display:block;}
#years-bar #barBottom:before{height: 5px; content: ''; margin-top: -5px; width: 100%; display:block;}

#wrapper{position:relative; max-width:1250px}

#wrapper:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}


input {
	    margin: 0;
    padding: 0;
    vertical-align: text-top;
}

input[type="checkbox"]:before {
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
}

.cities input[type="checkbox"]:before {border: 1px solid #000; background-color:#E6E6E6; margin-top:2px;}
.cities input[type="checkbox"]:checked:before{	background-color: #000;}

/******/

.color-3 .act-types{background-color:#93268f}
.color-3 .years{background-color:#93268f}
.color-3 .cities li.active a{color:#93268f}
.color-3 .cities li:hover a{color:#93268f}
.color-3 .site-head h1{color:#93268f}
.act[section="3"]{border-color:#93268f}
.color-3 .site-head{border-color:#93268f}
.act-sections ul li.color-3 a:hover{color:#93268f}
.act-sections ul li.color-3 a.active{color:#93268f}
.color-3 .act-types input[type="checkbox"]:before{background-color:#93268f}
.color-3 #listInfoBox{color:#93268f}

.color-1 .act-types{background-color:#24902e}
.color-1 .years{background-color:#24902e}
.color-1 .cities li.active a{color:#24902e}
.color-1 .cities li:hover a{color:#24902e}
.color-1 .site-head h1{color:#24902e}
.act[section="1"]{border-color:#24902e}
.color-1 .site-head{border-color:#24902e}
.act-sections ul li.color-1 a:hover{color:#24902e}
.act-sections ul li.color-1 a.active{color:#24902e}
.color-1 .act-types input[type="checkbox"]:before{background-color:#24902e}
.color-1 #listInfoBox{color:#24902e}


.color-2 .act-types{background-color:#e41b1b}
.color-2 .years{background-color:#e41b1b}
.color-2 .cities li.active a{color:#e41b1b}
.color-2 .cities li:hover a{color:#e41b1b}
.color-2 .site-head h1{color:#e41b1b}
.act[section="2"]{border-color:#e41b1b}
.color-2 .site-head{border-color:#e41b1b}
.act-sections ul li.color-2 a:hover{color:#e41b1b}
.act-sections ul li.color-2 a.active{color:#e41b1b}
.color-2 .act-types input[type="checkbox"]:before{background-color:#e41b1b}
.color-2 #listInfoBox{color:#e41b1b}


.color-0 .act-types{background-color:#f94607}
.color-0 .years{background-color:#f94607}
.color-0 .cities li.active a{color:#f94607}
.color-0 .cities li:hover a{color:#f94607}
.color-0 .site-head h1{color:#f94607}
.color-0 .site-head{border-color:#f94607}
.act-sections ul li.color-0 a:hover{color:#f94607}
.act-sections ul li.color-0 a.active{color:#f94607}
.color-0 .act-types input[type="checkbox"]:before{background-color:#f94607}
.color-0 #listInfoBox{color:#f94607}


/******/

.act-types input[type="checkbox"]:checked:before{
	background-color: #fff;
}

section:after {
	clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.site-header{margin-top:0; height: 63px; padding-left: 200px;}
.site-header:after{
	clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.act-sections{
	float: left;
    background-color: #fff;
    margin-top: -8px;
}
.act-sections ul{
    
}
.act-sections ul li {
    line-height: 15px;
	float:left; margin-right: 10px;
}

.site-main{}

#qua {
    position: absolute;
    right: 0;
    top: 0;
}

.site-head{
    box-sizing: border-box;
    height: 50px;
    z-index: 10;
    margin-left: 40px;
    margin-top: 40px;
    border-top: 1px solid;
    line-height: 48px;
    position: relative;
	border-color: #efefef;
}
.site-head h1{
	float: left;
	clear:both;
    font-size: 31px;
    line-height: 49px;
    letter-spacing: 0.03em;
    font-family: 'maaxbold';
	background-color: #fff;
}
.site-head h1:after {
    content: '';
    color: #000;
    font-size: 18px;
    display: block;
    font-family: 'maaxblack';
    margin: 0 10px;
}
#main-nav {
    display: inline-block;
    margin-left: 15px;
    margin-top: 7px;
    line-height: 49px;
}
#main-nav ul li{float:left; margin-right: 10px}


.act-sections ul li a{font-family: 'maaxblack'; color:#999; font-size: 12px; letter-spacing: 0.05em;}
#main-nav ul li a{color:#999; font-size: 13px; font-family: 'maaxblack'}
#main-nav ul li a:hover{color:#000;}
#main-nav ul li a.active{color:#000;}

.about{
	position: Absolute;
    right: 0;
    top: -45px;
}
.about ul li{display:inline-block; margin-right: 5px}
.about ul li a{    color: #ccc;
    font-size: 11px;
    font-family: 'maaxbold';
    letter-spacing: 0.1em;}
.about ul li a:hover{color:#000}
.about ul li a.active{color:#000}

.years{
	width: 100px;
    float: left;
    padding-bottom: 5px;
    padding-top: 143px;
    box-sizing: border-box;
    padding-left: 50px;
    position: relative;
    margin-top: -150px;
}
.years ul li{font-family: "maaxblack"; font-size: 14px; line-height: 21px; color: #fff; text-align: center;}
.years ul li:first-child{padding-top: 5px;}
.years ul li a.active{color:#000}
.years ul li a:hover{color:#000}
.cities{
	width: 100px;
    background-color: #E6E6E6;
    float: left;
    /*margin-top: -150px;
    padding-top: 147px;*/
	padding-top: 20px;
    padding-left: 5px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
.cities ul li{font-size: 14px; line-height: 21px; color:#333333; position: relative;}

.cities ul li:before {
    content: '';
    width: 12px;
    height: 2px;
    position: absolute;
    top: 2px;
    display: block;
    background-color: #e6e6e6;
}

.act-types{
    margin-bottom: 50px;
    padding: 20px 0px 20px 40px;
	position:relative;
}

.act-types:after{
	clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.act-types ul{
	 max-height: 36px;
	overflow: hidden;
	-webkit-transition: max-height 0.5s ease-out; /* Safari */
    transition: max-height 0.5s ease-out;
}
.act-types.opened ul{max-height: 700px;}

.act-types:hover ul{
	max-height: 700px;
    transition: max-height 0.5s ease-in;
	-webkit-transition: max-height 0.5s ease-in; /* Safari */
}
.act-types ul li{font-size: 12px; line-height: 18px; color:#fff; display:block; float:left; width: 200px; box-sizing:border-box; letter-spacing: 0.05em}
.act-types ul li:hover  a{color:#000}
.act-types ul li.active a{color:#000}

.act-types ul li a{text-transform: uppercase}

.act-types .oc-types{font-size: 10px; letter-spacing: 0.05em; font-family:'maaxbold'; color:#ffffff; position:absolute; bottom: 5px; right: 10px; cursor:pointer;}
.act-types .oc-types .close{display:none}
.act-types.opened .oc-types .open{display:none;}
.act-types.opened .oc-types .close{display:inline-block;}

section{
	width: calc(100% - 200px);
    float: left;
}

/* */
#plain-content{}
#plain-content .exp{padding: 20px 40px 20px 240px; width: 100%; box-sizing:border-box; background-color:#efefef}
#plain-content .exp p{width: 562px; margin-bottom: 10px;}
#plain-content .plain{
	margin-left: 200px;
    width: 562px;
    padding: 20px 40px;
    /*box-sizing: border-box;*/
}

#plain-content .plain h4{font-size: 21px; font-family:'maaxbold'; margin-bottom: 20px; margin-top: 20px;}
#plain-content .plain h6{font-size: 16px; font-family:'maaxbold'; margin-bottom: 15px; }
#plain-content .plain p{margin-bottom: 15px;}
#plain-content input{
	width: 100%;
    height: 20px;
    border: none;
    border-bottom: 1px solid;
	margin-bottom: 20px;
	font-family: 'maax';
	font-size: 14px;
}
#plain-content #submitbut{border:none; height: 40px; font-family: 'maaxbold'; width: 100%;}
#plain-content #form-alert{color:red; display:none; margin-bottom: 20px;}
#plain-content #form-confirm{color:green; display:block; margin-bottom: 20px;}
#plain-content #submitbut{cursor:pointer}
#plain-content textarea{
	width: 100%;
    min-height: 150px;
	border: none;
	font-family: 'maax';
	font-size: 14px;
	background-color:#efefef;
	margin-top: 20px;
	padding: 0;
	margin-bottom: 30px
}

#plain-content textarea:focus, #plain-content input:focus{
    outline: none;
}


.act {float:left; margin: 0 0 40px 40px; padding-bottom:5px; border: 1px solid #93268f; border-left: none; border-color: #999}


#listInfoBox{float:left; margin: 0 0 40px 40px; padding-bottom:5px; border: 1px solid #93268f; border-left: none; border-color: #999}
#listInfoBox .summary{width: 160px; height:160px }
#listInfoBox .summary:before {
    content: '';
    margin-top: -12px;
    display: block;
}

#listInfoBox .summary h2{
        font-size: 21px;
    font-family: 'maaxblack';
    background-color: #fff;
    display: inline-block;
    margin-bottom: 10px;
}
#listInfoBox .summary h2 span{
    font-size: 32px;
    display: block;
    line-height: 28px;
}
#listInfoBox .summary p{
	font-size: 14px;
    line-height: 19px;
}
#listInfoBox .summary p .datLoc{
    color: #000;
	font-family: 'maaxbold';
}
#listInfoBox .summary p .sctn{font-family: 'maaxbold';}
#listInfoBox .summary p .typs{color: #666}
.act .summary{width: 160px; height:160px }
.act .summary:before {
    content: '';
    margin-top: -12px;
    display: block;
}
.act .summary .date-loc{font-size: 14px; color: #666666; background-color:#fff; padding-right: 3px; display: inline-block}
.act .summary .title{
	font-family: "FernRe"; */
    /* font-weight: bold; */
    letter-spacing: -0.02em;
    font-family: 'maaxbold';
    font-size: 21px;
    line-height: 24px;
    background-color: #fff;
    padding-right: 5px;
}
.act .summary .tags{font-size: 13px;}
.act .details{display:none; max-width: 950px; width: auto}
.act.active .details{display:block}
.act.active .summary .date-loc{display:none}
.act.active .summary .tags{display:none}
.act.active .summary {
    width: 562px;
	height: auto;
}
.act.active{max-width: 950px; position:relative; width: auto}
.act.active.hasFig{width: calc(100% - 55px); }

.act .details{max-width: 562px; margin-top: -20px; z-index: 10; position: relative;}
.act .details:after {
    clear: both;
    content: '';
    width: 100%;
    display: block;
}



.act .details label{font-size: 12px; font-family: 'maaxblack'; color:#999}
.act.active .title {
    font-weight: bold;
    font-size: 36px;
    line-height: 38px;
    display: inline;
    background-color: #fff;
}

.act.active .title:after {
    content: '';
    clear: both;
    display: block;
    width: 100%;

}



.act .details .info{
	width: 150px;
    float: left;
    box-sizing: border-box;
    padding-right: 15px;
}

.act .details .event{
	width: 400px;
    float: left;
    padding-right: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.act .details .info p{font-size: 14px; margin-bottom: 8px;}

.act .details .event p{font-size: 18px; line-height: 22px; margin-bottom: 11px;}
.act .details .event p a{
    font-size: 14px;
    line-height: 19px;
	display: inline-block;
}

.act.active figure{
	display:block;
}
.act figure{
	display:none;
	width: calc(100% - 550px);
    float: right;
	padding-right: 20px;
	padding-top: 20px;
	box-sizing: border-box;
	position:absolute;
	right: 0;
	top: 0;
}
.act figure img{width: 100%; vertical-align:middle}
.act.active .summary:before{margin-top:-20px}

section.main-page{margin-left: 200px}

#enter{background-color:#efefef; padding: 20px 40px; position:relative; margin-bottom: 40px;}
#enter > p{margin-bottom:6px; font-size: 15px; line-height:22px; display:block; width: 560px}
#enter > p a{font-family:'maaxbold'}
#enter > p a:hover{text-decoration:underline}
#enter > p a span{font-size: 12px; font-family: 'maaxregular';}
#enter #map-slider{width: 200px; position:absolute; right: 0; top: 0;}
#enter #map-slider .carousel-cell{width: 200px;     height: 320px;}

#enter #map-slider .carousel-cell.color-3{background-color:#93268f}  
#enter #map-slider .carousel-cell.color-1{background-color:#24902e}
#enter #map-slider .carousel-cell.color-2{background-color:#e41b1b}
#enter #map-slider .carousel-cell.color-0{background-color:#f94607}

.main-page .map-desc p{
	font-size: 14px;
    line-height: 19px;
}
.main-page .map-desc h2{
	font-size: 21px;
    font-family: 'maaxblack';
	margin-bottom: 10px;
	color: #000
}
.main-page .map-desc{
	    width: 200px;
    box-sizing: border-box;
    padding: 0 20px;
    color: #fde0d8;
}
.main-page .flickity-page-dots{
	bottom: 10px;
	padding-left: 15px;
	text-align:left;
}
.main-page .flickity-page-dots .dot{margin: 0 5px;}
.main-page .map-image{
	width: 100%;
    height: 159px;
    position: relative;
}
.main-page .map-count {
    font-family: 'maaxblack';
    font-size: 25px;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40%;
	color: #000;
}

.listInfoBox{float:left; margin: 0 0 40px 40px; padding-bottom:5px; border: 1px solid #93268f; border-left: none; border-color: #999}
.listInfoBox:hover{border-color:#fff;}
.listInfoBox .summary{width: 160px; }
.listInfoBox .summary:before {
    content: '';
    margin-top: -12px;
    display: block;
}

.listInfoBox .summary h2{
        font-size: 21px;
    font-family: 'maaxblack';
    background-color: #fff;
    display: inline-block;
    margin-bottom: 10px;
}
.listInfoBox .summary h2 span{
    font-size: 32px;
    display: block;
    line-height: 28px;
}
.listInfoBox .summary p{
	font-size: 14px;
    line-height: 19px;
}
.listInfoBox .summary p .datLoc{
    color: #000;
	font-family: 'maaxbold';
}
.listInfoBox .summary p .sctn{font-family: 'maaxbold';}
.listInfoBox .summary p .typs{color: #666}

.listInfoBox.color-3{color:#93268f}  
.listInfoBox.color-1{color:#24902e}
.listInfoBox.color-2{color:#e41b1b}
.listInfoBox.color-0{color:#f94607}
.listInfoBox.color-3:hover{border-color:#93268f}
.listInfoBox.color-2:hover{border-color:#e41b1b}
.listInfoBox.color-1:hover{border-color:#24902e}
.listInfoBox.color-0:hover{border-color:#f94607}

#infoBoxCon {width: calc(100% - 200px);}

.exp > p a{font-family: 'maaxbold'}
.plain a:hover{text-decoration:underline}

#logo {
    position: absolute;
    top: -20px;
    left: -100px;
}
#logo img{}

.site-head h1 a {
    color: #000;
}

#legal-statement{padding-left: 40px;}

@media only screen and (max-width : 800px) {

.site-header{padding-left: 60px}
#main-nav{display:none}
section.main-page{margin-left:0; margin-top:0}
#enter #map-slider{display:none}
#enter > p{width: auto}
section{width: 100%; margin-top: 30px;}
#infoBoxCon{width: 100%}
#legal-statement{
    padding-bottom: 20px;
    clear: both;}

.act.active .details{width: 100%; float:left; margin-top:0;}
.act .details .info{width: 100%}
.act .details .event{width: 100%}
.act.active .summary{width: 100%}
.act.active figure{
	width: 100%;
	position:relative;
	padding-top: 0;
	margin-top: -20px;
	margin-bottom: 20px;
}
.act figure img{vertical-align:top}
.site-head h1{
	font-size: 5.6vw;
    line-height: 2em;
}
.cities{display:none;}
.act-types{display:none}
.years{width: 100%; padding-top:10px; padding-right: 10px; margin-top:0; padding-left:0}
.years ul li{float:left; margin-left: 10px; margin-bottom: 10px; width: 50px;}
.years ul li:first-child{padding-top: 0}
#years-bar{display:none}
#logo img{margin-top:-20px}
.about{display:none}
.act .summary{width: auto;}
.act{margin: 0 0 30px 30px; width: calc(50% - 45px);}
#listInfoBox{margin: 0 0 30px 30px; width: calc(50% - 45px);}
.listInfoBox{margin: 0 0 30px 30px; width: calc(50% - 45px);}
.act.active .title{font-size: 32px}
.act .summary .title{word-wrap: break-word;}

#plain-content .exp{padding:40px; width: 100%; float:left;}
#plain-content .plain{margin-left:0;
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 20px 40px;
}
#plain-content .exp p{width:100%}


}