/*
Theme Name: Mosaic Studios
Description: Mosaic Studios Child Theme
Author: Geoff Bailey
Template: themetrust-weston
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mosaicchild
*/

/*--------------------------------------------------------------
----------------------------------------------------------------

TABLE OF CONTENTS

1.0 -- TYPOGRAPHY
1.1 -- TYPOGRAPHY -- STORIES
2.0 -- ELEMENTS
3.0 -- FORMS
4.0 -- CONTACT CARDS
5.0 -- SALES
6.0 -- RESPONSIVE

----------------------------------------------------------------
--------------------------------------------------------------*/


/*--------------------------------------------------------------
1.0 -- TYPOGRAPHY
--------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	font-family: ff-good-web-pro-narrow, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #f2f2f2;
}

em {
	font-style: italic;	
}

h1, h2, h3, h4, h5, h6 {
	color: #808080;
}

a {
	color: #6aa6b8;
}

a:hover {
	color: #ff0048;
}

p {
	font-size: 0.9em;
}

pre {
	background: none;
	padding: 0;
}

/* Menus ------------------------------ */

.main-nav ul a, 
.main-nav ul li,
.main-nav ul a i {
	font-size: 1.5rem;
}

.main-nav ul ul a, 
.main-nav ul ul li, 
.sticky .main-nav ul ul a, 
.sticky .main-nav ul ul li {
	font-size: 1.5rem;
}


/* Menus ------ Second level+ dropdowns */

.sub-menu ul a, 
.sub-menu ul li,
.sub-menu ul a i {
	font-size: 1.4rem;
}

#site-header .sub-menu {
  background-color: transparent;
  box-shadow: none;
}

#site-header.sticky .sub-menu {
  background-color: #020202;
}

.sub-menu {
	top: 75% !important;
}

.fa {
	margin-right: 3px !important;
}




button, input[type="submit"] {
		background-color: #ff0048 !important;
		background-image: none !important;
		color: black !important;
		border: none !important;
		border-radius: 5px !important;
}

input[type="password"] {
	background-color: #202020 !important;
	border: 1px solid #808080;
	width: 300px;
	margin: 10px 0;
}

input[type="checkbox"] {
	border: 1px solid #808080;
}

.title-main {
	font-family: ff-good-web-pro-extra-conden, sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 5.5em;
	text-transform: uppercase;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #ff0048;
	color: black;
	margin-bottom: 7px;
}

.title-quote {
	font-family: ff-good-web-pro-compressed, sans-serif;
	font-weight: 300;
	font-size: 7rem;
	line-height: 7.5rem;
	color: #f2f2f2;
	text-indent: -1.25rem;
	padding-left: 7px;
}

.subtitle-quote {
	font-size: 2.35rem;
	font-weight: 700;
	color: #ff0048;
}

.title-show {
	font-family: ff-good-web-pro-compressed, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 3.5em;
	color: #ff0048;
	margin-top: 0.5em;
	margin-bottom: 0;
}

.title-subhead {
	font-family: ff-good-web-pro-compressed, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 2.5em;
	color: #808080;
}

.project.small.effect-3 h3 {
	color: #fff !important;
	font-family: ff-good-web-pro-compressed;
	font-size: 2em;
	font-weight: 200;
	text-transform: none;
}

.home-intro {
  margin: 90px 5px 0 5px !important;
}

.text-hero p {
	font-size: 2.0rem;
	line-height: 1.5em;
}

.text-sidekick p {
	font-size: 1em;
  	line-height: 1.75em;
}

.leader-name {
	font-family: ff-good-web-pro-compressed, sans-serif;
	font-weight: 300;
	font-size: 3.5em;
	text-transform: none;
	color: #f2f2f2;
	margin-bottom: -5px
}

.leader-title {
	font-family: ff-good-web-pro-narrow, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 1.75rem;
	text-transform: uppercase;
	letter-spacing: 6px;
	color: #ff0048;
	margin-bottom: 30px
}

.callout {
	color: #ff0048;
	font-family: ff-good-web-pro-narrow, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.greyed {
	color: #808080;
}

div#section-vfxreel {
	margin-right: 75px;
}

div#section-vfxreel h2 {
	line-height: 1.1em;
}


/*--------------------------------------------------------------
1.1 -- TYPOGRAPHY -- STORIES
--------------------------------------------------------------*/

.blog .body-wrap {
	padding-right: 200px;
  }

#primary header.main h1 {
	font-family: ff-good-web-pro-compressed, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 4em;
	color: #ff0048 !important;
}

