/*  CSS bestand van 13 mei 8.08 uur    */


body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}


/* ------------      Global       ------------------------ */
.container{
	width:90%;
	margin:auto;
	overflow:hidden;
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	display:flex;
	flex-wrap:wrap;
}


ul{
	margin:0;
	padding:0;
	font-size: 18px;
}



/*----------------     Header        ---------------------------------*/

header{
  background:#35424a;
  color:#ffffff;
  padding-top:30px;
  min-height:70px;
  border-bottom:#e8491d 3px solid;
}


header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}


header li{
	float:left;
	display:inline;
	padding: 10px 10px 0 10px;
	font-size: 16px;
}


header #branding{
	float:left;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
}


header #branding h1{
  margin:0;
}


header nav{
  float:right;
  margin-top:10px;
}


header .highlight, header .current a{
  color:#e8491d;
  font-weight:bold;
}


header a:hover{
	color:#FFFFFF;
	font-weight:bold;
	background-color: #9900FF;
}


/* -------------   Showcase section = bovenstuk met banner en background horoskoop          ------------        */
#showcase{
	min-height:300px;
	background-position: center;
	background-size: cover;     /* covers all of the container size  */
	text-align:center;
	color:#ffffff;
	background-image: url(hor_detail_main.jpg);
	background-repeat: no-repeat;
}


#showcase h1{
      /* margin-top:100px;    */
      font-size:24px;
      font-weight: bold;
      color: blue;              
      margin-bottom:70px;
      float: left;
	  clear:left;
}


#showcase p{
	font-size:28px;
	color: #e8491d;      /*  soft red    */
	font-weight: bold;
	text-align: left;
}


/* -------------    Newsletter section    ----------------       */

#newsletter{
  padding:15px;
  color:#e8491d;
  font-size:16px;
  background:#35424a;       /*     zacht zwart     */
}

#newsletter a{
     color: #FFFFFF;            /* zacht rood */
     text-decoration:none;
     font-size:20px;
     background-color: #35424a;     /* zacht zwart */
}

#newsletter a:hover{
     color: #FFFFFF;            /*   grijs   */
     font-size: 20px;
     background-color: #9900FF;       /* zacht zwart   */
}

#newsletter h1{
  float:left;
  font-size:20px;
}

#newsletter li{
                float: none;
	display:inline;
	padding: 20px 20px 0 40px;
	font-size: 18px;
   	color: black;
}


/* ------------                    section boxes met 4 divs die box heten          -------------------*/

#boxes{
	margin-top:20px;
	margin-bottom: 50px;
}

#boxes a {

	color: #000000;            /*   grijs   */
	font-size: 20px;
	background-color: #CCCCCC;       /* zacht zwart   */
	text-decoration: none;
}

#boxes a:hover{
	color: #FFFFFF;            /*   grijs   */
	font-size: 20px;
	background-color: #9900FF;       /* zacht zwart   */
	text-decoration: none;
}


#boxes .box{
  float:left;
  text-align: center;
  width:20%;
  padding:10px;
}

/* -----------------------        tekstblokje dat voorafgaat aan de 10 div containers        ---------------------------- */
/* -----------------------        tekstblokje zit in een div back met donkere achtergrondkleur over de hele breedte    -----------*/
.container2{
	width:90%;
	margin:auto;     
	color: #FFFF00;                        /* zacht rood voor de tekst   */
	font-size:20px;
     	background-color: #35424a;     /* zacht zwart */
}






.back{
	background:#35424a;
	color:#ffffff;
	min-height: 20px;
}


/*  ----------------       section boeken met 1 div container met daarin 10 div containers waarin afbeeldingen     -----------------------  */

.boeknest {
	width: 20%;                         /* 5 boeken op een rij binnen de class container    */
	border:5 px;
	background-color: #F4F4F4;
}

.boeknest img{
max-width:100%;             /* afbeelding neemt de gehele div in beslag  */
height:auto;
border:10px;
}

