/*
Theme Name:     Construct Child
Theme URI:      http://wpdemo.oceanthemes.net/construction/
Description:    Make your modifications to [Parent Theme] in this child theme.
Author:         Oceanthemes
Author URI:     http://oceanthemes.net/
Version:        1.0
Template:       construct
*/

@import url("../construct/style.css");

@font-face {
	font-family: 'Gotham-Book';
  	src: url('fonts/gothambook-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/gothambook-webfont.woff') format('woff'),
		 url('fonts/gothambook-webfont.ttf')  format('truetype'),
		 url('fonts/gothambook-webfont.svg#Gotham-Bold') format('svg');
  	font-weight: normal;
  	font-style: normal;
}

@font-face {
	font-family: 'Gotham-Bold';
  	src: url('fonts/gothambold1.eot?#iefix') format('embedded-opentype'),
		 url('fonts/gothambold1.woff') format('woff'),
		 url('fonts/gothambold1.ttf')  format('truetype');
  	font-weight: normal;
  	font-style: normal;
}

@font-face {
	font-family: 'Gotham-Black';
  	src: url('fonts/gothamblack-webfont.eot?#iefix') format('embedded-opentype'),
		 url('fonts/gothamblack-webfont.woff') format('woff'),
		 url('fonts/gothamblack-webfont.ttf')  format('truetype'),
		 url('fonts/gothamblack-webfont.svg#Gotham-Bold') format('svg');
  	font-weight: normal;
  	font-style: normal;
}
 
/* =Theme customization starts here
------------------------------------------------------- */
body, p {
	font-family: 'Gotham-Book';
	color: #414141;
	font-size: 16px;
}
#site-header, #site-header.is-sticky{
	background-color: #fff !important;
	border-top: 5px solid #fb9219;
}
.admin-bar #top-bar.is-sticky {
    top: 32px;
}
.admin-bar #site-header.is-sticky {
    top: 67px;
}
#top-bar-text{
	font-size: 16px;
	font-family: 'Gotham-Book', Arial, Helvetica, sans-serif;	
}
#main-nav > ul > li {
	padding: 0px 5px;
	position: relative;
}
#main-nav > ul > li:first-child {
	padding-left: 5px;
}
#main-nav > ul > li > a, #main-nav .sub-menu li a {
	font-family: 'Gotham-Bold', sans-serif;
	color: #243958 !important;
	font-size: 16px;
}
#main-nav > ul > li > a:before, #main-nav > ul > li.current-menu-parent > a:before {
    content: '';
    position: absolute;
    transition: width .3s ease;
    width: 0;
    height: 3px;
    left: 0;
    bottom: 8px;
    background: #243958;
}
#main-nav > ul > li > a:hover:before, #main-nav > ul > li.current-menu-item > a:before,
#main-nav > ul > li.current-menu-parent > a:before {
	width: 100%;
}
#site-header-inner {
	padding-top: 15px;
	padding-bottom: 10px;
}
#hero-section .hero-text {
	margin: 0;
}
#hero-section .hero-content {
    margin-top: 12.5% !important;
}
#hero-section .hero-title {
    height: auto;
}
#hero-section .hero-title h1 {
    font-size: 2.2vw !important;
    height: auto;
	line-height: 1.4;
}
.banner-box {
	width: 25vw;
    height: 25vw;
    background-color: #f8912e;
    padding: 2%;
    position: relative;
    top: 0;
    left: 15%;
    text-align: left;
	opacity: 0;
	transform: translatex(-100px);
	animation: fadeInLeft 1s ease 1s forwards;
}
.banner-box .text {
	font-family: 'Gotham-Black', sans-serif;
    color: #414141;
    text-shadow: none;
    font-size: 2.2vw;
    line-height: 1;
}
.banner-box .icon {
	position: absolute;
    bottom: 3%;
    right: 3%;
    width: 40%;
}
.welcome h1, .title1 h2 {
	font-family: 'Gotham-Bold', sans-serif;
    color: #414141;
    text-shadow: none;
    font-size: 2.5vw;
	line-height: 1;
}
.welcome .line-1, .abtMetaled .line-1, .mission .line-1, .whyus .line-1, .process .line-1, .products .line-1 {
	background-color: #f8912e !important;
	height: 8px !important;
    width: 18vw !important;
    margin-left: -9vw !important;
    margin-top: 10px !important;
}
.title1 {
	position: relative;
}
.title1:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2vw 2vw 0 2vw;
	border-color: #f88f2e transparent transparent transparent;
	position: absolute;
    bottom: -25px;
    left: 50%;
	transform: translateX(-50%);
    z-index: 2;
}
.title1 h2 {
	margin-bottom: 0;
}

@keyframes fadeIn {
	from { opacity: 0;}
	to { opacity: 1;}
}
@keyframes fadeInLeft {
	from { opacity: 0; transform: translatex(-100px);}
	to { opacity: 1; transform: translatex(0px);}
}
@keyframes fadeInRight {
	from { opacity: 0; transform: translatex(100px);}
	to { opacity: 1; transform: translatex(0px);}
}

p.text {
    font-size: 23px;
    font-family: 'Gotham-Bold', sans-serif;
    font-weight: 600;
}