*, *:after, *:before {
 box-sizing: border-box;
}

*{
   scrollbar-width: auto; /* Of 'auto' voor browserstijl */
   scrollbar-color: transparent transparent; /* Scrollbar-achtergrond en -duimkleur */
}

.tags {
   flex-wrap: wrap;
   -webkit-box-pack: center;
   justify-content: center;
   display: -webkit-box;
   display: flex;
}

/* Shared */
.tag-container {
   width: 300px;
   height: 500px;
   margin: 20px;
   position: relative;
   -webkit-perspective: 800px;
   perspective: 800px;
}

.tag {
   width: 100%;
   height: 100%;
   position: absolute;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transition: -webkit-transform 1s;
   transition: -webkit-transform 1s;
   transition: transform 1s;
   transition: transform 1s, -webkit-transform 1s;
}

.tag-container:hover .tag {
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

.tag-side {
   width: 100%;
   height: 100%;
   position: absolute;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
}

.tag-side.is-back {
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
   z-index: 2;
}

.tag-text {
   width: 100%;
   padding: 0 20px;
   color: #222;
   font: 28px 'Sacramento', cursive;
   text-align: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

/* Tag 1 */
.tag-1-side:before {
   content: " ";
   background: #fff;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   position: absolute;
   top: 30px;
   left: 50%;
   z-index: 1;
   -webkit-transform: translate3d(-50%, 0, 0);
   transform: translate3d(-50%, 0, 0);
}

.tag-1-top {
   width: 100%;
   margin-top: -35px;
   position: absolute;
   top: 0;
   -webkit-transform: scale(0.775, 0.5) translate3d(0, 0, 0);
   transform: scale(0.775, 0.5) translate3d(0, 0, 0);
}

.tag-1-top:before {
   content: " ";
   background: #ede5d8;
   padding-bottom: 200px;
   border-bottom-left-radius: 30px;
   border-top-left-radius: 10px;
   border-top-right-radius: 30px;
   display: block;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.tag-1-side.is-back .tag-1-top:before {
   background: #e44f47;
}

.tag-1-text {
   background: #ede5d8;
   margin-top: 65px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   padding-top: 30px;
   position: relative;
   z-index: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.tag-1-side.is-back .tag-1-text {
   background: #e44f47;
   color: #fff;
}

/* Tag 2 */
.tag-2-side:before,
.tag-2-side:after {
   content: " ";
   background: #b6dfde;
   height: 50px;
   position: absolute;
   top: 0;
   left: 50px;
   right: 50px;
   -webkit-transform: skew(-45deg) translate3d(0, 0, 0);
   transform: skew(-45deg) translate3d(0, 0, 0);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
}

.tag-2-side.is-back:before,
.tag-2-side.is-back:after {
   background: #47ada0;
}

.tag-2-side:after {
   -webkit-transform: skew(45deg);
   transform: skew(45deg);
}

.tag-2-text:before {
   content: " ";
   background: #fff;
   width: 27px;
   height: 27px;
   border: 6px solid #47ada0;
   border-radius: 50%;
   position: absolute;
   top: 20px;
   left: 50%;
   z-index: 1;
   -webkit-transform: translate3d(-50%, 0, 0);
   transform: translate3d(-50%, 0, 0);
}

.tag-2-side.is-back .tag-2-text:before {
   border-color: #b6dfde;
}

.tag-2-text {
   background: #b6dfde;
   margin-top: 50px;
   padding-bottom: 30px;
}

.tag-2-side.is-back .tag-2-text {
   background: #47ada0;
}

/* Tag 3 */
.tag-3-side {
   margin-top: 2px;
   padding-top: 20px;
   display: -webkit-box;
   display: flex;
}

.tag-3-side:before {
   content: " ";
   background: #e44f47;
   width: 150px;
   height: 100%;
   border-radius: 20px;
   position: absolute;
   top: 0;
   left: 50%;
   -webkit-transform: translate3d(-50%, 0, 0);
   transform: translate3d(-50%, 0, 0);
}

.tag-3-side.is-back:before {
   background: #b6dfde;
}

.tag-3-side:after {
   content: " ";
   background: #fff;
   width: 45px;
   height: 45px;
   border: 15px solid #e44f47;
   border-radius: 50%;
   position: absolute;
   top: 0;
   left: 50%;
   z-index: 1;
   -webkit-transform: translate3d(-50%, -50%, 0);
   transform: translate3d(-50%, -50%, 0);
}

.tag-3-side.is-back:after {
   border-color: #b6dfde;
}

.tag-3-text {
   background: #e44f47;
   width: 100%;
   border-radius: 20px;
   padding-top: 30px;
   color: #fff;
   z-index: 1;
}

.tag-3-side.is-back .tag-3-text {
   background: #b6dfde;
   color: #222;
}

/* Extras */
.rule-shape {
   width: 100%;
   color: #fff;
   font-size: 34px;
   display: -webkit-box;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   align-self: flex-end;
}

.rule-shape:before,
.rule-shape:after {
   content: " ";
   background: #fff;
   height: 1px;
   margin-bottom: 8px;
   display: block;
   -webkit-box-flex: 2;
   flex-grow: 2;
}

.rule-shape:before {
   margin-right: 6.25px;
}

.rule-shape:after {
   margin-left: 6.25px;
}

.rule-red {
   color: #e44f47;
}

.rule-red:before,
.rule-red:after {
   background: #e44f47;
}

.rule-diagonal {
   background: -webkit-repeating-linear-gradient(
       45deg,
       #e44f47,
       #e44f47 7px,
       transparent 7px,
       transparent 14px,
       #fff 14px,
       #fff 21px,
       transparent 21px,
       transparent 28px
   );
   background: repeating-linear-gradient(
       45deg,
       #e44f47,
       #e44f47 7px,
       transparent 7px,
       transparent 14px,
       #fff 14px,
       #fff 21px,
       transparent 21px,
       transparent 28px
   );
   width: 100%;
   height: 30px;
   position: absolute;
   bottom: 0;
   left: 0;
}

.d1{
 padding-top: 120px;
}
.d3 {
 padding-top: 146px;
}
#e2 {
 padding-bottom: 37px;
}
#e3 {
 padding-top: 56px;
}