@charset "UTF-8";
/* CSS Document

blue #0077bf
yellow #f4bf3e   hover #ffcf4e
dark grey #333
light grey #eee


*/

body {
	background-color:#fff;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	color:#666;
}

.container {
	position:relative;

}

h1, h2, h3, h4 {
	color:#0077bf;
	padding-bottom:15px;
}

h1 {
	font-size:40px;
}

h2 {
	font-size:34px;
	
}

h3 {
	font-size:24px;	
}

h4 {
	font-size:20px;
}

p {
	padding-bottom:15px;
	font-size: 16px;
}

.btn {
	border:none;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	font-size:16px;
	padding:15px 30px;
}
	
.btn-default {
	background:none;
	background-color:#0077bf;
	color:#fff;
	text-shadow:none;
}

.btn-default:hover {
	border:none;
	background-color:#f4bf3e;
	color:#333;
	transition:all 200ms;
}

.btn-primary {
	background:none;
	background-color:#f4bf3e;
	color:#333;
}

.form-control {
	border:none;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	font-size:16px;
	margin-bottom:15px;
}

.section {
	padding:60px 0px;
}

.section h2, .section h3, .section h4, .section p {
	text-align:center;
}

.section.contacts h2, .section.contacts h3, .section.contacts h4, .section.contacts p {
	text-align:left;
}


.section h4 {
	color:#666;
}

.section p {
	text-align:justify;	
}

.section .box {
	height:300px;
	background-color:#eee;
	border-top:15px solid #0077bf;
	-webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    4px 4px 10px 0px rgba(0, 0, 0, 0.5);
	box-shadow:         4px 4px 10px 0px rgba(0, 0, 0, 0.5);
}

.section .box p {
	text-align:center;
}

.section .box .cover {
	height:285px;
	overflow:hidden;
}

.section .box .cover a img {
	height:100%
}

.section .box p {
	padding:15px;
}

.section .box a.btn {
	position:absolute;
	bottom:0px;
}

.breadcrumb {
	background:none;
	padding:10px 0px;
}

/* HOME */


.section.services {
	background-color:#fafafa;
}

.section.customers {
	background-color:#fff;
}

.carousel h1, .carousel h4, .carousel p, .carousel a  {
		text-align:left;
}

.carousel-caption {
	top:60px;
		
}

.owl-controls {
	width:100%;
	color:#999;
}

.owl-prev {
	position:absolute;
	top:30%;
	left:0px;
	opacity: 0.75;
	transition:opacity 400ms;
}
	
.owl-next {
	position:absolute;
	top:30%;
	right:0px;
	opacity: 0.75;
	transition:opacity 400ms;
}

.owl-prev:hover, .owl-next:hover {
	opacity: 1;
	transition:opacity 400ms;
}

.owl-carousel .owl-item {
	text-align:center;
}

.owl-carousel .owl-item a {
	line-height: 120px;
	height:120px;
}

.owl-carousel .owl-item img {
	max-height:120px;
	max-width:200px;
	width:80%;
	display:inline-block;
	vertical-align:middle;
}


.customers-list li {
	list-style-type:none;
	padding:0px;
	margin:0px;
	height:200px;
	line-height:200px;
	text-align:center;
}

.customers-list li img {
	vertical-align:middle;
	max-height:100px;
	max-width:200px;
	display:inline-block;
}

.gallery img {
	margin-bottom:30px;
}

/* FLIPCARDS */

.panel {
		margin:0 auto;
		width:100%;
		height:300px;
		
		float: left;
	
		position: relative;
		font-size: .8em;

		-webkit-perspective: 600px;
		-moz-perspective: 600px;
		perspective: 600px;
	}
	/* -- make sure to declare a default for every property that you want animated -- */
	/* -- general styles, including Y axis rotation -- */
	.panel .front {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #6b7077;
		text-align: center;
		
		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}
	.panel.flip .front {
		z-index: 900;
		border-color: #eee;
		background: #333;
		

		-webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
						transform: rotateY(180deg);
	}

	.panel .back {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 800;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #333;
	

		-webkit-transform: rotateY(-180deg);
			 -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
						transform: rotateY(-179deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}

	.panel.flip .back {
		z-index: 1000;
		background: #80868d;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

	}

	/* -- X axis rotation for click panel -- */
	.click .front {
		cursor: pointer;
		-webkit-transform: rotateX(0deg);
			 -moz-transform: rotateX(0deg);
						transform: rotateX(0deg);
	}
	.click.flip .front {
		-webkit-transform: rotateX(180deg);
			 -moz-transform: rotateX(180deg);
						transform: rotateX(180deg);
	}
	.click .back {
		cursor: pointer;
		-webkit-transform: rotateX(-180deg);
			 -moz-transform: rotateX(-180deg);
						transform: rotateX(-180deg);
	}
	.click.flip .back {
		-webkit-transform: rotateX(0deg);
			 -moz-transform: rotateX(0deg);
						transform: rotateX(0deg);
	}

/* STRUCTURE */

#header {
	background-color:#fff;
	text-align:center;
	padding:40px 0px;
}

