/*
Theme Name: Ecobenelux
Theme URI: http://www.classemdia.nl;
Description: Template voor Ecobenelux
Author: Arno Classens www.classemedia.nl

Text Domain: Ecobenelux
*/
@charset "UTF-8";
/* CSS Document */
*{
    padding:0;
    margin:0;
    font-family: 'PT Sans', sans-serif;
    font-size:16px;
    border-style: none;
}

.container{
    width:100%;
    max-width:960px;
    margin:0 auto;
    padding:0;
}

.section_white, .section_grey{
    width:100%;
    height:auto;
    float:left;
    padding:4em 0;
}

.clear{
    clear:both;
}

.section_white img{
    max-width:100%;
}

header .section_white{
    padding:2em 0;
}

#header_contact{
    padding-top:1em;
}

#contact_mail:before {
    content: "";
    display: inline-block;
    background: url("images/icon_mail.png") no-repeat;
    width: 27px;
    height: 21px;
    margin: 0 0.5em -0.3em 0;
}

#contact_phone:before {
    content: "";
    display: inline-block;
    background: url("images/icon_phone.png") no-repeat;
    width: 27px;
    height: 21px;
    margin: 0 0.5em -0.3em 0;
}
.section_grey{
    background-color:#dcdcdc;
    border-top:2px solid #b9b9b9;
    border-bottom:2px solid #b9b9b9;
}    

.no_padding{
    padding:0;
}

h1{
    font-size:1.2em;
    margin-bottom:0.5em;
    color:#62db41;
}

p{
    font-size:1em;
    line-height:1.6em;
    color:#2f2f2f;
    margin-bottom:1em;
} 

a{
    color:#62db41;
    font-style: italic;
    text-decoration: none;    
    -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
}

li a{
    font-style:normal;       
    -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
}

a:hover{
    text-decoration: underline;    
    -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
}

.koloms_1, .koloms_2, .koloms_3, .koloms_4, .koloms_5, .koloms_6, .koloms_7, .koloms_8, .koloms_9, .koloms_10, .koloms_11, .koloms_12{
    float:left;
    height:auto;
    margin:0 1%
}

.koloms_1{width:6%;}
.koloms_2{width:14%;}
.koloms_3{width:23%;}
.koloms_4{width:31%;}
.koloms_5{width:39%;}
.koloms_6{width:48%;}
.koloms_7{width:56%;}
.koloms_8{width:64%;}
.koloms_9{width:73%;}
.koloms_10{width:81%;}
.koloms_11{width:89%;}
.koloms_12{width:98%;}

.rightside{
    float:right;!important
}

#logo img {
    width: 100%;
}

nav{  
    width: 100%; 
    background-color: #62db41;  
    float: left;
    min-height:3em;
}

ul.menu{
    width:100%;
    max-width:960px;
    margin:0 auto;
    padding:0;
}
nav li { 
    list-style: none; 
    float: left;
    height:100%;
    height:2.5em;
    padding-top:0.5em;
    position:relative;
}

nav li:hover{
    background:#51c332;
}

nav li a { 
    color: white;
    padding: 0.5em 1.38em;
    text-decoration: none; 
    display: block;    
    font-style: normal;
    text-transform: uppercase;       
    -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
} 

nav li a:hover{
    text-decoration:none;       
    -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
}

/*SUBMENU*/
nav li ul { 
    position: absolute;  
    display: none;
    top:3em;
    z-index:120;
} 
nav li:hover ul { 
    display: block;
}

nav li ul li { 
    float: none; 
    display: inline; 
}

nav li ul li a { 
    width: 118px; 
    position: relative;  
    border-bottom: 1px solid #51c332; 
    background: #62db41; 
    color: #fff;
    padding-left:1em;
    font-size:0.8em;
}

nav li ul li a:hover { 
    background: #51c332; 
    color: #fff;    
}

#slider_container{
    width:100%;
    float:left;
}


#slider{
    height:23em;
    margin:3em auto 3em auto;
    width:100%;
    max-width:960px;
    background:#fff;
    overflow:hidden;
}

.cycle-slideshow{
    width:100%;
    float:left;
}

.slide{
    width:100%;
    position:relative;
}

.slide_image{
    height:10em;
    float:left;
    position:relative;
    overflow:hidden;
    height:23em;
}

.slide_image img{
    width:100%;
    height:auto;
}

#slider .container{
    padding-top:10em;
    position:relative;
}
.slide_info{
    background-color: #62db41;
    float:left;
    height:23em;
    padding-top:1em;

}

.slide_info h1, .slide_info p{
    color: #fff;
    text-align: left;
    margin-left: 1em;
    margin-right: 1em;
}

