/* Move down content because we have a fixed navbar that is 3.5rem tall */

body {
  font-family: 'Roboto', sans-serif;
}

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn-primary {
  background-color: #00538b;
  border-color:#00538b;
}

/* CUSTOMIZE THE HOME PAGE SECTION
-------------------------------------------------- */
.container-intro {
	min-height: 600px;
	background-image: url("https://www.cybersafe360.com/images/lock-background.jpg");
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-color: #ffffff; 
}

.container-copy {
	margin-left:10%;
	width: 60%;
}

@media screen and (max-width: 767px) {
    .container-copy {margin-left:0; width: 100%;}
}

.container-copy h4{
	padding-top: 72px;
	padding-bottom: 36px;
	font-size: 36px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
}

.container-copy p{
font-size: 28px;
  font-weight: 100;
  font-family: 'Roboto Condensed', sans-serif;
  padding-bottom: 24px;
}

.container-copy strong{
  font-weight: 700;
}


.container-home-services {
	margin-top: -16px;
		padding-top:36px;
		padding-bottom: 36px;
	  background-color: #f2f1f1; 
}


.container-home-services-content {
	margin: 0 auto;
	width: 90%;
}

.container-home-services-content h4{
	font-size: 36px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  line-height: 47px;
}


.container-home-services-content p{
font-size: 28px;
  font-weight: 100;
  font-family: 'Roboto Condensed', sans-serif;
  padding-bottom: 24px;
  line-height: 48px;
}

.service-box {
background-image: linear-gradient(to bottom, rgba(210,209,210,0), rgba(210,209,210,1));
width: 200px;
min-height:500px;
margin-top: 72px;
border: 4px solid #f2f1f1;
padding: 24px;
}

@media screen and (max-width: 767px) {
    .service-box {width: 100%;}
}

.service-box img {
padding-bottom: 24px;
}

.service-box h2 {
font-size: 28px;
	font-weight:300;
  font-family: 'Arial', sans-serif;
  text-align: center;
  padding-bottom: .8em;
  margin-top: 0px;
}

.service-box p{
	font-size: 16px;
  font-family: 'Arial', sans-serif;
  line-height: 28px;
}
.row-1 {height:260px;}

.row-2 {height:350px;}

.row-3 {height:200px;}

.container-team-callout h4{
	padding-top: 36px;
	padding-bottom: 36px;
	font-size: 36px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}


.container-team-callout p{
font-size: 28px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  padding-bottom: 72px;
   text-align: center;
   line-height: 48px;
}

.container-team-callout  strong{
  font-weight: 700;
}


.container-industries {
	
}

.container-industries a{
	color: #ffffff;
	text-decoration: none;
}

.container-industries .industry {
	background-color: #757679;
	height: 300px;
	padding-top: 120px;
	font-size: 48px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
    letter-spacing: 4px;
}

.container-industries .legal {
	height: 300px;
}

.container-industries .financial {
background-image: url("https://www.cybersafe360.com/images/financial.jpg");
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
	background-color: #757679;
	height: 300px;
	padding-top: 130px;
	font-size: 28px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
}

.container-industries .education {
background-image: url("https://www.cybersafe360.com/images/education.jpg");
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
	background-color: #757679;
	height: 300px;
	padding-top: 130px;
	font-size: 28px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
}

.container-industries .government {
background-image: url("https://www.cybersafe360.com/images/government.jpg");
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
	background-color: #757679;
	height: 300px;
	padding-top: 130px;
	font-size: 28px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
}

.container-industries .smb {
background-image: url("https://www.cybersafe360.com/images/manufacturing.jpg");
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
	background-color: #757679;
	height: 300px;
	padding-top: 130px;
	font-size: 28px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
}
.container-industries .healthcare {
background-image: url("https://www.cybersafe360.com/images/healthcare.jpg");
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
	background-color: #757679;
	height: 300px;
	padding-top: 130px;
	font-size: 28px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
}

.container-industries .msp {
background-image: url("https://www.cybersafe360.com/images/managedserviceprovider.jpg");
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
	background-color: #757679;
	height: 300px;
	padding-top: 130px;
	font-size: 28px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
}

.container-industries .expertise {
	background-color: #757679;
	height: 300px;
	padding-top: 120px;
	font-size: 48px;
  	font-family: 'Arial', sans-serif;
  	text-align: center;
  	color: #ffffff;
    letter-spacing: 4px;
}


