html, body { background-color: #fff; margin: 0 !important; font-family: 'Quicksand', sans-serif; font-size: 18px; color: #404040;}




/* ------------------------------------- correct font -----------------------------------------*/
@font-face {
    font-family: 'quicksandbold';
    src: url('quicksand-bold-webfont.woff2') format('woff2'),
         url('quicksand-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'quicksandlight';
    src: url('quicksand-light-webfont.woff2') format('woff2'),
         url('quicksand-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'quicksandmedium';
    src: url('quicksand-medium-webfont.woff2') format('woff2'),
         url('quicksand-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'quicksandregular';
    src: url('quicksand-regular-webfont.woff2') format('woff2'),
         url('quicksand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* ------------------------------------- correct font -----------------------------------------*/

a {text-decoration: none; } /* link w tekście normalnym */
a:hover {color: red;}


/* ---------------- nawigacja ruchoma przypięta -----------*/
nav {	
	background: none;
	position: fixed;
	top: 0px;
	width: 100%;
	transition-timing-function: linear;
	transition-duration: 200ms;
	transition-property: all;
	z-index: 100;
}

nav.small { background: #fff; border-bottom: 1px solid #ccc; }

nav.small a {
	border: 0px solid red;
 	padding: 0px 0px 0px 0px;
 	font-size: 15px;
	font-weight: 500;
	color: #777;
}

nav.small a:hover { color: #00dcc0; }

nav.small img {
	height: 70px;
	float: left;
}



nav ul {
	list-style: none;
}

nav ul li {
	border: 0px solid red;	
	display: inline-block;	
	padding: 10px 0px 5px 0px;
	margin: 0px 4px;	
	text-align: right;
}

nav a {
	text-decoration: none;
	color: #333;
	text-transform: uppercase;
	font-weight: 900;
	display: block;
	padding: 20px 10px 5px 10px;
	transition-timing-function: cubic-bezier(.08,.61,.79,1.75);
	transition-duration: 300ms;
	transition-property: all;
}

nav a:hover { 
	color: #00dcc0; 
}

nav img { 
	height: 120px; 
	transition-timing-function: cubic-bezier(.08,.61,.79,1.75);
	transition-duration: 300ms;
	transition-property: all;
}

label.hamburger {
    margin: 0 40px 0 0;
    font-size: 35px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
}

#toggle { display: none; }

.menu { border: 0px solid orange;  text-align: right; max-width: 68%; float: right; padding-right: 10px}


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

		nav { background: white; }
		nav.small img { height: 120px; }
		nav.small {border-bottom: 0px solid #ccc;}

		label.hamburger {
	        display: block;
	        border: 0px solid red;
	        cursor: pointer;
	        font-family: 'Quicksand', sans-serif; 
	        color: #404040; 
	        font-size: 56px; font-weight: 700; 
	        margin-top: 30px;
	        margin-right: 60px;
	    }
	    .menu {
	        text-align: right;
	        max-width: 50%;
	        display: none;
	        background-color: white;
	        margin-top: 120px;
	        margin-right: -80px;
	    }

		nav.small {background: #fff; }

	    nav.small a, .menu a {
	        display: block;
	        font-size: 35px;
	        border-bottom: 0px solid #000;
	        margin-top: -30px;
	        background-color: #fff;
	        margin-left: 30px;
	        padding-bottom: 20px;
	        color: #444;
	    }

	    #toggle:checked + .menu { display: block; }

	    nav ul li {
			border: 0px solid red;	
			display: inline-block;	
			padding: 10px 00px 5px 10px;
			margin: 0px 10px;
		}
 }

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

 		nav.small a, .menu a {
	        display: block;
	        font-size: 42px;
	        border-bottom: 0px solid #000;
	        margin-top: -30px;
	        background-color: #fff;
	        margin-left: 50px;
	        padding-bottom: 20px;
	        color: #444;
	    }

	    .menu {
	    	border: 0px solid lime;
	        text-align: right;
	        max-width: 70%;
	        display: none;
	        background-color: white;
	        margin-top: 50px;
	        margin-right: 10px;
	    }
	    nav ul li {
			border: 0px solid blue;	
			display: inline-block;	
			padding: 10px 0px 5px 10px;
			margin: 0px 0px;
		}
 }

/* ---------------- END OF nawigacja ruchoma przypięta -----------*/












.top {min-height: 125px; min-width: 90%; border: 0px solid yellow; }
.top2 {min-height: 70px; min-width: 90%; border: 0px solid yellow; }

/* ---------------- START -----------*/

#startpage_start {
	width: 100%;
	min-height: 100vh; 
	margin-left: auto;
	margin-right: auto;
	background: url(img/0135.jpg);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	background-color: none;                                                                 																		 
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: flex-start; 		  -webkit-box-pack: start;-ms-flex-pack: start;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
}


#start_text { 
	background-color: rgba(233, 233, 233, 0.0);
	border: 0px solid yellow; 
	max-width: 1000px; 
	min-height: 60vh; 
	padding: 10px 10px; 
	margin: 20px 20px;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 		  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
	visibility: visible;




/* początek - animacja pojawiania sie tekstu */
	animation-duration: 3s;
	animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* koniec - animacja pojawiania sie tekstu */





#start_text span { line-height: 1.5;}


@media screen and (max-width: 1030px) {
	.top {min-height: 150px; }
	#start_text { padding: 0 60px; text-align: justify;}
	#start_text span { font-size: 22px }
}


@media screen and (max-width: 730px) {
	#start_text span { font-size: 24px }	
}

@media screen and (max-width: 530px) {
	#start_text span { font-size: 26px }
}





/* ---------------- DESCRIPTION START -----------*/


#startpage_description {
	width: 100%;
	min-height: 100vh; 
	margin-left: auto;
	margin-right: auto;
	background: url(img/3.jpg);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
	background-color: #de5de5;                                                                 																		 
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 		 	 -webkit-box-pack: center;-ms-flex-pack: center;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
}

.desc_row { 
	border: 0px solid yellow;
	margin: 0px 30px;
	width: 100%;
	max-width: 1000px;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: stretch; 				  -webkit-box-align: stretch; -ms-flex-align: stretch;
	flex-direction: row; 				  -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row;
}
.desc_coll { 	
	border: 0px solid #444; 
	width: 33%;
	min-height: 360px;
	margin: 10px 15px;
	padding: 30px 10px;
	text-align: center;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: flex-start; 				  -webkit-box-align: start; -ms-flex-align: start;
}
.desc_coll2 { 	
	border: 0px solid #444; 
	min-width: 96%;
	min-height: 260px;
	margin: 10px 15px;
	padding: 30px 10px;
	text-align: center;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: flex-start; 				  -webkit-box-align: start; -ms-flex-align: start;
}

.desc_coll:hover, .desc_coll2:hover { 
	background-color: rgba(255, 255, 255, 0.05);
}
/* 
.desc_coll:nth-child(1) {border: 2px solid #888; width: 40%;}

*/
.desc_coll, .desc_coll2 span {color: #aaa; padding-left: 10px; padding-right: 10px}

.desc_coll .demo-icon, .desc_coll2 .demo-icon {color: #aaa; font-size: 40px; }

@media screen and (max-width: 1030px) {
	#startpage_description { width: 100%; min-height: 120vh; }


	.desc_row { flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; margin: 0px 5px;}
	.desc_coll, .desc_coll2 { 
		border: 2px solid #888; 
		min-width: 90%;
		
		min-height: 200px;
		margin: 30px;
		padding: 45px 10px;
		text-align: center;
		display: flex; 						  display: -webkit-box; display: -ms-flexbox;
		justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
		align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	}
}



/* ---------------- PORTFOLIO START -----------*/

#startpage_portfolio {
	width: 100%;
	min-height: 100vh; 
	margin-left: auto;
	margin-right: auto;
	background: url();
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	background-color: #fff;                                                                 																		 
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: flex-start; 		  -webkit-box-pack: start;-ms-flex-pack: start;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
}




#portf_box {
	width: 100%;
	background-color: none;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;}

#portf_row {
	width: 100%;
	max-width: 1000px;
	min-height: 500px;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: row; 				  -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row;}

.portf {width: 50%; height: 500px;}
	

.portf img {
	height: 500px; 
	margin-left: 0 auto;
	margin-right: 0 auto;}

/* .portf img:hover {  webkit-filter: blur(2px);   filter: blur(2px); } */

.overlay {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
	}


.overlay .portflink {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	left: 0px;
	bottom: 0px;
	opacity: 0.0;
	transition: opacity 0.5s ease-in-out;
}
.overlay p {color: #fff; margin: 0 20px; display: block; top: 45%; position: relative; font-size: 26px; font-weight: 700}

.overlay:hover .portflink {
	opacity: 0.8;
}

.plakaty {}


@media screen and (max-width: 1030px) {
	#portf_row {flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;}
	.portf {width: 99%; height: 700px; text-align: center;}
	.portf img {height: 700px}
	
	
}

@media screen and (max-width: 730px) {
	#portf_row {flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;}
	.portf {width: 99%; height: 500px; text-align: center;}
	.portf img {height: 500px}
	
	
}

@media screen and (max-width: 530px) {
	#portf_row {flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;}
	.portf {width: 99%; height: 300px; text-align: center;}
	.portf img {height: 300px}
	
}



/* ---------------- OFERTA START -----------*/

#startpage_offer {
	width: 100%;
	min-height: 100vh; 
	margin-left: auto;
	margin-right: auto;
	background: url(img/2.jpg);
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
	background-color: #222;                                                                 																		 
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 		  -webkit-box-pack: center;-ms-flex-pack: center;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
}

.off_row { 
	border: 0px solid yellow;
	margin: 0px 30px;
	width: 100%;
	max-width: 1000px;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: stretch; 				  -webkit-box-align: stretch; -ms-flex-align: stretch;
	flex-direction: row; 				  -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row;
}
.off_coll { 	
	border: 0px solid #444; 
	width: 48%;
	min-height: 160px;
	margin: 10px 15px;
	padding: 30px 10px;
	text-align: left;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: flex-start; 				  -webkit-box-align: start; -ms-flex-align: start;
}
.off_coll2 { 	
	border: 0px solid #444; 
	min-width: 96%;
	min-height: 160px;
	margin: 10px 15px;
	padding: 30px 10px;
	text-align: center;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
	align-items: flex-start; 				  -webkit-box-align: start; -ms-flex-align: start;
}

.off_coll:hover, .off_coll2:hover { 
	background-color: rgba(255, 255, 255, 0.00);
}
/* 
.desc_coll:nth-child(1) {border: 2px solid #888; width: 40%;}

*/
.off_coll span {color: #bbb;  line-height: 2}

.off_coll2 span {color: #bbb; line-height: 1.5}

.off_coll .demo-icon, .off_coll2 .demo-icon {color: #ddd; font-size: 40px; }

@media screen and (max-width: 1030px) {
	
	.off_row { flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; margin: 0px 5px;}
	.off_coll, .off_coll2 { 
		border: 2px solid #888; 
		min-width: 90%;
		
		min-height: 100px;
		margin: 30px;
		padding: 45px 10px;
		text-align: center;
		display: flex; 						  display: -webkit-box; display: -ms-flexbox;
		justify-content: center; 			  -webkit-box-pack: center; -ms-flex-pack: center;
		align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	}
}




/* ---------------- PORTFOLIO START -----------*/

#startpage_contact {
	width: 100%;
	min-height: 10vh;
	margin-left: auto;
	margin-right: auto;
	background: url();
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
	background-color: #222;                                                                 																		 
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: flex-end; 		  -webkit-box-pack: end;-ms-flex-pack: end;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
}

.contact_box {
	border: 0px solid yellow; 
	min-height: 10vh; 
	width: 100%; 
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: flex-end; 		  	  -webkit-box-pack: end;-ms-flex-pack: end;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: column; 			  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
}

.contact_box img {margin-top: 40px; margin-bottom: 40px; width: 70%;}

.contact_content {
	border: 0px solid orange; 
	width: 95%;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 		 	  -webkit-box-pack: center;-ms-flex-pack: center;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex-direction: row; 			  	  -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row;
	flex: 3 3 30%;
	min-height: 100px;
	color: #ccc;
}

.address_col { min-width: 3%; border: 0px solid orange; padding: 0px 20px; }
.address_col  span {color: #ccc;}

.address_col span:hover {color: #00dcc0}

/* ------------------  fontello ikony ------------------- */
	@font-face {
	      font-family: 'fontello';
	      src: url('./font/fontello.eot?4766107');
	      src: url('./font/fontello.eot?4766107#iefix') format('embedded-opentype'),
	           url('./font/fontello.woff?4766107') format('woff'),
	           url('./font/fontello.ttf?4766107') format('truetype'),
	           url('./font/fontello.svg?4766107#fontello') format('svg');
	      font-weight: normal;
	      font-style: normal;
	    }     
     
    .demo-icon {
      color: #ddd;
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;      
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: 10px;
      margin-left: 10px;
      text-align: center;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #ccc;
    }

   
/* ------------------  fontello ikony ------------------- */




.footer {
	border: 0px solid red; 
	width: 95%;
	display: flex; 						  display: -webkit-box; display: -ms-flexbox;
	justify-content: center; 			  -webkit-box-pack: center;-ms-flex-pack: center;
	align-items: center; 				  -webkit-box-align: center; -ms-flex-align: center;
	flex: 1 1 10%;
	min-height: 80px;
	text-align: center;
}

.footer span {color: #bbb; font-size: 16px}

@media screen and (max-width: 1030px) {
	.footer span {color: #bbb; font-size: 22px}
	.demo-icon { font-size: 22px}
	
}

@media screen and (max-width: 730px) {
	#startpage_contact { min-height: 50vh; }
	.footer { min-height: 120px; margin-bottom: 10px}
	.footer span {color: #bbb; font-size: 24px}
	.demo-icon { font-size: 24px}
	.contact_content {
		flex-direction: column; 			  	  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
		margin-bottom: 30px;
		line-height: 3;
	}		    
	
}

@media screen and (max-width: 530px) {
	#startpage_contact { min-height: 70vh; }
	.footer { min-height: 120px; margin-bottom: 20px}
	.footer span {color: #bbb; font-size: 26px}
	.demo-icon { font-size: 26px}
	
}