@charset "UTF-8";
/*!
* 9o9 Brand Technologies
* Copyright 2011-2026 9o9 Brand Technologies
*/

 
.hideondesktop{
    display: none;
}

.note{
	font-size: .9em;
}

a{
	text-decoration: none;
}

a:hover{
	color: #30c0cf
}


h2{
    font-family: Urbanist, "sans-serif";
    text-transform: uppercase;
    margin-top: 30px;
    font-size: 3em;
    line-height: 35px;
}

h2 span{
    font-size:.5em;
}

h3{
	text-transform: uppercase;
	font-size: 2em;
}

html{
    width: 100vw;
    height: 100vh;
}
 
body{
    width: 100%;
    margin: 0px;
    padding: 0;
    overflow-x: hidden;
    font-family: "Urbanist", "Sans-serif";
    background:url('/assets/images/hero1bg.webp') no-repeat 0px 0px / 100% 1000px;
}

main{
    width: 100%;
	margin-bottom: 0px !important;
}

.main-container{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 0px;
	width:100%;
}
	
header{
     height: 100px;
     width: 100%;
     margin: 0px;
     padding: 0;
}

header #logo{
	background:url('/assets/images/logo-blue.webp') no-repeat 0px 20px / 150px 50px;
}

nav{
	text-align: center;
	padding-top: 16px;
	text-transform: uppercase;
	background: transparent;
}
nav img{
	width: 24px;
	height: 24px;
	padding-right: 5px;
	padding-bottom:5px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

nav ul li {
   float: right;
   font-size: 1.1em;
   padding: 10px 20px;
}

nav ul li a {
	display: block;
    color: #002;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
}
nav ul li:first-child{
	border-left: 1px solid #f1f1f1;	
}

nav ul li a:hover {
    color: #30c0cf;
}

#hero{
	height: 517px;
	color: #002;
}

#hero h1{
	font-size: 2em;
	text-transform: uppercase;
	margin-top: 64px;
	line-height: 60px;
}

#hero h1 span{
    font-size: 5.5rem;
    font-weight: bold;
    /* Gradient background */
    background: linear-gradient(180deg, #6655bb, #2c75cd);
    /* Clip background to text */
    -webkit-background-clip: text;
    background-clip: text;
    /* Make text transparent so gradient shows */
    color: transparent;
    /* Optional: smooth edges for better rendering */
    -webkit-text-fill-color: transparent;
}

#webad{
	width: 100%;
	height: 427px;
	background: url('/assets/images/websites.webp') no-repeat 81% 95% / 558px 275px,
	            url('/assets/images/9o9Icon-white.webp') no-repeat 99% 1% / 250px 250px,
	            url('/assets/images/gradientbg.webp') no-repeat 0% 0% / 100% 100%;        
}
#webad #imagebox{
	background: url('/assets/images/woman.webp') no-repeat 100% 100% / 337px 427px,
	            url('/assets/images/halfcircle.webp') no-repeat 0% 0% / 100% 99%;	
}

#webad h2{
	font-size: 3.5em;
	color: #fff;
	line-height: 48px;
	margin-top: 64px;
	margin-left: 64px;
}

#webad h2 span{
	font-size: .4em;
	color: #fff;
}
#webad p{
	font-size: 1.6em;
	color: #f7f318;
	margin-bottom: 32px;
	margin-left: 65px;
}
#webad button{
	margin-left: 64px;
}

#domainad{
	height: 820px;
	background: #fff;
    padding-bottom: 20px;
}

#domainad a{
	color: #002;
}

#domainad h2{
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	color: #002;
}

#domainad h3{
	text-align:center;
}

#domainad #imgheader{
	height: 60px;
	margin-bottom: 50px;
	margin-top: 30px;
}

#tld1{
	 Background: url('/assets/images/TLDcom.webp') no-repeat 50% 50% / 109px 50px;
}

#tld2{
	 Background: url('/assets/images/TLDonline.webp') no-repeat 50% 50% / 109px 50px;
}

#tld3{
	 Background: url('/assets/images/TLDshop.webp') no-repeat 50% 50% / 115px 50px;
}

#tld4{
	 Background: url('/assets/images/TLDstore.webp') no-repeat 50% 50% / 114px 32px;
}

#tld5{
	 Background: url('/assets/images/TLDcloud.webp') no-repeat 50% 50% / 114px 40px;
}

