@font-face{
	font-family:'Hero';
	src:url(../fonts/Hero.otf);
	/*www.fontfabric.com*/
}

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

body {
	margin-top: 50px; /* navbar height */
	/*background:#f0fafd; /*#1185a5*/ /*#0da3d8*/
	background:url(../images/paper_bg.jpg) repeat;
	overflow-x:hidden;
	font-family:'Hero';
}

@media (min-width:1367px)
{
	.wide-image-2 {
	background:url(../images/team_small_new.jpg) no-repeat center center;
	text-align: center;
	min-height: 282px;
	max-width:100%;
	box-shadow: 0px 10px 12px 2px #f8fdff;
}
}

@media (max-width:767px) 
{
	.wide-image-1 {
	background: url(../images/main_small.jpg) no-repeat center center;
	text-align: center;
	height: 511px;
	margin-top:80px;
	max-width:100%;
	box-shadow: 0px 6px 8px 2px #f8fdff;
}

.wide-image-2 {
	background:url(../images/team_small_new.jpg) no-repeat center center;
	text-align: center;
	height: 282px;
	max-width:100%;
	box-shadow: 0px 10px 12px 2px #f8fdff;
}

.wide-image-3 {
	background:url(../images/team_comp_small.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	height: 511px;
	max-width:100%;
	box-shadow: 0px 2px 2px 3px #339cab;
}
}

@media (max-width:767px) and (orientation:portrait) {
	
.wide-image-1 {
	background: url(../images/main_small2.jpg) no-repeat center center;
	text-align: center;
	height: 333px;
	margin-top:80px;
	max-width:100%;
	box-shadow: 0px 6px 8px 2px #f8fdff;
}

.wide-image-2 {
	background:url(../images/team_small2_new.jpg) no-repeat center center;
	text-align: center;
	height: 165px;
	max-width:100%;
	box-shadow: 0px 10px 12px 2px #f8fdff;
}

.wide-image-3 {
	background:url(../images/team_comp_small2.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	height: 200px;
	max-width:100%;
	box-shadow: 0px 2px 2px 3px #339cab;
}
}

@media (min-width:768px) 
{
.wide-image-1 {
	background: url(../images/drugi.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	height: 800px;
	margin-top:80px;
	box-shadow: 0px 2px 2px 3px #339cab;
}

.wide-image-2 {
	background:url(../images/trojica4_new.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	min-height: 500px;
	box-shadow: 0px 2px 2px 3px #339cab;
}

.wide-image-3 {
	background:url(../images/team_comp.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	min-height: 500px;
	box-shadow: 0px 2px 2px 3px #339cab;
}
}

/*slike na rezoluciji > 1600 px širine */

@media (min-width:1498px) 
{
.wide-image-1 {
	background: url(../images/drugi.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	height: 800px;
	margin-top:80px;
	box-shadow: 0px 2px 2px 3px #339cab;
}

.wide-image-2 {
	background:url(../images/trojica5_new.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	min-height: 500px;
	box-shadow: 0px 2px 2px 3px #339cab;
}

.wide-image-3 {
	background:url(../images/team_comp.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	min-height: 500px;
	box-shadow: 0px 2px 2px 3px #339cab;
}
}
/* kraj 1600px */

.logo-wrapper {
	margin-right:150px;
	margin-top:75px;
}

@media (max-width:767px)
{
	.logo-wrapper {
		margin-right:175px;
		margin-top:40px;
		font-size:0.6em;
	}
}

.section {
	padding-top: 40px;
	padding-bottom: 55px;
}

.section-heading {
	text-align:center;
	font-size: 50px;
	margin: 0px 0;
	font-family:'Hero';
}

.section-heading2 {
	text-align:center;
	font-size:23px;
	margin:0px 0;
	font-family:'Hero';
}

.section-lead {
	margin: 30px 0;
	text-align:center;
	font-family:'Hero';
}

.section-paragraph {
	margin-top: 30px;
	margin-bottom: 0;
	text-align:center;
}

#we_do {
	padding-top:5px;
}

.par1 {
	font-family:'Hero';
	font-size:16px;
	text-align:justify;
}

footer {
	margin-top: 50px;
	background:#339cab;
	height:150px;
}

.footer-left {
	float:left;
	color:#f8fdff;
	margin-left:25px;
	margin-top:50px;
}

.footer-right {
	float:right;
	margin-right:104px;
	margin-top:25px;
}

.connect {
	color:#f8fdff;
	font-size:24px;
	font-family:'Hero';
	margin-top:40px;
}

.luka {
	background:url(../images/rukonic.png);
	width:200px;
	height:196px;
}

.davor {
	background:url(../images/zupicic.png);
	width:200px;
	height:196px;
}

.seba {
	background:url(../images/santrac.png);
	width:200px;
	height:211px;
}

.nikola {
	background:url(../images/curilovic.png);
	width:200px;
	height:218px;
}

@media (max-width:767px) and (orientation:portrait)
{
	.footer-left {
		margin-top:15px;
	}
	.footer-right {
		float:right;
		margin-right:25px;
		margin-top:8px;
	}
	
	.connect {
	color:#f8fdff;
	font-size:16px;
	font-family:'Hero';
	}

#social ul {
	float:right;
	padding-left:10px;
	
}

#social > .list-inline {
	padding-right:0px;
}

#social > .list-inline > li {
	margin-left:10px;
}
}

#social ul {
	float:right;
	margin-right:150px;
	
}

#social > .list-inline {
	padding-right:35px;
}

#social > .list-inline > li {
	margin-left:10px;
}

#social img {
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

#social img:hover {
	transform:rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-o-transform: rotate(-7deg)
}

