/*
Theme Name: Investments
Description: Custom theme for Symmetrical Investments
Version: 2.0
*/

/* CSS Custom Properties */
:root {
	--color-dark: #283540;
	--color-navy: #2a3b53;
	--color-navy-medium: #354a68;
	--color-navy-light: #405b80;
	--color-light-bg: #e7ebef;
	--color-copyright-bg: #dee3e9;
	--color-error: #d2465b;
	--color-selection: #0598D9;
	--font-main: 'Montserrat', sans-serif;
}

/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,a,img,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,input,dl,dt,dd{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}
:focus{outline:0}
ul{list-style:none}
table{border-collapse:separate;border-spacing:0;clear:both}
::selection{background:var(--color-selection);color:#fff;text-shadow:none}
html{overflow-y:auto;overflow-x:hidden}
input[type=submit],label,select{cursor:pointer}
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block}
*,:before,:after{box-sizing:border-box}
.clear{clear:both}
.hidden{display:none}

/* Grid */
.grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-right: -60px;
}
.grid [class*='col-'] {
	padding-right: 60px;
}
.grid .col-1{width:100%}
.grid .col-1-2{width:50%}
.grid .col-1-3{width:33.33%}
.grid .col-2-3{width:66.66%}
.grid .col-1-4{width:25%}
.grid .col-3-4{width:75%}

/* Typography */
html{height:100%}
body {
	background:#fff;
	color:var(--color-dark);
	font-family:var(--font-main);
	font-size:16px;
	font-weight:300;
}
.c {
	margin:0 auto;
	max-width:1240px;
	padding-left:20px;
	padding-right:20px;
	width:100%;
}
a {
	color:var(--color-navy-light);
	font-weight:600;
	text-decoration:none;
	transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}
h1,h2,h3{font-size:30px;font-weight:300;margin-bottom:40px}
h3{font-size:14px;font-weight:600;line-height:20px;margin-bottom:40px;text-transform:uppercase}
p,ul,ol{line-height:200%;margin-bottom:20px}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
ul,ol{list-style:disc;margin-left:20px}
ul li,ol li{margin-bottom:10px}
ol{list-style:decimal}

