@charset "UTF-8";

/*
Theme Name: Fifty50
Theme URI: https://www.roughpixels.com/blogging-themes/fifty50/
 */

/* VARIABLES
==================================================== */
:root {
  /* Font Family */
  --fifty50-font-primary: Proxima Nova, Arial, Helvetica, sans-serif;
  --fifty50-font-secondary: Proxima Nova, Georgia, serif;

  /* Base Colours */
  --fifty50-colour-body-bg: #f9f8f6;
  --fifty50-colour-body-text: #646464;
  --fifty50-colour-secondary-text: #7c7c7c;
  --fifty50-colour-white: #fff;
  --fifty50-colour-black: #000;

  /* Footer */
  --fifty50-colour-footer-text: rgba(255, 255, 255, 0.8);

  /* Accent Colours */
  --fifty50-colour-primary: #d0b875;
  --fifty50-colour-secondary: #7c8963;
  --fifty50-colour-tertiary: #85723d;

  /* Sidebar */
  --fifty50-colour-sidecolumn-bg: #222;
  --fifty50-colour-sidecolumn-text: #fff;
  --fifty50-colour-sitetitle: #fff;

  /* Elements */
  --fifty50-hover-opacity: 0.8;
  --fifty50-colour-border-lines: #ededed;
  --fifty50-entry-meta-colour: #333;
  --fifty50-border-radius: 0.563rem;
   --fifty50-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
   --fifty50-padding-x: 5rem;
   --fifty50-padding-y: 3rem;

  /* Navigation */
  --fifty50-toggle-bg: #ededed;
  --fifty50-primary-nav-link-colour: #555;
  --fifty50-primary-submenu-bg-colour: #fff;
  --fifty50-primary-submenu-link-colour: #555;
  --fifty50-primary-submenu-link-hover-colour: #fff;
  --fifty50-navbar-color: #646464;
  --fifty50-offcanvas-bg-colour: #fff;
  --fifty50-offcanvas-link-colour: #555;
  --fifty50-offcanvas-submenu-link-colour: #555;
  --fifty50-mobile-nav-lines-colour: #ededed;
  --fifty50-mobile-nav-bg-colour: #fff;
  --fifty50-pagination-bg: #f2f2f2;
  --fifty50-pagination-hover-bg: #333;
  --fifty50-pagination-text: #333;

  /* Headings & Titles */
  --fifty50-heading-colour: #222;
  --fifty50-archive-prefix-colour: #818f9e;
  --fifty50-heading-line-colour: #cfcfcf;

  /* Links */
  --fifty50-link-colour: #ab8580;
  --fifty50-link-hover-colour: #818f9e;
  --fifty50-secondary-link-colour: #818f9e;
  --fifty50-secondary-link-hover-colour: #ab8580;
  --fifty50-error-colour: #b00020;

  /* Form Elements */
  --fifty50-button-text-colour: #fff;
  --fifty50-form-input-bg-colour: #fafafa;
  --fifty50-form-input-bg-focus-colour: #fdfdfd;
  --fifty50-form-input-text-colour: #333;
  --fifty50-form-input-border-colour: #dedede;
  --fifty50-form-placeholder-text-colour: rgba(0, 0, 0, 0.4);

  /* Sizing */
  --fifty50-logo-size: 300px;
  --fifty50-site-title-size: 3.5rem;
}

/* FONTS
==================================================== */

/* Proxima Nova - variable */
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Reg-webfont.eot');
    src: url('../fonts/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ProximaNova-Reg-webfont.woff') format('woff'),
         url('../fonts/ProximaNova-Reg-webfont.ttf') format('truetype'),
         url('../fonts/ProximaNova-Reg-webfont.svg#proxima_nova_rgbold') format('svg');
    font-style: normal;
    font-weight: 400;      /*600*/
}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Bold-webfont.eot');
    src: url('../fonts/ProximaNova-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ProximaNova-Bold-webfont.woff') format('woff'),
         url('../fonts/ProximaNova-Bold-webfont.ttf') format('truetype'),
         url('../fonts/ProximaNova-Bold-webfont.svg#proxima_nova_rgbold') format('svg');
    font-style: normal;
    font-weight: 600;      /*600*/
}