#social img:focus {
	outline:none,
}

.container2 {
	width:100%;
}

.footer {
	background-size:cover;
	text-align:center;
	min-height:150px;
	background:#339cab;
}

.navbar {
	background:#bacfdb;
	opacity:0.9;
	border-bottom:2px solid;
	border-bottom-color:#339cab;
}

.logo-small {
	background:url(../images/wheeHat.gif) no-repeat;
	width:80px;
	height:46px;
	float:left;
	padding-left:50px;
	margin-right:10px;
	margin-top:20px;
	margin-bottom:5px;
}

.contact1 {
	font-size:18px;
	font-weight:bold;
}

@media (max-width: 768px) {

.section-heading {
	font-size: 16px;
}

.section {
	padding-top: 25px;
	padding-bottom: 25px;
}

}

.navbar {
	background:#000000;
}

@media (max-width:767px) {
.navbar-nav {
	margin-left:0;
}

.navbar-header {
	height:80px;
}
}

@media (min-width:1600px) {
	.navbar-nav {
	padding-left:150px;
}
}

@media (min-width:960px) {
	.navbar-nav {
	padding-left:90px;
}
}

@media (max-width:1280px) 
{
	.navbar-nav {
		padding-left:30px;
	}
	
	.navbar-nav li {
		margin:0 auto;
		
	}
}

@media (min-width:768px) {
	.navbar-nav {
		padding-left:120px;
	}
}
 
.navbar-inverse .navbar-nav li a {
	color:#339cab;
}
.navbar-nav li a {
	font-weight:bold;
	font-size:18px;
}

.navbar.sticky {
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #252525; }

.navbar.sticky .container {
      margin-top: 0px !important;
      margin-bottom: 0px !important; }
	  
	  /*Contact form */
	
#feedback-page{
	text-align:center;
}

@media (min-width:1024px) {
#form_main{
	width:600px;
	padding-top:0px;
	padding-left:0px;
	margin:0 auto;
}

#form_div {
	background-color:rgba(72,72,72,0.4);
	padding-left:35px;
	padding-right:35px;
	padding-top:30px;
	padding-bottom:36px;
	width: 500px;
	float:none;
	left:auto;
	margin:0 auto;
	position:relative;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}
}

@media (max-width:1023px) {
#form_main{
	width:600px;
	padding-top:0px;
	padding-left:0px;
	margin:0 auto;
}

#form_div {
	background-color:rgba(72,72,72,0.4);
	padding-left:35px;
	padding-right:35px;
	padding-top:30px;
	padding-bottom:36px;
	width: 500px;
	float:none;
	left:auto;
	margin:0 auto;
	position:relative;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}
}

@media only screen (min-width:768px) {

#form_main{
	width:600px;
	padding-top:0px;
	padding-left:0px;
	margin:0 auto;
}

#form_div {
	background-color:rgba(72,72,72,0.4);
	padding-left:35px;
	padding-right:35px;
	padding-top:30px;
	padding-bottom:36px;
	width: 500px;
	float:none;
	left:auto;
	margin:0 auto;
	position:relative;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}
}

@media (max-width:480px){
	#form_main{
	width:290px;
	padding-top:0px;
	}
	
	#form_div {
	background-color:rgba(72,72,72,0.4);
	padding-left:15px;
	padding-right:15px;
	padding-top:10px;
	padding-bottom:16px;
	width: 290px;
	float: left;
	left:0;
	position:relative;
  margin-top:10px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}
}

