/*!
Theme Name: FRACTION
Theme URI: https://thoughtandfound.co
Author: Thought & Found
Author URI: https://thoughtandfound.co
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
*/

@media screen and (min-width: 0) {

/*---------------------------------------
# GLOBALS
----------------------------------------*/
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
	margin-top: 100vh;
    padding-top: 75px;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: black;
    position: fixed;
    transition: margin-top 1700ms ease-in-out, padding-top 1700ms ease-in-out;
}
    
.m-top {
    position: relative;
    padding-top: 0;
    margin-top: 125px;
}

main {
	display: block;
}
    
h1 {
    font-size: 20px;
    margin-bottom: 0;
}
    
h1:first-child {
    margin-top: 0;
}
    
a {
    text-decoration: none;
    color: black;
}
    
p {
    font-size: 12.5px;
    margin: 0;
    text-indent: 10px;
}
/*---------------------------------------
# HEADER
----------------------------------------*/    
.enquire-btn:hover, #filter-2 button:hover {
    color: black;
    background: #F9EC00;
}
    
#filter-2 .button:hover {
    color: #BDB9B4;
    background: white;   
}
/*---------------------------------------
# HEADER
----------------------------------------*/
.site-branding {
    font-size: 0;
}
    
.s-half {
    display: inline-block;
    width: 50%;
    background: #BDB9B4;
}
    
.s-half:nth-child(1) {
    background: #009080;
}
    
.s-half:nth-child(1):hover {
    background: #F9EC00;
}
    
.sb-inner {
    clear: both;
    overflow: hidden;
    padding: 10px;
}
    
.s-half img {
    float: left;
    height: 60px;
}
    
.s-half img:nth-child(2) {
    float: right;
}
    
.lg-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 5;
    top: 50%;
    margin-top: -40px;
}
    
.mob-nav {
    font-size: 0; 
    display: none;
}
    
.f-toggle, .m-toggle {
    display: inline-block;
    font-size: 12px;
    width: 50%;
    text-transform: uppercase;
}
    
.f-toggle {
    background: #BDB9B4;
}
    
.m-toggle {
    background: #009080;
	text-align: right;
}
    
.t-inner {
    padding: 10px;
}
    
.desk-nav {
    display: none;
}
    
.mob-panel {
    background: #009080;
}
    
.mob-panel ul {
    font-size: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
    
.mob-panel ul li {
    padding: 5px 10px;
    border-bottom: 1px solid;
	text-transform: uppercase;
}
    
.mob-panel, #filter-2 {
    display: none;
}
/*---------------------------------------
# FILTER
----------------------------------------*/
.frm-label {
    display: none;
}
    
#filter-2 {
    background: #F9EC00;
    font-size: 0;
}
    
#filter-2 button, #filter-2 .button {
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "acumin-pro-wide", sans-serif;
    font-weight: 600;
    font-style: normal;
    border: none;
    background: black;
    color: #BDB9B4;
    padding: 5px 0;
    width: 50%;
    margin: 0 0 0 auto;
    text-align: center;
    line-height: 18px;
    height: 28px;
    box-sizing: border-box;
    cursor: pointer;
}
    
#filter-2 .button  {
    color: black;
    background: lightgrey;
}
    
.slct-block {
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 10px;
    border-bottom: 1px solid;
	opacity: 0;
}
    
.custom-select {
    position: relative;
}
    
label, .custom-select {
    display: inline-block;
    width: 50%;
}

.custom-select select {
    display: none; /*hide original SELECT element: */
}

.select-selected {
/*  background-color: Dodger#009080;*/
/*    border-bottom: none;*/
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 4px;
  right: 0;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: black transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent black transparent;
  top: 0px;
}

