@charset "utf-8";
/* CSS Document */
*{box-sizing: border-box; margin: 0; padding: 0;}
.clear {clear: both;}
main {margin: 0 auto; background-color: #252525; overflow: auto;}
a {text-decoration:none;}
header, footer {overflow:auto;width:100%;}
body {font-family: Arial, Helvetica, sans-serif; background-color: #252525; color:white;}
header {
    padding-top:20px;
	text-align: center;
	padding-bottom:10px;
	width:100%;
	margin: auto;}
#logo img {width: 45%;}
.menu {
	padding-top:7px;
	margin-bottom: 7px;
	margin-right: 0;
	float: none;
	font-size: 18px;}
	
.menu a {
	
	background-color: #3071bf; 
	display: block;
	padding: 10px 0;
	margin-left: 0;
	color: #FFF;
	text-decoration: none;}
	
.menu a:hover {
	background-color: white;
	color: #184173;}
#contact2 {display: inline-block; float: left;}
#mapa {display: inline-block;  margin: 0 auto;}	
#map {height: 300px; width: 300px;}


.hamburger{
 	background:none;
  	position:absolute;    
  	top:20px;
  	right:10px;
  	line-height:65px;
 	padding:0px 25px;
  	color:white;
  	border:0;
 	font-size:30px;
 	font-weight:bold;
  	cursor:pointer;
 	outline:none;
	text-align: center;
 	z-index:10000000000000;}

.cross{
	background:none;
	position:absolute;
	top:20px;
	right:10px;
	line-height:65px;
 	padding:5px 30px;
 	color:white;
	border:0;
	font-size:65px;
	font-weight:bold;
	cursor:pointer;
	outline:none;
	text-align: center;
	z-index:10000000000000;	}



section {overflow: auto;
		padding-top: 25px;
		box-sizing: border-box;}
#consulting {color: #3581dc; text-align: center; font-size: 20px;
			padding-top: 15px; 
			padding-bottom: 15px;
			margin: auto 5%; border-bottom: 2px solid #3581dc;}

article {color:white; display: block; margin: auto 10%; padding-top: 10px; overflow: auto;}
article h3 {
	color: #3581dc;
	font-size: 25px;
	margin-top: 15px;
	margin-bottom: 10px;}
article p {font-size: 18px;
			padding-bottom: 10px;
			border-bottom:2px solid #888888;
			text-align: center;
			color: white;}
#ideas p {text-align: justify;}
#levo {text-align: left;}

span {color: #3071bf;}
.slika {max-height: 100%; min-height: 100px;}
footer {
	background-color: black;
	color: white;
	height: 100px;
	font-size: 15px;
	padding-top: 40px;
	text-align: center;
	margin-top: 50px;}


#vrh {
	display:block;
	position:fixed;
	right:30px;
	bottom:30px;
	background-color:rgba(53,129,220,0.5);
	color: white;
	padding:20px;
	border-radius:50px;
	cursor: pointer;}

form {padding:20px;
	text-align: center;
	border-radius: 5px;}
form label {font-size:16px;}
input[type=text], input[type=email], textarea {
	color: #707070;
	width: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	display: inline-block;
	margin: 8px 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;}
input[type=text]:focus,input[type=email]:focus, textarea:focus {
	background-color: #BFBFBF;
	color: black;}
#submit {
	width: 100%;
	background-color: #3071bf;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: 1px solid white;
	border-radius: 4px;
	cursor: pointer;}
#submit:hover {
	background-color: white;
	border: 1px solid #AB1A00;
	color: #AB1A00;
	width: 100%;
	transition: 1s;
}
#poruka {
	color:#3581dc;
	text-align: center;
	font-size: 20px;}
.mail {cursor: pointer;}


[class*="col-"] {
  float: left;
	}
    .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 (min-width: 767px) {
	
    .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%;}
	
	article {margin: auto 15px;}
	main {width: 85%; margin: 0 auto; overflow: auto; }
	article p {border-bottom: none;}
		#levo {text-align: justify;}
	#mapa {float: left; margin-left: 15px;}
	section {padding-left: 5%;}
	
	
	
	
}
@media only screen and (min-width: 1250px) {
	
	.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%;}	
	
	
	#logo img {width: 20%; float: left; margin-left: 15%;}
	main { width: 1100px; margin: 0 auto; overflow: auto;  }
	article {margin: auto 0;}
	

	.hamburger {visibility: hidden;  }
    .cross {visibility: hidden;}
	.menu {visibility: visible; height: 100px;}
	.menu {
		float: right;
		margin-top: 35px;
		margin-right: 10%;
        display: block !important;
		margin-right: 15%;
	font-size: 20px;}
	.menu li {
		color: white;
		display: inline-block;
		margin-left: 20px;
		border:none;}
	.menu a {border: none; color: white; background-color: #252525; }
	.menu a:hover {background-color: #252525; border-bottom: 2px solid white; }
	#map {height: 400px; width: 400px;}
	
	.slika {float: left; display: inline-block;}
	.uzsliku {overflow: auto; padding-left: 25px; margin-top: none; }
	.razmak {margin-top: 30px;}

	
}