/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
.dnalogo {
    width: 100%;
    max-height: 45px;
    max-width: 290px;
}
#content {
    background: url("../images/bg.png") top center repeat;
}
#content h2 {
    font-size: 3rem
}
#section-about {
    background: url("../images/about_bg.png") bottom center no-repeat;
    padding: 100px 0 0 0;
    background-size: cover
}
#section-about .about_t {
    font-size: 1.5rem;
    color: #2bffff;
    margin-right: 15px
}
#section-about .about_d {
    font-size: 2rem;
    color: #ffffff;
}
@media (min-width: 992px) {
    #section-about {
        background-size: auto;
    }
    #content h2 {
        font-size: 3.6rem
    }
}
@media (min-width: 1921px) {
    #section-about {
        background-size: 100%;
    }
}
.roadmap_frame {
    background: url("../images/roadmap_bg.png") no-repeat center;
    background-size: 95% 100%;
    padding: 30px 10%;
    margin: 15px auto;
}
.roadmap_frame span {
    color: #2bffff;
    font-size: 1.5rem;
}
@media (min-width: 1200px) {
    .col-20 {
        width: 20%;
    }
    #section-roadmap {
        position: relative;
        display: block;
        height: 1500px;
    }
    .roadmap_frame {
        background: url("../images/roadmap_bg.png") no-repeat;
        background-size: 100% 100%;
        padding: 30px 40px;
        width: 100%;
        max-width: 480px;
        margin: 15px auto;
        position: absolute;
    }
    #section-roadmap .heading-block {
        position: absolute;
        top: 15px;
        left: 57%;
    }
    #phase1 {
        position: absolute;
        top: 0px;
        right: 48%;
    }
    #phase2 {
        position: absolute;
        top: 170px;
        left: 58%;
    }
    #phase3 {
        position: absolute;
        margin-top: 500px;
        right: 58%;
    }
    #phase4 {
        position: absolute;
        margin-top: 640px;
        left: 48%;
    }
    #phase5 {
        position: absolute;
        transform: translate(-50%, 0);
        margin-top: 1180px;
        left: 50%;
    }
}
/*----------ADVISOR-------*/
.flip-card-inner {
    padding: 0
}
.advisor {
    padding-top: 3px;
    padding-bottom: 3px;
}
.no-mark {
    background: url("../images/advisor_bg.png") center center no-repeat;
    background-size: 92% 100%;
}
.mark {
    background: url("../images/advisor_mark_bg.png") center center no-repeat;
    background-size: 92% 100%;
}
#section-advisor .card-title {
    color: #2bffff;
    font-size: 1rem;
    text-align: left;
}
#section-advisor .card-text {
    color: #eee;
    font-size: 0.7rem;
    text-align: left;
}
.flip-card-front, .flip-card-back {
    height: 170px
}
@media (min-width: 480px) {
    .flip-card-front, .flip-card-back {
        height: 220px
    }
}
@media (min-width: 576px) {
    .flip-card-front, .flip-card-back {
        height: 240px
    }
}
@media (min-width: 768px) {
    .flip-card-front, .flip-card-back {
        height: 216px
    }
}
@media (min-width: 1200px) {
    .flip-card-front, .flip-card-back {
        height: 166px
    }
}
@media (min-width: 1600px) {
    .advisor {
        width: 14.28%;
    }
    .flip-card-front, .flip-card-back {
        height: 205px
    }
}
/*----------FAQ-------*/
.accordion-item {
    background: none;
    border: none;
    color: #2bffff;
}
.accordion-button:not(.collapsed) {
    background: url("../images/faq_bg.png") no-repeat;
    background-color: none;
    background-size: 100% 100%;
    box-shadow: none;
}
.accordion-button {
    background: url("../images/faq_bg.png") no-repeat;
    background-color: none;
    background-size: 100% 100%;
    margin-top: 25px;
    padding: 15px 30px 20px 20px;
    color: #eee;
}
.accordion-button span {
    color: #2bffff;
    font-size: 1.5rem;
    padding-right: 10px;
}
.accordion-button:focus {
    z-index: 3;
    border: 0;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}
.accordion-flush {
    max-width: 720px;
    margin: 0 auto;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("../images/icon_up.png")
}
.accordion-button::after {
    background-image: url("../images/icon_up.png")
}
.accordion-button:not(.collapsed) {
    color: #ffffff
}
.modal1 h3 {
    color: #000;
}
.index {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-color: black;
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: 3;
}
.flip1 {
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-name: flip1;
    -webkit-animation-name: flip1;
    animation-name: flip1;
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	        -moz-transform: rotateY(0deg);
	        -webkit-transform: rotateY(0deg);
	        transform: rotateY(0deg);
}
@-moz-keyframes flip1 {
    0% {
        -moz-transform: rotateY(0deg);
    }
    50% {
        -moz-transform: rotateY(-180deg);
    }
    100% {
        -moz-transform: rotateY(0deg);
    }
}
@-webkit-keyframes flip1 {
    0% {
        -webkit-transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(-180deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
    }
}
@keyframes flip1 {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}
.flip2 {
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -moz-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-name: flip2;
    -webkit-animation-name: flip2;
    animation-name: flip2;
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
		        -moz-transform: rotateY(180deg);
	        -webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
	z-index: -1;
}
@-moz-keyframes flip2 {
    0% {
        -moz-transform: rotateY(180deg);
    }
    50% {
        -moz-transform: rotateY(0deg);
  
    }
    100% {
        -moz-transform: rotateY(180deg);
    }
}
@-webkit-keyframes flip2 {
    0% {
        -webkit-transform: rotateY(180deg);

    }
    50% {
        -webkit-transform: rotateY(0deg);

    }
    100% {
        -webkit-transform: rotateY(180deg);
    }
}
@keyframes flip2 {
    0% {
        transform: rotateY(180deg);

    }
    50% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}