.select-items div, .select-selected {
  color: black;
  padding: 0 0 0 10px;
/*  border: 1px solid transparent;*/
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
    
.select-items div {
  padding: 5px 10px;
  border-bottom: 1px solid;    
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #F9EC00;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  margin-top: 6px;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
/*---------------------------------------
# FOOTER
----------------------------------------*/
footer#colophon {
    margin-top: 75px;
    margin-bottom: 10px;
}
    
.site-info {
    font-size: 0; 
}
    
.f-inner {
    font-size: 12px;
    padding: 0 10px;
}
    
.f-col {
    display: inline-block;
    width: 50%;
}
    
.f-col:nth-child(2) .f-inner {
    padding-left: 0;
}
/*---------------------------------------
# PRODUCTS
----------------------------------------*/
.add-response {
    display: none;
	opacity: 0;
}
    
article {
    position: relative;
    margin: 10px;
}
    
article img {
    width: 100%;
    height: auto;
    display: block;
}
    
.p-txt {
    margin-top: -4px;
}
    
article h2 {
    font-size: 20px;
}
    
h2.entry-title {
    margin-top: 0;
}
    
h2.entry-title span {
    opacity: .5;
}
/*---------------------------------------
# POST
----------------------------------------*/
.img-block {
    margin-bottom: 10px;
    overflow-y: scroll;
    height: calc(100vh - 135px);
}
    
.img-block img {
    margin-top: 10px;
}
    
.img-block img:first-child {
    margin-top: 0;
}
    
.b-row {
    border-bottom: 1px solid;
    font-size: 0;
}
    
.row-1, .row-2, .row-3 {
    margin-bottom: 25px;
    border-top: 1px solid;
}
    
.row-3 {
    margin-bottom: 6px;
}
    
.row-4 {
    padding-bottom: 10px;
    border-bottom: 1px solid;
    min-height: 6px;
}
    
nav.navigation.post-navigation {
    margin-top: -8px;
}
    
span.label, span.cnt {
    display: inline-block;
    width: 40%;
    font-size: 16px;
    padding: 2.5px 0;
    vertical-align: top;
}
    
span.cnt {
    text-indent: 11px;
	width: 60%;
}
    
.nav-links {
    font-size: 0;
    padding: 0 10px;
}
    
.nav-previous, .nav-next {
    width: 50%;
    display: inline-block;
    font-size: 16px;
}
    
.nav-next a {
    display: block;
    margin-left: 15px;
}
    
span.nav-subtitle {
    display: block;
}
    
.enquire-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    background: black;
    color: white;
    font-size: 12px;
}
    
header.entry-header.mobile {
    margin-top: -6px;
    margin-bottom: 10px;
}
    
.entry-header.desktop {
    display: none;
}
/*---------------------------------------
# PAGE
----------------------------------------*/
body.home .enquire-btn, body.page-sell .enquire-btn {
    display: none;
}
	
body.page .f-toggle .t-inner {
	opacity: 0;
}
	
body.page .f-toggle {
	background: #009080;	
}
    
body.page article h2 {
    margin: 0;
    font-size: 16px;
    padding: 2.5px 0;
}
    
body.page .info-tabs .row-3 {
    border-top: none; 
/*    margin-bottom: 0;*/
}
    
hr {
    margin: 0;
    padding: 0;
    border: none;
    border-top: 1px solid;
}
	
/*---------------------------------------
# PAGE – INFO
----------------------------------------*/
body.page-info {
	color: white;
	background: black;
}
	
body.page-info .info-tabs a {
	color: white;	
}
	
body.page-info .m-toggle, body.page-info .f-toggle {
	color: black;
	background: #F9EC00;
}
	
body.page-info .s-half:nth-child(1) {
	background: #F9EC00;
}
	
body.page-info .s-half:nth-child(1):hover {
    background: #009080;
}
	
body.page-info .f-filler {
	background: white;	
}
	
body.page-info .enquire-btn {
	background: white;
	color: black;
}
	
body.page-info .enquire-btn:hover {
	background: #F9EC00;
}
	
/*---------------------------------------
# PAGE – CONTACT
----------------------------------------*/
body.page-contact {
	background: #BDB9B4;
}	
	
body.page-contact .m-toggle, body.page-contact .f-toggle {
	color: black;
	background: white;
}
	
body.page-contact .s-half,
body.page-contact .desk-nav {
	background: white;	
}
	
body.page-contact .s-half:nth-child(1) {
	background: #F9EC00;
}
	
body.page-contact .s-half:nth-child(1):hover {
    background: #009080;
}
	
body.page-contact .f-filler {
	background: black;	
}
	