#header img {
	display:inline-block;
	max-width:80%;
}

#body {
	background-color:#fff;
}

#mainmenu {
	background-color:#0077bf;
	color:#333;
}

button.navbar-toggle {
	background-color:#f4bf3e;
	border:#333;
}


.navbar-default {
	background:none;
	border:none;
	box-shadow:none;
	color:#fff;
}

.navbar-collapse {
	border:none;
	box-shadow:none;
	z-index:100;
	padding:0px;
	overflow:hidden;
}

.nav li {
	padding:0px;
	text-align:center;
	color:#fff;
	margin:0px;
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:visited, .navbar-default .navbar-nav > li > a:focus{
	color:#fafafa;
	padding:30px 60px;
	font-size:20px;
	text-shadow:none;
}

.navbar-default .navbar-nav > li > a:hover {
	background-color:#0088cf;
	color:#fff;
	text-shadow:none;
	
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #0088cf;
    color: #fff;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:visited {
	background:none;
	background-color:#f4bf3e;
	box-shadow:none;
	color:#333;
	font-weight:bold;
	text-shadow:none;
}

.navbar-default .navbar-nav > .active > a:hover {
	background-color:#ffcf4e;
	color:#444;
	text-shadow:none;
}

.nav li.active {
	
}

.navbar-nav > li > .dropdown-menu {
	background:none;
	background-color:#f4bf3e;
	box-shadow:none;
	color:#333;
	font-weight:bold;
	text-shadow:none;
	font-size:20px;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:active {
	background:none;
	background-color:#ffcf4e;
	color:#444;
}


.navbar-right {
	float:right;
	margin-top:12px;
}

.navbar-form {
	box-shadow:none;
	border:none;
}

.navbar-nav {
	margin:0px;
	}

.navbar-default button.navbar-toggle {
	background-color:#f4bf3e;
	color:#333;
}

.navbar-default button.navbar-toggle:hover {
	background-color:#ffcf4e;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color:#333;	
}


/* FOOTER */


#footer {
	background-color:#0077bf;
	color:#fff;
	padding:60px 0px;
}

#footer p {
	text-align:left;
	font-size:16px;
}

#footer h2 {
	color:#fff;	
}

#footer h3 {
	color:#f4bf3e;
}

#footer a {
	color:#fff;
}

#contactform .form-error {
    color: #ff2200;
}

/* CREDITS */

#credits {
	background-color:#333;
	color:#999;
	padding-top:30px;
}

#credits p {
	text-align:center;
}
	

/* LINKS */

a {
	color:#999;
}


a:hover, a:active {
	color:#999;
}

#credits a {
	color:#999;
}

.navbar-nav > li > a {
	padding:20px 10px;
}


/* MEDIA QUERIES */

@media (max-width: 992px) {
	.navbar-default .navbar-nav > li > a {
		padding:30px;	
	}
}

@media (max-width: 768px) {
	
	.carousel-caption {
		top:0px;
		
	}
	
	.carousel-caption h1 {
		margin-top:0px;
	}
	
	.carousel-caption h4 {
		display:none;
	}
	
	.carousel-indicators {
		display:none;
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		background:none;
	background-color:#f4bf3e;
		
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:active {
		background:none;
	background-color:#ffcf4e;
		
	}
	
	.navbar-collapse.in {
		overflow:hidden;
		max-height:600px;
	}

	
	.navbar-nav > li > a {
		padding:10px 0px;	
	}
	
	.navbar-right {
		float:none;
		margin-top:0px;
	}
	
	.panel {
		margin-bottom:30px;
	}
	
	
}