﻿
    
/* --------------------------------------------------------------------------------
Basics
-------------------------------------------------------------------------------- */

*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html
{
    overflow-y: scroll;
}

html, body
{
	width:100%;
}

body
{
	margin:0;
	font-family:Netto;
	position:relative;
	overflow-x:hidden;
	overflow-y:auto;
	text-align:center;
	background-color:#FFF;
}

a
{
    outline:none;
}

.float
{
	margin:0 auto;
	max-width:1024px;
	min-width:320px;
	padding:0 32px;
	text-align:left;
}

/* --------------------------------------------------------------------------------
Navigation Main
-------------------------------------------------------------------------------- */
#header
{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:10;
}

#nav-main-ul
{
	list-style-type:none;
	position:relative;
	top:0;
	transition: all 0.25s ease-in-out;
}

#nav-main-ul.slideup
{
	/*top:-20px;*/
}

#nav-main-ul a, #nav-main-ul h3
{
	display:block;
	width:100%;
	color:rgba(255, 255, 255, 0.75);
	text-decoration:none;
    background-color:rgba(2, 115, 27, 0.75);
	transition: color 0.125s ease-in-out;
    font-weight:bold;
}

#nav-main-ul a:hover, #nav-main-ul li.active > a
{
    color:rgba(255, 255, 255, 1);
}

#nav-main-ul > li
{
	float:left;
	width:calc(25% - 1px);
	margin-left:1px;
}

#nav-main-ul > li:first-child
{
	/*height:136px;*/
	margin-left:0;
    width:178px;
}

#nav-main-ul > li > a
{
	height:85px;
}

#nav-main-ul > li:first-child a
{
	/*height:100%;
	border-radius:0 0 8px 0;*/
    background-color:rgba(255, 255, 255, 0.85);
    border:solid 3px rgba(2, 115, 27, 0.75);
}

#nav-main-ul > li:last-child > a
{
	border-radius:0 0 8px 0;
}

#nav-main-ul > li.animated > a
{
    transition: all 0.125s linear 0.25s;
}

#nav-main-ul > li:last-child:hover > a
{
	border-radius:0;
}

#nav-main-ul > li > a h2
{
	margin:0;
	padding:30px 0 0 20px;
	font-size:20px;
}

#nav-main-ul > li > a p
{
	margin:0;
	padding:6px 20px 0 20px;
	font-size:11px;
	font-weight:bold;
	width:100%;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

#nav-main-ul > li > ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}

#nav-main-ul > li > ul > li > a
{
	font-size:13px;
	padding:6px 0 6px 30px;
}

#nav-main-ul > li > ul > li > h3
{
	font-size:16px;
	padding:12px 0 6px 20px;
	margin:0;
}

#nav-main-ul > li > ul > li:first-child a
{
	padding-top:12px;
}

#nav-main-ul > li > ul > li:last-child a
{
	padding-bottom:12px;
	border-radius:0 0 8px 0;
}

#logo img
{
	/*margin:24px 0 0 20px;
	width:75%;*/
    margin:6px 0 0 20px;
    width:130px;
}

#menu
{
	display:none;
}



/* --------------------------------------------------------------------------------
Navigation Slides
-------------------------------------------------------------------------------- */
#nav-slides
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	color:#FFF;
	z-index:2;
}

#nav-slides-pos
{
	position:absolute;
	bottom:0;
	width:100%;
	height:60px;
}

.nav-slides-horizontal
{
	float:left;
	height:60px;
	cursor:pointer;
	transition: width 0.75s ease-in-out;
}

#nav-slides-left
{
	margin-right:1px;
    background-color:rgba(2, 115, 27, 0.75);
    background-position:50% 50%;
    background-repeat:no-repeat;
	background-image:url(/img/icon-arrow-left.png);
}

#nav-slides-right
{
	background-color:rgba(2, 115, 27, 0.75);
    background-position:50% 50%;
    background-repeat:no-repeat;
	background-image:url(/img/icon-arrow-right.png);
	border-radius:0 12px 0 0;
	width:60px;
}

#nav-slides-vertical
{
	float:left;
	margin-right:1px;
	width:260px;
	height:60px;
	overflow:hidden;
	cursor:pointer;
	transition: all 1.5s ease-in-out;
}

#nav-slides-vertical.rounded
{
	border-radius:0 12px 0 0;
}

#nav-slides-vertical-ul
{
	list-style-type:none;
	margin:0;
	padding:0;
	width:1000%;
	height:100%;
	position:relative;
	top:0;
	left:0;
}

#nav-slides-vertical-ul li
{
	float:left;
	width:10%;
	height:100%;
	
	padding:12px 0 0 55px;
}

.up #nav-slides-vertical-ul li
{
	background-color:rgba(2, 115, 27, 0.75);
    background-position:8px 50%;
    background-repeat:no-repeat;
	background-image:url(/img/icon-arrow-up.png);
}