body.page-contact .enquire-btn {
	color: #BDB9B4;
}
	
body.page-contact .enquire-btn:hover {
	background: #F9EC00;
	color: black;
}
/*---------------------------------------
# PAGE – SELL
----------------------------------------*/
body.page-contact .m-toggle, body.page-contact .f-toggle {
	color: black;
	background: white;
}
	
body.page-sell .f-filler {
	background: black;	
}
/*---------------------------------------
# PAGE – JEWELERY
----------------------------------------*/
body.page-jewelry article {
	margin: 0;	
}
	
body.page-jewelry.m-top {
	margin-top: 114px;
}
	
body.page-jewelry .img-block {
	height: auto;	
}
	
.img-captions {
	margin-top: 10px;	
}
	
.img-block p {
	text-indent: 0;	
	padding: 2.5px 0;
}
	
body.page-jewelry .b-row {
	border-bottom: none;	
	margin-bottom: 14px;
}
	
body.page-jewelry main {
	padding-left: 0;	
}
	
body.page-jewelry .entry-content {
	padding: 10px;	
}

.entry-content.first-block {
    background: black;
    color: white;
}
	
a.static-enquire-btn {
    padding: 10px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    background: black;
    color: white;
    font-size: 12px;	
	margin-top: 10px;
}
	
.first-block a.static-enquire-btn {
    background: white;
    color: black;	
}
	
body.page-jewelry input.wpcf7-submit {
	position: relative;
}
	
/*---------------------------------------
# FORMS
----------------------------------------*/
form label, form br {
	display: none;	
}
	
form#filter-2 label {
	display: inline-block;
}
	
form p {
	text-indent: 0;
}
	
input::placeholder, textarea::placeholder {
	color: black;
	opacity: 1;
}
	
input, textarea {
	font-size: 16px;
	color: black;
	font-family: "acumin-pro-wide", sans-serif;
	font-weight: 600;
	padding: 0;
    border: none;
	border-radius: 0;
    border-top: 1px solid;
	width: 100%;
}
	
.wpcf7-not-valid-tip {
	font-size: 16px;	
}
	
.wpcf7-spinner {
	display: none;	
}
	
textarea {
	height: 150px;	
}
	
input.wpcf7-submit {
	font-size: 12px;
	background: black;
	color: white;
	text-transform: uppercase;
	padding: 8.5px 10px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: none;
}
	
input.wpcf7-submit:hover {
	color: black;
    background: #F9EC00;
}
    
}

@media screen and (min-width: 568px) {

/*---------------------------------------
# GLOBALS
----------------------------------------*/
/*---------------------------------------
# HEADER
----------------------------------------*/
/*---------------------------------------
# FILTER
----------------------------------------*/
/*---------------------------------------
# FOOTER
----------------------------------------*/
/*---------------------------------------
# PRODUCTS
----------------------------------------*/
main {
    padding-left: 10px;
}
    
main, #response {
    font-size: 0;
}
    
article {
    width: 50%;
    display: inline-block;
    margin: auto;
}
    
.a-inner {
    padding: 0 10px 10px 0;
}
    
nav.navigation.post-navigation {
    margin-top: 3px;
}
    
.nav-links {
    padding: 0;
}
    
.nav-next a {
    margin-left: 6px;
}
/*---------------------------------------
# POST
----------------------------------------*/
body.single-post article,
body.page article {
    width: 100%;
}
    
body.single-post #response article,
body.page #response article {
    width: 50%;
}
    
header.entry-header.mobile {
    margin-top: -5px;
}
    
.entry-content {
    padding-right: 10px;
    position: relative;
    clear: both;
    overflow: hidden
}
/*---------------------------------------
# PAGE
----------------------------------------*/
}

