
  
  
   
     .desktopBanner {display: block; }
    .tabletBanner {display: none;}
    .mobileBanner {display: none;}
    
    @media screen and (max-width: 912px) {
    .desktopBanner {display: none;}
    .tabletBanner {display: block;}
    .mobileBanner {display: none;} 
      }
    
      @media screen and (max-width: 501px) {
    .desktopBanner {display: none;}
    .tabletBanner {display: none;}
    .mobileBanner {display: block;}
        }
    
        @media screen and (max-width: 285px) {
    .desktopBanner {display: none;}
    .tabletBanner {display: none;}
    .mobileBanner {display: block;}
        
       }
  
  
  
  .equipDisclaimer { position: absolute; left: 26%; bottom: 4px; font-size: 14px; font-style:italic;}
  
     .bttn,
  .bttn:visited {
	display: inline-block;
	color: #fff;
	font-size: 17px;
	text-decoration: none;
	outline: none;
	border-radius: 30px;
	padding: 12px 45px;
	cursor: pointer;
	transition:background-color 1s, color 1s;
	}
  
  
  p.intro {
    margin-top: 40px;
    max-width: 100%;
    color: #0066ad;
    font-size: 24px;
    line-height: 33px;
    margin-bottom: 35px;
    font-weight: 500;
}
  
   .inBoundLink {
                 margin-bottom: 100px;
                 margin-top:30px;
             }
  
  
  
  p.descrip {line-height: 1.2em; font-size: 14px;}
  
  .FOCUSltTeal {
    color: #16a1af;
}
  
  
  #ip-packages article h4+p {
    font-size: 14px;
    line-height: 21px;
    min-height: 0; 
}
  
   #ip-packages article ul.standard {

    text-align: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 0 0 0 45px;
}

  
  
 #ip-packages article ul.standard li {
 padding: 0 0 0 5px;
   line-height: 1.25;
	 margin: 8px 0;
}

  
  
  
 #ip-packages article ul.additions {

    text-align: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 0 0 0 35px;
}

  
  
 #ip-packages article ul.additions li {
 padding: 0 0 0 5px;
   line-height: 1.25;
	 margin: 8px 0;
}

 #ip-packages article ul.additions li::marker {
  content: "\f067"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  font-size: 11px;
	font-weight: 100;
   color: black;
}
  
  .subHeadP {margin: 0 20px; font-weight: 700;}
  
  
  #ip-packages article {
    min-height: 450px;
    
}
  
  .button1 { 
    padding: 0.6em 1.2em;
    border-radius: 0.375em;
    cursor: pointer;
    color: white;
    background: linear-gradient(120deg, #1b4fa2, #1692c5, #4fc9cc);
    background-size: 180% 100%;
    background-position: 100% 0%;
    transition: background-position .5s;
    border: 0;
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
    color: white;
    padding: 9px 18px;
    border-radius: 10px;
    transition: .3s;
    width: 150px;
    position: absolute;
    left: 29%;
    bottom:48px;
}
  .button1:hover {
 background-position: 0 0;
	color: white;
	cursor: pointer;
  }
  

 @media screen and (max-width: 990px) {
    .button1 { 
    bottom:90px;
}
   
}}
 @media screen and (max-width: 590px) {
  .button1 {
    left: 28%;
   
  }}
  
  
    .button1 a, .button1:hover a {
 background-position: 0 0;
	color: white;
	cursor: pointer;
  }
  
.wrap{width:100%;}
  
.gradient-text{
  font-family:"Abril Fatface", sans-serif;
  background: linear-gradient(to right, crimson,pink,springgreen);
  background-size: 200% 200%;
  animation: rainbow 2s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip:text;
  color:rgba(0,0,0,1);
  font-size:1rem;
  width:2vw;
  margin:2vh auto;
  display:block;
  text-align:center;
  transition: color .2s ease-in-out;
  text-transform:uppercase;
  font-weight:900;
}
  
  
.gradient-text {
color: #007cd2; background-image: -webkit-linear-gradient(45deg, #007cd2 24%, #288ba1 54%, #28a0a0 80%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-size: 29px;
font-weight: bold;
line-height:48px;

font-family: "Segoe UI",Arial,sans-serif;
    width:auto;
  margin:auto;
  text-align: left;
}
  
