/* SeCom CSS */
@charset "utf-8";
@import url('reset.css');

/*
	Blue: #009cca
	Secom Green: #58715D
	gray: #667070
*/

.rounded {
    -moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-topleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-khtml-border-bottom-right-radius: 4px;
	-khtml-border-bottom-left-radius: 4px;
	-khtml-border-top-right-radius: 4px;
	-khtml-border-top-left-radius: 4px;
}
.rounded-bottom {
    -moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-khtml-border-bottom-right-radius: 4px;
	-khtml-border-bottom-left-radius: 4px;
}
.rounded-top {
	-moz-border-radius-topright: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-khtml-border-top-right-radius: 4px;
	-khtml-border-top-left-radius: 4px;
}

body {background:#ffffff; margin: 0; padding: 0; height: 100%; background-image:url(../jjImg/background.png)}

p {font:14px/20px Verdana, Geneva, sans-serif; color:#666666}
h1 {font:32px/38px Verdana, Geneva, sans-serif; color:#58715D}
h2 {font:16px/20px Verdana, Geneva, sans-serif; color:#58715D}

a {	font:14px/20px Verdana, Geneva, sans-serif; text-decoration:none; color:#667070}
a:hover {text-decoration: none; color: #0099cb}

b {font-weight:bold}
i {font-style:italic}
.akapit {padding:0px 25px 25px 25px; clear:both}
.headline {padding:40px 25px 30px 25px}
.headline2 {padding:20px 25px 0px 25px; clear:both}
.centerThis {text-align:center}
.justifyThis {text-align:justify}
.capitals {font-variant:small-caps}

.cycle-slideshow img { width: 100%; height: auto}
.cycle-slideshow { width: 70% }
/* ---------------------------------------------------------- T --- */
#topMenuSection {position:relative; clear:both; margin:10px auto 0 auto; max-width:1000px; background-color:#ffffff}
#topMenuSection a {font:13px/20px Verdana, Geneva, sans-serif}
.topMenuSpace {height: 40px}
.menuBtn {padding: 5px 5px 5px 5px; margin-left: 10px; margin-right: 10px; float:left; text-align:center; color:#333333; font-weight:bold}

.menuBtn:hover {	background-color:#58715D; color:#ffffff; font-weight:bold;
					-moz-border-radius-bottomright: 0px;
					-moz-border-radius-bottomleft: 0px;
					-moz-border-radius-topright: 4px;
					-moz-border-radius-topleft: 4px;
					border-bottom-right-radius: 0px;
					border-bottom-left-radius: 0px;
					border-top-right-radius: 4px;
					border-top-left-radius: 4px;
					-webkit-border-bottom-right-radius: 0px;
					-webkit-border-bottom-left-radius: 0px;
					-webkit-border-top-right-radius: 4px;
					-webkit-border-top-left-radius: 4px;
					-khtml-border-bottom-right-radius: 0px;
					-khtml-border-bottom-left-radius: 0px;
					-khtml-border-top-right-radius: 4px;
					-khtml-border-top-left-radius: 4px;}
					
#TOP {	position:relative; clear:both; margin:0 auto 0 auto; width: 100%; max-width:1000px; background-color:#FFF; overflow:hidden;overflow: hidden; display: flex}
#topLogo {	width:30%;
			max-height: 390px;
			background-color:#FFF;
			/*overflow:hidden;
			background-image:url(../jjImg/SeCom_logo.jpg);
			background-size: cover;
			background-repeat: no-repeat*/}
#topLogo img {
    width: 70%;
    height: auto;
    margin-left: 15%;
    margin-top: 15%;
}
#topLogo h1 {font:clamp(12px, calc(2.5vw), 24px) "Times New Roman", Times, serif; color:#666666; text-align:center;
			padding:10% 10px 0 10px; font-style:italic;
			}

div#topIlus {
	width:70%;
	min-height: 100px;
	height: auto;
	border: 0px;
/*	background: url(../jjImg/jjcycler/image1.jpg);
	background-size: cover;
	background-repeat: no-repeat */
}
#topIlus img {  max-width: 100%;
				max-height: 100%
}

.portfolio-button {	width:140px;
					margin-top:-55px; margin-left:25px; position:absolute; z-index:101;
					background-color:#58715D;
					-moz-border-radius: 6px;
					border-radius: 6px;
					-webkit-border-radius: 6px;
					-khtml-border-radius: 6px}
.portfolio-button:hover {text-decoration:none; background-color:#999999}

#portfolio-button-icon {float:left; padding:6px 10px 2px 12px}

#portfolio-button-txt {	float:left;
						text-align:left; font:14px/18px Verdana, Geneva, sans-serif; color:#ffffff;
						padding-top:6px}




/* ---------------------------------------------------------- M --- */
#MAIN {position:relative; clear:both; margin:0 auto 0 auto; max-width:1000px; display: flex; flex-direction: row}

.sSection {float:left; width:30%; background-color:#E1E1E1;
			-moz-border-radius-topright: 8px;
			border-top-right-radius: 8px;
			-webkit-border-top-right-radius: 8px;
			-khtml-border-top-right-radius: 8px;}
			
.mSection {float:left; width:70%; background-color:#ffffff}

.mSection-container {clear:both}
.mSection-container-left {float:left; width:300px; padding:42px 0px 40px 50px}
.mSection-container-right {float:left; width:350px}
.enter-area-button {text-align:center; font:16px/20px Verdana, Geneva, sans-serif; color:#ffffff;
					width:250px; padding:20px 0px 20px 0px;
					margin-left: 25px;
					margin-bottom: 25px;
					background-color:#58715D;
					-moz-border-radius: 6px;
					border-radius: 6px;
					-webkit-border-radius: 6px;
					-khtml-border-radius: 6px}
.enter-area-button:hover {text-decoration:none; background-color:#999999}

.download-strip {	clear:both; margin-left:25px; margin-right: 25px; margin-bottom:20px; border:solid 1px #E1E1E1;
					-moz-border-radius-topleft: 6px;
					border-top-left-radius: 6px;
					-webkit-border-top-left-radius: 6px;
					-khtml-border-top-left-radius: 6px}
					
.download-l-slot {	padding:20px 20px 20px 20px; background-color:#E1E1E1;
					-moz-border-radius-topleft: 6px;
					border-top-left-radius: 6px;
					-webkit-border-top-left-radius: 6px;
					-khtml-border-top-left-radius: 6px}
					
.download-r-slot {padding:20px 10px 20px 20px}

.download-strip a {font:12px/14px Verdana, Geneva, sans-serif; color:#58715D;text-decoration:underline}
.download-strip a:hover {text-decoration:none}

.download-strip p {font:12px/14px Verdana, Geneva, sans-serif}

.download-komunikat {margin-left:25px; margin-top:12px; margin-bottom:20px; color:#FF0000; font-size:11px}
.globe {max-height: 100%; max-width: 100%; object-fit: contain}


/* ---------------------------------------------------------- F --- */
#FOOT {position:relative; clear:both; margin:0 auto 30px auto; max-width:1000px; padding-top:20px; padding-bottom:20px; background-color:#58715D}



/* ------------------------------------------------------------- */
.shadow {
	-moz-box-shadow:0px 6px 5px 0px rgba(99, 59, 15, 0.45);
	-webkit-box-shadow:0px 6px 5px 0px rgba(100, 100, 100, 0.45);
	box-shadow:0px 6px 5px 0px rgba(99, 59, 15, 0.45);
}
.shadow-b {
	-moz-box-shadow:0px 0px 4px 0px rgba(99, 59, 15, 0.40);
	-webkit-box-shadow:0px 0px 4px 0px rgba(99, 59, 15, 0.40);
	box-shadow:0px 0px 4px 0px rgba(99, 59, 15, 0.40);
}
.tab1 {	font:12px/18px Verdana, Geneva, sans-serif; color:#3B433A;
		margin-top:20px; margin-left:50px; border:#CCC 1px solid}
	.tab-kom {	width:280px; height:20px; padding:5px 5px 5px 15px;}
	
.lista {	list-style-type:disc; list-style-position:inside;
			font:14px/20px Verdana, Geneva, sans-serif; color:#58715D; font-weight:bold;
			padding:0px 25px 25px 25px}
			
.lista-sub {	list-style-type:circle; list-style-position:inside;
				font:14px/20px Verdana, Geneva, sans-serif; color:#666666;
				padding:0px 20px 15px 20px}
				
.lista-sub2 {	list-style-type:square; list-style-position:inside;
				font:14px/20px Verdana, Geneva, sans-serif; color:#666666;
				padding:0px 20px 0px 25px}
				
.email{
display:none;
}
/* ------------ klasy pomocnicze ------------ */
.redout {outline:#F00 solid 1px}
.greenout {outline:#0f0 solid 1px}
.unvisible {visibility:hidden}


/* -------------- portfolio ----------------- */
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 12px;
  font-size: clamp(10px, 1.5vw, 14px);
  text-align: center;
  background-image: linear-gradient(#e3e1e1, white);
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 5px;
  float: left;
  width: 32.99999%;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}



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

.akapit {padding:0px 15px 18px 15px;}
.headline { padding:10px 0px 10px 15px; background-image: linear-gradient(#e3e1e1, white); margin-bottom: 10px}
.headline2 {padding:10px 0px 10px 15px;}

p {font:14px Verdana, Geneva, sans-serif; color:#666666}
h1 {font:20px Verdana, Geneva, sans-serif; color:#58715D}
h2 {font:18px Verdana, Geneva, sans-serif; color:#58715D}

#topMenuSection {position:relative; clear:both}
#topMenuSection a {font:12px Verdana, Geneva, sans-serif}
.topMenuSpace {height: 55px}
.menuBtn {padding:5px 5px 5px 5px; margin-left: 4px; margin-right: 4px; float:left}

#topLogo {
	background-size: contain
}

/*
#topLogo h1 {
    font: 12px "Times New Roman", Times, serif;
    padding: 10px 5px 0 5px;
}
*/

.mSection-container-left {float:left; width:300px; padding:42px 0px 40px 50px}

.enter-area-button {text-align:center; font:14px Verdana, Geneva, sans-serif; color:#ffffff;
					width:200px; padding:15px 0px 15px 0px;
					margin-left: 15px;
					margin-bottom: 15px}
					
.download-strip {	clear:both; margin-left:10px; margin-right: 10px; margin-bottom:20px; border:solid 1px #E1E1E1;
					-moz-border-radius-topleft: 6px;
					border-top-left-radius: 6px}
					
.download-l-slot {	padding:10px 10px 10px 10px;
					-moz-border-radius-topleft: 6px}
					
.download-r-slot {padding:10px 10px 10px 10px}

.download-strip a {font:14px Verdana, Geneva, sans-serif}

.download-strip p {font:14px Verdana, Geneva, sans-serif}

.download-komunikat {margin-left:10px; margin-top:12px; margin-bottom:20px; margin-right: 10px}

.lista {	list-style-type:disc; list-style-position:inside;
			font:14px Verdana, Geneva, sans-serif; font-weight:bold;
			padding:0px 15px 25px 15px}
			
.lista-sub {	list-style-type:circle; list-style-position:inside;
				font:14px Verdana, Geneva, sans-serif;
				padding:0px 0px 10px 5px}
				
.lista-sub2 {	list-style-type:square; list-style-position:inside;
				font:14px Verdana, Geneva, sans-serif;
				padding:0px 0px 0px 10px}
				
.sSection { width: 100%}

.mSection { width: 100% }

#MAIN { flex-direction: column-reverse }

.globe { display: none }
	
.responsive {
    width: 49.99999%;
  }
 
div.desc {
  padding: 12px;
  font-size: clamp(12px, 2vw, 16px);
}

.portfolio-button {	width:90px;
					margin-top:-35px; margin-left:10px}

#portfolio-button-icon {float:left; padding:4px 0px 2px 4px; width: 16px}

#portfolio-button-txt {	float:left;
						text-align:left; font:11px Verdana, Geneva, sans-serif; color:#ffffff;
						padding-top:6px; padding-left: 4px}
  
}