@import url(/assets/css/reset.css);
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');


:root {
  /* Fonts */
  --font-primary: "Libre Baskerville", serif;
  
  /* Color Palette - Simplified */
  --color-primary: #8B1E3F;     /* Main brand color - previously strata-blue */
  --color-text-primary: #252525; /* Primary text color */
  --color-text-secondary: #7c7c7c; /* Secondary/caption text */
  --color-text-muted: #919191;   /* Footer text, copyright info */
  --color-background: #fff;      /* Main background color */
  --color-accent: #df303b;       /* For attention-grabbing elements */
  --color-border-light: #e0e0e0; /* Light borders */
  --color-border-medium: #c1c1c1; /* Medium borders */
  --color-input: #cdcdcd;        /* Form input borders */
  --color-error: red;            /* Error messages */
  --color-hover-background: #f7f7f7; /* Hover state backgrounds */
  --color-link-hover: #e27a99; /* Hover state backgrounds */
  --color-section-highlight: #e4f4fd; /* Special section backgrounds */
}

/* Global Styles */
.mobile-only {
	display: none;
}

body {
	font-style: normal;
	font-family: var(--font-primary);
	color: var(--color-text-primary);
}

a.strata-blue {
    color: var(--color-primary);
    font-weight: 500;
    border-bottom: var(--color-primary) 2px solid;
}

div#page-dimmer {
	background-color: var(--color-text-primary);
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: .5;
	display: none;
}

.clr {
	clear: both;
}

a, a.regular {
	border-bottom: 0;
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 700;
	font-style: normal;
}

b {
	font-weight: 700;
}

b.strata-blue {
	color: var(--color-primary);
}

i {
	font-style: italic;
}

p {
	margin-bottom: 10px;
	line-height: 1.6;
	color: var(--color-text-primary);
}

.scroller-anchor {
	margin: 0;
	padding: 0;
	height: 0;
}

.scroller {
	z-index: 100;
	margin: 0;
	width: 100%;
	height: 0;
	background: var(--color-background) url(/assets/images/bgstrip.png) repeat-x;
	text-align: center;
	font-weight: 700;
}

.wrap {
	width: 1074px;
	margin: 0 auto;
}

header {
	margin-top: 15px!important;
}

main {
	margin-bottom: 25px!important;
}

footer {
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	height: auto;
	background-color: var(--color-background);
	margin-top: 37px!important;
}

#container {
	background: var(--color-background);
}

.clearfloat {
	zoom: 1;
}

/* Client section */
div#sooc-2 {
	float: left;
}

p#sooc-2-1 {
	font-size: 23px;
	color: var(--color-text-primary);
	float: left;
}

i.sooc-2-indic {
	float: left;
	background-image: url(/assets/images/sooc-indic-1.gif);
	width: 17px;
	display: block;
	height: 23px;
	margin-left: 12px;
	margin-top: 7px;
	filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

div#sooc-3 {
	float: left;
	margin-top: -9px;
	margin-left: 19px;
}

div#sooc-3-client-kuoni {
	background-image: url(/assets/images/sooc-3-client-kuoni.jpg);
	width: 107px;
}

div#sooc-3-client-emerson {
	background-image: url(/assets/images/sooc-3-client-emerson.jpg);
	width: 83px;
}

div#sooc-3-client-hardrockcafe {
	background-image: url(/assets/images/sooc-3-client-hardrockcafe.jpg);
	width: 83px;
}

div#sooc-3-client-deloitte {
	background-image: url(/assets/images/sooc-3-client-deloitte.jpg);
	width: 83px;
}

.sooc-icon {
	float: left;
	display: block;
	height: 50px;
	margin-right: 23px;
}

/* Introduction section */
h3#featured-highlighted {
	/*font-size: 37px;
	line-height: 67px;*/
    font-size: 35px;
    line-height: 2;
}

section#introduction-digital-services {
	margin-top: 62px;
	margin-bottom: 77px!important;
}

section#some-of-our-clients {
	margin-top: 55px;
}

/* Logo and Nav */
#logo-unit {
	float: left;
	width: 222px;
}