.slide_info a.button{
    background-color: #fff;
    color:#62db41;    
    border-bottom:0.2em solid #dcdcdc;
    margin-left:1em;
}

.slide_info a.button:hover{
    background-color:#dcdcdc;    
    border-bottom:0.2em solid #dcdcdc;
    color:#2f2f2f;
}

a.button, .wpcf7-submit{
    float:left;
    background-color:#62db41;
    padding:0.3em 1em;
    color:#fff;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    font-style: normal;
    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;    
    border-bottom:0.2em solid #51c332;
    cursor:pointer;    
}

a.button:hover, .wpcf7-submit:hover{    
    background-color:#51c332;
    border-bottom:0.2em solid #62db41;
    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
    transition: 0.5s;
}


 div#filter_bar {
    float: left;
    width: 100%;
    background:#f7f7f7;
    border-bottom:1px solid #e8e8e8;
    height: 100%;
    margin-bottom:2.5em;
}

#filter_bar li {
    float: right;
    list-style: none;
    height: 100%;
}
#filter_bar li a {
    padding: 0.7em 0.58em;
    float: left;
    font-size: 0.7em;
}

li.current-cat {
    background: #62db41;
}

li.cat-item-none{
    display:none;
}
#filter_bar li:hover {
    background: #62db41;
}

#filter_bar li:hover a, li.current-cat a{
    color:#fff;
    text-decoration: none;
}

#content_left .product_image{
    height:9em;
}
.product_image{
    width:100%;
    height:13em;
    overflow:hidden;
    margin-bottom:1em;
}

.product_image a {
    float: left;
    width: 100%;
    height: 100%;
}

.product_image img{
    height:100%;
    width:auto;
    max-width:none!important;
}

.product .button, .overlay_content .button{
    float:right;
}

.product{
    margin-bottom:3em;
}

.product a:hover img{
    opacity: 0.7;
    filter: alpha(opacity=70);
    transition:0.5s;
}   

.product h1{
    margin-bottom:0;
} 

.koloms_4.product p {
    max-height: 6em;
    overflow: hidden;
    height: 6em;
}

.merk_product{
    font-style:italic;
    font-size:0.8em;
    height:100%!important;
    margin-bottom:0.5em;
    color:#969696;
}

#banner{
    float:left;
    width:100%;
    height:auto;    
    border-top:2px solid #b9b9b9;
    border-bottom:2px solid #b9b9b9;
}

#banner img{
    width:100%;
    height:auto;
    float:left;    
    opacity: 0.8;
    filter: alpha(opacity=80);
}


footer{
    background-color:#62db41;
    float:left;
    width:100%;
    padding-top:2.6em;
    color:#fff;
}

.footer_bottom{
    float:left;
    width:100%;
    background-color:#2f2f2f;
    opacity: 0.3;
    filter: alpha(opacity=20);
    margin-top:2.6em;
    padding:1em 0;
}
footer p, footer h1{
    color:#fff;
    text-transform: none;
}

footer ul, ul#menu-handigelinks{
    margin-left:1.2em;
}

footer a{
    text-decoration: none;
    color:#fff;
}

.side_item{
    background:#f7f7f7;
    border-bottom:1px solid #e8e8e8;
    padding:1em;
    margin-bottom:1.5em;
}

.side_item li{
    list-style-image: url('images/list_style.png');
}

.side_item li a{
    color:#2f2f2f;
}

.side_kaart{
    width:100%;
    height:auto;
    float:left;
}

p img{
    margin-right:0.8em;
    width:auto;
    float:left;
}

.list_image{
    width:7em;
    height:7em;
    overflow:hidden;
    float:left;
    margin-right:1em;
}

.list_image img{
    height:100%;
    width:auto;
}

.list_item .button{
    float:right;
}

.list_item{
    float:left;
    padding:1em;
    background:#f7f7f7;
    border-bottom:1px solid #e8e8e8;
    margin-bottom:1em;
    width:90%;
}

h1 span.nieuwsdatum{
    font-style:italic;
    font-weight:normal;
    color:#7a7a7a;
    font-size:0.7em;
    width:100%;
    float:left;
    margin-bottom:1em;
}

.nieuwsafbeelding{
    margin-bottom:1em;
}

.wpcf7-textarea, .wpcf7-text{
    border:1px solid #e8e8e8;
}

.product_info img{
    width:100%;
    height:auto;
}

img.attachment-product{
    width:100%!important;
    height:auto;
}

img.product {
    margin-bottom: 1em;
}

.intro_image img{
     width:100%!important;
     height:auto;
}