/* CSS Document */
@IMPORT url("main.css");

/* START HERE */

.main {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #f5f5f5;
}

.top-line {
	height: 5px;
}

.top-line li {
	height: 100%;
	width: 20%;
	list-style: none;
	float: left;
	display: block;
}

li.purple {
	background: #941887;
}

li.blue {
	background: #6a90d0;
}

li.red {
	background: #ac1818;
}

.section {
	position: relative;
}

.section.white {
	background: #fff;
}


.section.light-gray {
	background: #f5f5f5;
}

.section.mid-gray {
	background: #ccc;
}

.section.light-blue {
	background: #243C54;
}

.section-divider {
	height: 3px;
	background: #243C54;
	border-top:  1px solid #222;
	box-shadow:  inset 0 1px 0 rgba(255, 255, 255, .1);
}

.banner-logo-wrapper {
	height: 50px;
	padding: 10px 10px 10px 10px;
}

.banner-logo-wrapper img {
	height: 100%;
}

/* MENU */

.navbar {
	margin-bottom: 0; 
}

.navbar-blue {
	border-radius: 0;
	background-color: #243C54;
}

.navbar-blue .navbar-nav li>a {
	color: #dddddd;
	font-size: 16px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.navbar-blue .navbar-nav li:hover>a {
	color: #dddddd;
	background-color: #dc143c;
	font-size: 16px;
}

.navbar-blue .navbar-nav li:active>a {
	color: #dddddd;
	background-color: #B21031;
	font-size: 16px;
}

.navbar-blue .navbar-nav li.active>a, .navbar-blue .navbar-nav li.active:hover>a {
	background-color: #B21031;
}

.navbar-collapse {
	max-height: 400px;
}

/* SLIDE */

.slide-wrapper {
	height: 400px;
	position: relative;
	overflow: hidden;
	margin: 20px 0;
}

.slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.slide.current {
	display: block;
}


.slide-controls {
	width: 100%;
	padding: 10px;
	position: relative;
	text-align: center;
}

.slide-dots {
	width: auto;
	height: auto;
	display: inline-block;
}

.slide-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #aaaaaa;
	background: #c5c5c5;
	margin: 0 5px 0 5px;
	display: inline-block;
}

.slide-dot.current {
	background: #666666;
	border-color: #333333;
}

.slide-dot:hover {
	background: #444444;
	border-color: #333333;
	cursor: pointer;
}

.slide-contents {
	position: relative;
	height: 100%;
	width: 100%;
}

.slide-img {
	height: 100%;
	width: 100%;
	position: absolute;
	text-align: right;
	opacity: .6;
}

.slide-img img {
	height: 100%;
}

.slide-text {
	position: absolute;
	top: 30%;
	z-index: 2;
}

.slide-text div+div+div {
	display: none;
}

.slide-text h1, .slide-text h3, .slide-text h4 {
	padding: 20px;
	margin-bottom: 0;
	margin-top: 15px;
	display: inline-block;
	color: #fff;
	background: #243C54;
	border-radius: 1px;
	border: 1px solid #333;
}

.slide-text h3 {
	background: #dc143c;
	padding: 16px;
}

.slide-text h4 {
	background: #ffffff;
	color: #333;
	border-color: #ddd;
	padding: 16px;
}

/* CONTENT */

.content-wrapper {
	padding: 20px 0;
}

.main-content-wrapper.content-box-inside {
	padding: 20px;
	background: #fff;
	border: 1px solid #ddd;	
}

.content-wrapper .main-content-wrapper h1, .main-content-wrapper h2, .main-content-wrapper h3, .main-content-wrapper h4, .main-content-wrapper p, .main-content-wrapper a {
	color: #333;
}

.content-box-inside .main-content-title h1 {
	color: #666;
	font-size: 25px;
	margin-bottom: 0;
}

.content-box-inside .main-content-text {
	border-top: 1px solid #fff;
	padding-top: 20px;
}

.content-box.mail-content {
	padding-bottom: 50px;
}

.content-box-inside h1, .content-box-inside h2, .content-box-inside h3, .content-box-inside h4, .content-box-inside p, .content-box-inside a {
	color: #fff;
	margin-top: 0;
}

.content-box {
	width: 50%;
	height: 165px;
	
	float: left;
}

.content-box.big {
	width: 100%;
	height: auto;
	position: relative;
}

.content-box-inside {
	position: relative;
	margin: 2.5px;
	padding: 15px;
	width: auto;
	height: 160px;
	
	transition: background-color .2s;
	overflow: hidden;
	
	background: #fff;
	border: 1px solid #aaa;
}

.content-box.big .content-box-inside {
	width: auto;
	height: auto;
}

.bayi-box .content-box-inside {
	background: #333;
}

.content-box-inside.light-blue {
	background: #EA5930;
}

.content-box-inside.red {
	background: #dc143c;
}

.content-box-inside.dark-blue {
	background: #66B3A7;
}

.content-box-inside.orange {
	background: #ff4500;
}

.content-box.big p {
	color: #333;
}
	
.bayi-box h2 {
	font-size: 22px;
}

.bayi-box h4 {
	font-size: 16px;
}

/* SAVE BUTTON*/

