/*
 * Nihon Denshi Seiki English Site
 * Author: Nihon Denshi Seiki Co., Ltd. 
 *
 * Contents:
 * 1) Text Style Defaults
 * 2) Index/Main Page Structure Selectors
 * 3) Index/Main Page Section Specific Selectors: 
	3.1) Header Section
	3.2) Body Section 
	3.3) Footer 
 * 4) Other Pages 	
	4.1) Common Selectors
	4.2) Individual Page Selectors
 * 5) Media Queries
 */

 
/* ==========================================================================
   1) Text Style Defaults
   ========================================================================== */
   
/* === Imported Google Fonts  === */
@import url('https://fonts.googleapis.com/css?family=Lora|Roboto');


body {
    font: 400 16px Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #303030;
}
	@media screen and (max-width: 900px) {
		body {
			font-size: 14px;
		}
	}	

h1 {
	/* font-family: 'Cinzel', sans-serif;
    font-size: 55px;
    font-weight: 700; */
}

h2 {
	/* font-family: 'Cinzel', sans-serif;
    font-size: 35px;
    font-weight: 400; */
}

h3 {
	/* font-family: 'Cinzel', sans-serif;
    font-size: 30px; */
}

h4 {
	/* font-family: 'Cinzel', sans-serif;
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400; */
}

h1,h2,h3,h4 {
	font-family: 'Lora', serif;
}

h1,h2,h3,h4,p {
	transition: font-size 0.5s ease-out;
		-webkit-transition: font-size 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: font-size 0.5s ease-out; /* Firefox */
		-ms-transition: font-size 0.5s ease-out; /* IE */
		-o-transition: font-size 0.5s ease-out; /* Opera */
}

/* Unvisited Link */
a:link {
    color: #777;
	
	/* Eased Transition off Hover */
	/* Transition: property, duration, timing-function, delay */
	transition: 0.5s ease-out;
		-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: 0.5s ease-out; /* Firefox */
		-ms-transition: 0.5s ease-out; /* IE */
		-o-transition: 0.5s ease-out; /* Opera */
}

/* Visited Link */
a:visited {
    color: #777;
}

/* Mouse Over Link */
a:hover {
    color: #aaa;
	text-decoration: none;
	
	/* Eased Transition on Hover */
	transition: 0.5s ease-out;
		-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: 0.5s ease-out; /* Firefox */
		-ms-transition: 0.5s ease-out; /* IE */
		-o-transition: 0.5s ease-out; /* Opera */
}

/* Selected Link */
a:active {
    color: #aaa;
}



/* ==========================================================================
   2) Index Page Structure Selectors
   ========================================================================== */
   
/* .homebg {	 */
	/* Sets Gradient - Blend one color into another */
	/* background-image: -moz-linear-gradient(left top, #d8ebf3, #67b0d1);
	background-image: -webkit-linear-gradient(left top, #d8ebf3, #67b0d1);
	background-image: -ms-linear-gradient(left top, #d8ebf3, #67b0d1);
	background-image: -o-linear-gradient(left top, #d8ebf3, #67b0d1); 
	background-image: linear-gradient(left top, #d8ebf3, #67b0d1); */
		
	/* 
		Sets Background Image and Gradient Shading 
		background: bg-color bg-image position/bg-size bg-repeat bg-origin 
		bg-clip bg-attachment initial|inherit;	
	*/   
	/*
	background: 
	linear-gradient(rgba(0, 82, 204,0.9), rgba(223, 216, 210,0.9),
	rgba(223, 216, 210,0.9),rgba(0, 82, 204,0.9)),
	url(../images/bg-image.jpg) no-repeat fixed center/cover;
		background: 
		-moz-linear-gradient(rgba(0, 82, 204,0.9), rgba(223, 216, 210,0.9),
		rgba(223, 216, 210,0.9),rgba(0, 82, 204,0.9)),
		url(../images/bg-image.jpg) no-repeat fixed center/cover; 	Firefox 
		background: 
		-webkit-linear-gradient(rgba(0, 82, 204,0.9), rgba(223, 216, 210,0.9),
		rgba(223, 216, 210,0.9),rgba(0, 82, 204,0.9)),
		url(../images/bg-image.jpg) no-repeat fixed center/cover; 	Chrome/Safari 
		background: 
		-ms-linear-gradient(rgba(0, 82, 204,0.9), rgba(223, 216, 210,0.9),
		rgba(223, 216, 210,0.9),rgba(0, 82, 204,0.9)),
		url(../images/bg-image.jpg) no-repeat fixed center/cover; 	IE 
		background: 
		-o-linear-gradient(rgba(0, 82, 204,0.9), rgba(223, 216, 210,0.9),
		rgba(223, 216, 210,0.9),rgba(0, 82, 204,0.9)),
		url(../images/bg-image.jpg) no-repeat fixed center/cover; 	Opera (old ver) 
	*/
	
	/* Backup if Shading Fails */
	/* background-color: #3366cc; */
