/*
primaryColor: #480000tostipara
*/

/*general styles*/
body {
    background: #fff;
    font-family: 'Josefin Sans', 'Ovo', 'Jacques Francois', sans-serif;
    font-size: 17px;
    color: #643;
    line-height: 2em;    
    text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Sans', 'Ovo', 'Poiret One', 'Jacques Francois', cursive;
    color: #480000 ;
}

/*grid styles*/
#main {
    clear: both;
    width: 70%;
    margin: 50px 15%;
}

/*  SECTIONS  */
.section {
	clear: both;
	margin: 15px 0;
        width: 100%;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 29.3%;
    padding-right: 4%;
}
.span_1_of_3:last-child { padding-right: 0; }

.left {
    //width: 29%;
}
.middle {
   // width: 29%;
}
.right {
   // width: 29%;
}
/*  GRID OF TWO  */

.span_1_of_2 {
    width: 48.6%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen 
and (max-width: 480px)
and (max-width: 768px) {
    #main {
        clear: both;
        width: 100%;
        margin: 40px 0;
    }
    .section {
        width: 100%;
        margin: 0;
    }
    .col { 
        margin: 1% 0 1% 0;
    }
    #banner {
        width: 99%;
        margin: 0;
    }
    #logo-container {
        width: 100%;
    }
    .img.logo {
        width: auto;
        height: auto;
        resize: both;
    }    
}

@media only screen 
and (max-width: 480px)
and (max-width: 768px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 100%;
    }
    .span_1_of_2 {
        width: 100%;
    }
    .left {
        width: 100%;
    }
    .middle {
        width: 100%;
    }
    .right {
        width: 100%;
    }
}


/* content styles*/
/* header styles*/
#logo-container {
    width: 100%;
    height: auto;
    float: none;
    vertical-align: middle;
}
#logo-container img.logo {
    max-width: 100%;
    resize: both;
}

/*info styles*/
#opening {
    width: 220px;
}
.dagtijd {
    width: 100%;
    clear: both;    
}
.dag {
    width: 90px;
    display: inline-block;
    line-height: 2em;
    margin-right: 20px;
}
.tijd {
    width: 110px;
    line-height: 2em;
    display: inline-block;
}
#contact {
    text-align: left;
}
/*flag styles*/
#flags {
    width: 100%;
    height: 45px;
    margin-bottom: 0;
    float: right;
    //margin-top: 30px;    
}
img.image-flag-nl {
    width: 55px;
    height: 35px;
    resize: both;
}
img.image-flag-en {
    width: 58px;
    height: 40px;
    resize: both;
    margin-top: -3px;
}

/*photo styles*/
fotos {
    display: block;
}
img.image-store-ron {
    width: 100%;
}

img.image-store-interior {
    width: 100%;
}

/*map styles*/
#lokatie {
    float: left;
    width: 100%;
    height: auto;
}

.maparea {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 80%;
}

iframe .map-google {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    resize: both;
}