#domainad .tldbox{
	height: 140px;
	margin-bottom: 15px;
	text-align:center;
}

#domainad .tldbox ul{
	  list-style-type: none;
	  text-transform: uppercase;
	  font-size: 1.3em;
	  margin: 0px;
	  padding: 0px;
}

#domainad .tldbox a{
	text-decoration: none;
}


#ctanewsletter{
	height: 280px;
	background: url('/assets/images/gradientbg.webp') no-repeat 0% 0% / 100% 100%;
	color: #fff;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 20px;
}


#blog{
	height: 940px;
	background: #fff;
}
#blog h2{
	text-align: center;
	margin-top: 30px;
	margin-bottom: 40px;
}
#blog img{
	width: 482px;
	height: 412px;
	margin-left: auto;
	margin-right: auto;
}

#blog .author{
	width: 90%;
	height:10px;
	padding-top: 5px;
	padding-left:10px;
	float:left;
	font-size:.9em;
}
#blog .title{
	width: 90%;
	height: 15px;
	font-family: "Urbanist", Sans-serif;
	font-weight: 500;
	font-size: 1.1em;
	padding-left: 10px;
	float: left;
	margin-top: 25px;
}

#blog .excerpt{
	width:90%;
	float: left;
	padding-left: 10px;
	font-size: 1.1em;
	font-family: "Urbanist", Sans-serif;
	margin-top: 40px;
	
}

#blog button{
	margin-left: 10px;
	margin-top:10px;
	margin-bottom: 50px;
	
}

#hlinks{
	height: 300px;
	background: #f9f9f9;
	color: #002;
	text-align: center;
}

#hlink a{
	color: #002;
}

#hlinks h2{
	margin-bottom: 30px;
}

#hlinks ul{
	list-style-type: none;
	columns: 3; /* Number of columns */
    column-gap: 0px; /* Space between columns */
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-top: 10px;
}

footer{
	height: 480px;
	background: #f1f1f1 /*#b8c1d4*/;
	padding-top: 20px;
	width: 100%;
}

footer a{
	text-decoration:none;
}

footer a:hover{
	color: #30c0cf	
}

footer #logo{
	background:url('/assets/images/logo-blue.webp') no-repeat 50% 20px / 150px 50px;	
}

footer #solutions ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
}

footer #company ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
}

footer #connect ul{
	list-style-type: none;
    margin: 0;
    padding: 0;	
}

footer #conntect ul li{
	margin-bottom:5px;
}

footer #connect img{
	margin-right: 5px;
}

footer #contactinfo ul{
	list-style-type: none;
    margin: 0;
    padding: 0;
}

footer #contactinfo img{
	width: 16px;
	height: 16px;
	margin-right: 5px;
}

footer #contactinfo span{
	margin-left: 25px;
}

footer #reseller{
	height: 90px;
    padding-top: 20px;
    padding-bottom:20px;
	text-align: center;
	font-size:.9em;
	line-height: 0px;
}

footer #copyright{
	width: 100%;
	padding-top: 10px;
	background: #1c57bb;
	color: #fff;
	font-size: .9em;
	text-align: center;
	/*margin-top: 50px;*/
}

footer #copyright a{
	color: #fff;
}




/**** VIDEO CSS ***/
.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 637px;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}

.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


/*** FORM CSS ***/
input[type='submit']{
	width: 47px;
	height: 47px;
	background: url('/assets/images/icon-search.webp') no-repeat 50% 50% / 24px 24px, #002;
	border: 1px solid #002;
	margin-left: 0px;
	padding-left: 0px;
}
#search-results{
	height: 100px;
	width: 55%;
	margin-top: 30px;
	text-align: center;
}

#search-results p{
	margin-bottom:20px;
}

input[type='text']{
	width: 55%;
	height: 47px;
	border-left: 1px solid #f1f1f1;
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
	border-right:1px solid #002;
	margin-right: 0px;
	padding-right: 0px;
	border-radius: 0px;
}

button{
	min-width:100px;
	padding: 10px 20px;
	background: #ffb900;
	border: 1px solid #ffb900;
	color: #fff;
}
button a{
	text-decoration: none;
	color: #fff;
}

button:hover{
	background: #30c0cf;
	border: 1px solid #30c0cf;
	color: #fff;
}