/*
	Theme Name: Cashmere Test Theme
	Theme URI: http://newsite.cashmereagency.com/
	Author: Eunice Chang
	Template: cashmere-test-theme
	Version: 1.0
*/

/*

	TABLE OF CONTENTS

	1. General Elements
	2. Nav Bar
		2.1 Header
		2.2 Navigation
		2.3 Mobile
	3. Header
	4. Content and Sections
		4.1 About Us
		4.2 Our Lifestyle
	 	4.3 Our Services
		4.4 Our Reel
		4.5 Our Team
		4.6 Newsletter
		4.7 Newsfeed
	5. Work
		5.1 Work Header (Page)
		5.2 Portfolio Wrapper
		5.3 Filter
		5.4 Case Studies Holder
		5.5 Case Study Header (Single)
		5.6 Case Study Content (Single)
		5.7 Small Logos
	6. Blog
		6.1 Single
		6.2 Comments
		6.3 Reply
	4. Footer
	5. Additional elements

	COLORS
	purple: #390e45, rgb(57,14,69)
	light-purple: #4e2655, rgb(78,38,85)
	very-light-purple: #c1b3c4

*/

/* 	======================================================================
														1. General Elements
		====================================================================== */

* {
	margin: 0;
	padding: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	width: auto;
	background-color: #390e45 !important;
}

img {
	vertical-align: top;
	width: 100%;
	height: auto;
}

a {
	text-decoration: none;
}

.container-fluid {
	padding: 0 !important;
}

.iframe-wrapper {
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
	pointer-events: none;
}

.iframe-wrapper iframe {
  width: 100%;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
}


/* 	======================================================================
																2. Nav Bar
		====================================================================== */

/* 	===============================
							2.1 Header
		=============================== */

#header-navigation {
	position: absolute;
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
	top: 0px;
	left: 0px;
	right: 0px;
	display: none;
	z-index: 100;
}

#header-logo {
	position: absolute;
	left: 0px;
	z-index: 100;
	width: 150px;
}

/* cashmere logo hidden on home page navigation bar */
#header-logo .image-empty {
  height: 84px !important;
}

/* 	===============================
							2.2 Navigation
		=============================== */

#navigation-wrapper, #static-navigation-wrapper {
	position: fixed;
	top: 0px;
	background-color: #ffffff;
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3);
	opacity: 0.95;
	width: 100%;
	z-index: 10;
}

#navigation-inner {
	max-width: 1170px;
	width: 90%;
	height: 75px !important;
	position: relative;
	margin: 0 auto;
	display: none;
}

#navigation-logo {
	position: absolute;
	left: 0px;
	z-index: 100;
	width: 150px;
	margin-top: -6px;
}

#header-menu-wrapper, #navigation-menu-wrapper {
	position: absolute;
	right: 0px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#header-menu, #navigation-menu {
  margin-bottom: 0px !important;
}

#header-menu li, #navigation-menu li {
	background-color: #161616;
	list-style-type: none;
	position: relative;
}

#header-menu li a, #navigation-menu li a {
	font-family: "novecento_sans_widebook";
	font-size: 13px;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #ffffff;
	display: block !important;
	padding: 10px 0 10px 15px;
  transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	outline: 0;
}

#header-menu li:hover > a, #navigation-menu li:hover > a {
	background-color: #000000;
}

.active {
	font-weight: bold !important;
	color: tomato !important;
}

#header-menu > li, #navigation-menu > li {
	float: left;
	display: inline-block;
	text-align: center;
	position: relative;
	width: auto;
	background-color: transparent;
}

#header-menu > li:not(:last-child), #navigation-menu > li:not(:last-child) {
  padding-right: 30px;
}

.nav-social {
	padding-right: 10px !important
}

#header-menu > li:hover > a, #navigation-menu > li:hover > a {
	background-color: transparent;
}

#header-menu > li > a {
	padding: 0px;
}

#navigation-menu > li > a {
	padding: 0px;
	color: #000000;
}

#header-menu > li > a:hover {
	text-shadow: 0 0 1px #ffffff;
	background-color: transparent;
}

#navigation-menu > li > a:hover {
	text-shadow: 0 0 1px #bbbbbb;
	background-color: transparent;
}

#header-menu ul, #navigation-menu ul {
	display: none;
	position: absolute;
	top: 0;
	padding-top: 0;
	left: 100%;
	width: 180px;
	text-align: left;
}

#header-menu > li > ul, #navigation-menu > li > ul {
	top: 100%;
	left: 0px;
	padding-top: 30px;
}


/* 	===============================
							2.3 Mobile
		=============================== */
.mobile-menu-icon {
	width: auto;
	display: none;
	cursor: pointer;
}

.navigation-mobile-arrow
{
	position: absolute;
	top: 0px;
	right: 0px;
	color: #ffffff;
	display: block;
	padding: 15px;
	cursor: pointer;
}

/* 	======================================================================
																	3. Header
		====================================================================== */

/* Used on every page but home page */
#header-wrapper {
	width: 100%;
	height: 30em !important;
	position: relative;
	overflow: hidden;
}

#header-wrapper.full-height {
	height: 100vh  !important;
}

#header-wrapper h2 {
	font-family: "novecento_sans_widedemibold";
	color: #fff;
	font-size: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  letter-spacing: 0.1em;
}

.header-image {
	height: 100%;
	float: left !important;
	position: relative;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
 	background-size: cover !important;
}