.sub-button {
	margin-top: 24px;
	padding: 16px;
	width: 200px;
	border: 1px solid #fff;
}

.title {
	font-size: 28px;
  	font-family: 'Roboto', sans-serif;
  	text-align: center;
  	color: #ffffff;
  	z-index: 10;
}

.title-underlay {
	font-size: 28px;
  	font-family: 'Roboto', sans-serif;
  	text-align: center;
  	color: #ffffff;
  	z-index: 10;
  	position: relative; 
  	top: 188px;
  	margin-top: -58px;
}

.image {
	display: block;
	height: 300px;
	width: 100%;
	z-index: -10;
	position: relative;
}

.overlay {
	background-color: #000;
	bottom: 0;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	transition: .5s ease;
	top: 0;
	width: 100%;
}

.cell-container:hover .overlay {
	opacity: .75;
}

.text {
	padding-top: 130px;
	text-align: center;
}

.jumbotron-mission {
  background-color: #00538b;
  min-height: 580px;
  width: 100%;
  padding-bottom: 36px;
}
  
.jumbotron-mission h4{
  font-size: 36px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  padding-top:64px;
}


.jumbotron-mission p{
   margin-right: 10%;
   margin-left: 10%;
  font-size: 28px;
  color: #ffffff;
  font-weight: 100;
  text-align: center;
  font-family: 'Roboto', sans-serif;
    line-height: 48px;
}

@media screen and (max-width: 767px) {
    .jumbotron-mission p {font-size: 18px;line-height: 28px;}
}

/* CUSTOMIZE THE NAVIGATION
-------------------------------------------------- */

.cta-nav {
	display: block;
	text-align: right;
	padding-top: 16px;
	padding-right: 24px;
	height: 24px;
	font-size: 24px;
}

@media screen and (max-width: 767px) {
    .cta-nav{font-size: 18px; text-align: center; padding-right: 0px;}
}


.navbar-brand {
  padding-left: 12px;
}

@media screen and (max-width: 767px) {
    .navbar-brand {margin-top: 24px; padding-left: 0px;}
}

@media screen and (max-width: 767px) {
    .navbar-toggler {margin-top: 24px;}
}


@media screen and (max-width: 767px) {
    .logo {width: 200px; height: 56px;}
}

.navbar {
	padding-bottom: 24px;
}

.nav-item {
  padding-right: 4px;
  padding-left: 4px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .08rem;
}

nav .navbar-nav li a{
  color: #00538b !important;
  }
  
nav .navbar-nav li a:hover{
  color: #000000 !important;
  }
  
/* CUSTOMIZE THE HOME PAGE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

@media screen and (max-width: 767px) {
    .carousel-caption {bottom: 1rem;}
}

.carousel-caption h1{
  font-size: 48px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  margin-left: -36px;
}

@media screen and (max-width: 767px) {
    .carousel-caption h1{font-size: 36px; margin-left: 0px; text-align: center;}
}

.carousel-caption p{
  font-size: 24px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  margin-left: -36px;
}

@media screen and (max-width: 767px) {
    .carousel-caption p{font-size: 18px; margin-left: 0px; text-align: center;}
}

.carousel-button {
  font-size: 16px; 
  letter-spacing:.1rem; 
  padding:18px; 
  background-color:rgba(255,255,255, 0.3); 
  margin-right: -36px;"
}

@media screen and (max-width: 767px) {
    .carousel-button {margin-top: 24px;margin-right: 0px;}
}


/* Declare heights because of positioning of img element */
.carousel-item {
  height: 450px;
  background-color: #777;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
}


/* CUSTOMIZE THE HOME PAGE JUMBOTRON
-------------------------------------------------- */

.jumbotron {
  margin: 0;
  padding: 0;
}

.jumbotron-data {
  background-color: #00538b;
  min-height: 150px;
}

.jumbotron-data h4{
  font-size: 62px;
  color: #ffffff;
  font-weight: 300;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  padding-top:12px;
}

.jumbotron-data p{
  font-size: 15px;
  color: #ffffff;
  font-weight: 300;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 18px;
}

.jumbotron-data small{
  font-size: 12px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 100;
}

/* CUSTOMIZE THE SECTION PAGE CAROUSEL
-------------------------------------------------- */