.gradient-text:hover{
  color:rgba(0,0,0,0);
}
  
  @media screen and (min-width: 668px) {

  

.gradient-text {
color: #007cd2; background-image: -webkit-linear-gradient(45deg, #007cd2 24%, #288ba1 54%, #28a0a0 80%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-size: 29px;
font-weight: bold;
line-height:48px;

font-family: "Segoe UI",Arial,sans-serif;
    width:auto;
  margin:auto;margin-top: 85px;
  text-align: left;
}
 

}
  
  
@keyframes rainbow { 
  0%{background-position:left}
  50%{background-position:right}
  100%{background-position:left}
}
  
  
  h1.learn {
  font-size: 26px;
	font-weight: 900;
  background: -webkit-linear-gradient(#43b5b8, #0251a7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	padding: 5px 15px;
	border-radius: 30px;
	
   background: -webkit-linear-gradient(left, red , yellow);
   background: -o-linear-gradient(right, red, yellow);
   background: -moz-linear-gradient(right, red, yellow);
   background: linear-gradient(to right, red , yellow); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	
}
   h1.learn:hover {
	  font-size: 26px;
	font-weight: 900;
  background: -webkit-linear-gradient(#43b5b8, #0251a7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
	 border: 1px solid rgba(000, 000, 000, .2);
	box-shadow: 2px 2px 5px white;
	 background-position: right;
}
  
  h1.learn:hover::after {
    transition: opacity 0.4s ease;
    opacity: 0;
}
  
  .pink-banner a {color: white;}
  
  .pink-banner {
	height: 40px;
	width: 75%;
	position: absolute;
	left: 0;
	background-image: linear-gradient(to right, #CC66CD, #50008E);
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 16px;
	z-index: 1;
	font-weight: 600;
	font-style: italic;
	line-height:1em;
	padding-right:10px;
	bottom: 105px;
  }
  .pink-triangle {
	width: 0;
	height: 0;
	border-top: 8px solid #50008E;
	border-left: 8px solid transparent;
	position: absolute;
	bottom: -8px;
	left: 0;
  }

  .purple-triangle-top {
	width: 0;
	height: 0;
	border-top: 22px solid #50008E;
	border-right: 12px solid transparent;
	position: absolute;
	top: 0;
	right: -11px;
  }
  .purple-triangle-btm {
	width: 0;
	height: 0;
	border-bottom: 22px solid #50008E;
	border-right: 12px solid transparent;
	position: absolute;
	bottom: 0;
	right: -11px;
  }


  #banner-business img {
	max-width: 300px;
	margin-bottom: 20px;
	margin-top: 70px;
  }

  #toggle-home-automation-hub {
	border-top: solid 1px #bbb;
  }
  #addons-wrap h4 {
	font-size:18px;
  }
  .ip-inner {
	min-height:355px;
	
  }
  
  .ip-inner {
    padding: 10px 15px 15px 5px;
}
  @media screen and (max-width: 990px) {
	.ip-inner {
	  min-height:315px;
	}
	.pink-banner {
	  bottom:40px !important;
	}
  }
 

  }
  @media screen and (max-width: 575px) {
	.ip-inner {
	  min-height:100px;
	}
	
	.ip-innerHS {
	  min-height:250px;
	}
  }

  #security-services a {
	display:inline-block;
	margin:8px 0;
  }
  #security-services a img {
	display:inline-block;
	height:47px;
  }
  @media screen and (max-width: 767px) {
	#security-services a {
	  display:block;
	  text-align:center
		margin:10px auto;
	}
	#security-services a img {
	  display:block;
	  height:47px;
	  margin:auto;
	}
	.pink-banner {
	  bottom:105px
	}
  }
