/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */
/* ----------------------- */
/*       home              */
/* ----------------------- */
.home-header-style{
	text-align: center;
    letter-spacing: 30px;
    text-transform: uppercase;
    font-size: 70px;
    padding: 0px 30px;
    font-weight: 800;
}
.hero-video .video-background iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -24%;
    left: 0;
}
.jumbo {
    position: relative;
    padding: 6px 20px;
    margin-top: 0;
    color: #fff;
    font-size: 150%;
}

/* ----------------------- */
/*       accred            */
/* ----------------------- */

	.popup-banner{
/* 	padding-left: 30px;
	padding-right: 30px; */
	transition: all .2s;
	width:400px;
	height: auto;
}

.popup-banner:hover {
	box-shadow: 0 4px 8px 2px hsla(0, 0%, 70%, .6);
    transform: scale(1.1);
}
	
/*End mobile and up styles*/
/* ====================== Mobile Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 100px) and (max-width: 500px) {
/* ----------------------- */
/*       header            */
/* ----------------------- */
.home-header-style{
	text-align: center;
    letter-spacing: 15px;
    text-transform: uppercase;
    font-size: 40px;
    padding: 0px 10px;
    font-weight: 600;
}
}
/* ====================== Tablet  (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 600px) and (max-width: 1050px){
/* ----------------------- */
/*       header              */
/* ----------------------- */
/*--- video --*/	
.hero-video .video-img {
    width: 100%;
}

.hero-video .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 119%;
    padding-top: 59.50%;
    opacity: 0;
}

.hero-video .video-background iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20%;
    left: 0;
}
.jumbo {
    position: relative;
    padding: 1px 20px;
    margin-top: 0;
    color: #fff;
    font-size: 150%;
}
/*--- header --*/	
.home-header-style{
	text-align: center;
    letter-spacing: 30px;
    text-transform: uppercase;
    font-size: 70px;
    padding: 0px 30px;
    font-weight: 800;
}
	
}