/*@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; }
h1, h2 { border-bottom: 1px solid #eee; padding-bottom: 13px; margin: 25px 0; line-height: 1.25; font-weight: 500; }
h1 { font-size: 32px; }
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 ul li, .text ul li { list-style: none; margin-bottom: 15px; padding-left: 38px; position: relative; }
.aside ol li, .text ol li { margin-bottom: 15px; position: relative; }
.aside ul li:before { font-family: "FontAwesome"; position: absolute; top: 0; }
.aside ul li:nth-child(1):before { content: "\f007"; left: 7px; }
.aside ul li:nth-child(2):before { content: "\f017"; left: 6px; }
.aside ul li:nth-child(3):before { content: "\f0c0"; left: 5px; }
.text ul li:after { display: block; content: ""; width: 6px; height: 6px; background: black; position: absolute; top: 9px; left: 8px; }
.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: 10px 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], input[type=file] { 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; list-style: none; }
header li:hover { background: #555; }
header li a { position: relative; display: table-cell; padding: 0 15px; text-decoration: none; color: #fff; vertical-align: middle; cursor: pointer; }
header li a:hover { text-decoration: none; }
header li ul { display: none; position: absolute; top: 0; left: 25.5%; width: 74.25%; z-index: 2; }
header li ul li { float: left; width: 30%; 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 .social { position: absolute; top: 7px; right: 8px; }
header .social i { margin-right: 3px; font-size: 30px; color: #b7a6cb; }
header .social i:hover { color: #e4dfea; }
.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: #ccc; }
.breadcrumb > li + li::before { content: "\f0da"; font-family: "FontAwesome"; padding: 0 8px 0 5px; color: #ccc; 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); }
@keyframes xfade{ 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } }

/* 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; }

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

footer ul { margin: 0; padding: 0; border: none; box-sizing: border-box; }
footer { background: #222; border-top: 51px solid #e5e5e5; margin-top: 50px; box-shadow: 0 -1px 0 1px #ccc; }
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; list-style: none; }
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; }
	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; }
}