// *{
//     border: 1px solid red;
// }
@import '../css/fonts/fonts.css';

$cream: #fff8f0;
$navy: #052f3f;
$white: #ffffff;
$archivo:'Archivo', sans-serif;
$ballinger:'Ballinger', sans-serif;


html{
    position: relative;
    height: 100%;
    margin: 0;
    @media screen and (min-width: 2560px){
        font-size: 15px;
    }
    @media screen and (min-width: 1920px) and (max-width: 2559px){
        font-size: 15px;
    }
    @media screen and (min-width: 1681px) and (max-width: 1919px){
        font-size: 15px;
    }
    @media screen and (min-width: 1441px) and (max-width: 1680px){
        font-size: 15px;
    }
    @media screen and (min-width: 1366px) and (max-width: 1440px){
        font-size: 15px;
    }
    @media screen and (min-width: 1024px) and (max-width: 1365px){
        font-size: 15px;
    }
    @media screen and (min-width:992px) and (max-width: 1023px) {
        font-size: 15px;
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        font-size: 15px;
    }
    @media screen and (min-width:441px) and (max-width:767px) {
        font-size: 15px;
    }
    @media screen and (min-width:351px) and (max-width:440px) {
        font-size: 15px;
    }
    @media screen and (max-width:350px) {
        font-size: 15px;
    }
// overflow-y: hidden;
font-family: 'Roboto', sans-serif;
}
body{
    position: relative;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    width: 100%;
    max-width: 100vw;

             @media screen and (min-width:992px) {
    overflow-x: hidden;                
             }
             @media screen and (max-width:991px) {
                
             }

    background: #fcfcfa;
}

#fp-nav{
    opacity: 0;
    pointer-events: none;
}

h1,h2,h3,h4,h5{
    color: #052f3f;
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
}
p{
    font-size: calc(1.1rem + 0.1vw);
    text-align: center;
    color: #052f3f;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
}

.center-elements{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
}


.containo{
    max-width: 1024px;
    margin: 0 auto;

    @media screen and (min-width:992px) {
        padding-left: 5%;                
    }
    @media screen and (max-width:991px) {
        padding-left: 5%;   
        padding-right: 5%;   
    }

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
        padding-left: 5%;   
        padding-right: 5%;  
}

    position: relative;

    &.widecontain{
        width: 90vw;
        max-width: 1280px;
    }

}



.fp-bg{

/* Portrait and Landscape */
// @media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
//     padding-left: 5%;
// }

/* Portrait */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    padding-left: 10%;
    width: 90% !important;
}

/* Landscape */
// @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
//     padding-left: 5%;

// }
}



#fullpage{
    height: 100%;
    position: relative;
    touch-action: none;
    transition: transform 1000ms ease 0s;
}

.fp-bg {
    top: 0;
    bottom: 0;
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 100%;
}

.fp-bg {
    background-size: cover;
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}



#section1 .fp-bg {
    background-color: #fff;
    background-position: center 60%;
    overflow: hidden;
}


/********************/
/*** ********** *****/
/********************/

.side_menu{

    .holds_undermenu_buttons{
        ul{
            margin: 0;
            padding: 0;
            li{
                list-style-type: none;
                a{
                    color: #052f3f;
                    text-align: center;
                    font-size: calc(.9rem + 0.1vw);
                    font-weight: 600;
                    font-family: 'Roboto', sans-serif;
                }
            }
        }
    }

    figure{
        text-align: center;
        position: absolute;
        top: 1rem;
        padding: 0;
        margin: 1.5rem;
        img{
            width: 95%;
        }
    }

    position: fixed;
    display: flex;
    top: 0;
    background: #fff;
    transition: all 500ms ease;
    z-index: 999;
    height: 100%;
    top: 0;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    @media screen and (min-width: 2560px){
        left: 0;
        width: 8rem;
    }
    @media screen and (min-width: 1920px) and (max-width: 2559px){
        left: 0;
        width: 8rem;
    }
    @media screen and (min-width: 1681px) and (max-width: 1919px){
        left: 0;
        width: 8rem;
    }
    @media screen and (min-width: 1441px) and (max-width: 1680px){
        left: 0;
        width: 8rem;
    }
    @media screen and (min-width: 1366px) and (max-width: 1440px){
        left: 0;
        width: 8rem;
    }
    @media screen and (min-width: 1024px) and (max-width: 1365px){
        left: 0;
        width: 8rem;
    }
    @media screen and (min-width:992px) and (max-width: 1023px) {
        left: 0;
        width: 8rem;
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        left: -8rem;
        width: 8rem;
    }
    @media screen and (min-width:441px) and (max-width:767px) {
        left: -8rem;
        width: 8rem;
    }
    @media screen and (min-width:351px) and (max-width:440px) {
        left: -8rem;
        width: 8rem;
    }
    @media screen and (max-width:350px) {
        left: -8rem;
        width: 8rem;
    }
    ul{
        margin: 0;
            @media screen and (min-height:1000px){
        margin-top: 3rem;
        margin-bottom: 3rem;
            }
            @media screen and (min-height:900px) and (max-height:999px) {
            margin-top: 5rem;
    margin-bottom: 0rem;
            }
            @media screen and (min-height:800px) and (max-height:899px) {
            margin-top: 5rem;
    margin-bottom: 0rem;
            }
            @media screen and (min-height:700px) and (max-height:799px) {
            margin-top: 5rem;
    margin-bottom: 0rem;
            }
            @media screen and (max-height:699px) {
            margin-top: 5rem;
    margin-bottom: 0rem;
            }
        
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 60vh;
        justify-content: space-between;
//disable
//pointer-events: none;
//disable

li.logincontact{
    position: relative;
    width: 100%;
    margin-bottom: 0.25rem;
    a{
        background: #052f3f;
        text-align: center;
        color: #fff;
        padding: 1rem;
        font-weight: 600;
        font-family: "Roboto", sans-serif;
        text-decoration: none;
        display: block;
    }
}


li{
    list-style-type: none;
    margin-bottom: 1rem;
        @media screen and (min-height:1000px){
    margin-bottom: 1rem;
        }
        @media screen and (min-height:900px) and (max-height:999px) {
            margin-bottom: 1vh;
        }
        @media screen and (min-height:800px) and (max-height:899px) {
            margin-bottom: 1vh;
        }
        @media screen and (min-height:700px) and (max-height:799px) {
            margin-bottom: 1vh;
        }
        @media screen and (max-height:699px) {
            margin-bottom: 1vh;
        }
    
    a{
        text-decoration: none;
        position: relative;
        .tooltipper{
            position: absolute;
            pointer-events: none;
            left: calc(100% + 1rem);
            top: -0.5rem;
            opacity: 0;
            background: #e5e5e5;
            padding: 0.75rem 2rem;
            min-width: 12rem;
            color: #052f3f;
            text-align: center;
            font-size: calc(.9rem + 0.1vw);
            font-weight: 600;
            font-family: 'Roboto', sans-serif;
        }
        &:hover{
            .tooltipper{
                opacity: 1;
            }
        }
        .innercircle{
// box-shadow: 0px 0px 1px 2px #fcfcfa;
border: 3px solid #fcfcfa;
background: #052f3f;
height: 1rem;
width: 1rem;
border-radius: 50%;
margin: 0.25rem;
position: relative;
z-index: 1;
// box-shadow: 0px 0px 0px 2px #052f3f;
&:before{
    content: '';
    border-right: 1px dashed #052f3f;
    display: block;
    @media screen and (min-width: 2560px){
        height: 5rem;
    }
    @media screen and (min-width: 1920px) and (max-width: 2559px){
        height: 5rem;
    }
    @media screen and (min-width: 1681px) and (max-width: 1919px){
        height: 5rem;
    }
    @media screen and (min-width: 1441px) and (max-width: 1680px){
        height: 5rem;
    }
    @media screen and (min-width: 1366px) and (max-width: 1440px){
        height: 4rem;
    }
    @media screen and (min-width: 1024px) and (max-width: 1365px){
        height: 4rem;
    }
    @media screen and (min-width:992px) and (max-width: 1023px) {
        height: 4rem;
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        height: 3rem;
    }
    @media screen and (min-width:441px) and (max-width:767px) {
        height: 3rem;
    }
    @media screen and (min-width:351px) and (max-width:440px) {
        height: 3rem;
    }
    @media screen and (max-width:350px) {
        height: 3rem;
    }
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 3;
}
}

.innercircle.activio{
// box-shadow: 0px 0px 1px 2px #052f3f;
box-shadow: 0px 0px 0px 2px #052f3f;
border: 3px solid #fcfcfa;
}

}
}

li.lastone{
    margin-bottom: 2rem;
    .innercircle{
        &:before{
            display: none;
        }
    }
}


li.activia{
    .innercircle{
// box-shadow: 0px 0px 1px 2px #052f3f;
box-shadow: 0px 0px 0px 2px #052f3f;
border: 3px solid #fcfcfa;
}
}

}


&.menublue{
    background: #052f3f;
    transition: all 500ms ease;

    figure img {
        filter: saturate(0) brightness(6) invert(0);
    }

    .innercircle{
        border: 3px solid #fff;
        background: #fff; 

        &:before{
            content: '';
            border-right: 1px dashed #fff;

        }
    }
}



&.menucream{
    background: #fff8f0;
    transition: all 500ms ease;
}

&.menubrown{
    background: #e2ddd6;
    transition: all 500ms ease;
}
//edn side menu
}





/********************/
/*** ********** *****/
/********************/


#section1{
    .fp-bg{
        background: #fff8f0;
        z-index: 1;
    }
    .building_zone{
        position: absolute;
        @media screen and (min-height:1100px){
            top: 20vh
        }
        @media screen and (min-height:1000px){
            top: 20vh
        }
        @media screen and (min-height:900px) and (max-height:999px) {
            top: 20vh
        }
        @media screen and (min-height:800px) and (max-height:899px) {
            top: 20vh
        }
        @media screen and (min-height:700px) and (max-height:799px) {
            top: 20vh
        }
        @media screen and (max-height:699px) {
            top: 20vh
        }


    }
}


#section2, #section3{
    .fp-bg{
        background: #fff8f0;
        z-index: 1;
    }
    .building_zone{
        position: absolute;
        @media screen and (min-height:1100px){
            top: -12vh
        }
        @media screen and (min-height:1000px){
            top: -12vh
        }
        @media screen and (min-height:900px) and (max-height:999px) {
            top: -15vh
        }
        @media screen and (min-height:800px) and (max-height:899px) {
            top: -15vh
        }
        @media screen and (min-height:700px) and (max-height:799px) {
            top: -15vh
        }
        @media screen and (max-height:699px) {
            top: -15vh
        }



        @media screen and (max-width:991px) {
            top: -4vh !important
        }



    }


}


