/* CSS Document */
/* css reset -------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  color: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}
html { height: 101%; }
body { height: 100%; position: relative; font-size: 1em; line-height: 1.5em; font-family:  Lato, sans-serif; text-align: left;}
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
 
strong { font-weight: bold; } 
 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; } 

p, li { font-size: 14px; line-height: 1.5em;}

h1 {font-size:1.2em; font-weight: bold;line-height: 120%;}
h2 {font-size:1em; font-weight: bold; line-height: 110%;}
.clearline {clear:both;} 
 

#main_container {  
 min-height:100%;
 height:100%;
 width: 100%; 
 min-width: 350px;
 position: relative;
 top: 0px;
}  
.anchor {
	display: block;
	height: 0;
}
div.modpagecrollbtns {				/* guzik scroll --- */
	border-color: #fff;
	border-width: 2px;
	border-style: solid;
}
span.arrow-up {
	font-size: 25px;
	width: 40px;
	margin: 30px auto 0 auto;
	padding-right: 1px;
}
span.arrow-up + span{
	display: none;
}

.modpagecrollbtns.backtop {
    width: auto !important;
}

/* HEADER ================================================================= */
/* ======================================================================== */
header {
	height: 70px;     
	width: 100%; 
	min-width: 350px;
	margin: 0 auto;
	position: fixed;
	z-index: 9999;
	background-color: rgba(255,255,255,0.75);  
}
#logo_container {
  float: left;
  width: 250px;
  margin: 0;
  padding: 25px 10px 0 20px;
  
  font-family: Dosis, sans-serif; 
  font-size: 40px;
  font-weight: 200;
  color: #000;
  	-moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
/* social container ======================================================= */ 
div#social_container {							
	float: right;
	padding: 0 10px;
	height: 70px;
	white-space:nowrap;
}
div.mod-languages {								 /* language */
	padding: 25px 15px;
	float: right;
}
div.mod-languages p {
	display: none;
}  
div#social_container > a img {						/* icons */
	float: right;
	height: 50px;
	position: relative;
	margin: 10px 15px;
	-moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
} 
div#social_container > a img:hover {
	height: 60px;
	margin: 5px 10px;
}

/* 	MENU ================================================================== */
nav#navbar {								
  float: right;
  padding: 0; 
  height: 70px;
  white-space:nowrap;
  font-family: Rajdhani, sans-serif; 
}            
ul#menu-top {
  float: right;
  height: 70px;
}
ul#menu-top li {
  float: left;
  height: 70px;
}
ul#menu-top li a {
  font-size: 16px;
  font-weight: normal;
  height: 70px; 
  display: block;
  padding: 30px 15px 10px 15px;
  color: #000;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
} 
ul#menu-top li:hover a { 
  font-size: 18px;
  color: #993333;
  padding: 25px 10px 10px 10px;
}
ul#menu-top li:first-of-type {	/* hide first item */
  display: none;
}
  

/* CONTENT ================================================================ */
/* ======================================================================== */
main {
	width: 100%;
	margin: 0 auto;
	min-height: 300px;
} 

/* INTRO ------------------------------------------------------------------ */
#content-intro + div.custom {
	position: relative;
	padding-top: 55%;

	background-repeat: no-repeat;
	background-size: contain;
}
#content-intro + div.custom p {
	position: absolute;
	float: right;
	bottom: 70%;
	right: 20%;
}

/* ABOUT ------------------------------------------------------------------ */ 
#content-about + div {
	position: relative;
	padding-top: 56%;
	background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), url("/images/layout_elements/about_back.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: 70px;
	-moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
#content-about + div > div {
	position: absolute;
	display: table;
	width: 100%;
	height: calc(100% - 70px);
	top: 70px;
}
#content-about + div > div div.custom {
	display: table-cell;
	vertical-align: middle;
}

#content-about + div > div div.custom p {
  	margin-left: 5%;
	margin-bottom: 10px;
	width: 50%;
/*	min-width: 400px;*/

	color: #fff;
	text-align: center;
	-moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
/* NEW DESIGNS ------------------------------------------------- */
#content-designs + div.custom {
	background-color: #fff;
}
#content-designs + div.custom p {
	width: 50%;
	margin: 40px auto 35px auto;

	color: #000;
	text-align: center;
}
/*.djslider-loader {
	padding-bottom: 30px !important;
}
*/


/* KONTAKT ------------------------------------------- */
#content-kontakt + div {
	width: 100%;
	background-color: #000;
	padding-top: 20px;
	padding-bottom: 20px;
	display: table;
}
a, a:visited {color: #fff;}

#content-kontakt + div div.custom {
	width: 50%;
	/*padding: 30px 0 20px 0;*/
	display: table-cell;
	vertical-align: middle;
}

#content-kontakt + div div.custom:nth-of-type(1) p {
	width: 100%;
	padding-left: 20%;
	padding-right: 10%;
	
	color: #fff;
	text-align: center;
}
#content-kontakt + div div.custom:nth-of-type(2) div {
	width: auto;
	margin: 20px 20% 20px 10%;
	float: left;
	position: relative;
	font-size: 17px;
	color: #fff;
	clear: both;
}

/* prawa strona detale */

