/* ==== Google font ==== */
/*  @import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap'); */

@font-face {
 font-family: 'Montserrat';
 src: url('/Montserrat-Regular.woff2') format('woff2');
 src: url('/Montserrat-Bold.woff2') format('woff2');
}

main { width:100%; margin:0 auto; overflow-x:hidden;}

body {
	width: 100%;
	height: 100%;
	font-family: 'Segoe UI', sans-serif;
	font-weight: 400;
	color: #666;
	background-color: #fff;
}

html {
	width: 100%;
	height: 100%;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 30px;
	font-family: Montserrat,sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}

p {
	margin: 0 0 20px;
	font-size: 18px;
	line-height: 1.6em;
}

p.lead {
	font-weight: 600;
}

a {
	color: #28c3ab;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

a:hover, a:focus {
	text-decoration: none;
	color: #176e61;
}

.light {
	font-weight: 400;
}


/* =========================== --- Footer ============================ */
 footer {
	text-align: center;
	padding: 50px 0 ;
}

footer p {
	color: #f8f8f8;
}

footer a {
	color: #fefefe;
}

footer a:hover {
	color: #fff;
}
/* =========================== --- Elements ============================ */
 .btn {
	border-radius: 0;
	text-transform: uppercase;
	font-family: Montserrat,sans-serif;
	font-weight: 400;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.btn-circle {
	width: 70px;
	height: 70px;
	margin-top: 15px;
	padding: 7px 16px;
	border: 2px solid #fff;
	border-radius: 50%;
	font-size: 40px;
	color: #fff;
	background: 0 0;
	-webkit-transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	transition: background .3s ease-in-out;
}

.btn-circle.btn-dark {
	border: 2px solid #666;
	color: #666;
}

.btn-circle:hover, .btn-circle:focus {
	outline: 0;
	color: #fff;
	background: rgba(255,255,255,.1);
}

.btn-circle.btn-dark :hover, .btn-circle.btn-dark :focus {
	outline: 0;
	color: #999;
	background: #fff;
}

.btn-circle.btn-dark :hover i, .btn-circle.btn-dark :focus i{
	color: #999;
}

.page-scroll .btn-circle i.animated {
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 1s;
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 1s;
}

.page-scroll .btn-circle:hover i.animated {
	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-webkit-animation-duration: 1.5s;
	-moz-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
}

#text {
	color: #fff;
	background: #ffcc00;
}

.btn-default:hover, .btn-default:focus {
	border: 1px solid #28c3ab;
	outline: 0;
	color: #000;
	background-color: #28c3ab;
}

.icon {
	width: 1.2em;
	height: 1.2em;
	margin-top:-4.5px;
}

#pricing-content .icon {
	margin-top:-7px;
	margin-left: -1em;
}

#pricing-content sup {
	font-size:.5em;
	vertical-align: middle;
	margin:0 .15em;
}

#pricing-content h1 span.nocents {
	margin-left: -.35em;
}

#pricing-content .card-title {
	font-weight: bold;
	color:#6090e0;
}

#pricing-content .card-header h4 {
	font-size: 2em;
}

#pricing-content .card-deck .card {
	min-width:300px;
}

@media (max-width: 1200px) {
	#pricing-content .card-deck {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-flow: row wrap;
	    flex-flow: row wrap;
	    margin-right: -15px;
	    margin-left: -15px;
    }

    #pricing-content .card-deck .card {
	    min-width:440px;
	    -ms-flex: 1 0 0%;
	    flex: 1 0 0%;
	    margin-right: 15px;
	    margin-bottom: 0;
	    margin-left: 15px;
    }
}

@media (max-width: 778px) {
	#pricing-content .card-deck .card {
	    min-width: 350px;
    }
}
/* Carousel base class */
 .carousel {
	 margin: 0px;
	margin-top:3rem;
	margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
 .carousel-caption {
	bottom: 3rem;
	z-index: 10;
}
/* Declare heights because of positioning of img element */
 .carousel-item {
	height: 32rem;
	background-color: #777;
}

.carousel-item > img {
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 32rem;
}

.carousel-caption {
	background-color: rgba(0,20,30,.85);
	padding:2.5rem;
	padding-bottom: 6rem;
	border-radius: 0.5rem;
	bottom:-1rem;
	max-height:90%;
	overflow-y: hidden;
}

#usage-how .card .card-body h1 {
	color: #606060;
	font-size:1.5em;
}

#usage-how .card .card-body p {
	margin-bottom:0px;
	font-size:.8em;
}

#usage-how .card {
	height: 100%;
}

#myCarousel {
	height: 40rem;
}

#myCarousel .carousel-inner {
	height: 100%;
}

#myCarousel .carousel-item {
	height: 110%;
	transition: transform 1s ease, opacity .25s ease-out;
}

#myCarousel img {
	height: 100%;
}

#hero h2 {
	font-size: 1.25em;
}

#requestdemothanks {
	display: none;
}

#modalRequestDemo {
	font-weight: bold;
}

#modalRequestDemo input {
	text-align: center;
	width: 80%;
	height: 2.5em;
}

#modalSignUp input {
	text-align: center;
	width: 60%;
	height: 2.5em;
}

.carousel-item > img {
	filter: url(~"data:image/svg+xml;
    utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: gray;
}

.carousel-caption {
	bottom: -100%;
}

.featurebuttons {
	margin-top:3rem;
	margin-bottom:4rem;
}

hr {
	border-width: 3px;
}

header .icon {
	margin-top:-7px;
	margin-left:5px;
}

#about .card {
	border-width:0px;
}

