/* Reset.css */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
html {scroll-behavior: smooth;}


/*** General ***/
body {color: #fff;font-size: 18px;line-height: 25px;font-family: 'avenir_light';background: #000;margin-top: 20px;overflow-x: hidden;}

	/* Typography */
	a 		{color: #7e7e7e;text-decoration: none;}
	a:hover 	{color: #aaa;}
	a:active	{outline: none;}
	h1 		{font-size: 42px;font-weight:lighter;color: #7e7e7e;margin-bottom: 20px;padding: 40px 0;}
	
	/* Fonts */
	@font-face {
    font-family: 'avenir_light';
    src: url('../fonts/avenir-light.woff2') format('woff2'),
         url('../fonts/avenir-light.woff') format('woff'),
         url('../fonts/avenir-light.otf') format('otf');
    font-weight: normal;
    font-style: normal;
	}
	
	/* Structure */
	#wrapper 		{width: 100%;margin: 0 auto;background:#000;}
	#header 		{width: 100%;margin-top: 10px;} 
	#title			{margin: 0 auto;text-align: center;}
	#menu			{width: 100%;margin: 0 auto;text-align: center;margin-top: 30px;}
	#carousel		{width: 100%;margin: 0 auto;margin-top: 50px;}
	#main			{width: 100%;}
	#info			{margin-top: 30px;}
	#music			{margin-top: 30px;}
	#contacts		{margin-top: 30px;}
	#contentsx 		{width: 45%;float:left;padding: 3%;}
	#contentdx		{width: 45%;float:right;padding-right: 2%;}
	#footer			{width: 100%;float:left;padding: 2%;}


/*** Header ***/
#title a 		{max-width: 100%;margin: 0 auto;font-size:44px;}
#title a:hover 		{background: none;}


/*** Menu ***/
#menu ul 		{margin:0;padding:0;list-style: none;}
#menu li 		{display:inline;padding: 2%;}
#menu li a		{display:inline-block;}
#menu a 		{color: #7e7e7e; display: block;font-size: 20px;}
#menu a:hover 	{color:#aaa;}


/*** Carousel ***/
		/*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /*jssor slider bullet skin 057 css*/
        .jssorb057 .i {position:absolute;cursor:pointer;}
        .jssorb057 .i .b {fill:none;stroke:#fff;stroke-width:2000;stroke-miterlimit:10;stroke-opacity:0.4;}
        .jssorb057 .i:hover .b {stroke-opacity:.7;}
        .jssorb057 .iav .b {stroke-opacity: 1;}
        .jssorb057 .i.idn {opacity:.3;}

        /*jssor slider arrow skin 073 css*/
        .jssora073 {display:block;position:absolute;cursor:pointer;}
        .jssora073 .a {fill:#ddd;fill-opacity:.7;stroke:#000;stroke-width:160;stroke-miterlimit:10;stroke-opacity:.7;}
        .jssora073:hover {opacity:.8;}
        .jssora073.jssora073dn {opacity:.4;}
        .jssora073.jssora073ds {opacity:.3;pointer-events:none;}


/*** Main ***/
#contentdx img {width:100%;object-fit: cover;}
#contentsx img {max-width:100%;object-fit: cover;}

	/* Main */
	#gallery{
    text-align: center;
    width: 100%;
	}
	
	.image{
    display: inline-block;
    width: 45%;
    margin: 10px 1%;
	}
	
	.preview{
    width: 100%;
	}

/*** Contacts ***/

	/* Form */

	 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #7e7e7e;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #aaa;
}

/* Add a background color and some padding around the form */
.container {
  background-color: #f2f2f2;
  padding: 20px;
} 

/*** Footer ***/
.copyright			{text-align: center;font-size: 12px;}

/*** Misc ***/ 
.backtotop	{float:right;font-size: 12px;padding: 50px;}
.clear 		{clear: both;}
.alert {
  background-color: #fef9c7;
  border-color: #fcdd4a;
  color: #3b3601;
  border-radius: 0 5px 5px 0;
  padding: 10px 14px;
  margin:0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/*** Cookie ***/
	#policy	{padding: 20px;}