/*
Theme Name: Repair Café Wageningen
Theme URI: https://repaircafewageningen.nl
Author: Fruto Digital
Author URI: https://fruto.nl
Description: Custom theme voor Repair Café Wageningen met twee locaties
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: repaircafe-wageningen
Tags: custom, responsive, repair-cafe
*/

/* CSS Document */
/* general css i.v.m. sticky footer*/
body{min-height: 100%; display: flex; flex-direction: column;}
body, html{height: 100%;}
main{flex-grow: 1;}
span{color:#e95b12;}

/* meer of minder general css*/
*{margin: 0;padding: 0; box-sizing: border-box;}
body{font-family: Arial, sans-serif; overflow-y:scroll; color:#37217F; background-color:rgba(55,33,127,0.20); display: flex; flex-direction: column; align-items: center;}
header, nav, main, footer{width: 100%; max-width: 1250px; background-color: rgba(255,255,255,1.00);}
h1, h2, h3{font-family:'Curlz MT';}
footer a{color:#37217F;}
.mobiel{}
.pc{display: none;}

/* header */
header{display: flex; flex-wrap: nowrap; justify-content: space-between;}
header img{width: 100%;}
header div{display: none;}

/* nav */
.first{border-top:3px solid;border-top-color:#37217f;}
.second{background-color:#37217F; padding: 0; margin: 0; width: 100%; min-height: 2.5rem;}
nav ul, .second ul {display: flex; flex-direction: row;flex-wrap: nowrap; justify-content: space-between; align-items: center;}
nav ul li, .second ul li{list-style: none; width: 17.5%; display: flex; justify-content: center;}
.second ul{height: 100%;}
nav ul li a img, .second ul li a img{width: 100%;}
nav ul li a, .second ul li a{line-height: 2rem; text-align: center; color:rgba(237,238,255,1); text-decoration: none; font-size: 1rem;}
nav ul li .actief a, .second ul li.actief a, .current-menu-item a, .current_page_item a{color:#e95b12;}


/* main */
main{ display: flex; flex-direction: column;

    flex-wrap: wrap;padding-bottom: 3rem; padding-left: .75rem; padding-right: .75rem;}
main a, footer a {color:#e95b12;}
h1{font-size: 1.75rem; margin: 1.5rem 0 .3rem 0;}
h2{font-size: 1.6rem; margin: 1.5rem 0 .3rem 0;}
main p{font-size: 100%; line-height: 1.5rem; text-align: justify;}
main img{width: 80%; align-self: center; margin: 3rem 0 0 0;}
article img{width: 75%;margin: 1.75rem 12% 0rem 12%;}
ol li{list-style: disc; margin-left: 1.75rem}
iframe{width: 80%; margin:3rem 0 2rem 10%;}
.honderd{width: 100%;}
.topmargin{margin-top: 1rem;}

/* footer */
footer{border-top:3px solid;border-top-color:#37217f; font-size: .9rem;}
h3{font-family:'Curlz MT';font-size:1.25rem;font-weight:600;margin:1.5rem 0 1rem 0;}
.boxone{width: 47.5%;}
.boxtwo{width: 47.5%; margin-top: .75rem;}
.boxone, .boxtwo, .boxthree{padding-left: .75rem; padding-right: .75rem; padding-bottom: 2rem}
.boxone div, .boxtwo div{border-left:1px solid; border-left-color:#37217f; margin-left: .75rem; line-height: 1.2rem; padding-left: .5rem;}
.boxthree, .support{width: 100%;}
.support a{width: 4rem;}
.support a img{width: 100%;}
.support{display: none; flex-wrap: nowrap; align-items: center; justify-content: space-between; font-size: .6rem; padding:0 3rem 0 .25rem; background-color:rgba(55,33,127,0.20); margin-top: 1rem;}

@font-face {
   font-family: 'Curlz MT';
   src: url('css/CurlzMT.eot');
   src: url('css/CurlzMT.eot?#iefix') format('embedded-opentype'),
	url('css/CurlzMT.woff') format('woff'),
	url('css/CurlzMT.ttf') format('truetype'),
	url('css/CurlzMT.svg#CurlzMT') format('svg');
    	font-weight: normal;font-style: normal;}

@media screen and (min-width : 550px){
    ul li a{font-size: 1rem;}
    footer{display: flex; flex-wrap: wrap; align-items:flex-end;}
    .boxtwo{margin-top: 3.4rem;}
    .boxone div, .boxtwo div{font-size: .9rem;}
    .boxone div p, .boxtwo div p{line-height: 1.2rem;}}

@media screen and (min-width : 850px){
    body{font-size: 110%;}
    header{padding-bottom: 2rem;}
    header img{width:60%; height: 15vw;}
    h3{font-size: 1.65rem; margin:1.5rem 0 1.25rem 0;}
    header div{width: 17%; margin: 1.25rem 0 2rem 0; font-size: 87.5%;}
    ul li{width: 15%;}
    main{flex-direction: row; justify-content: space-between; font-size: 110%;}
    .stretch{display: flex;flex-direction: column;justify-content: space-between;}

    main img{margin: 3rem 10% 0 10%;}
    h1{font-size: 2.2rem; margin:2rem 0 1rem 0;}
    h2{font-size: 1.7rem; margin:2.4rem 0 1.1rem 0;}
    article{width: 47.5%;}
    article p{line-height: 1.3rem;}
    iframe{width: 100%; margin:3rem 0 2rem 0;}
    .second{font-size: 120%; min-height: 3.25rem;}
    .boxone{width: 28%; margin-left: 0;}
    .boxtwo {width: 33%; margin-left: 0;}
    .boxthree{ width: 30vw; margin-left: 5.5%; align-self: flex-start;}
    .pc{display: block;}
    .mobiel{display: none;}
    .topmargin{font-size: 1rem}}

@media screen and (min-width : 1250px){
    body{font-size: 115%;}
    header img{height: auto;}
    .boxthree{width: 33%; }
    .second{font-size: 140%;min-height: 3.5rem;}
    .boxone div, .boxtwo div{font-size: 1rem;}}