* {

    margin: 0px !important;
    padding: 0px !important;
}


body {
    background-color: #efe2db;
    color: #0e0204;


}

/*
body.darkmode #bodyBackground{
    background-image: url(../images/bgPatternLight.png);
    background-attachment: fixed;
    
    
}
 #bodyBackground{
    background-image: url(../images/bgPatternDark.png);
         background-attachment: fixed;

    
}*/

body.darkmode {
    color: #efe2db;
    background-color: #0e0204;

}

body.darkmode #mainContent {
    color: #efe2db;
    background-color: #0e0204;
    /* border-left: 4px double #ff0093;
    border-right: 4px double #ff0093; */
}

#mainContent {
    background-color: #efe2db;
    color: #0e0204;
    /* border-left: 4px double #ff0093;
    border-right: 4px double #ff0093;*/
}

@media screen and (max-width: 800px) {

    body.darkmode #mainContent {
        border: none !important;
    }

    #mainContent {
        border: none !important;
    }
}


#banner {
    width: 100%;
    height: 45px;
    padding-top: 0px !important;



}

#banner h5 {
    text-align: center;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

body.darkmode #banner {
    background-color: #0e0204;
    color: #efe2db;
}

#banner {
    background-color: #efe2db;
    color: #0e0204;
}

#banner span {

    margin-right: 20px !important;
}

body.darkmode #banner span {
    margin-right: 20px !important;
}



#content {
    margin-top: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px !important;
    padding: 0px !important;
    width: 100%;
}

.contentHolder {
    width: 70% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-top: 50px !important;
    display: block !important;


}

@media screen and (max-width: 800px) {
    #content {
        width: 100% !important;
    }

    .contentHolder {
        width: 95% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-top: 100px !important;
        display: block !important;
        border: none;
        padding-left: 0px !important;
        padding-right: 0px !important;


    }

}

h1 {
    font-size: 12vw;
    color: #ff0093;
    text-align: left;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -10px;
    line-height: 72px;
    font-weight: 100;
    margin-left: 20px !important;
    margin-right: 20px !important;

}

@media screen and (max-width: 800px) {
    h1 {
        font-size: 18vw !important;
    }
}



h2 {
    font-size: 5vw;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -4px;
    font-weight: 400;
    font-style: italic;
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 30px !important;

}

@media screen and (max-width: 800px) {
    h2 {
        font-size: 9vw !important;
    }
}



h3 {
    font-size: 2vw;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -2px;
    font-weight: 100;
    margin-bottom: 5px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

@media screen and (max-width: 800px) {
    h3 {
        font-size: 5vw !important;
    }
}


h4 {
    color: #ff0093;
    font-size: 3.5vw;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -2.5px;
    font-weight: 800;
    font-weight: bold;
    margin-bottom: 5px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

@media screen and (max-width: 800px) {
    h4 {
        font-size: 7vw !important;
    }
}



#about h3 {
    font-size: 4.5vw;
    margin-bottom: 5px !important;
}

#about h4 {
    font-size: 2vw;
    margin-bottom: 5px !important;
}


h5 {
    font-size: 1.5vw;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 4px !important;
    margin-top: 12px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;

}

@media screen and (max-width: 800px) {
    h5 {
        font-size: 4vw !important;
    }
}