@media screen and (min-width: 768px) {
/*---------------------------------------
# GLOBALS
----------------------------------------*/
/*---------------------------------------
# HEADER
----------------------------------------*/
/*---------------------------------------
# FILTER
----------------------------------------*/
/*---------------------------------------
# FOOTER
----------------------------------------*/
/*---------------------------------------
# PRODUCTS
----------------------------------------*/
.img-block {
    height: calc(100vh - 197px);
}
/*---------------------------------------
# POST
----------------------------------------*/
.img-block, .txt-block {
    width: 50%;
}
    
.img-block {
    float: right;
    max-width: 500px;
}
    
.txt-block {
    float: left;
    max-width: 400px;
}
    
.desc-block {
    width: 50%;
    max-width: 505px;
    margin-right: 5px;
    margin-left: auto;
}
    
.txt-block .b-inner,
.desc-block .b-inner {
    padding-right: 15px;
}
    
.entry-header.mobile {
    display: none;
}
    
.entry-header.desktop {
    display: block;
    margin-bottom: 50%;
    margin-top: -4px;
}
    
.info-tabs {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 50%;
    max-width: 400px;
}
    
.row-1, .row-2, .row-3 {
    margin-right: 15px;
}
    
.row-4 {
    border-bottom: none;
}
    
.img-block {
    overflow-y: scroll;
}
    
nav.navigation.post-navigation {
    margin-top: 25%;
    margin-right: 5px;
    margin-left: auto;
    width: 50%;
    max-width: 500px;
     
}
    
.nav-links {
    padding: 0;
    margin-right: 15px;
}

.nav-previous, .nav-next {
    vertical-align: top;
}
/*---------------------------------------
# PAGE
----------------------------------------*/
.pg-txt-block .entry-header.desktop {
    margin-bottom: 25%;
}

.pg-txt-block .info-tabs {
    position: relative;
}
    
.pg-txt-block .row-1 {
    margin-right: 10px;
}
/*---------------------------------------
# PAGE – JEWELERY
----------------------------------------*/
body.page-jewelry.m-top {
	margin-top: 114px;
} 
	
.second-block .info-tabs {
	width: 100%;
	max-width: none;
}
	
.second-block .info-tabs form input,
.second-block .info-tabs form textarea {
	width: 100%;	
}
	
body.page-jewelry .second-block .row-3 {
	margin-right: 0;	
}
	
body.page-jewelry .txt-block .b-inner {
	padding-right: 0;	
}
	
body.page-jewelry .first-block, body.page-jewelry .second-block {
	width: 50%;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	overflow-y: auto;
	height: calc(100vh - 148px);
}
	
body.page-jewelry .first-block .entry-header.desktop,
body.page-jewelry .second-block .entry-header.desktop {
	display: none;	
}
	
body.page-jewelry header.entry-header.mobile {
	display: block;	
}
	
body.page-jewelry .txt-block {
	max-width: none;	
}
	
body.page-jewelry .first-block .info-tabs,
body.page-jewelry .second-block .info-tabs {
	position: relative;
	bottom: 0;
	left: 0;
	width: auto;
}
	
body.page-jewelry .info-tabs .row-3 {
	margin-bottom: 0;	
}
	
body.page-jewelry .entry-content {
	padding-bottom: 36px;	
}
	
.first-block a.static-enquire-btn {
	position: fixed;
	width: 50%;
    left: 0;
    right: auto;
    bottom: 0;
	box-sizing: border-box;
}
	
body.page-jewelry .second-block input.wpcf7-submit {
    position: fixed;
    bottom: 0;
    right: 0;
    left: auto;
    width: 50%;
    box-sizing: border-box;
    margin: 0;
}
	
body.page-jewelry .second-block input.wpcf7-submit.right-fix {
	position: fixed;
	width: 510px;
    right: 0;
    left: auto;
    bottom: 0;
	top: auto;
}
	
body.page-jewelry .img-block,
body.page-jewelry .txt-block {
	float: none;
	width: auto;
}
	
body.page-jewelry footer#colophon {
	margin-top: 0;
	display: none;
}
	
}

@media screen and (min-width: 1024px) {

/*---------------------------------------
# GLOBALS
----------------------------------------*/
.m-top {
    margin-top: 185px;
}
	
.f-filler {
	height: 61.39px;
	background: #F9EC00;
	display: none;
}
/*---------------------------------------
# HEADER
----------------------------------------*/
.mob-nav  {
    display: none!important;
}
    
.desk-nav {
    display: block;
    background: #BDB9B4;
}
    
.desk-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0;
}
    