#section1, #section2, #section3, #section4{
    .fp-bg{
        .building_zone{

            @media screen and (min-width: 2560px){
                left: 0%;
            }
            @media screen and (min-width: 1920px) and (max-width: 2559px){
                left: 0%;
            }
            @media screen and (min-width: 1681px) and (max-width: 1919px){
                left: 0%;
            }
            @media screen and (min-width: 1441px) and (max-width: 1680px){
                left: 0%;
            }
            @media screen and (min-width: 1366px) and (max-width: 1440px){
                left: 0%;
            }
            @media screen and (min-width: 1024px) and (max-width: 1365px){
                left: 0%;
            }
            @media screen and (min-width:992px) and (max-width: 1023px) {
                left: 0%;
            }
            @media screen and (min-width:768px) and (max-width: 991px) {
                left: -20%;
            }
            @media screen and (min-width:441px) and (max-width:767px) {
                left: -30%;
            }
            @media screen and (min-width:351px) and (max-width:440px) {
                left: -30%;
            }
            @media screen and (max-width:350px) {
                left: -30%;
            }

            img.dummio{
                opacity: 0;
                @media screen and (min-width: 2560px){
                    width: 60vw;
                    max-width: 1200px;
                }
                @media screen and (min-width: 1920px) and (max-width: 2559px){
                    width: 60vw;
                    max-width: 1200px;
                }
                @media screen and (min-width: 1681px) and (max-width: 1919px){
                    width: 60vw;
                    max-width: 1200px;
                }
                @media screen and (min-width: 1441px) and (max-width: 1680px){
                    width: 60vw;
                    max-width: 1200px;
                }
                @media screen and (min-width: 1366px) and (max-width: 1440px){
                    width: 60vw;
                    max-width: 1200px;
                }
                @media screen and (min-width: 1024px) and (max-width: 1365px){
                    width: 60vw;
                    max-width: 1200px;
                }
                @media screen and (min-width:992px) and (max-width: 1023px) {
                    width: 80vw;
                }
                @media screen and (min-width:768px) and (max-width: 991px) {
                    width: 100vw;
                }
                @media screen and (min-width:441px) and (max-width:767px) {
                    width: 100vw;
                }
                @media screen and (min-width:351px) and (max-width:440px) {
                    width: 100vw;
                }
                @media screen and (max-width:350px) {
                    width: 100vw;
                }
                opacity: 0;
            }
        }


/********************/
/*** ********** *****/
/********************/
.clouds{
    position: absolute;
    width: 100%;
    overflow: hidden;
}


.clouda {
    @media screen and (min-width: 2560px){
        width: 30rem;
        height: 10rem;
    }
    @media screen and (min-width: 1920px) and (max-width: 2559px){
        width: 30rem;
        height: 10rem;
    }
    @media screen and (min-width: 1681px) and (max-width: 1919px){
        width: 30rem;
        height: 10rem;
    }
    @media screen and (min-width: 1441px) and (max-width: 1680px){
        width: 30rem;
        height: 10rem;
    }
    @media screen and (min-width: 1366px) and (max-width: 1440px){
        width: 21rem;
        height: 7rem;
    }
    @media screen and (min-width: 1024px) and (max-width: 1365px){
        width: 21rem;
        height: 7rem;
    }
    @media screen and (min-width:992px) and (max-width: 1023px) {
        width: 21rem;
        height: 7rem;
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        width: 15rem;
        height: 5rem;
    }
    @media screen and (min-width:441px) and (max-width:767px) {
        width: 15rem;
        height: 5rem;
    }
    @media screen and (min-width:351px) and (max-width:440px) {
        width: 15rem;
        height: 5rem;
    }
    @media screen and (max-width:350px) {
        width: 15rem;
        height: 5rem;
    }
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../../inc/assets/cloud_a.png'); 
    animation-iteration-count: infinite;
    animation: lefttoright 60s infinite;
}

@keyframes lefttoright {
    0%{
        opacity: 0;
        transform: translateX(-30vw);
    }

    5%{
        opacity: 1;
        transform: translateX(-15vw);
    }

    45% {
        opacity: 1;
        transform: translateX(120vw);
    }

    50% {
        opacity: 0;
        transform: translateX(110vw);
    }

    100% {
        opacity: 0;
        transform: translateX(-30vw);
    }

}

.cloudb {
    width: 30rem;
    height: 10rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../../inc/assets/cloud_b.png'); 
    animation-iteration-count: infinite;
    animation: lefttoright_b 80s infinite;
}

@keyframes lefttoright_b {
    0%{
        opacity: 0;
        transform: translateX(-30vw);
    }

    5%{
        opacity: 1;
        transform: translateX(-15vw);
    }

    45% {
        opacity: 1;
        transform: translateX(122vw);
    }

    50% {
        opacity: 0;
        transform: translateX(110vw);
    }

    100% {
        opacity: 0;
        transform: translateX(-30vw);
    }
}




}



.building_zone.hidden_building{
    opacity: 0;
}

.homebuilding_top{
    z-index: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.homebuilding_mid{
    z-index: 2;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    .buildingsizer{
        height: 100%;
        width: 100%;
        position: relative;

        .solarpanels{
            opacity: 1;
            background-size: 50%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../../inc/assets/solarpanels.png');
            top: -5%;
            left: 20%;
            z-index: 0;
            position: absolute;
            img{
                opacity: 0;
                height:auto;
                width:50%;
            }
        }

        .lifto{
            position: absolute;
            background-image: url('../../inc/assets/lift.png'); 
            right: 8%;
            top: 4%;
            height: 11%;
            width: 10%;
            z-index: -1;
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
            transition: all .8s ease-in-out;
            .holds_shine{
                position: relative;
                height: 100%;
                width: 200%;
                .shineo{
                    background-size: contain;
                    background-position: 10% center;
                    background-repeat: no-repeat;
                    background-image: url('../../inc/assets/shine.png');   
                    right: -75%;
                    top: 0%;
                    height: 100%;
                    width: 100%;
                    z-index: 1;
                    position: absolute;
                    opacity: 0;
                    transition: opacity .5s ease-in-out;
                    img{
                        height: 100%;
                        width: auto;
                    }
                }

            }

        }

    }

}
.homebuilding_bott{
    z-index: 3;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity .5s ease;



/********************/
.xray_content{
// opacity: 0;
pointer-events: none;
visibility: none;
position: absolute;
z-index: 99;
// top: 5%;
top: 25%;
transition: all 0.2s ease;
width: 100%;
height: 100%;
height: 100vh;
li{
    list-style-type: none;
    position: absolute;
    div.node{
        height: 2rem;
        width: 2rem;
        background-image: url('../../inc/assets/painbutton.png');  
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        animation-iteration-count: infinite;
        animation: pulso 1s infinite;
        &:hover{
            cursor: pointer;
        }
    }

    @keyframes pulso {
        0%{
            transform: scale(1);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }



    div.node_text{
        background-image: url('../../inc/assets/pain_balloon.png');  
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        display: none;
        p{
            width: 100%;
            max-width: 13rem;
            padding: 1.5rem;
            font-size: calc(.8rem + 0.1vw);
            font-weight: 500;
            padding: 0;
            margin: 0;
            line-height: 1em;
        }
        .speechdummy{
            opacity: 0;
            position: relative;
            max-width: 15rem;
        }
    }


    div.node_text.node_high{
        background-image: url('../../inc/assets/pain_balloon_high.png');    


        #xray_node_a{
            height:122%;
            display: flex;
            position: absolute;
            top: 0%;
            align-items: center;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            p{
                top: 22%;
                font-size: calc(.8rem + 0.1vw);
                color: #052f3f;
                font-weight: 600;
                font-family: "Roboto", sans-serif;
                font-weight: 500;
                 transform: rotate(-2deg);
            }

        }

    }


    div.node_text.node_med{
        background-image: url('../../inc/assets/pain_balloon.png');  
        position: absolute;
        bottom: 100%; 
        #xray_node_b{
            height: 90%;
            display: flex;
            position: absolute;
            top: 0%;
            align-items: center;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            p{
                top: 22%;
                font-size: calc(.8rem + 0.1vw);
                color: #052f3f;
                font-weight: 600;
                font-family: "Roboto", sans-serif;
                font-weight: 500;
                 transform: rotate(2deg);
            }

        }

        #xray_node_c{
            height: 90%;
            display: flex;
            position: absolute;
            top: 0%;
            align-items: center;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            p{
                top: 22%;
                font-size: calc(.8rem + 0.1vw);
                color: #052f3f;
                font-weight: 600;
                font-family: "Roboto", sans-serif;
                font-weight: 500;
                 transform: rotate(2deg);
            }

        }


    }


    div.node_text.node_low{
        background-image: url('../../inc/assets/pain_balloon.png');  
        position: absolute;
        bottom: 100%;
        #xray_node_c{
            height: 80%;
// border: 1px solid #333;
display: flex;
position: absolute;
top: 10%;
align-items: center;
width: 100%;
flex-direction: column;
justify-content: center;
p{
    top: 22%;
    font-size: calc(.8rem + 0.1vw);
    color: #052f3f;
    font-weight: 600;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}

}

#xray_node_d{
    height: 90%;
    display: flex;
    position: absolute;
    top: 0%;
    align-items: center;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    p{
        top: 22%;
        font-size: calc(.8rem + 0.1vw);
        color: #052f3f;
        font-weight: 600;
        font-family: "Roboto", sans-serif;
        font-weight: 500;
            transform: rotate(2deg);
    }

}
}

div.node_text.node_lower{
    background-image: url('../../inc/assets/pain_balloon.png');  
    position: absolute;
    bottom: 100%;
    p{
        top: 8%;
        font-size: calc(.8rem + 0.1vw);
        color: #052f3f;
        font-weight: 500;
        font-family: "Roboto", sans-serif;
    }

    img.speechdummy{
        max-width: 16rem;
    }

    #xray_node_e{
        height: 90%;
        display: flex;
        position: absolute;
        top: 0%;
        align-items: center;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        p{
            top: 22%;
            font-size: calc(.8rem + 0.1vw);
            color: #052f3f;
            font-weight: 600;
            font-family: "Roboto", sans-serif;
            font-weight: 500;
            transform: rotate(4deg);
        }

    }

}


}

li:nth-child(1){

    @media screen and (min-width:992px) {
        top: -10%;
        left: 40%;                
    }
    @media screen and (max-width:991px) {
        top: -8%;
        left: 90%;  
    }

}

li:nth-child(2){

    @media screen and (min-width:992px) {
        top: 29%;
        left: 40%;                
    }
    @media screen and (max-width:991px) {
        top: 10%;
        left: 90%;  
    }

}

li:nth-child(3){

    @media screen and (min-width:992px) {
        top: 7%;
        left: 85%;                
    }
    @media screen and (max-width:991px) {
        top: 25%;
        left: 85%;  
    }

}

li:nth-child(4){

    @media screen and (min-width:992px) {
        top: 35%;
        left: 80%;                
    }
    @media screen and (max-width:991px) {
        top: 40%;
        left: 80%;  
    }

}

li:nth-child(5){

    @media screen and (min-width:992px) {
        top: 50%;
        left: 46%;                
    }
    @media screen and (max-width:991px) {
        top: 50%;
        left: 80%;  
    }

}



}

.xray_content.showzone{
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: .2s ease;
    z-index: 99;
}
/********************/

}

