/* === Custom CSS ===

Theme Name -    Theme Name Here
Theme URL -     web url here
Author - 			  Paul Rodriguez
Author's URI -  Http://seotrafficleader.com
Description -		Description here
Ver -
Licence - 

*/

/*===============================================
>>>> COLOR PROFILE
===============================================*/
:root {
/*--- Primary Colors ---*/
--primary:     	#1976d2;
--p-dark:      	#004ba0;
--p-light:     	#63a4ff;
/*--- Secondary Colors ---*/
--secondary:   	#ffff00;
--s-dark:      	#c7cc00;
--s-light:     	#ffff5a;
/*--- Accent Colors ---*/


/*--- Global Colors ---*/
--lt-gray:			#BCBEC0;
--md-gray:			#939598;
--dk-gray:			#58595B;
--black:				#222222;
--eggshell:			#f0ead6;

/*--- Social Media Colors ---*/
--facebook:   	#3b5998;
--twitter:    	#1da1f2;
--youtube:    	#ff0000;
--instagram:  	#c32aa3;
--pinterest:  	#bd081c;
--linkedin:   	#0077b5;
--google:				#4285f4;
--snapchat:			#fffc00;
--reddit:				#ff4500;
--vimeo:				#1ab7ea;
--skype:				#00aff0;
--dribbble:			#ea4c89;
--slack:				#4a154b;
--stumbleupon:	#e94826;
--flickr:				#f40083;

/* Utilities */
--border: 1px solid #939598;

}


/*==== Global ====*/

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	background: #fff url('../img/tile.jpg') top left repeat;
  }
  
  .logged-in .navbar-fixed-top {
	  top: 32px;
  }
  
  img {
	max-width: 100%;
  }
  
  hr {
	  border-bottom: 1px solid #eae8e8;
	  -webkit-box-shadow:inset 1px 1px 3px 2px #545454;
	box-shadow:inset 1px 1px 3px 2px #545454;
  }
  
  .modal-content {
	background: url('../img/tile.jpg') top left repeat;
  }
  
  .section-header {
	text-align: center;
  }
  
  .tooltip-inner {
	max-width: 300px;
	padding: 3px 8px;
	color: var(--black);
	text-align: center;
	background-color: rgba(255,255,255,0.99);
	border-radius: .25rem;
	text-align: left;
	border: var(--border);
  }
  
  /* Typgraphy */
  
  h1,h2,h3,h4,h5,h6 {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	font-weight: bold;
  }
  
  p {
	margin: 0 0 15px;
  }
  
  p.lead {
	font-weight: normal;
  }
  
  a:link, a:visited {
	color: var(--primary);
  }
  
  a:hover {
	color: #222;
	text-decoration: none;
  }
  
  a.non-link {
	  color: #222;
  }
  
  blockquote {
	  padding: 0;
	  border: none;
	  font-style: italic;
	  text-align: left;
  }
  
  blockquote cite {
	  display: block;
	  color: #777;
	  margin: 15px 0 0 0;
  }
  
  blockquote:before {
	  display: none;
  }
  
  .fancy-text {
	  font-family: 'PT Serif', serif;
	  font-style: italic;
  }
  
  /* Buttons Customization */
  .btn-primary {
	background-color: var(--primary);
	border-color: var(--p-dark);
  }
  
  .btn-success {
	background-color: var(--p-light);
	border-color: var(--p-light);
	color: white!important;
  }
  
  .btn-success:hover {
	background-color: var(--s-dark);
	border-color: var(--s-dark);
	color: var(--black)!important;
  }

  .btn-light {color: black!important;}
  .btn-light:hover {
    background: var(--black);
    color: white!important;
    border: var(--black);
  }

/* ==== LAYOUT - Login Page ==== */
#main-container {
	width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white url('../img/bg-main-container.jpg') repeat center top;
  background-size: cover;
  padding: 20px;
}

#main-container .main-inner {
	max-width: 500px;
	background: rgba(255,255,255,0.8);
	border-radius: 5px;
	padding: 20px;
	margin: 20px;
}

#main-container .form-container button.btn-text {
	background: none;
	color: var(--primary);
	padding: 0;
	margin: -4px 0 0 10px;
}

#main-container button.btn-text:hover {
	color: var(--black);
}

/* footer */
#main-container footer button {
	background: none;
}

#main-container footer a {
	cursor: pointer;
}

