Categories
Building A WordPress Theme From Scratch

Building a WordPress Theme From Scratch

I’m a fan of using WordPress to build custom websites. So I’ve decided to start a tutorial series and share how I go about building a theme from scratch. No frameworks or starter themes.

The Sketch

Sketch of the theme's design
The layout sketch

Before even setting up my development environment I sketch a very basic layout for my theme. In this series we’ll use a simple layout that includes the following areas.

  • Site header & a primary navigation menu
  • Content area
  • Footer with secondary sidebar menu and a dynamic sidebar for widgets

The Outline

At any point you can review download or clone the repository which will possibly be a step or two ahead of the most recent post in the series.

All content will be offered free as in free beer as well as free software. The theme template files for Scratch JD are licensed under GPL3 and all content in this tutorial series is provided under Creative Commons Zero / Public Domain.

CC0
To the extent possible under law, Joseph Dickson has waived all copyright and related or neighboring rights to Building a WordPress Theme From Scratch. This work is published from: United States.

Categories
Tutorial WordPressaside

Attachment Image Snippet

This snippet for wp_get_attachment_image_src frequently appears in my theme development to select an image by its unique ID in the WordPress media library.

Handy for instances where logos, banners, or any other image frequently recurs on a website and you’d rather store that image in the media library where it can be replaced or modified dynamically.

// replace 7 with unique ID number of image
$image_attributes = wp_get_attachment_image_src( $attachment_id = 7, 'full' );

// retrieves alternative text from image information 
$alt = get_post_meta( $attachment_id , '_wp_attachment_image_alt', true );

if ( $image_attributes ) {
	echo '<img src="'. $image_attributes[0] .'" width="' . $image_attributes[1] . '" height="' . $image_attributes[2] . '" alt="' . $alt . '" />';
}

How it works

  • Set the unique id number in the snippet
  • Displays the image and relevant attributes

This code is based on the official Code References at WordPress.org for wp_get_attachment_image_src() and as get_post_meta().

Categories
WordPress

Sort Archive Posts Alphabetically

I recently worked on a documentation project that required posts to be sorted alphabetically by title. The process can be done by using pre_get_posts() and the is_archive() conditional tag.

/*
 * Order post archives by title in descending order
 */
add_action( 'pre_get_posts', 'jd_archive_sort_alpha_title'); 

function jd_archive_sort_alpha_title($query){

	if(is_archive()) {

		// Set the order to ascending order
		$query->set( 'order', 'ASC' );

		// set the orderby to title
		$query->set( 'orderby', 'title' );

	}

};

As always if you want to use this plugin on your website test it first in a safe environment to verify that it doesn’t create a conflict. Happy hacking. 🙂

Alphabetical Post OrderDownload Plugin
Categories
WordPress

Private Notes

The Post Editor of a Note
The Post Editor of a Note

The Private Notes WordPress plugin is in active development, I’m providing it here for the public to hack, tweak and learn from… Use at your own risk.

Private Notes allows users create and store notes on their personal website.

How Private Notes works

The Plugin creates a Notes section within the dashboard where you can create and maintain your notes.

A Custom Post Type is created to hold your content.

These notes are visible when logged into your website while the content remains hidden from a public guest who could be viewing the page.

What users can see when they’re logged in.
An example of what the public would see if they visit the post

Important

The post’s title, author, date and other data will remain visible to the public. Additionally any media files such as images, videos, audio, and documents will remain visible from their attachment pages. Private Notes does not secure any files attached to the post! It only hides the post’s content area.

Creating a Private Note

After activating the private Private Notes plugin a notebook icon will appear in your admin menu under Posts. Simply Add New, type out some notes, add media, links, embeds or whatever you like. Then hit publish.

The Post Editor of a Note
The Post Editor of a Note

Although self hosting notes in WordPress isn’t as convenient as a dedicated note taking app it does allows personal control and ownership of my thoughts.

jd-private-notesDownload Plugin
Categories
WordPress

2017 Campsite Theme CSS

While working on the website for WordCamp Riverside 2019 I came the theme originally used for WordCamp Europe 2017. However, the original uses SASS so I decided to convert it to standard CSS allowing me to edit the stylesheet directly.

The CSS

Campsite Theme Base StylesheetDownload
/**
 * Key
 *
 * Modified by: Joseph Dickson
 * Adapted from: https://github.com/2ndkauboy/campsite-2017
 * Created by: 2ndkauboy
 * Theme: campsite-2017
 * 
 *
 *
 * # Normalize
 *
 * # Base Theme 
 * 	## Comments
 * 	## Organizers
 * 	## Tickets / CampTix 
 *	## Schedule
 *	## Sessions
 *	## Sponsors
 *	## Widgets
 *	## Navigation
 *
 * # Customizations
 *
 */

/**
 * # Normalize
 * normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css 
 */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

progress {
    vertical-align: baseline
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: inherit;
    font-weight: bolder
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button,
input,
select,
textarea {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: 700
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

* {
    box-sizing: border-box
}

body {
    font-size: 1em;
    line-height: 1.5625em;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    color: rgba(29, 36, 42, .75);
    background: #fff;
    -ms-font-feature-settings: "liga";
    font-feature-settings: "liga"
}

@media (min-width:37.5em) {
    body {
        font-size: 1.125em
    }
}

@media (min-width:48em) {
    body {
        font-size: 1.25em
    }
}

::-moz-selection {
    color: #fff;
    background-color: #e6aa50
}

::selection {
    color: #fff;
    background-color: #e6aa50
}

h1,
h2,
h3,
h4 {
    margin-bottom: 1.5rem;
    margin-top: 0;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase
}

h1 {
    font-size: 2.44141em;
    color: #c96
}

h2 {
    font-size: 1.95312em
}

h2,
h3 {
    color: rgba(29, 36, 42, .9)
}

h3 {
    font-size: 1.5625em
}

h4 {
    font-size: 1.25em;
    color: rgba(29, 36, 42, .9);
    letter-spacing: .025em
}

hr {
    margin: 1.5rem 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #e8e9ea
}

fieldset {
    border: none;
    margin: 0;
    padding: 0
}

input:not([type]),
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
    display: block;
    width: 100%;
    padding: .4375rem 1rem;
    margin: 0;
    border: 1px solid #d5d4d5;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .75);
    background-color: #fff;
    box-shadow: inset 0 .125rem 0 0 #fefbf6;
    border-radius: .1875rem;
    transition: all .1s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none
}

input:not([type]):focus,
input:not([type]):hover,
input[type=color]:focus,
input[type=color]:hover,
input[type=date]:focus,
input[type=date]:hover,
input[type=datetime-local]:focus,
input[type=datetime-local]:hover,
input[type=datetime]:focus,
input[type=datetime]:hover,
input[type=email]:focus,
input[type=email]:hover,
input[type=month]:focus,
input[type=month]:hover,
input[type=number]:focus,
input[type=number]:hover,
input[type=password]:focus,
input[type=password]:hover,
input[type=search]:focus,
input[type=search]:hover,
input[type=tel]:focus,
input[type=tel]:hover,
input[type=text]:focus,
input[type=text]:hover,
input[type=time]:focus,
input[type=time]:hover,
input[type=url]:focus,
input[type=url]:hover,
input[type=week]:focus,
input[type=week]:hover,
textarea:focus,
textarea:hover {
    outline: none;
    color: rgba(29, 36, 42, .9);
    border-color: #aba9ab
}

textarea {
    resize: vertical;
    min-height: 6.25rem;
    display: block
}

@media (min-width:48em) {
    textarea {
        min-height: 9.375rem
    }
}

select {
    display: block;
    height: 2.5rem;
    width: 100%;
    padding: .4375rem 1rem;
    border: 1px solid d5d4d5;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .75);
    font-weight: 700;
    background-color: #fff;
    border-radius: .1875rem;
    cursor: pointer
}