.header-slide {
	width: 39em;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	display: table;
	text-align: center;
}

.header-slide > img {
	margin-bottom: 20px;
	width: 220px;
}

.header-title {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 32px;
	letter-spacing: 0.1em;
	text-align: center;
	color: #ffffff;
	position: relative;
}

.header-subtitle {
	font-family: "novecento_sans_widebook";
	letter-spacing: 0.1em;
	text-align: center;
	color: #ffffff;
	position: relative;
}

#header-getstarted {
	position: absolute;
	left: 50%;
	top: 100%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	color: #ffffff;
	text-align: center;
	cursor: pointer;
	margin: 0 auto;
	margin-top: -100px;
	display: table;
	padding-top: 20px;
}

#getstarted-text {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 10px;
	width: 100%;
	letter-spacing: 0.2em;
	margin-bottom: 20px;
}

#getstarted-arrow img {
	width: 60px;
}


/*=====================================================================
													4. Content and Sections
======================================================================*/

#content-wrapper {
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #ffffff;
}

#content-wrapper h2 {
	font-family: "novecento_sans_widedemibold";
	color: #390e45;
	font-size: 24px;
	letter-spacing: 0.1em;
}

#content-wrapper section {
	width: 100%;
	position: relative;
	margin: 0 auto;
	padding: 100px 0;
	background-size: cover;
}


/*==============================
					4.1 About Us
  =============================*/
#about-us-wrapper {
	background-image: url('../images/backgrounds/bg-intro.jpg');
	background-position-x: 75%;
	padding: 200px 0 !important;
}

#about-us-wrapper h3 {
	font-family: "novecento_sans_widedemibold";
	color: #390e45;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.1em;
	margin-top: 0;
	margin-bottom: 30px;
}

#about-us-wrapper p {
	font-family: "Roboto";
	font-weight: 300;
	text-align: center;
	font-size: 18px;
	line-height: 30px;
	color: #666;
	margin-bottom: 0 !important;
}

#about-us-inner {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
	float: none;
}

/*==============================
			 4.2 Our Lifestyle
  =============================*/
#our-lifestyle-wrapper {
	background-image: url('../images/backgrounds/bg-lifestyle.jpg');
}

#our-lifestyle-inner {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;

	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.our-lifestyle-inner-video {
	width: 59%;
}

#our-lifestyle-inner > .embed-responsive-16by9 {
	padding-bottom: 34%;
}

.our-lifestyle-inner-text {
	width: 40%;
	padding-left: 50px
}

.our-lifestyle-inner-text h3 {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 20px !important;
	letter-spacing: 0.1em;
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 50px;
	text-align: left;
}

.our-lifestyle-inner-text h4 {
	font-family: "Roboto";
	font-weight: 300;
	font-size: 18px;
	line-height: 30px;
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}

/*==============================
			 4.3 Our Services
  =============================*/
#services-inner {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
}

.services-text {
	margin-top: 100px;
	padding-right: 0 !important;
	padding-left: 50px !important;
}

.services-text h3 {
	margin-bottom: 30px;
	font-family: "novecento_sans_wide_bookbold";
	font-size: 20px !important;
	letter-spacing: 0.1em;
	color: #390e45;
	margin-top: 0px;
	margin-bottom: 50px;
	text-align: left;
}

#services-inner > div > p {
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: 50%;
}

#socialcontent {
	background: url('../images/icons/icon-social-purple.png');
}

#publicitycontent {
	background: url('../images/icons/icon-publicity-purple.png');
}

#influencerscontent {
	background: url('../images/icons/icon-influencers-purple.png');
}

#creativestrategycontent {
	background: url('../images/icons/icon-creativestrategy-purple.png');
}

#brandstrategycontent {
	background: url('../images/icons/icon-brandstrategy-purple.png');
}

#contentproductioncontent {
	background: url('../images/icons/icon-contentproduction-purple.png');
}

#experientialcontent {
	background: url('../images/icons/icon-experiential-purple.png');
}

#mediabuyingcontent {
	background: url('../images/icons/icon-mediabuying-purple.png');
}

.services-text p {
	font-family: "Roboto";
	font-weight: 300;
	font-size: 18px;
	color: #666;
	text-align: left;
}

.services {
	max-width: 800px;
	background-image: url('../images/backgrounds/bg-services.jpg');
	background-repeat: none;
	background-size: cover;
	padding: 0 !important;
}

.services > div {
	margin: 0 !important;
}

.service {
	background: rgba(0, 0, 0, 0.75);
	width: 25%;
	height: 200px;
	box-sizing: border-box;
	border: 1px solid white;
}

.service:hover {
	background: rgba(101, 59, 112, 0.9);
}

.service h4 {
	font-family: "Roboto";
	color: white;
	text-align: center;
	margin-bottom: 30px;
	font-size: 16px;
}

.service p {
	font-family: "Roboto";
	font-weight: 300;
	text-align: justify;
	text-align-last: center;
	-moz-text-align-last: center;
	font-size: 16px;
	letter-spacing: 0.1em;
	color: #7a7a7a;
	line-height: 30px;
}

.service img {
	margin: 0 auto;
	font-size: 32px;
	width: 70px;
	height: 70px;
}

#services-wrapper > div > div > p > .glyphicon {
	color: rgba(156, 39, 176, 0.1);
	position: absolute;
	top: 30%;
	left: 30%;
	font-size: 150px;
}

