*{
    margin: 0;
}
.background-grey{
    height: 180px;
    background-color: #f6f6f6;
    width: 100%;
}
.div-bericht-buttons-comment{   /*buttons van scenario vormin geruchtmakend ect*/
    width: 100%;
    height: 100vh;
    margin-left: 10px;
    margin-right: auto;
}
.main{
    width: 60%;
    height: 80vh;
    margin-left: auto;
    margin-right: auto
}
.button-taal-vorming{
    height: 30px;
    width: 150px;
    border: none;
}
.sig-vorming{
    margin-top: 20px;
    width: 170px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #f6f6f6;
    text-align: right;
    padding-right: 10px;
}
.gerucht-opruiend-taal{
    margin-left: 30px;
    background-color: #f6f6f6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.button-underline{
    border: none;
    font-weight: 500;
    color: #3c3c3c;
    font-family: "Avenir LT W01_55 Roman1475520";
    font-size: .9375rem;
    line-height: 1.53333;   
}
.button-underline-nohover{
    border: none;
    font-weight: 500;
    color: #3c3c3c;
    font-family: "Avenir LT W01_55 Roman1475520";
    font-size: .9375rem;
    line-height: 1.53333;   
}
.button-underline:hover {
    border-bottom: 2px solid #3bb5e6;
}
.textcolor{
    color: #3bb5e6;
}
.gerucht-opruiend{
    width: 500px;
    height: 30px;
    text-align: left;
    margin-top: 8vh;
    float: left;
    padding-left: 160px;
    padding-right: 55%;
}
.senario-identiteit-groep{
    height: 190px;
    float: left;
    text-align: right;
}
/*einde buttons*/
.berichtvak{
    width: 73%;
    height: 185px;
    background-color: white;
    border: 1px solid #3bb5e6;
    border-radius: 15px;
    float: left;
    position: relative;
}
.bericht-text{
    padding: 20px 30px 50px 30px;
    font-size: 1.07rem;
    letter-spacing: .02rem;
    color: #3c3c3c;
    font-weight: 500;
    font-family: "Avenir LT W01_55 Roman1475520";
}
.auteur-text{
    color: #7c7c7c;
    font-size: .74rem;
    line-height: 1.53333;
    letter-spacing: .02rem;
    position: absolute;
    left: 30px;
    bottom: 10px;
    font-family: "Avenir LT W01_55 Roman1475520";
}
.comment{
    background-color: #daf0fb;
    font-weight: 400;
    color: #3bb5e6;
    padding: 10px 10px 10px 20px;
    float: left;
    width: 47%;
    margin-left: 250px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    font-family: "Avenir LT W01_55 Roman1475520";
    font-size: .9375rem;
    line-height: 1.53333;
    letter-spacing: .02rem;
}
.arrowpoints{      /*knoppen om door te klikken*/
    float: left;
    /* border: 1px solid black; */
    width: 300px;
    height: 30px;
    margin: 10px;
    margin-right: 5%;
    padding-left: 2%;
    position: absolute;
}
.arrow-forward-backward{
    color: #3bb5e6;
    font-size: 25px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: #f6f6f6;
    float: left;
    padding-left: 3px;
    padding-top: 3px;

}
.arrow-forward-backward:hover{
    background-color: #daf0fb;
}
/*einde knoppen om door te klikken*/
/*knop met wat geburd hier en knop ingredienten voor reactie*/
.uitschuif-button-wat-gebeurd{
    width: 90%;
    text-align: left;
    padding: 15px 8px 0px 8px;
    background-color: white;
    color: #3bb5e6;
    float: left;
    border: 1px solid #cccccc;
    margin-left: 30px;
    border-bottom: none;
    margin-top: 30px;
    font-size: .8rem;
    letter-spacing: .06rem;
}
.uitschuif-button-ingredient{
    width: 90%;
    text-align: left;
    padding: 15px 8px 0px 8px;
    background-color: white;
    color: #3bb5e6;
    float: left;
    border: 1px solid #cccccc;
    margin-left: 30px;
    font-size: .8rem;
    letter-spacing: .06rem;
}
.uitschuif-button-voorbeeld{
    width: 90%;
    text-align: left;
    padding: 15px 8px 0px 8px;
    background-color: white;
    color: #3bb5e6;
    float: left;
    border: 1px solid #cccccc;
    margin-left: 30px;
    margin-top: -1px;
    font-size: .8rem;
    letter-spacing: .06rem;
}
#textwat{
    display: none;
    color: black;
}
.wat-ingredienten-div{
    margin-top: 250px;
}
#what{
    display: none;
    color: #4f4f4f;
    padding: 0px 8px 18px 1px;
    font-family: "Avenir LT W01_55 Roman1475520";
    font-size: 14px;
    font-size: .9375rem;
    line-height: 1.53333;
    letter-spacing: .02rem;
}
#ingredients{
    display: none;
    color: #4f4f4f;
    padding: 0px 8px 18px 1px;
    font-family: "Avenir LT W01_55 Roman1475520";
    font-size: .9375rem;
    line-height: 1.53333;
    letter-spacing: .02rem;
}
#voorbeeld{
    display: none;
    color: #4f4f4f;
    padding: 0px 8px 18px 1px;
    font-family: "Avenir LT W01_55 Roman1475520";
    font-size: 14px;
}
.plus{
    margin-right: 10px;
    text-align: right;
    font-size: 25px;
    margin-top: -23px;
} 
.div-2{
    /* border: 1px solid black; */
    width: 65%;
    height: 50vh;
    float: left;
}/* einde knop met wat geburd hier en knop ingredienten voor reactie*/
/* alles hieronder voor responsiveness*/

