﻿.OfferInfo {
    font-family: Roboto;
}

#VisitCreatorButton {
    margin: 2em 0.5em;
}

.OfferInfo {
    width: 100%;
    padding: 1vw 5vw 0 5vw;
    display: flex
}
.TabsSection {
    width: 100%;
    padding: 1vw 5vw 0 5vw;
}

.ProjectSummary .ProjectSummary-Header {
    height: 120px;
}

    .ProjectSummary .ProjectSummary-Header .Title{
        margin: 0 0 0 135px;
        font-size: 34px;
    }

    .ProjectSummary .ProjectSummary-Header .Tagline {
        margin: 0 0 0 140px;
        font-size: 16px;
        color: rgba(3,18,11,0.8);
    }

    .ProjectSummary .ProjectSummary-Header .Logo img {
        max-width: 100px;
    }
    .ProjectSummary .ProjectSummary-Header .Logo {
        float: left;
    }

    .ProjectSummary .ProjectSummary-Image {
        width: 100%;
        padding-top: 56%;
        position: relative;
    }

    .ProjectSummary .ProjectSummary-Image img{
        width: 100%;
    }

    .ProjectSummary .ProjectSummary-Image .Image-Content{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
        .ProjectSummary .ProjectSummary-Image .Image-Content iframe {
            width: 100%;
            height: 100%;
        }



.ProjectSummary {
    width: 70%;
}
.OfferSummary {
    width: 40%;
}

.ProjectSummary-Subline {
    display: flex;
    background-color: #f6f6f6;
    padding: 0.5em 2em;
    line-height: 25px;
    font-size: 14px;
    color: rgb(30, 30, 30);
}
    .ProjectSummary-Subline img {
        max-height: 25px;
        margin-left: 20px;
    }

.ProjectSummary-Subline>.Industry {
    width:50%;
}
.ProjectSummary-Subline>.Website {
    width:25%;
}
    .ProjectSummary-Subline > .Country {
        width: 25%;
        white-space: nowrap;
    }

.ProjectSummary-Text {
    padding: 1em 0.5em;
    color: rgba(3,18,11,0.6);
    font-size: 17px;
}

.OfferSummary {
    padding: 50px 20px 0 20px;
}

.OfferSummary-Header {
    border-bottom: 3px solid red;
    padding-bottom: 15px;
}

.OfferSummary-Header td{
    vertical-align: middle;
    min-width: 100px;
}

    .OfferSummary-Header .OfferTokenSymbol {
        font-size: 1em;
        font-weight: bold;
    }
    .OfferSummary-Header .OfferFunded {
        font-size: 36px;
        font-weight: 500;
    }
    .OfferSummary-Header .OfferFaceValue {
        /*color: darkgray;*/
        font-size: 20px;
        font-weight: 500;
    }
    
    .OfferSummary-Header .Value {
        width: 40%;
        display: inline-block;
    }

    .OfferSummary-Header label {
        font-weight: normal;
        color: #696969;
        font-size: 15px;
        margin: 0;
    }

.OfferSummary-Values {
    padding-top: 15px;
}
    .OfferSummary-Values .ValueRow {
        display: flex;
        border-bottom: 1px solid silver;
        margin: 0;
        padding: 0.8em 0;
    }
    .OfferSummary-Values .ValueCell {
        padding: 0 0.8em;
        width: 50%;
        font-weight: 700;
        font-size: 20px;
        line-height: 1em;
    }
        .OfferSummary-Values .ValueCell label {
            display: block;
            font-size: 15px;
            color: rgba(3,18,11,0.6);
            font-weight: normal;
            margin: 0;
            margin-top: 5px;
        }

.OfferSummary-ValuesContainer{
    position: relative;
}
.OfferSummary-Buttons {
    text-align: center;
    padding: 1em;
}

.OfferSummary-Social {
    display: flex;
    padding: 1em;
    justify-content: center;
}
    .OfferSummary-Social i{
        color: white;
    }

    .OfferSummary-Social img{
        width: 2.5em;
        height: 2.5em;
        margin: 0 20px;
    }

.OfferSummary-FundedContainer{
    position: relative;
}
.OfferSummary-Funded {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
    opacity: 0.75;
}
.OfferSummary-FundedText {
    color: red;
    text-align: center;
    transform: translate(-50%, -50%) rotate( -20deg);
    top: 50%;
    left: 50%;
    position: absolute;
    font-size: 300%;
}

.projectcont {
    margin: 0 5vw;
    max-width: 800px;
}
.SectionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    margin: 50px 0 0 0;
    color: #3b3636;
    font-weight: bold;
}
    .SectionHeader .SectionHeaderBar {
        margin-left: 50px;
        flex: 3;
        height: 2px;
        background: red;
    }

.ProjectTabTitle {
    padding: 2vw 0;
    font-size: 35px;
    font-weight: 700;
}
.ProjectTabText{
    font-size: 18px;
}

    .ProjectTabVideo{
        width: 100%;
        padding-top: 56%;
        position: relative;
    }

        .ProjectTabVideo iframe {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

.teamcont {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
    .teamcont > div.row {
        width: 100%;
    }

    .teamcont .TeamMemberCard {
        width: 25%;
        padding: 30px;
    }

    .teamcont .TeamMemberImage {
        border-radius: 100%;
        overflow: hidden;
        margin: 20px 20%;
    }

    .teamcont .TeamMemberName {
        font-weight: bold;
        text-align: center;

    }
    .teamcont .TeamMemberRole {
        text-align: center;
    }
    .teamcont .TeamMemberShortBio {
        text-align: center;
        font-style:italic;
    }
    .teamcont .TeamMemberDescription {
        text-align: center;
        font-style: italic;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
    }
    .teamcont .TeamMemberBioLink {
        text-align: center;
    }

.tab-title{
    padding-top: 20px;
}
@media screen and (max-width: 768px) {
    .OfferInfo {
        display: block;
    }

    .ProjectSummary {
        width: 100%;
        margin: 80px 10px 10px 10px;
    }

    .ProjectSummary-Subline {
        padding: 0.5em 0.5em;
        justify-content: space-around;
    }

    .ProjectSummary .ProjectSummary-Header .Title {
        margin: 0 0 0 70px;
        text-align: center;
    }
    .ProjectSummary .ProjectSummary-Header .Tagline {
        margin: 0 0 0 70px;
        text-align: center;
    }

    .OfferSummary {
        width: 100%;
    }

    .projectcont {
        background-color: #e2e8f1;
        margin: 0;
        padding: 5px;
    }

    .rewardscont {
        background-color: #e2e8f1;
        margin: 0;
        padding: 5px;
    }
    .tab-title {
        margin: 0;
    }
    .teamcont .TeamMemberCard {
        width: 100%;
    }

    .FinSecuritiesTable {
        margin-top: 0;
        margin: 5vw -5vw;
    }
    .ProjectSummary .ProjectSummary-Header {
        height: unset;
        min-height: 60px;
        margin-bottom: 15px;
    }

    
    .ProjectSummary-Subline > .Industry {
        width: unset;
    }

    .ProjectSummary-Subline > .Country {
        width: unset;
        white-space: nowrap;
    }

    .ProjectSummary-Subline > .Website {
        width: unset;
        white-space: nowrap;
    }

    .ProjectSummary .ProjectSummary-Header .Logo img {
        max-width: 60px;
    }
    .ProjectSummary .ProjectSummary-Header .Title {
        font-size: 24px;
    }


}

