/*
Theme name: MSR Design Portfolio
Description: Custom Theme
*/

/*
	Source post-css styles are located in the postcss directory.
	The compiled bundle is in assets/bundle.css; The README.md
	file contains instructions how to get the compilation
	process up & running.

	If you need to make a quick fix, feel free to add CSS
	below this comment. It will override bundle.css styles.
*/

p {  }
/*
body#error-page {
    max-width: inherit;
	margin-top: 0px;
}
.page-template-about section.section.section-culture.fade.animate {
    display: none;
}
*/
@media (max-width: 1023px) {
	.fifty .section__inner {
		-ms-flex: 0 0 320px;
		flex: 0 0 320px;
	}	
}
@media (max-width: 767px) {
	.list-members>ul>li {
		width: 100%;
	}
	.mobile-flip {
		display: flex;
    	flex-direction: column-reverse;
	}
}
.team-info {
    display: flex;
}
.searchandfilter ul li {
	margin-left: 10px !important;
	margin-right: 10px !important;
}
@media (min-width: 1024px) and (max-width: 1600px) {
	.team-info {
		display: block;
	}
	.team-info span {
		display: none;
	}
	.extra-padding {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}
@media (min-width: 1024px) and (max-width: 1300px) {
	.list-members>ul>li {
		width: 33%;
	}
}
@media (min-width: 1024px) and (max-width: 1230px) {
	.member-details p {
		width: 88%;
	}
}
@media (min-width: 767px) and (max-width: 820px) {
	.member-details p {
		width: 88%;
	}
}
@media (min-width: 768px) and (max-width: 830px) {
	.team-info {
		display: block;
	}
	.team-info span {
		display: none;
	}
}
.fifty {
    width: 50% !important;
}
@media only screen and (min-width: 1160px) {
	.page-template-generative-impacts .section-about .section__inner {
		-ms-flex: 0 0 420px;
		flex: 0 0 420px;
	}
}
@media screen and (min-width:767px) and (max-width: 1160px) {
	.page-template-generative-impacts .section-about {
		align-items: center !important;
		margin: 50px 0px !important;
	}
}
@media only screen and (max-width: 767px) {
	.news-item:nth-child(even) {
		display: flex;
		flex-direction: column-reverse;
	}
	.news__item-content {
		text-align: center;
	}
	.page-template-generative-impacts .section-about .section__inner {
		-ms-flex: 0 0 320px;
		flex: 0 0 320px;
	}
	.section__image.fifty, .section__content.fifty {
		width: 100% !important;
	}
	li.sf-field-taxonomy-crb_case_study_type {
		text-align: center !important;
		width: 100% !important;
	}
	.searchandfilter select.sf-input-select {
		text-align: center;
		min-width: 170px;
		width: 80%;
		margin: 0 auto !important;
	}
	.searchandfilter ul li {
		margin-bottom: 10px;
		margin-left: 10px !important;
		margin-right: 10px !important;
	}

}
@media only screen and (max-width: 420px) { 
	.section-about .fifty img {
		max-height: 266px !important;
	}	
}
@media only screen and (max-width: 375px) { 
	.section-about .fifty img {
		max-height: 243px !important;
	}	
}
.news__item-inner p {
    display: none;
}
.team-info span {
    margin-left: 2px;
    margin-right: 5px;
	line-height: 18px;
}
.home .eapps-instagram-feed-posts-item-template-tile  {
	background: #d16a0a; 
}
.feeds li a {
	padding-top: inherit !important;
}
/*
.contact-maps, .google-map-wrapper {
    display: flex;
    justify-content: center;
}
.contact-maps .section-map, .google-map-wrapper .footer-map-wrapper {
    width: 50%;
}
.contact-maps .google-map {
    min-height: 400px;
}
.contact-maps .first, .footer-map-wrapper.first {
	border-right: solid 1px #fff;
}
.contact-maps .second, .footer-map-wrapper.second {
	border-left: solid 1px #fff;
}
*/
.pum-theme-2590, .pum-theme-default-theme {
    background-color: rgb(255 255 255 / 52%) !important;
}
.pum-theme-2590 .pum-content+.pum-close, .pum-theme-default-theme .pum-content+.pum-close {
	background-color: #d16a0a !important;
}
.pum-content.popmake-content {
    padding: 50px 0;
}

a[href^=tel] {
	text-decoration: underline;
}
section.section-video {
    max-width: 800px !important;
	margin: 0 auto;
}
.page-id-2296 .instagram {
    display: none;
}
.fifty .section__content {
	width: 100%;
}
.section-about .fifty img {
    width: 50%;
    height: auto;
}
.section__image.fifty a {
    display: flex;
    justify-content: center;
}
.page-template-about .wide-content .section__inner {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
}

.section__image.fifty a {
    width: 100%;
}
.case-study-btn {
    margin-left: 20px;
    margin-top: 15px;
}
.section__image-bg.vimeo-hold {
    padding-top: 57%;
}
#measurable-progress .section__image-bg {
    padding-top: 60%;
}
.thank-you-wrapper {
	margin-top: 20px !important;
}
.page-id-3184 .section-default {
	margin-top: 50px !important;
}
.materials-library, .drawing-packet {
    margin-bottom: 50px;
}
div.logo-footer {
	background: url('https://msrdesign.com/wp-content/uploads/3300/09/wbenc.png');
	height: 70px !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    width: 110px;
}
.wide-content .section__content {
	padding-left: 3vw;
}
.wbenc-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin-bottom: 15px;
}
.wbenc-wrap p {
	margin-bottom: 0 !important;
}
.culture-wrapper {
    max-width: 700px;
}
.section-principles .section-contents .section__inner h3, .section-info .section__content h3, .section-culture .section__content h3 {
	text-align: inherit !important;
}
/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ui group */