a {
    color: #c96;
    text-decoration: none;
    transition: all .15s ease
}

a:focus,
a:hover {
    color: #e6aa50;
    text-decoration: underline
}

a:active {
    color: #e6aa50;
    text-decoration: none
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .75)
}

@media (min-width:37.5em) {
    p {
        line-height: 1.5625em
    }
}

@media (min-width:48em) {
    p {
        line-height: 1.5625em
    }
}

strong {
    font-weight: 700;
    color: rgba(0, 0, 0, .75)
}

em {
    font-stretch: italic
}

sup sub {
    font-size: 75%;
    line-height: 0;
    position: relative
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

dl,
ol,
ul {
    margin-bottom: 1.5rem
}

dl dl,
dl ol,
dl ul,
li,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
    margin-bottom: 0
}

li {
    margin-top: .25rem
}

li:first-child {
    margin-top: 0
}

blockquote {
    margin: 0;
    margin-bottom: 1.5rem;
    padding: 2em;
    background-color: #e8e9ea
}

blockquote p {
    font-style: italic
}

blockquote p:last-child {
    margin-bottom: 0
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-bottom: 1.5rem
}

caption {
    margin-bottom: .5rem
}

td,
th {
    padding: .5rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width:48em) {
    td,
    th {
        padding: 1rem
    }
}

figure,
img {
    display: block;
    margin: 0;
    margin-bottom: 1.5rem;
    max-width: 100%;
    height: auto
}

figcaption {
    margin-top: .5rem;
    margin-bottom: 0;
    color: rgba(29, 36, 42, .6)
}

code,
pre {
    border: 1px solid #f5ddb9;
    border-top-color: #e9b362;
    border-radius: .1875rem;
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(29, 36, 42, .75);
    font-family: Bitstream Vera Sans Mono, Consolas, Courier, monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -moz-tab-size: 2;
    tab-size: 2
}

pre {
    margin: 1.5rem 0;
    padding: 1.5rem;
    overflow: scroll
}

code {
    padding: .125rem .1875rem;
    background-color: #f5ebe0
}

pre code {
    border-radius: 0;
    border: 0;
    padding: 0;
    background: 0
}

/**
 * # Base Theme
 */

.site {
    overflow: hidden;
    position: relative
}

.nav {
    list-style: none;
    margin: 0;
    padding: 0
}

.nav__item {
    display: inline-block
}

.nav__link {
    display: block
}

.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
    position: relative;
    display: inline-block;
    padding: .4375rem 1rem;
    border: 1px solid #c96;
    font-size: 1em;
    line-height: 1.5625em;
    text-align: center;
    color: rgba(29, 36, 42, .75);
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 700;
    text-decoration: none;
    background-color: #c96;
    border-radius: .1875rem;
    border-color: transparent;
    cursor: pointer;
    transition: all .1s ease
}

.button:active,
.button:focus,
.button:hover,
button:active,
button:focus,
button:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:active,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50;
    text-decoration: none
}

@media (min-width:48em) {
    .button,
    button,
    input[type=button],
    input[type=reset],
    input[type=submit] {
        font-size: 1em;
        line-height: 1.5625em
    }
}

.button.button--primary,
button.button--primary,
input[type=button].button--primary,
input[type=reset].button--primary,
input[type=submit].button--primary {
    color: rgba(29, 36, 42, .75);
    background-color: #c96
}

.button.button--primary:active,
.button.button--primary:focus,
.button.button--primary:hover,
button.button--primary:active,
button.button--primary:focus,
button.button--primary:hover,
input[type=button].button--primary:active,
input[type=button].button--primary:focus,
input[type=button].button--primary:hover,
input[type=reset].button--primary:active,
input[type=reset].button--primary:focus,
input[type=reset].button--primary:hover,
input[type=submit].button--primary:active,
input[type=submit].button--primary:focus,
input[type=submit].button--primary:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.button.button--secondary,
button.button--secondary,
input[type=button].button--secondary,
input[type=reset].button--secondary,
input[type=submit].button--secondary {
    color: hsla(0, 0%, 100%, .75);
    background-color: #575357
}

.button.button--secondary:active,
.button.button--secondary:focus,
.button.button--secondary:hover,
button.button--secondary:active,
button.button--secondary:focus,
button.button--secondary:hover,
input[type=button].button--secondary:active,
input[type=button].button--secondary:focus,
input[type=button].button--secondary:hover,
input[type=reset].button--secondary:active,
input[type=reset].button--secondary:focus,
input[type=reset].button--secondary:hover,
input[type=submit].button--secondary:active,
input[type=submit].button--secondary:focus,
input[type=submit].button--secondary:hover {
    color: hsla(0, 0%, 100%, .9);
    background-color: #4a474a
}

.button.button--invert,
button.button--invert,
input[type=button].button--invert,
input[type=reset].button--invert,
input[type=submit].button--invert {
    color: rgba(29, 36, 42, .75);
    background-color: #fff
}

.button.button--invert:active,
.button.button--invert:focus,
.button.button--invert:hover,
button.button--invert:active,
button.button--invert:focus,
button.button--invert:hover,
input[type=button].button--invert:active,
input[type=button].button--invert:focus,
input[type=button].button--invert:hover,
input[type=reset].button--invert:active,
input[type=reset].button--invert:focus,
input[type=reset].button--invert:hover,
input[type=submit].button--invert:active,
input[type=submit].button--invert:focus,
input[type=submit].button--invert:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6e6e6
}

.button.button--inactive,
.button.button--inactive:active,
.button.button--inactive:focus,
.button.button--inactive:hover,
button.button--inactive,
button.button--inactive:active,
button.button--inactive:focus,
button.button--inactive:hover,
input[type=button].button--inactive,
input[type=button].button--inactive:active,
input[type=button].button--inactive:focus,
input[type=button].button--inactive:hover,
input[type=reset].button--inactive,
input[type=reset].button--inactive:active,
input[type=reset].button--inactive:focus,
input[type=reset].button--inactive:hover,
input[type=submit].button--inactive,
input[type=submit].button--inactive:active,
input[type=submit].button--inactive:focus,
input[type=submit].button--inactive:hover {
    color: rgba(0, 0, 0, .3);
    background-color: #eee
}

