@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');

.demo {            
    display: flex;   
    flex-wrap: wrap;
    justify-content: space-between; 
}

.demo-background {
    background-image: url(/images/demo_small.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  
}

.demo-desc {
    padding: .5em 5em;
}


.flex__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.div[class^='flex__item'], div[class*=' flex__item'] {
    display: flex;
    flex-direction: column;
    margin: 2em auto; 
    width: 90%;
}

#topBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 100px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 999; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #383838; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: .8em; /* Some padding */    
    font-size: .8em; /* Increase font size */    
}

#topBtn:hover {
    background-color: #6b6b6b;
}

.hbspt-form {
    margin: 2em 5em;
}

.icon-bar {
    position: fixed;
    top: 40%;
    z-index: 999;
    padding-left: .2em;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  /* Style the icon bar links */
  .icon-bar a {
    display: block;
    text-align: center;
    padding: 16px;
    margin-top: .2em;
    margin-bottom: .2em;
    height: 1em;
    width: 1em;
    transition: all 0.3s ease;
    background-color: #acacac;
    color: white;   
    border-radius: 50%;
  }
  
  /* Style the social media icons with color, if you want */
  .icon-bar a:hover {
    background-color: #000;
  }
  
  .facebook {
    background: #3B5998;
    color: white;
  }
  
  .twitter {
    background: #55ACEE;
    color: white;
  }
  
  .google {
    background: #dd4b39;
    color: white;
  }
  
  .linkedin {
    background: #007bb5;
    color: white;
  }
  
  .youtube {
    background: #bb0000;
    color: white;
  }

.glide__arrow   {
    color: #FD0505 !important;
}

.glide__arrows {
    display: none;
}

.glide__img {
    display:table-cell;
	vertical-align:middle;
	text-align:center;
	height:100px;
	width:300px;
}

.glide__slide img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);    
}

.glide__slide img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

body, html {
    height: calc(100% - 2em);    
    padding: 0;
    margin: 0;
    width: 100%;
    background-color: #000000;
    font-family: 'Montserrat', sans-serif;
    
}

main {
    width: 100%!important;
    color: #ffffff;
    margin-top: 4em;
}

.hero {
    background-image: url(/images/handshake.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-top: 1px solid #ffffff;
    text-shadow: .8px .8px 3px #000000;    
    padding: 0;
    margin: 0;
    min-height: 400px;
}

.hero-sales {
    background-image: url(/images/happy_customers.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-top: 1px solid #ffffff;
    text-shadow: .8px .8px 3px #000000;    
    padding: 0;
    margin: 0;
    min-height: 250px;
}

.hero-content {
    padding-left: 3.5em;
    padding-top: 5em;
}

h1 {
    
    font-size: 1.5em;
    padding-top: 1.1em;    
    margin: 0;        
    opacity: 1;    
}

p {
    font-size: 1.2em;        
    padding-top: .3em;
    margin: 0;
    line-height: 1.5em;    
}

.price-content {    
    padding-top: 2em;
}

.price {
    color: #FD0505;
    font-weight: 800;
    font-size: 1.8em;    
}

.price-amnt {
    margin-top: 30px;
    padding-top: 20px;
}

.btn {
    background: #FD0505;
    border: 1px FD0505;
    border-radius: 5px;
    padding: .5em;
    color: white;           
    text-decoration: none;
    text-align: center;
    width: 7em;
    display: block;
    font-size: 1em;

}

.price-button {
    padding-top: 1.2em;
    padding-left: 2em;
}

.btn:hover {
    background: #e70505;
}

.btn:focus {
    border: #e70505
}

aside {
    display: grid;
    grid-template-columns: auto 30%;
    color: #ffffff;
    padding-left:   3em;
    padding-right: 3em;
    padding-top: .5em;
    padding-bottom: .5em; 
    position: fixed;
    top: 0;
    z-index: 5;
    background-color: black;
    width: 100%;
    height: 4em;
    border-bottom: 1px solid #fff;
}

aside img {
    width: 40px;   
    cursor: pointer;
}

#menu {
    padding-top: 20px;
    padding-right: 10px;
}

figure {    
    margin: 0;
}

header {
    background: #000;
    padding: 0;
    margin: 0;
}

#logo img { 
    width: 200px;     
    height: auto;
}

