/* 
    Document   : style
    Created on : 20 Jul, 2013, 3:58:03 PM
    Author     : RAM
*/
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0; overflow-x: hidden; width: 100%; position: relative; }

/* Prevent horizontal scroll on mobile */
.container, .row, [class*="col-"] {
	max-width: 100%;
	overflow-x: hidden;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #89867e;
	background: #f9f9f9;
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
}

html {
	overflow-x: hidden;
	width: 100%;
}
a {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #fff;
}
.main,
.container > header {
	width: 100%;
	margin: 0 auto;
	padding: 2em;
}
.main {
	max-width: 82.667em;
	min-height: 40em;
}
.container > header {
	text-align: center;
	font-size: 16px;
	padding: 4em 2em 3em;
	background: rgba(0,0,0,0.01);
}
.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 700;
}
.container > header span {
	display: block;
	font-size: 60%;
	color: #ceccc6;
	padding: 0 0 0.6em 0.1em;
        font-weight:300;
}
@media screen and (max-width: 25em) { 
	.codrops-icon span {
		display: none;
	}
	.container > header {
		font-size: 75%;
	}
}
[id^="section-"]{margin-top:-20px;padding:25px;padding-top:5px}
[id^="section-"] h1,[id^="section-"] h3{font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:300;color:#fff}
[id^="section-"] .content-wrapper{color:#f2f2f2;font-size:20px;font-weight:100}
[id^="section-"] .content-wrapper>pre{font-size:14px;display:inline-block}
[id^="section-"] .content-wrapper a{color:#f2f2f2;border-bottom: 1px dotted white}
[id^="section-"] .content-wrapper li{list-style:square}
#section-1{background:rgb(208, 101, 3)}
#section-2{background:rgb(233, 147, 26)}
#section-3{background:rgb(22, 145, 190)}
#section-4{background:rgb(22, 107, 162)}
#section-5{background:rgb(27, 54, 71)}
#section-6{background:rgb(21, 40, 54);margin-bottom:-30px}
.btn{padding:10px;border:3px solid #fff;background-color:transparent;color:#fff;font-weight:700;text-transform:uppercase;display:inline-block}
.btn:hover{border-style:dashed;cursor:pointer}
.btn:active,.demo-btn:active{border-style:dotted}
.demo-btn{position:absolute;margin-top:12px;margin-left:40px}
.element-demo{height:150px;margin:0.5em 0;padding:1em;font-family:Consolas,Monaco,'Andale Mono',monospace;text-shadow:0 -0.1em 0.2em black;border:0.3em solid #545454;border-radius:0.5em;background:none repeat scroll 0 0 #141414;box-shadow:1px 1px 0.5em black inset;overflow:auto}
.easing-buttons{margin-top:80px}
.download-buttons{margin-top:350px}
.fl{float:left}
.fr{float:right}
.disp-inl{display:inline}
.disp_inl_blk{display:inline-block}
.w30{width:30%}
.w50{width:50%}
.w60{width:60%}
.w70{width:70%}
.ptr{cursor:pointer}
/* For Responsiveness */
@media (min-width:32.5em) and (max-width: 61.250em) {
    [id^="section-"] .content-wrapper{font-size:1.2em}
    [id^="section-"] .content-wrapper>pre{display:block}
    .demo-btn{position:relative}
    .easing-buttons,.download-buttons{margin-top:0}
    .fr{float:none}
    .w30,.w60,.w70{width:100%}
}
@media (min-width: 32.5em) and (max-width: 38.688em) {
    [id^="section-"] .content-wrapper{font-size:1.1em}
    [id^="section-"] .content-wrapper>pre{display:block}
    .demo-btn{position:relative}
    .easing-buttons,.download-buttons{margin-top:0}
    .fr{float:none}
    .w30,.w60,.w70{width:100%}
}
@media (max-width: 32.438em) {
    [id^="section-"] .content-wrapper{font-size:1em}
    [id^="section-"] .content-wrapper>pre{display:block}
    .demo-btn{position:relative}
    .easing-buttons,.download-buttons{margin-top:0}
    .fr{float:none}
    .w30,.w60,.w70{width:100%}
}

div.botDiv
{
    display:none;
    position: fixed;
    bottom: 0;
    right: 0; 
    width: 20em;
}

div.intercom
{
     /*display:none;
    background-color: #8DD1FF;
    */
    border-radius: 100%;
    opacity: 1;
    position: fixed;
    bottom: 12px;
    right: 12px; 
    width: 3em;
}

/* Contact form styling */
.jumbotron {
    position: relative;
    z-index: 3;
}

#learnMore {
    display: block;
    visibility: visible;
}

#shockRats {
    display: block;
    visibility: visible;
}

/* Form elements styling */
.form-control {
    background-color: white;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control.is-valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-group label {
    color: #495057;
    font-weight: 500;
    text-align: left;
    display: block;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
    text-align: left;
}

#feedbackSubmit {
    min-width: 150px;
    transition: all 0.3s ease;
}

#feedbackSubmit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* --- Copilot: Freeze navbar fix (easy to undo) --- */
.main-content {
    padding-top: 110px; /* Height of navbar + some buffer. Remove this block to undo. */
}

/* --- Copilot: Frozen navbar background (easy to undo) --- */
.navbar.fixed-top {
    background: rgba(240, 237, 235, 0.85); /* Matches contact form, semi-transparent */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Subtle shadow for separation */
    backdrop-filter: blur(2px); /* Optional: softens content behind navbar */
}

/* --- Copilot: Shrink navbar height by ~20px (easy to undo) --- */
.navbar.fixed-top {
    min-height: 60px; /* Shrink further by 10px */
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}
.navbar-brand img {
    height: 68px !important; /* Shrink logo by another 10px */
}