/* } */

 
/* BS Container */
.container {
	padding: 60px 50px;
	/* width: 1000px;  */
}
.container-fluid {
    padding: 60px 50px;
	max-width: 1500px;  
}

/* BS Row - Adjust Default */
.row {
	/* padding: 0px;
	margin: 0px;
	overflow: hidden; */
}

.bg-dark {
	background-color: #202020 !important;
}



/* ==========================================================================
   3) Index Page Section Specific Selectors
   ========================================================================== */

/************************ 
 3.1) Header Section
 ************************/

.navbar {
	margin-top: 0px;	
	margin-bottom: 0;
	z-index: 9998;
	border: 0;
	line-height: 1.42857143 !important;
	border-radius: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}
	.navbar .navbar-collapse {
		text-align: center; /* Nav Text */
	}
	
	.navbar .navbar-brand  {

	}
	.navbar .navbar-brand .b-title {
		font-size: 1.3rem;
		font-weight: bold;
		letter-spacing: 3px;
	}
	.navbar .navbar-brand .s-title {
		font-size: 0.8rem; 
	}
	@media (max-width: 576px) {
		.navbar .navbar-brand .b-title {
			font-size: 1.1rem;
			letter-spacing: 3px;
		}
		.navbar .navbar-brand .s-title {
			font-size: 0.6rem; 
		}
	}
	@media (max-width: 380px) {
		.navbar .navbar-brand .b-title {
			font-size: 1rem;
			letter-spacing: 2px;
		}
		.navbar .navbar-brand .s-title {
			font-size: 0.6rem; 
		}
	}

	.icon-bar {
		width: 32px; 
		height: 3px;
		background-color: #b6b6b6;
		display: block;
		transition: all 0.2s;
		margin-top: 6px
	}
	 
	.navbar-toggler {
	  border: none;
	  background: transparent !important;
	}
		.navbar-toggler:focus,
		.navbar-toggler:active {
			outline: 0;
		}
		.navbar-toggler .top-bar {
		  transform: rotate(45deg);
		  transform-origin: 10% 10%;
		}
		.navbar-toggler .middle-bar {
		  opacity: 0;
		}
		.navbar-toggler .bottom-bar {
		  transform: rotate(-45deg);
		  transform-origin: 10% 90%;
		}
		 
		.navbar-toggler.collapsed .top-bar {
		  transform: rotate(0);
		}
		.navbar-toggler.collapsed .middle-bar {
		  opacity: 1;
		}
		.navbar-toggler.collapsed .bottom-bar {
		  transform: rotate(0);
		}
	