p {
    font-size: 20px;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1px;
    font-weight: 100;
    margin-bottom: 16px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

a {
    color: #a30e2b !important;
    text-decoration: none;
    font-family: "Times New Roman", times, serif;
    letter-spacing: 1px;
    font-weight: 800;
    font-style: italic;
    margin-left: 20px !important;
    margin-right: 20px !important;


}

p a {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

h4 a {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

a:hover {
    color: #ff0093 !important;
    text-decoration: underline;
}

a:active {
    color: #ff0093;
}

a:visited {
    color: #ff0093;
}

ul {
    margin-left: 20px !important;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1px;
    font-weight: 100;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

li {
    font-size: 20px;
    margin-left: 00px !important;
    margin-bottom: 15px !important;
    list-style: none;
}

ul li::before {
    content: "✦  ";
    font-size: 24px;
    margin-left: -24px !important;
}

@media screen and (max-width: 800px) {
    ul {
        margin-left: 46px !important;
    }
}


#name {
    height: 100% !important;
    background-image: url("../images/stars.png");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center top;
    margin-top: 0px !important;
    overflow: visible;


}


@media screen and (max-width: 800px) {
    height: 100% !important;
    background-image: url("../images/stars.png");
    background-repeat: no-repeat !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    background-position: center top;
     !important margin-top: 0px !important;
    overflow: visible !important;
}

#name h1 {
    margin-top: 200px !important;
}

#name h2 {
    margin-top: 40px !important;
    color: #efe2db;

}

body.darkmode #name h2 {
    color: #efe2db;
}

@media screen and (max-width: 800px) {
    #name h2 {
        margin-top: 10px !important;
    }
}


#heroContent {
    width: 50%;
    margin-top: 24px !important;
    display: inline;
    float: left;
    clear: none;
    margin-bottom: 60px !important;
}

#heroImage {
    width: 45%;
    margin-top: 24px !important;
    margin-left: 5% !important;
    display: inline;
    float: left;
    clear: none;
}

#heroImage img {
    width: 120%;
    /* border: 4px double #ff0093;*/
    border-radius: 50%;
}



#heroContent h3 {
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1;
    line-height: 24px;
    font-weight: 100;
    font-size 16px;

}

#hero a {
    font-family: "Times New Roman", times, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 28px;

    color: #a30e2b;
}

#heroContent a:hover {
    color: #ff0093;
}

@media screen and (max-width: 800px) {
    #heroImage img {
        width: 90%;
    }


}

body.darkmode #qualifications {
    color: #efe2db;
    background-color: #230e13;

}

#qualifications {
    color: #efe2db;
    background-color: #230e13;
}


#qualifications .qualiHero {
    margin-top: 32px !important;
    margin-bottom: 64px !important;
}

#qualifications .qualiHero h3 {
    color: #ff0093;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1.5px;
    font-weight: 100;
    font-size: 7vw;
}

#qualifications .qualiHero p {
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1;
    line-height: 24px;
    font-weight: 400;
    font-style: italic;
    font-size: 24px;

}



#qualifications .qualiOther {

    margin-top: 32px !important;
    margin-bottom: 64px !important;
}

#qualifications .qualiOther ul {}

#qualifications .qualiOther li {
    list-style-type: none !important;
    margin-bottom: 40px !important;

}

#qualifications .qualiOther ul li::before {
    font-size: 24px;
}



@media screen and (max-width: 800px) {
    #qualifications {
        margin-bottom: 0px !important;
    }

    #qualifications .qualiHero h3 {
        font-size: 14vw !important;
    }

    #qualifications .qualiHero {
        width: 100%;
        float: left;
        clear: both;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }

    #qualifications .qualiOther {
        width: 100%;
        float: left;
        clear: both;
        margin-top: 10px !important;
        margin-bottom: 0px !important;
    }

}



#about img.headshot {
    width: 50%;
    border: 4px double #ff0093;
    border-radius: 50%;
    margin-left: 25% !important;
    margin-top: -20% !important;
    margin-bottom: 10% !important;
    text-align: center;
    display: inline-block;
}

#about img.sparkle {
    width: 60%;
    margin-left: 20% !important;
    margin-top: -60% !important;
    margin-bottom: 10% !important;
    text-align: center;
    display: inline-block;
}

.menu {

    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 150px !important;
    clear: both;
}




.section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;

}

.sectionBorder {
    border-bottom: 4px double #ff0093;
}

@media screen and (max-width: 800px) {
    .section {}
}

.subsection {
    margin-bottom: 100px !important;
}

body.darkmode #careerContent {
    border-left: 1px solid #efe2db;

}

#careerContent {
    border-left: 1px solid #0e0204;

}

.job {
    margin-bottom: 75px !important;
    height: auto;

}