.containo{

    @media screen and (min-width:992px) {
        margin-left: 55%;                
    }
    @media screen and (max-width:991px) {

    }

    .holdscontent{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: row;
        z-index: 2;
        position: relative;

        @media screen and (min-width:992px) {

        }
        @media screen and (max-width:991px) {
            padding: 1rem;
            text-align: center;                
        }

        p.this_website{
            max-width: 30rem;
            text-align: left;
                font-family: "Roboto", sans-serif;
        }


        .underlay{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0%;
            left: 0%;
            background: #fff;
            opacity: 0.7;

            @media screen and (min-width:992px) {
                display: none
            }


        }

        .rightside_text_and_buttons{

            #main_intro_text_holder{

            }
            .text-zone{
                position: relative;
                h1{
                    color: #052f3f;
                    font-size: calc(3rem + 0.1vw);
                    margin-bottom: 2rem;
                    font-family: $ballinger;
                }
                ul{
                    margin: 0;
                    padding-left: 0;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    li{
                        list-style-type: none;
                        text-align: revert;
                        display: flex;
                        justify-content: flex-start;
                        margin-bottom: 1rem;
                        a{
                            font-family: 'Roboto', sans-serif;
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            position: relative;
                            text-decoration: none;
                            &:hover{
                                cursor: pointer;
                            }
                            span, .checkbox{
                                display: block;
                            }
                            span{
                                margin-left: 1rem;
                                font-weight: 400;
                                color: #052f3f;
                                font-size: calc(1.75rem + 0.1vw);
                            }
                            .checkbox{
                                background-size: contain;
                                background-position: 0% center;
                                background-repeat: no-repeat;
                                background-image: url('../../inc/assets/checker_1.png');   
                                height: 2rem;
                                width: 2rem;
                                display: block;
                            }
                        }
                    }
                    li{
                        a.active{
                            .checkbox{
                                &:before{
                                    content: '';
                                    background-size: contain;
                                    background-position: 0% -5%;
                                    background-repeat: no-repeat;
                                    background-image: url('../../inc/assets/check.png');   
                                    height: 3rem;
                                    width: 3rem;
                                    display: block;
                                    top: -0.5rem;
                                    left: -0.5rem;
                                    position: absolute;
                                }
                            }
                        }
                    }
                }
            }

            .choice_stuff{
                position: relative;


                #choice_texto{
                    p{
                        color: #052f3f;
                        font-weight: 500;
                        font-family: 'Roboto', sans-serif;
                        @media screen and (min-width: 2560px){
                            font-size: calc(1.2rem + 0.1vw);
                        }
                        @media screen and (min-width: 1920px) and (max-width: 2559px){
                            font-size: calc(1.2rem + 0.1vw);
                        }
                        @media screen and (min-width: 1681px) and (max-width: 1919px){
                            font-size: calc(1.2rem + 0.1vw);
                        }
                        @media screen and (min-width: 1441px) and (max-width: 1680px){
                            font-size: calc(1.2rem + 0.1vw);
                        }
                        @media screen and (min-width: 1366px) and (max-width: 1440px){
                            font-size: calc(1.05rem + 0.1vw);
                        }
                        @media screen and (min-width: 1024px) and (max-width: 1365px){
                            font-size: calc(1.05rem + 0.1vw);
                        }
                        @media screen and (min-width:992px) and (max-width: 1023px) {
                            font-size: calc(1.05rem + 0.1vw);
                        }
                        @media screen and (min-width:768px) and (max-width: 991px) {
                            font-size: calc(1rem + 0.1vw);
                        }
                        @media screen and (min-width:441px) and (max-width:767px) {
                            font-size: calc(1rem + 0.1vw);
                        }
                        @media screen and (min-width:351px) and (max-width:440px) {
                            font-size: calc(1rem + 0.1vw);
                        }
                        @media screen and (max-width:350px) {
                            font-size: calc(1rem + 0.1vw);
                        }
                        text-align: center;

                        @media screen and (min-width:1024px) {
                            max-width: 27rem;                
                        }
                        @media screen and (max-width:1023px) {
                            max-width: unset;
                        }


                    }
                }

                .zone_button{
                    height: 7.5rem;
                    width: 7.5rem;
                    margin: 0 auto;
                    display: block;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-image: url('../../inc/assets/round_scroll_text.png'); 
                }

            }
            .choice_stuff.active_stuff{
                opacity: 1;
                pointer-events: all;
            }


        }



    }
}
}



#section2, #section3{
    .lifto{
        right: 8%;
        top: 4%;

        .holds_shine{

            .shineo{
                opacity: 1 !important;

                img{
                    height: 100%;
                    width: auto;
                    max-height: 8rem;
                    margin-top: 35%;
                }
            }

        }

    }

}

/********************/
/*** ********** *****/
/********************/

#section4{

    .fp-bg{
        background: #fff8f0;
        z-index: 1;
    }
    .building_zone{
        position: absolute;
        @media screen and (min-height:1100px){
            top: -62%;
        }
        @media screen and (min-height:1000px) and (max-height:1099px){
            top: -62%;
        }
        @media screen and (min-height:900px) and (max-height:999px) {
            top: -64%;
        }
        @media screen and (min-height:800px) and (max-height:899px) {
            top: -63%;
        }
        @media screen and (min-height:700px) and (max-height:799px) {
            top: -62%;
        }
        @media screen and (max-height:699px) {
            top: -65%;
        }

        left: 0%;
    }

    .homebuilding_top{
        z-index: 1;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        background-repeat: no-repeat;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    .homebuilding_mid{
        z-index: 2;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        background-repeat: no-repeat;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
    }


    .between_message{
        position: relative;
        height: 100%;
        background: #e4dfd9;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        bottom: 0;
        .top_white_wave {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(../../inc/assets/top_white_wave.svg);
            width: 100%;
            position: absolute;
            height: 44vh;
            @media screen and (min-width: 2560px){
                height: 76vh;
            }
            @media screen and (min-width: 1920px) and (max-width: 2559px){
                height: 76vh;
            }
            @media screen and (min-width: 1681px) and (max-width: 1919px){
                height: 56vh;
            }
            @media screen and (min-width: 1441px) and (max-width: 1680px){
                height: 56vh;
            }
            @media screen and (min-width: 1366px) and (max-width: 1440px){
                height: 44vh;
            }
            @media screen and (min-width: 1024px) and (max-width: 1365px){
                height: 44vh;
            }
            @media screen and (min-width:992px) and (max-width: 1023px) {
                height: 44vh;
            }
            @media screen and (min-width:768px) and (max-width: 991px) {
                height: 44vh;
            }
            @media screen and (min-width:441px) and (max-width:767px) {
                height: 44vh;
            }
            @media screen and (min-width:351px) and (max-width:440px) {
                height: 44vh;
            }
            @media screen and (max-width:350px) {
                height: 44vh;
            }


            top: 0rem;
        }
        .holdshach{
            @media screen and (min-width:992px) {
                padding-left: 5%;                
            }
            @media screen and (max-width:991px) {
                padding-left: 5%;   
                padding-right: 5%;   
            }
            width: 100%;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            @media screen and (min-height:1000px){
                margin-top: 2%;
            }
            @media screen and (min-height:900px) and (max-height:999px) {
                margin-top: 2%;
            }
            @media screen and (min-height:800px) and (max-height:899px) {
                margin-top: 2%;
            }
            @media screen and (min-height:700px) and (max-height:799px) {
                margin-top: 5%;
            }
            @media screen and (max-height:699px) {
                margin-top: 5%;
            }



            h2{
                color: #052f3f;
                font-weight: 900;
                font-family: $ballinger;
                z-index: 99;
                text-align: center;
                margin: 0;
                @media screen and (min-width: 2560px){
                    font-size: calc(2rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width: 1920px) and (max-width: 2559px){
                    font-size: calc(2rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width: 1681px) and (max-width: 1919px){
                    font-size: calc(2rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width: 1441px) and (max-width: 1680px){
                    font-size: calc(2rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width: 1366px) and (max-width: 1440px){
                    font-size: calc(2rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width: 1024px) and (max-width: 1365px){
                    font-size: calc(1.75rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width:992px) and (max-width: 1023px) {
                    font-size: calc(1.25rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width:768px) and (max-width: 991px) {
                    font-size: calc(1.25rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width:441px) and (max-width:767px) {
                    font-size: calc(1.2rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (min-width:351px) and (max-width:440px) {
                    font-size: calc(1.2rem + 0.1vw);
                    max-width: 65%;
                }
                @media screen and (max-width:350px) {
                    font-size: calc(1.2rem + 0.1vw);
                    max-width: 65%;
                }
            }

        }


        .bottom_wave {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url(../../inc/assets/top_blue_wave.svg);
            width: 100%;
            position: absolute;
            height: 15rem;
            bottom: -20px;
            left: 0;
            z-index: 3;
        }

    }

    .containo{
        .holdscontent{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .text-zone{
                h1{
                    font-size: calc(2rem + 0.1vw);
                }
            }
        }
    }
}




/********************/
/*** people *****/
/********************/

#section1, #section2, #section3{
    div.holds_people{
        position: absolute;
        height: 100%;
        width: 100%;
        .hidepeopledummy{
            opacity: 0;
        }
        div.window_people{
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            img{
                width: 100%;
                opacity: 0;
            }
        }

        div#building_person_1a, div#building_person_1b{
            position: absolute;
            top: 5.5%;
            width: 10%;
            height: 7%;
            left: 66.5%;
            z-index: 5;
        }
        div#building_person_2a,  div#building_person_2b{
            position: absolute;
            top: 24.5%;
            width: 10%;
            height: 7%;
            left: 33.5%;
            z-index: 5;
        }
        div#building_person_3a,  div#building_person_3b{
            position: absolute;
            top: 38.5%;
            width: 10%;
            height: 7%;
            left: 36%;
            z-index: 5;

        }
        div#building_person_4a, div#building_person_4b{
            position: absolute;
            top: 46%;
            width: 10%;
            height: 7%;
            left: 44.5%;
            z-index: 5;

        }
    }
}



/*************************************/
/*** send data, section 5 *****/
/*************************************/

#section5{
    .fp-bg{
        background: #052f3f;
        z-index: 0;
        transition: all .4s ease;
        &.changecolor{
            background-color: #fff8f0 !important;
            transition: all .4s ease;
        }

        .goahead{
            border: 1px solid #fff;
            background: #052f3f;
            padding: 0rem;

            @media screen and (min-width:992px) {
                max-width: 50%;
                margin-left: 25%;                
            }
            @media screen and (max-width:991px) {
                max-width: 70%;
                margin-left: 15%;
            }

            text-align: center;
            @media screen and (min-height:1000px){
                margin-top: 6rem;
            }
            @media screen and (min-height:900px) and (max-height:999px) {
                margin-top: 6rem;
            }
            @media screen and (min-height:800px) and (max-height:899px) {
                margin-top: 6rem;
            }
            @media screen and (min-height:700px) and (max-height:799px) {
                margin-top: 6vh;
            }
            @media screen and (max-height:699px) {
                margin-top: 6vh;
            }

            transition: opacity .2s ease;
            opacity: 1;
            z-index: 9;
            position: relative;
            p{

                font-size: calc(1.5rem + 0.1vw);
                color: #fff;
                font-weight: 600;
                font-family: 'Roboto', sans-serif;
                text-align: center; 
            }
        }
        #goahead.hidden{
            transition: opacity .2s ease; 
            opacity: 0;
        }



        .goahead_automatic{
            padding: 0rem;
            max-width: 75%;
            margin-left: 12.5%;
            text-align: center;
            transition: opacity 0.2s ease;
            opacity: 1;
            position: absolute;
            z-index: 9;
            top: 0;
            pointer-events: none;
            p{

                font-size: calc(1.75rem + 0.1vw);
                color: #052f3f;
                font-weight: 600;
                font-family: 'Roboto', sans-serif;
                text-align: center; 

            }
        }
        #goahead_automatic.hidden{
            transition: opacity .2s ease; 
            opacity: 0;
        }


        .element_holder{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            margin-top: 20%;
            transition: all .3s ease-in-out;

            @media screen and (min-width:992px) {
                flex-direction: row;
            }
            @media screen and (max-width:991px) {
                flex-direction: column; 
            }

            .element.element_b, .element.element_c{

                @media screen and (min-width:992px) {

                }
                @media screen and (max-width:991px) {
                    display: none;                
                }

            }


            .element{
                position: relative;

                @media screen and (min-width:992px) {
                    max-width: 33%;                
                }
                @media screen and (max-width:991px) {
                    max-width: 80%;
                    margin-top: 20%;
                }

                margin: 0 auto;
                img.imagemachine{


                    @media screen and (min-width: 2560px){
                        max-width: 300px; 
                    }
                    @media screen and (min-width: 1920px) and (max-width: 2559px){
                        max-width: 300px; 
                    }
                    @media screen and (min-width: 1681px) and (max-width: 1919px){
                        max-width: 300px; 
                    }
                    @media screen and (min-width: 1441px) and (max-width: 1680px){
                        max-width: 300px; 
                    }
                    @media screen and (min-width: 1366px) and (max-width: 1440px){
                        max-width: 300px; 
                    }
                    @media screen and (min-width: 1024px) and (max-width: 1365px){
                        max-width: 280px; 
                    }
                    @media screen and (min-width:992px) and (max-width: 1023px) {
                        max-width: 250px; 
                    }
                    @media screen and (min-width:768px) and (max-width: 991px) {
                        max-width: 100%;
                    }
                    @media screen and (min-width:441px) and (max-width:767px) {
                        max-width: 100%;
                    }
                    @media screen and (min-width:351px) and (max-width:440px) {
                        max-width: 100%;
                    }
                    @media screen and (max-width:350px) {
                        max-width: 100%;
                    }

    @media screen and (min-height:1000px){
    max-width: 250px; 
    }
    @media screen and (min-height:900px) and (max-height:999px) {
    max-width: 250px; 
    }
    @media screen and (min-height:800px) and (max-height:899px) {
    max-width: 250px; 
    }
    @media screen and (min-height:700px) and (max-height:799px) {
    max-width: 220px; 
    }
    @media screen and (max-height:699px) {
    max-width: 200px; 
    }

                }

                .hovertoshowtext_senddata{
                    opacity: 0;
                    position: absolute;
                    top: -13rem;
                    width: 15rem;
                    height: 15rem;
                    left: -2rem;
                    z-index: 9;
                    pointer-events: none;
                    transform: translateY(12px);
                    transition: all .3s ease-in-out;
                    div.node_text_machines{
                        background-image: url('../../inc/assets/pain_balloon_left.png');  
                        background-size: contain;
                        background-position: left;
                        background-repeat: no-repeat;
                        position: absolute;
                        div{
                            position: absolute;
                            top: 0%;
                            left: 2%;
                            max-width: 14rem;
                            padding: 2rem 2rem 1rem;
                            font-size: calc(.8rem + 0.1vw);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            p{
// top: 22%;
font-size: calc(.75rem + 0.1vw);
color: #052f3f;
font-weight: 500;
font-family: $archivo;
}

p.send_data{
    background: #052f3f;
    padding: 0.5rem;
    margin-top: 0rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    &:hover{
        cursor: pointer;
    }
}
}






button{
    position: absolute;
    bottom: 3rem;
    background: #052f3f;
    border: none;
    padding: 0.5rem 1rem;
}
.speechdummy{
    opacity: 0;
    position: relative;
    max-width: 16rem;
}
.speechdummy.speechdummy_a{
    max-width: 17rem;
}
.speechdummy.speechdummy_b{
    max-width: 18rem;
}
.speechdummy.speechdummy_c{
    max-width: 17rem;
}
}



&.bubblon{
    opacity: 1 !important;
    transform: translateY(0px);
    pointer-events: all !important;
    transition: all .3s ease-in-out;
}

}
//end hovertext


//canvas a
.canvas_a{
    position: absolute;
    width: 100%;
    max-width: 70rem;
    z-index: -1;
    top: 30%;
    left: 30%;
    pointer-events: none;
    svg, img{
        min-height: unset !important;
        max-height: unset !important;
        max-width: unset !important;
        width: 63vw !important;
        height: 100vh !important;
        margin-left: 0;
        margin-top: 0rem;
    }
}
//canvas a


.canvas_b{
    position: absolute;
    width: 100%;
    max-width: 70rem;
    z-index: -1;
    top: 30%;
    left: 30%;
    svg:nth-child(1), img:nth-child(1){
        min-height: unset !important;
        max-height: unset !important;
        max-width: unset !important;
        width: 63vw !important;
        height: 100vh !important;
        margin-left: 0;
        margin-top: 0rem;
    }
    svg:nth-child(2), img:nth-child(2){
        min-height: unset !important;
        max-height: unset !important;
        max-width: unset !important;
        width: 63vw !important;
        height: 100vh !important;
        margin-left: 3px;
        margin-top: 0rem;
    }
}

.canvas_c{
    position: absolute;
    width: 100%;
    max-width: 70rem;
    z-index: -1;
    top: 50%;
    left: 20%;
    svg, img{
        min-height: unset !important;
        max-height: unset !important;
        max-width: unset !important;
        width: 63vw !important;
        height: 100vh !important;
        margin-left: 0;
        margin-top: 0rem;
    }
}


//end element
}

}

.ipad{
    transition: all 1.3s ease-in-out !important;
    @media screen and (min-width:1680px) {
        width: 30%;
        max-width: 30vw;
        position: absolute;
        left: 40%;
        top: 80%;  
    }
    @media screen and (max-width:1679px) {
        width: 40%;
        max-width: 50rem;
        position: absolute;
        left: calc(30% + 2.5%);
        top: 80%;       
    }


    img{
        max-width: 100%;
    }
}

.ipad.middleipad{
    width: 40%;
    max-width: 25vw;
    position: absolute;
    left: 42.5vw;
    top: 15%;
}

}

}


/*************************************/
/*** ipad, men talking section 6 *****/
/*************************************/

#section6{
//canvas a

.fp-bg{
    background: $cream;
    z-index: 0;


    .canvas_ipad{
        position: absolute;
        width: 100%;
        max-width: 10rem;
        z-index: -1;
        top: 0%;
        left: calc(50% - 6rem);
        pointer-events: none;

        svg, img{
            min-height: unset !important;
            max-height: unset !important;
            max-width: unset !important;
            width: 63vw !important;
            height: 100vh !important;
            margin-left: 0;
            margin-top: 0rem;
        }
    }





    .ipad_bringdown{
        width: 30%;
        max-width: 25rem;
        position: absolute;

        @media screen and (min-width:992px) {
            left: calc(50% - 12.5rem);                
        }
        @media screen and (max-width:991px) {
            left: calc(50% - 3rem);
        }
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
  left: calc(50% - 15%);
}

        top: -9%;
        transition: all .3s ease;     

        img{
            max-width: 100%;
        }


        .holds_leaves{
            position: absolute;
            top: 105%;
            width: 100%;
            #leaf_1{
                width: 10rem;
                max-width: 5rem;
                position: absolute;
                left: 20%;
                top: 0;
                transform: rotate(0deg);
                transition: all .2s ease-in-out;
                opacity: 0;
            }
            #leaf_2{
                width: 10rem;
                max-width: 6rem;
                position: absolute;
                right: 30%;
                top: 0;
                transform: rotate(0deg);
                transition: all .25s ease-in-out;
                opacity: 0;
            }
        }

    }


    .ipad_bringdown.downer{
        width: 33%;
        max-width: 30rem;
        position: absolute;

        @media screen and (min-width:992px) {
            left: calc(50% - 13rem);                
        }
        @media screen and (max-width:991px) {
            left: calc(50% - 3rem);
        }

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
  left: calc(50% - 15%);
}



        top: 15%;
    }


    .ipad_bringdown.leafo{
        .holds_leaves{
            #leaf_1{
                top: 3rem;
                opacity: 1;
                transform: rotate(5deg);
                transition: all .2s ease-in-out;
            }
            #leaf_2{
                top: 4.5rem;
                opacity: 1;
                transform: rotate(5deg);
                transition: all .25s ease-in-out;
            }
        }


    }

    .ipad_bringdown.leafo.leafo_hide{
        .holds_leaves{
            #leaf_1{
                top: 4.5rem;
                opacity: 0;
                transform: rotate(0deg);
                transition: all .2s ease-in-out;
            }
            #leaf_2{
                top: 6rem;
                opacity: 0;
                transform: rotate(0deg);
                transition: all .25s ease-in-out;
            }
        }


    }