.site-header {
    background-color: #2d282d
}

.site-header .site-branding {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1rem;
    text-align: center
}

@media (min-width:37.5em) {
    .site-header .site-branding {
        padding: 3rem 2rem
    }
}

@media (min-width:48em) {
    .site-header .site-branding {
        padding: 4.5rem 3rem
    }
}

.home .site-header .site-branding {
    padding: 3.5rem 1rem
}

@media (min-width:37.5em) {
    .home .site-header .site-branding {
        padding: 7rem 2rem
    }
}

@media (min-width:48em) {
    .home .site-header .site-branding {
        padding: 10.5rem 3rem
    }
}

.site-title {
    margin: 0;
    font-size: 1.5625em;
    line-height: 1;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: hsla(0, 0%, 100%, .9)
}

.site-title a {
    display: block;
    color: #e6aa50
}

.site-title a:active,
.site-title a:focus,
.site-title a:hover {
    color: #c96;
    text-decoration: none
}

.site-title a:before {
    display: block;
    width: 180px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
    content: ""
}

.site-description {
    margin: 0;
    margin-top: .5rem;
    font-size: 1em;
    line-height: 1.25em;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    text-transform: none;
    color: hsla(0, 0%, 100%, .6)
}

.site-header {
    position: relative;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: fixed;
    transition: all .15s ease
}

@media (min-width:48em) {
    .site-header {
        background-position: 50% 50%;
        background-size: cover
    }
}

.site-header:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(45, 40, 45, .6);
    content: ""
}

.site-header>* {
    position: relative;
    z-index: 200
}

.home .site-header .site-branding:after,
.home .site-header .site-branding:before {
    position: absolute;
    z-index: -1;
    left: 60%;
    display: block;
    width: 0;
    height: 0;
    content: "";
    opacity: .1;
    transform-origin: 100% 100%;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px
}

.home .site-header .site-branding:before {
    transform: skewX(50deg);
    animation: a 5s infinite 5s
}

.home .site-header .site-branding:after {
    transform: skewX(-50deg);
    animation: b 5s infinite 5s
}

.menu-toggle {
    padding: 1rem;
    margin: 0;
    margin-top: .125rem;
    width: 100%;
    font-size: 0;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .05em;
    border-radius: 0;
    cursor: pointer
}

.menu-toggle,
.menu-toggle.focus,
.menu-toggle:active,
.menu-toggle:focus,
.menu-toggle:hover {
    color: #e6aa50;
    background-color: rgba(45, 40, 45, .9)
}

.menu-toggle:before {
    font-size: 16px;
    line-height: 24px;
    content: "Menu"
}

.menu-toggle:after,
.menu-toggle:before {
    display: inline-block;
    vertical-align: middle
}

.menu-toggle:after {
    position: relative;
    top: -.125rem;
    border: .375rem solid transparent;
    margin-left: .5rem;
    border-top-color: #e6aa50;
    content: ""
}

.menu-toggle[aria-expanded=true] {
    color: #c96
}

.menu-toggle[aria-expanded=true]:after {
    border-top-color: transparent;
    border-bottom-color: #e6aa50
}

@media (min-width:37.5em) {
    .menu-toggle {
        display: none
    }
}

.main-navigation {
    position: relative;
    background-color: rgba(0, 0, 0, .2)
}

.main-navigation:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: .125rem;
    background-color: #e6aa50;
    content: ""
}

@media (max-width:37.4375em) {
    .main-navigation {
        background-color: #2d282d
    }
    .main-navigation.toggled-on .menu {
        display: block
    }
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    *zoom: 1;
    text-align: center
}

.menu:after,
.menu:before {
    content: "";
    display: table
}

.menu:after {
    clear: both
}

@media (min-width:37.5em) {
    .menu {
        display: block
    }
}

@media (max-width:37.4375em) {
    .menu {
        border-top: 1px solid hsla(0, 0%, 100%, .2);
        display: none
    }
    .toggled-on .menu {
        display: block
    }
}

.menu-item {
    position: relative;
    margin: 0;
    display: block;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: left
}

@media (min-width:37.5em) {
    .menu-item {
        margin: 0 .0625rem;
        display: inline-block;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 1.33333em;
        text-align: center
    }
}

.menu-item a {
    display: block;
    color: #e6aa50;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: all .1s ease
}

.menu-item a.focus,
.menu-item a:active,
.menu-item a:focus,
.menu-item a:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #c96
}

@media (min-width:48em) {
    .menu-item a {
        padding: 1rem 1.5rem
    }
}

@media (min-width:62em) {
    .menu-item a {
        padding: 1.5rem 2rem
    }
}

.current-menu-item>a {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.menu-item-has-children {
    background-color: rgba(45, 40, 45, .6)
}

.menu-item-has-children .dropdown-toggle {
    display: none
}

@media (min-width:37.5em) {
    .menu-item-has-children {
        background-color: transparent
    }
    .menu-item-has-children>a:after {
        position: relative;
        top: -.125rem;
        display: inline-block;
        border: .375rem solid transparent;
        margin-left: .5rem;
        vertical-align: middle;
        border-top-color: #e6aa50;
        content: ""
    }
    .menu-item-has-children>a .dropdown-toggle {
        display: inline-block;
        display: none
    }
    .menu-item-has-children.focus>a,
    .menu-item-has-children:hover>a {
        color: rgba(29, 36, 42, .9);
        background-color: #c96
    }
    .menu-item-has-children.focus>a:after,
    .menu-item-has-children:hover>a:after {
        border-top-color: rgba(29, 36, 42, .9)
    }
    .menu-item-has-children.focus>.sub-menu,
    .menu-item-has-children:hover>.sub-menu {
        left: 0
    }
    .menu-item-has-children.current-menu-item>a:after {
        border-top-color: rgba(29, 36, 42, .9)
    }
}

.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0
}

.sub-menu .menu-item {
    text-transform: none;
    font-weight: 400;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif
}

@media (max-width:37.4375em) {
    .sub-menu a {
        padding-left: 2.5rem;
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: 1rem 50%
    }
    .sub-menu a.focus,
    .sub-menu a:focus,
    .sub-menu a:hover {
    }
}

@media (min-width:37.5em) {
    .sub-menu {
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 310;
        min-width: 16.25rem;
        background-color: #c96
    }
    .sub-menu .menu-item {
        width: 100%;
        margin: 0;
        border-top: 1px solid hsla(0, 0%, 100%, .2);
        text-align: left
    }
    .sub-menu a {
        padding: .625rem 1rem;
        color: rgba(29, 36, 42, .75)
    }
}