.hide {
    display: none;
}


.active {
    position: fixed;
    display: block;
    background: #000000;
    overflow-x: overlay; /* Disable horizontal scroll */
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;  
    transition: all 0.5s ease;
    padding: 0;
}

ul {    
    list-style-type: none;    
    
}

.shadow {
    -webkit-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.55);
    -moz-box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.55);
    box-shadow: 1px 0px 5px 1px rgba(0,0,0,0.55);
}

nav ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8em;
    display: block;    
    padding: 2em 5em;    
    color:#fff;   
    transition: 0.5s;  
}

ul li>a:hover {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: #000;
}

.products {                
    background: #ffffff;
    min-height: 300px;
    padding: 2em;
}

.devices {
    max-width: 90%;  
    display: block;  
    margin: 0 auto;    
}


.grid {    
    display: block;
    justify-content: center;
    align-items: center;

}

.col {
    flex: 1;
    align-items: center;
    margin: 0 10px;
}

.product-description {
    display: grid;
    justify-items: center;
    padding-top: 1.8em;
    padding-bottom: 1.8em;
}

.product-description h3 {
    text-align: center;
    color:#000000;
    margin: 0;
}

.product-description p {
    color: #888888;
    font-size: .8em;
    padding: .8em 2em;
    text-align: center;
}

.view-details {
    display: block;
    background: #FD0505;
    text-decoration: none;
    text-align: center;
    font-size: .7em;
    color: #ffffff;
    padding: 1.2em;
    max-width: 80px;
    border-radius: 3px;    
}

.view-details:hover {
    background-color: #000;
}

.random-info {
    background: #000000;
    min-height: 300px;
    padding: 2em 3em;
}

.info {
    display: grid;
    justify-items: center;
    padding-top: 2em;
    padding-left: .9em;
    padding-right: .9em;
    padding-bottom: 3em;    
}

.random-info h3 {
    display: none;
    text-align: center;
    font-size: 1.3em;
}

.info-icon .fas {
    font-size: 5em;
    color: #acacac;
}

.info-head {
    text-align: center;     
}

.info h5 {
    color: #FD0505;
    font-weight: 100;
    font-size: 1.1em;
    margin-bottom: .3em;
}

.info hr {
    width: 20%;
    height: 1px;
    border-bottom: none;
    border-left: none;
    border-right: none;    
}

.info p {
    font-size: .8em;
    height: 30px;
    text-align: center;
    padding-bottom: 2em;
}

.partners {
    min-height: 150px;
    background: #ffffff;    
}

.partner-slide {
    padding: 2em 2em;
}

.partners h3 {    
    margin: 0;
    color: #FD0505;
    font-weight: 300;
    text-align: center;
    font-size: 1.8em;    
    padding: .8em 2em;
}

.partners p { 
    text-align: center;
    color: #000;
    margin-bottom: 100px;
}

.system {
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;    
    color: #ffffff;
    min-height: 300px;
    padding-top: 5em;
}

.system img {
    max-width: 60%;
    display: block;
    margin: 0 auto;    
}

.system h5 {
    text-align: center;
    font-weight: 100;
    font-size: 1.4em;
    color: #FD0505;
    margin-bottom: 1em;
}

.system p {
    text-align: center;
    font-size: .8em;
    padding: 1em 5em;
    height: 40px;
}

.system .col {
    padding-bottom: 5em;
}

.system .grid {
    padding-left: 20px;
    padding-right: 20px;
}

.glide {
    padding-bottom: 1em;
}

.specs {
    background: #ffffff;
    color: #000000;
}

.specs .col {
    text-align: center;
    padding: 1.3em .5em;
}

.specs .grid {
    padding: 5em;
}

.specs p {
    font-size: 4em;
    text-align: center;
}

.specs hr {
    width: 20%;
    height: 1px;
    color: #322f30;
    border-bottom: none;
    border-left: none;
    border-right: none;  
}

.specs h5 {
    text-transform: uppercase;
}

.specs .fas {
    color: #000;
    font-size: 4em;
}