#services-wrapper > div > div > div > div > span.glyphicon {
	padding-top: 55px;
}

/*==============================
			 		4.4 Our Reel
  =============================*/
#our-reel-wrapper {
	background-image: url('../images/backgrounds/bg-reel.jpg');
}

.our-reel-inner {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
}

#our-reel-wrapper h3 {
	font-family: "novecento_sans_widedemibold";
	color: #fff;
	font-size: 20px;
	letter-spacing: 0.1em;
	margin-top: 0;
	margin-bottom: 50px;
}

#button-row {
	margin-top: 2.5em !important;
}

/*=============================
			 	  4.5 Our Team
=============================*/
#team-wrapper {
	padding-bottom: 0 !important;
}

#team-wrapper-staff {
 padding-top: 0 !important;
}

/* Modal */
.modal-dialog {
	margin-top: 150px;
}

.modal-content {
	border-radius: 0 !important;
	background-color: rgba(0,0,0, 0.8) !important;
	padding-bottom: 40px;
	padding-left: 20px;
}

.modal-header {
	border-bottom: none !important;
}

.modal-body {
	padding-top: 0 !important;
}

.modal-title {
	font-family: "novecento_sans_widebook";
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	text-align: left;
	margin-bottom: 10px;
}

.modal-body h6 {
	font-family: "Montserrat";
	color: #fff;
	font-size: 18px;
	text-align: left;
}

.modal-body p {
	font-family: "Montserrat";
	color: #979797;
	font-size: 16px;
	text-align: left;
}

.team-wrapper-exec-inner {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
}

.team-wrapper-exec-inner h3 {
	font-family: "novecento_sans_widedemibold";
	color: #390e45;
	font-size: 20px;
	letter-spacing: 0.1em;
	margin-top: 0;
	margin-bottom: 50px;
}

#team-wrapper > div > div > img {
 margin-top: 30px;
 margin-bottom: 60px;
 width: 80px;
}

#team-wrapper > div:nth-child(17) > div > img {
	width: 80px;
	margin-top: 50px;
	margin-bottom: 70px;
}

.team-item {
	padding: 0 15px 30px 15px;
	box-sizing: border-box;
}

.team-item h4 {
	font-family: "novecento_sans_widedemibold";
	font-size: 14px;
	font-weight: 400;
	color: #390e45;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 0;
	padding-top: 15px;
}

.team-item h5 {
	font-family: "Montserrat";
	font-size: 10px;
	font-weight: 400;
	color: #000000;
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: 20px;
}

.team-item p {
	font-family: "Roboto";
	font-weight: 300;
	text-align: justify;
	text-align-last: center;
	-moz-text-align-last: center;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #666;
	line-height: 18px;
	margin-bottom: 15px;
}

.team-item-image {
	position: relative;
}

.team-item-hover
{
	position: absolute;
	margin-top: -100px;
	width: 100%;
}

.team-item-icons {
	margin: 0 auto;
	display: inline-block;
}

.team-item-icons a {
	display: block;
	text-decoration: none;
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,0.7);
	color: #fff;
	margin: 0 8px 0 8px;
	float: left;
	top: 40px;
	opacity: 0;
	position: relative;
	transition: background-color 0.2s, color 0.2s;
	-moz-transition: background-color 0.2s, color 0.2s;
	-webkit-transition: background-color 0.2s, color 0.2s;
}

.team-item-icons a:hover {
	background-color: rgba(57,14,69, 0.9);
	color: #ffffff;
}

.team-item-icons i {
	font-size: 25px;
	padding-top: 10px;
	line-height: 30px;
}

.executive-bio {
    text-align: left;
}

/* Staff */
#team-wrapper-staff h2 {
	margin-top: 0;
	margin-bottom: 50px;
}

.team-wrapper-staff-inner {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
}

#staff {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	justify-content: space-around
}

#staff > .team-item {
	padding: 0;
	margin: 0 0 20px 0;
	width: 20%;
	display: inline-block;
	height: 350px;
}


#staff > .team-item > .team-item-image {
	overflow: hidden;
	height: 300px;
	padding-left: 8px;
	padding-right: 8px;
}

.team-item-image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#staff > div > div > .team-item-hover {
	bottom: 15px;
}

@media screen and (max-width: 1200px){
	 #staff > .team-item {
	 	width: 25%;
	 }
}

@media screen and (max-width: 992px){
	#team-wrapper > div > div > img {
		margin-bottom: 30px;
	}

	.team-item {
		padding: 10px !important;
		margin-bottom: 30px;
	}

	#staff > .team-item {
		width: 33.33%;
		padding: 0 !important;
	}

}

@media screen and (max-width: 768px){
	.team-item {
		padding: 0px !important;
		margin-bottom: 50px;
	}

	#staff > .team-item {
		width: 50%;
		padding: 0 !important;
	}
}

@media screen and (max-width: 480px){
	.modal-dialog {
		margin-top: 10px !important;
	}

	.modal-body {
		padding: 15px 25px 15px 15px !important;
	}

}

/*==============================
		 			4.6 Newsletter
  =============================*/

#newsletter-wrapper {
	width: 100%;
	background-image: url('../images/backgrounds/bg-newsletter.jpg');
	background-size: cover;
	padding: 100px 0;
}

.newsletter-content {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
}