@media (min-width:48em) {
    .sub-menu a {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

@media (min-width:62em) {
    .sub-menu a {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

#colophon {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    text-align: center
}

.site-info-generator {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.site-info-network {
    position: relative;
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    color: #fff;
    text-indent: -9999px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #614787;
    background-size: 40px;
    border-radius: 50%;
    transition: all .1s ease
}

.site-info-network:after {
    position: absolute;
    left: 50%;
    top: 1.875rem;
    z-index: -1;
    margin-left: -.9375rem;
    margin-bottom: -1.875rem;
    width: 1.875rem;
    height: 6.25rem;
    background: #614787;
    transition: all .1s ease;
    content: ""
}

.site-info-network:active,
.site-info-network:active:after,
.site-info-network:focus,
.site-info-network:focus:after,
.site-info-network:hover,
.site-info-network:hover:after {
    background-color: #57407a
}

#primary {
    text-align: left;
    padding: 1.5rem 1rem
}

@media (min-width:37.5em) {
    #primary {
        padding: 3rem 2rem
    }
}

@media (min-width:48em) {
    #primary {
        padding: 4.5rem 3rem
    }
}

#content {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto
}

#after-header-widgets,
#before-content-widgets,
#secondary {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left
}

.post {
    *zoom: 1;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 6px double #f5ebe0
}

.post:after,
.post:before {
    content: "";
    display: table
}

.post:after {
    clear: both
}

.entry-content {
    *zoom: 1
}

.entry-content:after,
.entry-content:before {
    content: "";
    display: table
}

.entry-content:after {
    clear: both
}

.entry-title {
    font-size: 2.44141em;
    line-height: 1;
    margin-bottom: 1.5rem
}

.entry-title a:active,
.entry-title a:focus,
.entry-title a:hover {
    text-decoration: none
}

.entry-meta {
    margin-bottom: 1rem
}

.entry-meta a {
    color: #614787
}

.entry-meta a:active,
.entry-meta a:focus,
.entry-meta a:hover {
    color: #57407a
}

.entry-meta .updated {
    display: none
}

.entry-meta .published {
    display: inline
}

.entry-footer {
    margin-bottom: 1.5rem;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5em;
    color: rgba(29, 36, 42, .6)
}

.entry-footer>:after {
    content: " | "
}

.entry-footer>:last-child:after {
    content: ""
}

.entry-footer a {
    color: #614787
}

.entry-footer a:active,
.entry-footer a:focus,
.entry-footer a:hover {
    color: #57407a
}

/**
 * ## Comments
 */
.comments-area {
    margin-top: 2rem
}

.comments-title {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1.5rem
}

.comment-list>.comment {
    margin-top: 1.5rem
}

article.comment-body {
    position: relative;
    padding-left: 3.25rem
}

.comment-author {
    display: block;
    font-size: .8em;
    line-height: 1.5625em
}

.comment-author .avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.625rem
}

.comment-author .fn {
    font-style: normal;
    font-weight: 700
}

.comment-author .says {
    display: none
}

.comment-metadata {
    font-size: .64em;
    line-height: 1.5625em
}

.comment-content {
    margin-top: .5rem
}

.comment-content p {
    margin-bottom: .5rem;
    font-size: .8em
}

.comment-content p:last-child {
    margin-bottom: 0
}

.reply {
    margin-top: .5rem;
    font-size: .8em;
    line-height: 1.5625em
}

.pingback {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.comment-respond {
    padding: 1.5rem;
    background-color: #fff;
    background-color: #e8e9ea;
    border-radius: .1875rem
}

.comment-form label {
    font-size: 1em;
    line-height: 1.5625em
}

.comment-form p {
    margin-bottom: 1rem
}

.comment-form p:last-child {
    margin-bottom: 0
}

.comment-reply-title {
    font-size: 1em;
    margin-bottom: 1rem
}

.comment-notes {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.comment-subscription-form {
    margin-bottom: .5rem
}

.comment-subscription-form label {
    font-size: .8em
}

/**
 * ## Posts
 */
.post-navigation,
.posts-navigation {
    *zoom: 1
}

.post-navigation:after,
.post-navigation:before,
.posts-navigation:after,
.posts-navigation:before {
    content: "";
    display: table
}

.post-navigation:after,
.posts-navigation:after {
    clear: both
}

.post-navigation .screen-reader-text,
.posts-navigation .screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.post-navigation a,
.posts-navigation a {
    display: block
}

.post-navigation .nav-previous,
.posts-navigation .nav-previous {
    float: left;
    text-align: left
}

.post-navigation .nav-previous a:before,
.posts-navigation .nav-previous a:before {
    margin-right: .5rem;
    display: inline-block;
    content: "\2190"
}

.post-navigation .nav-next,
.posts-navigation .nav-next {
    float: right;
    text-align: right
}

.post-navigation .nav-next a:after,
.posts-navigation .nav-next a:after {
    margin-left: .5rem;
    display: inline-block;
    content: "\2192"
}
/**
 * ## Organizers 
 * Custom Post Type
 */
.wcorg-organizers {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 6px double #f5ebe0
}

.wcorg-organizer {
    max-width: 40em;
    margin-bottom: 2rem
}

.wcorg-organizer:last-child {
    margin-bottom: 0
}

.wcorg-organizer h2 {
    margin-bottom: 1rem;
    font-size: 1.25em;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    letter-spacing: .1em
}

.wcorg-organizer .wcorg-organizer-description {
    padding-left: 4rem;
    min-height: 3rem
}

@media (min-width:37.5em) {
    .wcorg-organizer .wcorg-organizer-description {
        padding-left: 6rem;
        min-height: 5rem
    }
}

.wcorg-organizer p {
    margin: 0;
    font-size: 16px
}

.wcorg-organizer .avatar {
    float: left;
    margin-left: -4rem;
    width: 3rem;
    clip-path: polygon(50% 0px, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)
}

@media (min-width:37.5em) {
    .wcorg-organizer .avatar {
        margin-left: -6rem;
        width: 5rem
    }
}

/**
 * ## Tickets / CampTix 
 * Custom Post Type
 */
.tix-attendee-list {
    list-style: none;
    margin: 0;
    padding: 0
}

#tix-attendees .tix-columns-3 li {
    width: 100%
}

@media (min-width:37.5em) {
    #tix-attendees .tix-columns-3 li {
        width: 50%
    }
    #tix-attendees .tix-columns-3 li:nth-child(odd) {
        clear: left
    }
}

@media (min-width:62em) {
    #tix-attendees .tix-columns-3 li {
        width: 33.33333%
    }
    #tix-attendees .tix-columns-3 li:nth-child(odd) {
        clear: none
    }
    #tix-attendees .tix-columns-3 li:nth-child(3n+1) {
        clear: left
    }
}

#tix-attendees {
    *zoom: 1
}

#tix-attendees:after,
#tix-attendees:before {
    content: "";
    display: table
}

#tix-attendees:after {
    clear: both
}

