/* ================================================= */
/* ===============[ Home Categories ]=============== */
/* ================================================= */
.HomeCats { background: #000; max-width: 1920px; margin-left: auto; margin-right: auto; position:relative;}
.HomeCat__section { display: block; float: left; width: 33.333%; height: 1000px; height: 100vh; max-height: 1000px; color: #fff; text-align: center; position: relative; text-decoration: none; background: #000 center top no-repeat; overflow: hidden;  }
/*.HomeCat__section--logo { background-image: url(/Content/images/CreativeLogoDesign.jpg); }
.HomeCat__section--radio { background-image: url(/Content/images/CreativeRadioAds.jpg); }
.HomeCat__section--print { background-image: url(/Content/images/CreativePrintMedia.jpg); }*/
.HomeCat__pos { display: block; z-index:3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 370px; transition: all 700ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -webkit-transition: all 700ms cubic-bezier(0.680, -0.550, 0.265, 1.550); }
/*.HomeCat__section:hover .HomeCat__pos { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }*/
.HomeCat__icon { display: block; margin: 0 auto; width: 308px; height: 308px; -webkit-transition: all .5s ease;transition: all .5s ease;}
.HomeCat__heading { display: block; text-transform: uppercase; font-family: "Caviar Dreams"; font-weight: bold; font-size: 28px; padding-top: .8em; -webkit-transition: all .5s ease;transition: all .5s ease;}
.HomeCat__section:hover .HomeCat__icon { opacity:0; -webkit-transition: all .5s ease;transition: all .5s ease;}
.HomeCat__section:hover .HomeCat__heading { -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); }
.HomeCat__section:hover .panelTransOverlay { opacity:0; }



.panelVid { position:absolute; height:auto;  left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);}
.panelVid2 { position:absolute; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);}

.panelTransOverlay { background:url(/Content/images/smSquareRepeat.png) repeat rgba(0, 0, 0, 0.6); position:absolute; z-index:2; width:100%; height:100%; display:block;-webkit-transition: all .5s ease;transition: all .5s ease;}
.HomeCat__section:hover .panelTransOverlay { background:rgba(0, 0, 0, 0.2); }

.panelVidImg { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);}


#brandingPanel { width:100%; height:200px; clear:both; position:absolute; bottom:-200px; overflow:hidden;}
#brandingPanel a {display:block; position:absolute; left:0; top:0; width:100%; height:100%;z-index:2;}

#brandingPanel img.brandingPanelVidImg {position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);}
#brandingPanel img.creativeGeniusBrandingTitle { display:block; z-index:2; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); max-width:80%; -webkit-transition: all .3s ease;transition: all .3s ease;}

#brandingPanel:hover img.creativeGeniusBrandingTitle {transform: translate(-50%, -50%) scale(0.95); -webkit-transform: translate(-50%, -50%) scale(0.95); -ms-transform: translate(-50%, -50%) scale(0.95);}
#brandingPanel:hover .panelTransOverlay { opacity:0; }

/*----------------------------------------------*/

h2 img {
    display:block;
    max-width:100%;
    height: auto;
}

#rightWayDiv p {
    display:block;
    float:left;
}

#rightWayDiv #homeUL {
    display:block;
    float:left;
    width:calc(100% - 334px);
    position:absolute; 
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    right:0;
}

#rightWayDiv #homeUL li {
    width:calc((100% - 140px) / 7);
    height:auto;
    line-height:1;
    padding:15px 5px;
}



@media only screen and (max-width:1400px) {
	.HomeCat__icon { width: 250px; height: 250px; }
	.HomeCat__heading { font-size: 24px; }
	.HomeCat__pos { height: 300px; }
}
@media only screen and (max-width:1200px) {
    #inetTopPara {width:100%; margin-top:15px;}
    #rightWayDiv #homeUL {position:relative; width:100%; top:auto; margin-top:30px; transform:none; -webkit-transform:none; -ms-transform:none; margin-left:0; padding-left:0;}
}

