header {
    background-color: #F7F6F6;
}

.sec1_BG {
    background-image: url(../image/index/sec1_BG_lines.png) ;
    min-height: 800px;
}

.indexintro h4 {
    width: 60%;
}


.sec3-BG {
    background-image: url(../image/index/sec1_BG_lines.png) ;
    height:calc(100vh - 55px);
}

.sec3-BG img {
    position: absolute;
    right: 0px;
    top: 18vh;
    padding-right: 50px;
    max-width: calc(100% - 50px);
}

@media (max-width: 996px) {
    .sec3-BG {
        align-items: center;
        height: auto;
    }
    .sec3-BG img {
        position: relative;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 100px;
        top: 0;
    }
    .indexintro h4 {
        width: 100%;
    }

    .indexintro h3 {
        font-size: 2rem;
    }
}

.mask {
    background: url(../image/index/sec1_justice_pic.png) no-repeat top right;
    background-size: cover;
    -webkit-mask: url(../image/index/sec1_mask.png) no-repeat top right;
    -webkit-mask-size: contain;
    mask: url(../image/index/sec1_mask.png) no-repeat top right;
    position: absolute;
    right: 0;
}

.btn_normal {
    background-color: #64CCC9;
  color: white;
  border: 1px solid transparent;
  border-radius: .25rem;
  text-align: center;
  padding: 3px 10px;
  letter-spacing:1px;
  font-weight: 600;
}

.btn_normal:hover {
    box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.19);
}

.panel-heading.index {
    height: 40px;
    background-color: white;
    border-left: #FF808B 4px solid;
}

.panel-title a {
    line-height: 40px;
    margin-left: 10px;
    color: #53565A;
}

.panel-body.index {
    background-color: white;
    border-left: #FF808B 4px solid;
    height: auto;
    padding: 10px 0;
}

.panel-body p {
    margin-left: 10px;
    margin-bottom: 0;
}

.donateAni {
    width: 200px;
    height: 200px;
    background-image: url(../image/all/donate_ani.png);
    animation: play 1s steps(3) infinite;
}
@keyframes play {
      0% { background-position:    0px 0; }
    100% { background-position: -600px 0; }
}

 
.itemcircle {
    height: 13px;
    width: 13px;
    border:0 #ff808b solid;
    background-color: #a4a4a4;
    border-radius: 6.5px;
    display: inline-block;
    margin: 0 5px;
    transition-duration: 500ms;
    transition-property: background-color,border-radius,height,width,border;
}

.headeritem {
    margin: 0 5px;
    cursor: pointer;
    transition-duration: 1000ms;
    transition-property: font-size,color;
}

.headeritem.active {
    color: #ff808b;
    font-size:1.5rem;
}

.headeritem.active .itemcircle {
    height: 20px;
    width: 20px;
    border:3px #ff808b solid;
    background-color:#a4a4a400 ;
    border-radius: 10px;
}

.headerchicken {
    opacity: 0;
    position: absolute;
    right:18vw;
    top: 55vh;
    transition-property: opacity ;
    transition-delay:200ms ;
    transition-duration: 500ms;
}

.headerchicken.active {
    opacity: 100;
    transition-property: opacity ;
    transition-duration: 500ms;

}

.headerphoto {
    top:-100vh;
    position: absolute;
    right:0;
    opacity: 0;
    width: 85%;
    pointer-events: none;
    transition-duration: 1000ms;
    transition-property:top,opacity;
    transition-timing-function:ease-in-out;
}

.headerphoto.active {
    top:-55px;
    transition-timing-function:ease-in-out;
    transition-duration: 1000ms;
    transition-property:top,opacity;
    opacity: 100;
}

.headertext {
    margin-top: 26vh;
    z-index: 10;
}

.headertext p{
    width:50%;
    margin-bottom: 20px;
    font-size:1.5em;

}

.headertext h2 {
    font-size:3em;
}

.headertext p,
.headertext h2 {
    position: absolute;
    top:-100px;
    opacity: 0;
    transition:top ease-in-out 500ms;
}


.headertext h2.active,
.headertext p.active{
    position: relative;
    top:0;
    opacity: 100;
    transition-delay: 500ms;
    transition:opacity ease-out 1s;
}


@media (max-width: 1200px) {
    .headerphoto{
        width:1120px;
    }

    .headerchicken {
        right:30vw;
        top: 200px;
    }

    .headertext {
        margin-top:500px;
        font-size:0.8rem;
        text-align: center;
    }
    .headertext p {
        margin-top: 20px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 768px) {
    .headerphoto{
        width: 700px;
    }
}
@media (max-width:576px){
    .headertext {
        margin-top:calc(40px + 60vw);
        font-size:0.7rem;
    }

    .headertext h2 {
        font-size: 2.4em;
    }
    
    .headertext h5 {
        font-size: 1.2em;
    }

    .headerchicken {
        right:20vw;
        top: 120px;
        width: 60%;
    }

    .headerchicken#friendlypng {
        transform:scaleX(-1);
    }

    .headeritem.active {
        color: #ff808b;
        font-size:1rem;
    }
    #headermeat{
        margin-top: 0;
    }
}

#register::before {
    content: "";
    display: block;
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
}

.lookdown {
    margin-left: calc(50vw - 57px);
    position: absolute;
    bottom: 50px;
    -webkit-animation: bounce-down 1.6s linear infinite;
    animation: bounce-down 1.6s linear infinite;
}

@-webkit-keyframes bounce-down {
    25% {
         -webkit-transform: translateY(-6px);
    }
    50%, 100% {
         -webkit-transform: translateY(0);
    }
    75% {
         -webkit-transform: translateY(6px);
    }
}

@keyframes bounce-down {
     25% {
          transform: translateY(-6px);
     }
     50%, 100% {
          transform: translateY(0);
     }
     75% {
          transform: translateY(6px);
     }
}