/*
Theme Name: RayStonePhoto 
GitHub Theme URI: https://github.com/finelysliced/raystonephoto
Author: Finely Sliced
Author URI: https://finelysliced.com.au
Version: 0.40
*/

* { margin: 0; padding: 0; }

body { font-family: "linotype-sabon", "times", serif; background: #FFF; padding: 280px 50px 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body.onward main { opacity: 0 !important; }
body.onward .loading { opacity: 1; }

.loading { position: fixed; top: 50%; left: 50%; width: 120px; height: 20px; margin-left: -60px; z-index: -1; opacity: 0; transition: opacity 0.3s; }
.loading path { stroke: #262626; stroke-width: 1px; fill: none; }


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

	HEADER

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

#site_header { position: fixed; top: 0; left: 0; right: 0; height: 100px; z-index: 200; }

#logo { position: absolute; top: 0; left: 50%; display: block; width: 364px; height: 100px; margin-left: -182px; background-image: url('img/logo.png'); background-size: 100% auto; background-position: top left; background-repeat: no-repeat; }

#site_header p { position: absolute; top: 75px; left: 50%; width: 240px; margin-left: -120px; text-align: center; color: #262626; font-size: 15px; font-style: italic; }

.nav_button { position: absolute; bottom: 35px; font-size: 17px; font-weight: 400; width: 140px; vertical-align: bottom; }
.nav_button:link, .nav_button:visited, .nav_button:hover, .nav_button:active { color: #262626; text-decoration: none; }

#menu_button { left: 40px; text-align: left; }
#cart_button { right: 40px; text-align: right; }

#menu_button:after { content: "Menu"; }

nav { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #262626; z-index: 100; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s ease-in-out; }
nav ul { position: absolute; top: 50%; left: 50%; list-style: none; max-width: 300px; text-align: center; transform: translate(-50%, -50%); font-size: 24px; font-weight: 400; font-style: italic; }

nav li { margin-bottom: 8px; }
nav li a { position: relative; display: inline-block; }

nav li a:before { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #FFF; content: ""; width: 0; transition: width 0.3s ease-in-out; }
nav li a:hover:before { width: 100%; }
nav li a:link, nav li a:visited { color: #FFF; text-decoration: none; }
nav li a:hover, nav li a:active { color: #FFF; text-decoration: none; }

.navigating nav { visibility: visible; opacity: 1; }
.navigating .nav_button:link, .navigating .nav_button:visited, .navigating .nav_button:hover, .navigating .nav_button:active { color: #FFF; }

.navigating #logo { background-position: bottom left; }
.navigating #menu_button:after { content: " \2715"; font-family: "aktiv-grotesk-extended"; font-weight: 400; font-size: 24px; }
.navigating #site_header p, .navigating footer p { color: #FFF; }

#menu_close, .navigating #menu_close { display: none; }


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

	COLLECTIONS

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

#collections { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70vw; height: 70vh; background: #262626; display: none; }

#collection_index { position: absolute; top: 50%; left: 0; right: 0; list-style: none; text-align: center; transform: translate(0, -50%); font-size: 36px; font-family: "aktiv-grotesk-extended"; font-weight: 400; letter-spacing: -0.5px; }

#collection_index li { display: inline-block; }

#collection_index a:link, #collection_index a:visited { color: #FFF; text-decoration: none; }
#collection_index a:hover, #collection_index a:active { color: #262626; text-decoration: none; }

.collection { list-style: none; }

.collection .format-landscape { }
.collection .format-portrait { }

.collection .collection_item { position: relative; width: 25%; display: inline-block; vertical-align: top; box-sizing: border-box; padding: 0 20px; margin-bottom: 70px; }

.collection_item a { position: relative; display: block; text-decoration: none !important; text-align: center; }

.collection_item .thumb { position: relative; margin-bottom: 24px; }
.collection_item .thumb:before { content: ""; display: block; padding-top: 100%; }

.collection_item .thumb img { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.format-landscape .thumb img { width: 210px; height: 140px; }
.format-portrait .thumb img { width: 140px; height: auto; }

.collection_item h2 { font-size: 21px; margin-bottom: 5px; }
.collection_item h3 { font-size: 15px; font-style: italic; }

.collection_item :hover img { opacity: 0.9; }


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

	PAGES & TYPOGRAPHY

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

#intro { position: relative; }
#intro img { display: block; margin: 0 auto; width: 100%; max-width: 400px; height: auto; }


main { margin: 0 auto 100px; max-width: 800px; transition: opacity 400ms;  }

.page-template-page-home { padding-top: 180px; }
.post-type-archive-product main { max-width: 1200px; }

h1 { font-size: 26px; line-height: 120%; margin-bottom: 120px; color: #262626; font-weight: 400; text-align: center; font-style: italic; letter-spacing: -0.5px; }
h2 { font-size: 24px; line-height: 120%; margin-bottom: 20px; color: #262626; font-weight: 400; text-align: center; font-style: italic; }
h3 { font-size: 22px; line-height: 120%; margin-bottom: 10px; color: #262626; font-weight: 400; }
p { font-size: 16px; line-height: 140%; margin-bottom: 20px; color: #262626; }

a:link, a:visited { color: #222; text-decoration: underline; }

.wp-caption { width: auto !important; margin-bottom: 50px; }
.wp-caption p { font-size: 15px; text-align: right; padding-top: 4px; }
.wp-caption img { display: block; max-width: 100%; width: 100%; height: auto; }

.cart_totals h2 { font-size: 28px; line-height: 130%; margin-bottom: 10vh; color: #262626; font-weight: 400; text-align: center; font-style: italic; }




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

	PRODUCTS

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

.product_body { margin-bottom: 25vh; }
.product_body .product_photo { margin: 0 auto 50px; max-width: 500px; }
.product_body .product_photo.format-landscape { max-width: 700px; }
.product_body .product_photo img { display: block; max-width: 100%; width: 100%; height: auto; }


.product_content { margin: 0 auto; max-width: 1000px; text-align: center; }
.product_content h1 { margin-bottom: 50px; }
.product_content h1:after { display: block; width: 70px; height: 1px; background: #262626; margin: 12px auto; content: ""; }
.product_content p { max-width: 540px; margin: 0 auto 50px; font-style: italic; }


table.variations { width: 100%; font-size: 15px; font-family: "aktiv-grotesk-extended"; font-weight: 400; margin-bottom: 40px; }
table.variations td { border: none; display: inline; }
table.variations td.label { display: none; }
table.variations td.value { padding-bottom: 2px; text-align: center; }
table.variations td.value div { display: inline-block; vertical-align: top; }

table.variations td.value input[type="radio"] { display: none; }
table.variations label { display: inline-block; padding: 6px; cursor: pointer; color: #444; margin: 0 5px; } 
table.variations td.value input[type="radio"]:checked+label { border-bottom: 1px solid #262626; color: #262626; }

.reset_variations { display: none !important; }

.woocommerce-variation-price { font-size: 28px; line-height: 130%; margin-bottom: 40px; color: #262626; font-weight: 400; text-align: center; font-style: italic; }

.product_body .product_meta { display: none; }

.quantity { margin-bottom: 16px; }

.button { padding: 10px 16px; font-size: 12px; border: none; background: #262626; color: #FFF; font-family: "aktiv-grotesk-extended"; font-weight: 500; cursor: pointer; -webkit-appearance: none; text-transform: uppercase; letter-spacing: 2px; -webkit-appearance: none; border-radius: none !important; }

.button:link, .button:visited { background: #262626; color: #FFF; text-decoration: none; }
.button:hover, .button:active { background: #262626; color: #FFF; text-decoration: none; }

/* Errors - before main on product pages, with main elsewhere */

.woocommerce-message { font-size: 18px; padding: 0 0 50px; color: green; text-align: center; }

main .woocommerce-message { padding: 0 0 20px; color: green; }
main .woocommerce-message .wrapper { padding: 0 20px; max-width: 1060px; }

.woocommerce-message a:link, .woocommerce-message a:visited { color: green; text-decoration: underline; }
.woocommerce-message a:hover, .woocommerce-message a:active { color: green; text-decoration: none; }

.woocommerce-error { list-style: none; color: red; font-size: 18px; padding-top: 6px; text-align: center; margin-bottom: 50px; }
.woocommerce-error a { display: none; }

.cart-empty { text-align: center; }
.return-to-shop { display: none; }


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

	FORMS

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

input[type="text"], input[type="tel"], input[type="email"] { -webkit-appearance: none; border-radius: none; border: 1px solid #DDD; padding: 8px 10px; background: #F4F4F4; font-family: "linotype-sabon", "times", serif; font-size: 15px; color: #262626; width: 100%; box-sizing: border-box; outline: none; }

textarea { -webkit-appearance: none; border-radius: none; border: 1px solid #DDD; padding: 6px 8px; background: #F4F4F4; font-family: "linotype-sabon", "times", serif; font-size: 15px; color: #262626; width: 100%; box-sizing: border-box; outline: none; height: 100px; }

input[type="number"] { -webkit-appearance: none; border-radius: none; border: 1px solid #DDD; padding: 6px 8px; background: #F4F4F4; font-family: "linotype-sabon", "times", serif; font-size: 15px; color: #262626; width: 40px; }

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

	FOOTER

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

footer { position: relative; text-align: center; padding: 0 20px 35px; }
footer p { margin: 0; font-size: 13px; }


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

	MISC

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

::selection { color: #000; background: #FFDE17; }

img { border: none; }
a { outline: none; }


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

	BREAKS

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

@media screen and ( max-width: 1000px ) {
	
.collection .collection_item { width: 33.3333%; }

}


@media screen and ( max-width: 768px ) {
	
body { padding: 150px 20px 0; }

.collection .collection_item { display: block; width: 100%; max-width: 250px; margin: 0 auto 50px; }

#site_header { height: 70px; }
#logo { top: 0; width: 240px; height: 66px; margin-left: -120px; }
#site_header p { top: 50px; font-size: 13px; }

#cart_button { display: none; }
#menu_button { left: auto; right: 18px; top: 30px; width: 28px; height: 28px; bottom: auto; background: url('img/menu.svg'); background-size: cover; }

#menu_button:after { content: ""; display: none; }

nav ul { font-size: 22px; }

p { font-size: 16px; }

.navigating #menu_button { display: none; }
.navigating #menu_close { display: block; position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; }
.navigating #menu_close:after { color: #FFF; content: " \2715"; font-family: "aktiv-grotesk-extended"; font-weight: 400; font-size: 24px; }


}