/********************/
/*** tabelet men *****/
/********************/

.tabletman{

    ul{
        li{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            p{
                color: #052f3f;
                font-weight: 500;
                font-family: "Roboto", sans-serif;
            }
            img{
                opacity: 0;
                width: 20rem;
                height: 9rem;
            }
        }
    }
    ul.speechbubblezone.left{
        position: absolute;
        bottom: 15%;
        height: 30rem;
        left: -2rem;
        width: 100%;
        li{
            list-style-type: none;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url('../../inc/assets/talking_head_balloon_left.png');  

            p{
                position: absolute;
                width: 100%;
                max-width: 60%;
                font-size: calc(0.8rem + 0.1vw);
                left: 25%;
                color: #052f3f;
                font-weight: 500;
                font-family: "Roboto", sans-serif;
                line-height: 1em;
            }
        }
    }
    ul.speechbubblezone.right{
        position: absolute;
        bottom: 15%;
        height: 30rem;
        right: 8rem;
        width: 100%;
        li{
            list-style-type: none;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url('../../inc/assets/talking_head_balloon_right.png');  

            p{
                position: absolute;
                width: 100%;
                max-width: 60%;
                font-size: calc(0.8rem + 0.1vw);
                left: calc(20% - 1rem);
                color: #052f3f;
                font-weight: 500;
                font-family: "Roboto", sans-serif;
                line-height: 1em;
            }
        }
    }
}

.left_tablet_man{  
    position: absolute;
    left: 9%;
    @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    left: 12%;
}

    bottom: 1rem;

    figure#tablet_man_left{
        opacity: 0;

        @media screen and (min-width:992px) {
            height: 14rem;
            width: 14rem;  
            max-width: 15vw;
            max-height: 15vw;                  
        }
        @media screen and (max-width:991px) {
            height: 30vw;
            width: 30vw;
        }

        background-image: url('../../inc/assets/tablet_man_left.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; 
        transform: translateY(2rem);
        transition: all .2s ease;
        &.tabletman_in{
            opacity: 1 !important;
            transform: translateY(0rem) !important;
            transition: all .2s ease;
        }
    }

    ul{
        position: absolute;
        bottom: 10%;
    }
}

.right_tablet_man{  
    position: absolute;
    right: 5%;
    bottom: 1rem;

    figure#tablet_man_right{
        opacity: 0;
        @media screen and (min-width:992px) {
            height: 14rem;
            width: 14rem;  
            max-width: 15vw;
            max-height: 15vw;              
        }
        @media screen and (max-width:991px) {
            height: 30vw;
            width: 30vw;
        }
        background-image: url('../../inc/assets/tablet_man_right.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; 
        &.tabletman_in{
            opacity: 1 !important;
            transform: translateY(0rem) !important;
            transition: all .2s ease;
        }
    }

}



.textballonery{
    opacity: 0;
    transition: all .2s ease;
    transform: translateY(2.25rem);
    img{
        width: 9rem;
        height: 18rem;
    }  
}

.textballonery.bubblecomein{
    opacity: 1 !important;
    transition: all .2s ease;
    transform: translateY(1rem) !important;  
}



#speechman_a.speech_in_a{
    opacity: 1 !important;
    transform: translateY(0rem) !important;
    transition: all .2s ease;
}


#speechman_c, #speechman_d{
    top: 9rem;
}


#speechman_a{
    @media screen and (max-width:991px) {
        top: -12rem;                
    }
}
#speechman_b{
    @media screen and (max-width:991px) {
        top: -3rem;
        left: -50%;                
    }
}

#speechman_c{
    @media screen and (max-width:991px) {
        top: 5rem;                
    }
}
#speechman_d{
    @media screen and (max-width:991px) {
        top: 14rem; 
        left: -50%;               
    }
}


/********************/
/*** tabelet men *****/
/********************/


}

}





#section7{
    .fp-bg{
        background-color: #e2ddd6;
        background-image: url('../../inc/assets/simple_map_small.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .simplemap_text{
        p {

            position: relative;
            color: #052f3f;
            font-weight: 900;
            text-align: center;
            font-family: $ballinger;
            margin: 0 auto;
            @media screen and (min-width: 2560px){
                font-size: calc(2.25rem + 0.1vw);
                max-width: 60rem;
            }
            @media screen and (min-width: 1920px) and (max-width: 2559px){
                font-size: calc(2.25rem + 0.1vw);
                max-width: 60rem;
            }
            @media screen and (min-width: 1681px) and (max-width: 1919px){
                font-size: calc(2.25rem + 0.1vw);
                max-width: 60rem;
            }
            @media screen and (min-width: 1441px) and (max-width: 1680px){
                font-size: calc(2.25rem + 0.1vw);
                max-width: 60rem;
            }
            @media screen and (min-width: 1366px) and (max-width: 1440px){
                font-size: calc(2.25rem + 0.1vw);
                max-width: 60rem;
            }
            @media screen and (min-width: 1024px) and (max-width: 1365px){
                font-size: calc(2.25rem + 0.1vw);
                max-width: 60rem;
            }
            @media screen and (min-width:992px) and (max-width: 1023px) {
                font-size: calc(1.7rem + 0.1vw);
                max-width: 80%;
            }
            @media screen and (min-width:768px) and (max-width: 991px) {
                font-size: calc(1.2rem + 0.1vw);
                max-width: 60%;
            }
            @media screen and (min-width:441px) and (max-width:767px) {
                font-size: calc(1.2rem + 0.1vw);
                max-width: 60%;
            }
            @media screen and (min-width:351px) and (max-width:440px) {
                font-size: calc(1.2rem + 0.1vw);
                max-width: 60%;
            }
            @media screen and (max-width:350px) {
                font-size: calc(1.2rem + 0.1vw);
                max-width: 60%;
            }

        }
    }

}
/********************/
/*** ********** *****/
/********************/

