@charset "UTF-8";
/* CSS Document */

.top_header {background: url(../img/slider/BannerBigTitle_handy.png) center bottom no-repeat; margin-top: 100px !important; width: 100%; height: 320px !important;}
@media screen and (max-width:920px)  {
.top_header {background: url(../img/slider/BannerBigTitle2_handy.png) center bottom, #ffffff; margin-top: 100PX !important; height: auto; padding-bottom: calc(100% / 1.75); background-size: cover;}
}
@media screen and (min-width:1921px)  {
section#packages .iwrap {width: 1400px !important; left: calc(50% - 700px) !important;}
}
.handy {margin-top: 80px;}

#videoBOX {
box-sizing: border-box; display: block; position: relative; width: 720px; height: 405px; background: none; border-radius: 20px; overflow: hidden; 
}
#videoBOX video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media screen and (max-width:960px)  {
#videoBOX { width: 100% !important; padding-bottom: 56.25%;height: auto !important;}
}
@media screen and (max-width:640px)  {
#videoBOX { border-radius: 0;}
}
    

#handyServicesContainer {box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; position: relative; width: 960px; margin: 50px 0 !important; height: auto; min-height: 400px; left: calc(50% - 480px); padding: 0; background: none;}
.serviceBOX { box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 400px; background: #f9f9f9; float: left; margin: 10px;  border-radius: 20px; overflow: hidden;}

.serCONTENT {box-sizing:border-box; width:300px; height:400px; top: 0; background: none; position: absolute; text-align: center !important; padding-top: 250px; z-index: 1;}

.videoBG {
position: absolute;
top: 0 !important;
margin-top: 0 !important;   
left: 0;
width: 100%;
height: 100%;
z-index:0 !important;
}

@media screen and (max-width:1200px)  {
#handyServicesContainer {width: 640px !important; left: calc(50% - 320px)!important;}
}    

@media screen and (max-width:800px)  {
#handyServicesContainer {width: 300px !important; left: calc(50% - 150px)!important;}
.serviceBOX {margin: 10px 0;}  
}


.lastBOX {
    box-sizing:border-box; display: block; width: 100%; height: 80px; background: none; margin: 10px 0 0 0; justify-content: center; align-items: center; padding: 20px 0;
}

#happyHandy {display: block; width: 100%; margin-top: 200px; background: url(../img/handywork.png) center no-repeat, lime; height: 600px; background-size: contain;}
@media screen and (max-width:640px)  {
    #happyHandy {display: block; width: 100%; margin-top: 200px; background: url(../img/handywork.png) right no-repeat; height: 600px;}
}

#EL {background: url(../video/electrical00.png);}
#PL {background: url(../video/plumbing00.png);}
#PA {background: url(../video/painting00.png);}
#CA {background: url(../video/carpentry00.png);}
#AC {background: url(../video/air-cond00.png);}
#CL {background: url(../video/cleaning00.png);}