.ui-group {
  display: inline-block;
}

.ui-group h3 {
  display: inline-block;
  margin-right: 0.2em;
  font-size: 16px;
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

/* color-shape */

.color-shape {
  width: 70px;
  height: 70px;
  margin: 5px;
  float: left;
}
 
.color-shape.round {
  border-radius: 35px;
}
 
.color-shape.big.round {
  border-radius: 75px;
}
 
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
 
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }

.page-id-3300 section.section-default .shell {
    width: 100%;
    max-width: 2000px;
    padding: 0 !important;
}
.flex-wrap {
    display: flex;
}
.test-nine {
    max-width: 1000px;
}
.test-three {
    margin-right: 50px;
}
.grid-test {
    display: flex;
    flex-wrap: wrap;
}

/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/

.grid {
  text-align: center;
  max-width: 99vw;
  margin: 5px auto;
}


/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.grid-item {
  padding: 5px;
  box-sizing: border-box;
	display:inline;
}


/* Step 4: Add media queries (subjective) to make the whole grid resposive. */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
	.chosen-container .chosen-drop {
		width: 90% !important;
	}
}

@media (min-width: 1700px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 25%;
  }
}
.search-filter-results .grid {
	width: inherit !important;
	background: inherit !important;
}
.search-filter-results .project .project-link:after {
    content: '';
    width: calc(100% - 10px);
    height: calc(100%);
}
.searchandfilter ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.searchandfilter {
    max-width: 1500px;
    margin: 0 auto;
	min-height: 80px;
	margin-right: 0;
}
.searchandfilter h4 {
    padding: 0px;
    font-size: 14px;
	text-transform: uppercase;
	color: #333;
}
.page-id-3300 .section-default {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
.page-id-3300 .section-awards .section__inner {
	max-width: 800px !important;
}
.page-id-3300 .accordion .accordion__body p {
	font-size: 17px !important;
}
.searchandfilter li[data-sf-field-input-type=checkbox] label, .searchandfilter li[data-sf-field-input-type=radio] label, .searchandfilter li[data-sf-field-input-type=range-radio] label, .searchandfilter li[data-sf-field-input-type=range-checkbox] label {
	padding-left: 10px;
	padding-right: 10px;
}
a.search-filter-reset, .sf-label-checkbox, .sf-label-radio {
    font-size: 18px;
    border: 3px solid #333;
    text-decoration: none;
    color: #333;
    padding: 0 9px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    line-height: 39px;
    transition: all .3s;
    text-transform: uppercase;
    font-weight: 700;
}
.sf-input-radio {
	display: none;
}
a.search-filter-reset {
	margin-top: 21px !important;
}
.chosen-container-multi .chosen-choices li.search-choice {
	padding: 5px 10px !important;
}
ul.chosen-results li, li.search-choice {
    border: solid !important;
    margin: 5px !important;
	font-weight: 700;
	text-transform: uppercase;
}
ul.chosen-results li.highlighted, li.search-choice {
    background: #333 !important;
	border: solid 3px #333 !important;
	color: #fff !important;
}
ul.chosen-results li {
	background: #333 !important;
	border: solid 3px #fff !important;
	color: #fff !important;
	border-radius: 20px !important;
}
ul.chosen-results li.highlighted, .chosen-results .sf-option-active  {
	border: solid 3px #fff !important;
	background: #fff !important;
	color: #333 !important;
}
li.search-choice {
	border-radius: 20px !important;
}
.chosen-drop {
    background: #333 !important;
}
.chosen-container .chosen-drop {
	width: 600px !important;
	right: 0 !important;
	margin-top: 18px !important;
}
ul.chosen-results li {
    margin: 5px !important;
}
input.sf-input-checkbox {
	display: none !important;
}
li.sf-field-taxonomy-crb_case_study_status li {
    margin-right: 10px;
}
span.sf-count {
    padding-right: 10px;
}
a.search-filter-reset:hover, .sf-label-checkbox:hover, .sf-option-active .sf-label-checkbox, input.sf-input-radio:checked + label, label.sf-label-radio:hover {
	background-color: #333;
	color: #fff;
}
.chosen-container.chosen-container-multi {
    border: solid 3px #333 !important;
    min-height: 39px;
}
.chosen-container-multi .chosen-choices {
	padding: 4px 5px !important;
}
@media (max-width: 1350px) {
	.page-template-work-3300 section.section-default form {
		margin-top: 75px;
		width: 100% !important;
		max-width: 100% !important;
	}
}
@media (min-width: 1351px) {
	.searchandfilter {
		max-width: 1035px;
	}
}
@media (max-width: 1350px) {
	.searchandfilter {
		margin-top: 10px !important;
	}
	li.sf-field-taxonomy-crb_case_study_status {
		width: 100% !important;
	}
	.searchandfilter h4 {
		text-align: center !important;
	}
	.extra-padding {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}
@media (max-width: 860px) {
	.searchandfilter {
		margin-top: 60px !important;
	}
	.projects {
		background: #fff !important;
	}
}
@media (min-width: 1451px) {
	.searchandfilter {
		max-width: 80%;
	}
}
.searchandfilter ul li {
	padding: 0 !important;
}
ul.chosen-results li {
	padding: 10px !important;
}
li.search-choice {
	display: flex !important;
	align-items: center !important;
}
a.search-choice-close {
	margin-left: 10px !important;
    position: inherit !important;
    margin-top: -5px;
}
input.chosen-search-input.default {
	text-transform: uppercase;
}
.chosen-container .chosen-results {
	max-height: 350px !important;
}
#next-forum .accordion h3 {
	text-align: left !important;
	margin-bottom: 0 !important;
}
@media (min-width: 1000px) {
	.sf-field-taxonomy-crb_case_study_tag .chosen-container .chosen-drop {
		width: 1920px !important;
    	right: -360px !important;
	}
	.sf-field-taxonomy-crb_case_study_tag .chosen-container .chosen-results, .sf-field-taxonomy-crb_case_study_type .chosen-container .chosen-results {
		max-width: 1000px;
		margin: 0 auto;
		padding: 20px 0 20px;
	}
	.sf-field-taxonomy-crb_case_study_tag ul.chosen-choices li.search-choice, .sf-field-taxonomy-crb_case_study_type ul.chosen-choices li.search-choice {
		display: none !important;
	}
	.sf-field-taxonomy-crb_case_study_type .chosen-container .chosen-drop {
		width: 1920px !important;
    	right: -700px !important;
	}
}
/*Start popup styles*/
.popup-container {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
}
.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
}
@media (max-width: 1000px) {
	.popup-content {
		width: 95%;
	}
}
.popup-content a.close{
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background: none;
    padding: 0;
    margin: 0;
    text-decoration:none;
}

.popup-content a.close:hover{
  color:#333;
}

.popup-content span:hover,
.popup-content span:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popup-container:target{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.popup-container h3{
  margin:10px;
}
a.pop-up-link {
    text-decoration: none !important;
}
/*End popup styles*/

.project .project-caption {
	text-shadow: 1px 1px 1px black;
}