/* TM CMS Page */


section                 { 
    width: 100vw; 
    height: 100vh; 
    position: relative;
    display: block;
    padding: 0px;
    scroll-snap-align: start;
    overflow: hidden;
    }
    
    section video.desktop    { display: block; }
    section video.mobile    { display: none; }    
    
    section video    { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        position: relative;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        pointer-events: none;
    }

    section div.section-container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    section div.section-container div.container-inner {
        width: 50%;
        display: block;
        position: relative;
    }

    section div.monogram {
        position: absolute;
        height: 100%;
        width: 120%;
        margin-left: -20%;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0px;
        left: 0px;
    }
    section div.monogram svg {
        width: 100%;
        height: auto;
        opacity: .3;
    }
    
    section div.welcome {
        display: flex;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        color: #ffffff;
        justify-content: center;
        align-items: center;
    }

    section div.thoughts {
        /* background-color: #dddddd38; */
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 10000;
        display: flex;
        justify-content: center;
        flex-direction: column;
        z-index: 200;
    }
    
    section div.thoughts div.thought h2 { font-size: 5vw; font-weight: 700; text-shadow: 0px 0px 10px #000000; }    
    section div.thoughts div.thought h3 { font-size: 3vw; font-weight: 400; text-shadow: 0px 0px 10px #000000; }    
    section div.thoughts div.thought p { font-size: 1.6vw; font-weight: 300; }    
    
    /* section div.thoughts div.thought h2 { font-size: 10vh; font-weight: 700; text-shadow: 0px 0px 10px #000000; }    
    
    section div.thoughts div.thought h3 { font-size: 7vh; font-weight: 400; text-shadow: 0px 0px 10px #000000; }    
    
    section div.thoughts div.thought p { font-size: 2.5vh; font-weight: 300; }     */

    @media (orientation: landscape) {
    
    }

    @media (orientation: portrait) {
    
    }
    
    section div.thoughts div.thought {
        display: block;
        color: #ffffff;
        padding: 0px 6% 30px 6%;        
    }

    section div.thoughts div.thought.final {
        position: relative;
        display: block;
        padding: 0px;
        width: 100%;
    }

    section div.thoughts div.thought.final div.inner {
        position: relative;
        /* right: 0px; */
        display: block;
        padding: 40px;
        width: calc(100% - 80px);
        /* background-color: #ddddddcc; */
        background-color: var(--color-blue);
        color: #ffffff;
        float: right;
    }

    section div.thoughts div.thought.final p {
        color: #ffffff;
        padding: 0px;
    } 

@media (max-width: 1600px) {
    section div.section-container div.container-inner {
        width: 50%;
        display: block;
        position: relative;
    }
}    

@media (max-width: 1024px) {
    
    section video.desktop    { display: none; }
    section video.mobile    { display: block; } 
    
    section div.section-container div.container-inner {
        width: 100%;
        display: block;
        position: relative;
    }
    
    section div.thoughts div.thought h2 { font-size: 11vw; font-weight: 700; text-shadow: 0px 0px 10px #000000; }    
    section div.thoughts div.thought h3 { font-size: 7vw; font-weight: 400; text-shadow: 0px 0px 10px #000000; }    
    section div.thoughts div.thought p { font-size: 18px; font-weight: 300; }  
    section div.thoughts div.thought {
        display: block;
        color: #ffffff;
        padding: 0px 12% 30px 12%;        
    }

    section div.thoughts div.thought.final {
        position: relative;
        display: block;
        padding: 0px;
        width: 100%;
    }

    section div.thoughts div.thought.final div.inner {
        position: relative;
        /* right: 0px; */
        display: block;
        padding: 40px;
        width: 50%;
        /* background-color: #ddddddcc; */
        background-color: var(--color-blue);
        color: #ffffff;
        float: right;
    }

    section div.thoughts div.thought.final p {
        color: #ffffff;
        font-size: 18px;
        line-height: 25px;
        font-weight: 300;
        padding: 0px;
    } 
}