#tix-attendees li {
    position: relative;
    margin-top: 0;
    margin-bottom: 1.5rem;
    height: auto;
    min-height: 3rem;
    padding-left: 4rem;
    padding-right: .5rem;
    font-size: .8em;
    line-height: 1.25em;
    text-align: left
}

#tix-attendees .avatar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    margin: 0;
    width: 3rem;
    height: 3rem;
    border: .125rem solid #e6aa50;
    background-color: #fff;
    transition: all .15s ease
}

#tix-attendees a {
    display: block
}

#tix-attendees .tix-field {
    display: inline-block;
    margin: 0;
    margin-right: .5rem;
    font-size: 14px;
    line-height: 1.5625em;
    vertical-align: middle
}

#tix-attendees .tix-attendee-name {
    display: block;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: .125rem;
    color: rgba(29, 36, 42, .9);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25em;
    background: none
}

#tix-attendees li:hover .avatar {
    transform: scale(1.1)
}

#tix-attendees .tix-attendee-url {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 11.25rem
}

#tix-attendees .tix-attendee-twitter:after {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    margin-left: .5rem;
    vertical-align: middle;
    background: no-repeat url(https://2017.europe.wordcamp.org/files/2017/01/decoration-bullet-dark.png) 100% 50%;
    background-size: 14px;
    opacity: .5;
    content: ""
}

#tix-attendees .tix-attendee-twitter:last-child:after {
    display: none
}


#tix {
    *zoom: 1
}

#tix:after,
#tix:before {
    content: "";
    display: table
}

#tix:after {
    clear: both
}

.tix_tickets_table {
    border-top: 3px double #c96;
    border-bottom: 3px double #c96;
    margin-bottom: 1.5rem
}

.tix_tickets_table thead th {
    color: rgba(29, 36, 42, .75)
}

.tix_tickets_table td,
.tix_tickets_table th {
    border-color: #f5ebe0
}

.tix_tickets_table td:first-child,
.tix_tickets_table th:first-child {
    padding-left: 0
}

.tix_tickets_table td:last-child,
.tix_tickets_table th:last-child {
    padding-right: 0
}

.tix_tickets_table .tix-ticket-title {
    display: block;
    font-size: 1.25em;
    color: rgba(29, 36, 42, .9)
}

.tix_tickets_table .tix-ticket-title+br {
    display: none
}

.tix_tickets_table .tix-ticket-excerpt {
    display: block;
    margin-top: .25rem;
    color: rgba(29, 36, 42, .75)
}

.tix_tickets_table .tix-column-price,
.tix_tickets_table .tix-column-quantity,
.tix_tickets_table .tix-column-remaining {
    font-weight: 700
}

#tix-coupon-container {
    position: relative;
    padding-right: 10rem
}

#tix-coupon-container input[type=text] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

#tix-coupon-container input[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    width: 10rem;
    padding: .4375rem .625rem;
    color: hsla(0, 0%, 100%, .9);
    background-color: #575357;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

@media (max-width:47.9375em) {
    .tix_tickets_table thead tr {
        display: none
    }
    .tix_tickets_table tbody .tix-column-description {
        display: block;
        width: 100%
    }
    .tix_tickets_table tbody .tix-column-price,
    .tix_tickets_table tbody .tix-column-quantity,
    .tix_tickets_table tbody .tix-column-remaining {
        display: block;
        float: left
    }
    .tix_tickets_table tbody .tix-column-price {
        padding-left: 0
    }
    .tix_tickets_table tbody .tix-column-price,
    .tix_tickets_table tbody .tix-column-remaining {
        padding-top: 1rem;
        padding-bottom: 1rem;
        line-height: 1.5em;
        width: 30%
    }
    .tix_tickets_table tbody .tix-column-quantity {
        width: 40%
    }
}

div.googlemaps {
    margin-bottom: 1.5rem
}

div.googlemaps iframe {
    max-width: 100%
}

/**
 * ## Schedule
 * Custom Post Type
 */

.wcpt-schedule {
    border: .25rem solid #c96;
    margin-bottom: 1.5rem;
    background-color: #fff
}

.wcpt-schedule td,
.wcpt-schedule th {
    vertical-align: top;
    border-color: #e0c2a3
}

.wcpt-schedule .wcpt-col-time,
.wcpt-schedule .wcpt-col-track {
    border-top: none;
    background-color: #2d282d;
    color: hsla(0, 0%, 100%, .9)
}

.wcpt-schedule .global-session td {
    vertical-align: middle
}

.wcpt-schedule .wcpt-col-time {
    width: 10%
}

.wcpt-schedule .wcpt-col-track {
    width: 30%
}

.wcpt-schedule .wcpt-time {
    font-size: 1em;
    line-height: 1.25em;
    font-weight: 700;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    color: rgba(29, 36, 42, .9)
}

.wcpt-schedule .wcpt-session-title {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.25em;
    line-height: 1.25em;
    font-weight: 700
}

.wcpt-schedule .global-session.afternoon-break .wcpt-session-title,
.wcpt-schedule .global-session.break .wcpt-session-title,
.wcpt-schedule .global-session.lunch .wcpt-session-title,
.wcpt-schedule .global-session.morning-break .wcpt-session-title,
.wcpt-schedule .global-session.registration .wcpt-session-title {
    margin-bottom: 0;
    font-size: 1.5625em;
    line-height: 1.25em;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    text-transform: uppercase;
    color: rgba(29, 36, 42, .9)
}

.wcpt-schedule .wcpt-session-speakers {
    display: block
}

.wcpt-schedule .wcpt-session-speakers a {
    color: rgba(29, 36, 42, .75)
}

.wcpt-schedule .global-session.afternoon-break,
.wcpt-schedule .global-session.break,
.wcpt-schedule .global-session.lunch,
.wcpt-schedule .global-session.morning-break,
.wcpt-schedule .global-session.registration {
    background-color: #f5ebe0!important;
    background-size: 120px;
    background-position: 50% 0
}

@media (max-width:47.9375em) {
    .wcpt-schedule {
        border: none
    }
    .wcpt-schedule td,
    .wcpt-schedule th {
        display: block;
        border-top: none;
        margin: 0
    }
    .wcpt-schedule thead {
        display: none
    }
    .wcpt-schedule tr {
        margin-bottom: 1rem;
        display: block;
        border: .25rem solid #c96
    }
    .wcpt-schedule .wcb-track-track-1:before,
    .wcpt-schedule .wcb-track-track-2:before,
    .wcpt-schedule .wcb-track-track-3:before {
        display: block;
        padding: .5rem 1rem;
        margin: -.5rem -1rem .5rem;
        border: none;
        color: rgba(29, 36, 42, .9);
        font-weight: 700;
        background-color: #f5ebe0!important
    }
    .wcpt-schedule .wcb-track-track-1:before {
        content: "Track 1"
    }
    .wcpt-schedule .wcb-track-track-2:before {
        content: "Track 2"
    }
    .wcpt-schedule .wcb-track-track-3:before {
        content: "Track 3"
    }
    .wcpt-schedule .wcpt-session-type-custom:before {
        display: none;
        content: ""
    }
    .wcpt-schedule .wcpt-session-empty {
        display: none;
        height: 0
    }
    .wcpt-schedule .wcpt-time {
        padding-top: 1rem;
        padding-bottom: 1rem;
        color: hsla(0, 0%, 100%, .9);
        background-color: #2d282d
    }
    .wcpt-schedule .wcpt-session-title {
        padding: 0
    }
    .wcpt-schedule .wcpt-session-speakers {
        padding-left: 0
    }
}

