@charset "UTF-8";
/* CSS Document */
.portfolioList figure.effect-steve p{}
body{ overflow-x: hidden;}
.object-center{}
.mblbner{} 
.dropkey video{}
.titleUx h2{} 
#home{}
.vdbanner video{}
.flex{}
.flex .marg{} .switch{}
.orderone{} 
.ordertwo{}

.titleUx h1{ }
	.titleUx h2{ }
	.titleUx h3{ }
	.titleUx h3 span{ }

@media screen and (min-width: 1025px) and (max-width: 1280px){

	body{ overflow-x: hidden;}
	.portwillow img{ margin-bottom: 4rem;}
	
	}

@media screen and (min-width: 769px) and (max-width: 1024px){
	.vdbanner video { left: 25px; top: 20px;}
	.titleUx h2{ font-size: 6rem;}
	p.descp{ min-height: 180px;}
	.titleUx h2{ font-size: 5rem;}
	.titleUx h4{ font-size: 2rem;}
	.willomore{ height: auto;}
	.portfolioList{ width:50%}
	.modalbody .me {left: 26px;}
	.portwillow{padding: 0px 4rem;}
	.modalbody .bal, .modalbody .me img, .modalbody .bal img{ display: none;}
	.flex{ display: flex; align-items: center;}
	.vdbanner video{top: 20px; left: 25px;}
	
	.dropkey video{top: -2px;left: 20px;}
	.flex{display: flex;align-items: baseline;}
	.flex .marg{ margin-right: 2rem;}
	.orderone{ order:1 !important} 
	.ordertwo{ order:2 !important}
	}
@media only screen and (min-width:480px) and (max-width: 768px)  {
	.titleUx h2{ font-size: 4rem;}
	.titleUx h4{ font-size: 2rem;}
	p.descp{ min-height: 60px;}
	body{ overflow-x: hidden;}
	.willomore{ height: auto;}
	figure.effect-steve h2{ font-size: 16px; }
	.portfolioList{  height:25%;}
	.modalbody .me {left: 38px;width: 44%;}
	.modalbody .bal{left: -30px;top: -40px;}
	.main{ margin-top: 20%; }
	.portwillow{padding: 0px  24px}
	.modalbody .me img, .modalbody .bal img{width: 70%; }
	.sendemail{ padding: 20px 20px 20px 35%; }
	.modalbody .me{ bottom: 0px; } 
	.vdbanner video{ position: absolute; width: 80%;left: 30px; top: 22px; border-radius: 20px;z-index: -1;}
	

	}

@media  screen and (min-width:320px) and (max-width: 479px)  {
	#home{ width:100%; height: 820px;}
	.titleUx h2{ font-size: 4rem;}
	body{ overflow-x: hidden;}
	figure.effect-steve:hover img {-webkit-transform: perspective(1000px) translate3d(0,0,50px);transform: perspective(1000px) translate3d(0,0,50px); box-shadow: 0 3px 30px rgba(0,0,0,0.8); z-index:10; }
	.portfolioList{  height:20%; }
	figure.effect-steve h2{margin-top: 1em; font-size: 16px;}
	.portfolioList figure figcaption{padding: 1em;}
	.portfolioList figure figcaption{ font-size: 16px; }
	.main h3{ font-size: 26px; }
	.main h4,.main h2{ font-size: 18px; }
	.btn-5{padding: 10px 0px;margin-top: 10px;}
	.main h4{ margin-bottom: 20px; }
	.main h1 > img.logo{ width: 100px; }
	.main h1 > img {padding: 0px;margin: 0px;position: absolute;left: 35%;top: -70px;}
	.main{ margin-top: 20% }
	.content{ padding: 10px 30px 30px; }
	.modalbody .me img{ display: none; }
	.sendemail{ padding: 10px; }
	.modalbody{ background-image: none; }
	.modalbody .bal{ top: -50px; z-index: 0; left: -15px;}
	.modalbody .bal img{width: 35%;}
	figure.effect-steve p{ opacity: 1; font-size: 14px; margin-top: 6em;background: rgb(255,255,255, 0.7); border-radius: 10px;}
	.willomore{height: auto;}
	.portfolioList figure.effect-steve p{margin-top: 15em;}
	.portwillow{padding: 0px 3rem; margin-bottom: ;}
	figure figcaption{  padding: 20% 20px 0px;}
	.mblbner{    width: 140px;}
	.mblbner video {position: absolute;width: 80%;left: 15px;top: 12px;border-radius: 16px}
	
    .dropkey video {width: 80%; border-radius: 3rem; top: 10px;left: 40px; }
	.vdbanner video{ position: absolute;width: 80%;left: 37px;top: 33px;border-radius: 20px; z-index: -1;}
	.object-center{ padding-top: 0px !important; width: 100%; margin-top: -6rem;}
	.titleUx h1{ font-size: 4rem;}
	.titleUx h2{ font-size: 2rem;}
	.titleUx h3{ font-size: 1.4rem; line-height: 2.5rem;}
	.titleUx h3 span{ font-size: 1rem; font-weight: bold; }
}