.overlay-block {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	min-height:auto;
	opacity:0;
}

.overlay-block1 {
	background:  #ac3490;
	background: -webkit-linear-gradient(to left, #c02238, #ac3490 );
	background:  linear-gradient(to right, #c02238, #ac3490);
}
.overlay-block2 {
	background:  #005aa7;
	background: -webkit-linear-gradient(to left, #ac3490, #005aa7 );
	background:  linear-gradient(to right, #ac3490, #005aa7);
}
.overlay-block3 {
	background:  #fffde4 ;
	background: -webkit-linear-gradient(to left, #005aa7, #fffde4  );
	background:  linear-gradient(to right, #005aa7, #fffde4 );
}
.overlay-block4 {
	background:  #b20a2c;
	background: -webkit-linear-gradient(to left, #fffde4, #b20a2c );
	background:  linear-gradient(to right, #fffde4, #b20a2c); 
}
.overlay-block5 {
	background:  #22c1c3 ;
	background: -webkit-linear-gradient(to left, #b20a2c, #22c1c3  );
	background:  linear-gradient(to right, #b20a2c, #22c1c3 );
}
.overlay-block6 {
	background:  #fdbb2d;
	background: -webkit-linear-gradient(to left, #22c1c3, #fdbb2d );
	background:  linear-gradient(to right, #22c1c3, #fdbb2d );
}
.overlay-block7 {
	background:  #ad5389;
	background: -webkit-linear-gradient(to left, #fdbb2d, #ad5389 );
	background:  linear-gradient(to right, #fdbb2d, #ad5389); 
}
.overlay-block8 {
	background:  #3c1053 ;
	background: -webkit-linear-gradient(to left, #ad5389, #3c1053  );
	background:  linear-gradient(to right, #ad5389, #3c1053 );
}
.overlay-block9 {
	background:  #6a82fb;
	background: -webkit-linear-gradient(to left, #3c1053, #6a82fb );
	background:  linear-gradient(to right, #3c1053, #6a82fb); 
}
.overlay-block10 {
	background:  #c02238;
	background: -webkit-linear-gradient(to left, #6a82fb, #c02238 );
	background:  linear-gradient(to right, #6a82fb, #c02238); 
}

#about ul li {
	font-size: 1.2em;
	text-align:left;
	margin-bottom: .5rem;
	list-style: disclosure-closed outside;
}

.btn {
	border-radius: 2rem;
	padding: .75rem 2rem
}

.pricing-option .btn {
	border-radius: 0;
	padding-right:.5rem
}

.pricing-option .btn.toggle-on {
	padding-left:0rem;
	margin-left:-1rem
}

#experience {
	-webkit-text-stroke: 1px rgba(0,0,0,.3);
}

#focus {
	-webkit-text-stroke: 1px rgba(0,0,0,.3);
}

#passion {
	-webkit-text-stroke: 1px rgba(0,0,0,.3);
}

h1 img.statslogo {
	height: 2rem;
	width: auto;
	vertical-align: middle;
	margin-top:-6px;
}

#statslogo-bw {
	opacity: 1;
}

#statslogo-color {
	opacity:0;
	position:relative;
	left:-2rem;
	margin-right:-1.5rem;
}

@media(max-width:576px) {
	.btn-group .btn {
	    font-size: 1rem;
	    padding: 5%;
		margin-left:-7.5%;
		border-radius:0px;
    }

    h1 {
	    font-size:2rem;
    }

    h2 {
	    font-size: 1.75rem;
    }
}

@media(max-width:778px) {
	#myCarousel .carousel-caption {
	    width:100%;
	    margin:-15%
    }
}

#hero .carousel-caption {
	bottom: 0rem;
	opacity: 1;
	display:block;
}

.usage-how-contractsvalue .row {
	height: 60%;
}

.usage-how-contractsvalue .col img {
    position:absolute;
	left:0px;
    bottom:0;
}

.icon-project-grey {
	width:100%;
	height:auto;
	opacity:1;
}

.icon-project {
	width:100%;
	height:auto;
	opacity:0;
	position:relative;
	left:-100%;
}

.text-hotshot {
    color: #ec64c0;
}

.modal-title {
	color: #aaa;
	font-size:1.5rem;
	font-family: 'Segoe UI';
	font-weight: normal;
}

#modal-signup-info p {
	font-size: 1rem;
}

#navbarCollapse a { font-size:1.2rem; color: #c0c0c0;}
#navbarCollapse a:hover { color: white; }

.carousel-indicators li { margin-left: 1rem; width:2rem;}
@media(max-width:576px) {
  .carousel-indicators li { margin-left: 1.5rem; width:2.5rem; display:none;}
}

.web-stories-embed.alignleft,.web-stories-embed.alignright{width:100%}.web-stories-embed.aligncenter{text-align:initial}.web-stories-embed .wp-block-embed__wrapper{position:relative}.web-stories-embed.aligncenter .wp-block-embed__wrapper{margin-left:auto;margin-right:auto}.web-stories-embed:not(.web-stories-embed-amp) .wp-block-embed__wrapper{max-width:var(--width)}.web-stories-embed:not(.web-stories-embed-amp) .wp-block-embed__wrapper:before{content:'';display:block;padding-bottom:calc(var(--aspect-ratio)*100%)}.web-stories-embed:not(.web-stories-embed-amp) .wp-block-embed__wrapper amp-story-player{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media(max-width:1024px) {
  .navbar .btn { display:none !important;;}
}