/* NAV BAR */




.navbar { z-index:999 !important; }

.navbar-white-bg
{
	background-color:rgba(255,255,255,0.95);
	transition: background-color 400ms linear;
}

.our-nav-item
{	
	padding: 3px 15px 0 15px !important;		
}


.our-nav-link
{
	
	font-size:11pt;
	text-transform:uppercase;
	color: #1a2a3f !important;	
}

.nav-login
{	
	font-size:11pt;
	font-weight: 700;
	text-transform:uppercase;
	color: #1a2a3f !important;
}


.nav-login:hover {text-decoration:none;}



/* IMPORTANT ! SOME NOTES ON SVG AND GRADIENTS

1) You cannot use <div with css clip-path> to create triangles,
because to have them render correct you need to use absolute positioning,
which creates a nightmare of having to absolute size each pane.
2) So you use SVG instead:
https://bennettfeely.com/clippy/
a) You create the shapes with that tool, and get the clip-path css
b) You then take those coordinates and translate them into svg
c) <polygon id="one" points="30 0, 0 0, 0 39"> just like that
d) Background gradients must be specified inside the svg, not in css.
(They wont render due to transparency crap if you put them in css div)
e) To do gradient angles, you use the x1/x2 y1/2 to create angles,
after generating a css gradient using this tool
https://cssgradient.io/
3) Then you can take the SVG, and set them as background-image for
a div, and now you have accomplished the following KEY POINTS

#1 You can let the div size to its content within, naturally
#2 You can make the SVG background auto-scale to that div's size, automagically

And that's why we do it that way.

*/

/* PANES */

.h-100vh {height: 100vh; height: calc(var(--vh, 1vh) * 100);}

.section-theme-hero
{
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(42,171,226,0.9) 100%);
}

.section-theme-blueblack
{
	background: linear-gradient(0deg, rgba(26,42,63,1) 0%, rgba(0,0,0,1.0) 100%);
	color: white;
}

.section-theme-mediumblue
{
	background-color: #003b7b;
	color:white;
}

/* dark blue solid, white text */
.section-theme-1
{
	background-color:#1a2a3f;
	color:white;
	/* solid bg, so we can put it here rather than inside svg (easier) 
	height:50vh;
	
	background-color: #00377e;
	background-image: url('/ux/image/triangle-2.svg');	
	background-repeat: no-repeat;
	background-size: 100% 100%;*/
}

/* light cyan, vertical gradient, black text */
.section-theme-2
{
	color: #000;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(0,174,239,0.5) 0%, rgba(0,174,239,0.9) 100%);
}

.section-theme-2 a 
{
	color: #fff;
	
}

/* gradient dark to medium blue, white text */
.section-theme-3
{
	background: rgb(0,174,239);
	background: linear-gradient(0deg, rgba(0,174,239,1) 0%, rgba(0,55,126,1) 100%);
	color: #fff;
	
	/* solid bg, so we can put it here rather than inside svg (easier) 
	background-color: #0a2038;
	background-image: url('/ux/image/triangle-4.svg');	
	background-repeat: no-repeat;
	background-size: 100% 100%;*/	
}

.section-theme-4
{
	color:white;
	
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(0,174,239,0.5) 0%, rgba(0,174,239,0.9) 100%);
	
	/* bg gradient is inside trangiel-3.svg, dont try to put it here 
	height: 75vh;
	background-image: url('/ux/image/triangle-3.svg');	
	background-repeat: no-repeat;
	background-size: 100% 100%;*/
}

/* dark navy , footer and team */
.section-theme-5
{
	background-color:#030710;	
	color: #fff;
	
}

.section-theme-6
{
	color: #00aeef;
	background-color: #fff;
}

.customer-logo-container
{
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: space-between;
	border: 1px solid red;
}



.hero-cta-email
{	
	
	background-color: #000;
	color: #00aeef;
	border: 1px solid #000;
	border-right: none;
	margin-right:0px;
	border-radius:0px;
	
}

