* {
    margin:0;
    padding:0;
}

html,
body {
	margin:0;
	padding:0;
	height:100%;
}

#wrapper {
	min-height:100%;
	position:relative;
}


body {
    width:100%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Varela Round', sans-serif;
    font-size:100%;
}

.clear {
    clear: both;
}

h1
{
    color: black;
    padding-bottom: 15px;
    font-size:1.7em;
    font-weight:bold;
}

h2 {
    font-size: 1.5em;
    color: black;
    font-weight: normal;
    padding-top: 10px;
    padding-bottom:10px;
    font-weight:bold;
}

h3 {
    color:white;
    margin-bottom:10px;
    border-bottom:2px solid white;
}

p {
    font-size: 0.875em;
    line-height: 20px;
    text-align:justify;
}

p span {
    color: #6CC6DC;
}

h1 span {
    color: #6CC6DC;
}

h2 span {
    color: #6CC6DC;
}


/*::selection {
    background-color:fuchsia;
}*/
 

/* ----- Master page ----- */

#line {
    border-top: 4px solid black;
    width:100%;
    padding-top: 0;
}

#header {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
}

    #header #logo {
        width: 100%;
    }

        #header #logo img {
            width:100%;
        }

    #header #contact {
        border-bottom: 2px solid black;
        width: 100%;
        margin-top:20px;
        padding-bottom:5px;
    }

        #header #contact p {
            text-align:right;
        }

            #header #contact p a {
                text-decoration:none;
                color:black;
            }

    #header #menu
        {
            font-size: 1.7em;
            width: 100%;
        }

            #header #menu li
            {
                /*text-align: right;*/
                list-style-type: none;
                font-weight:bold;
                text-align:center;
            }

             #header #menu li a
                {
                    display: block;
                    color: black;
                    text-decoration: none;
                    padding: 5px 0 5px 0;
                    margin: 10px 0 10px 0;
                }

             #header #menu li a:hover, #header #menu li a.selected {
                 background-color:#6CC6DC;
                 color: white;
             }

#footerBG {
    height: 20px;
    width: 100%;
    position:absolute;
	bottom:0;
    left:0;
    border-top: 4px solid black;
}

#footer {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

    #footer p {
        color:black;
        font-size: 0.7em;
        padding-top: 1px;
        text-align: right;
    }

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

        #footer a:hover {
            text-decoration: underline;
        }


/* ----- Einde MasterPage ----- */

/* ---- groesecurity.aspx ----- */

#container {
    width:90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:50px;
    margin-top:80px;
}

    #container #promoties {
        width: 100%;
        background-color:#6CC6DC;
        padding:0 5px 5px 5px;
        margin-top:20px;
    }

        #container #promoties p {
            color:white;
        }

    #container #groesecurity {
        width: 100%;
        
    }

        #container #groesecurity ul li {
            font-size:0.875em;
            line-height:20px;
            list-style-type:none;
            background-image:url('/images/listStyleTypePijltje.png');
            background-repeat:no-repeat;
            background-position:left;
            background-position-y:top;
            padding-left:20px;
            padding-bottom:10px;
        }

    #container #groesecurity ul, #container #groesecurity ol {
        margin-left:30px;
    }

    #container #diensten {
        width: 100%;
        padding-top:50px;
    }

        #container #diensten a {
            display:block;
            float:left;
            width:50%;
            text-align:center;
            text-decoration:none;
            padding-bottom:20px;
        }

            #container #diensten a p {
                text-align:center;
                font-size:0.9em;
                color:black;
                font-weight:bold;
            }


            #container #diensten a:hover p{
                color:#6CC6DC;
            }


            #container #diensten a div {
                background-repeat:no-repeat;
                width:80%;
                height:0;
                padding-bottom:80%;
                margin-left:10%;
                background-size:contain;
                margin-top:15px;
            }

            #container #diensten a#dienstInbraak div {
                background-image: url('/images/inbraakbeveiligingZW.png');
            }

            #container #diensten a#dienstCamera div {                
                background-image:url('/images/camerabewakingZW.png');
            }

            #container #diensten a#dienstBrand div {                
                background-image:url('/images/brandbeveiligingZW.png');
            }

            #container #diensten a#dienstToegang div {                
                background-image:url('/images/toegangscontroleZW.png');
            }

            #container #diensten a#dienstKluizen div {                
                background-image:url('/images/kluizenZW.png');
            }

                #container #diensten a#dienstInbraak:hover div {
                    background-image: url('/images/inbraakbeveiligingK.png');
                }

                #container #diensten a#dienstCamera:hover div {                
                    background-image:url('/images/camerabewakingK.png');
                }

                #container #diensten a#dienstBrand:hover div {                
                    background-image:url('/images/brandbeveiligingK.png');
                }

                #container #diensten a#dienstToegang:hover div {                
                    background-image:url('/images/toegangscontroleK.png');
                }

                #container #diensten a#dienstKluizen:hover div {                
                    background-image:url('/images/kluizenK.png');
                }