#section8{
    .fp-bg{
        z-index: 1;
    }


    .containo{
        margin-top: 5%;
    }


    .holds_usp_boxes{
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media screen and (min-width:992px) {
            flex-direction: row;
        }
        @media screen and (max-width:991px) {
            flex-direction: column; 
        }

        .usp_block_b, .usp_block_c{

            @media screen and (min-width:992px) {

            }
            @media screen and (max-width:991px) {
                display: none;                
            }

        }

        .usp_block{

            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;

            @media screen and (min-width:992px) {
                width: 30%;
            }
            @media screen and (max-width:991px) {
                margin-bottom: 1rem;
                width: 70%;
            }

            img.dummio{
                opacity: 0;
                max-width: 100%;
            }
            p{
                position: absolute;
                min-height: 7rem;
                @media screen and (min-width:992px) {
                    bottom: 15%;
                    font-size: calc(1.1rem + 0.1vw);                
                }
                @media screen and (max-width:991px) {
                    bottom: 10%;
                    font-size: calc(1rem + 0.1vw);
                }

                text-align: center;
                color: #052f3f;
                font-weight: 600;
                max-width: 80%;
                left: 10%;
                z-index: 9
            }
        }


    }


    .get_more_info_button_holder{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 2rem;
        a{
            background: #052f3f;
            text-align: center;
            color: #fff;
            max-width: 15rem;
            padding: 1rem 2rem;
            font-weight: 600;
            font-family: 'Roboto', sans-serif;
            text-decoration: none;
        }
        .gotonext_button_usp{
            margin: 0 auto;
            max-width: 6rem;
            display: block;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../../inc/assets/keep_scrolling.png'); 
            left: calc(50% - 1.5rem);
            -ms-animation: buttondown .7s infinite alternate; 
            -webkit-animation: buttondown .7s infinite alternate; 
            -moz-animation: buttondown .7s infinite alternate;
//disable_button
pointer-events: none;
.dummo{
    opacity: 0;
    pointer-events: none;
    height: 100%;
    width: 100%;
}
}
}

}


/********************/
/*** ********** *****/
/********************/

#section9{
    .fp-bg{

        .containo{
            @media screen and (max-width:991px) {
                height: 100%;                
            }
        }

        .testimonials_holder{
            display: flex;
            width: 100%;

            @media screen and (min-width:992px) {
                flex-direction: row;
                justify-content: center;
            }
            @media screen and (max-width:991px) {
                flex-direction: column-reverse; 
                height: 90%;
                justify-content: space-between;
            }



            .person.testimonial_person{
                @media screen and (min-width:992px) {
                    width: 40%;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    min-height: 40rem;
                }
                @media screen and (max-width:991px) {
                    width: 100%;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    min-height: 12rem;
                }
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
          width: 30% !important;
}



            }
            .testimonial_speech{

                @media screen and (min-width:992px) {
                    width: 50%;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
                    position: relative;
                    background-image: url('../../inc/assets/testimonial_speech.png');                
                }
                @media screen and (max-width:991px) {
                    width: 100%;
                }

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
          width: 70% !important;
}






                img.dummio{
                    opacity: 0;
                    pointer-events: none;
                    max-width: 100%;
                    height: 100%;
                }
                .innerspeech{
                    padding: 1.5rem 2rem;

                    @media screen and (min-width:992px) {
                        height: 90%;
                        left: 18%;
                        top: 0%;
                        width: 66%;
                        display: flex;
                        align-items: flex-start;
                        flex-direction: column;
                        justify-content: center;

                    }
                    @media screen and (max-width:991px) {
                        top: 5%;
                        width: 90%;   
                    }
                    position: absolute;
                    text-align: left;
                    p{
                        color: #052f3f;
                        font-weight: 600;
                        font-family: 'Roboto', sans-serif;
                        @media screen and (min-width:992px) {
                            font-size: calc(1.05rem + 0.1vw);                
                        }
                        @media screen and (max-width:991px) {
                            font-size: calc(1.05rem + 0.1vw);
                        }

                        text-align: left;
                    }
                }

                #testimonial_author{
                    position: relative;
                    margin-top: 1rem;
                    p{
                        color: #052f3f;
                        font-weight: 500;
                        font-size: calc(1.1rem + 0.1vw);
                        font-family: 'Roboto', sans-serif;
                    }
                }
            }
        }
    }

}


.fp-slidesNav{
    display: none;
}

/********************/
/*** ********** *****/
/********************/

#section10{


    .fp-arrow {
        border-color: transparent transparent transparent #052f3f;
    }

    .fp-bg{
        z-index: 99;


        .staffbackground_a{
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            background-size: 40%;
            background-position: 96% 50%;
            background-repeat: repeat-x;
            background-image: url('../../inc/assets/staffback_bw_strip.png');
            opacity: 0.1;
            position: absolute;
            img{
                opacity: 0;
            }
        }

        .slide{
            .staffslider_zone{
                @media screen and (min-width:992px) {
                    display: flex;      
                }
                @media screen and (max-width:991px) {
                    display: flex;
                    flex-direction: column;
                    align-items: center;                
                }


                .staff_image{

                    @media screen and (min-width:992px) {
                        width: 33%;                
                    }
                    @media screen and (max-width:991px) {
                        width: 100%;     
                    }

                    figure{
                        margin: 0;
                        text-align: center;
                        img{
                            width: 100%;

                            @media screen and (min-width:992px) {
                                max-width: 20rem;                
                            }
                            @media screen and (max-width:991px) {
                                max-width: 8rem;
                            }

                        }
                    }
                    .staff_text_area{
                        text-align: center;
                        margin-top: 1.5rem;
                        margin-bottom: 1.5rem;
                        h4{
                            font-size: calc(1.75rem + 0.1vw);
                            margin: 0;
                            font-family: $ballinger;
                        }
                        p{
                            margin: 0;
                        }

                        p.sub_person{
                            font-weight: 900;
                        }
                        p.sub_sub_person{
                            font-weight: 600;
                            font-size: 95%;
                            max-width: 17rem;
                            margin: 0 auto;
                            margin-top: 1rem;
                        }
                    }

                }
            }
        }

    }
//end staff
}



/********************/
/*** ********** *****/
/********************/

section#section11{
    padding-bottom: 5rem;
    .fp-bg{
        z-index: 9;
        .containo{
            position: relative;
            max-height: 80%;
        }

        .grid_zone{
            display: flex;
            width: 100%;
            justify-content: space-between;
            flex-wrap: wrap;


        #grid_box_3,#grid_box_4,#grid_box_5,#grid_box_6 {
                        @media screen and (max-width:991px) {
            display: none;                
                        }
        }

            .grid_box{
                @media screen and (min-width: 2560px){
                    width: 33%;
                }
                @media screen and (min-width: 1920px) and (max-width: 2559px){
                    width: 33%;
                }
                @media screen and (min-width: 1681px) and (max-width: 1919px){
                    width: 33%;
                }
                @media screen and (min-width: 1441px) and (max-width: 1680px){
                    width: 33%;
                }
                @media screen and (min-width: 1366px) and (max-width: 1440px){
                    width: 33%;
                }
                @media screen and (min-width: 1024px) and (max-width: 1365px){
                    width: 33%;
                }
                @media screen and (min-width:992px) and (max-width: 1023px) {
                    width: 33%;
                }
                @media screen and (min-width:768px) and (max-width: 991px) {
                    width: calc(50% - 0.5rem);
                }
                @media screen and (min-width:441px) and (max-width:767px) {
                    width: calc(50% - 0.5rem);
                }
                @media screen and (min-width:351px) and (max-width:440px) {
                    width: calc(50% - 0.5rem);
                }
                @media screen and (max-width:350px) {
                    width: calc(50% - 0.5rem);
                }
                a{
                    text-decoration: none;
                    &:hover{
                        opacity: 0.8;
                    }
                }
                .innerbox{
                    position: relative;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-image: url('../../inc/assets/six_grid_back.png'); 
                    background-size: cover;
                    @media screen and (min-width:992px) {
                        height: 20rem;
                        max-height: 14rem;                
                    }
                    @media screen and (max-width:991px) {
                        height: 20rem;
                        max-height: 14rem;    
                    }
                    @media screen and (min-height:1000px){
                        max-height: 12rem;
                    }
                    @media screen and (min-height:900px) and (max-height:999px) {
                        max-height: 12rem;
                    }
                    @media screen and (min-height:800px) and (max-height:899px) {
                        max-height: 12rem;
                    }
                    @media screen and (min-height:700px) and (max-height:799px) {
                        max-height: 12rem;
                    }
                    @media screen and (max-height:699px) {
                        max-height: 12rem;
                    }

    @media screen and (min-height:1000px){
    max-height: 20vh;
    }
    @media screen and (min-height:900px) and (max-height:999px) {
    max-height: 20vh;
    }
    @media screen and (min-height:800px) and (max-height:899px) {
    max-height: 20vh;
    }
    @media screen and (min-height:700px) and (max-height:799px) {
    max-height: 20vh;
    }
    @media screen and (max-height:699px) {
    max-height: 20vh;
    }


                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    img{
                        opacity: 0;
                    }
                    p{
                        font-size: calc(.9rem + 0.1vw);
                        font-family: 'Roboto', sans-serif;
                        color: #052f3f;
                        font-weight: 600;
                        text-decoration: none;
                        @media screen and (min-width:992px) {
                            max-width: 80%;
                            margin-left: 10%;                
                        }
                        @media screen and (max-width:991px) {
                            max-width: 95%;
                            margin-left: 2.5%;
                        }
                    }
                }
                .holds_undertext{
                    text-align: center;
                    max-width: 70%;
                    margin-left: 15%;

                    p{
                        text-decoration: none;

                        text-align: center;
                        text-decoration: none;
                        font-size: calc(.9rem + 0.1vw);
                        color: #052f3f; 
                        margin-bottom: 3rem;

                    }
                    a{
                        margin: unset;
                    }
                }
            }
        }
    }
}

/*********************************************************/
/*** end sections  *****/
/********************/

/********************/
/*** ********** *****/
/********************/

footer.opn_footer{

             @media screen and (min-width:992px) {
    padding: 1.5rem 0;                
             }
             @media screen and (max-width:991px) {
                    padding: .75rem 0;
             }

    background-color: #052f3f;
    position: relative;
    bottom: 0;
    width: 100%;
    z-index: 99;
    .footer_items{
        display: flex;
        align-items: center;
        justify-content: center;
        a{
            color: #fff;
            margin: 0.5rem;
            font-size: 2.25rem;
            svg{
                color: #fff;
                fill: #fff;
            }
            img{
                filter: saturate(0) brightness(7);
                height: 2.25rem;
                width: 2.25rem;

                             @media screen and (max-width:991px) {
                    display: none;                
                             }
                
            }
        }
    }

    &.nonhomefoot{
        margin-top: 3rem;
    }

    .sub_footer{
        display: flex;
        justify-content: center;
        ul{
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            li{
                
                list-style-type: none;
                a{
                    color: $white;
                    text-decoration: none;
                }
                span.divido{
                    color: $white;
                    margin-left: 5px;
                    margin-right: 5px;
                }
            }
        }
    }
}
/********************/
/*** ********** *****/
/********************/