.newsletter-text h3 {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 20px !important;
	letter-spacing: 0.1em;
	color: #ffffff;
	margin-top: 0px;
	margin-bottom: 50px;
	text-align: left;
	display: inline-block;
}

#mc_embed_signup form {
	padding: 0 !important;
}

#mc_embed_signup input.email {
	font-family: "novecento_sans_widelight" !important;
	padding: 0 18px 2px 18px !important;
}
#mc_embed_signup .button {
	padding: 0 18px 2px 18px !important;
}

/*==============================
		 			4.7 Newfeed
  =============================*/
.newsfeed-inner {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
}

.newsfeed-inner h3 {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 20px !important;
	letter-spacing: 0.1em;
	color: #390e45;
	margin-top: 0px;
	margin-bottom: 50px;
	text-align: center;
}

.press-post {
	margin-bottom: 50px;
}

.press-post-title {
	width: 100%;
	height: 40px;
	margin-bottom: 20px;
}

.press-post h4 {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 18px;
	text-align: left;
	color: #390e45;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
}

.press-post h5 {
	font-family: "Roboto";
	font-size: 14px;
	color: #666;
	text-align: left;
}

.press-post-thumbnail > img {
	object-fit: cover;
	width: 100%;
	height: 200px;
	padding: 0;
}

.press-post-excerpt {
	font-family: "Roboto";
	font-size: 16px;
	text-align: left;
	color: #666;
}

/*======================================================================
															5. Work
======================================================================*/

/*=============================
			5.1 Work Header (Page)
=============================*/
#header-wrapper-work {
	width: 100%;
	height: 70vh;
}
#workCarousel {
	height: 100%;
	padding-left: 0;
}

#workCarousel > div {
	height: 100% !important;
}

#workCarousel > div > div {
	height: 100% !important;
}

#workCarousel > div > div > img {
	height: 100%;
	object-fit: cover;
}

#workCarousel > a.carousel-control.right > img, #workCarousel > a.carousel-control.left > img  {
	height: 60px;
	width: 26px;
	top: 50%;
	position: absolute;
}

#workCarousel > ol {
	width: 100% !important;
	left: 0;
	margin-left: 0;
}

#workCarousel > div > div.item > div > h3 > img {
	width: 350px;
  margin-bottom: 10px;
}

#workCarousel > div > div.item > div.carousel-caption {
	bottom: 30% !important;
}

/* Work Carousel Button */
#workCarousel > div > div > div > button {
	margin-top: 1.2em;
}

#workCarousel > div > div > div > button > div {
	color: white;
	padding-top: 5px !important;
}

#workCarousel > div > div > div > button > div:hover {
	color: #390e45;
}

#case-study-header-button-legion {
	margin-top: 3em;
}

#case-study-header-button-legion > div {
	color: white;
	padding-top: 5px !important;
}

#case-study-header-button-legion > div:hover {
	color: #390e45;
}


/*=============================
		 5.2 Portfolio Wrapper
=============================*/
#portfolio-wrapper {
	width: 100%;
	padding: 0 !important;
}

#portfolio-holder {
	height: inherit !important;
}

#portfolio-holder-purple {
	padding-top: 50px;
	height: inherit !important;
	background-color: rgba(78, 38, 85, 0.1);
}

#portfolio-holder-purple > div {
	padding: 50px 0 100px 0 !important;
}

/*=============================
	 				5.3 Filter
=============================*/
.filter-container {
  background-image: url('../images/backgrounds/bg-intro.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 75%;
  padding: 100px;
}
@media screen and (max-width: 992px){
	.filter-container {
		padding: 50px 0 !important;
	}
}

.filter-container h2 {
  margin-bottom: 30px;
}

.filter-wrapper {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
}

.filter-holder {
	display: inline-block;
	margin: 0 auto;
}

/*==================================
	 5.4 Case Studies Holder
===================================*/
.case-studies-holder {
	max-width: 1170px;
	width: 90%;
	margin: 0 auto;
	padding: 100px 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.case-study-post {
	padding: 10px;
  width: 33.33%;
  text-align: center;
	position: relative !important;
	overflow: hidden;
	left: inherit !important;
	top: inherit !important;
}
@media screen and (max-width: 992px){
	.case-study-post {
		width: 33.33%;
	}
}
@media screen and (max-width: 768px){
	.case-study-post {
		width: 50%;
	}
}
@media screen and (max-width: 480px){
	.case-study-post {
		width: 100%;
		padding: 0;
		margin-top: 20px;
	}
}

.case-study-thumbnail-container {
	overflow: hidden;
}

.case-study-thumbnail {
	width: 100%;
	background-clip: content-box;
	overflow: hidden;
	height: auto;
	-webkit-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.case-study-overlay {
	background-color: rgba(78,38,85,0.6);
	background-clip: content-box;
	padding: 10px;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-transition: all .2s linear;
	-ms-transition: all .2s linear;
	transition: all .2s linear;
}
@media screen and (max-width: 480px){
	.case-study-overlay {
		padding: 0;
	}
}

.case-study-post:hover .case-study-overlay {
	background-color: rgba(78,38,85,0);
}

.case-study-post:hover .case-study-thumbnail {
	transform: scale(1.05);
}

/*==================================
	 5.5 Case Study Header (Single)
===================================*/
#header-wrapper-casestudy {
	width: 100%;
	height: 30em;
	position: relative;
	overflow: hidden;
}
@media screen and (max-width: 480px){
	#header-wrapper-casestudy {
		height: 50em;
	}
}

.header-image-casestudy {
  width: 100%;
	height: 100%;
	position: absolute;
}

.header-image-casestudy img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*==================================
	 5.6 Case Study Content (Single)
===================================*/
#casestudy-post-content-wrapper {
	max-width: 1170px;
	width: 90% !important;
	padding-top: 100px !important;
	padding-bottom: 100px !important;
	position: relative;
}
@media screen and (max-width: 480px) {
	#casestudy-post-content-wrapper {
		padding-top: 50px !important;
	}
}

