* { box-sizing: border-box; font-family: "Open Sans", Arial, Helvetica, sans-serif; }
body { width: 100%; margin: 0; }
ul, li { margin: 0; }
a { text-decoration: none !important; }
h1, h2, h3, h4, h5, h6 { text-align: center; }

.margin-top-80 { margin-top: 80px; }
.center { text-align: center; }
.lowercase { text-transform: lowercase; }

/* MENU GÓRNE */

header {
	width: 100%;
	height: 80px;
	background-color: #282828;
	position: fixed;
	top: 0;
	z-index: 10000;
}

header > .header {
	width: 1080px;
	height: 80px;
	margin: 0 auto;
}

.header > .logo {
	float: left;
	width: 200px;
	height: 80px;
}

.logo > a > img {
	width: 300px !important;
	margin-top: 10px;
}

.header > nav {
	float: right;
	max-width: 800px;
}

nav > ul, nav li {
	list-style: none;
}

nav > ul {
	position: relative;
	width: auto;
	height: 80px;
}

#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    float: right;
    margin-right: 15px;
    position: relative;
    width: auto;
    height: 80px;
}

#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #7d7a78;
    display: block;
    font-size: 1em;
    line-height: 80px;
    padding: 0 15px;
    text-transform: uppercase;
}

#nav > li > .active {
	color: white;
	background-color: #7d7a78;
}

#nav > li:hover > a, #nav > a:hover {
    background-color: #7d7a78;
    color: #FFF;
}
#nav li.active > a {
    background-color: #7d7a78;
    color: #FFF;
}
/* submenu */

#nav ul li a:hover {
    color: #F55856;
}

.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #000;
    text-align: right;
    padding: 0 20px;
    display: none;
    height: 80px;
    line-height: 80px;
    font-size: 2.5em;
}

/*Hide checkbox*/
input[type=checkbox].showmenu {
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox].showmenu:checked ~ #nav{
    display: block;
}

.header li {
	float: left;
	text-align: left;
	-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
}

.header li:hover {
	background-color: #7d7a78;
}

.header li:hover a {
	color: #282828;
}

.header a {
	color: #7d7a78;
	display: block;
	font-size: 1em;
	font-weight: 400;
	line-height: 80px;
	padding: 0 15px;
	text-transform: uppercase;
	-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}

/* PAGE */

section {
	padding: 30px 0;
}

section.section1 {
	width: 100%;
	min-height: 300px;
	background-color: white;
}

section.section2 {
	width: 100%;
	min-height: 300px;
	background-color: #f7f8f9;
}

.content {
	width: 1080px;
	margin: 0 auto;
}

h1.title {
	margin: 50px 0 50px 0;
	color: #747474;
	text-align: center;
	font-size: 25px;
	text-transform: uppercase;
}

h1.title:before, h1.title:after {
	background-color: #747474;
	content: "";
	display: inline-block;
	height: 2px;
	position: relative;
	vertical-align: middle;
}

h1.title:before {
	right: 0.3em;
	width: 100px;
}

h1.title:after {
	left: 0.3em;
	width: 100px;
}

.my-container {
	display: table;
}

.about-image {
	max-width: 500px;
	float: left;
}

.about-image > img {
	width: 100%;
}

.about-description {
	max-width: 500px;
	padding: 0 25px;
	float: right;
}

