* {
    margin: 0px;
    padding: 0px;
    font-family: Verdana;
}

#wrapper {
    height: auto;
    border-radius: 19.2px;
}

.wrp1 {
    background-color: #FFBA08;
}

.wrp2 {
    background-color: #FAA307;
}

.wrp3 {
    background-color: #F48C06;
}

.wrp4 {
    background-color: #E85D04;
}

.wrp5 {
    background-color: #DC2F02;
}

.wrp6 {
    background-color: #D00000;
}

body {
    width: 100%;
}

.backgroundheader {
    width: 100%;
    position: fixed;
    height: 124px;
}
.bgh1 {
    background-color: #FFBA08;
}

.bgh2 {
    background-color: #FAA307;
}

.bgh3 {
    background-color: #F48C06;
}

.bgh4 {
    background-color: #E85D04;
}

.bgh5 {
    background-color: #DC2F02;
}

.bgh6 {
    background-color: #D00000;
}

header {
    width: 100%;
    margin: auto;
    height: 104px;
    border-radius: 19px;
    margin-bottom: -24px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

.header1 {
    background-color: #FAA307;
}

.header2 {    
    background-color: #F48C06;
}

.header3 {    
    background-color: #E85D04;
}

.header4 {    
    background-color: #DC2F02;
}

.header5 {    
    background-color: #D00000;
}

.header6 {    
    background-color: #B00000;
}

header h1 {
    text-align: center;
    line-height: 56px;
    font-weight: bold;
    font-size: 25.6pt;
}

nav {
    display: flex;
    width: 100%;
    margin: auto;
    margin-top: 60.8px;
    height: 64px;
    justify-content: center;
    border-radius: 5px;
    position: fixed;
    top: 0;
    z-index: 2;
    border-bottom: 2px solid;
}

.nav1 {
    background-color: #FFBA08;
    border-color: #FAA307;
}

.nav2 {
    background-color: #FAA307;
    border-color: #F48C06;
}

.nav3 {
    background-color: #F48C06;
    border-color: #E85D04;
}

.nav4 {
    background-color: #E85D04;
    border-color: #DC2F02;
}

.nav5 {
    background-color: #DC2F02;
    border-color: #D00000;
}

.nav6 {
    background-color: #D00000;
    border-color: #B00000;
}

/* .navdiv a::before {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 3px;
    border-radius: 5px;
    transform-origin: 50%;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transition: 200ms ease;
} */

.navdiv a:hover {
    scale: 1;
}

.navdiv a::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 0;
    height: 50px;
    transition: width 0.3s ease;
}

.Home a::before {
    background-color: #FAA307;
}

.wat-is-origami a::before {
    background-color: #F48C06;
}

.bekende-mensen a::before {
    background-color: #E85D04;
}

.top-origami-modellen a::before {
    background-color: #DC2F02;
}

.origami-maken a::before {
    background-color: #D00000;
}

.tips-en-tools a::before {
    background-color: #B00000;
}

/* .navdiv a:hover::before {
    transform: translate3d(-50%, -50%, 0) scale3d(50, 50, 50);
    transition: 500ms ease;
} */

.navdiv a:hover::before {
    width: 100%;
}

.navdiv {
    width: 182.4px;
    text-align: center;
    font-size: 12pt;
    line-height: 40px;
    border-radius: 5px;
    border: 2px solid;
    display: flex;
    position: relative;
    margin: 8px 8px 8px 0px;
    overflow: hidden;
}

.navdiv1 {
    border-color: #F48C06;
}

.navdiv2 {
    border-color: #E85D04;
}

.navdiv3 {
    border-color: #DC2F02;
}

.navdiv4 {
    border-color: #D00000;
}

.navdiv5 {
    border-color: #B00000;
}

.navdiv6 {
    border-color: #900000;
}

.navdiv a {
    text-decoration: none;
    flex: 1;
    color: black;
    font-size: 100%; 
}

.Home {
    background-color: #FFBA08;
}

.wat-is-origami {
    background-color: #FAA307;
}

.bekende-mensen {
    background-color: #F48C06;
}

.top-origami-modellen {
    background-color: #E85D04;
}

