/*
	COLORS:
	Scooter blue: #32C4DE;
	darker  blue: #2CADC3;
	Persimmon orange: #F55912;

	FONTS:
	font-family: 'Teko', sans-serif;
	font-family: 'Montserrat', sans-serif;

*/

/* 	GLOBAL 	*/

body {
	background: white;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	color: white;
	line-height: 2.5rem;
	font-size: 1.4rem;
	letter-spacing: .03em;
}

.site {
	position: relative;
}

h1, h2, h3, h4, ul {
	margin:0;	
}

h2 {
	font-family: 'Teko', sans-serif;
	font-size: 6rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.container-fluid {
	max-width: 1060px;
}

.row > div[class*="col-"] > .row {
  margin:0;
}

.btn {
	box-shadow: 0 6px 0px #1E7685;
	padding: 10px 36px 10px 36px;
	background-color: #32C4DE;
	color: white;
	border: none;
	position: relative;
	margin-bottom: 6px;
	margin-top: 6px;
	text-transform: uppercase;
	font-size: 1.7rem;
}

.btn:hover, .btn:focus, .btn:active {
	box-shadow: 0 3px #1E7685;
    top: 2px;
    color: white;
    outline:none;
}


/* 	HEADER	*/
header {
	background-color: #32C4DE;
	padding: 10px;
	color: white;
	position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    border-bottom: 2px solid white;
}

.logo img{
	max-width: 157px;
}

.call-us {
	text-align: right;
}

.call {
	margin: 12px 0 12px 0;
}

/* 	HERO SECTION 	*/
video { 
  z-index: -100;
  background-size: cover;
  transition: fadeIn 1s ease-in-out;
  filter: brightness(1.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: darken;
  mix-blend-mode: screen;
  opacity: .59;
}
.hero {
	height: 300px;
 	background-repeat: no-repeat;
 	background-size: cover;
 	overflow: hidden;
 	position: relative;
 	margin-top: 66px;
}

.hero-box {
	background: white;
	background: rgba(255,255,255,.9);
	text-align: center;
	position: absolute;
	top: 58%;
	left:50%;
	transform: translate(-50%,-50%);
	padding: 3em 2em;
	max-width: 425px;
	transition: all 300ms ease-in-out;
	border-radius: 2px
}

.animated {
  animation-duration: 500ms;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
}

.jumbotron h1 {
	margin: 0 0 1rem 0;
	font-family: 'Teko', sans-serif;
	color: #F55912;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 4.5rem;
}

.bg {
	background: url('../images/shutterstock_119369974-2.jpg') no-repeat center center;
	background-position: 75% 35%;
	background-size: cover;
	position: fixed;
	width: 100%;
	height: 75vh; 
	top:66px;
	left:0;
	z-index: -1;


	  /*font-weight: 100;*/
  background-image: linear-gradient(178deg, rgba(128,208,199,1) 0%, rgba(19,84,122,.7) 100%);
  
  background: linear-gradient(90deg, rgba(134,14,39,0.9), rgba(211,31,60,0) );
  background: linear-gradient(170deg, rgba(134,14,39,1), rgba(211,31,60,.5) );
  background-image: linear-gradient(to top, rgba(255,8,68,.5) 0%, rgba(255,177,153,.7) 100%);
  background-image: linear-gradient(80deg, rgba(112,40,228, .5)  0%, rgba(22,178,202, .9)100%);
  background-image: linear-gradient(0deg, rgba(128,208,199,1) 0%, rgba(255,177,153,.7)100%);

  height: 100vh;

}


.jumbotron {
	height: 75vh;
	background:transparent;
	padding-bottom: 0; 
	margin-bottom: 0; 
	overflow: hidden;
	position: relative;
}

/* 	ABOUT SECTION 	*/

.divider {
	background: url(../images/divider2xcrop7.png);
	background-size: 125px 19px;
	height: 19px;
	position: relative;
    top: 9px;
}

.divider-bg {
	background-color: #32C4DE;
	height: 19px;
}

.divider-orange {
	background: url(../images/divider2xcrop-orange.png);
	background-size: 125px 19px;
	height: 19px;
	position: relative;
    top: 9px;
}

.about {
	background: #F55912;
	padding: 4.5rem 0 4rem 0;
}

.arrow-container {
	background: #32C4DE;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #F55912;
    margin: 0 auto;
}

/* 	SERVICES SECTION 	*/
.services {
	background: #32C4DE;
	padding: 4rem 0 4rem 0;
}

.serv-lists {
	padding-top: 2em;
	transition: all 300ms ease-in-out;
}

ul {
	padding: 0;
}

li.check {
	background: url('../images/check.png') no-repeat left top;
	background-size: 18px 18px;
	padding-left: 30px;
	list-style-type: none;
	line-height: 1.6rem;
	padding-bottom: 20px;
	transition: all 300ms ease-in-out;
}

/* 	CONTACT SECTION 	*/

.contact {
	background: white;
	padding: 5rem 0 4rem 0;
	color: #666666;
}

.contact h2 {
	margin-top: 9px;
	color: #F55912;
}

.heavy {
	font-weight: 700;
	text-transform: uppercase;
}

form  {
	margin: 2rem 0 2rem 0;
}

.form-item {
	margin: 2rem 0 0 0;
}

.form-control {
	height: 40px;
}

.form-control:focus {
	border-color: #FF9235; 
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(255,146,53,.075), 0 0 8px rgba(255,146,53,.75);
}

label {
	font-weight: 400;
}

.contact .btn {
	margin-top: 4rem;
	width: 100%;
	background-color: #F55912;
	box-shadow: 0 6px 0px #9D3915;
}

.contact .btn:hover, .contact .btn:focus, .contact .btn:active {
	box-shadow: 0 3px #9D3915;
}

/* 	FOOTER 	*/

footer {
	background: #32C4DE;
	padding: 10px;
	color: white;
	font-weight: 400;
}

footer a {
	color: #fff;
}


/* PATROLLER*/
.card {
	background: url(../images/truck-bg.png);
}

.truck-bg {
	background: url(../images/truck-bg-500-a32.png) no-repeat right;
	background-size: 500px;
}
/* END PATROLLER*/

.is-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(50px);
}

.is-hidden-btn {
    visibility: hidden;
    opacity: 0;
    transform: translateY(50px);
}

.not-hidden {
    visibility: visible;
    opacity: 1;
    transform: translateY(1px);
}


/* MEDIA QUERIES*/

@media (max-width: 1200px) { 
	.bg {
		background-position: 38% 15%;
	} 
}

@media (max-width: 768px) { 
	.bg {
		background-position: 25% 32%;
	}

	h2 {
	    font-family: 'Teko', sans-serif;
	    font-size: 4rem;
	    text-transform: uppercase;
	    margin-bottom: 1.5rem;
	}
	.jumbotron h1 {
	    font-size: 3.5rem;
	}
}


@media (max-width: 576px) { 
	.serv-lists .col-xs-6{
		width: 100%;
	}

	.bg {
		background-position: 25% 32%;
	}

	.submit .col-xs-6 {
		width: 100%;
	}

	.call {
		text-align: center;
		width: 100%;
		margin: 2px 0 2px 0;
	}

	.call-us, .copyright {
		text-align: center;
		width: 100%;	
	}

	.truck-bg {
		background-size: 250px;
	}
}