@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300,400&subset=latin,latin-ext');
@import url('https://fonts.googleapis.com/css?family=Muli:300,400&subset=latin-ext');

a:link {text-decoration: none; color: #5b5b5b}

a:visited {text-decoration: none; color: #5b5b5b}

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html {
    width: 100%;
    overflow-y: scroll;
    //-webkit-box-sizing: border-box;
    //-moz-box-sizing: border-box;
    //box-sizing: border-box;
    
}

body {
    width: 100%;
    margin: 0;
    //background-image: url("tlo1.jpg");
    //background-size: 100% auto;
    font-family: 'Muli', 'Open Sans', sans-serif; 
    font-weight: 300;
    color: #5b5b5b;
    
}

#header {
    //overflow: auto;
    //display: table-row;
    width: 100%;
}

#logo {
    width: 16%;
    margin: auto;
    //float: left;
    //background-color: gray;
    //overflow: auto;
    //display: table-cell;
    vertical-align: bottom;
}

#logo img {
    //margin: 1%;
    width: 100%;
    display: block;
    //float: left;
}

#menu_spacer {
    //width: 30%;
    //display: table-cell;
    //float: none;
}

#menu_wrapper {
    //display: table-cell;
    //width: 50%;
    //vertical-align: bottom;
}

#menu {
    width: 50%;
    margin-top: 40px;
    margin-bottom: 40px;
    letter-spacing: 2px;
    margin-left: auto;
    margin-right: auto;
    //margin: 1%;
    //background-color: #EEEEEE;
    //margin: auto;
    //overflow: auto;
    //float: left;
    display: block;
    
    
}

#menu div {
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    //padding-left: 5%;
    //padding-right: 5%;
    //float: left;
    //display: table-cell;
    //vertical-align: bottom;
    text-align: center;
    float: left;
    //background-color: #EEEEEE;
    transition: ease all .5s;
}

#xmenu div:last-child {
    text-align: right;
}



#content {
    //overflow: auto;
    width: 100%;
    //max-width: 1200px;
    margin: auto;
    //background-color: gray;
}

#siatka {
    width: 100%;
}

.siatka_wiersz {
	width: 60%;
	margin: auto;
}

.projekt {
    width: 45%;
    //background-color: #5b5b5b;
    position: relative;
    float: left;
    margin-left: 3%;
    margin-bottom: 3%;
}

.projekt img {
    width: 100%;
    //margin-left: 1%;
    //margin-bottom: 1%;
    display: block;
    height: auto;
    transition: ease all .5s;
}

.projekt:hover .overlay {
  opacity: 1;
}

.slideshow {
    width: 100%;
    margin: 1%;
    margin-left: 0;
}

.slideshow img {
    width: 60%;
}


.projekty:first-child {
    float: left;
    margin: 1%;
    margin-left: 0%;
}

.projekty:last-child {
    float: left;
    margin: 1%;
    margin-right: 0%;
}

.projekty { 
    float: left;
    margin: 1%;
}

.projekty img {
    width: 100%;
    
}

#pokaz {
    //float: left;
    width: 60%;
    margin: auto;
    //margin-top: 1%;
}

#pokaz img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

#adres {
    width: 30%;
    margin: auto;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#kontakt_images {
	width: 50%;
	margin: auto;
	
}

#kontakt_images img {
	width: 47%;
	margin-left: 1%;
	margin-right: 1%;
}

#o_nas_content {
	width: 80%;
	margin: auto;
}
#o_nas_content img {
	width: 100%;
	margin: auto;
}	

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

@media screen and (max-width: 640px) {
    
    #menu div {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
        //padding-left: 5%;
        //padding-right: 5%;
        //float: left;
        //display: table-cell;
        //vertical-align: bottom;
        text-align: center;
        float: none;
        //background-color: #EEEEEE;
        transition: ease all .5s;
    }
    
    .projekt img {
        width: 100%;
        margin: auto;
        //margin-bottom: 1%;
        float: none;
        display: block;
    }
    
    #logo {
        width: 40%;
    }
    
    .projekt {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        //padding-left: 5%;
        //padding-right: 5%;
        //float: left;
        //display: table-cell;
        //vertical-align: bottom;
        text-align: center;
        float: none;
        //background-color: #EEEEEE;
    }
	
	#adres {
	//background-color: yellow;	
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	}

#pokaz {
    //float: left;
    width: 100%;
    margin: auto;
    //margin-top: 1%;
}

#pokaz img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

#o_nas_content {
	width: 100%;
	margin: auto;
}
#o_nas_content img {
	width: 100%;
	margin: auto;
}

#kontakt_images {
	width: 100%;
	margin: auto;
	
}

#kontakt_images img {
	width: 100%;
	margin: auto;
	//margin-left: 1%;
	//margin-right: 1%;
}

}

@media screen and (min-width: 640px) and (max-width: 1000px) {
    
    #menu div {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
        //padding-left: 5%;
        //padding-right: 5%;
        //float: left;
        //display: table-cell;
        //vertical-align: bottom;
        text-align: center;
        float: left;
        //background-color: #EEEEEE;
        transition: ease all .5s;
    }
    
    .projekt img {
        width: 100%;
        margin: auto;
        //margin-bottom: 1%;
        float: none;
        display: block;
    }
    
    #logo {
        width: 12%;
    }
    
    .projekt {
        width: 48.5%;
        margin-left: 1%;
        //margin-right: auto;
        margin-bottom: 1%;
        //padding-left: 5%;
        //padding-right: 5%;
        //float: left;
        //display: table-cell;
        //vertical-align: bottom;
        text-align: center;
        float: left;
        //background-color: #EEEEEE;
    }

	#adres {
	//background-color: green;	
    width: 30%;
    margin: auto;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	}
	
#pokaz {
    //float: left;
    width: 100%;
    margin: auto;
    //margin-top: 1%;
}

#pokaz img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

#o_nas_content {
	width: 100%;
	margin: auto;
}
#o_nas_content img {
	width: 100%;
	margin: auto;
}

#kontakt_images {
	width: 100%;
	margin: auto;
	
}

#kontakt_images img {
	width: 100%;
	//margin-left: 1%;
	//margin-right: 1%;
}
	
}