/********************/
/*** ********** *****/
/********************/
section{
    .faded_down{
        opacity: 0;
        transition: all .7s ease-in-out;
        transform: translateY(30%);
    }
    .faded_down_b{
        opacity: 0;
        transition: all .8s ease-in-out;
        transform: translateY(40%);
    }


    .faded_down_b_a{
        opacity: 0;
        transition: all .8s ease-in-out;
        transform: translateY(50%);
    }
    .faded_down_b_b{
        opacity: 0;
        transition: all .7s ease-in-out;
        transform: translateY(20%);
    }
    .faded_down_b_c{
        opacity: 0;
        transition: all .8s ease-in-out;
        transform: translateY(80%);
    }


    .faded_scale{
        opacity: 0;
        transition: all .9s ease-in-out;
        transform: scale(.8);
    }


    .staff_person_1{ transition: all .5s ease-in-out !important; transform: translate(-10%, 30%) scale(0.8)}
    .staff_person_2{ transition: all .5s ease-in-out !important; transform: translate(0%, 30%) scale(0.8)}
    .staff_person_3{ transition: all .5s ease-in-out !important; transform: translate(-5%,20%) scale(0.8)}
    .staff_person_4{ transition: all .5s ease-in-out !important; transform: translate(0%, 30%) scale(0.8)}
    .staff_person_5{ transition: all .5s ease-in-out !important; transform: translate(10%, 30%) scale(0.8)}
    .staff_person_6{ transition: all .5s ease-in-out !important; transform: translate(15%, 25%) scale(0.8)}
    .staff_person_7{ transition: all .5s ease-in-out !important; transform: translate(15%, 30%) scale(0.8)}
    .staff_person_8{ transition: all .5s ease-in-out !important; transform: translate(18%, 50%) scale(0.8)}
    .staff_person_9{ transition: all .5s ease-in-out !important; transform: translate(30%, 80%) scale(0.8)}




}




/********************/
/***      james *****/
/********************/


.side_man{
    pointer-events: none;
    position: fixed;
    @media screen and (min-width: 2560px){
        width: 30rem;
        max-width: 33vw;
    }
    @media screen and (min-width: 1920px) and (max-width: 2559px){
        width: 30rem;
        max-width: 33vw;
    }
    @media screen and (min-width: 1681px) and (max-width: 1919px){
        width: 30rem;
        max-width: 33vw;
    }
    @media screen and (min-width: 1441px) and (max-width: 1680px){
        width: 30rem;
        max-width: 33vw;
    }
    @media screen and (min-width: 1366px) and (max-width: 1440px){
        width: 30rem;
        max-width: 33vw;
    }
    @media screen and (min-width: 1024px) and (max-width: 1365px){
        width: 30rem;
        max-width: 30vw;
    }
    @media screen and (min-width:992px) and (max-width: 1023px) {
        width: 30rem;
        max-width: 30vw;
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        width: 100rem;
        max-width: 100vw;
    }
    @media screen and (min-width:441px) and (max-width:767px) {
        width: 100rem;
        max-width: 100vw;
    }
    @media screen and (min-width:351px) and (max-width:440px) {
        width: 100rem;
        max-width: 100vw;
    }
    @media screen and (max-width:350px) {
        width: 100rem;
        max-width: 100vw;
    }
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 999;


    .james_click_out_speech{
        position: absolute;
        bottom: 1.5rem;
        right: -5%;
        top: 5%;
        opacity: 0;
        transition: all .2s ease;
        z-index: 400;
        cursor: pointer;
        span{
            height: 2rem;
            width: 2rem;
            border-radius: 50%;
            background: #fff;
            color: #052f3f;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #333;
        }
    }


    .james_head{
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url("../../inc/assets/james.png");
        padding: 2rem;
        position: absolute;
        bottom: 0;
        right: -100%;
        transform: scale(1);
        filter: saturate(1);
        transition: all 0.1s ease;
        height: 6rem;
        width: 6rem;
        z-index: 999;
        transition: all .2s ease;
        &:hover{
            transform: scale(1.1) translateY(-0.2rem);
        }
        &.head-shown{
            right: 1rem !important;
            transition: all .2s ease;
        }

/********************/


.james_speech{
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../../inc/assets/speech_balloon_large.png");
    padding: 2rem;
    position: absolute;
    cursor: pointer;
// pointer-events: none;
@media screen and (min-width: 2560px){
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width: 1920px) and (max-width: 2559px){
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width: 1681px) and (max-width: 1919px){
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width: 1441px) and (max-width: 1680px){
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width: 1366px) and (max-width: 1440px){
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width: 1024px) and (max-width: 1365px){
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width:992px) and (max-width: 1023px) {
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width:768px) and (max-width: 991px) {
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width:441px) and (max-width:767px) {
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (min-width:351px) and (max-width:440px) {
    max-width: 16rem;
    max-height: 13rem;
}
@media screen and (max-width:350px) {
    max-width: 16rem;
    max-height: 13rem;
}
right: 5%;
bottom: 90%;

p{
    max-width: 15rem;
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    font-size: calc(.85rem + 0.1vw);
    text-align: center;
    color: #052f3f;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    span.click_me{
        display: block;
        margin-top: 1rem;
        font-size: calc(0.7rem + 0.1vw);
    }
}
.speech_sizer{
    opacity: 0;
    max-width: 25rem;
    position: relative;
}
}
/********************/


}


.james_side_text{
    height: 100%;
    position: absolute;
    right: -150%;
    visibility: hidden;
// pointer-events: none;
transition: all 0.2s ease;
background: #fff;
padding: 2rem;
max-width: 40rem;
display: flex;
align-items: center;
width: 100%;
z-index: 99999;
flex-direction: column;
justify-content: center;
p{
    font-size: calc(1.1rem + 0.1vw);
    text-align: center;
    color: #052f3f;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    max-width: 24rem;
    strong{
        font-weight: 800;
    }

    a.internal_side_link{
        font-size: calc(1.1rem + 0.1vw);
        text-align: center;
        color: #052f3f;
        font-weight: 600;
        font-family: "Roboto", sans-serif;
        max-width: 24rem;
        text-decoration: none;
        display: block;
        margin-top: 1rem;
    }
}
&.text-shown{
    right: 0%;
    visibility: visible;  
}

a.readmorelink{
    width: 100%;
    display: block;
    text-align: center;
            color: #052f3f;
        font-weight: 600;
        font-family: "Roboto", sans-serif;
}
}

}

.side_man.manpointer_on{
    pointer-events: all !important;

    .james_click_out_speech{
        right: 35%;
        opacity: 1;
        transition: all .2s ease;
        pointer-events: all;
    }

}



.james_head.head-shown{
    z-index: 99999999;
// right: 90% !important;
}

.james_head.head-shown.rightforcedface{
    right: 110% !important;

}


.james_head.speechbubblehidden{
    .james_speech{
        display: none;
    }
}
/********************/
/***      james *****/
/********************/





section.active{
    .faded_down{
        opacity: 1 !important;
        transition: all .7s ease-in-out !important;
        transform: translateY(0%);
    }
    .faded_down_b{
        opacity: 1 !important;
        transition: all .9s ease-in-out !important;
        transform: translateY(0%) !important;
    }

    .faded_down_b_a{
        opacity: 1 !important;
        transition: all .8s ease-in-out !important;
        transform: translateY(0%) !important;
    }
    .faded_down_b_b{
        opacity: 1 !important;
        transition: all .7s ease-in-out !important;
        transform: translateY(0%) !important;
    }
    .faded_down_b_c{
        opacity: 1 !important;
        transition: all .8s ease-in-out !important;
        transform: translateY(0%) !important;
    }


    .faded_scale{
        opacity: 1 !important;
        transition: all .9s ease-in-out !important;
        transform: scale(1) !important;
    }
    .staff_person_1{transition: all .5s ease-in-out !important; transform: translate(-10%, 10%) scale(0.8)}
    .staff_person_2{ transition: all .5s ease-in-out !important; transform: translate(0%, 10%) scale(1.02)}
    .staff_person_3{ transition: all .5s ease-in-out !important; transform: translate(-5%,-20%) scale(0.8)}
    .staff_person_4{ transition: all .5s ease-in-out !important; transform: translate(0%, 20%) scale(0.8)}
    .staff_person_5{ transition: all .5s ease-in-out !important; transform: translate(10%, 20%) scale(1.5)}
    .staff_person_6{ transition: all .5s ease-in-out !important; transform: translate(15%, 15%) scale(1)}
    .staff_person_7{ transition: all .5s ease-in-out !important; transform: translate(15%, 20%) scale(1.07)}
    .staff_person_8{ transition: all .5s ease-in-out !important; transform: translate(18%, 40%) scale(1.05)}
    .staff_person_9{ transition: all .5s ease-in-out !important; transform: translate(30%, 70%) scale(1.1)}

//end active state
//end active state
//end active state
}


.fp-watermark{
    display: none;
}



#section5{
    .canvas_a{
        #polyline_a, #polyline_ab, #polyline_ac, #polyline_ad, #polyline_ae, #polyline_af, #polyline_ag{
            @media screen and (min-width:992px) {
                stroke-dasharray: 800;
                stroke-dashoffset: 800;                
            }
            @media screen and (max-width:991px) {
                stroke-dasharray: 1200;
                stroke-dashoffset: 1200;
            }
            transition: stroke-dashoffset 2s linear;
        }
    }

    .canvas_b{
        #polyline_b, #polyline_bb, #polyline_bc, #polyline_bd, #polyline_be, #polyline_bf, #polyline_bg{
            @media screen and (min-width:992px) {
                stroke-dasharray: 800;
                stroke-dashoffset: 800;                
            }
            @media screen and (max-width:991px) {
                stroke-dasharray: 1300;
                stroke-dashoffset: 1300;
            }
            transition: stroke-dashoffset 2.5s linear;
        }
    }
    .canvas_c{
        #polyline_c, #polyline_cb, #polyline_cc, #polyline_cd, #polyline_ce, #polyline_cf, #polyline_cg{
            @media screen and (min-width:992px) {
                stroke-dasharray: 800;
                stroke-dashoffset: 800;                
            }
            @media screen and (max-width:991px) {
                stroke-dasharray: 1300;
                stroke-dashoffset: 1300;
            }
            transition: stroke-dashoffset 2s linear;
        }
    }

}



#section5.send-data-class{

    .canvas_a{
        #polyline_a, #polyline_ab, #polyline_ac, #polyline_ad, #polyline_ae, #polyline_af, #polyline_ag{
            stroke-dashoffset: 0 !important;
            transition: stroke-dashoffset 1.5s linear !important;
        }
    }

    .canvas_b{
        #polyline_b, #polyline_bb, #polyline_bc, #polyline_bd, #polyline_be, #polyline_bf, #polyline_bg{
            stroke-dashoffset: 0 !important;
            transition: stroke-dashoffset 1s linear !important;
        }

    }
    .canvas_c{
        #polyline_c, #polyline_cb, #polyline_cc, #polyline_cd, #polyline_ce, #polyline_cf, #polyline_cg{
            stroke-dashoffset: 0 !important;
            transition: stroke-dashoffset 1s linear !important;
        }
    }
}




/********************/
/*** ********** *****/
/********************/

section#section6{

    .canvas_ipad{
        #polyline_canvas_a, #polyline_canvas_b, #polyline_canvas_c, #polyline_canvas_d, #polyline_canvas_e, #polyline_canvas_f, #polyline_canvas_g{
            @media screen and (min-width:992px) {
                stroke-dasharray: 800;
                stroke-dashoffset: 800;                
            }
            @media screen and (max-width:991px) {
                stroke-dasharray: 1200;
                stroke-dashoffset: 1200;
            }
            transition: stroke-dashoffset .8s linear;
        }
    }
}




section#section6.get-data-class{

    .canvas_ipad{
        #polyline_canvas_a, #polyline_canvas_b, #polyline_canvas_c, #polyline_canvas_d, #polyline_canvas_e, #polyline_canvas_f, #polyline_canvas_g{
            stroke-dashoffset: 0 !important;
            transition: stroke-dashoffset 1s linear !important;
        }
    }
}




