html,
body{
    width: 100%;
    height: 100%;
    overflow-x:hidden;
    font-size:0.95rem;
    color:#555;
    background:#ffffff;
    font-family: 'Open Sans', sans-serif;
}
a{
    transition: all 0.5s ease-in-out !important;
    color:#bbed34;
    cursor: pointer;
}
a:hover{
    color:#555;
    transition: all 0.5s ease-in-out !important;
    text-decoration: none;
}
.btn-primary{
    background:#bbed34;
    transition: all 0.5s ease-in-out !important;
    border:none;
}
.btn-primary:hover{
    background:#555;
    transition: all 0.5s ease-in-out !important;
}
textarea {
    resize: none;
}
img{
    width:100%;
    object-fit: cover;
}
.text-uppercase{
    text-transform: uppercase;
}
.text-capital{
    text-transform: capitalize;
}
.text-bold{
    font-weight: bold;
}
.text-italic{
    font-style: italic;
}
.text-green{
	color:#bbed34;
}
.bg-white{
	background-color: #fff;;
}

/*** Nav Menu ***/
header.smaller h1#logo {
	width: 150px;
	height: 75px;
	line-height: 55px;
	font-size: 55px;
	margin: 0;
}

header.smaller nav a {
	line-height: 75px;
}


header {
	width: 100%;
	height: 100px;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
    /* border-bottom:solid 0.5em #f4f4f4; */
    background-color: transparent;
    transition: height 0.3s;
}

header a#logo {
    display: inline-block;
    float: left;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    height: 100%;
}

header a#logo img{
    max-height:95px;
    width:auto;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header nav {
	display: inline-block;
	float: right;
}

header nav a {
	line-height: 100px;
	color: #fcfcfc;
	font-weight: 300;
	font-size: 1em;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header.smaller div#logo img{
    height:75px;
    vertical-align: top;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

header.smaller nav a{
    color:#979797;
}

header.smaller nav a:hover{
    color:#000;
}

header.smaller nav a,
.sub-page header nav a{
    color:#979797;
}

header nav a:hover{
	color:#fff;
}

.sub-page header nav a:hover{
	color:#555;
}

header nav a.active::before,
header nav a:hover::before{
	position: absolute;
	content:'';
	bottom: 0;
    background: #bbed34;
    height: 5px;
    width: 100%;
    left: 0;
    right: 0;
}

header.smaller {
    height: 75px;
    border-bottom: 1px solid #ccc;
    
}

header.smaller > div:first-child{
	background:#fff !important;
}

header.smaller a#logo {
	/* line-height: 75px; */
	font-size: 30px;
}

header.smaller a#logo img{
	height: 75px;
}

header.smaller nav a {
	line-height: 75px;
}

header.active{
	height:auto;
	border: none !important;
}

header.active .sub-menu > div{
	background-color: #fff;
	transition: all 0.5s ease-in-out !important;
}

header.active nav a{
	color:#fff;
}

header.active.smaller nav a:hover{
	color:#000;
}

header.active.smaller nav a{
	color:#979797;
}

.sub-page header.active nav a {
    color: #979797;
}

.sub-page header > div:first-child{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+25 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	/* border-bottom: 1px solid #ccc; */
	background: #fff ;
}

/*** Sub Menu ***/
.sub-menu > div{
	background:#fff;
}

.sub-menu .sub-category{
	border-right:1px solid #ccc ;
}

.sub-menu .sub-category.last{
	border-right:1px solid transparent ;
}

.sub-menu .sub-category:last-child{
	border-right:1px solid transparent ;
}

.sub-menu .sub-category a{
	color:#979797;
}

.sub-menu .sub-category a:hover{
	color:#000;
}

.sub-menu .close{
	color:#ff0000;
	bottom:10px;
	right:15px;
	font-size: 0.9rem;
}

@media all and (max-width: 768px) {
	header{
		height: 75px;

	}

	header a#logo {
		/* display: block;
		float: none;
		margin: 0 auto;
		height: 80px;     
		line-height: 80px;
		text-align: center; */
	}

	header a#logo img{
		height: 75px;
	}

	header nav {
		display: block;
		height: 75px;
		text-align: center;
		margin: 0 auto;
		transition: all 0.5s ease-in-out !important;
	}

	header nav a {
		line-height: 75px;
		margin: 0 10px;
		height: 75px;
		font-size: 0.8rem;
	}

	header.smaller {
		height: 75px;
	}

	header.smaller h1#logo {
		height: 40px;
		line-height: 40px;
		font-size: 30px;
     	width:100%;
	}

	header.smaller nav {
		height: 75px;
	}

	header.smaller nav a {
		line-height: 75px;
		height:75px;
	}
	header.smaller nav a img{
		height: 75px;
	}
}

@media all and (max-width: 480px) {
	.nav-menu,
	.nav-menu.smaller {
		height: auto;
		background: #fff;
	}

	.nav-menu nav{
		background:#fff;
		width: 100%;
		justify-content: center !important;
	}

	.nav-menu nav.active{
		display: flex !important;
	}

	.nav-menu nav.active a{
		color:#555;
	}

	.nav-menu .container{
		align-items: center!important;
		justify-content: center !important;
		display: flex;
		flex-wrap: wrap;
	}

	.nav-menu a.icon{
		position: absolute;
		right: 0;
		top: 15px;
	}

	.sub-menu .sub-category{
		border-bottom: 1px solid #ccc;
		border-right: none;
		max-width: 50%;
		flex: 0 0 50%;
	}

	.sub-menu .sub-category:last-child{
		border-bottom: 1px solid transparent;
		margin-bottom: 2rem !important;
	}

	.nav-menu.active .sub-menu{
		height: calc(100vh - 150px);
		overflow-y: scroll;
	}

	.sub-menu .sub-category.last{
		border-right:1px solid transparent;
	}
}

/*** Footer ***/
.footer{
    background-color: #f1f1f1;
}

.copyright{
    background-color:#ffffff;
    font-size: 0.8rem;
}

/*** Sub Page ***/
.sub-page .title{
    font-size: 1.8rem;
    color: #000;
}

@media all and (max-width: 768px) {
    .sub-page .title{
        font-size:1.4rem;
    }
}

.page-contact,
.page-material,
.page-product,
.page-reference,
.page-service,
.page-cert{
    padding-top:120px;
}