@media screen and (max-width: 800px) {
    .job {
        margin-bottom: 75px !important;
    }

    #careerContent {
        border-left: none !important;

    }
}

.jobInfo {
    width: 50%;
    margin-right: 5% !important;
    display: inline-block;
    clear: both;
}

.responsibilies {
    width: 40%;
    display: inline-block;
    clear: both;
    vertical-align: top;
}

.work {
    background-color: #0e0204;
    width: 285px;
    border-radius: 10px;
    margin-top: 20px !important;
    border: 1px double #efe2db;
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

body.darkmode .work {
    background-color: #efe2db;
}

.work p {
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1;
    line-height: 24px;
    font-weight: 100;
    font-size: 40px;
    color: #efe2db;


}

body.darkmode .work p {
    color: #0e0204;

}

.work a {
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1;
    line-height: 24px;
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
    margin-top: 10px !important;

    color: #a30e2b;
    display: block;
    clear: both;
}

.work a:last-child {}


@media screen and (max-width: 800px) {
    .jobInfo {
        width: 100%;
        display: block;
        clear: both;
    }

    .responsibilies {
        width: 100%;
        display: block;
        clear: both;
        vertical-align: top;
    }

    .work {
        background-color: #0e0204;
        width: 285px;
        border-radius: 10px;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        margin-top: 20px !important;
        display: block;
        clear: both;
    }

}

ul.skills {
    margin-left: 20px !important;
    width: 200px;
    display: inline-block;
    clear: both;
}

#contact {
    position: fixed;
    display: inline-block;
    vertical-align: bottom;
    right: 10;
    bottom: -140;
    color: #efe2db;
    background-color: #0e0204;
    width: 210px;
    border-radius: 8px;
    border: 5px double #efe2db;
}

body.darkmode #contact {
    background-color: #efe2db;
    color: #0e0204;
    border: 5px double #0e0204;
}

@media screen and (max-width: 800px) {
    #contact {
        width: 210px !important;
    }
}

body.darkmode #contact h4 {
    color: #0e0204 !important;
}

#contact h4 {
    font-size: 18px !important;
    color: #efe2db !important;
    margin-left: 20px !Important;
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1px;
    font-weight: 100 !important;

}

#contact.collapsed {
    height: 50px;
    overflow: hidden;
}

#contact {}

#contact h4.expanded {
    cursor: pointer;
}

#contact h4.collapsed {
    cursor: pointer;
}

#contact h4.expanded:before {
    content: "⚟ ";

}

#contact h4.collapsed:before {
    content: "⚞ ";

}

#contact h4.collapsed:before:hover {
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
}

#contact h4:nth-child(1) {
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    font-family: "Times New Roman", times, serif;
    font-weight: 800;
    font-style: italic;
}

#contact h4:nth-child(2) {
    margin-top: 20px !important;

}


#contact h3 {
    font-size: 18px !important;
    margin-left: 20px !Important;
}

#contact h3:nth-child(5) {
    margin-bottom: 20px !important;
}

#contact hr {
    width: 90%;
    border: 1px dashed #efe2db;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: 5% !important;

}

#recommendations.darkmode {
    background-color: #efe2db;
    color: #0e0204;
}

#recommendations.darkmode {
    color: #efe2db;
    background-color: #0e0204;

}






#recommendations p {
    color: #efe2db;
    margin-top: -10px !important;
}

#recommendations h3 {
    font-size: 20px;
    letter-spacing: -1;
}

#recommendations h4 {
    font-size: 2.5vw;
    letter-spacing: 1;
}

@media screen and (max-width: 800px) {
    .slider .slide {
        height: 400px !important;
        width: 400px;
    }
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-515px * 7));
    }
}

.slider {

    height: auto;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}




.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(515px * 14);
}

.slider .slide {
    height: 300px;
    width: 400px;
}

.slider .slide h3:hover {
    color: #ff0093;
}

.slider .slide-track:hover {
    animation-play-state: paused;

}