.post.small h3 {
	font-family: ff-good-web-pro-compressed, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.75em !important;
	margin-bottom: 0px !important;
	line-height: 1.15em;
}

.text-light .post.small .meta {
	color: #808080;
}

blockquote {
	border-left: 3px solid #ff0048;
  }


/*--------------------------------------------------------------
2.0 -- ELEMENTS
--------------------------------------------------------------*/

.dropcap {
	float: left;
	margin: 0 !important;
	padding-right: 8px;
	position: relative;
  	top: 7px;
}

.dropcap img {
	width: 78px;
}

.title-section {
	background-image: url(https://mosaicstudios.com/staging01/wp-content/uploads/2026/02/separator_line05.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 90px 5px 45px 5px !important;
}

.title-section h2 {
	font-family: ff-good-web-pro-compressed, sans-serif;
  	font-weight: 300;
  	font-style: normal;
  	font-size: 2.65em;
  	color: #f2f2f2;
  	margin: 0 0 0 20px;
  	position: relative;
  	top: 0px;
}

.title-section-simple {
	background-image: url(https://mosaicstudios.com/staging01/wp-content/uploads/2026/02/separator_simple05.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 45px 0 20px 0 !important;
}

.title-section-simple h2 {
	font-family: ff-good-web-pro-compressed, sans-serif;
  	font-weight: 300;
  	font-style: normal;
  	font-size: 2.65em;
  	color: #f2f2f2;
  	margin: 0 0 0 4px;
  	position: relative;
  	top: -2px;
}

.title-section-basic {
	margin: 45px 0 20px 0 !important;
}

.title-section-basic h2 {
	font-family: ff-good-web-pro-compressed, sans-serif;
  	font-weight: 300;
  	font-style: normal;
  	font-size: 2.65em;
  	color: #f2f2f2;
  	margin: 0 0 0 -15px;
  	position: relative;
  	top: -6px;
}

.locations h3 {
	font-family: ff-good-web-pro-compressed, sans-serif;
  	font-weight: 300;
  	font-style: normal;
	font-size: 2em;
	margin-bottom: .15em;
}

.leader-expand {
  display: flex;
  align-items: center;
}

.leader-expand div {
	margin-bottom: 0 !important;
}

.leader-column1 {
  width: 65% !important;
}

.leader-column2 > div > div {
  display: grid;
  grid-template-columns: 20% auto;
  align-items: center;
}

.leader-socialimg {
	width: 50px;
}

.flexslider {
	background: none !important;
	border: 0 !important;
}

.vc_separator.vc_sep_color_grey .vc_sep_line {
	border-color: #808080 !important;
}

/* Styling for static content blocks */
.content-block {
	margin-bottom: 35px;
}

.content-player {
	margin-bottom: 0px !important;
	cursor: pointer;
  }

.content-image {
	margin-bottom: 0px !important;
  }

.content-title {
	margin-top: 15px;
	margin-bottom: 0px;
	border-bottom: 1px solid #808080;
  }

.content-title p {
	padding-bottom: 0px;
  }

  /* Additional styling for expandable content blocks */

.content-panel {
	border-bottom: 1px solid #808080;
	margin-bottom: 70px;
}

.content-panel .vc_tta-panel-heading, .content-panel .vc_tta-panel-body {
	background-color: black !important;
  }

.content-panel .vc_tta-panel-title a, .content-panel .vc_tta-panel-body {
	padding: 14px 0px !important;
}

.content-panel p {
	padding-bottom: 0px;
	line-height: 1em;
  	line-height: 1.2em;
  	margin-bottom: .6em;
}

.contact-info {
	padding: 0 150px;
}

.team-headshot {
	margin-top: 35px;
}

/* Additional styling for MSC By the Numbers widget */

.msc_widget {
  border: 1px #404040 solid;
}

.widget-header {
  display: grid;
  grid-template-columns: 8.75% auto;
  align-items: baseline;
  margin: 10px 40px;
}

.widget-logo {
  width: 80px;
  height: auto;
}

.widget-title h3 {
  font-family: ff-good-web-pro-compressed, sans-serif !important;
  font-weight: 300;
  font-style: normal;
  font-size: 2.65em;
  color: #f2f2f2;
  margin: 0 0 0 -15px;
  position: relative;
  top: -8px;
  text-transform: none;
}

.widget-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 0 50px 20px 50px;
}

.widget-item.label {
  font-size: 1.5rem;
}

.widget-item.data {
  font-family: ff-good-web-pro-compressed, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2.65em;
  color: #4852a8;
  margin: 0 0 20px 0;
  position: relative;
}

/* Additional styling for video player and reels pages */

video {
	cursor: pointer;
}

.reel .content-main {
	width: 100%;
	max-width: 100%;
}

.reel .reel-content {
	display: flex;
	align-items: center;
}

.reel .reel-info {
	padding-left: 50px;
}

.reel .reel-info img {
	width: 75px;
}

.reel .reel-info p {
	text-transform: uppercase;
	line-height: 1.1em;
	color: #505050;
	margin: 0;
	padding: 0 0 0 0;
}



/*--------------------------------------------------------------
3.0 -- FORMS
--------------------------------------------------------------*/

label {
	font-size: 1em;
}

.fluent_form_3 .ff-el-group {
	margin-bottom: 50px;
}

.fluent_form_3 .ff-el-form-check {
    margin-bottom: 0 5px;
}

.fluent_form_3 .ff-el-form-control{
    border-radius: 1px;
	border: 1px solid #303030;
}

/*
.fluent_form_3 .ff-el-form-check-label .ff-el-form-check-input {
    position: relative;
    top: 6px;
    vertical-align: middle;
	padding: 8px;
}
*/

.fluent_form_3 input[type=checkbox], .fluentform input[type=radio] {
    margin: 0 15px 0 0;
}

.fluent_form_3 .ff-btn-submit {
    background-color: #ff0048 !important;
	color: black !important;
}




/*--------------------------------------------------------------
4.0 -- CONTACT CARDS
--------------------------------------------------------------*/

.contact-column h3 {
	line-height: 1.2em;
}

.contact-column p {
	line-height: 1.2em;
	padding-bottom: 20px;
}

.contact-image {
	height: 400px;
}

.contact-name {}

.contact-title {
	font-size: 0.8em;
	color: #ff0048;
}
.contact-numbers {
	line-height: 1.5em;
}

.contact-socialicons figure {
	float: left;
	width: 24px;
	margin-right: 25px !important;
}

#socialicon_IN {
	clear:both;
}

