* { margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-appearance:none;}
body { font-family: 'Lora', serif; font-size:15px; line-height:25px; color:#000; font-weight: 300;}
h1, h2, h3, h4, h5, h6, h7 { line-height:120%; padding:5px 0 0 0; font-weight:300; margin:0 0 10px 0; color:#0c4233; font-family: 'Lora', serif; font-style: italic; }
.space-line {  width:100px; height:2px; background-color:#d2ae6d; display:block; margin:15px 0 25px 0;}
.space-line.center { margin: 15px auto 25px auto;}
h1 { font-size:50px; padding-bottom:10px;}
h1.clear { margin: 0; padding: 0; line-height: 60px;}
h2 { font-size:46px;}
h3 { font-size:42px;}
h4 { font-size:34px;}
h5 { font-size:26px;}
h6 { font-size:20px;}
a { text-decoration:none; color:inherit; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s;}
p { margin-bottom:15px;}
.text-links { color:#000;}
.text-links:hover { color:#f00;}
.large-text { font-size: 120%;}
.box-links { background-color:#06F; color:#fff; display:inline-block; padding:5px 15px;}
img { max-width:100%; margin:0; padding:0; font-size:0; display:block;}
.text-center { text-align: center;}
ul { margin: 0; padding: 0; list-style: none;}
ul li { padding-left: 25px; position: relative; margin: 5px 0;}
ul li:before { content: "\f00c"; font-family: FontAwesome; font-size: 13px; color: #df7d21; position: absolute; left: 0; top: 0px;}
ul.clear-ul { padding:0; list-style:none;}
ul.clear-ul li { padding-left: 0px; }
ul.clear-ul li:before { display: none;}
.full-img { width:100%;}
.spl-text { color: #0c4233 !important; }
.gold-text { color: #d2ae6d !important; }
.gold-text * { color: #d2ae6d !important; }
.small-text { font-size:60%;}

.mid-padding-tb { padding: 3% 0%;}
.extra-padding { padding: 5%;}
.mid-padding { padding: 2%;}
.padding-bottom-0 { padding-bottom: 0;}
.margin-tb-50 { margin:50px auto; }
.flex-box, .flex-box-mob { display:flex; align-items: center; }
.flex-box.content-top { align-items: flex-start; }
.reverse-flex { flex-direction: row-reverse; }

.wrapper-1000 { width:1000px; margin:0 auto; position:relative;}
.wrapper-1200 { width:1200px; margin:0 auto; position:relative;}
.wrapper-90p { width:95%; margin:0 auto; }
.parallax-wrapper {position: relative; overflow: hidden;}
.parallax-box { position: relative; width: 100%; height: 100%; background: url(../images/paral-grapes.jpg) center center no-repeat; background-size: cover !important;}

header { background-color: #0c4233; width: 100%; color:#fff; position:sticky; top: 0; z-index: 999; transition:all ease-out 0.3s; transform: translateY(-110%);}
header.on { transform: translateY(0); transition:all ease-out 0.3s; }
header .wrapper-90p { display: flex; padding: 10px 0 0 0;}
header .logo { width: 310px; margin-right: 20px; display: block;}
header .social-icon { width:35px; line-height: 35px; background-color:rgb(255 255 255 / 30%); margin:0 0 0 5px; padding:0; text-align: center; display:block; }
header .social-icon:hover { background-color:rgb(255 255 255 / 100%); color: #0c4233; font-size: 18px; }
.header-links-box { text-align: right; flex-grow: 1; }
.header-social-box { margin-bottom: 5px; display: block;}
.header-social-box .flex-box-mob { justify-content: flex-end; }
.header-social-box .flex-box .space-right { margin-right:30px; }
.main-menu-wrapper {}
.menu-icon { width: 50px; height:50px; line-height: 45px; text-align:center; display: block; font-size: 20px; color: #d1ae6d; border:solid 1px #d1ae6d; position:absolute; right:10px; top:20px; display:none;}
.main-menu-ul { display: flex; margin-left: auto; align-items: center; justify-content: flex-end; }
.main-menu-ul li { margin-bottom:0; }
.main-menu-ul li a { padding: 12px 20px; position: relative; display: block; }
/* .main-menu-ul li a:after { content:""; width:1px; height:15px; background-color: #fff; display: block; position:absolute; right:0; top:50%; transform:translateY(-50%); } */
.sub-menu-ul { position: absolute; z-index: 999; background-color: #d2ae6d; padding: 10px !important; width: 180%; left: -40%; text-align: center; transform:translateY(30px); opacity: 0; visibility: hidden; transition: all ease-out 0.3s; }
.main-menu-ul li:hover .sub-menu-ul { transform:translateY(0px); opacity: 1; visibility: visible; }
.sub-menu-ul li a { padding: 10px; display:block;}
.main-link { position:relative; font-size: 14px; text-transform: uppercase; }
.main-link:before { content: ""; position:absolute; width: 100%; height: 100%; background-color: #d2ae6d; z-index: -1; left: 0; top: 0;  transition: all ease-out 0.3s; transform: scale(1, 0); transform-origin: center bottom;}
.main-link:hover, .main-link.active { color:#000;}
.main-link:hover:before, .main-link.active:before { transform: scale(1, 1); }
.sub-link { color:#000; font-size: 14px;  text-transform: uppercase;}
.sub-link:hover, .sub-link.active { background-color: rgb(255 255 255 / 30%); }

.block-40 { width: 40%;}
.block-60 { width: 60%;}
.block-2 { width: 50%;}
.block-3 { width:33.33%;}
.block-4 { width:25%;}
.dark-box { background-color: #0c4233; color: #fff;}
.dark-box * { color: #fff; }

footer { padding: 15px 0; border-top:solid 1px #ccc; margin-top: 30px; background-color: #0c4233; color:#fff; }
footer * { color: #fff;}
footer .wrapper-1200 { display: flex;}
footer .wrapper-1200 * { flex-grow: 1;}
.by-elegant { text-align: right;}
footer .social-icons { display: flex;}
.social-icon { padding:10px;}

/* slider */
.owl-dots { position:absolute; left: 0; bottom:10px; text-align: center; display: flex; justify-content: center; width: 100%; z-index: 10; align-items: flex-end; }
button.owl-dot { width: 10px; height:10px; border-radius: 50%; margin: 5px; background-color:#fff !important; transition: all ease-out 0.3s; }
button.owl-dot.active, button.owl-dot:hover { transform:scale(1.7); background:none !important; border: solid 2px rgb(255 255 255); }

/* form */
.form-ul li { display: block; position: relative; }
.form-ul li.err .form-field { border-color:#f00; position: relative; }
.form-ul li.err:after { content:"invalid"; position:absolute; padding:3px 8px; background-color: #f00; color:#fff; border-radius: 7px; right:10px; top: 34px; }
.form-field{ padding:15px 10px; line-height:20px; font-size:16px; border:none; border:solid 1px #999; box-sizing:border-box; -webkit-box-sizing:border-box; width:100%; position:relative; border-radius:0 10px 10px 10px; -webkit-border-radius:0 10px 10px 10px; font-family: inherit; }
.form-field:disabled{ background-color:#E9E9E9;}
.form-btn{ cursor:pointer; font-size:16px; text-align:center; display:inline-block; line-height:30px; padding:5px 30px; position:relative; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s; border:none; border-radius:10px; -webkit-border-radius:10px; background-color:#df7d21; color:#fff;}
.form-btn:hover{ background-color:#000;}
.form-response{ background-color:#c4e9f3; color:#000; padding:10px; margin-top:10px; overflow:auto;}
.form-response a, .form-response h2{ background-color:#94cddc; padding:2px 5px; border-radius:5px; -webkit-border-radius:5px;}
.form-response h2{ display:inline-block;}
.form-response a:hover{ background-color:#fff;}
.form-response ul{ text-align:left; width:100%; display:block; padding:10px 5px; box-sizing:border-box; -webkit-box-sizing:border-box;}
.form-response ul li{ background-color:#94cddc;}

.main-banner-text { position:absolute; width: 500px; left:10%; top: 50%; transform: translateY(-50%); color: #0c4233;}
.main-banner-text * { color: #0c4233;}
.read-more { padding :7px 15px; background-color: #0c4233; color:#fff;}
.read-more:hover { background-color:#d2ae6d; color: #000; }
.home-projects-box-wrapper { flex-wrap: wrap; }
.home-projects-box { width:24%; margin: 0.5%; flex-grow: 1; text-align: center; position: relative; overflow: hidden;}
.home-projects-text { position: absolute; width: 100%; height: 100%; text-align: center; padding: 10px; left:0; top:0; background-color: rgb(255 255 255/ 80%); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; transform: scale(1.6); opacity: 0; border: solid 20px rgb(210 174 109); transition: all ease-out 0.3s; }
.home-projects-box:hover .home-projects-text { transform:scale(1); opacity: 1; }
.home-projects-text h4 { width: 100%; color:rgb(12 66 51); }
.home-projects-text p strong, .home-projects-text p { color: #000; }
.namecard-box { text-align: center; align-items: stretch; }
.namecard-box .block-4 { padding:15px; margin:2px; border:solid 1px #d2ae6d; }
.namecard-box .block-4 span { font-size: 32px; display: block;}


@media screen and (max-width:1220px){
	.wrapper-1200 { width:90%;}
	header .wrapper-90p { display: block; }
	.logo img { margin: 10px auto;}
	.main-menu-ul { justify-content: center; }
	.home-projects-box { width: 48%; margin: 1%;}
}
@media screen and (max-width:1020px){
	.wrapper-1000 { width:98%;}
	header {position: relative; transform: none; overflow: hidden; }
	header.on { transform: none; }
	.logo img { margin:10px 0;}
	.menu-icon {display:block;}
	.main-menu-ul { display: block; text-align: center;}
	.main-menu-ul { display:none;}
	.main-menu-ul li a { display:block; padding:20px; }
	.sub-link:hover, .sub-link.active { background-color: rgb(210 174 109 / 30%); }
	footer .wrapper-1200 { display:block; text-align:center;}
	.flex-box { display:block;}
	.flex-box-mob { justify-content: center; }
	.block-40, .block-60, .block-2, .block-3, .block-4, .projects-list .block-3, .qhse-certs div { width: 100%;}
	.qhse-certs div { margin: 10px auto;}
	footer .social-icons {padding:20px 0; }
	.mid-padding { padding:5%;}
	
	h1 { font-size: 42px;}
	h2 { font-size: 36px;}
	h3 { font-size: 32px;}
	h4 { font-size: 28px;}
	h5 { font-size: 24px;}
	.board-of-directors section, .margin-tb-50 { margin: 20px auto; }
	
	.sub-menu-ul { position:relative; display: block; background-color: #dedede;}
	.sub-link { color:#000;}
	.sub-menu-ul { position: relative; background-color: #fff; width: 100%; transform:none; opacity: 1; visibility: visible; }
	header .logo { width:260px; }
	
	.main-banner-text {  position:relative; width: 90%; text-align: center; margin: 10px auto; left:0; top: 0; transform: none; }
	.owl-dots { position:relative; left: 0; bottom:0; width: 90%; margin: 5px auto;}
	button.owl-dot {  background-color:#d1ae6d !important; }
	button.owl-dot.active, button.owl-dot:hover { border: solid 2px #d1ae6d; }
	.home-projects-text { position: relative; background-color: rgb(255 255 255/ 90%); transform: scale(1); opacity: 1; border: none; }
	
	.by-elegant { text-align: center; display: block;}
}