.save-button-area {
	position: absolute;
	top: 0;
	right: 0;
	padding: 20px;
}

#saveInline {
	position: relative;
	z-index: 5;
	display: none;
	margin: 0 auto;
}

.content-box:hover #saveInline, .container:hover #saveInline {
	display: block;
}

/* GALLERY */

.content-box-inside.gallery-box-wrapper {
	background:  #222;
	border: 1px solid #ddd;
	padding: 1px;
	cursor: pointer;
}

.gallery-box-wrapper h1, .gallery-box-wrapper h2 {
	padding: 20px;
}

.gallery-box-wrapper h3 {
	padding: 5px 20px;
	padding-top: 20px;
}

.gallery-box-wrapper p {
	padding: 0px 20px;
	padding-bottom: 20px;
}

.gallery-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gallery-box img {
	width: 100%;
	height: 100%;
}

.gallery-box-title.title-hidden {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	background: rgba(0,0,0,.7);
	/*opacity: 0;
	transition: opacity .3s;
	-webkit-transition: opacity .3s;*/
}

.bayi-box:hover .content-box-inside.gallery-box-wrapper {
	background: #333;
}

.gallery-box-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: #243C54;
	opacity: 0;
	
	transition: opacity .3s;
	-webkit-transition: opacity .3s;
	
}

.gallery-box-wrapper:hover .gallery-box-overlay {
	opacity: .8;
}

/*
.gallery-box-wrapper:hover .gallery-box-title.title-hidden {
	opacity: 1;
}
*/

.reference-box .gallery-box-title.title-hidden {
	height: 100%;
	background: rgba(0,0,0,	.3);
}

/* REFERENCES */

.reference-box-wrapper img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: .4;
}

/* MAP */

.container.pull-down {
	padding-top:  400px;
}

.map-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* HOVERS */


.bayi-box:hover .content-box-inside {
	background: #666;
}

/* FOOTER */

.footer-wrapper {
	background-color: #243C54;
	color: #f5f5f5;
}

.footer-wrapper p {
	padding: 20px;
	margin: 0;
}


/* MEDIA QUERIES */

@media (min-width: 768px) {
	
	.banner-logo-wrapper {
		height: 60px;
	}
	
	.slide-wrapper {
		height: 470px;
	}

	.slide-img {
		right: -20px;
		padding: 10px 0;	
	}

	.slide-img img {
		box-shadow: -3px -3px 10px rgba(0,0,0,.3);
	}
	
	.slide-text div+div+div {
		display: block;
	}
	
	.content-box {
		width: 180px;
		height: 145px;
	}

	.content-box.big.contact {
		width: 48%;
		margin-right: 4%;
	}
	
	.content-box.big.contact:last-of-type {
		margin-right: 0;
	}
	
	.content-box.big {
		width: 360px;
		height: 435px;
	}
	
	.content-box.big.auto-height {
		height: auto;
	}
	
	.content-box.big.auto-height .content-box-inside {
		height: auto;
	}
	
	.content-box-inside {
		width: 175px;
		height: 140px;
	}
	
	.content-box.big .content-box-inside {
		width: 355px;
		height: 430px;
	}
	
	.bayi-box h2 {
		font-size: 20px;
	}
	
	.bayi-box h4 {
		font-size: 14px;
	}
	
	.bayi-box h3 {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	
	.banner-logo-wrapper {
		height: 70px;
	}
	
	.slide-wrapper {
		height: 530px;
	}
	
	.content-box {
		width: 188px;
		height: 145px;
	}

	.content-box.big.contact {
		width: 48%;
		margin: 1%;
	}
	
	.content-box.big.contact:last-of-type {
		margin-right: 0;
	}
	
	.content-box.big {
		width: 376px;
		height: 435px;
	}
	
	.content-box.big.auto-height {
		height: auto;
	}
	
	.content-box.big.auto-height .content-box-inside {
		height: auto;
	}
	
	.content-box-inside {
		width: 183px;
		height: 140px;
	}
	
	.content-box.big .content-box-inside {
		width: 371px;
		height: 430px;
	}
	
	.bayi-box h2 {
		font-size: 20px;
	}
	
	.bayi-box h4 {
		font-size: 14px;
	}
	
	.bayi-box h3 {
		font-size: 16px;
	}
}

@media (min-width: 1200px) {
	
	.banner-logo-wrapper {
		height: 90px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.slide-wrapper {
		height: 600px;
	}	
	.content-box {
		width: 228px;
		height: 170px;
	}

	.content-box.big.contact {
		width: 48%;
		margin: 1%;
	}
	
	.content-box.big.contact:last-of-type {
		margin-right: 0;
	}
	
	.content-box.big {
		width: 456px;
		height: 510px;
	}
	
	.content-box.big.auto-height {
		height: auto;
	}
	
	.content-box.big.auto-height .content-box-inside {
		height: auto;
	}
	
	.content-box-inside {
		width: 223px;
		height: 165px;
	}
	
	.content-box.big .content-box-inside {
		width: 451px;
		height: 505px;
	}
	
	.bayi-box h2 {
		font-size: 24px;
	}
	
	.bayi-box h4 {
		font-size: 16px;
	}
	
	.bayi-box h3 {
		font-size: 18px;
	}
}