@import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,500,500i,600,600i,700,700i');


#home-services { background-color: #000; }

#header-home { position: fixed; top: 0; left: 0; width: 100%; z-index: 3; }
#header-home .custom-phone { border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-top: -10px; color: #fff; font-size: 1.2em; }
#header-home .custom-phone a { color: #fff; }
#header-home .custom-phone a:hover { text-decoration: none; }

.bgboxcomman { position: relative; overflow: hidden; height: 50vh;  width: 100%;  font-family: 'Poppins', sans-serif;  padding: 2rem;  }

.bgboxcomman.webdesign-digital-bg:after { background: url(../images/webdesign-digital-bg.jpg) no-repeat  }
.bgboxcomman.computer-store-bg:after { background: url(../images/computer-store-bg.jpg) no-repeat  }
.bgboxcomman.webhosting-bg:after { background: url(../images/webhosting-bg.jpg) no-repeat  }
.bgboxcomman.itsupport-bg:after { background: url(../images/itsupport-bg.jpg) no-repeat  }


.bgboxcomman:after { content: ' '; position:absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-size: cover !important; background-position: 50% 100%; -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; transform: scale(1.03); }

.bgboxcomman:hover:after { transform: scale(1.1);  -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; opacity: 0.6;  }

.content-box { min-width: 462px; max-width: 462px; height: 160px; position: relative; z-index: 2; }

.content-box h3 { color: #fff; font-size: 1.4em; text-transform: uppercase; min-height: 90px; font-weight: 400; padding-right: 20px; }

.redbg-trnsp { background-color: rgba(236,32,40,0.7); border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0; -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; 
}
.redbg-trnsp:hover { background-color: rgba(236,32,40,0.9); }

.bluebg-trnsp { background-color: rgba(17,118,188,0.7); border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0; -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; 
}
.bluebg-trnsp:hover { background-color: rgba(17,118,188,0.9);  }

.greenbg-trnsp { background-color: rgba(130,190,50,0.7); border-radius: 0 10px;
    -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; 
}
.greenbg-trnsp:hover { background-color: rgba(130,190,50,0.9); }

.orangebg-trnsp { background-color: rgba(255,69,0,0.7); border-radius: 10px 0;
    -webkit-transition: .4s; -moz-transition: .4s; transition: .4s; 
}
.orangebg-trnsp:hover { background-color: rgba(255,69,0,0.9); }



.home-support-links a { display: inline-block; margin: 15px 10px; }
.home-support-links img { max-width: 180px; }



.content-box a.morebtn { color: #fff;  padding: 15px 70px 15px 16px;  font-size: 1.1em; position: relative; width: 100%; display: block; }
.content-box a:hover { text-decoration: none; }
.content-box .icoshape { padding: 15px; width: 100%; height: 100%; text-align: center; display: block; position: relative; min-height: 145px; }
.content-box .icoshape img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.content-box a.morebtn:after { background: url(../images/arrow-3.png) no-repeat; content: ''; display: block; position: absolute; right:  20px; top: 12px; width: 37px; height: 38px; }


#home-footer { position: fixed; bottom: 0; left: 0; width: calc(50% + 500px); z-index: 2; }
#home-footer .socialfollow { color: #fff; width: auto; border-bottom: 1px solid #ccc; padding-bottom: 3px; text-align: right; font-size: 1.2em; }
#home-footer .socialfollow p { margin: 0; padding: 0; }
#home-footer .socialfollow a { font-size: 1.6em; color: #fff; margin: 0 8px 0 0;  }
#home-footer .socialfollow a:hover { color: rgba(17,118,188,1);}

#block-left-top .content-box a.morebtn::before,
#block-right-bottom .content-box a.morebtn::before{
   border-radius: 10px 0;
}
#block-right-top .content-box a.morebtn::before,
#block-left-bottom .content-box a.morebtn::before{
   border-radius: 0 10px;
}
.content-box a.morebtn::before {
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.5);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);   
}
#block-left-top:hover .content-box a.morebtn::before,
#block-right-top:hover .content-box a.morebtn::before,
#block-left-bottom:hover .content-box a.morebtn::before,
#block-right-bottom:hover .content-box a.morebtn::before
 {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}
#block-left-top .icoshape::after,
#block-right-bottom .icoshape::after{
   border-radius: 10px 0;
}
#block-right-top .icoshape::after,
#block-left-bottom .icoshape::after{
   border-radius: 0 10px;
}
.icoshape::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  -webkit-transform: scale(1.2,1.2);
  transform: scale(1.2,1.2);
}
#block-left-top:hover .icoshape::after,
#block-right-top:hover .icoshape::after,
#block-left-bottom:hover .icoshape::after,
#block-right-bottom:hover .icoshape::after
 {
  opacity: 1;
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
}

@media only screen and (max-width: 1366px) {
  .content-box h3 { color: #fff;  font-size: 1.4em; min-height: 83px; }
  .content-box a.morebtn { font-size: 1em; }
  .content-box a.morebtn:after { right: 14px; top: 9px; }
  .content-box { min-width: 408px; max-width: 408px; height: 145px;  }
  .bgboxcomman { padding: 2em; }
}

@media only screen and (max-width: 1200px) {
  .home-logo { width: 240px;  }
  #home-footer { width: 100%; }
}

@media only screen and (max-width: 767px) {
  .bgboxcomman { height: 32vh; }
  #home-footer .socialfollow { text-align: center; }
  #header-home, #home-footer { position: relative; background-color: rgba(0,0,0,0.8); padding: 10px !important; }
}


@media only screen and (max-width: 640px) {
  .home-logo { width: 200px;  }
  
  #home-footer .socialfollow { font-size: 1em; }
  #home-footer { width: 100%; }
  .bgboxcomman { height: 30vh; }
  .top-links { margin-top: 0; float: none; width: 290px; margin:0 auto; }
  .top-links .team_button span.tv-button { width: 113px; }
  .team_button { right: 132px; }
  .home-support-links img { max-width: 140px; }
  
}


@media only screen and (max-height: 560px) {
  .bgboxcomman { height: 65vh; }
  
}

@media only screen and (max-height: 357px) {
  .bgboxcomman { height: 80vh; }
  #header-home, #home-footer { position: relative; background-color: rgba(0,0,0,0.8); }
}

@media only screen and (max-width: 575px) {
  #header-home .custom-phone { font-size: 14px; }
  .home-logo {  width: 150px; }
  .content-box { min-width: 320px; max-width: 320px; height: 105px;  }
  .bgboxcomman { padding: 10px; }
  .content-box h3 { font-size: 120%; min-height: 53px; } .content-box a.morebtn { font-size: 90%; }
  .content-box .icoshape img { width: 67%; }
  .content-box a.morebtn {     padding: 10px 41px 8px 11px; }
  .content-box a.morebtn:after { width: 26px; background-size: cover; top: 7px; height: 26px; }
  body { min-width: 300px; }
  #home-footer .socialfollow a { font-size: 1em; }
  .home-support-links { text-align: center; }
  .content-box .icoshape { min-height: 116px; }
}

@media only screen and (max-width: 360px) {
.home-logo {  width: 108px; }
.content-box h3 { font-size: 100%; }
.bgboxcomman { height: 25vh; }
#header-home .custom-phone { font-size: 13px; margin-top: 0; }
.home-support-links img { max-width: 120px; }
.home-support-links a { margin: 15px 4px; }
}