@media (hover: hover) {
    .slider .slide-track:hover {
        animation-play-state: paused;
    }
}

#portfolio {
    background-color: #7b1103;
    color: #efe2db;
}

body.darkmode #portfolio {
    background-color: #7b1103;
    color: #efe2db;
}

#portfolioHolder {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

a.exampleLink {
    margin-left: 0px !important;
    margin-right: 0px !important;

}

a.exampleLink:hover {}

.example {
    border: 1px solid #efe2db;
    border-radius: 50px;
    height: 230px;
    background-color: #0e0204;

}

.example h3 {
    font-size: 2vw;
    font-family: "Times New Roman", times, serif;
    font-style: normal !important;
    color: #efe3db;
    letter-spacing: -2px;
    font-weight: 100;
    text-align: center;
    margin-top: 30% !important;


}

.example:hover h3 {
    color: #0e0204;
    display: none;
}

#DAO.example:hover:before {
    content: "A modern account opening system for financial professionals";
    font-size: 2vw;
    font-family: "Times New Roman", times, serif;
    font-style: normal !important;
    color: #efe3db;
    letter-spacing: -2px;
    font-weight: 100;
    text-align: center !important;
    margin-top: 15% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    vertical-align: middle !important;
    display: block !important;
}

#Insights.example:hover:before {
    content: "Envision success with assets and revenue data visualizations";
    font-size: 2vw;
    font-family: "Times New Roman", times, serif;
    font-style: normal !important;
    color: #efe3db;
    letter-spacing: -2px;
    font-weight: 100;
    text-align: center !important;
    margin-top: 17% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    vertical-align: middle !important;
    display: block !important;
}

#RPE.example:hover:before {
    content: "Easily set up and manage retirement plans";
    font-size: 2vw;
    font-family: "Times New Roman", times, serif;
    font-style: normal !important;
    color: #efe3db;
    letter-spacing: -2px;
    font-weight: 100;
    text-align: center !important;
    margin-top: 25% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    vertical-align: middle !important;
    display: block !important;

}

#EOB.example:hover:before {
    content: "Easy onboarding for financial firms";
    font-size: 2vw;
    font-family: "Times New Roman", times, serif;
    font-style: normal !important;
    color: #efe3db;
    letter-spacing: -2px;
    font-weight: 100;
    text-align: center !important;
    margin-top: 25% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    vertical-align: middle !important;
    display: block !important;
}


@media screen and (max-width: 800px) {
    .example h3 {
        font-size: 8vw !important;
    }

    #DAO.example h3 {
        margin-top: 25% !important;

    }

    #Insights.example h3 {
        margin-top: 25% !important;

    }

    #RPE.example h3 {
        margin-top: 20% !important;

    }

    #EOB.example h3 {
        margin-top: 25% !important;

    }

    #DAO.example:hover:before {
        margin-top: 15% !important;
        font-size: 8vw !important;
    }

    #Insights.example:hover:before {
        margin-top: 15% !important;
        font-size: 8vw !important;
    }

    #RPE.example:hover:before {
        margin-top: 20% !important;
        font-size: 8vw !important;
    }

    #EOB.example:hover:before {
        margin-top: 20% !important;
        font-size: 8vw !important;
    }

}

#resources {
    font-family: "Times New Roman", times, serif;
    letter-spacing: -1px;
    font-weight: 100 !important;
}

#contact h3 {
    font-family: "Times New Roman", times, serif !important;
    letter-spacing: -1px;
    font-weight: 800 !important;
    font-style: italic !important;
}

#contact a {
    color: #a30e2b;
    margin-left: 20px !Important;
    text-decoration: none;
    cursor: pointer;
    font-family: "Times New Roman", times, serif !important;
    letter-spacing: -1px;
    font-weight: 800 !important;
    font-style: italic !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

#contact a:hover {
    color: #ff0093;
    text-decoration: underline;
}

#contact p {
    font-size: 18px !important;
}

#contact form {
    margin-left: 20px !Important;
    margin-bottom: 20px !important;
}

input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #0e0204;
}

