@charset "utf-8";
/*
Theme Name: Creativa Landing Page
Theme URI: https://www.hoglab.com
Author: HOG Digital Lab
Author URI: https://hoglab.com
Description: A highly flexible base theme made for developers. This is an excelent base theme to help you create your own custom theme.
Tags: base theme, custom-header, custom-logo, custom-menu, editor-style, featured-images, post-formats, threaded-comments, translation-ready, customizer-support, widget-support, blank theme
Text Domain: hoglab
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.htm
Version: 1.0
*/

/*
==========================================
  Fonts
==========================================
*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600;800&display=swap');
@font-face {
    font-family: 'Effra';
    src: url('fonts/EffraStdBd.eot');
    src: url('fonts/EffraStdBd.eot?#iefix') format('embedded-opentype'),
         url('fonts/EffraStdBd.woff2') format('woff2'),
         url('fonts/EffraStdBd.woff') format('woff'),
         url('fonts/EffraStdBd.ttf')  format('truetype'),
         url('fonts/EffraStdBd.svg#Effra') format('svg');
}

/*
==========================================
  Base Styles
==========================================
*/
:root {
	--main-color: #3138ff;
	--support-color: #ff8b00;
	--main-font: Arial, "sans-serif";
	--support-font: 'Effra', sans-serif;
}
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	text-decoration: none;
	outline: none;
}
*:focus {
	outline: none;
}
html {
	height: 100%;
	/*scroll-behavior: smooth;*/
}
body {
	height: 100%;
	font-family: var(--main-font);
	color: #111;
}
h1, h2, h3, h4, h5, h6 {
	width: 100%;
}
a:link {
	color: var(--main-color);
}
a:visited {
	color: var(--main-color);
}
a:hover {
	color: var(--support-color);
}
a:active {
	color: var(--support-color);
}
p {
	margin-bottom: 5px;
	line-height: 140%;
	letter-spacing: 0.5px;
}
hr {
	margin: 50px 0;
}
table {
	border: 1px solid #ddd;
}

table tbody tr td, table thead tr th {
	padding: 8px !important;
	border: 1px solid #ddd !important;
}


/*
==========================================
  Help Classes
==========================================
*/
.container {
	max-width: 1440px;
	padding: 0 10px;
	margin: 0 auto;
}
.row {
	display: flex;
	flex-wrap: wrap;
}
.basic-row {
	padding: 50px 0 0 0;
}
.basic-row:last-of-type {
	padding-bottom: 50px;
}
.pre-text {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 700;
}
.hero-text {
	line-height: 100%;
	margin-bottom: 40px;
	letter-spacing: -2px;
	font-size: 40px;
	font-weight: 800;
}

/*
==========================================
  WP Overwrite Styles
==========================================
*/
nav ul li {
	display: inline-block;
	margin: 0 10px 10px;
	list-style: none;
}

/*
==========================================
  Main Styles
==========================================
*/
#main-header {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	position: fixed;
	z-index: 99;
	text-align: center;	
	background-color: transparent;
	border-bottom: none;
	transition: all 0.5s ease;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#main-header.scroll-on-active {
	background-color: #FFFFFF;
}
#no-script-msg {
	width: 100%;
	line-height: 30px;
	text-align: center;
	background-color: rbg(190,0,0);
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}
#main-logo {
	width: 100%;
	padding: 10px;
}
#main-logo img {
	max-width: 200px;
	height: auto;
}
#slogan {
	width: 100%;
	padding: 5px;
	margin-top: -10px;
	text-align: center;
	text-transform: lowercase;
	font-family: var(--support-font);
	font-size: 18px;
	font-weight: 400;
	color: #666;
	transition: all 0.5s ease;
}
#slogan-center {
	display: block;
	height: 100%;
	align-items: center;
}
#main-banner {
	min-height: 400px;
	padding-top: 170px;
	padding-bottom: 100px;
	background-position: center center;
	background-size: cover;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#main-banner .row {
	align-items: center;
}
#banner-text {
	flex-basis: 100%;
	margin-left: -2000px;
	text-align: center;
	animation-name: btslide;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes btslide {
	0%{margin-left: -2000px; opacity: 0;}
	100%{margin-left: 0px; opacity: 1;}
}
#client-logo {
	margin-bottom: 20px;
}
#client-logo img {
	max-width: 150px;
	height: auto;
}
#banner-text {
	font-size: 2em;
	font-weight: bold;
}
#banner-text h1 {
	font-size: 0.8em;
	text-transform: uppercase;
	color: #333333;
}
#banner-text h1 span {
	display: block;
	font-size: 0.7em;
}
#banner-image {
	flex-basis: 0%;
	animation-name: bislide;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes bislide {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
#banner-image img {
	display: block;
	width: 100%;
	height: auto;
}
#main-content {
	text-align: center;
}
#main-content h2 {
	margin-bottom: 20px;
	font-size: 30px;
}
.social-links {
	list-style: none;
}
.social-links li {
	display: inline-block;
	margin: 0 10px;
	font-size: 30px;
}
.social-links li a {
	color: var(--support-color);
	transition: all 0.5s ease;
}
.social-links li a:hover {
	color: var(--main-color);
}
#copy-wrap, #dev-wrap {
	flex-basis: 100%;
	max-width: 100%;
	color: #666666;
}
#copy-wrap, #dev-wrap {
	text-align: center;
}
/*
==========================================
  Page Specific Styles
==========================================
*/


/*
==========================================
  Responsive Styles
==========================================
*/
@media(min-width: 400px) {
	#slogan {
		padding: 0 5px 5px;
		font-size: 20px;
	}
	#banner-text {
		flex-basis: 50%;
		margin-left: -2000px;
	}
	#banner-image {
		flex-basis: 50%;
	}
	.hero-text {
		font-size: 50px;
	}
	.social-links li {
		font-size: 40px;
	}
}

@media(min-width: 860px) {
	#main-logo {
		width: 40%;
		padding: 10px;
		text-align: right;
	}
	#slogan {
		width: 60%;
		padding: 10px;
		margin-top: 0;
		text-align: left;
		font-size: 24px;
	}
	#slogan-center {
		display: flex;
		height: 100%;
		align-items: center;
	}
	#main-banner {
		min-height: 600px;
		padding-bottom: 150px;
	}
	#client-logo img {
		max-width: 200px;
	}
	#banner-text {
		font-size: 3em;
	}
	#banner-text h1 {
		font-size: 1.4em;
	}
	.hero-text {
		font-size: 60px;
	}
	.social-links li {
		font-size: 50px;
	}
	#copy-wrap, #dev-wrap {
		flex-basis: 50%;
		max-width: 50%;
	}
	#copy-wrap {
		text-align: left;
	}
	#dev-wrap {
		text-align: right;
	}
}
@media(min-width: 1220px) {
	#main-banner {
		min-height: 800px;
		padding-top: 220px;
		padding-bottom: 200px;
	}
	#client-logo img {
		max-width: 250px;
	}
	#banner-text h1 {
		font-size: 1.5em;
	}
}
@media(min-width: 1440px) {
	#banner-text h1 {
		font-size: 1.6em;
	}
	#slogan {
		font-size: 30px;
	}
}