.origami-maken {
    background-color: #DC2F02;
}

.tips-en-tools {
    background-color: #D00000;
    margin-right: 0px;
}

#frontpicture {
    margin: auto;
    width: min(100%, 1152px);
    text-align: right;    
    font-size: 19.2pt;
    padding-top: 188.8px;
}

.animated-linkA {
    position: relative;
    text-decoration: none;
    color: #E85D04;
    margin-right: 40px;
    font-size: 19.2pt;
    transition: color 0.3s ease;
    bottom: 20px;
}

.animated-linkA1 {
    margin-bottom: 16px;
    color: #000000;
    text-align: center;
    margin-right: 0;
    bottom: 0;
}

.animated-linkA::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #D00000;
    transition: width 0.3s ease;
}

.animated-linkA:hover {
    color: #D00000;
}

.animated-linkA:hover::after {
    width: 100%;
}

#frontpicture img {
    margin-bottom: -36.8px;
    width: min(100%, 1152px);
}

.smalltextbox {
    width: min(100%, 1152px);
    height: 100%;
    display: flex;
    margin: auto;
    margin-top: 120px;
    border-radius: 19.2px;
    font-size: 16pt;
    justify-content:space-evenly;
}

.smalltextbox1 {    
    background-color: #FAA307;
    /* padding-top: 10px; */
}

.smalltextbox2 {    
    background-color: #F48C06;
    padding-top: 16px;
    flex-direction: column;
}

.smalltextbox3 {    
    background-color: #E85D04;
    padding-top: 16px;
    flex-direction: column;
}

.smalltextbox4 {    
    background-color: #DC2F02;
    padding-top: 16px;
    flex-direction: column;
}

.smalltextbox5 {    
    background-color: #D00000;
    padding-top: 16px;
    flex-direction: column;
}

.smalltextbox6 {    
    background-color: #B00000;
    padding-top: 16px;
    flex-direction: column;
}

.titleA {
    width: 100%;
}

.smalltextbox h2 {
    text-align: center;
    margin-bottom: 32px;
    font-size: 21.6pt;
}

.smalltextbox h3 {
    text-align: center;
    font-size: 21.6pt;
    margin-bottom: 16px;
}

.sidepictureA {
    width: 40%;
    height: auto;
    float: inline-start;
    border-radius: 19.2px;
    margin: 0px;
    max-height: 600px;
}

.sidepictureA img {
    width: 100%;
    height: 100%;
    border-radius: 19.2px;
    object-fit: cover;
}

.sidepictureAA {
    margin: 1%;
    object-position: center;
}

.sidepictureAA2 {
    width: 60%;
}

.smtxtbxtextA {
    float: left;
    width: 60%;
    height: auto;
    margin: 8px 24px 16px 16px;
    text-align: right;
    
}

.smtxtbxtextAA {
    text-align: left;
}

.contentA {
    display: flex;
}

.smtxtbxlft {
    float: left;
    width: 45%;
    height: fit-content;
    margin: min(2%, 16px);
    text-align: center;
}

.smtxtbxrgh {
    float: right;
    width: 45%;
    height: fit-content;
    margin: min(2%, 16px);
    text-align: center;
}

.rghimg {
    width: 100%;
    height: 291.8px;
    background-image: url(images/origami_eagle.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 19.2px;
}

.lftimg {
    width: 100%;
    height: 291.8px;
    background-image: url(images/origami_pegasus.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 19.2px;
}

.sidepictureB {
    
    width: 40%;
    height: 80%;
    height: auto;
    float: left;
    border-radius: 19.2px;
    overflow: hidden;
    max-height: 600px;
    /* align-self: center; */
}

.sidepictureB img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 19.2px;
}

.sidepictureBA {
    object-position: center;
    margin: 1%;
}

.sidepictureBA2 {
    width: 60%;
}

.smtxtbxtextB {
    float: right;
    width: 60%;
    height: fit-content;
    margin: 16px;
    text-align: left;
}

.smtxtbxtext2B {
    text-align: right;
}

#frontpageaddon {
    text-align: left;
}

#frontpageaddon h2 {
    text-align: left;
}

#frontpageaddon ol {
    padding-left: 32px;
}