body.darkmode input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #efe2db;
}

.radioButton {
    font-family: "Times New Roman", times, serif;
    font-weight: 800;
    font-style: italic;
}

input[type='radio']:after {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: relative;
    background-color: #0e0204;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid #efe2db;

}

input[type='radio']:checked:after {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: relative;
    background-color: #ff0093;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid #0e0204;
}


body.darkmode input[type='radio']:after {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: relative;
    background-color: #efe2db;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid #0e0204;
}

body.darkmode input[type='radio']:checked:after {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: relative;
    background-color: #ff0093;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid #0e0204;
}


#copyright {
    color: #efe2db;
    background-color: #0e0204;


}

body.darkmode #copyright {
    color: #efe2db;
    background-color: #0e0204;


}

#education {
    background-color: #230e13;
    color: #efe2db;
}

body.darkmode #education {
    background-color: #230e13;
    color: #efe2db;
}



#copyright p {
    text-align: center;
}




ul.skills {
    margin-right: 90px !Important;
}

.lineBox {
    display: inline;
    float: left;
    clear: both;
    width: 100%;
    min-height: 1px;
    margin: 0px;
    padding: 0px;
}

.lineBox .box4eight {
    width: 3.5%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box4eight {
        width: 0% !important;
        clear: both !important;
    }

    .lineBox .box4eight .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box5 {
    width: 5%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box5 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box5 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box10 {
    width: 10%;
    height: 100%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box10 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box10 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box12 {
    width: 12.5%;
    height: 100%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box12 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box12 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box15 {
    width: 15%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box15 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box15 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box16 {
    width: 16.5%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box16 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box16 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box20 {
    width: 20%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box20 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box20 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box20NoSwitch {
    width: 20% !important;
    clear: none !important;
}

.lineBox .box25 {
    width: 25%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box25 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box25 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box30 {
    width: 30%;
    clear: none;
}



@media screen and (max-width: 800px) {
    .lineBox .box30 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box30 .half {
        width: 50% !important;
        clear: none !important;
    }


}


.lineBox .box30Portfolio {
    width: 22%;
    clear: none;
}



@media screen and (max-width: 800px) {
    .lineBox .box30Portfolio {
        width: 80% !important;
        clear: both !important;
        margin-left: 10% !important;
        margin-bottom: 40px !important;

    }




}

.lineBox .box33 {
    width: 33.33%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box33 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box33 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box35 {
    width: 35%;
    min-height: 10px;
    height: 100%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box35 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box35 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box40 {
    width: 40%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box40 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box40 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box45 {
    width: 45%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box45 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box45 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box47 {
    width: 47.5%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box47 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box47 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box50 {
    width: 50%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box50 {
        width: 100% !important;
        clear: none !important;
    }

    .lineBox .box50 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box55 {
    width: 55%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box55 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box55 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box60 {
    width: 60%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box60 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box60 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box65 {
    width: 65%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box65 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box65 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box70 {
    width: 70%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box70 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box70 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box75 {
    width: 75%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box75 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box75 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box80 {
    width: 80%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box80 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box80 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box85 {
    width: 85%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box85 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box85 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box90 {
    width: 90%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box90 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box90 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.lineBox .box95 {
    width: 95%;
    clear: none;
}

@media screen and (max-width: 800px) {
    .lineBox .box95 {
        width: 100% !important;
        clear: both !important;
    }

    .lineBox .box95 .half {
        width: 50% !important;
        clear: none !important;
    }
}

.spacer {
    display: none !mportant;
    height: auto !important;

}

@media screen and (max-width: 800px) {
    .spacer {
        display: none !mportant;
        height: 0% !important;

    }

}






.fade-in-section {
    opacity: 0;
    transform: none;
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    will-change: opacity, visibility;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
}



.tag {
    opacity: 0;
    transform: none;
    visibility: hidden;
    transition: opacity 0.6s ease-out;
    will-change: opacity, visibility;
}

.tag.visible {
    opacity: 1;
    transform: none;
    visibility: visible;
}