/*

  Swinlike styles.  A stable stylesheet that can be used to easily give pages
  the feel of Swinburne styles without committing to a whole page layout.

  Updates to this style need to be thoroughly tested to not have side effects.
  A pleasant appearance with thematic consistency with Swinburne style is
  prioritised over strict adherence.

  Use of the .swinlike-* classes is optional and without using these all this
  stylesheet does is affect styling of regular HTML in a way that shouldn't break
  expectations.

*/

/* Google fonts */
/* Open licensed fonts are used so nobody needs worry about licensing, substitute fonts are chosen if necessary */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* Main */

body {
    font: 300 16px/1.5 'Open Sans', sans-serif;
    background: #fff;
    color: #000;
}

body.swinlike-body {
    margin: 0;
}

/* Links */

a {
    border-bottom: 1.4px solid;
}

a, a:hover, a:active, a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover {
    opacity: 0.67;
}

/* Headings */

h1, h2, h3 {
    font: 300 36px/1.2 Barlow, 'Open Sans', sans-serif;
    margin-bottom: 30px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 26px;
}

@media(min-width:640px) {
    h1 { font-size: 61px }
    h2 { font-size: 40px }
    h3 { font-size: 31px }
}


/* Header */

header.swinlike-header {
    height: 98px;
    background: no-repeat #fff top left / 176px url(logo-hi.png);
    padding-left: 176px;
    position: relative;
    overflow: auto;
}

header h1, header h2, header h3 {
    font: 400 22px/1.5 Barlow, 'Open Sans', sans-serif;
    margin: 10px 21px;
}

header a {
    border-bottom: none;
}

header.swinlike-header header {
    background: #242323;
    color: #d1d1d1;
    height: 34px;
    font: 400 13px/34px 'Open Sans', sans-serif;
    padding-left: 21px;
}

/* Buttons */

.swinlike-button, .swinlike-button-secondary, .swinlike-button-featured {
    font: 400 12px/1.5 Barlow, 'Open Sans', sans-serif;
    border-radius: 3px;
    border: none;
    padding: 13.5px 20px 16.5px;
    background: #d5d6db;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.swinlike-button:hover, .swinlike-button-secondary:hover, .swinlike-button-featured:hover {
    opacity: 0.9;
    border-bottom: 3px solid rgba(0,0,0,.25);
    padding-bottom: 13.5px;
}

.swinlike-button {
    background: #343642;
    color: #fff;
    padding-right: 40px;
    position: relative;
}

.swinlike-button-featured {
    background: #dc2d27;
    color: #fff;
}

.swinlike-button::after {
    content: '\1f852';
    position: absolute;
    top: 10px;
    right: 19px;
    font-size: 17px;  
}

.swinlike-buttonrow { 
    margin: 2em 0;
}

/* Containers */

.swinlike-container, .swinlike-featurebox {
    padding: 21px 25px 25px;
    background: #fff;
    color: #000;
    max-width: 1280px;
    margin: 0 auto;
}

@media(min-width:640px) {
    .swinlike-container, .swinlike-featurebox { padding: 44.8px 50px 50px }
}

.swinlike-featurebox {
    background: rgba(52,54,66,.9);
    color: #fff;
}

.swinlike-container > *:first-child, .swinlike-featurebox > *:first-child {
    margin-top: 0;
}