/*  80px *  50  28/   28 */
body {
   background-color: white;
   margin:0px;
   padding:0px;
   font-family: Roboto, Arial, Helvetica, sans-serif;

   height: 100vh;

}

header {
   background-color: white;
   height: 240px;
}

.h1div   {
   width: 100%;
   background-color:#5c5355;
   height:100px;
}

.h2div   {
   position:relative;
   width: 100%;
   background-color:white;
   height:90px;
}

.h3div   {
   width: 100%;
   height:50px;
   vertical-align:bottom;
}


h1   {
color: white;
background-color:#5c5355;    
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size:5rem;
margin:0px;
padding:0px;
text-align: center;
align-items: center;
height:100%;
}

h2 {
margin:0px;
padding:0px;
color: #3779ab; 
background-color: white;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size:3em;
	
text-align: center;
vertical-align: center;
}


h3   {
color: #214066;     /*   #1d405c;   */
background-color: white;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight:800;
font-size:1.6vw;
margin:0px;
width:100%;
float:left;
text-align: left;
vertical-align: bottom;
}



h1:hover{
   color: #214066;   /*   #1d405c;  	*/
}
h2:not(.standaard):hover{
   color:#1d405c;
}
h2:not(.standaard):hover > #logo {
	display:none;
}
h2:not(.standaard):hover > #logoFocus {
	display:initial;
}


h3:hover{
   color:#5c5355;  
}
.aInTekst:hover{
   color:#5c5355;  
}
h5:hover{
   color:#3779ab;  
}

.h1div:hover > h1{
      color:#214066;    /* #1d405c; */
}
 
.h2div:hover{
   color:#1d405c;
}


.headerimg { height:300px;
min-height:300px;
}

h3.hier {
   color: #3779ab;
}

h5   {
color: #214066;     /*   #1d405c;   */
  background-color: #e9eff8;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight:800;
font-size:1.6rem;
margin:0px;
padding:14px 0px 0px 14px;
width:100%;
float:left;
text-align: left;
vertical-align:center;
}

h5.hier {
   color: #3779ab;
}

nav {
  background-color: white;
  color: #6495ed; 
  margin: auto;
  margin-top: 0px;
  padding:0px;
  position: relative;
  max-width: 100%;

text-align:center;
}

.navig{
  z-index:1;
  background-color: white;
  vertical-align:bottom;
}

.navi{
  z-index:2;
  height:100%;
	width:100%;
}

input[type="text"], input[type="radiobutton"] {
	appearance: none;
    font-size: 1.6vw;
	color:black;
	border: 2px solid #214066;	
    width:90%;
	padding: 10px;	
	text-size-adjust: none;
}

textarea {
	appearance: none;
    font-size: 1.6vw;
	color:black;
	border: 2px solid #214066;	
    width:90%;
	padding: 10px;	
	text-size-adjust: none;
}

input[type="submit"] {
	appearance: none;
	color:white;	
	font-size: 2vw;
	border:0px;
	padding: 20px;
	margin-bottom:40px;
}

input[type="text"], input[type="button"], input[type="checkbox"], input[type="submit"], input[type="radio"], textarea {
    font-family: Roboto, Arial, Helvetica, sans-serif;
}


.labelFormulier	{
	  font-size:1.6vw;
   	  width:95%;
	  margin:0 auto;
	  padding:14px;
  }
	
#geslacht{display:none;} 
#puppy:checked ~ #geslacht{display:initial;} 

#tijdOud{display:none;} 
#tijdPupJa:checked ~ #tijdOud{display:initial;} 

#welkeSport{display:none;} 
#sportJa:checked ~ #welkeSport{display:initial;} 


input[type="checkbox"]:hover{
   color:#5c5355;
}


.menu {
height: 54px;
object-fit: scale-down;
vertical-align:middle;
}

.logo {
   padding:0;
   height:40px;
   object-fit: scale-down;
}

#logoFocus {
   display:none;
}


.menu {
   padding:1%;
}


.nav-link  {width:100px;}


.breedte {
background-color: white;
margin: auto;
max-width:1278px;
position:relative;
	padding-left:5%;
padding-right:5%;

}


.breedteH1div {
margin: auto;
max-width:1278px;
width:100%;
position:relative;
height:100%;
vertical-align:middle;
}

.naast {
	float:left;
}

h4   {color: #3779ab; 
background-color: white;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size:3vw;
padding:3% 0% 3% 0%;
margin:auto;
width:100%;
}

h6   {color: #3779ab; 
background-color: white;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size:2.4vw;
padding:3% 0% 3% 0%;
margin:auto;
width:100%;
}

p    {color: black;
font-size:1.6vw;
font-family: Roboto, Arial, Helvetica, sans-serif;
background-color: white;
margin:auto;
padding:3% 0% 3% 0%;
padding-right:0%;
	max-width:100%;
}



