@font-face {
  font-family: "FontAwesome";
  src: url("fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("fontawesome-webfont.woff?v=4.7.0") format("woff");
  font-weight: normal;
  font-style: normal;
}

html, body, div, span, ul, li, a, h1, h2, h3, img, p, address, iframe, ::after, ::before, form, fieldset, input, select, option, optgroup { margin: 0; padding: 0; border: none; box-sizing: border-box; }
article, aside, header, nav, main { display: block; box-sizing: border-box; }

a { color: #445166; }
li { list-style: none; }
h1, h2 { border-bottom: 1px solid #eee; padding-bottom: 13px; margin: 25px 0; line-height: 1.25; font-weight: 500; }
h1 { font-size: 31px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; margin-bottom: 10px; }
address { font-style: normal; margin: 0 0 15px; }
p { margin: 0 0 15px; }
img { border: none; }
body { background: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.4; color: #333; -webkit-text-size-adjust: 100%; }

.hidden { display: none; }
.container { max-width: 1184px; margin: auto; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
[class^=col] { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; padding: 0 15px; position: relative; width: 100%; min-height: 1px; }
[class^=col] a { text-decoration: underline; color: #737373; }
[class^=col-] a:hover { text-decoration: none; }
.col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-4 { -ms-flex: 0 0 33.33334%; flex: 0 0 33.33334%; max-width: 33.33334%; }
.col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-7 { -ms-flex: 0 0 63%; flex: 0 0 63%; max-width: 63%; }
.col-8 { -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%; }
.aside { border-left: 1px solid #eee; float: right; padding: 15px 0 15px 25px; }
.aside ul, .text ul { margin-bottom: 20px; }
.aside li, .text li { list-style: none; margin-bottom: 15px; padding-left: 38px; position: relative; }
.aside li:before { font-family: "FontAwesome"; position: absolute; top: 0; }
.aside li:nth-child(1):before { content: "\f007"; left: 7px; }
.aside li:nth-child(2):before { content: "\f017"; left: 6px; }
.aside li:nth-child(3):before { content: "\f0c0"; left: 5px; }
.text li:after { display: block; content: ""; width: 6px; height: 6px; background: black; position: absolute; top: 9px; left: 8px; }
.youtube { position: relative; padding-bottom: 59%; padding-top: 25px; height: 0; margin-bottom: 30px; }
.youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.responsive { width: 100%; max-width: 100%; height: auto; }

.alert { padding: 6px 30px; border-radius: 6px; margin: 15px 0; color: white; }
.alert.error { background-color: #ec1604; }
.alert.success { background-color: #079707; }
.btn { transition: background ease .3s; color: white !important; background-color: #ddd; border: none; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; text-align: center; display: inline-block; padding: 12px 25px; border-radius: 6px; margin: 5px 0 10px 0; text-decoration: none !important; }
.btn:hover { background-color: #cfcfcf; }
.btn-primary { background-color: #ff9600; }
.btn-primary:hover { background-color: #ff8400; }
.btn-action { background-color: #079707; }
.btn-action:hover { background-color: #087008; }
optgroup { font-style: normal; }
select, input[type=text], input[type=password] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; color: #888; padding: 0 10px; height: 45px; line-height: 45px; border: 1px solid #ccc; width: 100%; margin: 5px 0 10px 0; }
input[type=text]:focus, input[type=password]:focus { border-color: #555; }
select[size^="1"] { height: auto; }
label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
label span { color: red; }

/* header ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

header { background: #48217a; height: 45px; text-align: center; position: relative; }
header nav img { height: 27px; margin: 9px; display: inline-block; }
header nav { max-width: 1200px; padding: 0 20px; margin: auto; position: relative; }
header button { width: 45px; height: 45px; padding: 0; background: 0 0; border: none; outline: 0; font-size: 21px; color: #b7a6cb; cursor: pointer; position: absolute; top: 0; left: 0; }
header button:before { display: block; content: "\f0c9"; font-family: "FontAwesome"; font-size: inherit; text-rendering: auto; }
header button:after { content: ""; display: none; position: absolute; left: 7px; bottom: -30px; margin-top: -15px; border: 15px solid transparent; border-top-color: #7f65a5; z-index: 2; }
header button:hover, header button[aria-expanded="true"] { background: #7f65a5; }
header button[aria-expanded="true"]:after { display: inline-block; }
header div[role="navigation"] { position: absolute; top: 45px; left: 0; width: 100%; background: rgba(221,221,221,.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 1; display: none; }
header ul { position: relative; width: 100%; margin: auto; padding: 15px 0 15px 20px; max-width: 1200px; text-align: left; }
header ul li:nth-child(1) { border-top: 1px solid #ccc; }
header li { display: table; width: 24.75%; height: 45px; margin: 0; border: 1px solid #ccc; border-top: none; background: #767676; font-size: 18px; line-height: 1.1; transition: all .05s ease-in-out; }
header li:hover { background: #555; }
header li a { position: relative; display: table-cell; padding: 0 15px; text-decoration: none; color: #fff; vertical-align: middle; }
header li a:hover { text-decoration: none; }
header li ul { position: absolute; top: 0; left: 25.5%; width: 74.25%; z-index: 2; }
header li ul li { float: left; width: 40%; height: 63px; background: #fff; border: 1px solid #ccc; border-right: none; }
header li ul li:hover { background: #ddd; }
header li ul li a { color: #445167; }
header .lang { position: absolute; top: 12px; right: 22px; }
header .lang img { margin: 3px; width: auto; height: auto; }
header .social { position: absolute; top: 7px; right: 105px; }
header .social img { margin: 3px; width: 25px; height: 25px; }
.motive    { background: url(../img/motive_01.jpg) top center; background-size: auto auto; background-size: cover; width: 100%; height: 390px; }
.motive-2  { background-image: url(../img/motive_02.jpg?2); }
.motive-3  { background-image: url(../img/motive_03.jpg?2); }
.motive-4  { background-image: url(../img/motive_04.jpg?2); }
.motive-5  { background-image: url(../img/motive_05.jpg?2); }
.motive-6  { background-image: url(../img/motive_06.jpg?2); }
.motive-7  { background-image: url(../img/motive_07.jpg?2); }
.motive-8  { background-image: url(../img/motive_08.jpg?2); }
.motive-9  { background-image: url(../img/motive_09.jpg?2); }
.motive-10 { background-image: url(../img/motive_10.jpg?2); }
.motive-11 { background-image: url(../img/motive_11.jpg?2); }
.motive-12 { background-image: url(../img/motive_12.jpg?2); }
.motive-13 { background-image: url(../img/motive_13.jpg?2); }
.motive-14 { background-image: url(../img/motive_14.jpg?2); }
.motive-15 { background-image: url(../img/motive_15.jpg?2); }
.motive-16 { background-image: url(../img/motive_16.jpg?2); }
.motive-17 { background-image: url(../img/motive_17.jpg?2); }
.motive-18 { background-image: url(../img/motive_18.jpg?2); }
.motive-19 { background-image: url(../img/motive_19.jpg?2); }
.motive-20 { background-image: url(../img/motive_20.jpg?2); }

.breadcrumb { font-size: 14px; padding: 8px 15px 8px 0; }
.breadcrumb > li { display: inline-block; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb a span { color: #445166; }
.breadcrumb span { color: #aaa; }
.breadcrumb > li + li::before { content: "\f0da"; font-family: "FontAwesome"; padding: 0 8px 0 5px; color: #aaa; font-size: 16px; position: relative; top: 1px; }

/* homepage slider ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.slider { height: 390px; position: relative; background: #000; margin-bottom: 21px; }
.slider div { background-size: cover; background-position: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; }
.slider div:nth-of-type(1) { animation: xfade 20s 15s infinite; background-image: url(../img/slide_4.jpg?2); }
.slider div:nth-of-type(2) { animation: xfade 20s 10s infinite; background-image: url(../img/slide_3.jpg?2); }
.slider div:nth-of-type(3) { animation: xfade 20s 5s infinite;  background-image: url(../img/slide_2.jpg?2); }
.slider div:nth-of-type(4) { animation: xfade 20s 0s infinite;  background-image: url(../img/slide_1.jpg?2); }
.slider img { margin: 30px auto 0; max-width: 100%; display: block; padding: 0 20px; height: auto; }
.slider span { padding: 4px 0; width: 264px; text-align: center; border: 3px solid #fff; display: inline-block; border-radius: 6px; color: white; cursor: pointer; transition: all .4s ease-in-out; font-size: 18px; letter-spacing: 1px; text-decoration: none; position: absolute; top: 268px; left: 50%; transform: translate(-50%, 0); }
.slider span:before { content: "\f03d"; display: inline-block; font-family: "FontAwesome"; font-size: 14px; font-size: inherit; text-rendering: auto; margin-right: 10px; -webkit-font-smoothing: antialiased; }
.slider span:hover { background: #fff; color: #000; }
@keyframes xfade{ 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } }

/* modal window ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@keyframes modal-video { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-video-inner { from { transform: translate(0,-100px) } to { transform: translate(0,0) } }
.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1000000;cursor:pointer;opacity:1;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video;transition:opacity .3s ease-out}
.modal-video-close{opacity:0}
.modal-video-close .modal-video-movie-wrap{-webkit-transform:translate(0,-100px);transform:translate(0,-100px)}
.modal-video-body{max-width:70%;width:100%;height:100%;margin:0 auto;display:table}
.modal-video-inner{display:table-cell;vertical-align:middle;width:100%;height:100%;}
.modal-video-movie-wrap{width:100%;height:0;position:relative;background-color:#000;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video-inner;-webkit-transform:translate(0,0);transform:translate(0,0);transition:transform .3s ease-out}
.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow: 0 0 0 15px #fff, 0 20px 30px rgba(0,0,0,.5);}
.modal-video-close-btn{position:absolute;z-index:2;top:-50px;right:-50px;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent;cursor:pointer;}
.modal-video-close-btn:before{transform:rotate(45deg)}
.modal-video-close-btn:after{transform:rotate(-45deg)}
.modal-video-close-btn:before, .modal-video-close-btn:after{content:'';position:absolute;height:5px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}

/* tiles -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.zoom > div { overflow: hidden; }
.zoom a { display: inline-block; overflow: hidden; position: relative; }
.zoom img { transition: all .4s ease-in-out; display: block; height: auto; max-width: 100%; vertical-align: middle; }
.zoom span { position: absolute; z-index: 2; width: 100%; padding: 10px; bottom: 0; left: 0; color: #fff; font-size: 24px; letter-spacing: 1px; background: rgba(0,0,0,.2); text-shadow: 0 3px 3px rgba(0,0,0,.9); }
.zoom a:hover img { transform: scale(1.1); }
.zoom .col-3 { padding-bottom: 20px; }
.zoom .col-3 span { font-size: 17px; }
.banner a { display: block; line-height: 150px; background: url(../img/tile_joc.png); margin: 24px 0; color: #fff; padding: 0 5%; text-align: right; font-size: 30px; letter-spacing: 1px; text-shadow: 0 2px 2px rgba(0,0,0,.5); text-decoration: none; }

/* map ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#map { width: 100%; height: 700px; border: 1px solid #eee; margin-bottom: 15px; }
.card { width: 350px !important; }
.card table { width: 100%; border-collapse: collapse; border-bottom: 1px solid #ccc; margin-bottom: 15px; }
.card td { font-size: 20px; padding-bottom: 10px; line-height: 1.2em; }
.card img { width: auto !important; height: 40px !important; float: right; margin-left: 10px; }
.card-body { height: auto !important; overflow: hidden !important; font-size: 13px; }

/* footer ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

footer { background: #222; box-shadow: inset 0 50px 0 #e5e5e5; border-top: 2px solid #ccc; margin-top: 50px; padding-top: 50px; }
footer nav { padding: 0 15px; }
footer nav > ul { padding-bottom: 20px; float: left; width: 33.33333%; }
footer li { font-size: 14px; margin: 32px 0 12px; }
footer a { color: #ccc; text-decoration: none; }
footer a:hover { color: #fff; }
footer ul ul { margin: 10px 0; }
footer li li { font-size: 12px; margin: 3px 0; }
footer li li a { color: #868686; }
footer p { clear: both; max-width: 1264px; margin: auto; border-top: 1px solid #3b3b3b; text-align: center; padding: 1em; font-size: 14px; color: #777; }

/* responsive --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	.col-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; width: 50%; margin-bottom: 10px; }
	.col-4, .col-7 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; margin-bottom: 15px; }
	.aside { border: none; float: none; padding: 30px 15px 0; border-top: 1px solid #eee; }
	body { font-size: 16px; }
	h1 { font-size: 25px; }
	h2 { font-size: 20px; }
	.btn { font-size: 18px; }
	header li { width: calc(50% - 20px); height: auto; font-size: 16px; }
	header li a { padding: 10px 15px; }
	header li ul { top: 15px; left: auto; right: 20px; width: calc(50% - 20px); border: 1px solid #ccc; border-bottom: none; padding: 0; }
	header li ul li { float: none; width: 100%; height: auto; border: none !important; border-bottom: 1px solid #ccc !important; }
	header li ul li a { padding: 10px 15px; }
	.slider, .motive { height: 320px; }
	.banner a { font-size: 24px; text-align: center; }
	#map { height: 450px; }
	.modal-video-body { max-width: 90%; }
	.modal-video-close-btn { right: -20px; }
	footer { margin-top: 35px; }
	footer nav { padding: 10px 0; }
	footer nav > ul { float: none; width: 100%; padding: 0; }
	footer nav > ul li,	footer ul ul { margin: 0; }
	footer nav a { padding: 15px 0; display: block; border-bottom: 1px solid #3b3b3b; font-size: 16px; }
	footer nav ul ul a { padding: 13px; }
	footer p { border: none; }
	select[size^="1"] { line-height: 20px; }
}

@media screen and (max-width: 500px) {
	.mobile-hidden { display: none; }
	.col-3, .col-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; margin-bottom: 15px; }
	.zoom .col-3 { padding-bottom: 0; }
	.banner a { font-size: 16px; }
	.btn { width: 100%; display: block; }
	header .lang { right: 10px; }
	header .social { right: 93px; }
}