/*  ----------------ruimte onder de section #boeken van 50 px als overgang naar news  ------------------------   */

section#boeken {
    margin-bottom: 50px;
}


/* -----------------------            section news met 2 divs die veel tekst bevatten               ------------------------*/

section #news{
	layout: flex;
	margin: auto;
}


#news .newsitem1 {
	background-color: #FFFFCC;    /* lichtgeel */
	float: left;
	height: 270px;
	width: 80%;
	padding: 5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 40px;
	margin-left: 77px;
	overflow:scroll;
}
#news .newsitem2 {
	background-color: #FFffcc;  /* lichtgeel */
	margin: 10px;
	padding: 5px;
	float: left;
	height: 270px;
	width: 80%;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 40px;
	margin-left: 77px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	overflow: scroll;
}

#news a {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #0000FF;
}

#news a:visited {

	color: #009900;
	text-decoration: none;
	background-color: #FFFFFF;
}

#news a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #e8491d;
}

/*  -----------------------          Footer              ---------------------------------*/
footer{
	clear:both;
	padding:5px;
	/* margin-top:200px;    */
	color:#ffffff;
	background-color:#e8491d;
	text-align: center;
	margin-bottom: 30px;
	height: 70px;
	margin-top: 30px;
}




/* -------------------                 Media Queries           ----------------------------------------*/

@media (max-width: 1200px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #boxes .box,


  header{
    padding-bottom:20px;
  }

  #showcase h1{
    margin-top:40px;
  }


.boeknest {
width: 30%;                         /* 3 boeken op een rij binnen de class container    */
border:5 px;
}

#news .newsitem1 {
	background-color: #FFFFCC;    /* lichtgeel */
	float: left;
	height: 270px;
	width: 70%;
	padding: 5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 40px;
	margin-left: 40px;
	overflow:scroll;
}

#news .newsitem2 {
	background-color: #FFFFCC;  /* lichtgeel */
	margin: 10px;
	padding: 5px;
	float: left;
	height: 270px;
	width: 70%;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 40px;
	margin-left: 40px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	overflow: scroll;
}

.wrapper {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:30px;
	grid-auto-rows: minmax(100px,auto);
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}

.wrapper .les1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #FF8B8B;     /* diep rose   */
	border: solid red;	
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, white, #FF8B8B);
}




}                   /*  -----------------           end of media query        ----------------------------      */




#showcase2 {
	min-height:200px;
	background-position: center;
	background-size: cover;     /* covers all of the container size  */
	text-align:center;
	color:#ffffff;
	background-image: url(hor_detail_main.jpg);
	background-repeat: no-repeat;
	/*    background-color: #FFFFFF;      Verwijderd, dit overschrijft de background image    */
}
#showcase2 h1 {
	/* margin-top:100px;    */
      font-size:24px;
	font-weight: bold;
	color: blue;
	margin-bottom:30px;
	float: left;
	clear: left;
}
#showcase2 .container img {
	margin-bottom: 10px;
	opacity:0.8;
}
.container2 a {
        color:#FFFFFF;
        text-decoration:none;
        text-transform: uppercase;
        font-size:16px;
}

.container2 a:hover {

	color:#FFFFFF;
	font-weight:bold;
	background-color: #9900FF;
}


/*  ----------------------    GRID layout voor onderdeel Artikelen en Lessen  ------------------    */

.donatiewrapper {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap:20px;
	grid-auto-rows: minmax(150px,auto);
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}


.wrapper {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap:20px;
	grid-auto-rows: minmax(150px,auto);
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}

.downwrapper {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap:10px;
	grid-auto-rows: minmax(100px,auto);
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}

.newcombwrapper {
	width: 80%;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:30px;
	grid-auto-rows: minmax(200px,auto);
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}


.wrapper .art1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #D9C0E8;
	border-radius:5%;
	padding:2px;
	background: linear-gradient(to bottom right, white, #D9C0E8);
}