/* Media Queries */

@media (max-width: 812px) {
	#main-container {
		height: 100%;
	}
}


/* ==== LAYOUT - Dashboard Page ==== */

#dashboard {
	/* border: 1px solid var(--lt-gray); */
  }
  
#dashboard header {
	background: var(--black);
	color: white;
	padding: 7px;
  text-align: center;
}
  
#dashboard header h5 {
 	font-weight: 300;
}

#dashboard header h5 i {
	margin-right: 10px;
}

header#main-header a {
  color: var(--black);
}

header#main-header a:hover {
  color: var(--primary);
}

.message-inner {
	display: flex;
	justify-content: center;
  align-items: center;
	min-height: 400px;
	background: white url(../img/bg-main-container.jpg) center bottom no-repeat;
	background-size: cover;
	padding: 20px;
}

.message-text {
	background: rgba(255,255,255,0.9);
	padding: 20px;
	max-width: 1000px;
}

.message-text img.branding {
	max-width: 100%;
	margin-bottom: 30px;
}

.bottom {
  margin: 20px 0 0 0;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat( auto-fit, minmax(600px, 1fr) );
  grid-template-areas:
    "hi-tech-cont hi-touch-cont";
}

.hi-tech-cont {
	grid-area: hi-tech-cont;
  margin-top: 20px;
  border: 1px solid var(--lt-gray);
}

.hi-touch-cont {
	grid-area: hi-touch-cont;
  margin-top: 20px;
  border: 1px solid var(--lt-gray);
}

.benefits-container {
	margin-top: 20px;
}

.benefits-inner {
	padding: 20px;
}

.benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-right: 10px;
}


/* Benefit box */
.benefit {
  padding: 0;
  border: var(--border);
  border-radius: 3px;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-areas:
    "icon info";
  height: auto;
  max-width: 390px;
  min-width: 100%;
}

.icon {
  grid-area: icon;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon i {
  font-size: 40px;
  color: var(--md-gray);
}

.benefit .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-left: 1px solid var(--lt-gray);
  /* background: var(--p-dark); */
  color: white;
  padding: 20px 10px;
}

.benefit .alert-secondary {
  font-size: 0.8rem;
  /* font-weight: 300; */
  text-align: center;
  padding: 5px 10px;
  color: #fff;
  width:100%;
}

.hi-tech-cont .info {
  background: #56c7b3;
}

.hi-touch-cont .info {
  background: var(--p-light);
}

.benefits-services .info {
  background: #d32f2f;
}

.hi-tech-cont .info .alert-secondary {
  background: #74bdae;
}

.hi-touch-cont .info .alert-secondary {
  background: var(--primary);
}

.benefits-services .info .alert-secondary {
  background: #da9e9e;
}

	

/* Footer */

footer#main-footer {
  padding: 20px;
}

footer#main-footer a {
  color: var(--black);
	margin: 0 5px;
	cursor: pointer;
}

footer#main-footer .btn {
  background: none!important;
}

footer#main-footer .social-media-container {
  margin-bottom: 5px;
}

footer#main-footer .social-media-container a {
  color: var(--md-gray);
}

.social-media-container i.fa-facebook-square:hover {
  color: var(--facebook);
}

.social-media-container i.fa-twitter-square:hover {
  color: var(--twitter);
}

.social-media-container i.fa-linkedin:hover {
  color: var(--linkedin);
}

.social-media-container i.fa-youtube-square:hover {
  color: var(--youtube);
}

.social-media-container i.fa-pinterest-square:hover {
  color: var(--pinterest);
}

.social-media-container i.fa-instagram:hover {
  color: var(--instagram);
}

/* Media Queries */

@media (max-width: 1100px) {
  
  .bottom  {
    grid-template-areas:
    "hi-tech-cont"
    "hi-touch-cont";
  }

}

@media (max-width: 768px) {
  .bottom {
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  }

  .message-inner {
    padding: 10px;
  }
  .message-text {
    margin: 10px;
  }

  .benefit {
    max-width: 240px;
    min-width: 100%;
  }

}

@media (max-width: 500px) {

  .hi-tech-cont {
    grid-template-areas:
    "benefits";
  }

  .hi-touch-cont {
    grid-template-areas:
    "benefits";
  }

  .benefits {
    grid-template-columns: 1fr;
  }

}

.alert {
  font-size: 0.8em !important;
  display:inline-block;
}