/*
Theme Name: Vogue
Theme URI: https://kairaweb.com/theme/vogue-child/
Description: Vogue child theme
Author: Kaira
Author URI: https://kairaweb.com/
Template: vogue
Version: 10.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vogue-child
Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, theme-options, translation-ready, blog, e-commerce, entertainment, holiday, portfolio

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Vogue is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*
CSS added by graphic designer and web developer Freja Christiana Smith: www.frejachristiana.com
*/

/*-------------------------Edits made to parent theme----------------------------*/

/*  Vertically aligns tagline with telephone number on the topbar  */
.site-topbar-left {
padding-top: 6px;
}

/*  Centre-aligns all body text and sets font size  */
body {
font-size: 16px;
text-align: center;
}

/*  Aligns footer blocks to left alignment  */
.footer-custom-block {
text-align: left!important;
}

/*  Adjusts website container to 100% of viewport width  */
.page-template-template-full-width,
.page-template-template-full-width-php,
.vogue-shop-full-width, .vogue-shop-archives-full-width,
.vogue-shop-single-full-width,
.site-container,
.content-has-sidebar {
width: 100%!important;
max-width: 100%!important;
}

/*  Adjusts width of main content (excluding journal and shop pages) to 770px,
with equal margins on left and right (journal width is adjusted separately-> go to Custom Content > Journal) */
.content-area-full {
max-width: 770px;
margin-left: auto!important;
margin-right: auto!important;
}

/*  Increases line height (tracking) for heading 3  */
h3 {
line-height: 1.5em;
}

/*  Sets paragraph line height (tracking) to 2  */
p {
line-height: 2!important;
}

/*----------------------------------Woocommerce---------------------------------*/

/*  Aligns text to the left for specific shop page items  */
.summary,
.entry-summary,
.woocommerce-tabs,
.wc-tabs-wrapper,
.woocommerce {
text-align: left!important;
}

/*  Reduces individual product page widths to 75% of viewport width,
with equal margins on left and right (equal to portfolio page width-> go to Custom Content > Portfolio) */
.product {
max-width: 75%;
margin-left: auto;
margin-right: auto;
}

/*  Vertically aligns shop topbar for results and sorting, equally across browsers  */
.woocommerce-result-count, .woocommerce-ordering {
min-height: 52px;
height: 52px;
}
.woocommerce-ordering {
padding: 16px!important;
}

/*  Adjust background colour to light grey and padding to 14px on individual shop items of main shop page
(this matches items on Journal Archive and Portfolio pages-> go to Custom Content > Journal; Portfolio)  */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background-color: #EEEEEE;
padding: 14px!important;
}

/*  Responsive media queries for main shop page to adapt to all viewport widths below 1680px  */
@media only screen and (max-width: 1680px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 530px;
}
}
@media only screen and (max-width: 1500px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 490px;
}
}
@media only screen and (max-width: 1300px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 440px;
}
}
@media only screen and (max-width: 980px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 590px;
}
}
@media only screen and (max-width: 860px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: 530px;
}
}
@media only screen and (max-width: 782px) {
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
height: auto;
float: left!important;
margin-left: 12%!important;
}
}

/*---------------------------------Custom content----------------------------------*/

/*  Overrides centre-aligned text to left-alignment for specific items tagged with this class  */
.leftAlign {
text-align: left!important;
}

/*  Overrides default font size and sets it to 14px for specific items tagged with this class */
.smallFont {
font-size: 14px!important;
}

/*  Links within the main content are automatically underlined  */
.entry-summary a, .entry-content a {
text-decoration: underline;
}

/*  Items tagged with this class will not have a margin (useful for headers which include default margins)  */
.noMargin {
margin: 0;
}

/*  Centres the left-aligned Contact page content  */
.narrow {
width: 220px;
display: block;
margin-left: auto;
margin-right: auto;
}

/*---------------Home Page-----------------*/

/*  Highlighter brush effect  */

/* Affordable Uniqueness */
#aU {
background-image: url("https://oliveschoice.com/wp-content/uploads/2016/11/highlighter-yellow-5.png"); /* Link to yellow highlighter brush effect image */
background-repeat: no-repeat;
background-size: 100% 100%;
}

/* Tangible Creativity */
#tC {
background-image: url("https://oliveschoice.com/wp-content/uploads/2016/11/highlighter-cyan-3.png"); /* Link to turquoise highlighter brush effect image */
background-repeat: no-repeat;
background-size: 100% 100%;
}

/* Manageable Lifestyle */
#mL {
background-image: url("https://oliveschoice.com/wp-content/uploads/2016/11/highlighter-magenta-2.png"); /* Link to pink highlighter brush effect image */
background-repeat: no-repeat;
background-size: 100% 100%;
}

/*  Responsive image layout for windows arrangement illustration  */
/* One image of full windows arrangement illustration for wide screens (PC and laptops) */
#pcExpert {
position: relative;
}

/* Hide individual images of each ceramic illustration used for narrow screens (mobile), while screen is wide */
#mobExpert {
display: none;
}

/* Allows expertise links to lie on top of windows arrangement illustration */
.absolute {
position: absolute;
}

/*  Specific positioning for each expertise link to lie on top of ceramics arrangement illustration  */
/* Public Relations */
#wPR {
bottom: 81.5%;
left: 5%;
}

/* Event Production */
#wEP {
bottom: 81.5%;
left: 43.5%;
}

/* Business Development */
#wBD {
bottom: 81.5%;
left: 83%;
}

/* Market Intelligence Research */
#wMIR {
bottom: 38%;
left: 4.5%;
}

/* Exchange Programme */
#wExP {
bottom: 38%;
left: 43.5%;
}