.casestudy-post-title {
	max-width: 1170px;
	width: 90%;
	padding: 0;
	margin: 0 0 50px 0;
	position: absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	justify-content: space-around;
}

.casestudy-post-title > .image-container {
	width: 15%;
	padding: 0;
}
@media screen and (max-width: 480px){
	.casestudy-post-title > .image-container {
		width: 50%;
		margin-bottom: 20px;
	}
}

.casestudy-post-title img {
	width: 100%;
	display: inline-block;
	border: 5px #ffffff solid;
}

.casestudy-post-title > .text-container {
	width: 85%;
	padding: 0 0 0 50px;
}
@media screen and (max-width: 480px){
	.casestudy-post-title > .text-container {
		width: 100%;
		padding: 0;
	}
}

.casestudy-post-title h4 {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 40px;
	color: #ffffff;
	letter-spacing: 0.1em;
	position: relative;
	text-align: left;
	margin: 0 0 25px 0;
}
@media screen and (max-width: 480px){
	.casestudy-post-title h4 {
			font-size: 32px;
			text-align: center;
	}
}

.casestudy-post-title p {
	font-family: "Roboto";
  font-size: 20px;
	color: #ffffff;
	text-align: left;
}
@media screen and (max-width: 480px){
	.casestudy-post-title p {
			font-size: 16px;
			text-align: center;
	}
}
/*hide first media attachment*/
#casestudy-post-content-wrapper > div.casestudy-content > div.text-container > img,#casestudy-post-content-wrapper > div.casestudy-content > div.text-container > p > img {
	display: none;
}

.casestudy-content {
	padding: 0;
	margin: 0;
	list-style: none;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	justify-content: space-around;
}

.casestudy-content > .text-container {
	width: 40%;
	font-family: "Roboto";
  font-size: 16px;
	color: #666666;
	text-align: left;
	padding: 0 25px 0 0;
}
@media screen and (max-width: 768px){
	.casestudy-content > .text-container {
		width: 100%;
		padding: 0;
		margin-bottom: 50px;
	}
}

.casestudy-content > .text-container > ul {
	padding-left: 25px;
}

.casestudy-content > .text-container > ul > li {
	font-family: "Roboto" !important;
  font-size: 16px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	color: #666666 !important;
}

.casestudy-content > .gallery-container {
	width: 60%;
}

@media screen and (max-width: 768px){
	.casestudy-content > .gallery-container {
		width: 100%;
	}
}

.casestudy-content > .gallery-container > .gallery-content {
	width: 100%;
	margin: 0 auto;
}

.amazingcarousel-list-container {
	padding: 0 !important;
}

.previous-button, .next-button {
	font-family: 'novecento_sans_widebook';
	vertical-align: text-bottom;
	padding: 0 15px;
}
.previous-button > a, .next-button > a {
		color: #390e45;
}
.previous-button > a:hover, .next-button > a:hover {
	color: #c1b3c4;
	text-decoration: none;
}

.see-more-header {
	font-family: "novecento_sans_widedemibold";
	color: #390e45;
	font-size: 24px;
	letter-spacing: 0.1em;
}
/*#4e2655*/
/*#c1b3c4*/
/*==============================
	 			5.7 Small Logos
===============================*/
#small-logos img {
	width: 10%;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
}

#small-logos img:hover {
	transform: scale(1.1);
}
@media screen and (max-width: 992px){
	#small-logos img {
		width: 20%;
	}
}
@media screen and (max-width: 480px){
	#small-logos img {
    width: 25%;
  }
}

/*=====================================================================
																6. Blog
======================================================================*/
#blog-wrapper {
  max-width: 1170px;
  margin: 0 auto;
	padding-top: 150px !important;
}

#blog-wrapper h2 {
	font-family: "novecento_sans_widedemibold";
	color: #fff;
	font-size: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  letter-spacing: 0.1em;
}

#blog-holder {
	width: 90%;
	margin: 0 auto;
	max-width: 1170px;
}

.post-thumbnail > img {
	object-fit: cover;
	width: 268px;
	height: 268px;
	padding: 0;
}
@media screen and (max-width: 768px) {
	.post-thumbnail > img {
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 992px) {
	.post-content{
		margin-left: 30px;
	}
}

.post h4 {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 26px;
	text-align: left;
	color: #390e45;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
}

.post h5 {
	font-family: "novecento_sans_wide_bookbold";
	font-size: 12px;
	color: #666;
	letter-spacing: 0.1em;
	text-align: left;
	margin-top: 0;
}

.post-excerpt {
	font-family: "Roboto";
	font-size: 16px;
	text-align: left;
	color: #666;
	letter-spacing: 0.1em;
}

.post-excerpt > p {
	margin-bottom: 10px;
}

.post-date {
  margin-bottom: 10px;
}

/*==============================
	 				6.1 Single
===============================*/

#blog-post-content-wrapper {
	max-width: 1170px;
	width: 90% !important;
	margin: 0 auto;
	padding-top: 150px !important;
}