/**
 * ## Sessions
 * Custom Post Type
 */

.wcorg-session {
    border-top: 6px double #f5ebe0;
    padding: 1.5rem 0
}

.wcorg-session .wcorg-session-description {
    *zoom: 1
}

.wcorg-session .wcorg-session-description:after,
.wcorg-session .wcorg-session-description:before {
    content: "";
    display: table
}

.wcorg-session .wcorg-session-description:after {
    clear: both
}

.wcorg-session .avatar {
    float: left;
    margin: .5rem 1rem .5rem 0
}

.wcorg-session p {
    margin-bottom: .5rem
}

.wcorg-session p:last-child {
    margin-bottom: 0
}

.wcorg-session h3 {
    text-transform: none
}

.wcorg-speaker {
    border-top: 6px double #f5ebe0;
    padding: 1.5rem 0
}

.wcorg-speaker .wcorg-speaker-description {
    *zoom: 1
}

.wcorg-speaker .wcorg-speaker-description:after,
.wcorg-speaker .wcorg-speaker-description:before {
    content: "";
    display: table
}

.wcorg-speaker .wcorg-speaker-description:after {
    clear: both
}

.wcorg-speaker .avatar {
    float: left;
    margin: .5rem 1rem .5rem 0
}

.wcorg-speaker p {
    margin-bottom: .5rem;
    font-size: 16px
}

.wcorg-speaker p:last-child {
    margin-bottom: 0
}

.wcorg-speaker h3 {
    text-transform: none
}

.single-wcb_speaker .entry-content {
    font-size: 18px
}

#session-speaker-names,
#speaker-session-names {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1.5rem
}

#session-speaker-names li,
#speaker-session-names li {
    padding-left: 2rem;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: .5rem .5rem;
    font-size: 1em;
    line-height: 1.5625em
}

/**
 * ## Sponsors
 * Custom Post Type
 */

.wcorg-sponsors>div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.wcorg-sponsors>div h2 {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f5ebe0;
    font-size: 1em;
    line-height: 1.5625em;
    text-align: center;
    position: relative;
    z-index: 100
}

@media (min-width:48em) {
    .wcorg-sponsors>div h2 {
        padding-top: 0;
        border-top: none
    }
    .wcorg-sponsors>div h2:after,
    .wcorg-sponsors>div h2:before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        border-top: 1px solid #f5ebe0;
        content: "";
        z-index: -1
    }
    .wcorg-sponsors>div h2:after {
        border-color: #fff;
        width: 16em;
        z-index: -1
    }
}

.wcorg-sponsor {
    margin-bottom: 0;
    padding: .5rem
}

.wcorg-sponsor img {
    display: block;
    margin: 0 auto;
    max-height: 8.75rem
}

.wcorg-sponsor .wcorg-sponsor-description p,
.wcorg-sponsor h3 {
    display: none
}

.wcorg-sponsor a {
    background-color: #fff
}

.wcorg-sponsor a img {
    transition: all .15s ease
}

.wcorg-sponsor a:active img,
.wcorg-sponsor a:focus img,
.wcorg-sponsor a:hover img {
    filter: grayscale(100%);
    opacity: .75
}

@media (min-width:48em) {
    .wcorg-sponsor {
        padding: 1rem
    }
    .wcorg-sponsor img {
        max-height: 12.5rem
    }
}

.wcorg-sponsor-level-administrator,
.wcorg-sponsor-level-event-after-party,
.wcorg-sponsor-level-event-speakers-dinner,
.wcorg-sponsor-level-super-admin {
    *zoom: 1
}

.wcorg-sponsor-level-administrator:after,
.wcorg-sponsor-level-administrator:before,
.wcorg-sponsor-level-event-after-party:after,
.wcorg-sponsor-level-event-after-party:before,
.wcorg-sponsor-level-event-speakers-dinner:after,
.wcorg-sponsor-level-event-speakers-dinner:before,
.wcorg-sponsor-level-super-admin:after,
.wcorg-sponsor-level-super-admin:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-administrator:after,
.wcorg-sponsor-level-event-after-party:after,
.wcorg-sponsor-level-event-speakers-dinner:after,
.wcorg-sponsor-level-super-admin:after {
    clear: both
}

.wcorg-sponsor-level-administrator .wcorg-sponsor,
.wcorg-sponsor-level-event-after-party .wcorg-sponsor,
.wcorg-sponsor-level-event-speakers-dinner .wcorg-sponsor,
.wcorg-sponsor-level-super-admin .wcorg-sponsor {
    width: 100%
}

@media (min-width:37.5em) {
    .wcorg-sponsor-level-administrator .wcorg-sponsor,
    .wcorg-sponsor-level-event-after-party .wcorg-sponsor,
    .wcorg-sponsor-level-event-speakers-dinner .wcorg-sponsor,
    .wcorg-sponsor-level-super-admin .wcorg-sponsor {
        width: 50%
    }
}

@media (min-width:48em) {
    .wcorg-sponsor-level-administrator .wcorg-sponsor,
    .wcorg-sponsor-level-event-after-party .wcorg-sponsor,
    .wcorg-sponsor-level-event-speakers-dinner .wcorg-sponsor,
    .wcorg-sponsor-level-super-admin .wcorg-sponsor {
        width: 33.33333%
    }
}

.wcorg-sponsor-level-author,
.wcorg-sponsor-level-editor,
.wcorg-sponsor-level-speakers-dinner {
    *zoom: 1
}

.wcorg-sponsor-level-author:after,
.wcorg-sponsor-level-author:before,
.wcorg-sponsor-level-editor:after,
.wcorg-sponsor-level-editor:before,
.wcorg-sponsor-level-speakers-dinner:after,
.wcorg-sponsor-level-speakers-dinner:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-author:after,
.wcorg-sponsor-level-editor:after,
.wcorg-sponsor-level-speakers-dinner:after {
    clear: both
}

.wcorg-sponsor-level-author .wcorg-sponsor,
.wcorg-sponsor-level-editor .wcorg-sponsor,
.wcorg-sponsor-level-speakers-dinner .wcorg-sponsor {
    width: 50%
}

