@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');
body, p, h1, h2, h3, h4, h5, h6, b{ font-family: "Quicksand", sans-serif !important; transition: all 1s ease;  } 
*{
	--gold: #efd36a;
}

.logo img { height: 38px; max-width:200% } 

body.light nav a { color: #444 !important }


/* UTILITIES */
.left { float:left; }
.right { float:right; }

.ta-left { text-align: left }
.ta-center{ text-align:center }
.ta-right { text-align:right }
.ta-justified { text-align:justify }

.tw-thin { font-weight: 300; }
.tw-regular { font-weight: normal; }
.tw-bold { font-weight: 700; }

.flex { display:flex; justify-content:space-evenly }
.fa-center { align-items: center }
.fx-center { justify-content: center }
.fx-column { flex-direction: column; }
.fx-between { justify-content: space-between; }
.fx-grow { flex-grow: 1 }
.grid2 { display:grid !important; grid-template-columns: 50% 50%; grid-gap: 2em; }
.grid3 { display:grid !important; grid-template-columns: 33% 33% 33%; grid-gap: 2em; }
.grid4 { display:grid !important; grid-template-columns: 25% 25% 25% 25%; grid-gap: 2em; }
 

/* LAYOUT */
body{
	background-size:cover;
	background-position:center;
	
}
.page-wrapper{  backdrop-filter:blur(250px); transition:all 5s ease; transition-delay: 4s; } 

.light h1, .light h2, .light h3{ color:#444444 !important }
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5{ color:#fafafa !important; }
body.dark b, body.dark p, body.dark .details-page-service-list li { color:#cacaca!important; }
body.dark .section-title p{ color:white; font-size:1.25em; } 
.banner-section{ background-color: transparent }
div.fine{ line-height:1.1em !important; margin:16px; font-size:smaller; padding:16px; }

progress::-moz-progress-bar{ background-color: #f0d679; box-shadow:0 0 25px #f0d679; }
progress::-webkit-progress-bar {background-color: #44444488; width: 100%;}
progress::-webkit-progress-value{ background-color: #f0d679; box-shadow:0 0 25px #f0d679; } 
progress::-moz-progress-bar{ box-shadow:0 0 15px #f0d679; }
progress::-webkit-progress-value{ box-shadow:0 0 15px #f0d679; } 
progress { width:100%; height:4px; background-color:#44444488; color:#f0d679; accent-color#f0d679; }

.banner-section { background: rgba(0,0,0,0.05);  height: 375px; box-shadow:0 0 50px rgba(0,0,0,0.125); overflow:hidden;  }
.banner-section:hover { padding-top:200px; opacity:1 }
.fullscreen { min-height:calc(100vh - 375px); display:flex; align-items:center; }

header + section{ margin-top:150px; }

.tab-pane{ width:100%; }
.dark .service-content b { color: white !important } 
.dark .service-content p { color: #f4f4f4!important } 



/* WIDGETS */
.type-select{ 
	clear:both;
	padding-top:200px;
}

.type-select .grid2{ padding-top:5em; padding-bottom:5em;  }

section + .type-select{ padding-top:50px !important }

.banner-section + .type-select{
	padding-top:0;
	margin-top:-36px;
}

.type-select .fx-center a[data-toggle="tab"] {  
	max-width:320px; 
	margin-right:15px;
	height:80px;
	overflow:hidden; 
	background:#dfdfdf;
	position:relative;
}

.type-select  .fx-center a[data-toggle="tab"].active{ background:white; border-top:5px solid black; }

.type-select  .fx-center a[data-toggle="tab"]:hover {  
	margin-top:-50px;
	height:180px;
	margin-bottom:-50px;
	background:white;
}

.type-select .fx-center a[data-toggle="tab"]:last-of-type { margin-right:0; }
  
 
.pricing-block { border-radius: 32px !important; transition:all 1s ease; position:relative;z-index:1; font-size:15px; line-height:1.25em;  }  
.pricing-block .inner-box{ padding:0 !important; background:transparent; border-radius:16px; overflow:hidden;box-shadow:0 0 25px rgba(0,0,0,0.05) } 
.pricing-block .header { padding:2em 2em 0 2em; position:relative; text-align:left;color:white; }
.pricing-block .header h2, .pricing-block .header h5 { font-weight:300px; color:white; }
.pricing-block .btn-box { background:#00000011; opacity:0.  } 
.pricing-block .fine { margin-bottom:-4em; }
.pricing-block .icon i{
	position:absolute;
	top:16px; right:16px;
	text-align:center;
	z-index:0;
	font-size:72px; 
	color:black;
	opacity:0.025;
}
.pricing-block .features{
	display:flex;
	justify-content:space-around;
	margin:2em 0;
}
.pricing-block .features + .feature-list { margin-top:2em } 
.pricing-block .feature-list { color: white; display:grid; margin:0 1em; text-align: left; grid-template-columns: 50% 50%; } 
.pricing-block .feature-list li { padding: 8px; position:relative; margin:8px; border-bottom:1px solid #ffffff25; }  
.pricing-block .feature-list li:last-of-type { border-bottom:none; margin-bottom:2em; } 
.pricing-block .feature-list li i { position:absolute; right:8px; top:14px; } 
.pricing-block .feature i{ font-size:38px; }
.pricing-block .features .feature{
	display:inline-block;
	text-align:center; 
	color:white;
}
.pricing-block .features.band { box-shadow:0 0 75px #00000010 inset; padding:1.5em; } 
.light .features .feature { color: #727B9A !important; }
.light .features .feature i { opacity:0.2; }
  
 
.long.pricing-block .feature-list { grid-template-columns: 100% !important }  
 
.tall.pricing-block, .long.pricing-block{ grid-row: span 2 }
 
.grid2 .pricing-block, .grid3 .pricing-block, grid4 .pricing-block{ width:calc(100% - 2em) }

.features i{ opacity:0.5; margin-bottom:8px; }

.pricing-block a{ background: transparent !important; color: black !important; }
.pricing-block a.theme-btn{ background: #ffffff11 !important; color:white !important; }
.pricing-block a:hover { opacity: 0.5; }
.pricing-block .box-left { padding-left:2em; font-size:18px; color: black; }

.pricing-block .feature-checklist { margin:2em 0; }
.pricing-block .feature-checklist i { float:right; }
.pricing-block .feature-checklist li, .pricing-block .price-list li { width:100%; border-bottom:1px solid #ffffff25; text-align:left; padding:8px 2em; } 
.pricing-block .feature-checklist li:last-of-type { border:none;  }
 
.pricing-block .price-list li .price { font-size:1em; float:right }
.pricing-block .price-list li:hover { background:#f4f4f477 }
.pricing-block .price { color:inherit !important; }

.pricing-block .header + .price-list{
	background:white;
	box-shadow:0 0 25px rgba(0,0,0,0.125);
	margin-top:2em;	
	padding:1em 0;
}



.light .pricing-block h5 { color: black !important; }
 
.short.pricing-block .feature-list { display:none } 
 
.arrow-tabs li{
	width:100%;
}

.arrow-tabs li a{
	display:block;
	background:#cacaca;
}

.arrow-tabs li a.active{
	background:white;
}

.arrow-tabs li a.active:after{
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 41px solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 41px solid transparent;
	border-left: 30px solid white;
	position: absolute; 
	margin-left: 40px;
	z-index: 2; 
	left:100%;
	top:0%; 
}

.arrow-tabs .tab-pane {
	margin-left:-25px;
	position:relative;
	z-index:0; 
}

.arrow-tabs .tab-one-content { background: rgba(255,255,255,0.8) }

.specs div{
	width:100%;
	padding:5%;
}
.specs h3{ color: black !important; }
.specs progress { width:100% }

.circle h5 {
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	text-align:center;
}

.accordion-block, .list-item{ 
	background:rgba(255, 255, 255, 0.125);
	border:none;
	box-shadow:0px 30px 60px rgba(115, 117, 165, 0.08); 
	color:#fafafa !important;
}

.datacenter .hover-link-two{
	left:1em; right:1em; top:1em; bottom:1em;
	color:white !important;
}

.datacenter:hover:after{
	height:100% !important;
	backdrop-filter:blur(250px); 
	opacity:0.9;
}

.featured-item, .pricing-table-box{
	background:rgba(255, 255, 255, 0.125) !important;
	border-radius:16px;
	border:none;
	box-shadow:0px 30px 60px rgba(115, 117, 165, 0.08); 
	margin:9px;
	color:white; 
}

.pricing-table-box{ padding: 0 0 2em !important; }
.pricing-table-box:hover{  
	background:rgba(255, 255, 255, 0.25) !important;
	box-shadow:0 0 50px #000000aa; 
}

.pricing-table-box .header{
	background:rgba(255, 255, 255, 0.025) !important;
	padding:4em 0 1em 0;
}
.pricing-table-box.third .header{
	padding:4em 0 1.8em 0;
}
 
.pricing-table-box small{
	opacity:0.75;
	font-weight:bold;
}
  
.list-item{ border-radius:8px !important; }
.list-item:hover{
	background:rgba(255, 255, 255, 0.25) !important;
	box-shadow:0 0 50px #00000025; 
}
 
.dialog {
	position:fixed;
	top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,0.8);
	z-index:5000;
	display:none;
}

.dialog:target{ display: block }

.dialog .modal{
	display:block;
	width:50vw; height:85vh;
	margin:5vh 25vw;
	border-radius:8px;
	background:#f4f4f4;
}

.dialog .modal .row{ width:51vw; }

.dialog .modal .row div{ padding:2em 4em }

.dialog .modal .row .pane { height:calc(85vh - 15em); overflow:auto }

.dialog .modal .row div:last-of-type{
	background:#ffffff;
}
  
.dialog .modal .row div:first-of-type{
	background:#fafafa;
}


.tinted-button{
	background:var(--tint); 
	border-color:var(--tint); 
}

.tinted-button:hover{
	background:var(--color); 
	border-color:var(--tint); 
	border-radius:32px;
	box-shadow:0 0 15px var(--color);
}
.list-item { position: relative }
.hoverbar{
	position:absolute;
	bottom:0; left:0; right:0;
	opacity:0; width:0px;
	transition:all 0.5s ease;
	background:transparent;
}
.list-item:hover .hoverbar{ opacity: 1; width:100%;; }

.light .featured-item { background:linear-gradient(205deg, #F0F0F077, #FFFFFF 100%) !important; color:#444444 !important }

input[type="text"]{
	padding:15px 30px;
	border:1px solid #E0E0F2;
	border-radius:8px;
	color:#8198AE; 
	width:100%;
	transition:0.4s;
	margin-top:-1px;
	margin-bottom:-1px;
}

.flex input {
	margin-right:25px;
}

.masonry {
	width:100%;
	column-count:3;
	padding:1em;
}

img.hero{
	width:90%;
	box-shadow:10px 10px 25px #00000022;
	border-radius:4px;
	object-fit:cover;
}

.list-item.glass {
	color:#444444 !important;
	text-align:left !important;
	justify-content:left;
	margin-bottom:0;
}

.list-item.glass i{ 
	font-size:28px; 
	opacity:0.2;
}

.col-lg-6 .list-item .btn-bg2{ 
	float:right;
	min-width:100px;
}

.light .list-item {
	color:#444 !important;
}
 
 
.loader{
	position:fixed;
	top:0; left:0; right:0; bottom:0;
	padding:20%;
	color:white !important;
	background:rgba(0,0,0,0.9);
	z-index:10000;
	animation: loader 3s;
	animation-delay: 3s;
	animation-fill-mode:both;
}
.loader h1{ color:white !important; } 
.loader h2{ color:silver !important; } 
.loader .slide1{
	animation: typewriter 2s;
	overflow: hidden;
	border-right: .15em solid orange; 
	margin: 0 auto;
	letter-spacing: .15em;
}
.loader .slide2{
	animation: blur 5s;
	overflow: hidden; 
	margin: 0 auto; 
	letter-spacing: .15em;  
}

@keyframes typewriter{
	0% { width: 0% }
	100% {width:100%; } 
}
@keyframes blur{
	0% { filter: blur(50px) }
	100% {filter:blur(0); } 
}

@keyframes loader{
	0% { backdrop-filter:blur(50px); opacity: 1 }
	100% { backdrop-filter:blur(0); opacity: 0; z-index:-1000 }
}

#maintenance .status, #outages .status{
	position:relative;
	text-align:center;
	padding-top:2em;
}

#maintenance .status i, #outages .status i{
	font-size:100px;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	opacity:0.05;
}

table#calendar th { max-width: 15%; }
table#calendar td{
	padding:1.05em;
}

table#calendar td:hover { opacity: 0.5 }

.pricing-block .excerpt{
	text-align:left;
	padding:0.5em 2em;
}

nav .menu-img{
	height:200px;
	object-fit:cover;
}

.list-item .icon{
	font-size:53px;
	opacitY:0.075;
	float:left;
	width:64px;
	margin-left:-16px;
	margin-right:16px;
	overflow:hidden;
	text-align:center;
}

.list-item .title{
	min-width:25%;
	flex-grow:1;
}
.list-item div:not(.icon){
	min-width:15%;
	margin-right:1%;
	flex-grow:1;
}

.list-item div.right{
	text-align:right;
}

header .region img{ 
	height:3em;
	margin-top:-0.5em;
}

footer{
	background: black !important;
	color:#e3e3e3;
}
footer .list li:hover a { color: white !important } 
footer .footer-title { color: white }	
footer .footer-social-icon a { color: #f9cf51; border-color: #f9cf51aa }
footer .footer-social-icon a:hover { border-color: #f9cf51; background: #f9cf51aa }
footer .region { 
	padding-left:10px !important; 
	border-radius:8px; 
	padding-right:10px !important; 
}
footer .region i { opacity: 0; transition: all 0.5s ease; color: #f9cf51  }
footer .region:hover { background: #222222; border-radius:8px; }
footer .region:hover i, footer .region.active i { opacity: 1 !important; }
footer .region img { height: 24px; }
footer .region.active {
	background: #f9cf51aa;
	color:black !important; 
}
footer .region.active i { color: black } 
footer .uptime{
	width:300px;
	margin:auto;
	border:none;
	border-radius:8px;
	overflow:hidden;
	margin-bottom:25px;
}
footer .uptime a { width:100%; display:inline-block; border:none; background:#f4f4f4}
footer .uptime i { text-shadow: 0 0 8px #00000055}
footer .uptime a span { float: right; margin-right:8px; margin-bottom:8px }
footer .uptime a b { float: left; margin-left:8px;   }
footer .uptime .good i { color: #A0D468 }
footer .uptime small { background:white; color:black; display:inline-block; width:100%; padding-top:5px; margin-top:-15px; margin-bottom:5px; }
footer small.address br { margin-bottom:-1px; } 
.copyright img{ width: 48px }

.dialog .fixed{ 
	position:fixed;
	top:2.5em; left:10em; right:10em; bottom:10em;
	height:100vh;
	overflow:auto;
}

.dialog .fixed .logo{
	height:32px;
	margin:-55px 0 -64px 50px;
}

#locale a[data-toggle="tab"]{
	background:transparent;
	border:none;
	box-shadow:none;
} 
#locale a[data-toggle="tab"] h5 { color: white; }  
#locale a.active[data-toggle="tab"] h5{ color: black }
#locale a.active[data-toggle="tab"] {
	background:white;  
}

#locale a[data-toggle="tab"] .fa { text-align:right; opacity:0; transition:all 1s ease; margin-left:0; }
#locale a.active .fa { opacity:1; margin-left:50px }

#locale .tab-one-content { 
	margin-right:1em;
}

.buy.modal, .buy.modal > .row{
	top:0; left:0; right: 0; bottom:0;
	width:80vw; height:80vh;
	overflow:auto;
	margin:0;
}

.attachment{
	position:absolute;
	bottom:0; right:0; top:0;
	z-index:-1;
}

.details-page-service-list li:after, .accordion-block .accord-btn:after{ transition:all 2s ease; transition-delay:6s; }

.article.list, .article.feed{ display:inline-block; width:100%;padding-bottom:8px;  padding:8px; margin-bottom:8px;background:#f4f4f4;color:#969baf }
.article.list { padding:15px } 
.article.list span, .article.feed span{ float:right; color: #daa520 }