#blog-post-wrapper {
	position: relative;
	display: block;
	padding: 0;
	box-sizing: border-box;
}

#blog-post-content-wrapper h3 {
	font-family: "novecento_sans_widebook";
	font-size: 14px;
	letter-spacing: 0.1em;
	text-align: left;
	margin-top: 60px;
}

#blog-post-title {
	position: relative;
	width: 100%;
}

#blog-post-title h4 {
	max-width: 75%;
	font-family: "novecento_sans_wide_bookbold";
	font-size: 24px;
	color: #000000;
	letter-spacing: 0.1em;
	position: relative;
	text-align: left;
	margin: 0;
}

#blog-post-title p {
	text-align: left;
	margin: 20px 0;
	font-family: "Montserrat";
	font-size: 12px;
	letter-spacing: 0.1em;
	font-weight: bold;
}

#blog-post-title .dot {
	width: 5px;
	height: 5px;
	background-color: #000000;
	display: inline-block;
	margin: 0 15px;
}

.blog-post-date
{
	position: absolute;
	right: 0px;
	top: 0px;
}

.blog-post-date h5
{
	font-family: "novecento_sans_wide_bookbold";
	font-size: 12px;
	color: #000000;
	letter-spacing: 0.1em;
	text-align: right;
	margin-top: 0;
	margin-bottom: 10px;
}

.blog-post-date span
{
	font-size: 15px;
	line-height: 12px;
}

.blog-post-date-inner
{
	float: left;
}

.banner-image {
	margin: 30px 0;
}

.blog-post-text
{
	font-family: "Roboto";
  font-size: 16px;
	color: #666666;
	text-align: left;
}

.blog-post-text h4
{
	font-family: "Roboto";
	font-size: 12px;
	margin-bottom: 30px;
}

.blog-post-text p
{
	font-family: "Roboto";
	font-size: 16px;
	margin-bottom: 30px;
}

.blog-post-separator-small
{
	margin-top: 10px;
	margin-bottom: 30px;
	width: 30px;
	height: 2px;
	background-color: #000000;
}

#sidebar-wrapper > div.categories-widget > ul, #sidebar-wrapper > div.archives-widget > ul {
	text-align: left;
	padding-left: 20px;
}

#sidebar-wrapper > div.categories-widget > ul > li, #sidebar-wrapper > div.archives-widget > ul > li {
	padding-left: 10px !important;
}
@media screen and (max-width: 992px) {
	#sidebar-wrapper {
		margin-top: 150px !important;
		padding: 0 !important;
	}
}

/*==============================
	 				6.2 Comments
===============================*/
#comments-wrapper > ul , #comments-wrapper > ul > li > ul{
	text-align: left;
	list-style-type: none;
}

#comments-wrapper > ul > li {
 padding-left: 0;
}

#comments-inner > .single-comment > .single-comment > .single-comment
{
	margin-left: 130px;
}

#comments-inner > .single-comment > .single-comment,  #comments-wrapper > ul > li > ul
{
	margin-left: 65px;
}

 #comments-wrapper > ul > li > ul > li {
	 border-top: 1px solid #cccccc;
	 padding-top: 30px;
	 padding-left: 0;
 }

#comments-inner .single-comment
{
	text-align: left;
	border-top: 1px solid #cccccc;
	padding-top: 30px;
	margin-left: 0px;
}

#comments-inner > .single-comment
{
	border-top: 0px;
	padding-top: 0px;
	margin-top: 30px;
}

#commentform > p.logged-in-as > a {
	font-family: "novecento_sans_widenormal";
	color: black;
}

#commentform > p.logged-in-as > a:hover {
	color: #919191
}

.comment-author.vcard  {
	margin-left: 0;
}

.comment-avatar, .comment-author.vcard > img
{
	width: 50px;
	height: 50px;
	background-color: #000000;
	float: left;
}
.comment-author, .comment-author.vcard > cite
{
	font-family: "novecento_sans_wide_bookbold";
	font-size: 14px;
	line-height: 18px;
	float: left;
	/*margin-left: 15px;*/
}

.comment-date, .comment-meta.commentmetadata > a
{
	font-family: "Montserrat";
	font-size: 10px;
	color: #666666;
	float: left;
	margin-left: 15px;
	line-height: 18px;
	vertical-align: bottom;
}

.comment-date span
{
	font-size: 12px;
	line-height: 10px;
}

.comment-text, .comment-content > p, li > div > p
{
	font-family: "Roboto";
	font-size: 14px;
	color: #666666;
	text-align: justify;
	text-align-last: left;
	position: relative;
	clear: both;
	top: -20px;
	padding-top: 35px;
}

div.comment-author.vcard > span {
	display: none;
}

.reply-button
{
	margin: 0 0 30px 65px;
	cursor: pointer;
}

#sidebar-wrapper
{
	padding-left: 15px;
	padding-right: 9.3%;
	box-sizing: border-box;
}

#sidebar-wrapper :first-child h3
{
	margin-top: 0px;
}

.text-widget p
{
	font-family: "Roboto";
	font-weight: 300;
	font-size: 11px;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-align: left;
}