/********************/
/*** ********** *****/
/********************/

main.site-main{
    .flexholder{
                   @media screen and (max-width:991px) {
        padding-top: 9rem;                
                   }
      
    }
}


main.site-main.single_blog_post{
    background: #fcfcfa;

    .holds_content{
                           @media screen and (max-width:991px) {
        padding-top: 6rem;                
                   }
        .holds_image{
            height: 40vh;
            margin: 3rem 0;
            figure{
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        }

        .holds_content_side{
            display: flex;

                                         @media screen and (min-width:992px) {
                                            flex-direction: row;
                                         }
                                         @media screen and (max-width:991px) {
                                           flex-direction: column; 
                                         }
            
            
            .maincontent{
                
                             @media screen and (min-width:992px) {
                             width: 70%;   
                             }
                             @media screen and (max-width:991px) {
                                width: 100%;
                             }
                
                h1,h2,h3,h4,h5{
                    color: #052f3f;
                    font-weight: 700;
                    font-family: "Roboto", sans-serif;
                    text-align: left;
                }
                p{
                    text-align: left;
                    font-size: calc(.9rem + 0.1vw);
                    font-family: $archivo;
                    line-height: 1.1em;
                }

            }
        }

    }

}



/********************/
/*** ********** *****/
/********************/


main.site-main.single_page{
    background: #fcfcfa;

    .holds_content{
        .holds_image{
            height: 40vh;
            margin: 3rem 0;
            figure{
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        }

        .holds_content_side{
            display: flex;
            .maincontent{
                width: 70%;
                h1,h2,h3,h4,h5{
                    color: #052f3f;
                    font-weight: 700;
                    font-family: "Roboto", sans-serif;
                    text-align: left;
                }
                p{
                    text-align: left;
                    font-size: calc(.9rem + 0.1vw);
                    font-weight: 400;
                        font-family: $archivo;
                }

            }

        }

    }

}


main.site-main.single_page,
main.site-main.single_blog_post{
    .side_bar{

             @media screen and (min-width:992px) {
        width: 30%; 
                padding: 1rem 1.5rem 0 3rem;               
             }
             @media screen and (max-width:991px) {
                        width: 100%;
                        padding-top: 2rem;
             }
        .holds_inner{
            border-left: 1px solid #052f3f;
            padding: 0 1rem 0;
            p, a{
                    font-family: $archivo;
            }
        }
    }
}




/********************/
/*** route defaults *****/
/********************/

.routeclass-default, .routeclass-sustainability{
    .xray_content li:nth-child(4), .xray_content li:nth-child(5){
        display: none;
    }

    #section2{
        .lifto#lifto_b{
            top: 13%;
        }
    }

}

.routeclass-wellness, .routeclass-financial{
    .xray_content li:nth-child(4), .xray_content li:nth-child(5){
        display: block;
    }
}



.routeclass-wellness{
    #section2{
        .lifto#lifto_b{
            top: 35%;
        }
    }
}

.routeclass-financial{
    #section2{
        .lifto#lifto_b{
            top: 52%;
        }
    }
    .testimonial_speech{

        @media screen and (min-width:992px) {
            width: 60% !important;
        }
    }

}



/********************/
/*** ********** *****/
/********************/

.body-head-shown{
    .side_man.manpointer_on{
        .james_click_out_speech{
            right: 90%;
        }

    }
}


/********************/
/*** moile  *****/
/********************/

section.section{

    @media screen and (min-width:992px) {

    }
    @media screen and (max-width:991px) {
        height: 100vh;                
    }

}


.hideonmobile{

    @media screen and (max-width:991px) {
        display: none !important;
    }

}

.hideondesktop{
 @media screen and (min-width:992px) {
    display: none !important;
 }
}


/********************/
/*** ********** *****/
/********************/

.empty_image_loader{
    display: none;
}


/********************/
/*** ********** *****/
/********************/

#coverall{
    opacity: 1;
    transition: all .2s ease-in-out;
    position:fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color:white;
    z-index:999999999;
    display: flex;
    align-items: center;
    justify-content: center;

    img{
        width: 8rem;
        height: 8rem;
        animation-iteration-count: infinite;
        animation: pulsar 40s infinite;
    }
}

@keyframes pulsar {
    0%{
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(220deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


#coverall.unhide{
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all .2s ease-in-out;
}


/********************/
/*** ********** *****/
/********************/


.archivo{
    padding-bottom: 5rem;
    z-index: 9;
    .containo{
        position: relative;
        max-height: 80%;
        .flexholder{
            display: flex;

                                         @media screen and (min-width:992px) {
                                            flex-direction: row;
                                         }
                                         @media screen and (max-width:991px) {
                                           flex-direction: column; 
                                         }
            
            
        }
    }

    .grid_zone{
        display: flex;
      
                   @media screen and (min-width:992px) {
        width: 80%;                
                   }
                   @media screen and (max-width:991px) {
                    width: 100%;    
                   }
      
        justify-content: space-between;
        flex-wrap: wrap;
        padding-right: 2.5%;
        .grid_box{
            @media screen and (min-width: 2560px){
                width: 33%;
            }
            @media screen and (min-width: 1920px) and (max-width: 2559px){
                width: 33%;
            }
            @media screen and (min-width: 1681px) and (max-width: 1919px){
                width: 33%;
            }
            @media screen and (min-width: 1441px) and (max-width: 1680px){
                width: 33%;
            }
            @media screen and (min-width: 1366px) and (max-width: 1440px){
                width: 33%;
            }
            @media screen and (min-width: 1024px) and (max-width: 1365px){
                width: 33%;
            }
            @media screen and (min-width:992px) and (max-width: 1023px) {
                width: 33%;
            }
            @media screen and (min-width:768px) and (max-width: 991px) {
                width: calc(50% - 0.5rem);
            }
            @media screen and (min-width:441px) and (max-width:767px) {
                width: calc(50% - 0.5rem);
            }
            @media screen and (min-width:351px) and (max-width:440px) {
                width: calc(50% - 0.5rem);
            }
            @media screen and (max-width:350px) {
                width: calc(50% - 0.5rem);
            }
            a{
                text-decoration: none;
            }
            .innerbox{
                position: relative;
                background-position: center;
                background-repeat: no-repeat;
                background-image: url('../../inc/assets/six_grid_back.png'); 
                background-size: contain;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                img{
                    opacity: 0;
                }
                p{
                    font-size: calc(1rem + 0.1vw);
                    font-family: 'Roboto', sans-serif;
                    color: #052f3f;
                    font-weight: 600;

                    @media screen and (min-width:992px) {
                        max-width: 80%;
                        margin-left: 10%;                
                    }
                    @media screen and (max-width:991px) {
                        max-width: 95%;
                        margin-left: 2.5%;
                    }
                }
            }

            .holds_undertext{
                text-align: center;
                max-width: 70%;
                margin-left: 15%;
                p, a{
                    text-align: center;
                    font-size: calc(.9rem + 0.1vw);
                    color: #052f3f;
                }
                a{
                    margin: unset;
                }
            }
        }
    }

    .sidebar_zone{
  
               @media screen and (min-width:992px) {
        width: 20%;    
                padding-left: 2.5%;            
               }
               @media screen and (max-width:991px) {
                        width: 100%;
               }
  
        padding-top: 2rem;
    }
}



/********************/
/*** ********** *****/
/********************/

.topmenu{
    padding: 0.75rem 0;
    border-bottom: 1px solid #052f3f;
    z-index: 999;
    top: 0;
                 @media screen and (min-width:992px) {
                position: relative; 
                 }
                 @media screen and (max-width:991px) {
        position: fixed;  
        width: 100%;
        background: #fff;              
                 }
    
    .holds_menu{
        display: flex;
        justify-content: space-between;
        .left_menu{
            width: 4rem;
            a, a:visited{
                width: 100%;
                height: 100%;
                display: block;
                img{
                    width: 100%;
                    height: 100%;
                    max-height: 60px;
                    max-width: 60px;
                }
            }
        }
        .right_menu{
            width: 80%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            ul{
                display: flex;
                height: 100%;
                align-items: center;
                margin: 0;
                li{
                    list-style-type: none;
                    margin-left: 1rem;
                    a{
                        color:#052f3f;
                        text-decoration: none;
                            svg{
                            display: block;
                            height: 2.5rem;
                            width: 2.5rem;
                            }
                    }
                }
            }
        }
    }  
}

.popoutmenu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 30rem;
    height: 100%;
    background-color: #fcfcfa;
    padding: 10% 1rem;
    z-index: 40;
    display: flex;
    align-items: center;
    transition: all .2s ease;
    ul{
        margin: 0;
        padding: 0;
        height: 33%;
        max-height: 10rem;
        display: flex;
    flex-direction: column;
    justify-content: space-between;
        li{
            list-style-type: none;
            line-height: 2em;
            a{
                font-size: calc(1.8rem + 0.1vw);
                text-decoration: none;
                display: block;
                padding: 0.5rem;
                color: #052f3f;
                            font-weight: 600;
                font-family: $archivo;
            }
        }
    }

}

.popoutmenu.shown{
    transition: all .2s ease;
        right: 0% !important;
box-shadow: -4px 1px 17px #1f2b315e;
}

/********************/
/*** ********** *****/
/********************/

.genstyles{
    ul{
        margin-left: 0;
        padding-left: 0;
        list-style-type: none;
        a{
            color: $navy;
            text-decoration: none;
            font-weight: 600;
                font-family: $archivo;
        }
        li{
            margin-bottom: 0.75rem;
            a{
                font-weight: 300;
            }
        }
    }

    .wp-block-search__input{
        border-radius: 3px;
        background: transparent;
        border-width: 2px;
        border-color:#052f3f;
    }

    label.wp-block-search__label{
        display: none;
    }
    button.wp-block-search__button{
        background: #052f3f;
        color: #fff;
        border: none;
    }

}

/********************/
/*** ********** *****/
/********************/

main.four-oh-four{
    min-height: 70vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    .flexholder{
        display: flex;
        flex-direction: column; 
        align-content: center;
        justify-content: center;
        align-items: center;
        h1{
            font-size: calc(4rem + 0.1vw);
        }
    }
}


/********************/

// $cream: #fff8f0;
// $navy: #052f3f;
// $white: #ffffff;

/********************/
#wholemobilesite{

                 @media screen and (min-width:992px) {
                    display: none;
                 }
    
}

#wholedesktopsite{
                 @media screen and (max-width:991px) {
                    display: none;
                 }
    
}