.hero-cta-button
{	
	margin-left:0px;	
	
	white-space:nowrap;
	background-color: #2aace2;
	color: white;
	font-size: 14pt;	
	font-weight:600;
	border: 1px solid #000;
	border-left: none;
	
	
	border-radius:0px;
	
}

.hero-cta-button:hover
{
	color:#000;
	text-decoration:none;
	
}

.cta-success-icon
{
	width:30px;
	height:auto;
	stroke-width:2.0;
	color: #fff;
	cursor:default;
}

.cta-failure-icon
{
	width:30px;
	height:auto;
	stroke-width:2.0;
	color: red;
	cursor:default;
}

/* capture */

.video-container {
  --video--width: 1024;
  --video--height: 768;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;    
}



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

.testimonial-photo
{
	width: 150px;
	height: 150px;	
	
	border-radius:50%;
	object-fit: cover;
}

/* HOW IT WORKS */

.text-bold {font-weight:bold;}
.text-gray {color: #666 !important;}
.text-black {color: #000}

.number-with-circle 
{
	border-radius: 50%;
	width: 70px;
	height: 70px;
	padding: 10px;
	background: #fff;	
	color: #00aeef;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:24pt;
	font-weight:bold;	
	margin: 10px 0;	
}

.lighten-image
{
	opacity: 0.5;
}

ul.tryit {
  list-style: none;
}

ul.tryit li 
{	
	font-size: 25px;
	margin-left: -20px;
}

ul.tryit li:before {
  content: '✓';
  color: #00aeef;
  margin-right:15px;
  
}

.capture-infographic
{
	flex-grow:1;
	background-image: url('/ux/image/capture-digital-marketing.png');
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center; 	
}

/* SHIFT */

.shift-infographic
{
	flex-grow:1;
	background-image: url('/ux/image/shift-digital-marketing-tuning.png');
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center; 	
}


.inspect-infographic
{
	flex-grow:1;
	background-image: url('/ux/image/inspect-infographic.png');
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center; 	
	
}

.linkedin
{
	height: 24px;
	width: auto;
	
}

.team-photo 
{
	width: auto;
	height: 200px;	
	margin: 0;
	object-fit: cover;
}

.team-photo-large
{
	width: 70%;
	height: auto;
	
	border-radius: 5%;
	object-fit: cover;
}

.section-contact {	padding: 5%; }

.section-origin { padding: 5% }

.section-team { padding: 5% }


.contact-form-container input,textarea
{
	border:none;	
	border-radius:0px;
	font-size: 14pt;
	padding: 25px 20px;
	background-color: #000;
	color: #00aeef;
	
}

::placeholder { /* Most modern browsers support this now. */
   color: #00aaef;
   opacity: 0.7;
}


.contact-form-container input,textarea:focus {outline: none; }
.contact-form-container textarea
{
	height: 300px;
	width:100%;
	margin-top:2px;
}

.contact-submit-button 
{
	padding: 10px 30px;
	margin: 25px 0;
	border-radius: 0px;
	background-color:#00aaef;
	color: #fff;
	font-size:16pt;
	font-weight:600;
	align-self:flex-start;
	
}
.error-message  { color:red;}


.errorstate { border:3px solid red !important;	}

.contact-form-loading-icon
{
	width:50px;
	height:auto;	
	margin:30px 0;
}

.contact-form-success-icon
{
	color:green;
	width:70px;
	stroke-width:3.0;
	height:auto;	
	margin:15px 0;
}

.contact-form-failure-icon
{
	color:red;
	width:70px;
	stroke-width:3.0;
	height:auto;	
	margin:15px 0;
}

.contact-form > div.submit-row { text-align:center;	}

.contact-form div.submit-row p
{
	font-size: 14pt;
	font-family: Inter;	
	color: #fff;
}

.footer {	}


.footer-left-logo { }	

.footer-logo {  width:60px; height:auto;}

.footer-logo-dialtrace {  width:220px; height:auto;}

.footer-company-description { font-size: 11pt; padding: 15px 0 30px 8px;}

.footer-right-contact { color: #00aeef; font-size: 11pt; font-family: "Inter"; display:flex; align-items:flex-end; justify-content:flex-start;}	
.footer-link { padding: 5px 0 15px 8px; }
.footer-link a {font-weight:bold; font-size: 12pt; text-transform: uppercase; color: #00aeef;}
.footer-link a:hover { color: #00aeef; text-decoration:none;}

.footer-text { padding-left: 8px; padding-bottom: 25px; align-self:flex-end;}

.gray-footer-links a { font-family: "Inter"; font-size: 9pt; color: #777;}
.gray-footer-links a:hover { text-decoration: none; color: #777}

/* xs,sm mobile */
@media only screen and (max-width: 767px)
{
	.video-container-height { height:400px; }
	.video-container-iframe
	{
	  top: 0;
	  left: 0;
	  width: 95%;
	  height: 90%;		  
	}
	
	.hide-on-mobile { display:none; visibility:hidden; }	
	
	/* uses a smaller logo footprint for mobile */
	.nav-logo
	{
		width:140px;
		height:auto;				
	}
	
	/* adds white bg to nav links for mobile so it contrasts background */
	.our-nav-item {background-color: #fff;}
	
	/* defines a hover color for all nav items */
	.our-nav-link:hover, .nav-login:hover
	{
		color:#00aeef !important;
	}
	
	/* mimics our-nav-item to make it look like a normal entry */
	.nav-login-container { padding: 8px 15px 8px 15px !important; background-color: #fff;}
	
	.align-self-center-sm-md {align-self: center !important;}
	.text-center-sm-md {text-align:center;}
	
	/* hero text */
	h1 { font-size: 2.5rem; font-weight:700; }
	h2 { font-size: 1.75rem;}
	h3 { font-size: 1.0rem;}

	.hero-image 
	{	
		
		max-width:95%;
		margin: 40px 0;
		
	} 
	
	.hero-cta-email { width: 210px; font-size: 12pt; padding: 10px 15px;}
	.hero-cta-button { padding: 10px 15px;}
	
	.how-it-works-1-infographic-mobile-only,
	.how-it-works-2-infographic-mobile-only,
	.how-it-works-3-infographic-mobile-only
	{
		width: 95%;
		height: auto;
		margin-left:5px;
	}
	
	.logo-rokform
	{
		margin-top:25px;
		max-width:250px;
		height:auto;
	}

	.logo-renu
	{	
		margin-top:60px;
		max-width:150px;
		height:auto;
	}

	.logo-semiexact
	{
		margin-top:70px;		
		
		max-width:250px;
		height:auto;
	}
	
	/* capture */
	.capture-mobile-infographic-container 
	{ 
		display:flex;
		height: 340px;
		width:100%; 
		padding: 20px 0;		
	}
	
	.capture-lead-list-container {justify-content:center; padding-bottom:10px;}
	.capture-lead-list-image
	{
		max-width: 95%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;	
	}
	
	/* SHIFT */
	.shift-mobile-infographic-container 
	{ 
		display:flex;
		height: 340px;
		width:100%; 
		padding: 20px 0;		
	}
	
	.shift-ppc-image-container {justify-content:center; padding-bottom:10px;}
	.shift-ppc-image
	{
		max-width: 95%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;	
	}
	
	/* INSPECT */
	.inspect-mobile-infographic-container 
	{ 
		display:flex;
		height: 440px;
		width:100%; 
		padding: 20px 0;		
	}
	
	.inspect-product-container {justify-content:center; margin-bottom:10px;}
	.inspect-product-image
	{
		max-width: 95%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;	
		
	}
	
	.contact-form-container input { margin-bottom: 10px; }	
	
	.gray-footer-links a { margin-right:10px;}
}

/* MD = tablet */
@media only screen and (min-width: 769px) and (max-width: 959px)
{
	.video-container-height { height:350px; }
	.video-container-iframe
	{
	  top: 0;
	  left: 0;
	  width: 80%;
	  height: 80%;	
	}
	
	.hide-on-mobile { display:none; visibility:hidden; }
	
	/* uses a smaller logo footprint for mobile */
	.nav-logo
	{
		width:140px;
		height:auto;				
	}
	
	/* adds white bg to nav links for mobile so it contrasts background */
	.our-nav-item {background-color: #fff;}
	
	/* defines a hover color for all nav items */
	.our-nav-link:hover, .nav-login:hover
	{
		color:#00aeef !important;
	}
	
	/* mimics our-nav-item to make it look like a normal entry */
	.nav-login-container { padding: 8px 15px 8px 15px !important; background-color: #fff;}
	
	.align-self-center-sm-md {align-self: center !important;}
	.text-center-sm-md {text-align:center;}
	
	/* hero text */
	h1 { font-size: 3.0rem; font-weight:700; }
	h2 { font-size: 1.5rem;}
	h3 {font-size: 1.0rem;}
	
	.hero-image { max-height:48vh; width:auto; margin: 30px 0; } 
	
	.hero-cta-email { font-size:14pt; padding: 15px 20px;}
	.hero-cta-button { padding: 15px 20px;}
	
	
	.logo-rokform
	{
		margin-top:25px;
		max-width:250px;
		height:auto;
	}

	.logo-renu
	{	
		margin-top:60px;
		max-width:150px;
		height:auto;
	}

	.logo-semiexact
	{
		margin-top:70px;		
		
		max-width:250px;
		height:auto;
	}
	
	
	/* capture */
	.capture-mobile-infographic-container 
	{ 
		display:flex;
		height: 400px;
		width:100%; 
		
	}

	.capture-lead-list-container {justify-content:center;}
	.capture-lead-list-image
	{
		max-width: 90%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;			
	}
	
	/* SHIFT */
	.shift-mobile-infographic-container 
	{ 
		display:flex;
		height: 400px;
		width:100%; 
		
	}

	.shift-ppc-image-container {justify-content:center;}
	.shift-ppc-image
	{
		max-width: 90%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;			
	}
	
	/* INSPECT */
	.inspect-mobile-infographic-container 
	{ 
		display:flex;
		height: 600px;
		width:100%; 
		
	}

	.inspect-product-container {justify-content:center;}
	.inspect-product-image
	{
		max-width: 90%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;			
	}
	
	.contact-form-container input { margin-bottom: 15px; }	
		
	
	.gray-footer-links a { margin-right:10px;}
}

/* lg, xl = DESKTOP */
@media only screen and (min-width: 960px) 
{
	.video-container-height { height:620px; }
	.video-container-iframe
	{
	  top: 0;
	  left: 0;
	  width: 70%;
	  height: 80%;		  
	}
	
	.hide-on-desktop{ display:none; visibility:hidden; }
	
	/* 
			NAV 
	*/
	.nav-logo
	{
		width:180px;
		height:auto;
		margin: 3px 0 0 25px;
		
	}
	
	.nav-login
	{		
		margin: 0 40px 0 20px;
		padding: 8px 30px 7px 30px;	
		border:1px solid #fff;
		border-radius: 17px; 	
	}
	
	.navbar-white-bg .nav-login
	{
		border: 1px solid #1a2a3f !important;
	}
	
	
	
	
	/* vcenter the login button */
	.nav-login-container {display: flex; align-items:center}
	
	/* so the link doesnt appear to jump when hovered */
	.our-nav-link { border-bottom: 2px solid transparent; }
	
	/* underlines the link */
	.our-nav-link:hover { border-bottom: 2px solid #1a2a3f;	}
	
	h1 { font-size: 4.0rem; font-weight:700; }
	h2 { font-size: 2.5rem; font-weight: 300;}	
	h3 { font-size: 2.0rem; font-weight: 200;}
	h4 { font-size: 1.0rem;}
	
	.hero-image { margin: 20vh 0;  max-height:50vh; width:auto; }
	
	.hero-cta-email { width: 300px; font-size: 14pt; padding: 15px 20px;}
	.hero-cta-button { padding: 15px 20px;}
	
	.how-it-works-1-infographic-desktop-only
	{
		min-height:800px;
		background-image: url('/ux/image/1-connect-desktop.png');
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: center; 	
	}
	
	.how-it-works-2-infographic-desktop-only
	{
		min-height:750px;
		background-image: url('/ux/image/2-identify-desktop.png');
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position-x: 65%;		
		background-position-y: bottom;
	}
	
	.how-it-works-3-infographic-desktop-only
	{
		min-height:850px;
		background-image: url('/ux/image/3-perform-desktop.png');
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position-x: 65%;		
		background-position-y: bottom;
	}
	
	.logo-rokform
	{
		margin-top:30px;
		margin-bottom:12px;
		max-width:250px;
		height:auto;
	}

	.logo-renu
	{	
		max-width:150px;
		height:auto;
	}

	.logo-semiexact
	{
		margin-top:20px;
		margin-bottom: 5px;
		
		max-width:250px;
		height:auto;
	}
	
	.left-blue-border {border-left: 2px solid #00aeef;}
	
	/* capture */
	.capture-lead-list-container {justify-content:flex-start;}
	.capture-lead-list-image
	{
		max-width: 100%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;	
	}
	
	.capture-mobile-infographic-container { }
	.capture-infographic {}
	.capture-desktop-infographic-container
	{
		min-height:700px;
		padding: 100px 0;
		display: flex;
	}
	
	/* SHIFT */
	.shift-ppc-image-container {justify-content:flex-start;}
	.shift-ppc-image
	{
		max-width: 100%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;	
	}
	
	.shift-mobile-infographic-container { }
	.shift-desktop-infographic-container
	{
		min-height:700px;
		padding: 100px 0;
		display: flex;
	}
	
	/* INSPECT */
	.inspect-product-container {justify-content:flex-start;}
	.inspect-product-image
	{
		max-width: 100%;
		height:auto;
		overflow-y: hidden;
		align-self: flex-end;	
	}
	
	.inspect-mobile-infographic-container { }
	.inspect-desktop-infographic-container
	{
		min-height:800px;
		padding: 50px 0;
		display: flex;
	}
	
	
	/* CONTACT */
	
	
	
	/* FOOTER */
	.gray-footer-links a { margin-right:35px;}
}

/* MISC */

body  { font-family: "Inter"; }	


.flex-1 {flex: 1}
.flex-2 {flex: 2}
.flex-3 {flex: 3}
.flex-4 {flex: 4}
.flex-5 {flex: 5}
.flex-6 {flex: 6}
.flex-7 {flex: 7}
.flex-8 {flex: 8}
.flex-9 {flex: 9}
.flex-10 {flex: 10}
.flex-11 {flex: 11}
.flex-12 {flex: 12}
.flex-13 {flex: 13}
.flex-14 {flex: 14}
.flex-15 {flex: 15}
.flex-16 {flex: 16}

.flex-vcenter {align-items:center}
.flex-vbottom {align-items:flex-end}
.flex-vtop {align-items:flex-start}
.flex-hcenter {justify-content: center}
.flex-hright {justify-content: flex-end}
.flex-hleft {justify-content: flex-start}


.flex-space-between {justify-content:space-between;}
.flex-space-around {justify-content:space-around;}
.flex-grow-1 {flex-grow:1;}
.flex-shrink-1 {flex-shrink:1;}
.red-border{ border: 2px solid red; }
.purple-border{ border: 2px solid purple; }
.green-border{ border: 2px solid green; }
.blue-border  { border: 2px solid blue; }

h2 > i
{
	border-bottom: 3px solid #00aeef;
	/*text-decoration:underline;
	text-decoration-color: #00aeef;
	text-decoration-thickness: 3px;*/
}