/* BASE
==================================================== */
html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

/* MODIFY
==================================================== */
.small {
    font-size: .688rem;
}
.big {
    font-size: 1.625rem;
}
.bold {
    font-weight: bold;
}

.text-right {
    text-align: right !important;
}

.site-fields {
    margin-top: 3rem;
}
.site-fields svg {
    width: 50%;
}
.site-fields span {
    display: block;
}

a {
    text-decoration: none;
}

#breadcrumbs .content-outer {
    padding-bottom: 1.5rem;
}
#breadcrumbs {
    font-size: .688rem;
}
#breadcrumbs a {
    color: var(--fifty50-colour-secondary-text);
}
#breadcrumbs .breadcrumb_last {
    color: var(--fifty50-colour-primary);
}

#menu-social ul, 
#menu-social-en ul {
    float: left;
}
#menu-social li, 
#menu-social-en li {
    float: left;
    margin: 0 1rem 0 0;
}
#menu-social li a span, 
#menu-social-en li a span {
    text-indent: -9999px;
}
#menu-social #facebook, 
#menu-social-en #facebook, 
#menu-social #gplus, 
#menu-social-en #gplus, 
#menu-social #youtube, 
#menu-social-en #youtube, 
#menu-social #twitter, 
#menu-social-en #twitter, 
#menu-social #instagram, 
#menu-social-en #instagram, 
#menu-social #vimeo, 
#menu-social-en #vimeo, 
#menu-social #linkedin, 
#menu-social-en #linkedin {
        background-image: url('../images/social-icons.png');
        background-repeat: no-repeat;
        display: inline-block;
        width: 21px;
        height: 21px;
}
#menu-social #facebook, #menu-social-en #facebook { background-position: 0 -21px; }
#menu-social #gplus, #menu-social-en #gplus { background-position: -21px -21px; }
#menu-social #youtube, #menu-social-en #youtube { background-position: -42px -21px; }
#menu-social #twitter, #menu-social-en #twitter { background-position: -63px -21px; }
#menu-social #instagram, #menu-social-en #instagram { background-position: -84px -21px; }
#menu-social #vimeo, #menu-social-en #vimeo { background-position: -105px -21px; }
#menu-social #linkedin, #menu-social-en #linkedin { background-position: -126px -21px; }
#menu-social #facebook:hover, #menu-social-en #facebook:hover { background-position: 0 0; }
#menu-social #gplus:hover, #menu-social-en #gplus:hover { background-position: -21px 0; }
#menu-social #youtube:hover, #menu-social-en #youtube:hover { background-position: -42px 0; }
#menu-social #twitter:hover, #menu-social-en #twitter:hover { background-position: -63px 0; }
#menu-social #instagram:hover, #menu-social-en #instagram:hover { background-position: -84px 0; }
#menu-social #vimeo:hover, #menu-social-en #vimeo:hover { background-position: -105px 0; }
#menu-social #linkedin:hover, #menu-social-en #linkedin:hover { background-position: -126px 0; }

#site-title::before {
    content: url('../images/sup-line.png');
    position: relative;
    top: -55px;
    left: 55px;
}

#nav-wrapper {
    -webkit-box-shadow: 0px 1px 10px -7px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0px 1px 10px -7px rgba(66, 68, 90, 1);
    box-shadow: 0px 1px 10px -7px rgba(66, 68, 90, 1);
}

.content-inner .entry-content > p {
	text-align: justify;
}

