/*COMMON*/
body {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color:  #3c3c3c;
	background: #f2f2f2;
	margin: 0 auto;
}

/*-------------------------*/
.wrap:before,
.group:before,
.special:before,
.wrap:after,
.group:after,
.special:after {
	content:" ";
	display: table;
}

.wrap:after,
.group:after,
.special:after {
	clear: both;
}

.wrap,
.group,
.special {
	*zoom:  1;
}
/*-------------------------*/

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

.group li {
	float: left;
}

a {
	text-decoration: none;
}

.wrap {
	max-width: 1000px;
	min-width: 250px;
	margin: 0 auto;
}

.special {
	max-width: 900px;
	min-width: 250px;
	margin: 0 auto;
}

.fa,
.fas,
.far,
.fab {
	vertical-align: middle;
	text-align: center;}

/*HEADER*/
.top-bar {
	background: #303030;
	height: 65px;
}


/*CONECTIONS*/
.conections {
	float: right;
	margin-top: 9px;
	margin-right: 28px;
}

.conections a {
	color: #fff;
	font-size: 12px;
}

.conections li {
	margin-left: 20px;
	border-radius: 4px;
}

.conections .fas,
.conections .fab {
    color: white;
    font-size: 14px;
    margin: 4px;
    padding: 10px;
    border-radius: 4px;
	}

.conections .fa-facebook-f {
	padding: 10px 12px;
	}

.conections li:nth-child(1),
.conections li:nth-child(2) {
 	padding-left: 10px;
 	padding-right: 10px;
}

.conections li:nth-child(1):hover,
.conections li:nth-child(1):active,
.conections li:nth-child(2):hover,
.conections li:nth-child(2):active,
.conections .fab:hover,
.conections .fab:active {
 	background: #1c1c1c;
}


/*ATRIBUTES FOR NAV-BAR*/
.nav-bar {
	background: #fff;
	z-index: 1;
	height: auto;
}

/*LOGO*/
.logo {
	height: 170px;
	width: 170px;
	background: url('../img/Allodium-logo.svg') 0px 0px no-repeat;
	background-size: 170px auto;
	display: block;
    position: absolute;
    top: 5px;
    margin-left: 32px;
    z-index: 2;
}

.logo a {
	text-indent: -1000px;
	display: inline-block;
	width: inherit;
	height: inherit;

}

/*NAVIGATION*/
.navigation{
	float: right;
	margin: 4px 0px;
}

.navigation li {
    margin: 15px 7px 15px 7px;
}

.navigation .fas,
.navigation .far {
	display: block;
	padding-top: 9px;
}

.navigation a {
    color: #303030;
    background: #fff;
    display: block;
    width: 100px;
    height: 60px;
    text-align: center;
    font-size: 11px;
    line-height: 29px;
    text-transform: uppercase;
    z-index: 2;
}

.navigation li:nth-child(7) a { /*is seventh, because fb, insta and hamburger is first,second and third one – for javasript*/
	background: #fffbe7;
	border-radius: 4px;
}

.navigation a:hover,
.navigation a:active {
 	box-shadow: 0px 0px 10px #8c8c8c;
 	border-radius: 4px;
}

/*HAMBURGER AND SOCIAL ICONE FOR SMALEST RESOLUTIONS = DISPLAY NONE!!!!!!*/
.navigation li:nth-child(1),
.navigation li:nth-child(2),
.navigation li:nth-child(3) {
	display: none;
}

/*MAIN PICTURE*/
.main-picture {
	background: url('../img/background_allod.jpg') 39% 50% no-repeat;
    background-size: auto 1000px;
    width: auto;
    height: 150px;
}


