* {
    box-sizing: border-box;
    font-family: 'Montserrat';
}

html,body{
	margin:0;
	padding:0;
}

body {
	width: 100%;
	min-height:100vh;

	position:relative;
  
	background: white;
	background-size: 100%;
	font-family: 'Montserrat';
	color: #000;
	font-size: 150%;
	margin: auto;
	overflow: auto;
}

header {
	grid-area: header;
	text-align: center;
	margin-top: 2.5vw;
	margin-bottom: 1vh;

	display: grid;
	grid-template-rows: 1.3fr 1fr;
	justify-content: center;
}

.framebar {
	background-color: black;
	color: white;
	width: 100%;
	padding: .5em;
}

#topbar {
	text-align: left;
	line-height: 0;
	/*position: -webkit-fixed;
	position: fixed;
	top: 0;
	z-index: 1;*/
}

#fb {
	font-size: 1.2em;
	color: white;
	margin: 0 .2em 0 .5em;
}

#inst {
	font-size: 1.2em;
	color: white;
	margin: 0 .2em 0 .5em;
}

#topcontact {
	display: inline-block;
	float: right;
	position: relative;
	text-align: right;
	margin-right: 10vw;
	margin-top: .1em;
	color: white;
}

#topcontact a:link {
	color: white;
}

#topcontact a:visited {
	color: white;
}

#topcontact a:hover {
	color: #cf0030;
}

#topcontact a:active {
	color: #cf0030;
}

.flag {
	width: auto;
	height: 1em;
	display: inline-block;
	float: right;
	position: relative;
	margin: .1em;
}

#bottombar {
	text-align: center;
	font-size: 0.8em;
}

.home-button {
	width: auto;
}

.logo {
	vertical-align: bottom;
	height: 7.5vw;
	width: auto;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	display: inline-block;
	min-width: 62px;
	min-height: 45px;
}

.name {
	height: 5.15vw;
	margin: auto auto 0 auto;
	display: inline-block;
	font-size: calc(15px + 1.8vw);
	max-width: 640px;
	width: 100vw;
	min-height: 30px;
	min-width: 210px;

}

nav {
	width: 100%;
	background-color: white;
	border-top: #CF0030 solid 1px;
	border-bottom: #CF0030 solid 2px;
	box-shadow: 0px 7px 8px 0px rgba(0,0,0,0.2);

	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;

	display: flex;
	justify-content: center;
	text-align: center;
}

.navi {
}

.navi a {
	display: inline-block;
	padding: .8em;
	font-size: 1.1em;
	color: black;
	text-decoration: none;
	line-height: 1.3em;
	text-align: center;
	float: left;
}
.navi a:hover {
    background-color: #ddd;
    color: black;
}

.navi .menu {
  display: none;
}

.logomini {
	height: 1.25em;
	width: auto;
	margin: auto;
	display: block;
}

article {
	background-color: rgb(250, 250, 250, 0.95);
	width: 100%;
}

.pic {
    width: 100%; 
    max-width: 1280px;
}
.container {
	width: 100%;
	max-width: 1280px;
	padding: 0;
}

.carousel {
	width: 100%;
}

 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
  }

.description {
	padding: 1vw 12vw 1vw 12vw;
	max-width: 1280px;
	margin: auto;
	display: block;
}

.error {
	padding: 5vw 12vw 10vw 12vw;
	max-width: 1280px;
	margin: auto;
	display: block;
	text-align: center;
}

.error a:link {
	color: black;
	text-decoration: underline;
}

.error a:visited {
	color: black;
}

.error a:hover {
	color: #cf0030;
}

.error a:active {
	color: #cf0030;
}

/* Style the tab */
.cat {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.cat button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1vw;
  transition: 0.3s;
  font-size: 17px;
  width: 20%;
  text-align: center;
  height: 5em;
}

/* Change background color of buttons on hover */
.cat button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.cat button.active {
  background-color: #ccc;
}

/* Style the tab content */
.catcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.catimg {
	margin: 3%;
	width: 94%;
}

.text {
	padding: 1vw 5vw 1vw 5vw;
	text-align: justify;
	text-justify: inter-character;
}

#rebuild {
	background-color:rgb(254, 254, 254);
	color: rgb(20, 20, 20);
	padding: 3px;
	font-size: .8em;
	text-align: center;
	line-height: 1.7em;
	background: linear-gradient(to right, red, black);
	margin: 1vw 20vw 1vw 20vw;
	width: 60%;
	position: fixed;
	bottom: 2vw;
	z-index: 30;
	box-shadow: 4px 4px 16px 0px rgba(0,0,0,0.2);
}

#promo {
	background-color:rgb(254, 254, 254);
	color: rgb(20, 20, 20);
	padding: 3px;
	font-size: .8em;
	text-align: center;
	line-height: 1.7em;
	background: linear-gradient(to right, red, black);
	margin: 1vw 20vw 1vw 20vw;
	width: 60%;
	position: fixed;
	top: 16vw;
	z-index: 30;
	box-shadow: 4px 4px 16px 0px rgba(0,0,0,0.2);
	transition: 1s;
}

#promo a{
	color: white;
	text-align: center;
	position: absolute;
	top: 90%; left: 50%;
	transform: translate(-50%, -50%);
}

.closebtn {
	padding: 0 0.3 0 0.3em;
	margin-top: 0.2em;
	color: #8C0003;
	font-weight: bold;
	font-size: 1em;
	line-height: 1.3em;

	background: white;
	cursor: pointer;
	transition: 0.3s;
	border-radius: 3px;
	border: 1px solid #8C0003;
}