@media (min-width:48em) {
    .wcorg-sponsor-level-author .wcorg-sponsor,
    .wcorg-sponsor-level-editor .wcorg-sponsor,
    .wcorg-sponsor-level-speakers-dinner .wcorg-sponsor {
        width: 25%
    }
}

.wcorg-sponsor-level-small-business,
.wcorg-sponsor-level-subscriber {
    *zoom: 1
}

.wcorg-sponsor-level-small-business:after,
.wcorg-sponsor-level-small-business:before,
.wcorg-sponsor-level-subscriber:after,
.wcorg-sponsor-level-subscriber:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-small-business:after,
.wcorg-sponsor-level-subscriber:after {
    clear: both
}

.wcorg-sponsor-level-small-business .wcorg-sponsor,
.wcorg-sponsor-level-subscriber .wcorg-sponsor {
    width: 33.33333%
}

@media (min-width:48em) {
    .wcorg-sponsor-level-small-business .wcorg-sponsor,
    .wcorg-sponsor-level-subscriber .wcorg-sponsor {
        width: 20%
    }
}

.wcorg-sponsor-level-microsponsor {
    *zoom: 1
}

.wcorg-sponsor-level-microsponsor:after,
.wcorg-sponsor-level-microsponsor:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-microsponsor:after {
    clear: both
}

.wcorg-sponsor-level-microsponsor .wcorg-sponsor {
    width: 33.33333%
}

@media (min-width:48em) {
    .wcorg-sponsor-level-microsponsor .wcorg-sponsor {
        width: 16.66667%
    }
}

.wcorg-sponsor-level-community-summit-bronze,
.wcorg-sponsor-level-community-summit-gold,
.wcorg-sponsor-level-community-summit-individual,
.wcorg-sponsor-level-community-summit-silver {
    display: none!important
}
/**
 * ## Widgets
 */
.widget {
    padding: 1.5rem 1rem;
    position: relative;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto
}

@media (min-width:37.5em) {
    .widget {
        padding: 3rem 2rem
    }
}

@media (min-width:48em) {
    .widget {
        padding: 4.5rem 3rem
    }
}

.widget-title {
    font-size: 1.25em;
    line-height: 1.25em
}

.widget hr {
    width: 10rem;
    padding: 0;
    margin: 1.5rem auto;
    border-top: 2px solid #c96
}

@media (min-width:48em) {
    .widget hr {
        margin-top: 2rem;
        margin-bottom: 2rem
    }
}

#after-header-widgets .widget,
#before-content-widgets .widget,
#content-widgets .widget,
#secondary .widget {
    text-align: center
}

#after-header-widgets .widget>*,
#before-content-widgets .widget>*,
#content-widgets .widget>*,
#secondary .widget>* {
    position: relative
}

#after-header-widgets .widget:before,
#before-content-widgets .widget:before,
#content-widgets .widget:before,
#secondary .widget:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1000px;
    right: -1000px;
    background-color: #f5ebe0;
    content: ""
}

.widget_text {
    background-color: #fff
}

.widget_text:before {
    background-color: #fff!important
}

/**
 * ### Jetpack
 */

.jetpack_subscription_widget {
    text-align: center
}

.jetpack_subscription_widget:before {
    background-color: #2d282d!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

.jetpack_subscription_widget .widget-title {
    color: #c96
}

.jetpack_subscription_widget p {
    margin: 0;
    color: hsla(0, 0%, 100%, .8)
}

.jetpack_subscription_widget input[type=email] {
    width: 100%!important
}

.jetpack_subscription_widget input[type=submit] {
    width: 100%;
    color: rgba(29, 36, 42, .75);
    text-transform: uppercase;
    background-color: #c96
}

.jetpack_subscription_widget input[type=submit]:active,
.jetpack_subscription_widget input[type=submit]:focus,
.jetpack_subscription_widget input[type=submit]:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.jetpack_subscription_widget #subscribe-text {
    margin-bottom: 1.5rem
}

.jetpack_subscription_widget #subscribe-email,
.jetpack_subscription_widget #subscribe-submit {
    display: inline-block;
    width: 12.5rem;
    margin: .25rem;
    vertical-align: top
}

@media (min-width:37.5em) {
    .jetpack_subscription_widget #subscribe-email {
        width: 25rem
    }
}
/**
 * ## Social Media
 */
.list-social {
    *zoom: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center
}

.list-social:after,
.list-social:before {
    content: "";
    display: table
}

.list-social:after {
    clear: both
}

.list-social li {
    font-size: 1em;
    line-height: 1.25em;
    display: block;
    margin-top: 1rem;
    text-align: center
}

@media (min-width:24em) {
    .list-social li {
        width: 46%;
        display: inline-block
    }
}

@media (min-width:37.5em) {
    .list-social li {
        width: 30%;
        min-width: 12.5rem
    }
}

.list-social strong {
    display: block;
    color: inherit
}

.list-social a {
    position: relative;
    display: block;
    padding: 1rem 1.5rem;
    padding-top: 4.25rem;
    color: rgba(0, 0, 0, .8);
    border-radius: .1875rem;
    text-decoration: none
}

.list-social a:empty {
    display: none
}

.list-social a:before {
    transform: translateX(-50%) rotate(45deg);
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border: 6px double #614787;
    transition: all .1s ease
}

.list-social a:after,
.list-social a:before {
    position: absolute;
    top: 0;
    left: 50%;
    content: ""
}

.list-social a:after {
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 36px
}

.list-social a:active,
.list-social a:focus,
.list-social a:hover {
    text-decoration: none;
    color: hsla(0, 0%, 100%, .9);
    background-color: #614787
}

.list-social a:active:before,
.list-social a:focus:before,
.list-social a:hover:before {
    background-color: #c0b5cf;
    border-color: #c0b5cf
}

.list-social .social-twitter a:after {
}

.list-social .social-facebook a:after {
}

.list-social .social-instagram a:after {
}
/*
 * ## Text
 * 
 */
#text-5 {
    background-color: #fff
}

#text-3:before,
#text-4:before {
    background-color: #f5ebe0!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

@media (min-width:48em) {
    #text-3,
    #text-4 {
        position: relative
    }
    #text-3 .widget-title,
    #text-4 .widget-title {
        text-align: left
    }
    #text-3 p,
    #text-4 p {
        margin-bottom: 0;
        margin-right: 20rem;
        text-align: left
    }
    #text-3 .realistic-ticket,
    #text-4 .realistic-ticket {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: -20px
    }
}

.realistic-ticket {
    display: inline-block;
    min-width: 280px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 20px;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    transform: rotate(-5deg)
}

@media (min-width:48em) {
    .realistic-ticket {
        transform: rotate(-15deg)
    }
}

.realistic-ticket .realistic-ticket__part-left,
.realistic-ticket .realistic-ticket__part-right {
    position: relative;
    float: left;
    padding: 10px;
    height: 140px;
    background-repeat: no-repeat;
    background-size: 460px 140px;
    transition: all .15s ease
}