.dotItemActive {
    width: 9px;
    height: 9px;
    background-color: #3bb5e6;
    border-radius: 50%;
    margin-left: 6px;
    float: left;
    margin-top: 10px;
}

.dotItemInactive {
    width: 7px;
    height: 7px;
    background-color: #ffffff;
    border: 1px solid #3bb5e6;
    border-radius: 50%;
    float: left;
    margin-left: 6px;
    margin-top: 10px;
}

/* .senario-identiteit-groep-dropdown{
    display: none;
    float: left;
    text-align: right;
}
.gerucht-opruiend-dropdown{
    display: none;
    float: left;
    text-align: left;
} */
#dotContainer {
    display: block;
}

#numberContainer {
    display: none;
}

@media(max-width: 1200px){
    .main{
        width: 100%;
    }
    .arrowpoints{      
        padding-left: 0%;
    }
    .background-grey{
        height: 65vh;
    }
    .arrowpoints{
        float: left;
        /* border: 1px solid black; */
        width: 30%;
        height: 30px;
        margin: 10px;
        margin-left: 3%;
    }
}
@media(max-width: 700px){
    .main{
        width: 85%;
    }
    #dotContainer {
        display: block;
        margin-left: 45px;
        width: 90px;
    }
        .button-underline{
        border: none;
        font-weight: 500;
        color: #3c3c3c;
        font-family: "Avenir LT W01_55 Roman1475520";
        font-size: .7rem;
        line-height: 1.53333;   
    }

    .button-underline:hover {
        border-bottom: 0px solid #3bb5e6;
    }
    #numberContainer {
        display: none;
    }
    #setPositionBackward{
        margin-left: 45px;
        margin-right: 0px;
    }
    #setPositionForward{
        margin-left: 135px;
        margin-top: -30px;
    }
    .gerucht-opruiend{
        display: block;
        margin-top: 0px;
        width: 6%;
        text-align: left;
        /* float: none; */
        padding: 0;
        margin-left: -20px;
        /* padding-bottom: 30px; */
    }
    .background-grey{
        position: absolute;
        height:35vh;
    }
   
    /* .senario-identiteit-groep-dropdown{
        margin-top: 20px;
        margin-left: 10px;
        width: 49%;
        display: none;
    } */
    .senario-identiteit-groep{
        display: block;
        margin-top: 50px;
        float: none;
        text-align: right;
        margin-right: 15px;
    
    }
    /* .gerucht-opruiend-dropdown{
        width: 49%;
        margin-top: 20px;
        display: block;
        margin-left: -3%;
    } */
    .sig-vorming{
        margin-top: 0;
        text-align: center;
        padding-right: 0px;
        padding: 0;
        width: 30%;
        border-radius: 7px;
    }
    .gerucht-opruiend-taal{
        padding: 1px;
        border-radius: 7px;
        margin-left: 15px;
        float: left;
        /* width: 45%; */
    }
    .button-taal-vorming{
        width: 125px;
    }
   
    .berichtvak{
        width: 100%;
        margin-left: -3%;
        margin-top: -80px;
        padding-bottom: 15px;
        height: 245px;
    }
    .bericht-text{
        padding: 20px 30px 50px 30px;
        font-size: 0.9rem;
        letter-spacing: .02rem;
        color: #3c3c3c;
        font-weight: 500;
        font-family: "Avenir LT W01_55 Roman1475520";
}
    .div-2{
        width: 100%;
        margin: 0;
        padding: 0;
        float: none;
    }
    .comment{
        width: 90.5%;
        margin-left: -3%;
        border-radius: 15px;
        margin-top: 80px;
    }
    
    .uitschuif-button-wat-gebeurd{
        margin-left: -3%;
        width: 100%;
    }
    .uitschuif-button-ingredient{
        margin-left: -3%;
        font-size: 13px;
        width: 100%;

    }
    .uitschuif-button-voorbeeld{
        margin-left: -3%;
        width: 100%;
    }
    .arrowpoints{
        margin-top: 200px;  
    	text-align: center;  
    }
}
@media(max-width: 320px){
    .senario-identiteit-groep{
        float: left;
        margin-top: 20px;
        margin-left: 17%;
    }
    .gerucht-opruiend{
        float: none;
        margin-left: 10%;
    }
    .arrowpoints {
        margin-top: 450px;
    }
    
}
@font-face {
    font-family: "Avenir LT W01_55 Roman1475520";
    src: url(/fonts/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix);
    src: url(/fonts/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix) format("eot"), url(/fonts/b290e775-e0f9-4980-914b-a4c32a5e3e36.woff2) format("woff2"), url(/fonts/4b978f72-bb48-46c3-909a-2a8cd2f8819c.woff) format("woff"), url(/fonts/9bdf0737-f98c-477a-9365-ffc41b9d1285.ttf) format("truetype"), url(/fonts/15281d0d-e3c2-46e1-94db-cb681e00bfaa.svg#15281d0d-e3c2-46e1-94db-cb681e00bfaa) format("svg")
}

@font-face {
    font-family: "Avenir LT W01_65 Medium1475532";
    src: url(/wp-content/themes/HU_2017/assets/fonts/e0542193-b2e6-4273-bc45-39d4dfd3c15b.eot?#iefix);
    src: url(/wp-content/themes/HU_2017/assets/fonts/e0542193-b2e6-4273-bc45-39d4dfd3c15b.eot?#iefix) format("eot"), url(/wp-content/themes/HU_2017/assets/fonts/17b90ef5-b63f-457b-a981-503bb7afe3c0.woff2) format("woff2"), url(/wp-content/themes/HU_2017/assets/fonts/c9aeeabd-dd65-491d-b4be-3e0db9ae47a0.woff) format("woff"), url(/wp-content/themes/HU_2017/assets/fonts/25f994de-d13f-4a5d-a82b-bf925a1e054d.ttf) format("truetype"), url(/wp-content/themes/HU_2017/assets/fonts/3604edbd-784e-4ca7-b978-18836469c62d.svg#3604edbd-784e-4ca7-b978-18836469c62d) format("svg")
}

@font-face {
    font-family: "Avenir LT W01_85 Heavy1475544";
    src: url(/wp-content/themes/HU_2017/assets/fonts/6af9989e-235b-4c75-8c08-a83bdaef3f66.eot?#iefix);
    src: url(/wp-content/themes/HU_2017/assets/fonts/6af9989e-235b-4c75-8c08-a83bdaef3f66.eot?#iefix) format("eot"), url(/wp-content/themes/HU_2017/assets/fonts/d513e15e-8f35-4129-ad05-481815e52625.woff2) format("woff2"), url(/wp-content/themes/HU_2017/assets/fonts/61bd362e-7162-46bd-b67e-28f366c4afbe.woff) format("woff"), url(/wp-content/themes/HU_2017/assets/fonts/ccd17c6b-e7ed-4b73-b0d2-76712a4ef46b.ttf) format("truetype"), url(/wp-content/themes/HU_2017/assets/fonts/20577853-40a7-4ada-a3fb-dd6e9392f401.svg#20577853-40a7-4ada-a3fb-dd6e9392f401) format("svg")
}

@font-face {
    font-family: "Avenir LT W01_95 Black1475556";
    src: url(/wp-content/themes/HU_2017/assets/fonts/f55e4498-ad48-4577-93a0-c614de5cbbb8.eot?#iefix);
    src: url(/wp-content/themes/HU_2017/assets/fonts/f55e4498-ad48-4577-93a0-c614de5cbbb8.eot?#iefix) format("eot"), url(/wp-content/themes/HU_2017/assets/fonts/c78eb7af-a1c8-4892-974b-52379646fef4.woff2) format("woff2"), url(/wp-content/themes/HU_2017/assets/fonts/75b36c58-2a02-4057-a537-09af0832ae46.woff) format("woff"), url(/wp-content/themes/HU_2017/assets/fonts/b5c44a82-eeb8-41de-9c3f-a8db50b24b8a.ttf) format("truetype"), url(/wp-content/themes/HU_2017/assets/fonts/93603a74-2be0-436c-83e1-68f9ef616eaf.svg#93603a74-2be0-436c-83e1-68f9ef616eaf) format("svg")
}

.dropbtn::after{
    content: "\e5cf"; 
    font-family: "Material Icons"; 
    font-size: 20px;
    margin-left: 10px;
    position: absolute;
    margin-top: -2px;
    color: #3bb5e6;
}

.dropbtn {
    margin-top: 20px;
    width: 95%;
    height: 30px;
    border-radius: 10px;
    background-color: #daf0fb;
    text-align: center;
    padding-right: 10px;
    border: none;
  }
  
  .dropbtn:hover, .dropbtn:focus {
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {background-color: #ddd;}
  
  .show {display: block;}

.dropbtn2::after{
    content: "\e5cf"; 
    font-family: "Material Icons"; 
    font-size: 20px;
    margin-left: 10px;
    position: absolute;
    margin-top: -2px;
    color: #3bb5e6;
}
  .dropbtn2 {
    margin-top: 20px;
    width: 95%;
    height: 30px;
    border-radius: 10px;
    background-color: #daf0fb;
    text-align: center;
    padding-right: 10px;
    border: none;
    margin-left: 10px;
  }
  
  .dropbtn2:hover, .dropbtn2:focus {
  }
  
  .dropdown2 {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content2 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown2 a:hover {background-color: #ddd;}
  
  .show2 {display: block;}

  .dropbtn-beschrijvend-text{
    color: #3bb5e6;
  }

.graytext {
	color: #828282;
}