#content-kontakt + div div.custom:nth-of-type(2) div a {
	opacity: 0.7;
	width: 80px;
	height: 50px;
	display: block;
	
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;	
}
#content-kontakt + div div.custom:nth-of-type(2) div a:hover {
	opacity: 1;
}
#content-kontakt + div div.custom:nth-of-type(2) div img {
	height: 50px;
	width: auto;
	display: block;
	margin:0 auto;
}



/* prawa strona text */
#content-kontakt + div div.custom:nth-of-type(2) div p:nth-of-type(1) {
	position: absolute;
	left: 100px;
	margin:0;
	top: 5px;

	text-align: left;
	font-size:16px;
	font-weight: bold;
}
#content-kontakt + div div.custom:nth-of-type(2) div p:nth-of-type(2) {
	position: absolute;
	left: 100px;
	margin:0;
	top: 25px;

	text-align: left;
	font-size:13px;
}


/* PORTFOLIO ------------------------------------------- */
div.mod_sigplus {
	width: 100%;
	background-color: #000;
	padding-top: 20px;
}
div.mod_sigplus::before {
	display: block;
    content: "";
    border-top: 1px solid #fff;
    width: 80%;
    margin: 0 auto 40px auto;
}
div.mod_sigplus ul li {
	margin: 10px;
}





/* >1400px =============================================================== */
/* ====================================================================== */
@media (min-width: 1400px) {  /*======================================== */
/* about text */ 
#content-about + div {padding-top: 40%; background-size: cover;}
} 

@media (min-width: 1200px) and (max-width: 1399px) {  /*======================================== */
/* about text */ 
#content-about + div {padding-top: 50%;}
} 





/* 900px ================================================================ */
/* ====================================================================== */
@media (max-width: 900px) {  /*========================================== */
header {height: 70px;}
/*div.mod-languages {padding: 10px 5px;}*/
/* social container */ 
div#social_container {height: 70px;}
div#social_container > a img {						
	height: 30px;
	margin: 20px 7px;
}  
div#social_container > a img:hover {
	height: 35px;
	margin: 18px 5px 0 5px;
}
/* logo */   
#logo_container {
  width: 150px;
  padding: 25px 10px 0 20px;
  font-size: 20px;
} 
/* menu */   
ul#menu-top li a {
  height: 70px; 
  padding: 26px 15px 10px 15px;
} 
ul#menu-top li:hover a { 
  padding: 22px 10px 10px 10px;
}
/* about photo */
#content-about + div {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8) ), url("/images/layout_elements/about_back.jpg");
}
/* about text */ 
#content-about + div > div div.custom p {
  	margin: 0 auto;
	width: 80%;
}


}


/* 700px ================================================================ */
/* ====================================================================== */
@media (max-width: 700px) {  /*========================================== */

/* HEADER */
header {
	height: 100px;     
}
#logo_container {
  width: 240px;
  height: 50px;
  padding: 20px 10px 0 10px;
  font-size: 40px;
  font-weight: 200;
}
/* social container */ 
div#social_container {							
	padding: 0 10px;
	height: 50px;
}

/* language */
div.mod-languages {	 
	padding: 20px 0 0 0;
	margin-right: -15px;
}
/* 	MENU */
nav#navbar {
  clear: both;
  float: none;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
}
ul#menu-top {
  clear: both;
  float: none;
  height: 50px;
}
ul#menu-top li{
  height: 50px;
}
ul#menu-top li a {
  font-weight: bold;
  height: 50px;
  padding: 20px 15px 0px 15px;
} 
ul#menu-top li:hover a { 
  padding: 15px 10px 10px 10px;
}
/* ABOUT */
#content-about + div {
	position: relative;
	padding-top: 64%;
	background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ), url("/images/layout_elements/about_back.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position-y: 100px;
}
#content-about + div > div {
	position: relative;
	top: 0;
	height: auto;
	background-color: #000;
}
#content-about + div > div div.custom p {
  	padding: 20px 2%;
	width: 96%;
}
/* NEW DESIGNS ------------------------------------------------- */
#content-designs + div.custom p {
	width: 80%;
	margin: 20px auto 35px auto;
}
/* KONTAKT */ 
#content-kontakt + div {
	display: block;
}
#content-kontakt + div div.custom {
	display: block;
	width: 100%;
	float: left;
}
#content-kontakt + div div.custom:nth-of-type(1) p {
	width: 90%;
	padding: 0;
	margin: 0 auto;
}
#content-kontakt + div div.custom:nth-of-type(2) div {
	width: auto;
/*	margin: 20px 20% 20px 20%;*/
	float: left;
	position: relative;
}


.modpagecrollbtns {
	margin-bottom: -20px !important;
}



}


/* 410px ================================================================ */
/* ====================================================================== */
@media (max-width: 410px) {  /*========================================== */
header {background-color: rgba(255,255,255,1); }
#logo_container {
  width: 200px;
  padding: 20px 10px 0 10px;
  font-size: 30px;
}


/* 	MENU  */
ul#menu-top li a {padding: 20px 9px 10px 9px;} 
ul#menu-top li:hover a {padding: 15px 7px 10px 7px;}

#content-kontakt + div div.custom:nth-of-type(2) div {
	margin: 20px 5%;
}

}