footer {
    overflow: auto;
    width: 100%;
    padding: 16px 0px;
    background-color: #FAA307;
    color: black;
    border-radius: 19.2px;
    border-top-left-radius: 4px;    
    border-top-right-radius: 4px;
    margin-top: 16px;
}

.footer2 {
    background-color: #F48C06;
}

.footer3 {
    background-color: #E85D04;
}

.footer4 {
    background-color: #DC2F02;
}

.footer5 {
    background-color: #D00000;
}

.footer6 {
    background-color: #B00000;
}

footer p {
    float: left;
    width: calc((100% / 3) - 2px - 16px );
    text-align: center;
    border-left: 1px solid #FFBA08;
    border-right: 1px solid #FFBA08;
    padding: 0 8px;
}

.p2 {
    border-left: 1px solid #FAA307;
    border-right: 1px solid #FAA307;
}

.p3 {
    border-left: 1px solid #F48C06;
    border-right: 1px solid #F48C06;
}

.p4 {
    border-left: 1px solid #E85D04;
    border-right: 1px solid #E85D04;
}

.p5 {
    border-left: 1px solid #DC2F02;
    border-right: 1px solid #DC2F02;
}

.p6 {
    border-left: 1px solid #D00000;
    border-right: 1px solid #D00000;
}

#footerwrapper {
    width: min(100%, 1152px);
    margin: auto;
}

footer p:first-of-type, footer p:last-of-type {
    width: calc((100% / 3) - 16px);
    border: none;
    text-align: left;
    padding: 0 0 0 8px;
    margin: 0 8px 0 0;
}

footer p:last-of-type {
    padding: 0px;
    text-align: right;
    margin: 0 8px 0 8px;
    overflow: hidden;
}

.animated-linkB {
    position: relative;
    color: #E85D04;
    text-decoration: none;
    font-size: 17px;
    transition: color 0.3s ease;
}

.animated-link2B {
    color: #DC2F02;
}

.animated-link3B {
    color: #D00000;
}

.animated-link4B {
    color: #900000;
}

.animated-link5B {
    color: #500000;
}

.animated-link6B {
    color: #200000;
}

.animated-linkB::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1.2px;
    background-color: #D00000;  
    transition: width 0.3s ease;
}

.animated-link2B::after {
    background-color: #B00000;
}

.animated-link3B::after {
    background-color: #B00000;
}

.animated-link4B::after {
    background-color: #500000;
}

.animated-link5B::after {
    background-color: #200000;
}

.animated-link6B::after {
    background-color: #000000;
}

.animated-linkB:hover {
    color: #D00000;
}

.animated-link2B:hover {
    color: #B00000;
}

.animated-link3B:hover {
    color: #B00000;
}

.animated-link4B:hover {
    color: #500000;
}

.animated-link5B:hover {
    color: #200000;
}

.animated-link6B:hover {
    color: #000000;
}

.animated-linkB:hover::after {
    width: 100%;
}

.frontpictureB img {
    width: min(100%, 1152px);
    height: 10%;
    object-fit: cover;

}

.frontpictureB {
    width: min(100%, 1152px);
    height: 10%;
    margin: auto;
    overflow: hidden;
    border-radius: 19.2px;
    padding-top: 124.8px;
    display: flex;
}

@media screen and (max-width: 718px) {
    .top-origami-modellen {
        line-height: 21.6px;
    }
}

@media screen and (max-width: 905px) {
    .bekende-mensen {
        line-height: 21.6px;
    }
    
    .animated-linkAA {
        font-size: 17pt;
        bottom: 17px;
        margin-right: 30px;
    }
}

@media screen and (max-width: 817px) {
    .origami-maken {
        line-height: 21.6px;
    }
}

@media screen and (max-width: 771px) {
    .wat-is-origami {
        line-height: 21.6px;
    }

    .animated-linkAA {
        font-size: 15pt;
        margin-right: 20px;
        bottom: 15px;
    }
}

@media screen and (max-width: 701px) {
    .tips-en-tools {
        line-height: 21.6px;
    }
}

@media screen and (max-width: 880px) {
    .smalltextbox {
        font-size: 12pt;
    }
}