.desk-nav ul li {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    width: 12.5%;
}
    
.desk-nav ul li:nth-child(2) {
    margin-right: 25%;
}
    
.desk-nav ul li:nth-child(2n) {
    text-align: right;
}
	
.desk-nav ul li:last-child {
	text-align: right;	
	width: 25%;
}

.desk-nav ul li a {
    padding: 10px;
    display: block;
}
    
.desk-nav ul li:nth-child(2) a {
    padding-right: 3px;
}
    
.desk-nav ul li:nth-child(3) a {
    padding-left: 3px;
}
/*---------------------------------------
# FILTER
----------------------------------------*/
.frm-label {
    display: block;
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 10px;
}
    
.slct-block {
    border: none;
    padding: 0;
}
    
.select-items div, .select-selected {
    padding: 0;
}
    
#filter-2 {
    column-count: 2;
    column-gap: 25vw;
    column-gap: calc(25vw + 10px);
    padding-left: 25%;
    padding-left: calc(25% + 10px);
    padding-right: 10px;
    padding-bottom: 10px;
    position: relative;
    padding-top: 10px;
}
    
#filter-2 button, #filter-2 .button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 65px;
}
    
#filter-2 button {
    left: 65px;
}
    
label {
    width: 45%;
}
    
.custom-select {
    width: 55%;
}
    
.select-items {
    margin-top: 0;
    border-top: 1px solid;
}
/*---------------------------------------
# FOOTER
----------------------------------------*/
.f-col {
    width: 12.5vw;
}
    
.site-info .f-col:nth-child(2) {
    text-align: right;
}
/*---------------------------------------
# PRODUCTS
----------------------------------------*/
article, body.single-post #response article,
body.page #response article {
    width: 25%;
}
    
.enquire-btn, input.wpcf7-submit {
    width: 490px;
    right: 0;
    left: auto;
    bottom: 0;
}
/*---------------------------------------
# POST
----------------------------------------*/
span.cnt {
    text-indent: 10px;
}
    
.nav-links {
    margin-right: 0;
}
    
nav.navigation.post-navigation {
    margin-right: 10px;
}
/*---------------------------------------
# PAGE – JEWELERY
----------------------------------------*/
body.page-jewelry.m-top {
	margin-top: 175px;
} 	
	
body.page-jewelry .first-block, body.page-jewelry .second-block {
	height: calc(100vh - 175px);
}
	
body.page-jewelry .second-block .info-tabs,
body.page-jewelry .txt-block {
	max-width: 500px;	
}
	
}

@media screen and (min-width: 1025px) {
    .p-col {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #BDB9B4;
        display: none;
    }

    .p-col {
        right: 10px;
        bottom: 10px;
    }
}

@media screen and (min-width: 1200px) {

/*---------------------------------------
# GLOBALS
----------------------------------------*/
/*---------------------------------------
# HEADER
----------------------------------------*/
/*---------------------------------------
# FILTER
----------------------------------------*/
/*---------------------------------------
# FOOTER
----------------------------------------*/
/*---------------------------------------
# PRODUCTS
----------------------------------------*/
/*---------------------------------------
# POST
----------------------------------------*/
/*---------------------------------------
# PAGE
----------------------------------------*/
}

@media screen and (min-width: 1400px) {
/*---------------------------------------
# PAGE – JEWELERY
----------------------------------------*/
body.page-jewelry .img-block, body.page-jewelry .txt-block {
	margin-right: 0;
	margin-left: auto;
}	
	
body.page-jewelry header.entry-header.mobile {
	position: absolute;	
	left: 10px;
	top: 10px;
	width: 170px;
}
	
}

@media screen and (min-width: 1490px) {
/*---------------------------------------
# PAGE – JEWELERY
----------------------------------------*/		
body.page-jewelry header.entry-header.mobile {
	width: auto;
	position: absolute;
	top: 10px;
	left: 10px;
}
	
body.page-jewelry .txt-block {
    position: absolute;
    bottom: 0;
    left: 10px;
    width: calc(50vw - 535px);
    max-width: 300px;
}
	
body.page-jewelry .b-row {
	margin-bottom: 10px;	
}
	
}