.carousel-section {
  bottom: 8rem;
  z-index: 10;
}

.carousel-section h1{
  font-size: 60px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
}

@media screen and (max-width: 767px) {
    .carousel-section h1{font-size: 42px; margin-left: 0px; text-align: center;}
}

.carousel-section p{
  font-size: 32px;
  font-weight: 300;
  font-family: 'Roboto Condensed', sans-serif;
}

@media screen and (max-width: 767px) {
    .carousel-section p{font-size: 28px; margin-left: 0px; text-align: center;}
}

/* CUSTOMIZE THE INDUSTRY PAGE CAROUSEL
-------------------------------------------------- */

.carousel-industry {
  bottom: 4rem;
  z-index: 10;
}

@media screen and (max-width: 767px) {
    .carousel-industry {bottom: 2rem;}
}

.carousel-industry h1{
  font-size: 60px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

@media screen and (max-width: 767px) {
    .carousel-industry h1{font-size: 42px; margin-left: 0px; text-align: center;}
}

.carousel-industry p{
  font-size: 32px;
  font-weight: 100;
  font-family: 'Roboto Condensed', sans-serif;
}

@media screen and (max-width: 767px) {
    .carousel-industry p{font-size: 18px; margin-left: 0px; text-align: center;}
}

/* CUSTOMIZE THE CONTACT PAGE CAROUSEL
-------------------------------------------------- */

.city-image {
  height: 450px;
  overflow: hidden;
}



/* CUSTOMIZE THE MAIN PAGE CONTENT
-------------------------------------------------- */

.main-content {
	  margin-bottom: 72px;

}

h2 {
margin-top: 72px;
margin-bottom: 28px;
  font-size: 48px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  }

.intro {
  margin-top: 72px;
  font-size: 32px;
  line-height: 1.8em;
  font-weight: 100;
  font-family: 'Roboto Condensed', sans-serif;
  color: #000000;
}

.main-content li {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
  font-size: 20px;
  line-height: 30px;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  text-align: left;
}

.main-content a {
  font-weight: 400;
  color: #00538b;
}

.main-content li a {
  font-weight: 400;
  color: #00538b;
}

.main-content p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 2em;
  margin-left: 0;
  font-size: 20px;
  line-height: 30px;
  font-family: 'Roboto', sans-serif;
  color: #000000;
  text-align: left;
}

.cs360-hr {
	display: block;
	padding-top:48px;
	padding-bottom: 48px;
	text-align: center;
}

.callout-box h5 {
	margin-top: 12px;
	padding: 12px;
	background-color: #00538b;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  text-align: left;
}

.callout-box ul {
margin-top: -8px;
list-style: none;
background-color: #bfd4e2;
padding: 12px;
}

.callout-box li {
font-size: 18px;
  font-family: 'Arial', sans-serif;
  color: #000000;
  text-align: left;
  border-bottom: 1px solid #ffffff;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 21.6px;
}

.callout-box li a {
  color: #000000;
}

.callout-box .no-hr {
  border-bottom: 0px;
}

.bullet-points p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.5em;
  margin-left: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8em;
  font-family: 'Roboto', sans-serif;
  text-align: left;
}

.bullet-points a {
  font-weight: 600;
  color: #00538b;
  padding-left: 6px;
}




/* CUSTOMIZE THE DOWNLOAD CTA JUMBOTRON
-------------------------------------------------- */

.jumbotron-download {
  background-color: #00538b;
  min-height: 350px;
  width: 100%;
  padding-bottom: 36px;
}

.jumbotron-download h4{
  font-size: 36px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  padding-top:64px;
}

.jumbotron-download p{
   margin-right: 10%;
   margin-left: 10%;
  font-size: 20px;
  color: #ffffff;
  font-weight: 300;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 1.8em;
}

.jumbotron-download small{
  font-size: 12px;
}

/* CUSTOMIZE THE TESTIMONIAL  JUMBOTRON
-------------------------------------------------- */

.jumbotron-testimonial {
  background-color: #00538b;
  min-height: 350px;
  width: 100%;
  padding-bottom: 36px;
}

.jumbotron-testimonial h4{
  font-size: 36px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  padding-top:64px;
}

.jumbotron-testimonial p{
   margin-right: 10%;
   margin-left: 10%;
  font-size: 28px;
  color: #ffffff;
  font-weight: 100;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 48px;
}