a.aInTekst   {
font-weight:800;
color: #214066;     /*   #1d405c;   */
}

.logoKleur   {
   color:#3779ab; 
}

a.logoKleur   {
   font-weight:800;
   text-decoration: none;
}


a.mail{
text-decoration:none;
font-weight:800;
font-family: Roboto, Arial, Helvetica, sans-serif;
color: #df6203;   /* #fc8932; #e9eff8 ;#86010b #23b4fd;  */
font-size:20px;

padding:0;
text-align:left;
}









a.nav-div-geselecteerd   {
font-style: bold;
font-size:38px; 
   color:#3779ab;
}


img {
	
margin:auto;
}

.groot {padding:0 0 0 0;
margin:auto;
	width:100%;
	height:auto;
}

.span-nav-link  {width:50px;}

.nav-link  {width:100px;}



footer    {
   color: black;  
   font-size:16px;
   background-color: #77645b;
   margin:0px;
   padding:0px;
   height:50px;
}

.footerdiv    {
   margin:0px;
   padding:0px;
   height:50px;
}

.footera    {
   color: black;  
   background-color: #77645b;
   margin:0px;
   padding:0px;
   height:50px;
}

.footerAchtergrond    {
   background-color:#5c5355;height:50px;
}


#toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
  height: 100px;  
}

h5::before{
  position: absolute;
  right: 0;
  top: 0;
  height: inherit;
background-color:#5c5355;
  display: flex;
  align-items: center;

  content: "";
}

#toggle:not(:checked) ~ h5::before {
  transform: rotate(0deg) scale(0.75);
}

#toggle:focus ~ h5{
  background: black;
/*   transition: background 0.45s;  */
}

#toggle:checked ~ ul {
  visibility: hidden;
  opacity: 0;
}

#toggle:checked ~ h1 {
   color:white;
}



#toggle:checked ~ #idMenu {
  visibility: visible;
  opacity: 1;
	z-index:3;
}

#toggle:checked ~ #idMenuWeg {
    display:none;
  opacity: 0;
	z-index:2;
}
#toggle:not(:checked) ~ #idMenu {
  display:none;
  opacity: 0;
	z-index:2;
}
#toggle:not(:checked) ~ #idMenuWeg {
  visibility: visible;
  opacity: 1;
	z-index:3;
}


#toggle:not(:checked) ~ ul {
  opacity: 1;
/*   transition: opacity 0.3s ease-in-out;  
	
	
	
	
	
	
	
	*/

  
}



nav ul {
  padding-left: 0;
  padding-top: 0;
  margin-top: 0;
  background: white;
  list-style: none;
  overflow: hidden;
  text-align: left;
/*   transition: all 0.4s ease-out; */
  width: 100%;
  position: absolute;
z-index:3;
}
nav ul li {
  padding-left: 34px;
  border-radius: 2px;
  position: relative;
  display: inline-block;
  line-height: 1.5;
  width: 100%;

  margin: 0 0 0.25rem 0;
background-color:#5c5355;
/*  transition: background 3s;  */

}

nav ul li:hover,
nav ul li a:focus {
  background: #5c5355;
COLOR:wHITE;
/*  transition: background 0.45s;  */
 
}

/*
li::marker {
color: #3b83bd; 
}
*/



nav ul a {
  display: block;
  color: inherit;
font-size:1.6rem;
  font-weight: 200;
  text-decoration: none;
}








/* moeder  */

li.opsomming {
color:blue;
padding-left:5%;
}

li.opsomming {
color:blue;
padding-left:5%;
}


ul.gezondheid   {
font-size:1.6vw;
   text-align: left;
   margin-left: 100px;
   margin-top: 40px ;
   margin-bottom: 40px ;
   margin-right: 40px ;
   list-style-type:none;
   list-style-image: url('../images/Zwitserse_Witte_Herder_gezondheidKlein.png');
padding:0px;
vertical-align:bottom;
}


ul.raad   {
 list-style-image: url('./assets/images/bulletZwhWitteAchtergrond.jpg');
   font-size:40px;
   text-align: left;
   margin-left: 100px;
   margin-top: 40px ;
   margin-bottom: 40px ;
   margin-right: 40px ;
   list-style-type:none;
   list-style-image: url('../images/groeneVink3.jpg');
padding:0px;
vertical-align:bottom;
}

ul.diploma  {
   font-size:1.6vw;
   text-align: left;
   margin-left: 100px;
   margin-top: 0px ;
   margin-bottom: 0px ;
   margin-right: 40px ;
   list-style-type:none;
   list-style-image: url('../images/Zwitserse_Witte_Herder_gezondheidKlein.png');
padding-left:0;
vertical-align:bottom;
}

li   {
   text-align: left;
   align-items:left;

font-size:1.6vw;
   margin-bottom: 5px;
border:2px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
}


