/* 

Crreated 08 Aug 2020

 */
                /* ----------- iPhone X ----------- */
                /* Portrait and Landscape */
                
                @media only screen and (min-device-width: 320px) and (max-device-width: 812px) {
                    body {
                        overflow: visible;
                        height: auto;
                    }
                    .mt-5,
                    .my-5 {
                        margin-top: 2rem !important;
                    }
                    header.fixed-top {
                        position: relative;
                        top: 56px;
                    }
                    ul.r-menu {
                        position: absolute;
                        top: -51px;
                        right: 0;
                    }
                    .b-nav {
                        width: 100%;
                    }
                    .logo {
                        width: 100%;
                    }
                    .digram-circle {
                        position: relative;
                        top: 0;
                        left: auto;
                        width: 100%;
                        margin-left: auto;
                        margin-top: -60px;
                    }
                    .layer-diagram li .popOver {
                        position: relative;
                        left: 0;
                        width: 90%;
                        top: 0px;
                        background-color: rgba(0, 0, 0, 0.9);
                        padding: 14px;
                        border: 1px solid rgba(138, 181, 17, .2);
                        border-radius: 0px;
                    }
                    .layer-diagram li:nth-child(1) .popOver,
                    .layer-diagram li:nth-child(2) .popOver,
                    .layer-diagram li:nth-child(3) .popOver,
                    .layer-diagram li:nth-child(4) .popOver {
                        z-index: 9999 !important;
                        position: absolute;
                        left: 5%;
                        width: 90%;
                        top: 0px;
                        margin: 0 auto;
                        background-color: rgba(0, 0, 0, 0.9);
                    }
                    .layer-diagram li:nth-child(1) .popOver .buble:after,
                    .layer-diagram li:nth-child(2) .popOver .buble:after,
                    .layer-diagram li:nth-child(3) .popOver .buble:after,
                    .layer-diagram li:nth-child(4) .popOver .buble:after {
                        display: none;
                    }
                    .layer-diagram li:nth-child(2) .popOver h4,
                    .layer-diagram li:nth-child(4) .popOver h4,
                    .layer-diagram li:nth-child(2) .popOver p,
                    .layer-diagram li:nth-child(4) .popOver p {
                        padding-left: 80px;
                        padding-right: 0px;
                        text-align: left;
                    }
                    .layer-diagram li:nth-child(2) .popOver .buble,
                    .layer-diagram li:nth-child(4) .popOver .buble {
                        right: auto;
                        left: 12px;
                    }
                    .sub-pg-header ul.r-menu {
                        position: absolute;
                        top: 4px;
                        right: 0;
                    }
                    ul.r-menu li ul {
                        min-width: 260px;
                    }
                    .b-container {
                        right: 8px;
                        top: 8px;
                    }
                    .b-menu-item {
                        margin-right: 62px;
                    }
                }
                /* // Extra small devices (portrait phones, less than 576px) */
                
                @media (max-width: 767px) {
                    .half-section {
                        width: 100%;
                        height: auto;
                    }
                    .overly {
                        height: 120%;
                    }
                    .layer-diagram li {
                        text-align: center;
                    }
                    .layer-diagram {
                        height: 50vh;
                    }
                    .layer-diagram li:nth-child(1) .popOver,
                    .layer-diagram li:nth-child(2) .popOver,
                    .layer-diagram li:nth-child(3) .popOver,
                    .layer-diagram li:nth-child(4) .popOver {
                        z-index: 999999 !important;
                        left: -30px;
                        width: 80%;
                    }
                    .navbar-nav {
                        display: -ms-flexbox;
                        display: flex;
                        -ms-flex-direction: column;
                        flex-direction: column;
                        padding-left: 0;
                        margin-top: 0;
                        list-style: none;
                        top: 0;
                        position: relative;
                    }
                }