#bannerCarousel {
	background-color: #dfd8d2;
	color: #fff;
	margin-left: auto;
	margin-right: auto; 
}
	#carousel0 {
		background: 
			linear-gradient(rgba(100, 100, 100,0.7),rgba(47, 47, 47,0.7)),
			url(../images/banner01.jpg) no-repeat fixed center/cover;
		min-height: 600px;	
		margin-bottom: 0px; 
	}
	#carousel1 {
		background: 
			linear-gradient(rgba(100, 100, 100,0.7),rgba(47, 47, 47,0.7)),
			url(../images/banner02.jpg) no-repeat fixed center/cover; 
		min-height: 600px;
		margin-bottom: 0px; 
	}
	#carousel2 {
		background: 
			url(../images/banner03.jpg) no-repeat fixed center/cover;
		min-height: 600px;
		margin-bottom: 0px; 
	}

	.carousel-control.right, .carousel-control.left {
		background-image: none; 
		color: #fff; 
	}
	.carousel-indicators li {
		border-color: #fff; 
		/* height: 1px; */	
	}
	.carousel-indicators li.active {
		background-color: #fff; 
	}
	
	.carousel-caption {
		margin-bottom: 200px;
	}
		@media screen and (max-width: 768px) {
			.carousel-caption {
				margin-bottom: 50px;
			}
		}	
	.carousel-caption h3 {
		font-family: serif;
	}
	.carousel-control-prev-icon, .carousel-control-next-icon {
		height: 25px;
		width: 25px;
		
	}
	.ccon-bor {
		padding: 13px 15px 12px 15px;
		border-radius: 50%;
		border: 3px solid white;
	}
	.ccon-bor:hover {
		background-color: #13b1cd;
		border: 4px solid white;
	}
		@media screen and (max-width: 576px) {
			.ccon-bor {
				display: none;
			}
		}
		
	/*  Carousel Animation: Zoom  */
	#carousel0, #carousel1, #carousel2 {
		animation: zoom 5s ease-in-out 1 reverse;
		-webkit-animation: zoom 5s ease-in-out 1 reverse;
		-ms-animation: zoom 5s ease-in-out 1 reverse;
	}
	@keyframe zoom {
		0% {
			transform: scale(1.0);
		}
		100% {
			transform: scale(1.2);
		}
	}
	@-webkit-keyframes zoom {
		0% {
			-webkit-transform: scale(1.0);
		}
		100% {
			-webkit-transform: scale(1.2);
		}
	}
	@-ms-keyframes zoom {
		0% {
			-ms-transform: scale(1.0);
		}
		100% {
			-ms-transform: scale(1.2);
		}
	}

a#toTopLink {
	/* display: none; */
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 9999;
	font-size: 0.8rem;
	border: 1px solid #ddd9c3;
	outline: none;
	background-color: #13b1cd;
	color: #fff;
	cursor: pointer;
	padding: 10px;
	border-radius: 6px;
	text-decoration: none;
	/* Eased Transition on Appearance/Disappearance */
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.3s, opacity 0.3s linear; 
	
	/* Eased Transition on Hover */
		transition: 0.5s ease-out;
		-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: 0.5s ease-out; /* Firefox */
		-ms-transition: 0.5s ease-out; /* IE */
		-o-transition: 0.5s ease-out; /* Opera */
	
}	
	a#toTopLink:hover {
		color: #4e527f;
		background-color: white;
		
		/* Eased Transition on Hover */
		transition: 0.5s ease-out;
		-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: 0.5s ease-out; /* Firefox */
		-ms-transition: 0.5s ease-out; /* IE */
		-o-transition: 0.5s ease-out; /* Opera */
	}
	
	
/************************ 
 3.2) Body Section
 ************************/
 
#philosophy-sect h2, #products-sect h2 {
	text-transform: uppercase;
	font-size: 2rem;
	font-family: Lora, serif;
	padding: 20px;
}
	#news-sect h2 {
		text-transform: uppercase;
		font-size: 2rem;
		font-family: Lora, serif;
	}
	
#philosophy-sect p, #products-sect p, #news-sect p {
	font-size: 1rem;
	font-family: serif;
}

	@media (max-width: 380px) {
		#philosophy-sect h2, #products-sect h2, #news-sect h2 {
			font-size: 1.5rem;
		}
		#philosophy-sect p, #products-sect p, #news-sect p {
			font-size: 0.8rem;
		}
	}