/*
span {
margin-left: 20px;
}

*/





/* shows */



div.lijstitem {  width: 100%; font-size:1.6vw;background-color:white;}
div.lijstitem2 {  width: 100%; font-size:1.6vw;background-color:white;}
div.rij1 { border-bottom: 2px dotted #3779ab; font-family: Roboto, Arial, Helvetica, sans-serif;;width: 100%;float: left; }
div.kolom1 { width: 20%; float: left; display:flex;}
div.kolom2 { width: 20%; float: left; display:flex; } 
div.kolom3 { float: left; display:flex;}
div.kolom4 { width: 12%; float: left; display:flex;}
div.kolom5 { width: 62%; float: left; display:flex;} 
div.kolom6 { width: 16%; float: left; display:flex; } 
div.kolom7 { width: 6%; float: left; display:flex; } 
div.rij2 { border-bottom: 2px dotted #3779ab; font-family: Roboto, Arial, Helvetica, sans-serif;;width: 100%;float: left; }
div.kolom8 { width: 32%; float: left; display:flex; }
div.kolom9 { width: 60%; float: left; display:flex; }

div.kolom10 { width: 20%; float: left; display:flex; }

div.div1 {
   width: 1278px;
   border: 1px solid black;
   background-color: #99FFCC;
   padding-top:4px;
   padding-bottom:4px;
   font-size:1.6vw;
}
div.div2 {
   width: 1278px;
   border: 1px solid black;
   background-color: #99CCFF; 
   padding-top:4px;
   padding-bottom:4px;
   font-size:22px;
}
div.div3 {
   width: 1278px;
   border: 1px solid black;
   background-color:  #ffeb3b; 
   padding-top:4px;
   padding-bottom:4px;

   font-size:22px;
}
div.div4 {
   width: 1278px;
   border: 1px solid black;
   background-color: #33CCFF;
   padding-top:8px;
   padding-bottom:8px;
   font-size:22px;
}
div.div5 {
   background-color: #CCFFFF;
   font-size:22px;
}
div.div6 {
   background-color: #CC99FF;
   font-size:22px;
}
div.div7 {
   background-color: #FFFFCC; 
   font-size:22px;
}

div.div1a {
   width: 1278px;
   border: 1px solid black;
   padding-top:8px;
   padding-bottom:8px;
}
div.div2a {
   width: 1278px;
   border: 1px solid black;
}
div.div3a {
   width: 90%;
   border: 0px solid black;
   padding-top:8px;
   padding-bottom:8px;

}
div.div4a {
   width: 1278px;
   border: 1px solid black;
   padding-top:8px;
   padding-bottom:8px;

}
div.div5a {
   width: 1278px;
   border: 1px solid black;
   padding-top:8px;
   padding-bottom:8px;
}
div.div6a {
   width: 1278px;
   border: 1px solid black;
    padding-top:8px;
   padding-bottom:8px;
}

div.div7a {
   width: 1278px;
   border: 1px solid black;
   padding:8px;
}


details {
  margin: 0;

  p {
    padding: 0.75rem 1.5rem;
    margin: 0;
  }
}

summary {

  color:#214066;  
  font-size:2.6vw;
  background:white; 
  font-family: Roboto;
  font-weight:800;

  padding: 0.5em;
  cursor: pointer;
  border-block: 2px solid #9f8b81;

  transition: background 0.25s ease, color 0.25s ease;

  &:hover {
    background: #9f8b81;
  }

  &:last-of-type {
    border-bottom: 0px solid #9f8b81;;
  }
}


@media (max-width: 1277px) {
   h1 {
      font-size:1.6rem;  
	  padding-top:20px;
	   height:80px;
   }
   .beker {

display:none;
   }
   p {
      font-size:3vw;
    }
	 h3 {
      font-size:3vw;
    }
   h2 {
      font-size:2em;
    }
}




@media (max-width: 1278px) {
   p {
      font-size:3vw;
   }
   h4 {
      font-size:5vw;
   }
   summary {
      font-size: 4.6vw;
   }
   h6 {
      font-size: 4.2vw;
   }
   input[type="text"], input[type="button"], input[type="checkbox"], input[type="submit"], input[type="radiobutton"], textarea {
      font-size:3vw;
   }	
   .labelFormulier {
      font-size:3vw;
   }
   input[type="submit"] {
      font-size:5vw;
   }
   .vraagCheckbox {
      padding-bottom:14px;
   }
}



@media (max-width: 1278px) {
	.breedte {max-width:100%;}
	.breedteH1div {margin: 0;max-width:100%;width:100%;}
	.navi {width:90%;}
}


@media (max-width: 319px) {
   .navig {
      visibility: hidden;
      height:0px;
   }
   h3 {
      font-size:1px;
    }
   header {
      height:214px;
   }

}