/*MAIN*/
/* Slideshow container */
.slideshow-container {
  max-width: 560px;
  position: relative;
  margin: 70px auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/*PICTURE*/
.mySlides img {
	width: 100%;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    float: left;
    position: absolute;
    top: 0;
    width: auto;
    height: 100%;
    padding: 0% 25px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
	float: right;
	right: 0;
		border-radius: 3px 0 0 3px;
	}

.prev p,
.next p {
    position: absolute;
    top: 40%;
    font-size: 30px;
    text-align: center;
}

.prev p {
	left: 28%;
}

.next p {
	right: 28%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background: #fff;
 	background: #ffffff59;
}

/*PREFOOTER*/
.pre-footer1 {
	color: white;
	background: #303030;
	}

.basic_ending {
	max-width: 800px;
	margin: 30px auto;
	}

.contact_again,
.support,
.map {
 	display: block;
	margin: 0px 0px;
	}

.contact_again {
	float: left;
	width: 38%;
	}

.support,
.map {
	width: 56.3%;
	float: right;
	}

.map {
	margin-top: 20px;
	}

.map iframe {
	width: 100%;
	height: 170px;
	margin: 0 auto;
}

.contact_again h6 {
	text-transform: none;
	font-size: 18px;
	line-height: 26px;
	margin-top: 10px;
	font-weight: 300;
	text-align: center;
}

.contact_again small {
	font-size: 65%;
}
.contact_again ul {
	margin-top: -14px;
}

.contact_again a {
	color: #fff;
}

.contact_again p {
	color: #fff;
	font-size: 12px;
	line-height: 14px;
}

.contact_again li {
	float: none;
	padding: 1px 5px;
    text-align: center;
    width: 227px;
    margin: 0 auto;
}

.content_conta_again li:hover:not(:last-child),
.content_conta_again li:active:not(:last-child) {
		background: #1c1c1c;
		border-radius: 4px;
}

.contact_again .fas,
.contact_again .fab {
	font-size: 15px;
	padding: 0px 5px;
	margin: 2px;
}

.dent_bro {
    display: block;
    float: left;
    width: 43%;
}

.two_persent {
	position: relative;
	display: block;
	float: right;
	width: 40%;
}

.support_img {
	width: 100%;
	padding: 5px;
	height: auto;
}

.two_text {
	position: absolute;
    right: 3px;
    bottom: -6px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    font-family: 'Pangolin', cursive, sans-serif;
    text-transform: uppercase;
}

/*COPYRIGHT*/

.copyright {
	height: 40px;
}

.copyright p {
	display: block;
	float: right;
	margin-top: 10px;
	margin-right: 25px;
}

/*--------------------RESPONSIVE FOR HEADER – CONCECTION, NAVIGATION AND MAIN PICTURE----------------------*/
@media screen and (max-width: 800px) {
						.main-picture {
					    	background-size: auto 800px;
						}
}


@media screen and (min-width: 600px) and (max-width: 800px) {
					/*CONCENTION*/
					.conections {
					    float: none;
					    margin: 10px auto;
					    display: block;
					    width: 590px;
						}

					.conections li {
					    margin-left: 18px;
						}

					/*NAVIGATION*/
					.navigation {
					    float: none;
					    margin: 4px auto;
					    width: 590px;
						}

					.navigation li {
					    margin: 15px 0px 15px 22px;
						}

					.navigation a {
					    width: 90px;
					    height: 60px;
						}

					/*LOGO*/
					.logo {
					    top: 143px;
					    width: 115px;
					    height: 115px;
					    margin-left: 12px;
					    background-size: 115px auto;
					}

} /*END OF 600 – 800PX*/


@media screen and (max-width: 600px) {
					/*TOP BAR*/
					 .top-bar {
						height: 65px;
					}

					 /*CONECTION*/
					.conections {
					    float: none;
					    margin: 5px auto;
					    padding: 0px;
					    width: 360px;
					}

					.conections li {
					    margin: 7px 4px;
					    float: left;
					    display: block;
					    padding: 10px 6px;
					}

					.conections a {
						color: #fff;
						font-size: 12px;
					}

					.conections .fas, .conections .fab {
							font-size: 12px;
							margin: 2px;
					    	padding: 3px;
					}

					.conections li:nth-child(3),
					.conections li:nth-child(4) {
					 	display: none;
					}

					/*LOGO*/
					.logo {
					    top: -10px;
					    margin-left: 10px;
					    width: 110px;
					    height: 110px;
					    background-size: 110px auto;
					}

					/*NAVIGATION*/
					.nav-bar {
						position: relative;
						width: auto;
					}

					/*NAVIGATION + HAMBURGER*/
					.navigation {
					    float: none;
					    display: block;
					    margin: 5px auto;
					}

					.navigation li:nth-child(1),
					.navigation li:nth-child(2),
					.navigation li:nth-child(3) {
						display: block;
						float: left;
						margin: 5px 10px;
					}

					.navigation li:nth-child(1) {
						margin-left: 40%;
					}

					.navigation li:nth-child(3) {
						position: absolute;
						right: 20px;
						top: 5px;
					}


					.navigation li:nth-child(n + 4) {
						display: none;
					}

					.navigation a {
					    color: #303030;
					    background: #fff;
					    display: block;
					    width: 48px;
					    height: 44px;
					    text-align: center;
					    line-height: 43px;
					    text-transform: uppercase;
					    z-index: 2;
					}

					.navigation.responsive {
						float: none;
					    display: block;
					    margin: 5px auto;
						z-index: 4;
					}

					.navigation.responsive li:nth-child(1),
					.navigation.responsive li:nth-child(2),
					.navigation.responsive li:nth-child(3) {
						display: block;
						margin: 5px 10px;
					}

					.navigation.responsive li:nth-child(1) {
						margin-left: 40%;
					}

					.navigation.responsive li:nth-child(3) {
						position: absolute;
						right: 20px;
						top: 5px;
					}

					.navigation.responsive li:nth-child(n + 4) {
						position: absolute;
						right: -8px;
						float: none;
						display: block;
					    border-radius: 0px;
					    z-index: 4;
					}

					/*POSITION OF HAMBURGERS ELEMENTS*/
					.navigation.responsive li:nth-child(4) {
						top: 49px;
					}
					.navigation.responsive li:nth-child(5) {
						top: 93px;
					}
					.navigation.responsive li:nth-child(6) {
						top: 136px;
					}
					.navigation.responsive li:nth-child(7) {
						top: 179px;
					}
					.navigation.responsive li:nth-child(8) {
						top: 222px;
					}

					.navigation.responsive .fas,
					.navigation.responsive .far {
						display: none;
					}

					.navigation.responsive a {
					    color: #303030;
					    background: #fff;
					    display: block;
					    width: 48px;
					    height: 44px;
					    text-align: center;
					    line-height: 43px;
					    text-transform: uppercase;
					    z-index: 2;
					}

					.navigation.responsive li:nth-child(n + 4) a {
					    color: #303030;
					    background: #fff;
					    font-weight: 400;
					    display: block;
					    width: 177px;
					    height: 44px;
					    text-align: center;
					    line-height: 43px;
					    border-radius: 0px;
					    text-transform: uppercase;
					    z-index: 2;
					}

					.navigation.responsive li:nth-child(7) a {
						background: #fffbe7;
						color: #ff4f0e;
					}

					.navigation.responsive a:hover,
					.navigation.responsive a:active {
					 	box-shadow: 0px 0px 10px #8c8c8c;
					 	border-radius: 0px;
					}

} /*END OF 250 – 600PX*/


@media screen and (max-width: 400px) {
					/*TOP BAR*/
					.top-bar {
				 		height: 95px;}

					/*CONECTION*/
					 .conections {
					 	float: left;
					 	margin: 3px 0px;
					 	padding: 0px;
					 	width: auto;
					 }

					.conections li {
						margin: 4px 10px;
						display: inline-block;
						float: none;
						padding: 6px;
						border-radius: 4px;
					}

					.conections .fas,
					.conections .fab {
					    font-size: 12px;
					    margin: 2px;
					    padding: 4px;
					}

					.main-picture {
					    background: url('../img/background_allod.jpg') 39% 50% no-repeat;
					    background-size: auto 500px;
					    width: auto;
					    height: 150px;
					}
}/*END OF 250 – 400PX*/

@media screen and (max-width: 330px){
						/*LOGO*/
						.logo {
						    top: 70px;
						    margin-left: 10px;
						    width: 110px;
						    height: 110px;
						    background-size: 100px auto;
						}

						/*NAVIGATION*/
						.navigation li:nth-child(1) {
						    margin-left: 5%;
						}

						.navigation.responsive li:nth-child(1) {
						    margin-left: 5%;
						}

}/*END OF 250 – 330PX*/
/*----------------------END RESPONSIVE FOR HEADER – CONCECTION, NAVIGATION AND MAIN PICTURE-------------------*/

/*-----------------------------RESPONSIVE FOR PREFOOTER------------------------------*/
@media screen and (max-width: 850px) {

						.basic_ending {
						    max-width: 550px;
						    margin: 25px auto;
						    padding: 0px 34px;
						}

						.contact_again {
						    width: auto;
						}

						.support {
						    width: 35.3%;
						}

						.support_img {
						    width: 100%;
						    height: auto;
						}

						.dent_bro,
						.two_persent {
						    display: block;
						    float: none;
						    width: 100%;
						    margin-top: 10px;
						}

						.two_persent {
							margin-top: 27%;
						}

						.map {
							   float: left;
							   width: 100%;
							   margin: 30px auto;
						}

}

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

						.contact_again {
						    width: 100%;
						}

						.contact_again ul {
						    margin: -14px auto 0px auto;
						}

						.contact_again li {
						    float: none;
						    padding: 1px;
						    text-align: center;
						    width: 250px;
						    margin: 0 auto;
						}

						.support {
						    width: 100%;
						    float: left;
						    margin-top: 40px;
						}

						.dent_bro, .two_persent {
						    display: block;
						    float: left;
						    width: 41%;
						    margin-top: 0px;
						}

						.two_persent {
							margin-left: 18%;
						}

}

@media screen and (max-width: 520px) {
						.dent_bro, .two_persent {
						    display: block;
						    float: left;
						    width: 48%;
						    margin-top: 0px;
						}

						.two_persent {
						    margin-left: 4%;
						}
}

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

						.two_persent {
							margin-left: 0px;
						}

						.dent_bro, .two_persent {
					    display: block;
					    float: none;
					    width: 60%;
					    margin-top: 0px;
					    margin: 14px auto;
					}

					.two_text {
						font-size: 12px;
					}

}

@media screen and (min-width: 0px) and (max-width: 350px) {
						.contact_again i {
							display: none;
						}

						.contact_again li {
							float: none;
							padding: 1px;
							text-align: center;
							width: 181px;
							margin: 0 auto;
						}

						.dent_bro, .two_persent {
						    display: block;
						    float: none;
						    width: 100%;
						    margin-top: 0px;
						    margin: 14px auto;
						}

						.contact_again p {
						    font-size: 10px;
						}
}
/*-----------------------------END RESPONSIVE FOR PREFOOTER------------------------------*/