.contact-button {
	display: block !important;
	clear: left;
	padding: 15px;
	margin: 0 !important;
	position: relative;
	top: 15px;
	border-radius: 4px;
	cursor: pointer;
}

.contact-button:active {
	background-color: #e30040;
	transform: scale(0.95);
  }


/*--------------------------------------------------------------
5.0 -- SALES PAGE
--------------------------------------------------------------*/

.sales .title-section-simple h2 {
	margin: 0;
}

.sales .section h2 {
	font-size: 1.6em;
	color: #ff0048;
	margin: 0;
}

.sales h3 {
	font-family: ff-good-web-pro-compressed, sans-serif;
  	font-weight: 300;
  	font-style: normal;
  	font-size: 1.75em !important;
  	margin-bottom: 0px !important;
  	line-height: 1.15em;
	color: #f2f2f2;
}

.text-light .post.small h3 a {
color: #6aa6b8;
}

.sales p {
	line-height: 2.2rem;
	line-height: 22px;
}

.sales .update {
	font-style: normal !important;
	font-weight: bold;
	font-size: .7em !important;
	color: #808080;
}


/*--------------------------------------------------------------
6.0 -- RESPONSIVE
--------------------------------------------------------------*/

@media only screen and (max-width : 2048px) {
	iframe.presentation {
		transform: scale(0.95);
		transform-origin: 50% 0% 0;
	}

	iframe.reel {
		transform: scale(0.85);
		transform-origin: 50% 0% 0;
	}
}

@media only screen and (max-width : 1024px) {
	.reel .reel-info p {
		font-size: 0.7em;
	}
}

@media only screen and (max-width : 768px) {
	
	h1 {
		font-size: 7rem !important
	}
	h2 {
		font-size: 4rem !important;
		line-height: 1.1em;
	}

	label {
		font-size: 0.9em;
	}

	.section {
	  	margin: 0 !important;
	}

	.title-section h2 {
	  	margin: 0 0 0 29px;
	}
	
	.text-hero p {
		font-size: 1em;
	}

	.contact-info {
		padding: 0;
	}

	.reel .reel-content {
		display: block;
	}

	.reel .reel-info {
		padding-left: 0px;
	}

	.reel .reel-info div {
		margin: 0px;
	}

	.reel .reel-info img {
		display: none;
	}

	.reel .reel-info p {
		font-size: 0.7em;
	}

	.fluent_form_3 .ff-el-form-check-label .ff-el-form-check-input {
    	top: 10px;
    	padding: 5px;
	}

	.fluent_form_3 input[type=checkbox], .fluentform input[type=radio] {
    	margin: 0 10px 0 0;
	}

}