#content-wrapper li
{
	font-family: "novecento_sans_widebook";
	font-size: 14px;
	font-weight: 100;
	color: #666666;
	/*padding-left: 40px;*/
	line-height: 20px;
	text-align: left;
}

#content-wrapper li a
{
	text-decoration: none;
	color: #666666;
}

.tags-widget .filter-button
{
	margin: 0 10px 10px 0;
}

.tags-widget .filter-button span
{
	font-size: 12px;
	line-height: 10px;
}

/*==============================
	 				6.3 Reply
===============================*/
.reply {
	padding: 14px 30px !important;
	display: inline-block;
	border: 2px solid #000000;
	outline: 0;
	background-color: transparent;
	font-family: "novecento_sans_wide_bookbold";
	font-size: 11px;
	letter-spacing: 0.2em;
	position: relative;
	margin: 0 0 30px 0px !important;
	cursor: pointer;
	color: #000000;
	text-decoration: none;
	text-align: center;
	margin-top: 50px;
	transition: background-color 0.5s, color 0.5s;
	-moz-transition: background-color 0.5s, color 0.5s;
	-webkit-transition: background-color 0.5s, color 0.5s;
}
.reply:hover{
	background-color: #000000;
	color: #ffffff !important;
}

.pagination {
	display: block;
	width: 100%;
	height: 100px;
	bottom: -130px;
}

/* ====================================================
											CONTACT SECTION
	 ==================================================== */

input:not([type="submit"]), textarea {
	border: 2px solid #f1f1f1;
	width: 100%;
	padding: 20px;
	margin-bottom: 30px;
	box-sizing: border-box;
	font-family: "Roboto";
	color: #666666;
	font-size: 11px;
	outline: none;
}

input:not([type="submit"])
{
}

input[type="submit"]
{
	float: right;
	cursor: pointer;
	margin: 30px 0 0 0;
	padding: 14px 30px;
	display: inline-block;
	border: 1px solid #000000;
	border-width: 2px;
	outline: 0;
	background-color: transparent;
	font-family: "novecento_sans_wide_bookbold";
	font-size: 11px;
	letter-spacing: 0.2em;
	position: relative;
	margin: 0 auto;
	margin-top: 60px;
	color: #6666;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.5s, color 0.5s;
	-moz-transition: background-color 0.5s, color 0.5s;
	-webkit-transition: background-color 0.5s, color 0.5s;
}

input[type="submit"]:hover {
	background-color: #390e45;
	color: #ffffff;
}

textarea{
	resize: none;
	height: 200px;
}

input:not([type="submit"]):focus, textarea:focus {
	border-color: #000000;
}

input:not([type="submit"])::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	font-family: "Roboto";
	color: #7a7a7a;
	font-size: 11px;
	letter-spacing: 0.2em;
}

input:not([type="submit"]):-moz-placeholder, textarea:-moz-placeholder {
	font-family: "Roboto";
	color: #7a7a7a;
	font-size: 11px;
	letter-spacing: 0.2em;
	opacity: 1;
}

input:not([type="submit"])::-moz-placeholder, textarea::-moz-placeholder {
	font-family: "Roboto";
	color: #7a7a7a;
	font-size: 11px;
	letter-spacing: 0.2em;
	opacity: 1;
}

input:not([type="submit"]):-ms-input-placeholder, textarea:-ms-input-placeholder {
	font-family: "Roboto";
	color: #7a7a7a;
	font-size: 11px;
	letter-spacing: 0.2em;
}

/* Wordpress Contact Form 7 */
.wpcf7 > form > p > label {
	width: 100%;
}

div.wpcf7-response-output {
	margin: 0 !important;
	padding: 0 !important;
}

#contact-wrapper .contact-loading
{
	float: right;
	margin-right: 20px;
	margin-top: 43px;
	display: none;
}

#form-submit-message
{
	text-align: left;
	font-family: "Roboto";
	font-weight: 300;
	font-size: 11px;
	line-height: 11px;
	height: 11px;
	width: 100%;
	letter-spacing: 0.1em;
}

/* ------ */
/* FOOTER */
/* ------ */
#footer-logo {
	width: auto;
}

#footer-wrapper
{
	background-color: #000000;
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 0px;
	z-index: -1;
}

#footer-logo-wrapper
{
	width: 100%;
}

#footer-wrapper p
{
	font-family: "Roboto";
	font-weight: 300;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #f0f0f0;
}

#footer-wrapper > *
{
	margin: 0 auto;
	padding: 30px 0 30px 0;
}

#footer-wrapper > *:first-child
{
	padding: 60px 0 0 0;
}

#footer-wrapper > *:last-child
{
	padding: 30px 0 60px 0;
}

#footer-social
{
	display: inline-block;
}

#footer-social a
{
	display: block;
	text-decoration: none;
	width: 30px;
	height: 30px;
	background: #000000;
	color: #ffffff;
	margin: 0 8px 0 8px;
	float: left;
	transition: background-color 0.5s, color 0.5s;
	-moz-transition: background-color 0.5s, color 0.5s;
	-webkit-transition: background-color 0.5s, color 0.5s;
}

#footer-social a:hover
{
	background-color: #ffffff;
	color: #000000;
}

#footer-social i
{
	font-size: 15px;
	line-height: 30px;
}