.down #nav-slides-vertical-ul li
{
    background-color:rgba(2, 115, 27, 0.75);
    background-position:8px 50%;
    background-repeat:no-repeat;
	background-image:url(/img/icon-arrow-down.png);
}


#nav-slides-vertical-ul p
{
	margin:0;
	font-size:10px;
}

#nav-slides-vertical-ul h4
{
	margin:2px 0 0 0;
	font-size:24px;
	text-indent:-1px;
}


/* --------------------------------------------------------------------------------
Slides
-------------------------------------------------------------------------------- */
#slides
{
	width:100%;
	overflow-x:hidden;
}

#slides-ul
{
	width:2000%;
	list-style-type:none;
	margin:0;
	padding:0;
	z-index:1;
	position:relative;
	left:0;
	top:0;
}

#slides-ul li
{
	width:5%;
	float:left;
	overflow:hidden;
	position:relative;
}



/* --------------------------------------------------------------------------------
Visual
-------------------------------------------------------------------------------- */
.visual
{
	position:relative;
	top:0;
	left:0;
	width:100%;
	overflow:hidden;
}

.visual-placeholder
{
	position:relative;
	top:0;
	left:0;
	width:100%;
    height:200px;
}

.visual-bg
{
	position:relative;
	top:0;
	left:0;
	width:100%;
	background-size: cover;
	background-position: 50% 50%;
}

.visual-bg:after
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size: 100% 30%, 100% 30%;
    background-repeat: no-repeat;
    background-position: left top, left bottom;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
	content:"";
}

.visual-bg.home
{
	height:100%;
}

.visual-bg.detail
{
	height:150%;
}



/* --------------------------------------------------------------------------------
Slogan
-------------------------------------------------------------------------------- */
.slogan
{
	position:relative;
    color:rgba(2, 115, 27, 1);
}

.slogan.home
{
	top:-300px;
	margin-bottom:-300px;
	height:300px;
}


.slogan.detail
{
	top:-250px;
	margin-bottom:-250px;
	height:250px;
}

.slogan div
{
	width:80%;
	height:100%;
	padding:40px 30px 0 60px;
	border-radius:0 24px 0 0;
    background-color:rgba(255, 255, 255, 0.85);
}

.slogan h1
{
	margin:0 0 4px 0;
	font-size:42px;
	line-height:44px;
	font-weight:normal;
}

.slogan p
{
	margin:4px 0 0 0;
	font-size:22px;
	line-height:30px;
}

/* --------------------------------------------------------------------------------
Content
-------------------------------------------------------------------------------- */
.content
{
	/*color:#33659b;*/
    /*color:rgba(2, 115, 27, 0.75);*/
    color:rgba(0, 0, 0, 0.75);
	padding-top:36px;
	margin-bottom:12px;
    min-height:400px;
}

.content h1
{
    margin:0 0 30px -5px;
	font-size:64px;
	line-height:70px;
	font-weight:200;
}

.content h2
{
	margin:0 0 12px -2px;
	font-size:22px;
	line-height:30px;
	font-weight:normal;
}

.content h3
{
	margin:0 0 0 0;
	font-size:15px;
	line-height:26px;
}

.content a
{
    color:rgba(2, 115, 27, 0.75);
    text-decoration:none;    
}

.content a:hover
{
    text-decoration:underline;    
}

.content .column
{
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
	-webkit-column-gap:40px;
    -moz-column-gap:40px;
    column-gap:40px;
    padding-bottom:24px;
}

.content .column-2
{
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2;
	-webkit-column-gap:40px;
    -moz-column-gap:40px;
    column-gap:40px;
    padding-bottom:24px;
}


.content .center
{
	width:90%;
	text-align:center;
}

.content p,
.content ul
{
	margin:0 0 24px 0;
	font-size:15px;
	line-height:26px;
}

.content img
{
	margin:0 auto 24px auto;
}

/* --------------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------------- */
#footer
{
    clear:both;
	color:#FFF;
}

#footer-functions
{
	width:100%;
	height:40px;
	border-bottom:solid 1px rgba(255, 255, 255, 0.25);
    border-radius:0 12px 0 0;
    background-color:rgba(2, 115, 27, 0.75);
}

#footer-functions a
{
	display:block;
	float:left;
	height:100%;
	text-decoration:none;
	color:rgba(255, 255, 255, 1);
	font-size:16px;
	font-weight:bold;
	padding:12px 24px 0 24px;
	border-right:solid 1px rgba(255, 255, 255, 0.25);
}

#footer-functions a:hover
{
	color:rgba(255, 255, 255, 1);
    background-color:rgba(255, 255, 255, 0.15);
}


#footer-content
{
	width:100%;
	height:110px;
	background-color:rgba(2, 115, 27, 0.75);
    display:flex;
    /*align-items: flex-end;*/
    color:rgba(255, 255, 255, 1);
}

#footer-legal
{
    clear:both;
    width:100%;
    border-top:solid 1px rgba(255, 255, 255, 0.25);
    color:rgba(255, 255, 255, 0.75);
	font-size: 13px;
    line-height: 19px;
    background-color:rgba(2, 115, 27, 0.75);
    text-align:left;
    padding:12px 24px;
}