/* ---- dienst.aspx ----- */

#subMenu {
    width:100%;
}

    #subMenu li {
        list-style:none;
        margin-bottom:20px;
        padding-bottom:5px;
    }

        #subMenu li a {
            text-decoration: none;
            font-size: 1.1875em;
            font-weight: bold;
            color: black;
            padding-bottom:5px;
            display:block;
            border-bottom:1px solid white;
        }

            #subMenu li a:hover, #subMenu li a.selected {
                border-bottom:1px solid #6CC6DC;
                background-image:url('/images/pijltjeOpen.jpg');
                background-repeat:no-repeat;
                background-position:right center;
            }

#inbraakBeveiliging {
    width:100%;
    padding-top:20px;
}

    #inbraakBeveiliging #headingInbraak {
        border-bottom: 1px solid #6CC6DC;
        width:100%;
        float:left;
        padding-bottom:5px;
        margin-bottom:20px;
    }

        #inbraakBeveiliging #titelInbraak {
            float: left;
            width:91%;
            padding:0;
            margin:0;
        }

        #inbraakBeveiliging #logoInbraak {
            float: right;
            width:8%;
        }

    #inbraakBeveiliging img {
        width: 100%;
    }

    #inbraakBeveiliging #inhoudInbraak p {
        text-align:justify;
    }

        #inbraakBeveiliging #inhoudInbraak p a {
            color:#6CC6DC;
            text-decoration:none;
        }

    #inbraakBeveiliging #inhoudInbraak ul li {
        font-size: 0.875em;
        line-height: 20px;
        list-style-type: none;
        background-image: url('/images/listStyleTypePijltje.png');
        background-repeat: no-repeat;
        background-position: left;
        background-position-y: top;
        padding-left: 20px;
        padding-bottom: 10px;
    }

    #inbraakBeveiliging #inhoudInbraak ul, #inbraakBeveiliging #inhoudInbraak ol {
        margin-left:30px;
    }

/* ---- referenties.aspx ----- */

#referenties {
    
}

#referenties .referentie {
    display:block;
    float:left;
    width:100%;
    border:2px solid black;
    margin:0 1% 2% 1%;
}

    #referenties .referentie .referentieFoto {
        width:100%;
        float:left;
        height:0;
        padding-bottom:57%;
        overflow:hidden;
    }

        #referenties .referentie .referentieFoto img {
            width: 100%;
            height:auto;
            float:left;
        }

    #referenties .referentie .referentieBeschrijving {
        float:left;
        width:100%;
        padding: 5px 10px;
    }

    #referenties .referentie .referentieBeschrijving p {
        font-weight:bold;
        font-size:1.1em;
    }


    /* ---- contact.aspx ----- */

#rechterKolom {
    width:100%;
}

    #rechterKolom #contactformulier {
        padding-bottom:10px;
        width:100%;
    }

        #rechterKolom #contactformulier tr {
            padding-bottom: 10px;
        }

        #rechterKolom #contactformulier td {
            color: #6CC6DC;
            padding:0 30px 10px 0;
            vertical-align: top;
            font-size:1.125em;
            width:20%;
        }

            #rechterKolom #contactformulier td + td {
                width:80%;
            }

.txtnormal {
    width:70%;
    border: 1px solid black;
    height:25px;
}

.txtmultiline {
    height:100px;
    width:10%;
}

.bttSubmit {
    background-color:#6CC6DC;
    padding:5px 10px;
    border:none;
    color:white;
    font-size:1em;
}

#linkerKolom {
    width:100%;
}

    #linkerKolom img {
        width: 100%;
        padding-bottom:10px;
    }

    #linkerKolom #googleMaps {
        width:100%;
        
    }

        #linkerKolom #googleMaps iframe {
            width:100%;
            height:170px;
            border: 1px solid #c6c6c6;
        }

        #linkerKolom #googleMaps a {
            color:#6CC6DC;
            text-decoration:none;
        }

            #linkerKolom #googleMaps a:hover {
                text-decoration: underline;
            }

.titel {
    border-bottom:1px solid #6CC6DC;
    margin:0;
    padding:0;
    margin-bottom:20px;
}



.txtnormal {
    width:70%;
    border: 1px solid black;
    height:25px;
}

.txtmultiline {
    height:100px;
    width:100%;
}

.bttSubmit {
    background-color:#6CC6DC;
    padding:5px 10px;
    border:none;
    color:white;
    font-size:1em;
}