#products-sect {
	background: 
    linear-gradient(rgba(100, 100, 100,0.7),rgba(47, 47, 47,0.7)),
	url(../images/bg01.jpg) no-repeat fixed center/cover;
	color: #fff;
}
#products-sect .p-box {
	height: 80px;
	max-width: 200px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #fff;
	background: rgba(230, 230, 230,0.4);
	padding: 12px 3px 12px 3px;
	
	/* Eased Transition off Hover */
	/* Transition: property, duration, timing-function, delay */
	transition: 0.5s ease-out;
		-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: 0.5s ease-out; /* Firefox */
		-ms-transition: 0.5s ease-out; /* IE */
		-o-transition: 0.5s ease-out; /* Opera */
} 
	#products-sect .p-box:hover {
		opacity: 0.7;
		
		/* Eased Transition on Hover */
		transition: 0.5s ease-out;
			-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
			-moz-transition: 0.5s ease-out; /* Firefox */
			-ms-transition: 0.5s ease-out; /* IE */
			-o-transition: 0.5s ease-out; /* Opera */
	} 
	#products-sect .p-box  h4 {
		font-size: 1.2rem;
		color: #fff;
	} 
	@media (max-width: 575px) {
		#products-sect .p-box {
			margin-top: 5px;
			margin-bottom: 5px;
		}
	}	
	@media (max-width: 380px) {
		#products-sect .p-box {
			height: 70px;
			max-width: 150px;
		}
		#products-sect .p-box  h4 {
			font-size: 1rem;
		} 
	}

#news-sect .table td { 
	border-top: 1px dashed silver;
}

#news-sect .news-date {
	width: 30%;
	padding: 0.7em 10px 0.7em 0;
}
#news-sect .news-item {
	width: 70%;
	padding: 0.7em 0 0.7em 0;
}
	@media (min-width: 1140px) {
		#news-sect .news-date {
			max-width: 150px;
		}
		#news-sect .news-item {
			max-width: 380px;
		}
	}
	#news-sect  h2  {
		border-left: solid 3px; 
		padding-left: 15px;
	}
		
	/* No greater than max-width, no less than min-width */
	@media (max-width:780px) and (min-width:576px) {
		#news-sect h2 {
			margin-top: -20px;
			/* font-size: 1.5rem; */
		}
	}	
	

/************************ 
 3.3) Footer (All Pages)
 ************************/

footer {
	color: #fff;
}
footer p {
	font-size: 0.9em;
}
footer hr {
	border: 0.5px #555 solid;
}
footer a { 
	color: #fff !important;
}
footer a:hover { 
	color: #13b1cd !important;
}

footer li {
	padding-top: 7px;
	padding-bottom: 7px;
}
footer .address {
	z-index: 1;
}
footer .address:before {
  position: absolute;
  top: 0;
  left: 0.9375rem;
  bottom: 0;
  width: 70%;
  height: auto;
  z-index: -1;
  background: url("../images/worldmap.png") no-repeat center;
  background-size: cover;
  content: " ";
}
footer .copyright {
	font-size: 0.8em;
	letter-spacing: 1px;
}


/* ==========================================================================
   4) Other Pages
   ========================================================================== */

/************************ 
 4.1) Common Selectors
 ************************/

#about-banner, #products-banner, #contact-banner {
	height: 500px;
}
#about-banner h1, #contact-banner h1 {
	margin-top: 50px; 
	color: black;
	font-size: 2.5rem;
	padding-top: 200px;
	text-align: center;
}
#products-banner h1 {
	margin-top: 50px; 
	color: white;
	font-size: 2.5rem;
	padding-top: 50px;
	text-align: center;
}
	@media screen and (max-width: 576px) {	
		#about-banner, #products-banner, #contact-banner {
			height: 300px;
		}	
		#about-banner h1, #contact-banner h1 {
			font-size: 2rem;
			padding-top: 100px;
		}	
		#products-banner h1 {
			font-size: 2rem;
		}				
	}	

	@media screen and (max-width: 576px) {	
		.prod-cat-head img {
			margin-bottom: 30px;
		}	
	}	
	

/******************************* 
 4.2) Individual Page Selectors
 *******************************/
   
/* 
 *	About Page 
 */
#about-page .container-fluid {
	padding: 45px 50px;  
}		
	@media screen and (max-width: 767px) {	
		#about-page .container-fluid {
			padding: 30px 30px;  
		}	
	}	

#about-banner {
	background: 
    linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
	url(../images/h-bg1.jpg) no-repeat center/cover;
		background: 
		-moz-linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
		url(../images/h-bg1.jpg) no-repeat center/cover;
		background: 
		-webkit-linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
		url(../images/h-bg1.jpg) no-repeat center/cover;
		background: 
		-ms-linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
		url(../images/h-bg1.jpg) no-repeat center/cover;
		background: 
		-o-linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
		url(../images/h-bg1.jpg) no-repeat center/cover;
	
	/* Backup if Shading Fails */
	background-color: #ddd;	
	margin-bottom: 0px;
}