.offer, .heater-image, .contact-left {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.offer-card {
	width: 500px;
	height: 440px; 
	margin: 10px;
	border: 1px solid black;
	background-color: white;
}

.offer-img {
	height: 400px;
	overflow: hidden;
}

.offer-img > img {
	width: 100%;
}

.offer-name {
	font-weight: bold;
	font-size: 25px;
	text-align: center;
}

.offer a.offer-url {
	color: black;
	-moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.offer > a.offer-url:hover {
	transform: scale(1.1);
}

.model-offer > tbody > tr > td:first-child {
	width: 110px;
	text-align: left;
}

.model-offer td, .model-offer th {
	text-align: center;
}

.h-image {
	width: 400px;
	margin: 5px;
}

.h-image-2 {
	width: 100%;
}

.h-image > img,  .h-image-2 > img {
	width: 100%;
	margin: 5px;
}

.color-info {
	text-align: center;
	margin: 30px 0;
}

ul.my-nav {
	margin-top: 100px !important;
}

.nav-tabs > li > a {
	color: #7d7a78 !important;
}

.nav-tabs {
	text-align: center;
}

.contact-left, .contact-right {
	width: 100%;
	float: left;
	padding: 10px;
}

.contact-card {
	width: 350px;
	height: 200px;
	margin: 5px 0;
	text-align: center;
	text-transform: uppercase;
}

.big-icon {
	font-size: 37px;
	color: #7d7a78;
	margin-bottom: 20px;
}

.contact-right > iframe {
	width: 100%;
	height: 450px;
} 

.small-card {
	width: 250px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 5px;
	border: 1px solid black;
	float: left;
	background: linear-gradient(108deg, #212529 70%, transparent 40%);
	font-weight: bold;
}

.small-card-url{
	color: #7d7a78;
}

.small-card-url:hover {
	color: white;
	background-color: #7d7a78;
}

.offer > .active {
	color: white;
	background-color: #7d7a78;
}

.slideshow {

}

.slideshow-images {
	max-width: 1080px; 
	max-height: 550px;
	overflow: hidden;
	margin: auto;
}

.slideshow-img {
	display: none;
	width: 100%;
	animation: fading 7s infinite;
}
@keyframes fading{ 0%{opacity: 0} 25%{opacity: 1} 75%{opacity: 1} 100%{opacity: 0;} }

/* RESPONSIVE */

@media screen and (max-width: 1200px) {
	
	.header { 
		width: 100% !important; 
	}

	nav {
		position: absolute;
		right: 0;
	}

	#nav {
    	width: 100%;
    	margin: auto;
    	top: -8px;
    }

	#nav > li {
		-webkit-box-shadow: -3px 0px 5px -1px rgba(0,0,0,0.75);
		-moz-box-shadow: -3px 0px 5px -1px rgba(0,0,0,0.75);
		box-shadow: -3px 0px 5px -1px rgba(0,0,0,0.75);
	}

    #nav > li > a {
    	line-height: 50px;
    }

	#nav li:hover ul.subs {
	    display: block;
	}
	#nav ul.subs > li {
	    display: inline-block;
	    float: none;
	    padding: 10px 1%;
	    vertical-align: top;
	    width: 100%;
	}

	#nav ul li a:hover {
	    color: #F55856;
	}

	ul {
        position: static;
        display: none;
        background: white;
    }

    ul ul {
    	display: block;
    }

    li {
        margin-bottom: 1px;
        background: white;
    }

    ul li, li a {
        width: 100%;
    }

    .show-menu {
        display: block;
        width: 80px;
        float: right;
    }

	.content {
		width: 100%;
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	.my-container {
		width: 100% !important;
		margin: 0 auto;
		position: relative;
		float: center;
	} 

	.contact-right {
		float: none;
		padding: 0;
	}

	.contact-left {
		float: none;
	}

	.about-image {
		width: 100%;
		margin: 0 auto;
		float: none;
	}

	.about-description {
		width: 100%;
		margin: 0 auto;
		float: none;
		text-align: center;
		padding: 10px;
	}

	.rimage {
		width: 100%;
	}

	.r-table {
		overflow: scroll;
	}

	.table {
		width: 1080px;
	}

	.logo {
		width: 200px;
	}

	.logo > a > img {
		width: 100% !important;
	}

	.offer-card {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 5px 5px;
	}

	.offer-img {
		width: 100%;
		max-height: 300px;
	}

	.offer > a.offer-url:hover {
		transform: scale(1);
	}

	h1.title:before {
		right: 0em;
		width: 0;
	}

	h1.title:after {
		left: 0em;
		width: 0;
	}

	ul.display {
		display: block;
		text-align: left;
	}

	.color-info img {
		width: 100%;
	}
}

@media screen and (max-width: 800px) {
	.offer-card {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 5px 0;
	}
}