.entry-content .box {
    position: relative;
    margin-bottom: 1.500rem;
    -webkit-box-shadow: 0px 1px 10px -7px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0px 1px 10px -7px rgba(66, 68, 90, 1);
    box-shadow: 0px 1px 10px -7px rgba(66, 68, 90, 1);
}
.entry-content .box .entry-date {
    position: absolute;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0 10px;
    margin-right: 10px;
    font-size: .688rem;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.entry-content .box .entry-title {
    color: var(--fifty50-colour-tertiary);
    font-weight: normal;
    font-size: 1.250rem;
    padding-right: 1rem;
    display: inline-flex;
    width: 66%;
    text-align: left;
}
.entry-content .box .wp-block-button {
    margin: 0;
    width: 33%;
}
.entry-content .box p {
    padding: 1rem;
    margin: 0;
    text-align: right;
}

#langswitcher {
    float: right;
}

/* WRAPPERS
   ==================================================== */

.sidecolumn #site-title {
  color: #fff;
  text-indent: -55px;
}

.site-header {
  justify-content: end;
}

.site-identity {
  width: 100%;  
}

#site-title {
  font-weight: 600;
}

/**
 * 11.4 Additional Sections 
 */

.content-outer {
  /*padding-top: calc(2rem + 2vw);*/
  padding-top: 1.500rem;
}

.content-inner,
.nav-links,
.attachment .entry-content {
  max-width: 100%;
}

/* Footer */
.site-footer {
  font-size: 0.75rem;
  padding-top: 1.500rem;
  padding-bottom: 1.500rem;
  text-align: left;
}
.site-footer a {
  color: var(--fifty50-colour-secondary-text);
}
#copyright {
  text-align: center;
  margin-bottom: 0;
}

/* POSTS and PAGES
==================================================== */
.entry-header {
  text-align: left;
  margin: 0 auto 1.500rem;
  padding-bottom: 0;
}
.entry-title,
.page-title {
  color: var(--fifty50-colour-primary);
  font-size: 2.250rem;
  font-weight: bold;
}
.entry-header::after {
  width: 0;
}

/**
 * 14.0 Media
 */
img {
  border-radius: 0;
}

/* SIDEBAR POSITIONS
   ==================================================== */

#bottom-sidebar {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 1.500rem;
}

/* TOP NAVIGATION
	====================================================*/
#nav-wrapper {
  position: fixed;
  z-index: 1;
  width: 100%;
  background: var(--fifty50-colour-white);
  padding: 10px;
}

.topnav {
  display: inline-block;  
  background: var(--fifty50-colour-white);
  margin-left: 3rem;
}
.topnav .nav-menu {
  justify-content: left;
}

.topnav .nav-menu .sub-menu {
  width: 5rem;
}

/* SOCIAL MENU
   ==================================================== */

#social-menu li a {
  background-color: transparent;
  border-radius: 0;
  border: 0;
}


/* COLOURS
==================================================== */

.has-primary-background-color {
    background: var(--fifty50-colour-primary);
}


/* BUTTONS
==================================================== */

.wp-block-button {
  display: inline-block;
}

/* NAVIGATIONS for Max Width
   ==================================================== */
@media (max-width: 991px) {
    
  .custom-logo-link, 
  #langswitcher,
  .wp-block-button {
    display: none;
  }
  
  .entry-content .box p {
    text-align: left;
  }
  .entry-content .box .entry-title {
    width: auto;
  }

  #nav-wrapper {
      position: initial;
  }
  
  .topnav {
      display: block;
  }
  
  .topnav-header {
    border: 0;
    padding: 0;
    margin: 0;
  }

}

@media (min-width: 992px) {
    
  .topnav .nav-menu .sub-menu {
    border-radius: 0;
  }
    
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .entry-content .wp-block-button .wp-block-button__link {
    padding: .250rem .400rem;
  }
  
}

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

  .entry-content .wp-block-button .wp-block-button__link {
    padding: .500rem .650rem;
  }
  
}

.sidecolumn {
    background-size: cover !important;
}