#logo a {
	float: left;
	width: 250px;
	height: 90px;
	background: var(--color-background) url(/assets/images/logo-magenta-advisory.jpg) no-repeat top left;
	text-indent: -9999em;
}

#logo a:hover {
	border: none!important;
	text-decoration: none!important;
}

#logo-summary {
	float: left;
	margin-left: 5px;
	padding-left: 10px;
	width: 290px;
	border-left: 1px solid var(--color-border-light);
	line-height: 1.2;
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-top: 5px;
}

nav {
	float: right;
	margin-top: 30px;
}

#nav-strip a:hover {
	text-decoration: none!important;
}

#nav-strip ul li.nav-item {
	float: left;
}

#nav-strip ul li.nav-item:hover {
	text-decoration: none!important;
}

#nav-strip ul li.nav-item.hover a, #nav-strip ul li.nav-item:hover a {
	color: var(--color-link-hover);
}

#nav-strip ul li.nav-item.active a {
	font-weight: 700;
	padding-bottom: 10px;
	border-bottom: var(--color-primary) 3px solid;
}

#nav-strip ul li a {
    color: var(--color-primary);
    display: block;
    font-size: 17px;
    font-weight: 700;
    margin-left: 23px;
}

#nav-strip ul li a .primary-link, #nav-strip ul li.active a .primary-link, #nav-strip ul li.hover a .primary-link {
	/*background: url(/assets/images/sprite-nav.png) no-repeat scroll 0 0 transparent;*/
	position: relative;
	top: 2px;
}

#nav-strip ul li a .primary-link {
	background-position: 103% -138px;
}

#nav-strip ul li.active a .primary-link {
	background-position: 103% -191px!important;
}

.section-separator-hz-footer {
	margin-top: 75px;
	display: block;
	height: 7px;
	background-image: url(/assets/images/hz-header-sep-bw.jpg);
}

/* Footer styles */
div#ft1-1 {
	float: left;
}

div#ft1-2-logo-elements {
	float: right;
}

div#ft-1-1-cosmos {
	width: 364px;
	height: 39px;
	background: var(--color-background) url(/assets/images/powered-by-cosmos-cms.gif) no-repeat top left;
}

div#ft-1-2-quick-links {
	margin-top: 25px;
}

span#ft-1-2-1 {
	float: left;
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 700;
	margin-top: 2px;
}

#ft-1-2-quick-links ul {
	float: left;
	margin-left: 10px;
}

#ft-1-2-quick-links li a {
	color: var(--color-text-secondary);
	font-size: 14px;
	font-weight: 700;
}

#ft-1-2-quick-links li {
	float: left;
	margin-right: 10px;
	padding-right: 10px;
}

#ft-1-2-quick-links li:not(:last-child) {
	border-right: solid 2px #e1e1e1;
}

.hz-sep-thin-ftr-1 {
	margin: 25px 0 15px;
}

#ft1-2 li {
	float: left;
}

#ft1-2 li a {
	color: var(--color-text-secondary)!important;
	font-size: 12px;
	margin-right: 20px;
}

div#ft1-2 {
	margin-bottom: 60px!important;
}

#logo-elements {
	float: right;
	position: relative;
	top: 60px;
}

#copyright-version p {
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 13px!important;
	color: var(--color-text-muted);
}

#logo-elements #greyed-logo {
	display: block;
	margin-right: 0;
	background: url(/assets/images/logo-stratadigital-small.png);
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: auto;
	width: 169px;
	height: 37px;
}