@media screen and (min-width:401px) {
    /* hier komen alle css regels die van toepassing zijn voor deze schermgrootte */

    /* ---- referenties.aspx ----- */

    

        #referenties .referentie {
            width: 47%;
        }


        /* ---- dienst.aspx ----- */

         #inbraakBeveiliging #headingInbraak {
        border-bottom: 1px solid #6CC6DC;
        width:100%;
        float:left;
        padding-bottom:5px;
        margin-bottom:20px;
    }

        #inbraakBeveiliging #titelInbraak {
            float: left;
            width:90%;
            padding:0;
            margin:0;
        }

        #inbraakBeveiliging #logoInbraak {
            float: right;
            width:7%;
        }

    #inbraakBeveiliging img {
        float: right;
        padding-left:10px;
        width: auto;
    }

}


@media screen and (min-width:651px) {
    /* hier komen alle css regels die van toepassing zijn voor deze schermgrootte */

    /* ----- Master page ----- */

    #header {
        width: 90%;
    }

        #header #logo {
            float: left;
            width: 30%;
        }

            #header #logo img {
                width: 100%;
            }

        #header #contact {
            float: right;
            border-bottom: 2px solid white;
            width: 65%;
            margin-top: 50px;
        }

        #header #menu {
            font-size: 1.5em;
            float: right;
            border-top: 2px solid black;
        }

            #header #menu li {
                float: left;
                width: 25%;
            }

                #header #menu li a {
                    margin: 0;
                }

                    #header #menu li a:hover, #header #menu li a.selected {
                        background-image: url('../images/pijltje.png');
                        background-repeat: no-repeat;
                        background-position: top center;
                        color: #6CC6DC;
                        background-color: white;
                    }

    /* ----- Einde MasterPage ----- */

    /* ---- groesecurity.aspx ----- */

    #container #promoties {
        width: 30%;
        float: left;
        margin-top: 0px;
    }

    #container #groesecurity {
        width: 65%;
        float: right;
    }

    #container #diensten {
        width: 100%;
        float: left;
        padding-top: 50px;
    }

        #container #diensten a {
            width: 33%;
        }

    /* ---- dienst.aspx ----- */

    #subMenu {
        width: 30%;
        float: left;
        padding-top: 30px;
    }

        #subMenu li a:hover, #subMenu li a.selected {
            border-bottom: 1px solid #6CC6DC;
            background-image: none;
        }

    #inbraakBeveiliging {
        width: 65%;
        float: right;
    }


    /* ---- referenties.aspx ----- */

    #referenties {
    }

        #referenties .referentie {
            width: 30.5%;
        }

    /* ---- contact.aspx ----- */

    #rechterKolom {
        float: right;
        width: 65%;
    }

    #linkerKolom {
        float: left;
        width: 30%;
    }

        #linkerKolom img {
            width: 100%;
            padding-bottom: 10px;
        }

        #linkerKolom #googleMaps {
            width: 100%;
        }

            #linkerKolom #googleMaps iframe {
                height: 220px;
            }

    .txtmultiline {
        height: 100px;
        width: 100%;
    }

}



@media screen and (min-width:821px) {
    /* hier komen alle css regels die van toepassing zijn voor deze schermgrootte */

    /* ----- Master page ----- */

    #header #contact {
        margin-top: 35px;
    }

    #header #menu {
        width: 65%;
    }

        #header #menu li {
            font-size: 0.9em;
        }

    /* ----- Einde MasterPage ----- */

    /* ---- groesecurity.aspx ----- */

    #container #diensten a {
        width: 20%;
    }

    /* ---- dienst.aspx ----- */

                #subMenu li a:hover, #subMenu li a.selected {
                    background-image: url('/images/pijltjeOpen.jpg');
                    border-bottom: 1px solid #6CC6DC;
                    background-repeat: no-repeat;
                    background-position: right center;
                }
                

        #inbraakBeveiliging #logoInbraak {
            width: 6%;
        }

        #inbraakBeveiliging #txtInbraak {
            float: left;
            width: 67%;
        }

        #inbraakBeveiliging #fotoInbraak {
            float: right;
            width: 30%;
        }

    /* ---- referenties.aspx ----- */

        #referenties .referentie {
            width: 22.4%;
        }

            #linkerKolom #googleMaps iframe {
                height: 170px;
            }

    .txtmultiline {
        height: 100px;
        width: 100%;
    }

}

@media screen and (min-width:1201px) {
    /* hier komen alle css regels die van toepassing zijn voor deze schermgrootte */


    /* ----- Master page ----- */

    #header {
        width: 70%;
    }

        #header #contact {
            margin-top: 40px;
        }

    #footer {
            width: 70%;
        }
    
    /* ----- Einde MasterPage ----- */

    /* ---- groesecurity.aspx ----- */

    #container {
        width: 70%;
    }
                #container #diensten a p {
                    font-size: 1.05em;
                }

    #inbraakBeveiliging #logoInbraak {
        width: 4.5%;
    }     
}