/*
Yellow : #f1c40f
Newtek : #daa520
*/

/* ---------------------------------------------------------------------- */
/* BASIC SETUP */
/* ---------------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	background-color: #fff;
	color: #555;
	font-family: 'Lato', 'Arial', sans-serif;
	font-weight: 300;
	font-size: 20px;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* ---------------------------------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------------------------------- */

.row
{
	max-width: 1140px;
	margin: 0 auto;
}

section
{
	padding: 80px 0;
}

.box
{
	padding: 1%;
}

.box-1, .box-2, .box-3, .box-4 {
	opacity: 0;
}

.box-1.animated, .box-2.animated, .box-3.animated, .box-4.animated {
	opacity: 1;
}

.box-2 {
	animation-delay: 0.3s;
}

.box-3 {
	animation-delay: 0.6s;
}

.box-4 {
	animation-delay: 0.9s;
}

/* ---------------------------------------------------------------------- */
/* HEADINGS */
/* ---------------------------------------------------------------------- */

h1, h2, h3 {
	font-weight:300;
	text-transform: uppercase;
}

h1 {
	color: #fff;
	font-size: 240%;
	word-spacing: 4px;
	letter-spacing: 1px;
}

h2
{
	font-size: 200%;
	word-spacing: 2px;
	text-align: center;
	margin: 30px 0;
	letter-spacing: 1px;
}

h3
{
	font-size: 110%;
	margin: 20px 0;
}

/* ---------------------------------------------------------------------- */
/* PARAGRAPHS */
/* ---------------------------------------------------------------------- */

.long-copy
{
	line-height: 145%;
	width: 70%;
	margin-left: 15%;
	margin-bottom: 30px;
	text-align: center;
}

.box p
{
	font-size: 90%;
	line-height: 145%;
}

/* ---------------------------------------------------------------------- */
/* ICONS */
/* ---------------------------------------------------------------------- */

.icon-big
{
	font-size: 350%;
	display: block;
	color: #daa520;
	margin-bottom: 10px;
}

/* ---------------------------------------------------------------------- */
/* LINKS */
/* ---------------------------------------------------------------------- */

a, a:after, a:before {
	transition: all .3s;
}

a:link,
a:visited
{
	color: #ddd;
	text-decoration: none;
}

a:hover,
a:active
{
	color: #fff;
}

/* ---------------------------------------------------------------------- */
/* HEADER */
/* ---------------------------------------------------------------------- */