/* Mobile Styles */
@media only screen and (max-width:639px) {
	.no-mobile {
		display: none;
	}
	
	.mobile-only {
		display: block;
	}
	
	.wrap {
		width: auto;
	}
	
	/* Introduction section mobile */
	section#introduction-digital-services {
		margin-bottom: 41px!important;
	}
	
	h3#featured-highlighted {
		font-size: 27px;
		line-height: 1.66;
		color: var(--color-text-primary);
	}
	
	.intro-main-1 {
		margin-top: 0!important;
		padding: 15px 20px 15px 20px;
	}
	
	/* Client section mobile */
	section#some-of-our-clients {
		padding: 0 20px 0 20px;
		margin-top: 0!important;
	}
	
	div#sooc-2 {
		float: left;
		margin-bottom: 25px;
	}
	
	p#sooc-2-1 {
		font-weight: 700;
	}
	
	.sooc-icon {
		margin-right: 25px;
		margin-bottom: 25px;
	}
	
	/* Footer mobile */
	footer {
		margin-top: 0!important;
	}
	
	.hz-sep-thin-ftr-1 {
		border-top: var(--color-border-light) 1px solid;
		margin: 15px 0 15px;
	}
	
	.section-separator-hz-footer {
		margin-top: 45px;
		display: block;
		height: 5px;
		background-image: url(/assets/images/hz-header-sep-bw.jpg);
	}
	
	#ft-1-2-quick-links ul {
		margin-left: 0;
		margin-top: 10px;
	}
	
	#ft-1-2-quick-links li {
		float: left;
		margin-bottom: 7px;
	}
	
	#ft1-2 li a {
		color: var(--color-text-secondary)!important;
		font-size: 10px;
		font-weight: 500;
		margin-right: 10px;
	}
	
	/* Navigation mobile */
	nav {
		margin-top: 0!important;
		position: fixed;
		z-index: 5;
		background: var(--color-primary);
		top: 0;
		height: 100%;
		width: 280px!important;
		padding: 0!important;
		left: -100%;
		overflow: auto;
		transition: ease all .5s;
		-webkit-box-shadow: 3px 0 8px 1px rgba(0,0,0,.4);
		box-shadow: 3px 0 8px 1px rgba(0,0,0,.4);
	}
	
	nav.open {
		overflow: hidden;
		left: 0!important;
	}
	
	#nav-strip ul {
		margin-top: 25px!important;
		margin-left: 10px!important;
	}
	
	#nav-strip ul li.nav-item {
		display: block!important;
		float: none!important;
		margin-bottom: 25px!important;
	}
	
	#nav-strip ul li.nav-item.active a {
		color: var(--color-background);
		font-size: 23px!important;
		font-weight: 700;
		padding-bottom: 0;
		border-bottom: none;
	}
	
	#nav-strip ul li a {
		color: var(--color-background);
		display: block;
		font-size: 25px!important;
		line-height: 1.4;
		margin-bottom: 25px!important;
		margin-left: 0!important;
	}
	
	a#btnCloseMenu {
		color: var(--color-background);
		position: relative;
		top: 15px;
		left: -24px;
		float: right;
		width: 20px;
		font-size: 26px;
		z-index: 999;
		text-decoration: none!important;
	}
	
	div#slider-menu-motif {
		background-image: url(/assets/images/kkmotif.gif);
		width: 100%;
		height: 50px;
		position: absolute;
		left: -2px;
		top: -25px;
	}
	
	/* Layout mobile */
	#container, #footer {
		margin: 0;
		padding: 0;
		width: 100%;
		border: 0 none;
	}
	
	#content {
		padding: 0;
		width: 100%!important;
		margin-left: 0!important;
	}
	
	/* Mobile header */
	#header-mobile {
		float: left;
		width: 100%;
		height: 70px;
		margin-bottom: 25px;
	}
	
	#header-mobile #header-m {
		padding: 0 0 0 10px!important;
	}
	
	a#nav-icon {
		display: inline-block;
		height: 30px;
		width: 19px;
		background-image: url(/assets/images/mobile-nav-icon-2.gif);
		background-repeat: no-repeat;
		position: relative;
		top: -25px;
		margin-right: 17px;
		margin-left: 5px;
	}
	
	#header-m a#mobile-logo {
		display: inline-block;
		width: 250px;
		height: 90px;
		background-image: url(/assets/images/logo-magenta-advisory.jpg);
	}
	
	div#logo-summary-mobile {
		font-size: 12px;
		margin-top: 2px;
		color: var(--color-text-primary);
		margin-left: 41px;
	}
	
	.scroller {
		height: 0;
	}
	
	.menu-container {
		margin: 0!important;
		padding-left: 10px!important;
	}
}