.features {
    background-image:  url("/images/car_dark.png");
    background-size: cover;
    background-color: #d8d8d8;
    background-repeat: no-repeat;
    color: #fff;    
}

.features .grid {
    padding: 2em 2em;
}

.features .col {
    text-align: center;
}

.features h3 {    
    text-align: center;
    font-size: 1.8em;
    font-weight: 300;
    color: #FD0505;
    margin: 0;
    padding-top: 1.5em;
}

.features p {
    color: #FFF;
    font-size: 1em;
}

.newsletter button {
    background-color: #FD0505;
    border: none;
    padding: .7em;
    color: #ffffff;
    border-radius: 3px;
    font-size: 1em;
    cursor: pointer;
    margin-left: 1.5em;
}

.newsletter button:focus {
    outline: none;
}

.newsletter {
    background: #000000;
    color: #ffffff;    
    padding: 1em 0em;    
}


.newsletter form {
    padding-left: 3em;
    padding-right: 3em; 
}


.newsletter h3 {
    text-align: center;
    font-weight: 200;
    font-size: 2em;
    padding: .5em .8em;
    margin: 0;
}

.input {
    display: block;
    background-color: #000000 !important;
    border: 1px solid white;
    width: 95%;
    height: 3em;
    margin-top: .5em;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: .5em;
    padding-left: .8em;    
    color: #ffffff;
}

textarea {
    display: block;
    background-color: #000000;
    border: 1px solid white;
    width: 97.5%;    
    margin-top: .5em;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: .5em;
    padding-left: .8em;    
    color: #ffffff;
}

textarea:focus {
    outline: none;  
}

textarea::-webkit-input-placeholder {
color: #999999;
font-family: 'Montserrat', sans-serif;
}

textarea:-moz-placeholder { /* Firefox 18- */
color: #ffffff;
font-family: 'Montserrat', sans-serif;  
}

textarea::-moz-placeholder {  /* Firefox 19+ */
color: #ffffff;  
font-family: 'Montserrat', sans-serif;
}

textarea:-ms-input-placeholder {
color: #ffffff;  
font-family: 'Montserrat', sans-serif;
}

.newsletter p {
    font-size: .8em;
    font-weight: 100;
    padding-top: 3em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 3em;
}

.newsletter input:focus {
    outline: none;    
}

.testimonials {
    background-color: #ffffff;    
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 4em;
}


.testimonials h3 {
    margin: 0;
    color: #FD0505;
    font-weight: 300;
    text-align: center;
    font-size: 1.8em;    
    padding: .8em 0em;
}

.testimonial {    
    padding: 2em;
    border-radius: 3px;    
}

.testimonial .grid {
    justify-content: start;
}

.testimonial p {
    color: #000;
    font-style: italic;
    font-size: 1em;
    vertical-align: top;
}

.testimonial-from {
    text-align: end;
}

.read-more {
    display: grid;
    justify-content: center;
}

.read-more a {
    display: block;
    text-decoration: none;
    background-color: #d8d8d8;
    color: #000;
    text-align: center;
    border-radius: 3px;
    padding: 1em;
    width: 8em;
}

footer {
    background-color: #000;
    color: #fff;
    font-size: .6em;    
    margin: 1em 6em;
}

.footer a:visited {
    color: #fff;
}


.social {        
}

.random-links img {            
    width: 80%;
}

.random-links p {
    padding-bottom: 2em;
}

.random-links h4 {
    font-size: 1.8em;   
}