.wrapper .art2 {

	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #66FF99;
	border-radius:5%;
	background: linear-gradient(to bottom right, white, #66FF99);
}

.wrapper .art3 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #00FFFF;
	border-radius:5%;
	background: linear-gradient(to bottom right, white, #00FFFF);
}

.donatiewrapper .les1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	background-color: #FF8B8B;     /* diep rose   */
	border: solid red;	
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, white, #FF8B8B);
}

.donatiewrapper .nieuw {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	background-color: #33CCFF;     /* licht blauw */
	border: solid red;	
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, white, #33CCFF);
}


.wrapper .les1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	background-color: #FF8B8B;     /* diep rose   */
	border: solid red;	
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, white, #FF8B8B);
}

.wrapper .les2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #F0DF55;     /* oker */
	border: solid grey;
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, white, #F0DF55);
}

.wrapper .les3 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #FFC5C5;       /* licht rose    */
	border: solid red;
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, white, #FFC5C5);
}

.downwrapper .dwn1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid red;
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, yellow, #166467);
}

.dwn1 a:hover {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FF9900;
	border-left-color: #FF9900;
	text-decoration: none;
}

.downwrapper .dwn2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid red;
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: radial-gradient(yellow, red);
}

.dwn2 a:hover {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: green;
	border-left-color: green;
	text-decoration: none;
}

.downwrapper .dwn3 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid red;
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, yellow, purple);
}

.dwn3 a:hover {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: green;
	border-left-color: green;
	text-decoration: none;
}

.downwrapper .dwn4 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid red;
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to bottom right, yellow, #56A1E1);
}

.dwn4 a:hover {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: red;
	border-left-color: red;
	text-decoration: none;
}

.downwrapper .don {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid blue;
	border-width:1px;
	border-radius:5%;
	padding:3px;
	background: linear-gradient(to top left, #BACDDE, white);
}

.don a:hover {
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: red;
	border-left-color: red;
	text-decoration: none;
}


.horwrapper {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:30px;
	grid-auto-rows: minmax(200px,auto);
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}

.horwrapper .hor1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid black;
	border-width:1px;
	border-radius: 7%;
	padding:3px;
	background: linear-gradient(to bottom right, white 30%, yellow 40%, white);
}

.horwrapper .land {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid black;
	border-width:1px;
	border-radius: 7%;
	padding:3px;
	background: linear-gradient(to bottom right, white 30%, yellow 40%, green);
}

.horwrapper .bijz {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	/*   background-color: #166467;       green    */
	border: solid black;
	border-width:1px;
	border-radius: 7%;
	padding:3px;
	background: linear-gradient(to bottom right, yellow 30%, green 40%, red);
}

.horwrapper a:hover{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FF9900;
	border-left-color: #FF9900;
	text-decoration: none;
}

.newcombwrapper .nc5{
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border: solid green;
	border-width:1px;
	border-radius:5%;
	padding:5px;
	background: linear-gradient(to bottom right, white 40%,yellow);
}

.newcombwrapper .best{
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border: solid green;
	border-width:1px;
	border-radius:5%;
	padding:5px;
	background: linear-gradient(to bottom right, white 40%,orange);
}

/* Media query for portable telefoons  */

@media (max-width: 500px){
.newcombwrapper {
	width: 80%;
	display: grid;
	grid-template-columns: repeat(1,1fr);
	gap:30px;
	grid-auto-rows: minmax(200px,auto);
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 60px;
	margin-left: auto;
}
.newcombwrapper .nc5{
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border: solid green;
	border-width:1px;
	border-radius:5%;
	padding:5px;
	background: linear-gradient(to bottom right, white 40%,yellow);
}

.newcombwrapper .best{
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	border: solid green;
	border-width:1px;
	border-radius:5%;
	padding:5px;
	background: linear-gradient(to bottom right, white 40%,orange);
}

}   /* Einde media query   */