header {
	background-image: /*linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),*/ url(img/Burj-Khalifa-HD-Wallpapers-Free-Download.jpg);
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.hero-text-box {
	position: absolute;
	width: 940px;
	/*padding: 15px;*/
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	background-color: rgba(0,0,0,0.5);
	z-index: 0;
}

.break {
	display: none;
}

.logo
{
	background-color: transparent;
	border: 0;
	height: 100px;
	width: auto;
	float: left;
	margin-top: 20px;
	transition: .3s;
}

.logo.sticky {
	background-color: transparent;
	border: 0;
	height: 50px;
	width: auto;
	float: left;
	margin: 5px 0;
}

/* MAIN NAVI */

nav {
	position: fixed;
	top: 0;
	left: 0;
	transition: .3s;
	z-index: 999;
	width: 100%;
}

.main-nav
{
	float: right;
	list-style: none;
	margin-top: 55px;
	transition: .3s;
}
.main-nav ul {
	float: right;
}

.main-nav li
{
	display: inline-block;
	margin-left: 0px;
	text-decoration: none;
}

.main-nav li a {
	position: relative;
	z-index: 1;
	padding: 20px;
	transition: .3s;
}

.main-nav li a:after {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	margin: auto;
	width: 90%;
	height: 2px;
	content: '.';
	color: transparent;
	background: #daa520;
	visibility: none;
	opacity: 0;
	z-index: -1;
}

.main-nav li a:hover:after {
	opacity: 1;
	visibility: visible;
	top: 100%;
}

/* STICKY NAVI */

.sticky {
	background-color: rgba(255,255,255,0.98);
	box-shadow: 0 2px 2px #efefef;
}

.sticky .main-nav { margin: 18px 0; }

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited
{
	padding: 20px;
	color: #555;
}

/* HAM NAVI */

.hamburger {
	width: 50px;
	height: 50px;
	position: absolute;
	display: none;
	align-items: center;
	justify-content: center;
	right: 5%;
	top: 50%;
	transform: translate(-5%,-50%);
	cursor: pointer;
	z-index: 1000;
}

.line {
	width: 50px;
	height: 6px;
	background: #daa520;
	border-radius: 5px;
	transition: .5s;
}

.line::before,
.line::after {
	content: '';
	position: absolute;
	width: 50px;
	height: 6px;
	background: #daa520;
	border-radius: 5px;
	transition: .5s;
}

.line::before {
	transform: translateY(-16px);
}

.line::after {
	transform: translateY(16px);
}

.hamburger.visible .line {
	transform: translateX(-50px);
	background: transparent;
}

.hamburger.visible .line::before {
	transform: rotate(45deg) translate(35px,-35px);
	background: #fff;
}

.hamburger.visible .line::after {
	transform: rotate(-45deg) translate(35px,35px);
	background: #fff;
}

.overlay {
	width: 100vw;
	height: 100vh;
	background-color: transparent;
	position: fixed;
	pointer-events: none;
	display: all;
	z-index: 900;
}

.overlay.visible {
	pointer-events: all;
}

.ham-nav {
	list-style: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	clip-path: circle(0% at 90% 10%);
	background-color: #daa520;
	z-index: 999;
	transition: .5s;
}

.ham-nav.visible {
	clip-path: circle(100% at 90% 10%);
}

.ham-nav li {
	margin: 50px 0;
}

.ham-nav a {
	color: #fff;
	font-size: 150%;
}

/* ---------------------------------------------------------------------- */
/* WHY US */
/* ---------------------------------------------------------------------- */

.section-why-us {
	z-index: 10;
}

/* ---------------------------------------------------------------------- */
/* SOLUTIONS */
/* ---------------------------------------------------------------------- */

.section-solutions {
	background-color: #f4f4f4;
}

.section-solutions img {
	width: 100%;
	transform: scale(0.8);
	transition: .3s;
}

.section-solutions img:hover {
	transform: scale(1);
}

.section-solutions p {
	text-align: center;
}

/* ---------------------------------------------------------------------- */
/* TESTIMONIALS */
/* ---------------------------------------------------------------------- */

.section-testimonials
{
	background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(img/burj-khalifa-hd-wallpaper.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
	background-attachment: fixed;
}

blockquote
{
	padding: 5%;
	font-style: italic;
	line-height: 145%;
	position: relative;
	margin-top: 80px;
}

blockquote:before
{
	content: "\201C";
	font-size: 500%;
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
}

cite
{
	font-size: 90%;
	margin-top: 25px;
	margin-bottom: 30px;
	display: block;
}

/* ---------------------------------------------------------------------- */
/* ACHIEVEMENTS */
/* ---------------------------------------------------------------------- */

.section-achievements {
	background-color: #f4f4f4;
}

.section-achievements h1,
.section-achievements h3 {
	text-align: center;
	color: #daa520;
}

.section-achievements h1 {
	font-size: 350%;
}


/* ---------------------------------------------------------------------- */
/* FOUNDER */
/* ---------------------------------------------------------------------- */

.section-founder h1 {
	color: #555;
	margin-top: 55px;
}

.section-founder .container {
	width: 100%;
	display: flex;
	justify-content: center;
}

.section-founder img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.section-founder p {
	font-size: 180%;
	text-align: center;
	font-style: italic;
	margin-top: 10px;
}

.founder-tag, .founder-img, .founder-name {
	opacity: 0;
}

.founder-tag.animated, .founder-img.animated, .founder-name.animated {
	opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------------------------- */

footer
{
	background-color: #333;
	padding: 50px;
	font-size: 80%;
}

.footer-nav
{
	list-style: none;
	float: left;
}

.social-links
{
	list-style: none;
	float: right;
}

.footer-nav li,
.social-links li
{
	display: inline-block;
	margin-right: 20px;
}

.footer-nav li:last-child,
.social-links li:last-child
{
	margin-right: 0;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited
{
	text-decoration: none;
	border: 0;
	color: #888;
	transition: color 0..2s;
}

.footer-nav li a:hover,
.footer-nav li a:active
{
	color: #ddd;
}

.social-links li a:link,
.social-links li a:visited
{
	font-size: 160%;
}

.facebook,
.twitter,
.instagram
{
	transition: color 0.3s;
}

.facebook:hover
{
	color: #3b5998;
}

.twitter:hover
{
	color: #00aced;
}

.instagram:hover
{
	color: #dd4b39;
}

footer p
{
	color: #888;
	text-align: center;
	margin-top: 20px;
}

/* ---------------------------------------------------------------------- */
/* ABOUT HEADER */
/* ---------------------------------------------------------------------- */

.about-header {
	height: 100vh;
	background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(img/7a8d8ed0d20a330f8ebbb25ba09688f5.jpg);
	background-size: cover;
	background-attachment: fixed;
}

.about-heading {
	position: relative;
	top: 20%;
}

.about-header h2 {
	color: #fff;
}

.about-header p {
	font-size: 180%;
	color: #fff;
}

.about-hero-text {
	position: relative;
	top: 25%;
	animation-delay: 0.5s;
}

.about-content p {
	font-size: 120%;
	text-align: center;
	padding: 40px 0;
}

/* ---------------------------------------------------------------------- */
/* PRODUCT HEADER */
/* ---------------------------------------------------------------------- */

.product-header {
	background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(img/1_E1NbuZ6F4Z_yX7inZ97Itg.jpeg);
	height: 100vh;
	background-size: cover;
	background-attachment: fixed;
	background-position: bottom;
}

.product-title {
	background-color: #f4f4f4;
	height: 50vh;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-title h2 {
	font-size: 220%;
}

/* ---------------------------------------------------------------------- */
/* PRODUCT CAR */
/* ---------------------------------------------------------------------- */

.product-car {
	height: 50vh;
	display: flex;
	align-items: center;
}

.odd h2 {
	font-size: 180%;
	padding-left: 70%;
}

.odd img {
	height: 40vh;
	position: absolute;
	left: 20%;
	top: 155%;
}

.even h2 {
	font-size: 180%;
	padding-left: 20%;
}

.even img {
	height: 40vh;
	position: absolute;
	left: 70%;
	top: 155%;
}

/* ---------------------------------------------------------------------- */
/* PRODUCT DOOR */
/* ---------------------------------------------------------------------- */

.section-door img {
	width: 100%;
	transform: scale(0.6);
	transition: .3s;
}

.section-door img:hover {
	transform: scale(0.8);
}

/* ---------------------------------------------------------------------- */
/* PRODUCT PANEL */
/* ---------------------------------------------------------------------- */

.section-panel,
.section-motor {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* PRODUCT CONTROLLER */
/* ---------------------------------------------------------------------- */

.product-controller img {
	transform: scale(0.8);
}

.product-controller h2 {
	font-size: 180%;
}

/* ---------------------------------------------------------------------- */
/* PRODUCT MOTOR */
/* ---------------------------------------------------------------------- */

.section-motor {
}

.section-motor h3 {
	text-align: center;
}

.section-motor img {
	width: 100%;
	transform: scale(0.8);
}

/* ---------------------------------------------------------------------- */
/* CONTACT HEADER */
/* ---------------------------------------------------------------------- */

.contact-header {
	height: 100vh;
	background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(img/contact-us-background.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: right;
}

.drop {
	height: 20%;
}

.contact-header h1 {
	text-align: center;
	margin: 20px 0;
	color: #daa520;
}

input[type=text] {
	color: #daa520;
	width: 50%;
	margin: 20px 0;
	padding: 7px;
	font-weight: 300;
	outline: none;
	border: none;
	border-radius: 0px;
	border-bottom: 1px solid #fff;
	background-color: transparent;
	transition: .3s;
}

.field:focus
{
	border-bottom: 1px solid #daa520;
	outline: none;
}

.field::placeholder
{
	color: #fff;
	transition: .3s;
}

.field:focus::placeholder {
	color: #daa520;
}

form {
	text-align: center;
}

input[type=submit] {
	text-decoration: none;
	margin: 20px 0;
	padding: 10px 30px;
	background-color: transparent;
	border: 1px solid #daa520;
	border-radius: 0;
	color: #daa520;
	font-weight: 300;
	transition: .3s;
	cursor: pointer;
}

input[type=submit]:hover,
input[type=submit]:hover {
	background-color: #daa520;
	color: #fff;
}

/* ---------------------------------------------------------------------- */
/* SOCIAL */
/* ---------------------------------------------------------------------- */

.section-social {
	text-align: center;
	background-color: #f4f4f4;
}

.section-social a {
	color: #daa520;
	font-size: 160%;
	transition: unset;
}

.social {
	margin-top: 25px;
	margin-bottom: 25px;
}

/* ---------------------------------------------------------------------- */
/* MEET */
/* ---------------------------------------------------------------------- */

.section-meet {
	text-align: center;
}

.section-meet h2 {
	margin-bottom: 60px;
}

.section-meet h3 {
	font-size: 160%;
}

.section-meet p {
	font-size: 120%;
}

/* ---------------------------------------------------------------------- */
/* PROJECT HEADER */
/* ---------------------------------------------------------------------- */

.project-header {
	height: 100vh;
	background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(img/Under-construction.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}