.random-links ul {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.random-links p > a {
    color: #dd0505;
}



.random-links ul li {
    float: none;    
}

.random-links ul li a {
    font-size: 1em;    
    color: rgba(218, 218, 218, 0.555);
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    text-decoration: none;
    font-size: 1.2em;
}

.random-links ul li a:hover {
    color: #FD0505;
    text-decoration: none;
}

.footer-social-icons {
    width: 350px;
    display:block;
    font-size: 1.5em;    
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    padding: 0;
}

ul.social-icons li {
    vertical-align: top;
    float: left;    
    height: 60px;
}
.social-icons a {
    color: #fff;
    padding: 0;
    padding-right: .6em;
    text-decoration: none;
}
.social-icons .fa-facebook-f {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.social-icons .fa-facebook-f:hover {
    background-color: #3d5b99;
}
.social-icons .fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.social-icons .fa-twitter:hover {
    background-color: #00aced;
}
.social-icons .fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.social-icons .fa-youtube:hover {
    background-color: #e64a41;
}

.social-icons .fa-google-plus-g {
    padding:10px 9px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}

.social-icons .fa-google-plus-g:hover {
    background-color: #e25714;
}

.clearfix {
    overflow: auto;
    clear: left;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.partner-links {
    padding: 0;
}

.partner-links li a {
    font-size: 1em;    
    color: #fff;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    text-decoration: none;
    font-size: 1.2em;
}

.partner-links li a:hover {
    color: #FD0505;
    text-decoration: none;
}

.main-menu:hover .submenu {
    display: block;
}

.submenu {
    display: none;
}

.legal {
    font-size: .8em;
    text-align: center;
}


.sales-description {
    font-size: .7em;
    background-color: #FFF;
    color: #000;
    padding: 2em 5em;
}

.sales-description p {
    text-align: center;
}

.sales-description h3 {    
    font-size: 3em;
    font-weight: 200;
}

.sales-description img {
    display: block;
    width: 80%;
    margin: 0 auto;    
}

.sales-description .dt-logo {
    width: 40%;    
    display: inline-block;
}

.screen-bos {
    padding-top: 2em;
}


.sales-icons {
    font-size: .7em;
    background-color: #dfdfdf;
    color: #000;
    padding-top: 3em;
    padding-left: 8em;
    padding-right: 8em;
    padding-bottom: 3em;
    text-align: center;
}


.sales-icon-grid {
    padding-top: 3em;
    padding-left: 5em;
    padding-right: 5em;
    padding-bottom: 3em;
}


.sales-icon-container {
    display: block;
    font-size: 3em;
    color: #FD0505;
    border: 1px solid #FD0505;
    border-radius: 50%;
    height: 2.5em;
    width: 2.5em;
    text-align: center;
    line-height: 2.5em;  
    margin: 1em auto;  

}

.sales-icon-container p {
    font-size: .5em;
}

.sales-icon-container:hover {
    font-size: 3em;
    color: #fff;
    background-color: #FD0505;
    border: 1px solid #FD0505;
    border-radius: 50%; 
}

.sales-icons hr {
    width: 8%;
    height: 1px;    
    background-color: #acacac;
    border-top: none;    
    border-left: none;
    border-right: none;  
}

.sales-icon-container:hover + hr {
    width: 16%;
    height: 1px;    
    color: #FD0505;
    background-color: #FD0505;
    border-top: none;    
    border-left: none;
    border-right: none;  
}

.sales-icon-segment {
    margin-bottom: 3em;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

.demo-btn {
    display: block;
    background-color: #FD0505;
    padding: .6em;
    text-decoration: none;
    width: 100px;
    color: #fff;
    border-radius: 2px;
}

   
.call-to-action {
    background-image: url(/images/shifter-e1537391953919.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-top: 1px solid #ffffff;
    text-shadow: .8px .8px 3px #000000;    
    padding: 1em 3.5em;
    margin: 0;
    min-height: 200px;
}

.call-to-action h1 {
    font-size: 1.8em;
    font-weight: 300;
}

.call-to-action p {
    font-size: .8em;
    font-weight: 100;
}

.margin-bottom-1 {
    margin-bottom: 1em;
}

.margin-bottom-2 {
    margin-bottom: 2em;
}

.hero-service {
    background-image: url(/images/service-calendar.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-top: 1px solid #ffffff;
    text-shadow: .8px .8px 3px #000000;    
    padding: 0;
    margin: 0;
    min-height: 250px;
}

.service-cta {
    background-image: url(/images/console.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
}

.hero-crm {
    background-image: url(/images/coffee.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-top: 1px solid #ffffff;
    text-shadow: .8px .8px 3px #000000;    
    padding: 0;
    margin: 0;
    min-height: 250px;
}

.crm.sales-icons {
    background-color: #000;
    color: #fff;
}

.crm .sales-icon-container {
    color: #fff;
    border-color: #fff;
}


.crm .sales-icon-container:hover {
    font-size: 3em;
    color: #fff;
    background-color: #000;
    border: 1px solid #FFF;
    border-radius: 50%; 
}

.crm .sales-icons hr {
    width: 8%;
    height: 1px;    
    background-color: #acacac;
    border-top: none;    
    border-left: none;
    border-right: none;  
}

.crm .sales-icon-container:hover + hr {
    width: 16%;
    height: 1px;    
    color: #FFF;
    background-color: #FFF;
    border-top: none;    
    border-left: none;
    border-right: none;  
}

.crm-cta {
    background-image: url(/images/customers.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  
}

.hero-inv {
    background-image: url(/images/couch.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-top: 1px solid #ffffff;
    text-shadow: .8px .8px 3px #000000;    
    padding: 0;
    margin: 0;
    min-height: 250px;
}

.syndicate {
    display: grid;
    grid-template-columns: 100%;
    background-color: #fff;    
}

.syndicate .logo {
    display: block;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    padding-top: 2em;
}


.syndicate .arrow {
    display: none;
}


.syndicate .transfer-icon i {
    display: block;
    font-size: 3em;
    padding: 1em;
    color: #ff0000;
    font-style: italic;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.inv-cta {
    background-image: url(/images/key.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  
}


.contact-us {    
    background-color: #fff;
    display: grid;
    grid-template-columns: auto;   
}

.contact-form-grid {
    background-image: url(/images/contact-us-bg.jpg);
    background-size: cover;    
    background-position: center;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: auto;
}

.address h3 {
    text-align: left;
}

.contact-us .address {    
    color: #e7e7e7;
    margin-left: 5em;
    margin-bottom: 5em;
}

.contact-us .address p {
    font-size: 1em;
    line-height: .9em;
}

.map {
    background-image: url(/images/kitch_map.png);
    opacity: .9;
    background-size: cover;    
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.googlemap {
    height: 100%; 
    width: 100%; 
    position:absolute; 
    top: 0; 
    left: 0; 
    z-index: 0;
}



.hero-pricing {
    background-image: url(/images/sun_inventory.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    border-top: 1px solid #ffffff;
    text-shadow: .8px .8px 3px #000000;    
    padding: 0;
    margin: 0;
    min-height: 500px;
}


.prices {
    display: block;
    color: #000;
    margin-top: -12.65rem;
    min-height: 800px;
    padding-left: 1em;        
    padding-right: 1em;
    padding-bottom: 50px;   
}

.price-header {
    background-color: #fff;
    margin: 2em 1em;    
    border-radius: 2px;
    color: #000;
    border: .5px hsla(0, 0%, 67%, 0.596) solid;
    -webkit-transition: margin .4s; /* Safari */
    transition: margin .4s;
}

.price-header:hover {
    margin-top: -.5em;
    -webkit-box-shadow: 0px 12px 35px -2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 12px 35px -2px rgba(0,0,0,0.2);
    box-shadow: 0px 12px 35px -2px rgba(0,0,0,0.2);
}

.price-header-shadow {    
    -webkit-box-shadow: 0px 12px 35px -2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 12px 35px -2px rgba(0,0,0,0.2);
    box-shadow: 0px 12px 35px -2px rgba(0,0,0,0.2);
}

.price-header h3 {
    text-align: center;    
    font-size: 1.5em;
    font-weight: 600;
}

.price-header p {
    color: #646464;
    font-size: 1em;
    padding: 0em 3em;
}

.package-price {
    font-size: 2em;
    text-align: center;
    margin-top: 2em;
    font-weight: 500;
}

.package-price ins {
    font-size: .3em;
    margin-left: 0;
    display: block;
    font-style: italic;
    font-weight: 300;  
    text-decoration: none;  
}

.signup-btn {
    display: block;
    background-color: #ff0000;
    max-width: 150px;
    color: #fff;
    text-decoration: none;
    font-size: .8em;
    padding: .2em;    
    border-radius: 3px;
    margin: 1em auto;
}

.signup-btn:hover {
    background-color: #e70101;
}

.align-center {
    text-align: center;
}

.package-features {
    padding-left: 0;
}

.additional-features {
    padding-left: 0;
}

.package-features li {
    font-weight: 500;
    margin: 1em 0;
}

.additional-features li {
    font-weight: 300;
    font-size: .9em;
    margin: 1em 0;
}

.prices hr {
    width: 20em;
    border-color: hsla(0, 0%, 67%, 0.281);
}

.addons {
    margin: 0;
    background: #ecebeb41;
    height: auto;
    padding: 2em 1em;
}

.prices .addons h2,h3  {
    text-align: center;
}

.addons p {
    font-size: .8em;
    padding: 0 5em;
    text-align: center;
}

.addons__price {
    text-align: center;
}

.addons__price p {
    font-size: 1.4em !important;
    font-weight: 800;    
    margin-top: 1em;
}

.addons__price i {
    font-size: .6em;
}


.more {    
    background: #fff;;
    height: auto;
    padding: 1.5em 2.2em;
}

.more h1 {
    text-align: center;
    font-size: 1.6em;
}

.more ul {
    text-align: center;
    width: 300px;
    margin: 0 auto;
    list-style-type: circle;
    padding: 2em .5em;
}

.more p {
    font-size: .7em;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.faq__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.faq__item {
    display: flex;
    flex-direction: column;
    margin: 2em auto; 
    width: 90%;   
}

.faq {
    background: #eeeeee81;
    height: auto;
    padding: 1.5em 2.2em;
    margin: 1em .5em;
}

.faq h1 {
    font-size: 1.6em;
}

.faq p {
    font-size: 1em;
}

.faq .col {
    vertical-align: top;
}

.faq h1 {
    text-align: center;
}

@media only screen and (min-width: 720px) {

    .demo-item {
        width: 50%
    }

    .flex__item_2 {
        width: 45%;
        padding-left: 1em;
        padding-right: 1em;
    }

    .flex__item_3 {
        width: 25%;
        padding-left: 1em;
        padding-right: 1em;
    }

    .demo-button {
        margin-left: 1.5em;
    }

    .demo-btn-link {
        margin: 1em;
    }

    .random-links img {            
        width: 50%;
    }

    .newsletter__form {
        display: block;
        margin-left: 30%
    }
    

    .hero {     
        min-height: 550px;
    }

    .hero-sales {        
        min-height: 350px;
    }

    .hero-service {
        min-height: 350px;
    }

    .hero-crm {
        min-height: 350px;
    }

    .faq__item {
        width: 40%;
    }

    .glide__arrows {
        display: inherit;
    }

    .partners {
        padding: 1em 10em;
    }

    .specs { 
        padding: 1em 5em;
    }

    .features {
        padding: 3em 5em;
    }

    .testimonials {
        padding: 3em 10em;
    }

    .random-info {
        padding: 3em 10em;
    }

    .random-info h3 {        
        text-align: center;
        font-size: 1.3em;
    }

    .products {
        padding: 3em 10em;
    }
  
    .prices {
        display: block;
        color: #000;
        margin-top: -12.65rem;
        min-height: 800px;
        padding-left: 10em;        
        padding-right: 10em;    
    }
    

    .hbspt-form {
        margin: 4em;
    }

    .contact-us {    
        background-color: #fff;
        display: grid;
        grid-template-columns: 60% 40%;
    }  

    .contact-us .address {    
        color: #e7e7e7;
        margin-top: 8em;
        margin-left: 0;
    }

    .contact-form { 
        margin-left: 5em;
    }
    
    .contact-form-grid {        
        display: grid;
        grid-template-columns: 70% 30%;
    }
    
    .syndicate {
        display: grid;
        grid-template-columns: 50% 50%;
        background-color: #fff;    
        padding-left: 8em;
        padding-right: 8em;        
    }

    .syndicate .glide {
        padding-top: 11em;
    }

    .syndicate .arrow {
        display: block;
        max-width: 60%;
        height: auto;
        margin: 0 auto;
        padding: 2em;
    }

    .syndicate .transfer-icon i {
        display: none;
    }

    aside {
        grid-template-columns: auto 20%;  
    }

    .hide {
        display: flex;
    }

    .grid {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    h1 {
        font-size: 2.1em;
        margin: 0;              
        opacity: 1;
    }
    
    p {
        font-size: 1.5em;    
        margin: 0;
        padding-top: .3em;        
        line-height: 1.5em;
    }

    .newsletter p {
        font-size: .8em;
        font-weight: 100;
        padding-top: 3em;
        padding-left: 1.5em;
        padding-bottom: 3em;
        max-width: 70%
    }    

    .footer {
        display: grid;
        justify-items: center;
        grid-template-columns: 60% auto;    
    }

    .main-menu {
        position: relative;
        display: inline-block;
    }


    .submenu {
        display: none;
        position: absolute;
        background-color: #000000;        
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
        z-index: 1;    
        text-align: center;   
       
    }

    .submenu ul {
        padding: 0;        
    }

    .submenu ul li {
        display: inline-block;
        margin-left: auto;
        margin-right:  auto; 
        width: 100%   
    }

    .submenu ul li a {
        color: white;
        padding: 12px 16px;
        display: block;
        
        text-decoration: none;        
        text-align: center;
    }

    .sales-description {        
        padding-left: 12em;
        padding-right: 12em;
    }

    .sales-description p {        
        margin-left: 5em;
    }

    
    .sales-description .dt-logo {
        width: 30%;    
        display: inline-block;
    }

    .sales-icons {
        padding-left: 12em;
        padding-right: 12em;
    }

    .sales-icon-segment p {
        padding-left: 4em;
        padding-right: 4em;
    }

    .call-to-action {
        padding-left: 12em;
    }

    .crm-call-to-action {
       
        border-top: 1px solid #ffffff;
        text-shadow: .8px .8px 3px #000000;    
        padding-left: 12em;
        margin: 0;
        min-height: 400px;
    }  

    footer .random-links {
        padding-top: 5em;
        padding-left: 5em;
    }

    footer .social {
        padding-top: 5em;        
    }
}


@media only screen and (min-width: 1024px) {       

    .hero-content {
        padding-top: .5em;
        padding-left: 15%;
        padding-right: 15%;
    }

    aside {        
        position: fixed;
        grid-template-columns: 20% 70%;  
        top: 0;
        width: 100%;
        z-index: 5;                
    }

    h1 {
        font-size: 4em;
        margin: 0;
        padding-top: 1em;        
        opacity: 1;
    }
    
    p {
        font-size: 1.5em;    
        margin: 0;
        padding-top: .3em;        
        line-height: 1.5em;
    }
    
    #menu {
        display: none;
    }

    #logo img { 
        width: 200px;     
        height: auto;
    }
    


    .price {
        color: #FD0505;
        font-weight: 800;
        font-size: 3em;
        
    }
     
    
    .btn {
        background: #FD0505;
        border: 1px #FD0505;
        border-radius: 5px;
        padding: .5em;
        color: white;             
        text-decoration: none;
        text-align: center;
        width: 7em;
        display: block;
        font-size: 1.1em;         
        margin-top: 20px;
    
    }

    .price-button {
        padding-left: 6em;
    }
    
    .btn:hover {
        background: #dd0505;
    }
    
    .btn:focus {
        border: #dd0505
    }  

    .active {          
        position: relative;        
        background: #000;;
        overflow-x: auto; /* Disable horizontal scroll */        
        display: inline;                        
    }

    ul {            
        list-style-type: none;          
    }

    nav li {
        float: left;
    }
    
    nav ul li a {
        display: inline;
        text-decoration: none;
        text-transform: uppercase;
        font-size: .8em;
        display: block;            
        color: #ffffff;
        padding:  .8em 1.5em;                  
    }

    ul li>a:hover {
        text-decoration: underline;
        text-underline-position: under;
        text-decoration-color: #FD0505;
    }

    aside {
        background: #000;
        grid-template-columns: 20% 70%;        
        justify-items: end;
        align-items: center;        
    }

    .demo-button {
        padding: .8em 1.1em;
        background: #FD0505;
        border-radius: 3px;
    }
    
    .demo-button {
        text-decoration: none;
    }
    
    .demo-button:hover {
        text-decoration: none;
        background-color: #FD0505;
    }

    
    .newsletter .grid {
        display: flex;
        justify-content: flex-end;
    }

    .newsletter form {
        margin-left: 18em;
        padding-bottom: 2em;
    }

}