@font-face {
    font-family: 'trendex_light_ssiextra_light';
    src: url('../fonts/trendex_light_ssi_extra_light-webfont.eot');
    src: url('../fonts/trendex_light_ssi_extra_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/trendex_light_ssi_extra_light-webfont.woff2') format('woff2'),
         url('../fonts/trendex_light_ssi_extra_light-webfont.woff') format('woff'),
         url('../fonts/trendex_light_ssi_extra_light-webfont.ttf') format('truetype'),
         url('../fonts/trendex_light_ssi_extra_light-webfont.svg#trendex_light_ssiextra_light') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'trendex_ssisemi_bold';
    src: url('../fonts/trendex_ssi_semi_bold-webfont.eot');
    src: url('../fonts/trendex_ssi_semi_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/trendex_ssi_semi_bold-webfont.woff2') format('woff2'),
         url('../fonts/trendex_ssi_semi_bold-webfont.woff') format('woff'),
         url('../fonts/trendex_ssi_semi_bold-webfont.ttf') format('truetype'),
         url('../fonts/trendex_ssi_semi_bold-webfont.svg#trendex_ssisemi_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

html,
body{
	background: white;
}

body, p, li, ol, table,table td{
    font-family: 'trendex_light_ssiextra_light';
}
h1,h2,h3,h4,h5,h6{
    font-family: 'trendex_ssisemi_bold';
}   

h2{
    font-size: 24px;
    margin-bottom: 20px;
}
p{
	font-size: 15px;
    font-weight: 700;
}
em{
    font-size: italic;
}
small{
    font-size: 12px;
}

table {
    background: transparent;
    border: 0;
    width: 100%;
}
table tr {
    background: transparent !important;
}
table tr td {
    font-size: inherit;
    font-weight: 700;
    padding: 0;
    line-height: inherit;
    padding: 2px 0;
    vertical-align: top;
}

.block{
    padding-top: 100px;
    padding-bottom: 75px;
    width: 100%;
}


.white{ color: white; font-weight: normal; }

.bg-gray{ background: #eeeeee; }
.bg-pink{ background: #b91e5b; }
.bg-dark{ background: #3b3c49; }

form input{
    background-color: rgba(255,255,255,0.4) !important;
    border: none !important;
    color: white !important;
    margin: 0 0 5px 0 !important;
}

form input[type="submit"]{
    float: right;
    background-color: #3b3c49 !important;
    padding: 10px 40px !important;
    cursor: pointer;
}
label{
    color: white;
    line-height: 37px;
}

/* ------ */

#logo{
    max-width: 300px;
    margin: 50px 0 0 0;
}

#menu{
    margin-top: 105px;
    float: right;
}
.karin{
    background: url('../img/foto-karin-klein.png') no-repeat bottom right;
    background-size: 40%;
}

.werktijden{
    background: url('../img/werktijden.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: left center;
}

footer{
    width: 100%;
    padding: 20px 0 10px 0;
}
footer p{ font-size: 12px; margin: 0; line-height: 38px; }

footer a:hover{ 
    color:white;
    text-transform: underline;
}

#socialmedia{
    float: right;
    margin: 0;
    padding: 0;
    list-style: none;
}
#socialmedia li{
    background: url('../img/facebook.png') no-repeat right center;
    background-size: cover;
    width: 35px;
    height: 35px;
    padding-left: 5px;
    display: inline-block;
}

#socialmedia li a{ 
    display: inline-block; 
    width: 35px;
    height:35px;
}
#scrollTop{
    position: fixed;
    right: 100px;
    bottom: 20px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: block;
    background: url('../img/scrolltop.png') no-repeat center;
    background-size: cover;
    opacity: 0.5;
    z-index: 99;
}


::-webkit-input-placeholder { /* WebKit browsers */
    color:    white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    white;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    white;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    white;
}

@media screen and (max-width: 1024px){
    .sub-nav li{
        margin-left: 0px;
    }
}

@media screen and (max-width: 640px){
   #menu{
        margin-top: 0px;
   }
   #menu li{ width: 100%; text-align: center; height: 30px; margin: 0; }

   .block{
    padding-top: 50px;
    padding-bottom: 50px;
   }

   .overKarin{
        padding-bottom: 250px;
   }

   .werktijden{
    background: none;
   }
    .footer-gegevens{
        text-align: center;
    }

    #scrollTop{
        right: 20px;
    }
    footer p{ line-height: 19px; }

    #socialmedia{
        float: none;
    }
    #socialmedia li{
        margin: 15px auto;
        display: block;

    }
}