:root{
	--color-welcome: #000;
	--color-services: #F58E8E;
	--color-brag: #67B0AB;
	--color-contact: #67B0AB;
}

* {
	/*transition: all 0.5s ease-out;*/
	transition: font-size 0.5s ease-out;
}


/* #header{background: #f58e8e29;} */
#header{border-bottom: 1px solid #00000030;}

#header .logo{filter: drop-shadow(0px 2px 37px black);}

#header .logo:before{
	position: absolute; content: ''; width: var(--logo-size); height: var(--logo-size); border: 5px solid #ffffff; border-radius: 100%; padding: 6px; margin-top: -11px; margin-left: -11px;
	visibility: hidden; /*transition: all 0.2s ease-out;*/
	}
#header .logo:after{
	content: 'DP Technology Group.'; left: 105px; top: -4px; position: relative; 
	visibility: visible;
}

/* #header .logo:after{visibility: hidden;}
#header.on .logo:after{visibility: visible;} */

#main{height: 100%; min-height: 100%; padding-top: 0;}


/*============== ============== ============== 
================ CLASSES
================ ============== ============== */
.home_page{
	overflow: hidden;
	width: 100%; position: relative;
	padding-top: var(--text-h1-padding); 
/* 				height: calc(100% - var(--text-h1-padding));  */
	min-height: calc(100% - var(--text-h1-padding));
}
.home_page .wrapper{min-height: 100%;}
.home_page .push_down{position: absolute; z-index: 1; bottom: var(--wrapper-height-padding);}
.home_page .push_down ul{margin: 0; padding: 0; list-style: none;}
.home_page .push_down ul a{text-decoration: none; font-size: var(--text-h1-size); font-weight: 500;}
.home_page .push_down ul a:hover{text-decoration: underline;}

.services,
.services a{color: var(--color-services);}
.brag,
.brag a{color: var(--color-brag);}
.contact,
.contact a{color: var(--color-contact);}



.page_nav ul li{border-radius: 30px;}
.page_nav ul li.clear{visibility: hidden;}
.page_nav ul li:hover{/*box-shadow: 16px 10px 30px #0000008f;*/ transform: scale(1.05);}
.page_nav ul li.on{background: #fff; color: #000;/*box-shadow: 16px 10px 30px #0000008f;*/}

.slider .slide{padding: var(--wrapper-height-padding) 0;}



/*============== ============== ============== 
================ OBJECTS
================ ============== ============== */
/* #welcome{
	background: var(--color-welcome);
    background-image: url(/_images/home/hero1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: hard-light;
    background-position: right;
} */
#welcome{
	background: var(--color-welcome);
    background-image: url(/_images/home/hero2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
/*     background-blend-mode: hard-light; */
    background-position: center;
}
@keyframes flicker_animation {
	0%,10%,50%,52%{background-color: var(--color-welcome);}
	1%,11%,51%,53%{background-color: transparent;}
}
@media (max-width: 500px){
	/* #herovideo{display: none;} */
}
@media (min-width: 500px){
	#welcome{background-image: none;}
}


#services{background: var(--color-services);}
#services .page_nav ul li.on{color: var(--color-services);}
#services_content{background: #EDEDED; color: #000;}

#brag{background: var(--color-brag);}

#contact{background: var(--color-contact);}



/*============== ============== ============== 
================ bubbles
================ ============== ============== */
.bubble_wrapper .bubble{background-image: url(/_images/home/logos.png); border: 5px solid #fff;}




/*============== ============== ============== 
================ FX BALL
================ ============== ============== */
@keyframes fx_ball_animation {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}

.fx_ball{
	--size: 750px;
	--speed: 10s;
	--easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
	
	transition: all 0.5s ease-out;
	
	position: absolute; z-index: 0;
	width: var(--size); height: var(--size);
	filter: blur(calc(var(--size) / 5));
	background-image: linear-gradient(#4377ef, #7befd0);
	animation: fx_ball_animation var(--speed) var(--easing) alternate infinite;
	border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}

@media (min-width: 720px){

	.fx_ball{
		--size: 1500px;
		left: 0%;
	}
	
}

/* phone */
@media (max-width: 720px){

	#header .logo:after{
		display: none;
	}
	
}