/* CSS Document */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input[type=text],input[type=button],input[type=submit],input[type=password],select{vertical-align:middle}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
margin:0;
padding:0;
color: #666666;
line-height: 1.450;
background-color:#F4F4F4;
}

body, p, td, td p {
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p {
margin-bottom:20px;
}

h1 {
font-size: 22px;
font-weight:normal;
}

h2 {
font-size: 16px;
color: #333;
font-weight: 600;
letter-spacing: -0.2px;
}

h3 {
color:#333333;
font-weight:600;
font-size:13px;
text-decoration:underline;
}

h4 {
font-weight: 600;
color: #333;
font-size:13px;
margin-bottom:0;
}

a:active, a:focus { 
outline: 0; 
} 

a {
color: #887FBF;
text-decoration: none;
}

a:hover, a:focus {
color: #887FBF;
}

input[type=text], input[type=email],input[type=button],input[type=submit],input[type=password], textarea {
-webkit-appearance: none;
font-family:"Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
border: 1px solid #e0e0e0;
padding: 8px 9px;
outline: none;
color: #888;
margin: 0;
max-width: 100%;
display: block;
background: #fff;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
border-radius: 2px;
}

input[type=submit] {
background: #887FBF;
color:#FFFFFF;
padding:8px 15px;
border:none;
cursor:pointer;
}

#content img[style*="left"], #content img[align="left"] { margin: 0 20px 10px 0; }
#content img[style*="right"], #content img[align="right"] { margin: 0 0 10px 20px; }

#content img {
max-width:100%;
height:auto;
}

#headerwrapper {
width:100%;
height:auto;
padding:0 20px;
}

#header {
background-color: #fff;
width:100%;
max-width: 1020px;
margin: 0 auto;
padding:0 15px;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
}

#logo img {
max-width:100%;
height:auto;
}

#navwrapper {
width:100%;
height:auto;
padding:0 10px;
}

#nav {
background-color: #887FBF;
width:100%;
max-width: 1040px;
height:50px;
margin: 0 auto;
position:relative;
}

#nav:before {
display:block;
content:"";
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 9px 0;
border-color: transparent #888888 transparent transparent;
bottom:-9px;
left:0;
}

#nav:after {
display:block;
content:"";
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 9px 0 0;
border-color: #888888 transparent transparent transparent;
bottom:-9px;
right:0;
}

#contentwrapper {
width:100%;
height:auto;
padding:0 20px;
}

#slider {
background-color: #fff;
width:100%;
max-width: 1020px;
margin: 0 auto;
}

#breadcrumbs {
background-color: #fff;
width:100%;
max-width: 1020px;
margin: 0 auto;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
padding:20px 40px;
color:#888888;
font-size:12px;
text-align:right;
}

#breadcrumbs ul {
padding: 0;
margin: 0;
}

#breadcrumbs ul li { display: inline; }

#breadcrumbs ul li a {
width:auto;
text-decoration: none;
}

#breadcrumbs ul li a:after {
content:"";
padding-left:8px;
padding-right:8px;
width:3px;
background-image:url(../images/breadcrumbs.png);
background-repeat:no-repeat;
background-position:center center;
}

#breadcrumbs ul li a:hover span {
text-decoration:underline;
}

#content {
background-color: #fff;
width:100%;
max-width: 1020px;
margin: 0 auto;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
padding:20px 40px;
}

#content.kolom {
padding:0;
}

#column-left {
float:left;
width:72%;
height:auto;
padding:20px 40px;
}

#column-right {
float:left;
width:28%;
height:auto;
background: #fcfcfc;
border-left: 1px solid #e0e0e0;
-webkit-box-shadow: inset 2px 0px 0px 0px rgba(0, 0, 0, 0.03), inset 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
box-shadow: inset 2px 0px 0px 0px rgba(0, 0, 0, 0.03), inset 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
padding:30px;
}

#mx_search_form {
position:relative;
margin-bottom:30px;
}

#mx_search_form input {
width:100%;
padding-right:35px;
}

#mx_search_form input[type=submit] {
width:36px;
height:36px;
padding:0;
position:absolute;
top:0;
right:0;
background-color:#C4BFDF;
background-image:url(../images/search-2.png);
background-repeat:no-repeat;
background-position:center center;
}

#content ul {

}

#footerwrapper {
width:100%;
height:auto;
padding:0 20px;
}

#footer {
background-color:#424242;
width:100%;
max-width: 1020px;
height: auto;
margin: 0 auto;
padding:15px 40px;
color: #f0f8ff;
font-size:12px;
}

#footer p {
font-size:12px;
margin-bottom:0;
}

#footer-left {
float:left;
width:50%;
}

#footer-right {
float:left;
width:50%;
text-align:right;
}

.clear {
clear:both;
}

.item {
float:left;
width:32%;
margin-right:2%;
margin-bottom:15px;
border: 1px solid #ccc;
position:relative;
}

.item:hover {
border: 1px solid #999;
}

.item .overlay {
top:0;
left:0;
position:absolute;
pointer-events:none;
width:100%;
height:100%;
z-index:9;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 76%, rgba(136,127,191,0.79) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(76%, rgba(255,255,255,0.52)), color-stop(100%, rgba(136,127,191,0.79)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 76%, rgba(136,127,191,0.79) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 76%, rgba(136,127,191,0.79) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 76%, rgba(136,127,191,0.79) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 76%, rgba(136,127,191,0.79) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#887fbf', GradientType=0 );
}

.item .overlay span {
position:absolute;
left:0;
text-align:center;
color:#FFFFFF;
font-size:30px;
font-weight:bold;
bottom:27px;
width:100%;
height:20px;
}

.item img {
display:block;
width:100%;
}

.item:nth-of-type(2) {
margin-top:11%;
}

.item:nth-of-type(3), .item:nth-of-type(4) {
margin-right:0;
float:right;
}

.item:nth-of-type(5) {
margin-top:-11%;
}

@media screen and (max-width: 900px) {

#content img {
max-width:40%;
}

#content .item img {
max-width:100%;
}


#column-left, #column-right{ 
width: 100%;
}


} /* end mediaquery */

@media screen and (max-width: 600px) {

#breadcrumbs, #content, #footer {
padding:20px 20px;
}

#footer-left {
width:100%;
}

#footer-right {
width:100%;
text-align:left;
padding-top:20px;
}

.item {
width:100%;
margin-right:0;
margin-top:0 !important;
}


} /* end mediaquery */