* {padding:0;margin:0;}

html {width:100%;height:100%;}
body {font-family:Arial, Helvetica, Sans-serif;font-size:18px;line-height:1.5;font-weight:400;color:#434343;background:#FFF;}

.container {margin:0 auto;}

header {
	margin:0px 0px 25px 0px	;
	position: relative;
	height: 300px;
	z-index: 1;
	
}

#BANER { 
    background-image: url("../images/team-unity-friends-meeting-partnership-concept-scaled.jpg");
	width: 100%;
	height: 100%;
	background-position: center center;
    background-repeat: no-repeat;
	opacity: 100%;
    z-index: 2;
   }

#BANER_TLO {
	
	width: 100%;
	height: 100%;
	background: rgba(18,0,255,0.2);
	z-index: 3;
	}
#BANER_TLO2 {
	background-color: #83055AE3; 
	width: 330px;
	height: 190px;
	top: 50px;
	left: 30px;
	position: absolute;
	opacity: 100%;
	z-index: 4;
}

#BANER_TLO3{
	background-image: url("../images/xlogo_jbo_light2.webp");
	background-position: center center;
    background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	top: 10px;
	left: 5px;
	position: absolute;
	z-index: 5;
}
aside {float:left;margin:0 0 25px;}
aside nav ul {list-style:none;}
aside nav ul li {margin-bottom:1px;}
aside nav ul li a {display:block;text-decoration:none;color:#000;background:#FFC000;padding:8px 20px;}
aside nav ul li a:hover{background:#212121;color:#FFF;}

#main {float:right;margin:0 25px 0 25px;}

footer {clear:both;color:#FFF;background:#121212;padding:15px 0 15px 30px;margin:0 0 25px;}

.styled-select {
    overflow: hidden;
    height: 74px;
    float: left;
    width: 1020px;
    margin-right: 10px;
    background: no-repeat right center #5c5c5c;
}

.styled-select select {
    font-size: 16px;
    border-radius: 0;
    border: none;
    background: transparent;
    width: 1020px;
    overflow: hidden;
    padding-top: 15px;
    height: 70px;
    text-indent: 10px;
    color: #ffffff;
    -webkit-appearance: none;
}

.styled-select option.service-small {
    font-size: 14px;
    padding: 5px;
    background: #5c5c5c;
}
@media (min-width: 1100px) {
	.container {width:100%;}
	aside {width:20%;}
	#main {width:75%;}
}

input[type=text], input[type=email],  input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
}

input[type=radio] {
  width: 5%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
}

input[type=button], input[type=submit], input[type=reset] {
 background-color: #83055AE3;
  border: none;
  color: #FFC000;
  padding: 16px 32px;
  text-decoration: none;
  font-weight: bold;
  margin: 4px 2px;
  cursor: pointer;
}

@media (max-width: 1100px) and (min-width: 1000px) {
	.container {width:width:100%;}
	aside {width:20%;}
	#main {width:75%;}
}
@media (max-width: 1000px) and (min-width: 800px) {
	.container {width:100%;}
	aside {width:20%;}
	#main {width:75%;}
}
@media (max-width: 800px) and (min-width: 500px) {
	.container {width:100%;}
	aside,
	#main {width:75%;}
}
@media (max-width: 500px) {
	.container {width:100%;}
	aside,
	#main {width:75%;}
}