@media only screen (max-width: 767px) {
	#form_main{
	width:250px;
	padding-top:0px;
	}
	
	#form_div {
	background-color:rgba(72,72,72,0.4);
	padding-left:15px;
	padding-right:15px;
	padding-top:10px;
	padding-bottom:16px;
	width: 400px;
	float: left;
	left:5%;
	position:relative;
    margin-top:10px;
	margin:0 auto;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
#form_main{
	width:400px;
	padding-top:0px;
	margin:0 auto;
	}
	
	#form_div {
	background-color:rgba(72,72,72,0.4);
	padding-left:15px;
	padding-right:15px;
	padding-top:10px;
	padding-bottom:16px;
	width: 400px;
	float: left;
	left:5%;
	position:relative;
    margin-top:10px;
	margin:0 auto;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}
} 

.feedback-input {
	color:#339cab;
	font-family:'Hero';
  font-weight:300;
	font-size: 18px;
	border-radius: 0;
	line-height: 22px;
	background-color: #fbfbfb;
	padding: 13px 13px 13px 54px;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 3px solid #42c0af;
	color: #339cab;
	outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
	color:#30aed6;
	border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */

#name{
	background-image: url(../images/name.png);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#name:focus{
	background-image: url(../images/name.png);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email{
	background-image: url(../images/mail.png);
	background-size: 30px 22px;
	background-position: 11px 13px;
	background-repeat: no-repeat;
}

#email:focus{
	background-image: url(../images/mail.png);
	background-size: 30px 22px;
  	background-position: 11px 13px;
	background-repeat: no-repeat;
}

#comment{
	background-image: url(../images/comment.png);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

textarea {
	width: 100%;
	height: 150px;
	line-height: 150%;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}

#button-blue{
	font-family:'Hero';
	float:left;
	width: 100%;
	border: #fbfbfb solid 4px;
	cursor:pointer;
	background-color: #339cab;
	color:white;
	font-size:22px;
	padding-top:18px;
	padding-bottom:17px;
	-webkit-transition: all 0.7;
	-moz-transition: all 0.7s;
	transition: all 0.7s;
  margin-top:-4px;
  font-weight:700;
}

#button-blue:hover{
	background-color: rgba(0,0,0,0);
	color: #0493bd;
}
	
.submit:hover {
	color: #3498db;
}
	
.ease {
	width: 0px;
	height: 63px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}

.heading1 {
	font-family:"Segoe Print";
}

@media only screen and (min-width: 480px) and (max-width: 767px)
{
	.bigheading {
	font-size:14px;
	color:#4e5251;
	text-transform:none;
	font-family:'Hero';
}

	.bigheading2 {
	font-size:14px;
	color:#006f7f;
	text-transform:none;
	font-family:'Hero';
	margin-right:50px;
}
}

.bigheading {
	font-size:36px;
	color:#4e5251;
	text-transform:none;
	font-family:'Hero';
	text-align:center;
}

.bigheading2 {
	font-size:28px;
	color:#006f7f;
	text-transform:none;
	font-family:'Hero';
}

.appheading {
	color:#000000;
	font-weight:bold;
	font-size:20px;
}

.app {
	max-width:300px;
	max-height:180px;
	text-align:justify;
}

.pushtop {
	padding-top:40px;
}

.pushleft {
	float:left;
	margin-left:50px;
}

.member {
}

.member p {
	margin-top:10px;
	text-align:center;
	font-family:'Hero';
	font-size:22px;
}
.member p:nth-child(2) {
	font-size:18px;
	text-align:center;
}

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: #f8fdff;
	font-weight: 800;
	text-shadow: none;
	font-size:16px;
}

.cl-effect-15 a::before {
	color: #f8fdff;
	content: attr(data-hover);
	position: absolute;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	font-size:16px;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0;
	font-size:16px;
}

.label1 {
	float:left;
}

.navbar-nav li a img {
	margin-right:10px;
}

.navbar-nav {
	float:none;
}


@media (min-width:1700px) {
		.navbar-nav {
			position:absolute;
			margin-left:300px;
}
}

.caps {
	text-transform:uppercase;
}

.center {
	text-align:center;
}

.logo-wrapper h1 {
	font-size:8.5em;
}

.wheehat1 {
	width:65px;
	height:30px;
	margin-top:-5px;
}

.projects {
	margin-top:60px;
	padding-top:20px;
	margin-bottom:20px;
	background:#50bfcf;
	border-radius:12px;
}

.wheetap_txt {
	font-size:18px;
}

@media (min-width:968px)
{
	.wheetap_txt {
		margin-top:30px;
		font-size:18px;
	}
}

.ctap {
	margin-left:65px;
}

.projects2 {
	margin-bottom:20px;
}

.container > .navbar-header a:focus {
	outline:none;
}