/*  AGACHEM  CSS file, 2016-03-14  */
 
html {
    font-family:Verdana, Geneva, sans-serif;
}

body {
	margin: 0;
	padding: 0;
	background-color: #f5f5f5; /* color for design */
	/*
	background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #f5f5f5), color-stop(1, #e5e5e5));
	background-image: -ms-linear-gradient(top, #f5f5f5, #e5e5e5);
	background-image: -o-linear-gradient(top, #f5f5f5, #e5e5e5);
	background-image: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
	background-image: -webkit-linear-gradient(top, #f5f5f5, #e5e5e5);
	background-image: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
	*/
}

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

.container {
	margin-right: auto;
	margin-left: auto;
	min-height: 646px;
	
	/*debug styles*/
	/*background-color:#aaa;*/
	/*border:1px solid #55a;*/
}	

.row{
	margin-left: 0;
	margin-right: 0;

	/*debug styles*/
	/*background-color:#ccc;*/
	/*border:1px solid #a55;*/
}

.row:after,
.container:after {
    content: "";
    clear: both;
    display: block;
}

/* For mobile phones: */
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
	
	/*debug styles*/
	/*border:1px solid #5a5;*/
}

/* Responsive Web Design */
@media only screen and (min-width: 992px) {
    /* For desktop: */
    .col-0 {display: none; background-color: transparent;}
	.col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    /* For desktop: */
    .col-m-0 {display: none; background-color: transparent;}
	.col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 480px) and (max-width:767px) {
    /* For tablets: */
    .col-s-0 {display: none; background-color: transparent;}
	.col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (max-width: 479px){
    .col-s-0 {display: none;} /* to disable col-s-0 if width is smaller then max-width*/
}
	
@media (max-device-width: 479px) and (orientation: landscape) {
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.header {
	text-align: left;
	width:100%;
	height: 80px;
	padding-left: 15%;
	padding-right: 20px;
	background-color:#f5f5f5;
	border-radius:3px 3px 0 0;
}
	
.navigate {
	margin: 0;
	text-align: center;
	width:100%;
	/*border-radius:3px;*/
	font-size:14px;
	background-color:#006fe6;
}

.footer {
	margin-top: 10px;
	clear:both;
	height:18px;
	width:100%;
	font-size:14px;
	background-color:#006fe6;
	color:#ffd000;
}
	
.lfooter {
	float:left;
	text-align: left;
	width:30%;
}

.rfooter {
	float:right;
	text-align:right;
	width:400px;
}

.imargin {
	padding:8px;
	padding-top:12px;
	padding-bottom:4px;
}

.contact {
	border-radius:5px;
	background-color:#e8e8e8;
	padding:15px;
	padding-top:5px;
	
	border:1px solid #ccc;
}
.contact > iframe { width: 100%; }

@media (min-width: 767px) { 
	.contact { 
		min-height:510px;
	}
}


/* -------------- Contact form -------------- */
.formularz form{
	margin:0px;
}

.formularz label {
	display:block;
	width:100%;
	margin-bottom:5px;

	font-size: 14px;	
}

.formularz textarea,
.formularz input {
	display:block;
	width:100%;
	margin-bottom:15px;
	padding:5px;

	font-size:14px;
	
	background-color:#f9f9f9;
	border:1px solid #d3d3d3;
	border-radius:3px;

	box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .1);
	
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

.formularz textarea {
	max-width:100%;
	height:80px;
	max-height:250px;
	font-family:Verdana, Geneva, sans-serif;
}

.formularz textarea:hover, 
.formularz input:hover {
	border:1px solid #aaa;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

.formularz input#submit {
	margin-top:15px;
	margin-bottom:0;
	background-color:#ddd;
	border:1px solid #b8b8b8;
	cursor:pointer;
}

.formularz input#submit:hover {
	background-color:#aaa;
	border:1px solid #888;
	color:#fff;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

.formularz_info {
	border-radius:5px;
	background-color:#e8e8e8;
	padding:15px; 
	padding-top:5px;
	border:1px solid #ccc; 
}

.formularz_info button,
.formularz button {
	width:100%;
	margin-top:15px;
	margin-bottom:0px;
	padding:5px;

	font-size:14px;

	background-color:#ddd;
	border:1px solid #ccc;
	border-radius:3px;
		
	cursor:pointer;
	 -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

.formularz_info button:hover,
.formularz button:hover {
	border:1px solid #aaa;
	background-color:#ccc;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

.contact {
	border-radius:5px;
	background-color:#e8e8e8;
	padding:15px;
	padding-top:5px;
	
	border:1px solid #ccc;
}

/* ----------------------------------------------- */ 

a:link,  a:visited {text-decoration:none;}    /* unvisited link */
a:hover, a:active {text-decoration:underline;}   /* mouse over link */

.link {
	text-decoration:none;
	color: #2441ab;
}

.link:hover {
	text-decoration:none;
	color: #4e8cf4;
}

div.info { 
	display:none;
	padding:10px 20px 10px 20px;
	margin:0px;
	margin-bottom:18px;
	border: 1px #ccc solid;
	color: #ddd;
	background-color: #006fe6;
	text-align: left;
	border-radius:3px;
	font-size: 14px;
	position: fixed;
    right: 0;
	bottom:0;
}

/* Portal's author info */
span.projekt:hover > div.info { display: block; }

p.info {
	color: inherit;
	margin: 0;
	padding: 5px;
}

a.info {
	color: inherit;
	margin: 0;
	padding: 0;
}

/*  Picture box with light shadow  */
.picture-box {
	display: inline;
	margin: 15px;
	padding: 0px;
	border: 0px solid #000;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.picture-responsive {
	margin: 15px 2%;
	padding: 0px;
	border: 1px solid #ddd;
	max-width: 96%;
	height: auto;
}

.divshadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.divshadowlarge {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.lightshadow {
	box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, .1);
}

.shadow {
	box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, .2);
}

.logotype {
	border: 0;
	height: 80px;
}

/* Drop down menu style configuration */
ol.ddmenu {
	width:100%;
	padding:0 10%;
	margin:0;
	list-style-type:none;
	font-size:18px;
	height:2.5em;
	line-height:2.5em;
	text-align:center;
	background-color:inherit;
	display: inline-block;
}

ul.submenu {
	display:none;
	list-style-type:none;
	padding:0;
	margin:0;
	position:relative; 
	z-index:100;
}

ol.ddmenu  a { display:block; color:#ffd050; /*color: #ddd;*/ text-decoration:none; padding:0 5px; }

ol.ddmenu > li { float:left; background-color:#006fe6; width:33.333%; border-right:1px solid #aaaaaa; height:2.5em; }
ol.ddmenu > li:first-child { border-left:1px solid #aaaaaa; }

ol.ddmenu > li:hover { background-color:#004c99;}
ol.ddmenu > li:hover > a { color:#ffd050; /*color: #ddd;*/}
ol.ddmenu > li:hover > ul { display:block; }
ol.ddmenu > li:active { background-color:#003266; color: #efc000; }

ul.submenu > li { background-color:#006fe6; }
ul.submenu > li:hover { background-color:#003c89; }
ul.submenu > li:hover a { color:#ffd050; /*color: #ddd;*/}
ul.submenu > li:active { background-color:#003266; color: #efc000; }
ul.submenu > li > a { border-top:1px solid #aaaaaa; }
/* ---------------------------------------------------*/

#links { 
	list-style-type:none; 
	margin:0;
	padding:0 10%;	
	text-align:center;
	height:2.5em;
	line-height:2.5em;
}

#jtext {
	text-align: justify;
	font-size: 16px;
	color: black;
	padding: 0.3em;
	padding-left: 0;
	padding-right: 0;
}

#text {
	 text-align: left;
	 font-size: 16px;
	 color: black;
	 padding: .3em;
	 padding-left: 0;
	 padding-right: 0;
}
	
/* chemia gospodarcza i kosmetyki  zagnieżdzenie poziom 1 */
ul.oferta {
	text-align: justify;
	font-size: 15px;
	color: black;
	padding-left: 2.2em;
	
	/*border: 1px solid #111;*/
}

ul.oferta > li {
	padding-bottom: 1em;
	padding-top: 0.2em;
}

/* chemia gospodarcza i kosmetyki  zagnieżdzenie poziom 2 */
ul.oferta > li > ul {
	padding-left: 1.5em;
	padding-top: 0.2em;
	/*border: 1px solid #8a8;*/
}

ul.oferta > li > ul > li
{
	font-size: 13px;
}

/*ul.oferta > li > ul > li:before{
		color: #006fe6;
		content: "•";
		margin-right:0.8em;
}*/

#btext {
	text-align: left;
	font-weight: bold;
	font-size: 16px;
	color: black;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

#btext:hover {
    text-shadow: 0px 0px 10px #006fe6;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

#ctext{
	text-align: justify;
	font-weight: bold;
	font-size: 12px;
	color: gray;
	padding: 0;
	padding-left: 30px;
	padding-right: 30px;
}


/* Responsive Web Design */
@media only screen and (max-width: 850px) {
     /* For tablets */
	div.header { text-align: left; height: 60px; padding-left: 10%; padding-right: 10px;}
	div.header img{ height: 60px; width: auto; }
}

@media only screen and (max-width: 450px) {
	/* For smartfon: */
	div.header { text-align: left; height: 40px; padding-left: 5px; padding-right: 5px;}
	div.header img{ height: 40px; width: auto; }
	
	ul.oferta { padding-left: 1em; }
	ul.oferta >li >ul { padding-left: 0.5em; padding-right: 0; }
	ul.oferta >li >ul>li { font-size:12px; padding-left: 0; padding-right: 0; }
	
	p#ctext { padding-left: 1em; padding-right: 1em; }
	p#text { padding: 0; }
	
	ol.ddmenu { 
		font-size: 13px; 
		padding: 0 2%;  
		height:2.5em;
		line-height:2.5em;
	}
	
	div.contact {
		padding:10px;
		padding-top:0px;
	}
}