@charset "UTF-8";
/* CSS Document */

/* ==========================================================================
                                 Global
========================================================================== */
* {
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}
#clients, #colors, #color-divider, #footerArea, body {  overflow-x: hidden!important;}
body
 { 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;font-family: 'Raleway', sans-serif;
	overflow-y: scroll;
height: 100%;
}
.top-page-margin {padding-top: 70px;}

#color-divider {background-image:url(../images/color-divider.jpg); background-repeat:no-repeat; background-size:cover; height:6px; width:100%; background-position:top center; border-bottom:1px solid #000;}
#color-divider-large {background-image:url(../images/color-divider.jpg); background-repeat:repeat; background-size:contain; height:200px; width:100%;  border-bottom:1px solid #000;}

.black-bkgd {background-color:#000000 !important;padding-bottom: 20px;}
.cyan-bkgd {background-color:#5fb9c1 !important;padding-bottom: 20px;}
.magenta-bkgd {background-color:#9c579a !important;padding-bottom: 20px;}
/* ==========================================================================
                               Navigation
========================================================================== */

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar .navbar-collapse {
  text-align: right;
}
.navbar-inverse {
    background-color: #000000;
    border: none;
    border-radius: 0 !important;
	vertical-align:middle;
}
.navbar-inverse .navbar-nav>li>a {
 padding:42px 12px 10px 12px;
 margin:0;
 color:#fff;
 text-transform:uppercase;
 font-family: 'Raleway', sans-serif;
 transition: background-color 0.5s ease;
  transition: all 0.2s linear;
}
.navbar-inverse .navbar-nav .nav-rollover-teal>a:hover, 
.navbar-inverse .navbar-nav .nav-rollover-teal>a:focus, 
.navbar-inverse .navbar-nav .nav-rollover-teal>a:active {background-color:#5fb9c1;}
.navbar-inverse .navbar-nav .nav-rollover-green>a:hover,
.navbar-inverse .navbar-nav .nav-rollover-green>a:focus,
.navbar-inverse .navbar-nav .nav-rollover-green>a:active {background-color:#65ad49;}
.navbar-inverse .navbar-nav .nav-rollover-magenta>a:hover,
.navbar-inverse .navbar-nav .nav-rollover-magenta>a:focus,
.navbar-inverse .navbar-nav .nav-rollover-magenta>a:active {background-color:#9c579a;}
.navbar-inverse .navbar-nav .nav-rollover-red>a:hover, 
.navbar-inverse .navbar-nav .nav-rollover-red>a:focus,
.navbar-inverse .navbar-nav .nav-rollover-red>a:active {background-color:#bc4038;}
.navbar-inverse .navbar-nav .nav-rollover-blue>a:hover,
.navbar-inverse .navbar-nav .nav-rollover-blue>a:focus,
.navbar-inverse .navbar-nav .nav-rollover-blue>a:active {background-color:#314e9a;}





.navbar .navbar-brand {background-image:url(../images/splogo-horizontal.png); width:230px; background-repeat:no-repeat; background-size:contain; margin:15px 0 0 0;}
.navbar .navbar-brand:hover { opacity: 0.75; filter: alpha(opacity=75);}

.navbar-nav>li>ul {margin:0; padding:0;}
.navbar-nav>li>.dropdown-menu {border-radius:0;margin:0; transition: background-color 0.5s ease;}
.navbar-nav>li>.dropdown-menu>li>a {color:#fff; padding:10px;}
.navbar-nav>li>.dropdown-menu>li {color:#fff;padding:0; border-bottom:1px solid #fff;margin:0;}
.navbar-nav>li>.dropdown-menu>li>a:hover { background-color:#000;color:#fff;}

a.dropdown-toggle { background-color: transparent;}

.navbar-nav>li>.dropdown-menu.nav-teal{background-color:#5fb9c1;}
.navbar-nav>li>.dropdown-menu.nav-green{background-color:#65ad49;}
.navbar-nav>li>.dropdown-menu.nav-magenta{background-color:#9c579a;}
.navbar-nav>li>.dropdown-menu.nav-red{background-color:#bc4038;}
.navbar-nav>li>.dropdown-menu.nav-blue{background-color:#314e9a;}

/* =================================   Shrink Nav   ==================================== */

nav.navbar.shrink {
  height: 50px;
  margin: 0;
  padding:0;
  border:0 !important;
}

nav.shrink a {
  padding-top: 18px !important;
  padding-bottom: 5px !important;
  font-size:14px;
}
nav.shrink .navbar-brand {
  padding:0; margin:5px 5px 5px 10px;
  transition: all 0.2s linear;
  background-image:url(../images/splogo-icon.png);  width:80px; background-repeat:no-repeat; background-size:contain; margin:2px;
}

nav.shrink .navbar-toggle {
  padding: 10px;
  margin: 3px 10px 3px 3px;
}
nav.shrink .dropdown-menu li {padding:0;}

/* ==========================================================================
                                 Content
========================================================================== */

#featureArea {padding-top:150px;}
.infoSP {background-image:url(../images/SP-Call.jpg);  background-size:auto 80%;min-height:300px;background-repeat:no-repeat; background-position:0 center; }
.center-block {margin:auto; display:block;}

h1, h2, p {font-family: 'Raleway', sans-serif;}

.align-right {text-align: right!important;}
.align-center {text-align: center!important;}
.position-relative {position: relative}

.pad-top-10 {margin-top: 10px}

li {text-transform:capitalize;}

.show-demo {display: none;}

.generic-row {
    margin: 3em auto;
}
.generic-wrap {
    width: 75%;
    margin: auto;
}


.flex-parent {
    display: flex;
}
.flex-end {
    align-items: flex-end;
}
.align-center {
    align-items: center;
}
#footerArea p {
    margin-bottom: 0;
}
.col-sm-9.flex-parent a {
    margin-left: 2em;
}

/* =================================   Copy Styles   ==================================== */

h3 { font-family: 'Raleway', sans-serif;}
.white {color:#FFF;}

h4 { font-family: 'Raleway', sans-serif; color:#bc4038 ; font-size:19px; text-transform:uppercase;}
h5 { font-family: 'Raleway', sans-serif; color:#bc4038 ; font-size:18px; text-align: center}


/* =================================   Slanted Copy Area   ==================================== */

.inside-top-margin {padding-top:50px;}

div.slanted-inside {
  position: relative;
  display: inline-block;
  padding: 2em 2em 2em 10em;
  overflow: hidden;
  color: #fff;
  height: 100% !important;
}
div.slanted-inside:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 100%; height: 100%;
  background: #1d5468;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  z-index: -1; 
}

.inside-top-margin {padding:0 0 70px 0;}
.wordlimit-first-inside { margin:5% auto 0 10%; color:#1d5468 !important;}


.content p.lg {font-size:20px;font-family:'Raleway';vertical-align: middle;text-align:left;font-weight: bold;margin: 0;}
.content span, .content p {font-size:17px; text-align:left;font-family:'Raleway';vertical-align: middle;}
div.white-copy {color:#1d5468;font-size:16px;padding: 2em 4em 2em 4em;}
div.teal-copy {padding: 2em 8em 2em 4em;background: #1d5468;color:#fff;max-width:100%;}
div.teal-copy p {font-size:20px;font-family:'Raleway';font-weight:bold;}
div.teal-copy span {font-size:16px;font-family:'Raleway';}


/* =================================   Image Styles   ==================================== */






/* =================================   Forms   ==================================== */

input {border-radius:0!important;}
input:focus {
    outline: none !important;
    border:1px solid FF4C01!important;
    box-shadow: 0 0 10px #FF4C01!important;
}
.btn  {background-color:#FF4C01;border-radius:0;border:0;padding:15px 25px;}
.btn:hover {background-color:#646464;}

button {box-shadow:none!important;}
.btn-outline-red {background-color: #ca3a2b;color:#fffff;transition: all .5s;border-radius:3px !important; padding:4px 15px; margin-bottom:10px;line-height: 30px;	width: 100%;	cursor: pointer; text-align:center; margin-left:auto; margin-right:auto;box-shadow:none!important; border: 1px solid rgba(188,64,56,0.5);}
.btn-outline-red:hover {color: rgba(202, 58, 43, 1) ;background-color:transparent;}
.button-red {
	color: rgba(225,225,225,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative; box-shadow:none!important;
}
.button-red a{
	color: rgba(225,225,225,1);
	text-decoration: none;
	display: block;
}
.button-red::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border: 1px solid rgba(188,64,56,0.5);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;border-radius:3px; 
}
.button-red:hover::before{
	opacity: 0;
	-webkit-transform: scale(1.2,1.2);
	transform: scale(1.2,1.2);border-radius:3px; 
}
.button-red::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background-color: rgba(188,64,56,1,0.25);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-transform: scale(0.5,0.5);
	transform: scale(0.5,0.5);
}
.button-red:hover::after{
	opacity: 1 ;
	-webkit-transform: scale(1,1);
	transform: scale(1,1);border-radius:3px; 	border: 1px solid rgba(188,64,56,0.5);

}



/* =================================   Tesitimonial Area   ==================================== */

.testimonial-slider {width: 300%;overflow: hidden; -webkit-transition: margin-left 500ms ease-in-out; -moz-transition: margin-left 500ms ease-in-out; -o-transition: margin-left 500ms ease-in-out; -ms-transition: margin-left 500ms ease-in-out; transition: margin-left 500ms ease-in-out;}
.testimonial-slider .testimonial-slide {display: block;position: relative; width: 33.3333%; float: left; min-height: 200px;margin: 0; padding: 0;}
.testimonial-slider  p {font-size:18px;text-align: justify;font-family:'Raleway';font-weight:bold;font-style: italic;color: #999999;padding: 0 60px;margin:20px 200px;}
.testimonial-slider  p:before {display: block;content: "\201C";font-size: 80px;position: absolute;left: 200px;top: 0;color: #5fb9c1;font-family: Georgia, serif;}
.testimonial-slider span {color: #5fb9c1;font-size: 14px;display: block;text-align: right;margin: 5px 200px 20px 200px;font-family:'Raleway';padding: 0 60px;}
.testimonial-slider span:before {content: "\2014 \2009";}

/* ==========================================================================
                                 Color Bars
========================================================================== */

#hidden-copy  { color:#fff; text-transform:uppercase; font-family: 'Raleway', sans-serif; margin:170px auto 0 auto; position:absolute; font-size:16px; text-align:center; display:block;height: 20px!important; bottom:0;width: 100%;  z-index:300000 !important;}
#colors {height:200px; width:100% !important; }
.static{ padding:0; !important margin:0 !important; width:100% !important; opacity: 0;
	transition: opacity 0.5s ease-in-out;    -webkit-transition: opacity .3s ease-in-out;    -moz-transition: opacity .3s ease-in-out;}
#colors div .static:hover{background-image:url(../images/static.gif); object-fit: cover; width:100%;opacity: 1; }
video source {z-index:3 !important;}
.thevideo {position:absolute; z-index:3; display:block;  left: 50%;   top: 50%;   transform: translate(-50%, -50%);}
.video .thevideo {	opacity: 0; 	transition: opacity 0.5s ease-in-out; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out;margin}
.video:hover .thevideo, .video:hover #hidden-copy { opacity: 1;}

.VideoH2 {display:block; position:absolute; bottom:0;font-size:19px; margin-bottom:0;}

/* Added CSS for Video Hover */
.smooth-fade {	opacity: 0;	transition: opacity 0.5s ease-in-out;    -webkit-transition: opacity .3s ease-in-out;    -moz-transition: opacity .3s ease-in-out;}
.smooth-fade:hover { opacity: 1; }


/* .video video:hover{height:200px; object-fit: cover; z-index:10; background-position:center center;visibility: visible;}
.video video {visibility:hidden}
/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
    display:none !important;
}

#colors div{height:200px;position:relative!important;  overflow: hidden;  padding:0; !important margin:0 !important; }
.grey {background-color:#cccccc !important;    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%; height:100% !important; }
.yellow {background-color:#cdcb2b !important;    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%; height:100% !important;}
.cyan {background-color:#5fb9c1 !important;    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%; height:100% !important; }
.green {background-color:#65ad49 !important;    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%; height:100% !important; }
.magenta {background-color:#9c579a !important;    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%; height:100% !important;}
.red {background-color:#bc4038 !important;    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%; height:100% !important;}
.blue {background-color:#314e9a !important;    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%; height:100% !important;}
	

/* ==========================================================================
                                 Video Page Demo Section
========================================================================== */

.carousel-inner {padding-top:80px;}
.demo-slider {padding-bottom:10px;}
.demo-vid:hover {background-color: rgba(0,0,0,0.60);z-index: 9999}

.pdf-thumb-box{display:block !important;position:relative !important; overflow: hidden;	width: 100% !important; padding-bottom: 56.25%; height: 0; padding: 0;padding-bottom: 56.25%;}
.pdf-thumb-box-overlay {visibility:hidden;  opacity:0;  transition:visibility 0s linear 0.5s,opacity 0.5s linear;}
.pdf-thumb-box a{color:transparent;}
.pdf-thumb-box a:hover .pdf-thumb-box-overlay { visibility:visible; opacity:1; transition-delay:0s; text-align:center; position: absolute; color: #fff; width:100%; height:100%; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); z-index: 200000 !important;}
.vid1:hover  {background-color: rgba(95, 185, 193, 0.64); }
.vid2:hover  {background-color: rgba(101, 173, 73, 0.64); }
.vid3:hover  {background-color: rgba(156, 87, 154, 0.64); }
.vid4:hover  {background-color: rgba(188, 64, 56, 0.64); }
.vid5:hover  {background-color: rgba(49, 78, 154, 0.64); }

.VideoH3 { position:absolute; font-size:19px;z-index: 999 !important; color: #fff; bottom: 0; left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);text-align: center;line-height: 20px }

.pdf-thumb-box-overlay span {margin: auto;position: relative;top: 78%; left: 0; bottom: 0; right: 0; z-index: 300000 !important;}
.pdf-thumb-box iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; z-index: 0 !important;}

.pad-btm-10 {margin-bottom: 10px;}


	
/* ==========================================================================
                                 Footer
========================================================================== */

footer {
    background-color: #000;
    min-height: 50px;
	padding:20px 0;
	color:#fff;
	font-size:11px;
	font-family: 'Raleway', sans-serif;
}
.img-social-link {
    margin: 0;
    padding: 0;
    transition: all 0.2s linear;
    width: 35px;
}
.img-social-link:hover {
   opacity: 0.5;
    filter: alpha(opacity=50);
}

.social-links-list {
    float: right;
}


/* ==========================================================================
                              Index Page
========================================================================== */

/* =================================   Video Header   ==================================== */

.content-section {padding-top:80px;background-color: rgba(0, 0, 0, 1.0);
}
/*.video-section .pattern-overlay {
background-color: rgba(0, 0, 0, 0.3);
padding: 110px 0 32px;
min-height: 499px; 
Incase of overlay problems just increase the min-height
margin-top:-5px
}*/
.video-section .pattern-overlay {
background-color: rgba(0, 0, 0, 0.3);
padding: 0;
height: 499px;
margin-top:-5px;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
.video-section .pattern-overlay video {
    width: 100%;
}

#slidecopy {
width: 400px;
position: absolute;
left: 50%;
margin-left: -200px;
bottom:0;
z-index:1000;color:#fff;
}
.video-section h3{
font-size: 25px;
font-weight:lighter;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
margin: 10px auto;
text-shadow: 2px 2px 2px #000 !important;
content-section
position:absolute;
text-align:center;
color:#fff;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}

/* =================================   Slanted Copy Area   ==================================== */

div.slanted {
  position: relative;
  display: inline-block;
  padding: 2em 8em 2em 4em;
  overflow: hidden;
  color: #fff;
  min-height:300px
}
div.slanted:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 100%; height: 100%;
  background: #1d5468;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  z-index: -1;
}
div.slanted .wordlimit {max-width:60%;display:block; margin:0 auto;}
.wordlimit-first {max-width:65%;display:block; margin:5% auto 0 auto; color:#1d5468;}
.testimonial p {font-size:21px;
font-family:'Raleway';
font-weight:bold;
}
.testimonial span {font-size:17px;
font-family:'Raleway';
}


/* =================================   Red Parallax Callout   ==================================== */

.callout-white  {max-width:79%; margin:5% auto 0 auto; color:#fff; text-transform:uppercase; font-variant:normal;font-size:18px;  display: table;
  height: 100%;  width: 100%;}
.btn-outline {background-color: transparent;color: white;transition: all .5s;border-radius:3px; padding:4px 15px; margin-bottom:10px;line-height: 30px;	width: 60%;	cursor: pointer; text-align:center; margin-left:auto; margin-right:auto;}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {color: #fff;background-color: transparent;}


.parallax-red .wordlimit a {border: none;color: #fff; padding:0}

.parallax-red p {text-align: center}

.parallax-red a {
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid;
  color: #fff;
  line-height: 1.4;
  padding: .15em;
  text-decoration: none;
}

.parallax-red a:hover {
  background: rgba(255, 255, 255, 0);
  color: #fff;
}

.btnn {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}

.btnn:hover {
  text-decoration: none;color: #fff;
}

.btn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.btn-4 span {
  z-index: 20;
}
.btnn:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btnn:hover:after {
  left: 120%;
  -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}


.button13 {
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative; 
}
.button13 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	display: block;
}
.button13::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	border: 1px solid rgba(255,255,255,0.5);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;border-radius:3px; 
}
.button13:hover::before{
	opacity: 0;
	-webkit-transform: scale(1.2,1.2);
	transform: scale(1.2,1.2);border-radius:3px; 
}
.button13::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background-color: rgba(255,255,255,0.25);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-transform: scale(0.5,0.5);
	transform: scale(0.5,0.5);
}
.button13:hover::after{
	opacity: 1 ;
	-webkit-transform: scale(1,1);
	transform: scale(1,1);border-radius:3px; 
}

.slide {
  position: relative;
  padding: 0;
  min-height: 150px;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
	transform-style: inherit;
}
.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
}

.slide, .slide:before {
  background: 50% 50% / cover;  background-repeat: no-repeat;background-position: center;
}

#slide1 {
  background-image: url("../images/Philadelphia-Skyline.jpg");
  background-attachment: fixed;     
}

.parallax-red {background:url(../images/SP-Site_parallax-red.png)  center right no-repeat; background-size:auto 100%;  height:150px;background-repeat:no-repeat; background-position:center right;}


/* =================================   Clients   ==================================== */

#clients {background-color:#000; min-height:50px;}







/* ==========================================================================
                                 Responsive
========================================================================== */

@media (min-width: 1200px) {
	
	.testimonial-slider  p {padding: 0 40px;margin:20px 250px;}
	.testimonial-slider  p:before {left: 230px;top: 0;}
	.testimonial-slider span {margin: 5px 250px 20px 250px;padding: 0 60px;}
	
	div.white-copy {padding: 2em 8em 2em 8em;}
	
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
  	.hidden-mobile {display: none;}

}
/* 14% = 100% (full-width row) divided by 7 */

@media (min-width: 1100px) {
	.inside-top-margin {padding:0 0 150px 0;}
}

@media only screen and (max-width: 1276px) {
	.infoSP {  background-size:auto 80%;background-position:0 50px; }
	div.slanted .wordlimit {max-width:90%; margin:0 -60px 0 50px;}
	.hidden-mobile {display: none;}
	.testimonial-slider  p {padding: 0 80px;margin:20px 60px;}
	.testimonial-slider  p:before {left: 75px;top: 0;}
	.testimonial-slider span {margin: 5px 60px 20px 60px;padding: 0 80px;}
	
	div.slanted  {padding-bottom:50px;}

}

@media only screen and (max-width: 1128px) {
	
	.inside-top-margin {padding-top:50px;}
	.callout-white  {font-size:16px; }	
	

}

@media only screen and (max-width: 991px) {
	#featureArea {padding-top:110px;}
	.navbar .navbar-brand { width:70px; background-image:url(../images/splogo-icon.png);}
	.infoSP {  background-size:90% auto;background-position:-10px 150px; height:450px }	
	
	div.slanted .wordlimit {max-width:100%; margin:0 -70px 0 50px;}
	div.slanted p {margin-top:0px;	}
	div.slanted  {padding-bottom:30px;}

	
	.demo-slider {height: 550px; padding-top:50px;}
	#demos {padding-top:80px;}
	.testimonial-slider  p {padding: 0 40px;margin:20px 40px;}
	.testimonial-slider  p:before {left: 25px;top: 0;}
	.testimonial-slider span {margin: 5px 40px 20px 40px;padding: 0 60px;}
	
}

/* 890px */
@media screen and (max-device-width: 55.625em), screen and (max-width: 55.625em) {
    .video-section .pattern-overlay video { height: 100%; width: initial; }
}


@media only screen and (max-width: 768px) {
	.navbar-inverse .navbar-nav>li>a {padding: 12px;}
	.navbar .navbar-brand { width:75px; position:absolute; top:0; left:2px;}	
	nav.shrink .navbar-brand{  margin-top: 10px;}
	.navbar-inverse .navbar-nav { width:100%;}
	.nav {background:#000 !important; width:100%; margin:0;}
	.demo-slider {height: 440px; padding-top:50px;}
	.testimonial-slider  p {padding: 25px 40px;margin:0;}
  .testimonial-slider p::before {
    left: 8px;
    top: -5px;
    font-size: 60px;
  }

	.testimonial-slider span {margin:5px 0 15px 0 ;padding: 0 60px;}
	
	div.slanted p {margin-top:50px;}
	div.slanted  {  width:100%!important;background: #1d5468;padding-right:4em;}
	div.slanted:after {content: none;}
	div.slanted .wordlimit {max-width:100%;display:block; margin:0 auto;}
	
	div.slanted-inside  { width: 100%!important;background: #1d5468;padding-right:4em;margin-bottom:-10px;padding-bottom:20px;}
	div.slanted-inside:after {content: none;}
	div.slanted-inside .wordlimit-inside {max-width:100%;display:block; margin:0 auto;}
	.inside-top-margin {padding:0;}
	
	.hide-demo, .pdf-thumb-box-overlay {display: none;}
	.show-demo {display:inherit; width:100%;margin-top:-150px;margin-bottom:-50px; overflow:hidden;}
	.show-demo img { height:500px; object-fit: cover !important;width:100% !important; }

	
	
	.mobile-80 {width:70%;overflow:hidden;}
	
    .navbar-nav > li:hover > .sub-menu{  display: block;}  
	.mobile-nav{       display: block;    }
    .sub-menu{   position: static;    }
	.dropdown-menu:hover, dropdown-toggle:hover, dropdown:hover {display:hidden;}


	#featureArea {padding-top:80px;}
	.btn  {width:100%;}
	ul.nav {width:100%;margin:0!important; padding:0!important;}
	ul.nav li.dropdown:hover > ul.dropdown-menu  { display: block;margin:0; padding:0}
	ul.nav li.dropdown:hover > ul.dropdown-menu ul { margin:0; padding:0}
	ul.nav li.dropdown:hover > ul.dropdown-menu a {color:#000; padding:15px;}
	

	.infoSP {  background-size:auto 80%;background-position:center center; }
	.parallax-red { background-position:center left;}
	.btn-outline {width: 100%; }
	#colors {display:none; }
	.hidden-mobile {display: inherit;}
  .wordlimit-first {
    max-width: 90% !important;
  }
  .testimonial-inside {
    margin: 5% auto 0 10%;
  }

  #thanks {
    padding-left: 0 !important;
  }
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
  max-height: none !important;
}
    
    .generic-wrap { width: 93%; }
    .generic-wrap .wordlimit-first-inside { margin: auto; }

}
/* 600px */
@media screen and (max-device-width: 37.5em), screen and (max-width: 37.5em) {
    .video-section .pattern-overlay { height: 39vh; }
    
    .flex-parent { flex-direction: column; }
    .col-sm-9.flex-parent a { margin: 1em auto 0; }
    .col-sm-9.flex-parent a + a { margin: 0 auto 1em; }
}
    
@media only screen and (max-width: 420px) {
	div.slanted  { background: #1d5468;height:180px;padding:13px 25px;margin:0;}
	div.slanted p {font-size:19px;margin-top:0;}
	div.slanted:after {content: none;}	
	
	div.slanted-inside  { width: 100%!important;padding:20px!important;}

	.btn-outline { font-size:12px;padding:4px;}
	.demo-slider {height: 250px; padding-top:50px;}
	
	.btn-outline {line-height: 17px!important; margin-top: 15px}
	.parallax-red p {font-size: 13px!important;margin-top: 5px}
}