#ceo-sect  h2, #cprofile-sect h2, #subsidcom-sect h2, 
#chistory-sect h2  {
	border-left: solid 3px; 
	padding-left: 15px;
}
	@media screen and (max-width: 790px) {	
		#ceo-sect  h2, #cprofile-sect h2, 
		#subsidcom-sect h2, #chistory-sect h2 {
			font-size: 1.4rem;
		}	
	}
	@media screen and (max-width: 576px) {	
		#ceo-sect img {
			margin-top: 30px;
			margin-bottom: 30px;
			max-width: 250px;
		}	
	}
	@media screen and (max-width: 380px) {	
		#cprofile-sect td, #subsidcom-sect td {
			font-size: 0.75rem;
		}	
		#ceo-sect img {
			max-width: 100px;
		}	
	}

/* Company History Timeline in #chistory-sect */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
	.timeline h4 {
	  font-size: 1.2rem;
	}
	.timeline p {
	  font-size: 0.8rem;
	}
	.timeline .animated {
		animation-fill-mode: initial;
	}
	
/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #303030;
  top: 20px;
  bottom: 20px;
  left: 50%;
  margin-left: -5px;
  z-index: 15;
}

	/* Container around content */
	.tcontainer {
	  padding: 5px 40px;
	  position: relative;
	  background-color: inherit;
	  width: 50%;
	}
	
	/* The circles on the timeline */
	.tcontainer::after {
	  content: '';
	  position: absolute;
	  width: 25px;
	  height: 25px;
	  right: -10px;
	  background-color: #303030;
	  border: 4px solid #303030;
	  top: 15px;
	  border-radius: 50%;
	  z-index: 20;
	}

	/* Place the container to the left */
	.left {
	  left: 0;
	}

	/* Place the container to the right */
	.right {
	  left: 50%;
	}

	/* Add arrows to the left container (pointing right) */
	.left::before {
	  content: " ";
	  height: 0;
	  position: absolute;
	  top: 22px;
	  width: 0;
	  z-index: 1;
	  right: 30px;
	  border: medium solid #ddd;
	  border-width: 10px 0 10px 10px;
	  border-color: transparent transparent transparent #ddd;
	}

	/* Add arrows to the right container (pointing left) */
	.right::before {
	  content: " ";
	  height: 0;
	  position: absolute;
	  top: 22px;
	  width: 0;
	  z-index: 1;
	  left: 30px;
	  border: medium solid #ddd;
	  border-width: 10px 10px 10px 0;
	  border-color: transparent #ddd transparent transparent;
	}

	/* Fix the circle for containers on the right side */
	.right::after {
	  left: -16px;
	}

	/* The actual content */
	.content {
	  padding: 15px;
	  background-color: #ddd;
	  color: #303030;
	  position: relative;
	  border-radius: 6px;
	}
	.content p {
	   color: #303030;
	}

	/* Media queries - Responsive timeline on screens less than 600px wide */
	@media screen and (max-width: 600px) {
		/* Place the timelime to the left */
		.timeline::after {
			left: 31px;
		}
		/* Full-width containers */
		.tcontainer {
			  width: 100%;
			  padding-left: 70px;
			  padding-right: 25px;
		}
		/* Make sure that all arrows are pointing leftwards */
		.tcontainer::before {
			  left: 60px;
			  border: medium solid white;
			  border-width: 10px 10px 10px 0;
			  border-color: transparent white transparent transparent;
		}
		/* Make sure all circles are at the same spot */
		.left::after, .right::after {
			left: 15px;
		}
		/* Make all right containers behave like the left ones */
		.right {
			left: 0%;
		}
	}	

	
/* 
 *	Products Page 
 */	
#products-page .container-fluid {
	
}		
	@media screen and (max-width: 767px) {	
		#products-page .container-fluid {
			
		}	
	}	