.footer-content-box
{
	padding:24px;
}

.footer-content-box:first-child
{
	background-color:rgba(255, 255, 255, 0.85);
    margin-left:3px;
}

.footer-content-box p
{
	margin:0 0 3px 0;
	font-size:13px;
	line-height:19px;
}

.footer-content-box h3
{
	margin:0 0 2px 0;
}


#footer-content a
{
    color:rgba(255, 255, 255, 1);
	text-decoration:none;
}

#footer-content a:hover
{
    color:rgba(255, 255, 255, 1);
}

.footer-content-box .legal
{
	margin-top:28px;
	font-size:12px;
	line-height:21px;
	opacity:0.5;
}

#footer-legal a
{
	color:rgba(255, 255, 255, 0.75);
	text-decoration:none;
}

#footer-legal a:hover
{
	color:rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------------
Form
-------------------------------------------------------------------------------- */

.topLabel
{
    list-style-type:none;
    margin:0 0 24px 0;
    padding:0;
    float:left;
    clear:both;
    width:100%;
}

.topLabel .field
{
    margin-bottom:24px;
}

.formtwo1
{
    float:left;
    width:33.3%;
}

.formtwo2
{
    float:left;
    width:100%;
}

.topLabel label
{
    float:left;
    clear:both;
    font-size:11px;
    margin-bottom:6px;
    transition: all 0.125s ease-in-out;
}

.topLabel input, .topLabel select
{
    float:left;
    clear:both;
    border-top:solid 1px transparent;
    border-right:solid 1px transparent;
    border-bottom:solid 1px rgba(0, 0, 0, 0.25);
    border-left:solid 1px transparent;
    font-size:16px;
    color:rgba(2, 115, 27, 0.75);
    font-weight:normal;
    padding:12px 12px 10px 0;
    width:90%;
    transition: all 0.125s ease-in-out;
}

.textboxmedium textarea
{
    float:left;
    clear:both;
    width:96.6%;
    height:260px;
    font-family:'Segoe UI',Tahoma,Helvetica,Sans-Serif;
    font-size:16px;
    color:rgba(2, 115, 27, 0.75);
    padding:12px 12px 10px 12px;
    border:solid 1px rgba(0, 0, 0, 0.25);
}

.topLabel input[type="submit"]
{
    border:solid 1px rgba(0, 0, 0, 0.25);
    color:rgba(0, 0, 0, 0.75);
    width:130px;
    padding:10px 10px 8px 10px;
    background-color:#FFF;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;

    transition: all 0.125s ease-in-out;
    cursor:pointer;
}

.topLabel input[type="submit"]:hover
{
    border:solid 1px rgba(2, 115, 27, 0.75);
    background-color:rgba(2, 115, 27, 0.75);
    color:#FFF;
}

.topLabel .focus label
{
    color:rgba(2, 115, 27, 0.75);
}

.topLabel .focus input, .topLabel .focus select
{
    border-bottom:solid 1px rgba(2, 115, 27, 0.75);
}

.focus textarea
{
    border-top:solid 1px rgba(2, 115, 27, 0.75);
    border-right:solid 1px rgba(2, 115, 27, 0.75);
    border-bottom:solid 1px rgba(2, 115, 27, 0.75);
    border-left:solid 1px rgba(2, 115, 27, 0.75);
}

.error label
{
    color:rgba(246, 187, 66, 1);
}

.topLabel .error input, .error select, .error textarea
{
    border-bottom:solid 1px rgba(246, 187, 66, 1);
}

.error textarea
{
    border-top:solid 1px rgba(246, 187, 66, 1);
    border-right:solid 1px rgba(246, 187, 66, 1);
    border-bottom:solid 1px rgba(246, 187, 66, 1);
    border-left:solid 1px rgba(246, 187, 66, 1);
}


.error .info
{
    color:rgba(246, 187, 66, 1);
    text-indent:6px;
    font-size:11px;
}

/* --------------------------------------------------------------------------------
Gallery
-------------------------------------------------------------------------------- */
.image-gallery
{
    float:left;
    clear:both;
    width:calc(100% + 24px);
    margin:0 0 0 0;
}

.image-gallery a
{
    width:calc(25% - 24px);
    height:0;
    padding-top:14%;
    margin:0 24px 24px 0;
    float:left;
    -moz-border-radius:15px 0;
    -webkit-border-radius:15px 0;
    border-radius:0;
    background-color:#EEE;
    background-image:url(/images/preloader-gallery.gif);
    background-position: center center; 
    background-repeat:no-repeat;
    transition: border-radius 0.125s ease;
    position:relative;
}

.image-gallery a:hover
{

    -moz-border-radius:35px 0;
    -webkit-border-radius:35px 0;
    border-radius:35px 0;
}

.loaded
{
      border:0;
      margin:0 24px 24px 0;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