@media only screen and (max-width:1000px) {
	.HomeCat__icon { width: 175px; height: 175px; }
	.HomeCat__heading { font-size: 16px; }
	.HomeCat__pos { height: 240px; }
	.HomeCat__section {max-height: 700px;}
    .gif-bu {height:100%; width:100%;}
     .HomeCat__section:hover .panelVidImg, .HomeCat__section:active .panelVidImg  {opacity:0 !important;}
     .HomeCat__section:hover .panelTransOverlay, .HomeCat__section:active .panelTransOverlay  { background:rgba(0, 0, 0, 0.6); }
     .HomeCat__section:hover .HomeCat__heading, .HomeCat__section:active .HomeCat__heading { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
     #brandingPanel {height:150px; bottom:-150px;}
     .Home .main {margin-top:150px;}

}
@media only screen and (max-width:800px) {
    #rightWayDiv #homeUL li {width:calc((100% - 80px) / 4); margin-bottom:20px;}
}
@media only screen and (max-width:640px) {
	.HomeCat__section {width: 100%;float: none;height: 33.333vh;background-size: cover;min-height: 100px;max-height: 100px;}
	.HomeCat__section--radio, .HomeCat__section--print { background-position: center; }
	.HomeCat__icon { width: 60px; height: 60px; }
	.HomeCat__heading { font-size: 16px; }
	.HomeCat__pos { height: 90px; }
    #rightWayDiv #homeUL li {width:calc((100% - 40px) / 2); max-width:150px;}
    #rightWayDiv {margin-bottom:0;}
    .gif-bu {width:100%; height:100%;}

    .HomeCat__section:hover .panelVidImg, .HomeCat__section:active .panelVidImg{opacity:0 !important;}

    .HomeCats {margin-top:62px;}
    #brandingPanel {height:100px; bottom:-100px;}
    .Home .main {margin-top:100px;}
    
}
@media only screen and (max-width:480px) {
	.HomeCat__section--logo .HomeCat__pos {  }
	.HomeCat__section--logo .HomeCat__icon { height: 55px; }
    .panelVidImg {width:150%; height:auto;}
}





/* ================================================= */
/* ============[ New 4 panel addition ]============= */
/* ================================================= */

body.Home h1{font-size:2.5em;text-align:center;}

.unUnderline{color:#000; text-decoration:underline;}

/*homePanel - homepage content area*/
.homePanel__Contain{
  display:block;
  width:100%;max-width:100%;overflow:hidden;
}
.homePanel{
  display:block;
  position:relative;
  max-width:100%;
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
  float:left; padding-bottom:2px;
  padding-left: 1%; padding-right:1%;
  background:url(/Content/images/smSquareRepeat.png) repeat #101010;
}
.homePanel__Left{
  display:block;
  width:55%;
  padding:0 1%;
  float:left;
  height:100%;
  position:relative;z-index:2;
}

.homePanel__Right{
  width:45%;
  padding:0 2% 20px;
  float:right;
  height:100%;
  position:relative;
  -webkit-box-align:stretch;
      -ms-flex-align:stretch;
          align-items:stretch;z-index:2;
}
.homePanel__Right h3{
  font-size:2.75em;display:block;
  letter-spacing: -1px;
  margin-bottom:10px;
}
.homePanel__Right p{
  color:#fff;width:100%;font-size:1.2em;
}


/*Big white letters on left of homepage content area. With media queries*/
.homePanel__Left h2{
  font-size:7vw;
  line-height:.8em;
  margin: 40px auto;
  color:#fefefe;
  letter-spacing:-3px;
  font-weight:bold;
  text-shadow:0 0 5px #000,0 0 8px #000;
}
@media screen and (max-width:1300px){.homePanel__Left h2{font-size:8.25vw;}}
@media screen and (max-width:1000px){.homePanel__Left h2{font-size:13.5vw;}.homePanel__Right h3{font-size:2em;}}
@media screen and (max-width:400px){.homePanel__Left h2{font-size:14.75vw;}.homePanel__Right h3{font-size:1.5em;}}

/*used for iNET IS*/
.homePanel__Left .headline--altColor{
  text-shadow: 
     1px  1px #fefefe,
    -1px -1px #fefefe,
    -1px  1px #fefefe,
     1px -1px #fefefe,
     0 0 10px #000;
  color:#050505;  
}


/*CTA Button in homePanel*/
.homePanel__Button{
  display:block;
  text-align:center;
}
.homePanel__Button a{
  display:inline-block;
  padding:15px 35px;
  color:#fff!important;
  background-color:#ff9100;
  text-decoration:none;
  font-weight:bold;
  font-size:20px;
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.homePanel__Button a:hover{
  background: #0086c2;
}

/*Alternating color scheme for every other homePanel*/
.homePanel:nth-child(2n) .homePanel__Right h3{
    text-shadow:
    0 0 10px #1f1f1f;
}

.homePanel:nth-child(2n){
   background:url(/Content/images/smSquareRepeat.png) repeat #404040;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(49,49,49,.47);
          box-shadow: inset 0 0 0 1000px rgba(49,49,49,.47);
}
.homePanel:nth-child(2n) .homePanel__Left .headline--altColor{
  text-shadow: 
     1px  1px #fefefe,
    -1px -1px #fefefe,
    -1px  1px #fefefe,
     1px -1px #fefefe,
     0 0 10px #111;
}
.homePanel:nth-child(2n) .homePanel__Left h2{
  text-shadow:0 0 5px #111, 0 0 8px #111;
}

@media screen and (max-width:1000px){
.homePanel__Left,.homePanel__Right{width:100%}
  .homePanel__Left h2{margin-bottom:5px}
  .homePanel__Right h3{margin-top:5px}
  .homePanel{display:block;}
}

/*Both color variations of homePanel have a shared color scheme for their hoverstate*/
.homePanel,.homePanel__Right h3, .homePanel__Left h2, .homePanel:before, .homePanel:after{
  -webkit-transition: 1.5s ease-in-out;
  -o-transition: 1.5s ease-in-out;
  transition: 1.5s ease-in-out;

}
.homePanel:hover, .homePanel:hover .homePanel__Right h3, .homePanel:hover .homePanel__Left h2,
.homePanel:hover .homePanel:before, .homePanel:hover .homePanel:after{
  -webkit-transition: 3s ease-in-out;
  -o-transition: 3s ease-in-out;
  transition: 3s ease-in-out;
}
.homePanel:hover{
  background-color:#044A67!important;
  -webkit-box-shadow:inset 0 0 0 1000px rgba(0,0,0,0)!important;
          box-shadow:inset 0 0 0 1000px rgba(0,0,0,0)!important;
}
.homePanel:hover .homePanel__Right h3{
  color:#4Fb6E2;
}
.homePanel:hover .homePanel__Right h3{
    text-shadow:0 0 10px #1f1f1f;
}
.homePanel:hover .homePanel__Left h2,
.homePanel:nth-child(2n):hover .homePanel__Left h2{
  text-shadow:0 0 5px #03374C, 0 0 8px #03374C;
}

.homePanel:hover .homePanel__Left h2 .headline--altColor{
  text-shadow: 
     1px  1px #fefefe,
    -1px -1px #fefefe,
    -1px  1px #fefefe,
     1px -1px #fefefe,
     0 0 10px #03374C;
  color:#050505;
}

/*Blue paint splatters on homePanel. Disappears on hover*/
.homePanel:before, .homePanel:after{
  content: "";z-index:1;
  position:absolute;
  display: inline-block;
  max-width:100%;

}
.homePanel:nth-child(1):before{
  background:url(/Content/files/splatter-top-left.png) top left no-repeat;width:400px;height:400px;position:absolute;top:-10px;left:0px;
}

.homePanel:nth-child(1):after{
  background:url(/Content/files/splatter-lower-right.png) bottom left no-repeat;width:400px;height:400px;position:absolute;bottom:-20px;right:0px;
}
.homePanel:nth-child(2):before{
  background:url(/Content/files/splatter-lower-left-2.png) top left no-repeat;width:478px;height:472px;position:absolute;bottom:-10px;left:0px;
}

.homePanel:nth-child(3):before{
  background:url(/Content/files/splatter-upper-left-3.png) top left no-repeat;width:409px;height:432px;position:absolute;top:-20px;left:0px;
}

.homePanel:nth-child(3):after{
  background:url(/Content/files/splatter-lower-right-3.png) top left no-repeat;width:609px;height:519px;position:absolute;bottom:-40px;right:0px;
}

.homePanel:nth-child(4):before{
  background:url(/Content/files/splatter-bottom-middle-4.png) bottom right no-repeat;width:824px;height:210px;position:absolute;bottom:-30px;
}

.homePanel:nth-child(5):before{
  background:url(/Content/files/splatter-lower-left-5.png) bottom right no-repeat;width:767px;height:548px;position:absolute;bottom:-60px;left:0;
}

.homePanel:nth-child(6):after{
  background:url(/Content/files/splatter-lower-right.png) bottom left no-repeat;width:400px;height:400px;position:absolute;bottom:0px;left:0px;
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    -webkit-filter: FlipV;
    filter: FlipV;
    -ms-filter: "FlipV";
}

.homePanel:nth-child(7):before{
  background:url(/Content/files/splatter-upper-left-3.png) top left no-repeat;width:409px;height:432px;position:absolute;bottom:-20px;left:0px;
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
        transform: scaleY(-1);
    -webkit-filter: FlipV;
            filter: FlipV;
    -ms-filter: "FlipV";
}

.homePanel:hover:before, .homePanel:hover:after{
  opacity:0;
}


/*not done- needs more embellishment. Testimonial area at bottom with big quote marks.*/
.testimonial__Contain{
  display:block; float:left;
  color:#aaa;
  padding:calc(250px - 2%) 20%;
  height:10px;
  margin: 0 auto;
}
.testimonial__Text{
  width:50%;float:left;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height:100%;
}
.testimonial__Text p:before{
    position: absolute;
    font-size: 5em;
    line-height: 1;
    top: -30px;
    left: -60px;
    content: "\201C";
}
.testimonial__Text p:after{
  position: absolute;
    float:right;
    font-size:5em;
    line-height: 1;
    right:-30px;
    bottom:-90px;
    content: "\201D";
}
.testimonial__Text p{
  color:#aaa;
  font-size:1.75em;
  line-height:1em;
  font-style:italic;
  margin:0 auto;
  position:relative;
}
@media screen and (max-width:400px){
    .testimonial__Text p:before, .testimonial__Text p:after{font-size:3em}
    .testimonial__Text p:before{left:-25px;top:-10px;}
    .testimonial__Text p:after{right:15px;bottom:-35px;}
    .testimonial__Text p{font-size:1.2em}
}
.testimonial__Name{
  width:50%; float:right;
  font-size:1.3em;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height:100%;
}
.testimonial__Name span{
  text-align:center;
  position: absolute;
}
@media screen and (max-width:1000px){
  .testimonial__Name, .testimonial__Text{
    width:100%;display:block;float:left;}
  .testimonial__Contain{height:auto;width:100%;padding:70px;}
  .testimonial__Text{}
  .testimonial__Name{height:60px;}
  .testimonial__Name span{padding-top:40px;text-align:left;}
}
@media screen and (max-width:500px){ 
  .testimonial__Text{padding:45px;width:calc(100% - 20px)}
  .testimonial__Contain{padding-left:0;padding-right:0}
  .testimonial__Name{padding: 0 20px 20px;}
}