/* ==========================================================================
   Body
   ========================================================================== */

body {
    background: url(../images/body-bg.jpg) no-repeat top center fixed;
	background-size: cover;
    color: #000;
	font-size: 14px;
	line-height: 1.42857;
 	font-family: Arial, Helvetica Neue, Helvetica, sans-serif; 
}


/* ==========================================================================
   Base
   ========================================================================== */

a { color: #2b8eb3; text-decoration: none;}
a:hover { color: #405f71;}
a:focus { outline: none;}

h1, h2, h3, h4, h5, h6 { margin: 0; color: #214253; font-weight: bold; line-height: 1.2;}
p { margin-top: 0;}
hr { height: 0; border: 0; border-top: 1px solid #ccc;} 

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


/* ==========================================================================
   Container
   ========================================================================== */

.container {
	position: relative;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}
.container .row { margin-left: -20px;}

.container-fluid {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-right: 15px;
	padding-left: 15px;
}
.container-fluid .row { margin-right: -15px; margin-left: -15px;}


/* ==========================================================================
   Sticky-image
   ========================================================================== */
.sticky .sticky-image {
    position:  fixed;
    top: 0;
}

.sticky-image {
    position:  absolute;
    z-index:  999;
}


/* ==========================================================================
   Header
   ========================================================================== */

.header {
	height: 150px;
	margin-top: 70px;
}

/* slogan */
.slogan {
	width: 937px;
	margin: 40px auto 0 auto;
}


/* ==========================================================================
   Topbar
   ========================================================================== */

.topbar {
	height: 80px;
	padding-top: 18px;
	background-color: #2b8eb3;
	color: #fff;
	font-size: 18px;
	text-align: center;
	text-transform: uppercase;
}
.topbar .text-large {
	line-height: 1;
	font-size: 25px;
	font-weight: bold;
}


/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
	height: 40px;
	background-color: #405f71;
}

/* Menu
   ========================================================================== */
.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.menu > li {
	display: inline-block;
	color: #fff;
	font-size: 15px;
	line-height: 40px;
	text-transform: uppercase;
}
.menu > li.divider { margin: 0 5px;}
.menu > li > a {
    display: block;
	height: 40px;
	color: #fff;
	text-decoration: none;
	transition: color 0.3s;
}
.menu > li > a:hover, .menu > li.active > a { color: #fff; text-decoration: underline;}

/* menu > ul */
.menu > li > ul { display: none;}


/* ==========================================================================
   Wrapper
   ========================================================================== */

.wrapper {
	background-color: rgba(255,255,255,0.65);
}


/* ==========================================================================
   Main
   ========================================================================== */

.main {
	padding: 60px 40px 60px 70px;
}


/* ==========================================================================
   Content
   ========================================================================== */

.content h1 { font-size: 24px; margin-bottom: 20px;}
.content h2 { font-size: 20px; margin-bottom: 14px;}
.content h3 { font-size: 16px; margin-bottom: 2px;}
.content img, .content iframe { border: none;}
.content img { max-width: 100%; height: auto;}

/* left/right */
.content-left { float: left; width: 48%;}
.content-right { float: right; width: 48%;}


/* ==========================================================================
   Photoalbum
   ========================================================================== */

.photoalbum .thumb {
    position: relative;
    display: block;
    float: left;
    width: 200px;
    margin: 0 0 20px 20px;
    overflow: hidden;
}
.photoalbum .thumb img { transition: all 0.5s ease;}
.photoalbum .thumb:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.photoalbum .thumb .name {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;
    line-height: 30px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
}


/* ==========================================================================
   Photoalbum-slider
   ========================================================================== */

.photoalbum-slider {
	position: relative;
	background-color: rgba(184,120,123,0.8);
	padding: 30px 70px;
}
.photoalbum-slider .flex-viewport { padding: 0 3px 3px 0;}
.photoalbum-slider li {
	float: left;
	width: 255px;
	margin-right: 26px;	
	box-shadow: 3px 3px 0px #edddde;
}

/* Flex-direction-nav */
.photoalbum-slider .flex-direction-nav a { display: block; position: absolute; top: 50%; margin-top: -20px; z-index: 50; transition: all 0.3s ease; color: rgba(255,255,255,0.85); cursor: pointer; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);}
.photoalbum-slider .flex-direction-nav a i { font-size: 40px;}
.photoalbum-slider .flex-direction-nav .flex-prev { left: 20px;}
.photoalbum-slider .flex-direction-nav .flex-prev:hover { left: 18px;}
.photoalbum-slider .flex-direction-nav .flex-next { right: 20px;}
.photoalbum-slider .flex-direction-nav .flex-next:hover { right: 18px;}
.photoalbum-slider .flex-direction-nav .flex-disabled { display: none;}


/* ==========================================================================
   Partners
   ========================================================================== */

.partners {
	margin: 30px 0;
	padding: 10px 0;
	background-color: rgba(159,162,129,0.8);
	color: #fff;
	text-align: center;
}
.partners .column {
	display: inline-block;
	margin: 0 20px;
}


/* ==========================================================================
   Contact-form
   ========================================================================== */

.contact-form table { width: 100%;}
.contact-form table tr td { padding-bottom: 3px;}
.contact-form small { color: #f00;}


/* ==========================================================================
   Images
   ========================================================================== */
 
.image img {
    display: block;
    max-width: 100%;
    height: auto;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.img-rounded { border-radius: 6px;}
.img-circle { border-radius: 50%;}
.img-thumbnail {
    padding: 4px;
    border: 1px solid #ddd;
    background-color: #fff;
}


/* ==========================================================================
   CSS3 transition
   ========================================================================== */

.btn { transition: background 0.3s ease;}
a { transition: all 0.3s ease;}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-block;
	padding: 5px 12px;
	border: none;
	border-radius: 2px;
	background-color: #405f71;
	color: #fff;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.btn:hover { background-color: #2b8eb3; color: #fff;}

.btn-block {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Size
   ========================================================================== */
.btn-large { padding: 6px 14px; font-size: 15px;}
.btn-small { padding: 2px 8px; font-size: 12px;}
.btn-mini { padding: 0 6px; font-size: 11px;}


/* ==========================================================================
   Forms
   ========================================================================== */

.form-horizontal .form-group label {
	display: inline-block;
	margin-right: 20px;
    margin-bottom: 0;
}
.form-group {
	margin-bottom: 10px;
}
label {
    display: block;
    margin-bottom: 5px;
}
select,
textarea,
input[type="text"],
input[type="password"] {
	display: inline-block;
	height: 30px;
	padding: 5px 6px;
	vertical-align: middle;
	border-radius: 2px;
	color: #595959;
	line-height: 20px;
}
input,
select,
textarea {
	width: 220px;
}
select,
textarea,
input[type="text"],
input[type="password"] {
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
select.invalid,
textarea.invalid,
input[type="text"].invalid,
input[type="password"].invalid {
	border: 1px solid #d44950;
}
select.invalid:focus,
textarea.invalid:focus,
input[type="text"].invalid:focus,
input[type="password"].invalid:focus {
	border: 1px solid #d44950;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d44950;
}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
	border-color: rgba(82, 168, 236, 0.8);
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
	width: auto;
}
select[multiple],
select[size],
textarea {
	height: auto;
}
select,
input[type="radio"],
input[type="checkbox"] {
	cursor: pointer;
}

/* Size
   ========================================================================== */	
.input-mini { width: 50px;}
.input-small { width: 110px;}
.input-medium { width: 170px;}
.input-large { width: 260px;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.pull-left { float: left;}
.pull-right { float: right;}

.text-left { text-align: left;}
.text-right { text-align: right;}
.text-center { text-align: center;}


/* ==========================================================================
   Clearing
   ========================================================================== */

.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.clear:before,
.clear:after,
.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}
.container:after,
.container-fluid:after,
.row:after,
.clear:after,
.clearfix:after {
	clear: both;
}


/* ==========================================================================
   Grid system
   ========================================================================== */

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
@media (min-width: 768px) {
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left;}
	.col-12 { width: 100%;}
	.col-11 { width: 91.66666667%;}
	.col-10 { width: 83.33333333%;}
	.col-9 { width: 75%;}
	.col-8 { width: 66.66666667%;}
	.col-7 { width: 58.33333333%;}
	.col-6 { width: 50%;}
	.col-5 { width: 41.66666667%;}
	.col-4 { width: 33.33333333%;}
	.col-3 { width: 25%;}
	.col-2 { width: 16.66666667%;}
	.col-1 { width: 8.33333333%;}
}


/* ==========================================================================
   Responsive utility classes
   ========================================================================== */

.visible-phone { display: none !important;}
.visible-tablet { display: none !important;}
.hidden-desktop { display: none !important;}
.visible-desktop { display: inherit !important;}

@media (min-width: 768px) and (max-width: 979px) {
	.hidden-desktop { display: inherit !important;}
	.visible-desktop { display: none !important;}
	.visible-tablet { display: inherit !important;}
	.hidden-tablet { display: none !important;}
}
@media (max-width: 767px) {
	.hidden-desktop { display: inherit !important;}
	.visible-desktop { display: none !important;}
	.visible-phone { display: inherit !important;}
	.hidden-phone { display: none !important;}
}


/* ==========================================================================
   FlexSlider
   ========================================================================== */

.slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none;}
.slides > li { display: none; -webkit-backface-visibility: hidden;}
.slides img { width: 100%; display: block;}

.slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides { display: block;}
* html .slides { height: 1%;}
.no-js .slides > li:first-child { display: block;}


/* ==========================================================================
   Logo-3w
   ========================================================================== */
   
.logo-3w { display: block; position: fixed; right: 5px; bottom: 5px; width: 20px; height: 20px; background: url(../images/logo-3w.png);}