/* Hero Video */

.layout-4 {
    height: auto;
    margin: 0 auto;
    max-width: 1364px;
    position: relative;
}

.layout-4__container {
    background-size: cover;
    cursor: pointer;
    height: 695px;
    max-width: 100%;
}

.layout-4__container__circle {
    background-color: #251949;
    border-radius: 50%;
    display: inline-block;
    height: 126px;
    margin: 284.5px 0 0 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 126px;
}

.layout-4__container__triangle {
    border-bottom: 30px solid transparent;
    border-left: 54px solid #ffffff;
    border-top: 30px solid transparent;
    display: inline-block;
    height: 0;
    margin: 33px 43px;
    width: 0;
}

/* 
.layout-4__container__circle:hover {
    background-color: #4BC3D4;
} */


.layout-4__modalOverlay {
	display: none;
    background-color: #000;
    bottom: 0;
    cursor: pointer;
	height: 100%; 
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	Xwidth: 100%;
	z-index: -2
}

.layout-4__embed {
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
}

.layout-4__embed iframe {
    height: 695px !important;
    width: 100% !important;
}

.visible {
    display: block;
}


@media only screen and (max-width: 1200px) {
    
    .layout-4__container {
        height: 600px;
    }
    
    .layout-4__container__circle {
        margin: 237.5px 0 0 50%;
    }

    .layout-4__embed iframe {
        height: 600px !important;
    }
}

@media only screen and (max-width: 1000px) {
    
    .layout-4__container {
        height: 500px;
    }
    
    .layout-4__container__circle {
        margin: 187.5px 0 0 50%;
    }

    .layout-4__embed iframe {
        height: 500px !important;
    }
}

@media only screen and (max-width: 800px) {
    
    .layout-4__container {
        height: 400px;
    }
    
    .layout-4__container__circle {
        margin: 137.5px 0 0 50%;
    }

    .layout-4__embed iframe {
        height: 400px !important;
    }
}

@media only screen and (max-width: 600px) {
    
    .layout-4__container {
        height: 300px;
    }
    
    .layout-4__container__circle {
        margin: 100px 0 0 50%;
    }

    .layout-4__embed iframe {
        height: 300px !important;
    }

    .layout-4__container__circle {
        height: 100px;
        width: 100PX;
    }

    .layout-4__container__triangle {
        border-bottom: 25px solid transparent;
        border-left: 45px solid #fff;
        border-top: 25px solid transparent;
        margin: 25px 35px;
    }
}

@media only screen and (max-width: 500px) {
    
    .layout-4__container {
        height: 250px;
    }
    
    .layout-4__container__circle {
        margin: 75px 0 0 50%;
    }

    .layout-4__embed iframe {
        height: 250px !important;
    }
}

@media only screen and (max-width: 420px) {
    
    .layout-4__container {
        height: 210px;
    }
    
    .layout-4__container__circle {
        margin: 55px 0 0 50%;
    }

    .layout-4__embed iframe {
        height: 210px !important;
    }
}

@media only screen and (max-width: 350px) {
    
    .layout-4__container {
        height: 180px;
    }
    
    .layout-4__container__circle {
        margin: 40px 0 0 50%;
    }

    .layout-4__embed iframe {
        height: 180px !important;
    }
}