/* Bespoke Training */
#wBT {
bottom: 38%;
left: 82%;
}

/*  Responsive media queries to hide single windows arrangement illustration when viewport becomes too narrow, and instead show individual windows illustrations one below another  */
@media only screen and (max-width: 800px) {
#mobExpert {
display: inline;
}
#pcExpert {
display: none;
}
}

/*-----------------Portfolio----------------*/

/*  Adjusts width of specific portfolio page containers to 75% of viewport width (equal to shop product pages-> go to Woocommerce)  */
.page-id-11 .content-area-full,
.page-id-116 .content-area-full {
width: 80%!important;
max-width: 80%!important;
}

/*  Removes link underlines  */
article#post-11 a, article#post-116 a {
text-decoration: none;
}

/*  Styles individual portfolio items (background colour and padding matches shop items on main shop page and journal entries on archive page-> go to Woocommerce; Custom Content > Journal > Archive Page) */
.greyBack {
background-color: #EEEEEE;
padding: 14px;
max-width: 350px;
display: inline-block;
margin: 14px;
vertical-align: top;
height: 620px;
}

/*  Styles for portfolio images, applies a white frame and sets top and bottom margins  */
.portfolio {
border: solid;
border-width: 3px;
border-color: white;
margin-top: 1em;
margin-bottom: 1em;
}

/*  General styles for expertise tags on portfolio items  */
.folioTag {
padding: .5em;
margin-top: .3em;
display: inline-block;
}

/*  Background colours and mouseover hover colours for specific expertise tags on portfolio items  */

/* Public Relations tag */
#prTag {
background-color: #a8f5eb;
}
#prTag:hover {
background-color: #52ebd7;
}

/* Business Development tag */
#bdTag {
background-color: #b7b7f6;
}
#bdTag:hover {
background-color: #4e4ee4;
}

/* Event Production tag */
#epTag {
background-color: #f2dfb6;
}
#epTag:hover {
background-color: #febe34;
}

/* Market Intelligence Research tag */
#mirTag {
background-color: #bcfd73;
}
#mirTag:hover {
background-color: #58a402;
}

/* Exchange Programme tag */
#exPTag {
background-color: #fccad6;
}
#exPTag:hover {
background-color: #f74570;
}

/* Bespoke Training tag */
#btTag {
background-color: #efaa7e;
}
#btTag:hover {
background-color: #fe4703;
}

/*  Responsive media queries for portfolio page  */
/* portfolio items become 90% width of viewport of 1200px wide and the height is no longer restricted to 520px */
@media only screen and (max-width: 1200px) {
.greyBack {
width: 90%;
min-width: 90%;
height: auto;
}
}

/* Portfolio container width adjusts from 75% to 100% of a viewport width of 950px and narrower */
@media only screen and (max-width: 950px) {
article#post-11, article#post-116 {
width: 100%!important;
max-width: 100%!important;
}
}

/*----------------Journal----------------*/

/*  Floats journal content container to the left (rather than right),
swaps box shadows to right (rather than left) and sets padding  */
body.single-post.vogue-blog-single-leftsidebar .content-area {
float: left;
box-shadow: 1px 0 0 #d7d7d7;
padding-right: 2%!important;
padding-left: 0!important;
}

/*  Overrides centre-aligned text to left-alignment for journal posts,
also sets the width to 770px (equal to other web pages-> go to Edits made to Parent Theme)
and floats journal entry content to the right (inside left-floated container)  */
.post {
text-align: left!important;
max-width: 770px;
float: right;
}

/*  Removes navigation titles for next/previous article  */
.nav-links {
visibility: hidden;
}

/*  Archive Page  */

/*  Sets summary text for journal entries to 14px  */
.post-loop-content .entry-content,
.post-loop-content .entry-meta,
.post-loop-content .entry-footer {
font-size: 14px!important;
}

/*  Styles for journal entries on archive page
(background colour and padding matches portfolio and shop items-> go to Woocommerce; Custom Content > Portfolio)  */
#main-infinite .post {
background-color: #EEEEEE!important;
padding: 14px!important;
border-style: solid!important;
border-width: 1px;
border-color: #686868!important;
float: right;
}

/*  Sidebar  */

/*  Sets sidebar text to centre alignment  */
.widget-area .widget ul li .post-date {
text-align: center;
}

/*  Floats sidebar to right (rather than left)  */
.widget-area {
float: right;
}

/*  Removes box shadows and sets padding on sidebar  */
body.single-post.vogue-blog-single-leftsidebar .widget-area {
box-shadow: none;
padding: 35px 0 40px 2%;
}

/*  Article Page  */

/*  Floats items tagged with .floatLeft class to the left (used for integrated journal post images)  */
.floatLeft {
float: left;
margin-right: 1em;
}

/*  Floats items tagged with .floatRight class to the right (used for integrated journal post images)  */
.floatRight {
float: right;
margin-left: 1em;
}

/*  Adds a 1px black frame and a 1em margin to items tagged with .imgPost class (used for integrated journal post images)  */
.imgPost {
padding: 0;
border: solid 1px;
margin-top: .5em;
margin-bottom: .5em;
}

/*  Styles for interview question, sets font color to dark pink  */
.question {
color: #f73760;
}

/*  Styles for interview answer, sets font color to cyan blue  */
.answer {
color: #30d8f1;
}

/*  Responsive media queries to remove left and right floats, when viewport is less than 800px wide (used to put integrated journal post images on their own line separate to text)  */
@media only screen and (max-width: 1000px) {
.floatLeft, .floatRight {
float: none;
clear: both;
}
.imgPost {
display: block;
}
}