#products-banner {
	background: 
    linear-gradient(rgba(102, 102, 102,0.6),rgba(102, 102, 102,0.6)),
	url(../images/bg02.jpg) no-repeat center/cover;
		background: 
		-moz-linear-gradient(rgba(102, 102, 102,0.6),rgba(102, 102, 102,0.6)),
		url(../images/bg02.jpg) no-repeat center/cover;
		background: 
		-webkit-linear-gradient(rgba(102, 102, 102,0.6),rgba(102, 102, 102,0.6)),
		url(../images/bg02.jpg) no-repeat center/cover;
		background: 
		-ms-linear-gradient(rgba(102, 102, 102,0.6),rgba(102, 102, 102,0.6)),
		url(../images/bg02.jpg) no-repeat center/cover;
		background: 
		-o-linear-gradient(rgba(102, 102, 102,0.6),rgba(102, 102, 102,0.6)),
		url(../images/bg02.jpg) no-repeat center/cover;
	
	/* Backup if Shading Fails */
	background-color: #ddd;	
	margin-bottom: 0px;
}
	/* In windows > 576 display products description in top banner. */
 	/* In windows < 576 display products description in separate section. */
	#products-banner p {
		color: white;
		font-size: 1rem;
	}
	#businessareas-sect {
		display: none;
	}
	#businessareas-sect  h2 {
		border-left: solid 3px; 
		padding-left: 15px;
	}
		@media screen and (max-width: 790px) {	
			#businessareas-sect  h2 {
				font-size: 1.4rem;
			}	
		}
		@media screen and (max-width: 576px) {	
			#businessareas-sect img {
				margin-top: -30px;
				margin-bottom: 20px;
				max-width: 180px;
			}	
		}
		@media screen and (max-width: 767px) {	
			#products-banner p {
				font-size: 0.9rem;
			} 
		}	
		@media screen and (max-width: 576px) {	
			#products-banner p {
				display: none;
			} 
			#businessareas-sect {
				display: block;
			} 		
		}	

#printableelect-sect .box-light,
#flexo-sect .box-light,
#chemical-sect .box-light {
	border: 1px #888 solid;
	background: linear-gradient(rgba(220, 220, 220,0.6),rgba(220, 220,220,0.6)) no-repeat center/cover;
	padding: 30px;
} 	
#printableelect-sect .prods-heading-num,
#flexo-sect .prods-heading-num ,
#chemical-sect .prods-heading-num  {
	display: block;
	font-size: 9rem;
	margin-left: 20px;
	padding: 20px;
	z-index: 9000;
	color: #eee;
	line-height: 9rem;
	/* border: 1px #aaa solid; */
}
#printableelect-sect .prods-heading,
#flexo-sect .prods-heading,
#chemical-sect .prods-heading {
	margin-left: 20px;
	margin-top: -120px;
	padding: 10px;
	font-size: 1.2rem;
	z-index: 9100;
}	

	
		

/* 
 *	Contact Page 
 */
#contact-page .container-fluid {
	
}		
	@media screen and (max-width: 767px) {	
		#about-page .container-fluid {
			
		}	
	}	
	
#contact-banner {
	background: 
    linear-gradient(rgba(255, 255, 255,0.6),rgba(255, 255, 255,0.6)),
	url(../images/h-bg2.jpg) no-repeat center/cover;
		background: 
		-moz-linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
		url(../images/h-bg2.jpg) no-repeat center/cover;
		background: 
		-webkit-linear-gradient(rgba(255, 255, 255,0.6),rgba(255, 255, 255,0.6)),
		url(../images/h-bg2.jpg) no-repeat center/cover;
		background: 
		-ms-linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
		url(../images/h-bg2.jpg) no-repeat center/cover;
		background: 
		-o-linear-gradient(rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.1)),
		url(../images/h-bg2.jpg) no-repeat center/cover;
	
	/* Backup if Shading Fails */
	background-color: #ddd;	
	margin-bottom: 0px;
}

#contactform-sect {
	
}
	#contactform-sect h2 span {
		border-left: solid 3px; 
		padding-left: 15px;
	}
	@media screen and (max-width: 790px) {	
		#contactform-sect h2  {
			font-size: 1.4rem;
		}	
	}
	
	#contactform-sect h5 {
		font-size: 1rem;
		font-weight: bold;
	}
	#contactform-sect .p-info p {
		font-size: 0.8rem;
	}
	#contactform-sect .p-info p {
		font-size: 0.8rem;
	}