.realistic-ticket .realistic-ticket__part-left {
    width: 180px;
    background-position: 0 0;
    transform-origin: 100% 100%;
    border-right: 2px dotted #2d282d
}

.realistic-ticket .realistic-ticket__part-right {
    width: 100px;
    border-left: 2px dotted #2d282d;
    margin-left: -2px;
    background-position: 100% 0;
    transform-origin: 0 100%
}

.realistic-ticket .realistic-ticket__info-action,
.realistic-ticket .realistic-ticket__info-event,
.realistic-ticket .realistic-ticket__info-label {
    padding: 10px 15px;
    transition: all .15s ease
}

.realistic-ticket .realistic-ticket__info-label {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 0;
    bottom: 50%;
    color: rgba(29, 36, 42, .9)
}

.realistic-ticket .realistic-ticket__info-action {
    position: absolute;
    top: 50%;
    left: 10px;
    bottom: 10px;
    right: 0;
    color: #e6aa50;
    color: #c96
}

.realistic-ticket .realistic-ticket__info-event {
    position: absolute;
    top: 100%;
    left: 0;
    width: 140px;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    color: rgba(29, 36, 42, .9)
}

@media (min-width:48em) {
    .realistic-ticket:focus,
    .realistic-ticket:hover {
        transform: scale(1.1) rotate(-16deg)
    }
}

.realistic-ticket:focus .realistic-ticket__part-left,
.realistic-ticket:hover .realistic-ticket__part-left {
    transform: rotate(-2deg)
}

.realistic-ticket:focus .realistic-ticket__part-right,
.realistic-ticket:hover .realistic-ticket__part-right {
    transform: rotate(10deg)
}

.realistic-ticket:focus .realistic-ticket__info-action,
.realistic-ticket:hover .realistic-ticket__info-action {
    color: #e6aa50
}

/**
 * ## Page
 * ### Sponsors
 */
.page-slug-sponsors #content {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto
}

.page-slug-sponsors .entry-title {
    position: relative;
    margin-bottom: 2rem;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    text-align: center
}

.page-slug-sponsors .entry-title:before {
    width: 10rem;
    height: .125rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #c96;
    content: ""
}

.page-slug-attendees #content {
    max-width: 87.5rem;
    margin-left: auto;
    margin-right: auto
}

.page-slug-attendees .entry-title {
    position: relative;
    margin-bottom: 2rem;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    text-align: center
}

.page-slug-attendees .entry-title:before {
    width: 10rem;
    height: .125rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #c96;
    content: ""
}

.page-template-page-day-of #primary {
    display: none
}

.page-template-page-day-of #content-widgets .widget {
    border-top: 1px solid #f5ebe0;
    background: none!important
}

.page-template-page-day-of #content-widgets .widget:first-child {
    border-top: none
}

.page-template-page-day-of #content-widgets .widget:before {
    display: none
}

.page-template-page-day-of #content-widgets .widget .widget-title {
    font-size: 1.95312em
}

.page-template-page-day-of #content-widgets .widget .widget h2 {
    font-size: 1.5625em;
    line-height: 1.5625em
}

.page-template-page-day-of #content-widgets .widget .widget h3 {
    font-size: 1.25em;
    line-height: 1.5625em
}

.page-template-page-day-of #content-widgets .widget .widget h4 {
    font-size: 1em;
    line-height: 1.5625em
}

.page-template-page-day-of #content-widget-1 .widget:first-child {
    padding: 2rem 1rem
}

@media (min-width:37.5em) {
    .page-template-page-day-of #content-widget-1 .widget:first-child {
        padding: 4rem 2rem
    }
}

@media (min-width:48em) {
    .page-template-page-day-of #content-widget-1 .widget:first-child {
        padding: 6rem 3rem
    }
}

.page-template-page-day-of #content-widget-1 .widget:first-child .widget-title {
    font-size: 1.95312em
}

.page-template-page-day-of #content-widget-1 .widget:first-child p {
    font-size: 1.25em
}

.content-widgets-block {
    position: relative;
    background-color: #fff
}

.content-widgets-block:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1000px;
    right: -1000px;
    background-color: inherit;
    content: ""
}

#content-widget-1:before {
    background-color: #f5ebe0!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

#content-widget-2:before,
#content-widget-3:before,
#content-widget-4:before {
    border-top: 1px solid #f5ebe0
}

#content-widget-5 {
    text-align: center
}

#content-widget-5:before {
    background-color: #2d282d!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

#content-widget-5 .widget-title {
    color: #c96
}

#content-widget-5 p {
    color: hsla(0, 0%, 100%, .75)
}

#content-widget-5 strong {
    color: hsla(0, 0%, 100%, .9)
}
/**
 * ## Navigation
 */
.nav-anchor {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 1.5rem;
    text-align: center
}

.nav-anchor li {
    display: inline-block;
    margin: .125rem;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.25em;
    font-weight: 700;
    text-transform: uppercase
}

.nav-anchor a {
    display: block;
    padding: 1rem;
    min-width: 13.75rem;
    background-color: #c96;
    text-decoration: none;
    border-radius: .1875rem
}

.nav-anchor a,
.nav-anchor a:active {
    color: rgba(29, 36, 42, .9)
}

.nav-anchor a:focus,
.nav-anchor a:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.u-text-center {
    text-align: center
}

.u-text-left {
    text-align: left
}

.u-text-right {
    text-align: right
}

.assistive-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

img.emoji,
img.wp-smiley {
    display: inline!important;
    border: none!important;
    box-shadow: none!important;
    height: 1em!important;
    width: 1em!important;
    margin: 0 .07em!important;
    vertical-align: -.1em!important;
    background: none!important;
    padding: 0!important
}

.skip-link {
    padding: .25em .5em;
    color: rgba(29, 36, 42, .9);
    background-color: #fff;
    border-radius: .1875rem;
    box-shadow: 0 .0625rem .1875rem 0 rgba(0, 0, 0, .2);
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.skip-link:focus {
    position: relative;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
    position: absolute;
    z-index: 1;
    top: 1em;
    left: 1em;
    text-decoration: none
}

.alignleft,
.alignright {
    position: relative;
    max-width: none;
    width: 100%
}

@media (min-width:24em) {
    .alignleft,
    .alignright {
        top: .375rem;
        margin-bottom: 1.5rem;
        width: 36%
    }
}

@media (min-width:48em) {
    .alignleft,
    .alignright {
        top: .625rem;
        width: 44%
    }
}

@media (min-width:24em) {
    .alignleft {
        float: left;
        margin-right: 1.5rem
    }
}

@media (min-width:24em) {
    .alignright {
        float: right;
        margin-left: 1.5rem
    }
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5rem
}

.wp-caption img {
    margin-bottom: 0;
    max-width: none;
    width: 100%
}

.wp-caption p {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: .8em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .6)
}

.secondary-navigation {
    display: none
}

/**
 * # Customizations
 */