.closebtn:hover {
	color: white;
	background-color: #8C0003;
}

#cls{
	font-style: black bold;
	text-align: center;
	position: absolute;
	top: 5%; left: 97%;
	transform: translate(-50%, -50%);
}

.pptext {
	width: 90%;
	margin: auto;
}
.pptext p {
	text-align: justify;
}

.pptext a {
	color: red;
}

.pptext h4 {
	text-align: center;
	line-height: 1.6;
}

aside {
	box-shadow: -4px 4px 16px 0px rgba(0,0,0,0.2);
}

.realizacjemini {
	padding-bottom: 2vh;
}

footer {
	grid-area: footer;
	background: black;
	color: white;
	min-height: 160px;
	min-width: 260px;
	justify-content: center;
}

.adress {
	display: inline-block;
	bottom:0;
	left:0;
	text-align: left;
	overflow: auto;
	line-height: 1.3em;
}

.adress p{
	padding: 0em;
	margin: 0.1em;
	font-size: 0.9em;
}

#ad {
	font-variant: small-caps;
	font-size: 125%;
	margin: 0 0 0.5em 0;
}
 
.smedia {
	display: inline-block;
}

.smedia a:link {
	color: white;
}

.smedia a:visited {
	color: white;
}

.smedia a:hover {
	color: #cf0030;
}

.smedia a:active {
	color: #cf0030;
}

.map {
	display: inline-block;
	padding: 1vw;
}

.map iframe{
	min-height: 170px;
	min-width: 220px;
	width: 25vw;
	height: 15vw;
	margin: 0;
	position: relative;
}

.bigadress {
	text-align: center;
	font-size: 150%;
	padding: 0.1em;
	margin: 1em;
}

.bigadress p{
	padding: 0em;
	margin: 0.1em;
}

.bigmap {
	display: flex;
	justify-content: center;
	margin: 2em;
}

.bigmap iframe{
	min-height: 300px;
	min-width: 500px;
	width: 50vw;
	height: 30vw;
}

#real {
	text-align: center; 
	line-height: 3em; 
 }

.pic2 {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

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

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown-info {
	display: none;
	padding: 1em;
	background-color: #f9f9f9;
	width: 100%;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.inf {
	width: 100%;
	padding: .2em;
	text-align: left;
}

.dropdown:hover ~ .dropdown-info {
	display: block;
	position: relative;
	float: left;
}

.desc {
	padding: 15px;
	text-align: center;
	font-size: calc(12px + .3vw);
	height: 4em;
}

.col-1 {width: 100%;}
.col-2 {width: 50%;}
.col-3 {width: 33.33%; max-width: 425px;}
.col-4 {width: 25%;}
.col-5 {width: 20%;}
.col-6 {width: 16.6%;}

.row {
	width: 80%;
	padding: 0px;
	margin: auto;
}

.row::after {
	content: "";
	clear: both;
	display: flex;
	position: relative;
}

[class*="col-"] {
	float: left;
	padding: 2vw;
	text-align: center;
}

.bigadress a:link {
	color: black;
}

.bigadress a:visited {
	color: black;
}

.bigadress a:hover {
	color: #cf0030;
}

.bigadress a:active {
	color: #cf0030;
}

.adress a:link {
	color: white;
}

.adress a:visited {
	color: white;
}

.adress a:hover {
	color: #cf0030;
}

.adress a:active {
	color: #cf0030;
}



@media only screen and (max-width: 768px) {
	/* For mobile phones: */
	[class*="col-"] {width: 100%;}

	footer {text-align: center;}

	.bigmap iframe {
  	min-width: 0px;
  	width: 85vw;
	}

	.navi {
  	width: 100%;
  	position: relative;
	}
	.navi .menu {
    position: absolute;
    right: 0;
    top: 0;
	}

	.navi a:not(:first-child) {display: none;}
	.navi a.menu {
		display: block;
	}

	.navi.responsive {
  	position: relative;
  	width: 100%;
	}

	.navi.responsive .menu {
    position: absolute;
    right: 0;
    top: 0;
	}
	.navi.responsive a {
    float: none;
    display: block;
		text-align: center;
		padding: .5em;
	}
	
	.navi a {
		padding-top: .5em;
		padding-bottom: .5em;
		padding-left: 1em;
		padding-right: 1em;
	}

	#rebuild {
  		margin: 0 4vw 1vw 2vw;
  		width: 94vw;
	}

	#promo {
  		margin: 0 4vw 1vw 2vw;
  		width: 94vw;
	}

	#real {
		text-align: center;
		font-size: 1.6em; 
		line-height: 1.1em; 
	}

	.pic2 {
		width: 80%
	}

	.dropdown {
		width: 90%;
	}

	.inf {
		width: 100%;
	}

	.dropdown:hover .dropdown-info {
		display: block;
		position: relative;
	}
	.dropdown:hover .dropdown-content {
		display: none;
	}

	.cat button {
		width: 50%;
	}
	.realizacjemini {
		display: none;
	}
}

@media only screen and (min-width: 1281px) {
	.col-1 {width: 100%;}
	.col-2 {width: 576px; padding: 0px; margin: 32px;}
	.col-3 {width: 100%;}
	.col-4 {width: 262px; padding: 0px; margin: 29px;}
	.col-5 {width: 200px; padding: 0px; margin: 28px;}

	.logo {height: 96px;}
	.home-button {height: 96px;}
	.name {height: 64px; font-size: 2.8em;}

	footer {width: 100%;}

	.row {
		width: 1280px;
		margin: auto;
	}

	.map iframe {
		max-width: 320px;
		max-height: 195px;
	}
}