.mobile_section{
    background-color: #e3ded9;
    min-height: 100vh;
&.eighty{
    min-height: 80vh;
}
&.ninety{
    min-height: 90vh;
}


.clouds_mobile{
position: absolute;
height: 70vh;
top: 10rem;
width: 100%;
pointer-events: none;
overflow: hidden;
    .cloud_mobile_a {
@media screen and (min-width:768px) and (max-width: 991px) {
width: 15rem;
height: 5rem;
}
@media screen and (min-width:441px) and (max-width:767px) {
width: 10rem;
height: 3.5rem;
}
@media screen and (min-width:351px) and (max-width:440px) {
width: 10rem;
height: 3.5rem;
}
@media screen and (max-width:350px) {
width: 10rem;
height: 3.5rem;
}
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../../inc/assets/cloud_a.png'); 
    animation-iteration-count: infinite;
    animation: lefttoright_mobile 30s infinite;
    top: 0;
    position: absolute;
    }

    @keyframes lefttoright_mobile {
    0%{
        opacity: 0;
        transform: translateX(-30vw);
    }

    5%{
        opacity: 1;
        transform: translateX(-15vw);
    }

    45% {
        opacity: 1;
        transform: translateX(120vw);
    }

    50% {
        opacity: 0;
        transform: translateX(110vw);
    }

    100% {
        opacity: 0;
        transform: translateX(-30vw);
    }

    }

    .cloud_mobile_b {
@media screen and (min-width:768px) and (max-width: 991px) {
width: 15rem;
height: 5rem;
}
@media screen and (min-width:441px) and (max-width:767px) {
width: 10rem;
height: 3.5rem;
}
@media screen and (min-width:351px) and (max-width:440px) {
width: 10rem;
height: 3.5rem;
}
@media screen and (max-width:350px) {
width: 10rem;
height: 3.5rem;
}
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../../inc/assets/cloud_b.png'); 
    animation-iteration-count: infinite;
    animation: lefttoright_mobile 35s infinite;
    bottom: 50%;
    position: absolute;
    }

    @keyframes lefttoright_mobile_b {
    0%{
        opacity: 0;
        transform: translateX(-30vw);
    }

    5%{
        opacity: 1;
        transform: translateX(-15vw);
    }

    45% {
        opacity: 1;
        transform: translateX(125vw);
    }

    50% {
        opacity: 0;
        transform: translateX(110vw);
    }

    100% {
        opacity: 0;
        transform: translateX(-30vw);
    }

    }

}


.holds_james_mobile_speech{

position: absolute;
top: 0;
height: 100vh;
width: 100%;
z-index: 9;
pointer-events: none;
.james_mobile_speech{
    position: absolute;
    bottom: 5%;
    right: 0;
    width: 90%;
    max-width: 30rem;
    .inner_mobile_holder{
        position: relative;
    height: 30rem;
    max-height: 65vh;
            .speecher{
background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../../inc/assets/speech_balloon_large.png);
    z-index: 3;
    position: absolute;
    width: 100%;
    min-height: 16rem;
    display: flex;
    align-items: center;
    min-height: 22rem !important;
    p{
        max-width: 20rem;
        font-size: calc(1.2rem + 0.1vw);
    max-width: 22rem;
    padding: 1rem 1rem 2.5rem 1rem;
    max-width: 15rem;
    margin: 0 auto;
    color: #052f3f;
        font-weight: 400;
    font-family: "Archivo", sans-serif;
    line-height: 1.5em;
    }
    }

    .header{
                background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url("../../inc/assets/james.png");
        padding: 2rem;
        position: absolute;
        bottom: 0;
        height: 6rem;
        width: 6rem;
        z-index: 0;
        right: 0;
    }
    }
}

}


}

.mobile_section_1{
    background-color: #e3ded9;
position: relative;
max-width: 100vw;


.createheight{
    opacity: 0;
               width: 30rem;
@media screen and (min-width:768px) and (max-width: 991px) {
max-width: 28.5vw;
}
@media screen and (min-width:441px) and (max-width:767px) {
max-width: 28.5vw;
}
@media screen and (min-width:351px) and (max-width:440px) {
max-width: 28.5vw;
}
@media screen and (max-width:350px) {
max-width: 28.5vw;
}
@media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
            max-width: 27vw;
}
            pointer-events: none;
                left: 0;
    margin-top: 10rem;
}

    .mobile_sidebuilding{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 15rem;
        img{
            opacity: 0;
            position: relative;
           width: 25rem;
            max-width: 25vw;
        }
    }

p.sidebuilding_section_1_mobile_text{
            @media screen and (min-width:768px) and (max-width: 991px) {
    font-size: calc(1.8rem + 0.1vw);
        max-width: 24rem;
            top: 30vh;
            }
            @media screen and (min-width:441px) and (max-width:767px) {
    font-size: calc(1.5rem + 0.1vw);
        max-width: 16rem;
            top: 40vh;
            }
            @media screen and (min-width:351px) and (max-width:440px) {
    font-size: calc(1.5rem + 0.1vw);
        max-width: 16rem;
            top: 40vh;
            }
            @media screen and (max-width:350px) {
    font-size: calc(1.5rem + 0.1vw);
        max-width: 16rem;
            top: 40vh;
            }
    @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
    font-size: calc(2rem + 0.1vw);
        max-width: 25rem;
          top: 30vh;
    }
    text-align: center;
    color: #052f3f;
    font-weight: 700;
    font-family: $ballinger;
    position: absolute;
    max-width: 16rem;
    right: 10%;
    line-height: 1.3em;
}




.holds_mobile_testimonial_bubbles{
        @media screen and (min-width:768px) and (max-width: 991px) {
            top: 15vh;
                height: 80vh;
        }
        @media screen and (min-width:441px) and (max-width:767px) {
                top: 15vh;
                    height: 80vh;
        }
        @media screen and (min-width:351px) and (max-width:440px) {
                top: 15vh;
                    height: 70vh;
        }
        @media screen and (max-width:350px) {
                top: 15vh;
                    height: 70vh;
        }
        @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
            top: 10vh;
                height: 70vh;
        }
    position: absolute;
    left: 0;
    width: 92%;
    height: 80vh;
    overflow: hidden;
.inner_holder_bubbles{
    position: relative;
    height: 100%;
    width: 100%;
        @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
    transform: scale(1.2);
    }
}


    .bubble_top{
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../../inc/assets/testimonial_speech.png);
    z-index: 0;
    top: 10%;
    position: absolute;
    width: 90%;
min-height: 14rem;
    display: flex;
    align-items: center;

    p{
font-size: calc(.9rem + 0.1vw);
    max-width: 14rem;
    margin: 0 auto;
    padding: 1rem 1rem 1rem 3.75rem;
    color: #000;
    line-height: 1.4em;
        font-family: "Archivo", sans-serif;
    }

    }

    .bubble_two{
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../../inc/assets/talking_head_balloon_left.png);
    z-index: 0;
    bottom: 10%;
    position: absolute;
    width: 90%;
min-height: 10rem;
    display: flex;
    align-items: center;

    p{
font-size: calc(.9rem + 0.1vw);
    max-width: 13rem;
    margin: 0 auto;
    padding: 1rem 1rem 1rem 3rem;
    color: #000;
    line-height: 1.4em;
        font-family: "Archivo", sans-serif;
    }

    }

}


.holds_james_mobile_speech.part_b{
    top: unset;
        @media screen and (min-width:768px) and (max-width: 991px) {
bottom: 5vh;
        }
        @media screen and (min-width:441px) and (max-width:767px) {
bottom: 5vh;
        }
        @media screen and (min-width:351px) and (max-width:440px) {
bottom: 5vh;
        }
        @media screen and (max-width:350px) {
bottom: 5vh;
        }

@media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
bottom: 5vh;
}
}


//     .blue{
//         position: relative;
// background-size: 100% 100%;
// background-position: center;
// background-repeat: no-repeat;
//  background-image: url('../../inc/assets/back_slash.png');

// @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
//         background: #052f3f;
//         height: 20rem;
// }

// height: 70vw;
// bottom: 0;
//     width: 100%;
//     left: 0%;
//     z-index: 0;
// }




&.part_b, &.part_c{
    // border-top: 1px solid #333;
    .createheight{
        top: 0;
        margin-top: 0;
    }
    .mobile_sidebuilding{
        top: 0;
    }
}

&.part_d{
    // border-top: 1px solid #333;
    .createheight{
        height: 100vh;
        margin-top: 0;
    }
.mobile_sidebuilding {
    top: 0;
    background-size: cover;
    background-position: 100% -140vh;
    }
}
//end section 1
}



.over_trans_pic{
    background-size: contain;
background-position: left center;
background-repeat: no-repeat;
position: absolute;
 background-image: url('../../inc/assets/side_transparent.png');
 img.inner_trans{
    opacity: 0;
    width: 30vw;
    height: auto;
 }
}

.mobile_section_2{
    height: 100vh;
    @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
    height: 70vh;
    }
display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    justify-content: center;
.section_2_text{
    padding: 2rem 1rem;
    p{
    position: relative;
    color: #052f3f;
    font-weight: 900;
    text-align: center;
    font-family: "Roboto", sans-serif;
    margin: 0 auto;
    max-width: 30rem;
        @media screen and (min-width:768px) and (max-width: 991px) {
            font-size: calc(2.5rem + 0.1vw);
            padding: 0 2rem;
        }
        @media screen and (min-width:441px) and (max-width:767px) {
                font-size: calc(2.25rem + 0.1vw);
                padding: 0 2rem;
        }
        @media screen and (min-width:351px) and (max-width:440px) {
                font-size: calc(2rem + 0.1vw);
                padding: 0 2rem;
        }
        @media screen and (max-width:350px) {
                font-size: calc(1.85rem + 0.1vw);
                padding: 0 2rem;
        }
    }
}
}



.mobile_section{
    position: relative;

&.lasty{
    overflow: hidden;
}

    img.mobile_section_ipaddo{
        @media screen and (min-width:768px) and (max-width: 991px) {
    width: 110vw;
    position: absolute;
    left: -30vw;
    top: 10%;
    max-width: unset;
        }
        @media screen and (min-width:441px) and (max-width:767px) {
    width: 110vw;
    position: absolute;
    left: -30vw;
    top: 10%;
    max-width: unset;
        }
        @media screen and (min-width:351px) and (max-width:440px) {
    width: 110vw;
    position: absolute;
    left: -30vw;
    top: 10%;
    max-width: unset;
        }
        @media screen and (max-width:350px) {
    width: 110vw;
    position: absolute;
    left: -30vw;
    top: 10%;
    max-width: unset;
        }
        @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
    width: 110vw;
    position: absolute;
    left: -30vw;
    top: 10%;
    max-width: unset;
        }
}
}

.mobile_section._starto{
    height: 100vh;
    overflow-y: hidden;
}

.mobile_section_3{
    height: 90vh;
display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    justify-content: center;


.mobile_getmoreinfo_buttonholder{
    position: absolute;
    bottom:3rem;
    left: 10%;
}

}


.holds_james_mobile_speech.part_a{
    top: 30vh;
    @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
        top: 12vh;
    }
}

.holds_james_mobile_speech.part_b{
.inner_mobile_holder .speecher p{
    max-width: 18rem !important;
}
}

.holds_james_mobile_speech.part_c{
.inner_mobile_holder .speecher p{
    max-width: 20rem !important;
}
}


.holds_james_mobile_speech{
               @media screen and (min-width:768px) and (max-width: 991px) {
                transform: scale(.9);
               }
               @media screen and (min-width:441px) and (max-width:767px) {
                    transform: scale(.9);
               }
               @media screen and (min-width:351px) and (max-width:440px) {
                    transform: scale(.9);
               }
               @media screen and (max-width:350px) {
                    transform: scale(.9);
               }
}


.mobile_getmoreinfo_buttonholder{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 2rem;
        a{
            background: #052f3f;
            text-align: center;
            color: #fff;
            max-width: 15rem;
            padding: 1rem 2rem;
            font-weight: 600;
            font-family: 'Roboto', sans-serif;
            text-decoration: none;
        }
    }


.if_ipad{
    display: none;
}

.if_small_mobile{
@media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
display: none !important;
}
}



.if_ipad{
@media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : portrait) {
display: block !important;
}
}


/********************/
/*** ********** *****/
/********************/




.cover_portrait{
    opacity: 1;
    transition: all .2s ease-in-out;
    position:fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color:white;
    z-index:999999999;
    align-items: center;
    justify-content: center;
     flex-direction: column; 
     display: none;
 @media screen and (orientation:portrait) {
         display: none;
 }
 @media screen and (orientation:landscape) and (max-width:1023px){
         display: flex;
 }
 @media only screen and (min-device-width: 769px) and (max-device-width : 1024px) and (orientation : landscape) {
        display: flex;
 }

 
 img{
        width: 8rem;
        height: 8rem;
        animation-iteration-count: infinite;
        animation: pulsar_less 2s infinite;
    }
    p.please_rotate{
        background: #052f3f;
        text-align: center;
        color: #fff;
        padding: 1rem;
        font-weight: 600;
        font-family: "Roboto", sans-serif;
        text-decoration: none;
        display: block;
    }




}

@keyframes pulsar_less {
    0%{
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

    100% {
        transform: scale(1);
    }
}