/* Header */
header {
	transition: all .2s ease-out;
	padding: 35px 0;
	position: sticky;
	top: 0;
	z-index: 100;
}
header:after{clear:both;content:"";display:table}
header .logo{float:left}
header .logo img{display:block;height:50px;width:auto}
header .menu{float:right;list-style:none;margin:0;padding:5px 0}
header .menu li{float:left;margin-left:20px;margin-bottom:0;position:relative;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.4)}
header .menu li a {
	color:#fff;
	display:block;
	font-size:15px;
	font-weight:600;
	line-height:20px;
	padding:10px;
	transition: background 0.2s ease, color 0.2s ease;
}
header .menu li a[href*="symmetricaladvisory.com"]{background:rgba(0,0,0,.4)}
header .menu li a[href*="symmetricaladvisory.com"]:before{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;margin-right:5px}
header .menu li a:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;margin-left:5px}
header .menu li a:only-child:after{display:none}
header .menu li a:hover{background:#fff;color:var(--color-dark);text-shadow:none}
header .menu li ul{display:none}
header .menu li:hover > a{background:#fff;color:var(--color-dark);text-shadow:none}
header .menu li:hover ul{box-shadow:0 5px 10px rgba(0,0,0,.3);background:#fff;display:block;list-style:none;min-width:200px;margin:0;position:absolute;top:40px;left:0;z-index:4}
header .menu li:hover ul li{float:none;margin:0;width:100%}
header .menu li:hover ul li a{background:#fff;color:var(--color-dark);display:block;text-shadow:none;white-space:nowrap}
header .menu li:hover ul li a:hover{background:var(--color-light-bg)}
header .menu-toggle{display:none}
header.scrolled{background:var(--color-dark)}

/* Hero */
.hero {
	background-color:var(--color-dark);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	margin-top:-121px;
	position:relative;
}
.hero:before,.hero:after{background:linear-gradient(to bottom,rgba(40,53,64,.6),rgba(0,0,0,0));content:'';height:120px;position:absolute;top:0;left:0;right:0;z-index:2}
.hero:after{background:linear-gradient(to top,rgba(40,53,64,.6),rgba(0,0,0,0));top:auto;bottom:0}
.hero *{position:relative;z-index:3}
.hero .c{height:700px;position:relative}
.hero .hero-content{position:absolute;bottom:0;left:20px}
.hero h1{color:#fff;font-size:40px;margin-bottom:10px;text-shadow:0 1px 1px rgba(0,0,0,.4);text-transform:uppercase}
.hero h2{color:#fff;font-weight:600;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.4)}

/* Main */
.main{padding:40px 0}

/* Sidebar Widgets */
.widget{background:var(--color-light-bg);margin-bottom:40px;padding:20px}
.widget h3{background:var(--color-navy);color:#fff;font-size:24px;font-weight:300;line-height:20px;margin:-20px;margin-bottom:20px;padding:20px}
.widget p{font-size:14px}
.widget p a{font-size:11px;font-weight:700;text-transform:uppercase}
.widget p a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;margin-left:5px}
.widget p a:hover{opacity:.5}
.widget.medium h3{background:var(--color-navy-medium)}
.widget.light h3{background:var(--color-navy-light)}

/* Newsletter */
.newsletter {
	box-shadow:0 4px 20px rgba(0,0,0,.2);
	background-color:var(--color-dark);
	background-image:url('images/newsletter-bg.jpg');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	margin:0 auto;
	margin-bottom:40px;
	max-width:1300px;
	position:relative;
}
.newsletter:before{background:rgba(64,91,128,.9);content:'';position:absolute;left:0;right:40%;top:0;bottom:0;z-index:2}
.newsletter *{position:relative;z-index:3}
.newsletter .newsletter-content{padding:80px 0;max-width:440px}
.newsletter .newsletter-content h2{color:#fff;margin-bottom:10px;text-transform:uppercase}
.newsletter .newsletter-content p{color:#fff}
.newsletter .newsletter-content form{width:100%}
.newsletter .newsletter-content form:after{clear:both;content:"";display:table}
.newsletter .newsletter-content form input:not([type='submit']){background:#fff;float:left;height:50px;padding:15px;width:75%}
.newsletter .newsletter-content form input[type='submit'] {
	background:var(--color-navy);
	color:#fff;
	float:left;
	height:50px;
	padding:15px;
	text-align:center;
	width:25%;
	transition: background 0.2s ease;
}
.newsletter .newsletter-content form input[type='submit']:hover{background:var(--color-navy-medium)}

/* Lead Form */
.lead-form label{font-weight:600;display:block;margin-bottom:5px}
.lead-form input:not([type='submit']),.lead-form textarea {
	border-radius:2px;
	border:2px solid var(--color-light-bg);
	margin-bottom:20px;
	padding:10px;
	width:100%;
	transition: border-color 0.2s ease;
}
.lead-form input:not([type='submit']):focus,.lead-form textarea:focus{border-color:var(--color-navy)}
.lead-form input:not([type='submit']).error,.lead-form textarea.error{border-color:var(--color-error)}
.lead-form textarea{font-family:var(--font-main);font-size:16px;font-weight:300;height:200px}
.lead-form div.error{border-radius:0 0 2px 2px;background:var(--color-error);color:#fff;margin-top:-22px;margin-bottom:20px;padding:12px 10px 10px 10px}
.lead-form .btn {
	background:var(--color-navy-light);
	color:#fff;
	padding:15px 20px;
	text-align:center;
	display:inline-block;
	border:none;
	font-family:var(--font-main);
	font-size:16px;
	font-weight:600;
	cursor:pointer;
	transition: background 0.2s ease;
}
.lead-form .btn:hover{background:#496791}

/* Portfolio */
.portfolios .grid {
	margin-right: -40px;
}
.portfolios .grid [class*='col-'] {
	padding-right: 40px;
}
.portfolios .portfolio-company {
	margin-bottom:40px;
	padding:10px;
	position:relative;
	transition: background 0.2s ease;
}
.portfolios .portfolio-company .portfolio-company-image {
	background:#fff;
	cursor:pointer;
	overflow:hidden;
	position:relative;
}
.portfolios .portfolio-company .portfolio-company-image:before{content:"";display:block;padding-top:100%;width:100%}
.portfolios .portfolio-company .portfolio-company-image img{margin:auto;min-height:auto;min-width:auto;max-height:100%;max-width:100%;position:absolute;left:-1000%;right:-1000%;top:-1000%;bottom:-1000%}
.portfolios .portfolio-company .portfolio-company-details{display:none}
.portfolios .portfolio-company.expanded{background:var(--color-navy)}
.portfolios .portfolio-company.expanded .portfolio-company-details {
	opacity:.97;
	background:var(--color-navy);
	display:block;
	min-height:100%;
	padding:10px;
	position:absolute;
	left:100%;
	top:0;
	z-index:6;
	width:600px;
}
.portfolios .portfolio-company.expanded .portfolio-company-details h2{color:#fff;font-size:20px;margin-bottom:10px}
.portfolios .portfolio-company.expanded .portfolio-company-details p{color:#fff;font-size:12px;font-weight:400;line-height:150%;margin-bottom:10px}
.portfolios .portfolio-company.expanded .portfolio-company-details a{color:#fff;text-decoration:underline}

/* Portfolio position adjustments for right-side companies */
.portfolios .grid .col-1-4:nth-child(4n+3) .portfolio-company.expanded .portfolio-company-details,
.portfolios .grid .col-1-4:nth-child(4n+4) .portfolio-company.expanded .portfolio-company-details {
	right:100%;
	left:auto;
}

/* Sidebar */
#sidebar ul{list-style:none;margin:0}

/* Footer */
footer{padding:80px 0;background:var(--color-light-bg)}
footer ul{list-style:none;margin-left:0}
footer ul li{margin-bottom:0}
footer ul li a {
	color:var(--color-dark);
	font-size:14px;
	font-weight:400;
	transition: opacity 0.2s ease;
}
footer ul li a:hover{opacity:.5}
footer p{font-size:14px;font-weight:400}

/* Copyright */
.copyright{background:var(--color-copyright-bg);padding:40px 0}
.copyright p{opacity:.8;color:var(--color-navy-light);font-weight:600;font-size:11px;text-transform:uppercase}

/* Success/Error Messages */
.form-success {
	background: #d4edda;
	color: #155724;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 2px;
}
.form-error {
	background: #f8d7da;
	color: #721c24;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 2px;
}

/* Responsive */
@media screen and (max-width: 1140px) {
	.grid {
		margin-right: 0;
		flex-direction: column;
	}
	.grid [class*='col-'] {
		padding-right: 0;
		margin-bottom: 20px;
		width: 100%;
	}

	body.menu-open {
		margin-left: -300px;
		margin-right: 300px;
	}

	header .menu-toggle {
		display: block;
		float: right;
		color: #fff;
		font-size: 24px;
		height: 40px;
		width: 40px;
		background: rgba(40,53,64,.3);
		text-align: center;
		line-height: 40px;
		cursor: pointer;
	}

	header .menu {
		background: #1e2830;
		padding: 20px;
		position: fixed;
		top: 0;
		bottom: 0;
		right: -300px;
		width: 300px;
		transition: right 0.3s ease;
	}
	header .menu.open { right: 0; }
	header .menu li { float:none; margin:0; width:100% }
	header .menu li a { font-size:13px }
	header .menu li a:after { display:none }
	header .menu li a:hover { background:#324250 }
	header .menu li ul { display:block; list-style:none; margin:0; position:relative }
	header .menu li:hover > a { background:transparent; color:#fff; text-shadow:none }
	header .menu li:hover > a:hover { background:#324250 }
	header .menu li:hover ul { box-shadow:none; background:transparent; position:relative; width:100% }
	header .menu li:hover ul li a { background:transparent; color:#fff }
	header .menu li:hover ul li a:hover { background:#324250 }

	.newsletter:before { right:10% }

	/* Portfolio mobile */
	.portfolios .grid {
		margin-right: 0;
	}
	.portfolios .grid [class*='col-'] {
		padding-right: 0;
	}
	.portfolios .portfolio-company {
		padding-left: 30%;
		cursor: default;
	}
	.portfolios .portfolio-company .portfolio-company-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 25%;
	}
	.portfolios .portfolio-company .portfolio-company-details {
		display: block;
	}
	.portfolios .portfolio-company .portfolio-company-details h2 { font-size:20px; margin-bottom:20px }
	.portfolios .portfolio-company .portfolio-company-details p { font-size:12px }
	.portfolios .portfolio-company .portfolio-company-details a { font-size:12px }
}

@media screen and (max-width: 768px) {
	.hero .c { height: 500px; }
	.hero h1 { font-size: 28px; }
	footer { padding: 40px 0; }
	.newsletter .newsletter-content { padding: 40px 0; }
}