.form-style {
	height: 3.5rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: rgb(8, 8, 8);
	border: none;
	border-bottom: 0.05rem solid rgba(145, 143, 143, 0.822);
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	letter-spacing: .1rem;
	padding: 0.5rem 1.25rem 0 0.5rem;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
	.form-style::placeholder {
		color: rgba(238, 51, 34, 0.7);
	}
	.form-style::-webkit-input-placeholder {
		color: rgba(238, 51, 34, 0.7);
	}
	.form-style::-moz-placeholder {
		color: rgba(238, 51, 34, 0.7);
	}
	.form-style:-ms-input-placeholder {
		color: rgba(238, 51, 34, 0.7);
	}
		.form-style:focus {
			color: rgba(238, 51, 34, 0.99);
			border-color: rgba(255, 255, 255, 0.99);
			box-shadow: 5px 5px 20px 5px #ccc;
		}
		.form-style:focus::-webkit-input-placeholder {
			color: rgba(238, 51, 34, 0.99);
		}
		.form-style:focus::-moz-placeholder {
			color: rgba(238, 51, 34, 0.99);
		}
		.form-style:focus:-ms-input-placeholder {
			color: rgba(238, 51, 34, 0.99);
		}
		.form-style:focus::placeholder {
			color:rgba(238, 51, 34, 0.99);
		}

#contactconfirm.modal {
   position: fixed;
   top: 20px;
   z-index: 9999;
}	
#contactconfirm.modal table th{
	width: 20%;
}
#contact-page .btn-info, #landing .btn-info {
	color: #fff;	
}
#contact-page .btn-secondary {
	color: #fff;	
}
	#contact-page  .btn-info:hover, #landing  .btn-info:hover  {
		background-color:rgba(23, 162, 184, 0.4);
	}
	#contact-page  .btn-secondary:hover {
		background-color:rgba(108, 117, 125, 0.4);
	}
	#contactconfirm  p#instruct1 {
		color: #818181;
	}
		
/* ======= Page Load Animations ======= */ 

.slideanim {
	visibility:hidden;
}

.custom-slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify */
/* the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}



/* ==========================================================================
   5) Media Queries
   ========================================================================== */
   
/* ===== Largest Devices - Desktop PCs ===== */
@media (min-width:1200px) {

}


/* ===== Large Devices - Desktop PCs ===== */
@media (max-width:1200px) {

}


/* ===== Medium Devices - Tablets & PCs ===== */
@media (max-width:991px) {

	
}


/* No greater than 991px, no less than 768px */
@media (max-width:991px) and (min-width:768px) {
	
	
}


@media screen and (min-width: 769px) {  	
	
	
}
	

@media screen and (min-width: 768px) {
	

}
   
   
/* ===== Small Devices - Phones & Tablets ===== */   
@media screen and (max-width: 768px) {
	
	
}


/* Collapses Navbar at 768px */
@media (max-width: 768px) {
	
} 


@media screen and (max-width: 767px) {
	
	/************************** Index Page **************************/
	
	.container {
		width: 500px;
	}
	
	/* Prevents scroll overflow on collapsed navbar */
	.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
		max-height: none;
	}
	
	#carousel0, #carousel1, #carousel2 {
		min-height: 250px;
		max-height: 250px;
		margin-top: 75px;
		margin-bottom: 0px;
	}
	#carousel0 {
		background-position: 0px 0px; 
	}
		
		
}


@media screen and (max-width: 620px) {
	
}	


@media screen and (max-width: 576px) {
	

	
}	


/* ===== Extra Small Devices - Phones ===== */   
@media screen and (max-width: 480px) {
	
	.container, .container-fluid {
		width: 400px;
	}
	
}


/* Avoid white space below page content on narrow/long windows */
@media screen and (min-height: 1100px) {
	.container, .container-fluid {
		max-height: 10000px;
	}
}


@media screen and (max-width: 400px) {
	.container, .container-fluid {
		width: 340px;
	}
}	


@media screen and (max-width: 360px) {
	.container, .container-fluid {
		width: 300px;
	}
}	


@media screen and (max-width: 330px) {
	
}	


/* Remove unnecessary elements when printing */
@media print {
	

	
}