#footer-logo {
	width: 200px
}
/* ---------------------------------------------------------------------- */
/*    SEARCH BAR       */
/* ---------------------------------------------------------------------- */

div.search {
	float: right;
}

/*======================================================================
													Additonal Elements
======================================================================*/

/* Angled Button */
.button-angle {
	position: relative;
	width: 170px;
	height: 30px;
	margin: 0 auto;
	-webkit-transform: skew(-25deg);
	-moz-transform: skew(-25deg);
	transform: skew(-25deg);
	background-color: transparent;
	transition: background-color 0.2s ease;
	-moz-transition: background-color 0.2s ease;
	-webkit-transition: background-color 0.2s ease;
	border: 2px #fff solid;
	outline: 2px #4e2655 solid;
}

.button-angle:hover {
	/*bottom: 1px;*/
	/*right: 1px;*/
	background-color: #390e45;
	transition: background-color 0.2s ease;
	-moz-transition: background-color 0.2s ease;
	-webkit-transition: background-color 0.2s ease;
	/*box-shadow: 6px 5px #c1b3c4;*/
	border: 2px #fff solid;
	outline: 2px #4e2655 solid;
}

.button-angle > .button-angle-text, .button-angle > a > .button-angle-text {
	font-family: 'novecento_sans_widelight';
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding-top: 6px;
	font-size: 11px;
	-webkit-transform: skew(25deg);
	-moz-transform: skew(25deg);
	transform: skew(25deg);
	color:#4e2655;
	transition: color 0.2s ease;
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
}

.button-angle:hover .button-angle-text {
	color: #fff;
	transition: color 0.2s ease;
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
}

.button-angle > a:hover, .button-angle > a:focus, .button-angle > a:active {
	text-decoration: none;
}

/* Angled Button Inverted*/

.button-angle.inverted {
	background-color: transparent;
	border: 2px transparent solid;
	outline: 2px #fff solid;
}

.button-angle:hover.inverted {
	background-color: #fff;
	border: 2px #c1b3c4 solid;
	outline: 2px #fff solid;
}

.button-angle:hover.inverted .button-angle-text{
	color: #4e2655;
	transition: color 0.2s ease;
	-moz-transition: color 0.2s ease;
	-webkit-transition: color 0.2s ease;
}

.button-angle.inverted > a > .button-angle-text{
	text-decoration: none;
	color: #fff;
}


.button-angle.inverted > a:hover{
	text-decoration: none;
}

/* Angled Button Case Study*/

.filter-holder > .button-angle {
	display: inherit;
	margin: 0 10px 15px 10px;
}

.filter-holder > .button-angle > a > .button-angle-text.case-study  {
	font-family: "novecento_sans_widedemibold";
	text-decoration: none;
}

/* Arrows */
.up-arrow {
	width: 60px;
	height: 100%;
	margin-top: 20px;
	margin-bottom: 70px;
}

.right-arrow {
	height: 60px !important;
  transform: translate(-4em, 13em);
}

.left-arrow {
	height: 60px !important;
  transform: translate(4em, 13em);
}

/* Glyphicons */
.glyphicon {
	color: white;
	font-size: 60px;
	margin-bottom: 15px;
}

.transparent-frame
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: #000000;
	opacity: 0.6;
}

.transparent-frame.purple {
	background: linear-gradient(180deg, rgba(78,38,85,1.0), rgba(78,38,85,0.5));
}

.transparent-frame.reverse {
	opacity: 0;
}

.transparent-80
{
	opacity: 0.8;
}

.clear
{
	clear: both;
}

.hidden
{
	display: none;
}

.button-active
{
	/*background-color: #390e45;*/
	text-decoration: none;
	color: #ffffff;
}

.clearfix:after
{
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.align-left
{
	text-align: left;
}

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

.absolute-left
{
	left: 0;
}

.absolute-right
{
	right: 0;
}


.separator-70
{
	width: 100%;
	height: 70px;
}

.separator-100
{
	width: 100%;
	height: 100px;
}

.cashmere-strip {
	width: 100%;
	margin: 50px auto;
}

.shape-test {
	background-color: orange;
	width: 15em;
	height: 15em;
	float: left;
	shape-outside: circle();
	clip-path: circle();
}
.load-more-button
{
	padding: 14px 30px;
	display: inline-block;
	border: 1px solid #000000;
	outline: 0;
	background-color: transparent;
	font-family: "novecento_sans_wide_bookbold";
	font-size: 11px;
	letter-spacing: 0.2em;
	position: relative;
	margin: 0 auto;
	color: #000000;
	text-decoration: none;
	text-align: center;
	margin-top: 50px;
	transition: background-color 0.5s, color 0.5s;
	-moz-transition: background-color 0.5s, color 0.5s;
	-webkit-transition: background-color 0.5s, color 0.5s;
}

.load-more-button
{
	border-width: 2px;
}

.load-more-button:hover, .header-slider-link-button:hover
{
	background-color: #390e45;
	color: #ffffff;
}

@media screen and (max-width: 768px){
	.hide-sm {
		display: none !important;
	}
}

@media screen and (max-width: 480px){
	.hide-xs {
		display: none !important;
	}
}

/*======================================================================
															Temp
======================================================================*/




article.post-aside {
	font-size: 125%;
	background-color: #fff5cb;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 3px 3px 3px rgba(0,0,0,.1);
}
.mini-meta {
	font-size: 68%;
	margin: 0;
	color: #777;
}