@media screen and (max-width: 767px) {
    .jumbotron-testimonial p{font-size: 18px;line-height: 28px;}
}

.jumbotron-testimonial small{
  font-size: 12px;
}

/* CUSTOMIZE THE JOBS  JUMBOTRON
-------------------------------------------------- */

.jumbotron-jobs {
  background-color: #00538b;
  min-height: 350px;
  width: 100%;
  padding-bottom: 36px;
}

.jumbotron-jobs h4{
  font-size: 36px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  padding-top:64px;
}

.jumbotron-jobs p{
   margin-right: 10%;
   margin-left: 10%;
  font-size: 28px;
  color: #ffffff;
  font-weight: 100;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 48px;
}

.jumbotron-jobs small{
  font-size: 12px;
}


/* CUSTOMIZE THE APPROACH  JUMBOTRON
-------------------------------------------------- */

.jumbotron-approach {
  background-color: #f2f1f1;
  min-height: 350px;
  width: 100%;
  padding-top: 36px;
  padding-bottom: 36px;
}


/* CUSTOMIZE THE ABOUT  JUMBOTRON
-------------------------------------------------- */

.jumbotron-about {
  background-color: #f2f1f1;
  min-height: 350px;
  width: 100%;
  padding-top: 36px;
  padding-bottom: 36px;
}

@media screen and (max-width: 767px) {
    .jumbotron-about .bio-photo{display: block; margin: 0 auto; padding-bottom: 18px;}
}

.jumbotron-about h4{
  font-size: 48px;
  color: #000000;
  font-weight: 400;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  padding-top:32px;
  padding-bottom:32px;
}

@media screen and (max-width: 767px) {
    .jumbotron-about h4{text-align: center;}
}

.jumbotron-about p{
  font-size: 20px;
  color: #000000;
  font-weight: 300;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  line-height: 30px;
}

@media screen and (max-width: 767px) {
    .jumbotron-about p{text-align: center;}
}

.jumbotron-about strong{
  font-weight: 700;
}



/* CUSTOMIZE THE CONTACT SECTION
-------------------------------------------------- */

.jumbotron-cs360-contact{
	border-top: 18px solid #00538b;
  background-color: #ffffff;
  width: 100%;
  height: 270px;
  margin-top: -24px;
}

.jumbotron-cs360-contact .col-md-4{
  background-color: #bfd4e2;
  width: 100%;
  height: 270px;
  margin: 0px;
  padding: 0px;
}


.jumbotron-cs360-contact .col-md-8{
  background-color: #ffffff;
  width: 100%;
}


.jumbotron-cs360-contact h4{
  font-size: 36px;
  color: #000000;
  font-weight: 500;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  padding-top:50px;
  padding-left: 32px;
}

.jumbotron-cs360-contact p{
  font-size: 28px;
  color: #000000;
  font-weight: 100;
  text-align: left;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 48px;
  padding-left: 32px;
}

.jumbotron-cs360-contact ul {
  background-color: #bfd4e2;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.jumbotron-cs360-contact li {
  font-size: 24px;
  color: #000000;
  font-weight: 300;
  text-align: left;
  font-family: 'Roboto Condensed', sans-serif;  height: 135px;
  padding-top: 30px;
  padding-left: 24px;
  border-bottom: 1px solid #ffffff;
}

.jumbotron-cs360-contact li a{
  color: #000000;
}

/*====================================================*/
/*====================================================*/

.footer-area {
	padding-top: 48px;
	padding-bottom: 36px;
	background: #757679;
	min-height: 300px;
}

@media screen and (max-width: 767px) {
    .footer-area {margin-top: 600px;}
}


.footer-area .white-logo {
	padding-left: 36px;
}

@media screen and (max-width: 767px) {
    .footer-area .white-logo {padding-left: none; margin: 0 auto; display: block;}
}

@media screen and (max-width: 767px) {
    .footer-area .soc-linkedin {padding-left: none; margin: 0 auto; display: block;}
}

.footer-area p {
	font-size: 18px;
  color: #ffffff;
  font-weight: 100;
  text-align: left;
  font-family: 'Arial', sans-serif;
  line-height: 1.8em;
}

@media screen and (max-width: 767px) {
    .footer-area p  {text-align: center;}
}

.footer-area a {
  color: #ffffff;
}