/*
Theme Name: VetsWare Classic
Theme URI: https://www.vetsware.nl
Description: VetsWare marketing site theme
Version: 1.0
Text Domain: vetsware
*/

@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:400,100,700);
html, body, h1, h2, h3, h4, h5, h6, fieldset, figure { margin: 0; padding: 0; border: none; }
html { height: 100%; }
html, body { overflow-x: hidden; }
p, ol, ul, fieldset, dl { margin-top: 0; margin-bottom: 1.26667em; }
img { display: block; max-width: 100%; }
[role="contentinfo"] .social ul, .payoffs ul, nav ul, .visuals { list-style: none; padding-left: 0; }
.grid-1, .logo, [role="contentinfo"] address, .payoffs li > *, .visuals li:before, .visuals li:after, .grid-2, .content, aside, .visuals, .grid-3, .grid-4, .column-height-3, .column-height-4 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.right { float: right; }
.invisible { visibility: hidden; }
.hidden { display: none; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
body { line-height: 1.26667; }
.normal, body, input, button, textarea, .payoffs h3 { font-weight: 400; }
.light, h1, .h1 { font-weight: 100; }
.bold, strong, b, h2, .h2, h3, .h3 { font-weight: 700; }
body, input, button, textarea { font-family: 'Alegreya Sans', sans-serif; font-size: 15px; color: #231f20; }
a { color: #6599bf; }
a:hover, a:focus { color: #004268; }
.content b, .content strong { color: #004268; }
h1, .h1 { font-size: 2.66667em; margin-bottom: 0.4em; margin-top: 0.4em; line-height: 1.2; text-transform: uppercase; color: #6599bf; }
@media screen and (max-width: 790px) { h1, .h1 { font-size: 2.13333em; } }
h2, .h2 { font-size: 1em; margin-bottom: 0.4em; line-height: 1.2; color: #6599bf; }
h3, .h3 { font-size: 1em; line-height: 1.2; color: #6599bf; }
small, .small, .meta { font-size: 0.86667em; color: #666666; }
.underline { text-decoration: underline; }
.container em { color: #666666; }
hr { margin: 0 0 1.26667em 0; border: none; background-color: #e9c91a; height: 1px; }
.centered-container, .container { margin-left: auto; margin-right: auto; }
.max-width, .centered-container, .container { max-width: 1000px; }
@media screen and (max-width: 1040px) { .max-width, .centered-container, .container { max-width: 750px; } }
@media screen and (max-width: 790px) { .max-width, .centered-container, .container { max-width: 500px; } }
@media screen and (max-width: 540px) { .max-width, .centered-container, .container { max-width: 250px; } }
.outlined, .logo, [role="banner"], [role="contentinfo"] address, .payoffs li > *, .visuals { border: 5px solid white; }
.container { padding-bottom: 2em; }
.container:after { content: ''; display: block; clear: both; }
.grid-1, .logo, [role="contentinfo"] address, .payoffs li > *, .visuals li:before, .visuals li:after, .grid-2, .content, aside, .visuals, .grid-3, .grid-4 { float: left; width: 100%; }
.grid-1.right, .right.logo, [role="contentinfo"] address.right, .payoffs li > .right, .visuals li.right:before, .visuals li.right:after, .grid-2.right, .right.content, aside.right, .right.visuals, .grid-3.right, .grid-4.right { float: right; }
.block-1, .logo, [role="contentinfo"] address, .payoffs li > *, .visuals li:before, .visuals li:after { min-height: 250px; }
.block-2 { min-height: 500px; }
.block-3 { min-height: 750px; }
.block-4 { min-height: 1000px; }
@media screen and (max-width: 540px) { .block-1, .logo, [role="contentinfo"] address, .payoffs li > *, .visuals li:before, .visuals li:after { mine-height: 0; } }
.grid-container:after, main:after, [role="contentinfo"]:after { content: ''; display: block; clear: both; height: 0; }
.column-height-3 { height: 750px; }
.column-height-4 { height: 1000px; }
.grid-1, .logo, [role="contentinfo"] address, .payoffs li > *, .visuals li:before, .visuals li:after { width: 250px; }
.grid-2, .content, aside, .visuals { width: 500px; }
.grid-3 { width: 750px; }
.grid-4 { width: 1000px; }
@media screen and (max-width: 540px) { .hide-mobile { display: none !important; } }
.show-mobile { display: none; }
@media screen and (max-width: 540px) { .show-mobile { display: block; } }
html { background-color: #e9c91a; background-image: url('bg.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 100%; }
.centered-container, .container { background-color: #fff; padding: 5px; position: relative; }
main { position: relative; }
.content { padding: 0 10px; float: right; }
@media screen and (max-width: 790px) { .content { width: 250px; min-height: 0 !important; } }
ul, ol { padding-left: 1em; }
.logo { display: inline-block; background-image: url('logo.png'); background-repeat: no-repeat; background-position: center center; background-size: 234px auto; background-color: #fff; text-decoration: none; }
.logo * { visibility: hidden; }
[role="banner"] { position: relative; }
[role="banner"] .logo { position: absolute; top: 100%; margin-top: 10px; left: 0; z-index: 3; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95); opacity: 0.95; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; }
[role="banner"] .logo:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
@media screen and (max-width: 790px) { [role="banner"] { position: absolute; width: 250px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 2; border-bottom-width: 10px; }
  [role="banner"] .logo { border: none; position: static; margin: 0; width: auto; min-height: 180px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } }
@media screen and (max-width: 540px) { [role="banner"] { position: static; }
  [role="banner"] .logo { min-height: 100px; background-size: 140px auto; background-position: -10px -10px; } }
[role="contentinfo"] address { color: #fff; font-size: 1.13333em; font-style: normal; background-color: #6599bf; padding: 10px; }
[role="contentinfo"] address a { color: #fff; }
[role="contentinfo"] address [href^="tel:"] { text-decoration: none; cursor: text; }
@media screen and (max-width: 540px) { [role="contentinfo"] address [href^="tel:"] { text-decoration: underline; cursor: pointer; } }
@media screen and (max-width: 540px) { [role="contentinfo"] address { min-height: 0; } }
[role="contentinfo"] .social { position: absolute; z-index: 3; right: 10px; top: 10px; }
[role="contentinfo"] .social h3 { display: none; }
[role="contentinfo"] .social ul { margin: 5px; }
[role="contentinfo"] .social li { float: left; margin-left: -.6em; width: 28px; height: 28px; border-radius: 50%; background-color: #88c1d8; }
[role="contentinfo"] .social a { position: relative; display: block; width: 22px; height: 22px; margin: 3px 0 0 3px; border-radius: 50%; background-color: #004268; text-indent: 100%; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden; }
[role="contentinfo"] .social a:hover { z-index: 2; }
[role="contentinfo"] .social a:hover { background-color: #00324e; }
.payoffs { display: inline; }
.payoffs ul { margin: 0; }
.payoffs li > * { padding: 10px; background-color: #004268; }
.payoffs h3 { text-transform: uppercase; color: #fff; }
@media screen and (max-width: 790px) { .payoffs h3 { float: right; } }
@media screen and (max-width: 540px) { .payoffs h3 { min-height: 0; } }
.payoffs h3 em { display: block; width: 70%; font-size: 1.66667em; line-height: 1; font-style: normal; }
.payoffs span { background-size: cover; background-repeat: no-repeat; }
@media screen and (max-width: 1040px) { .payoffs h3 + span { display: none; } }
nav { background-color: #004268; }
nav ul { margin: 0; }
nav li { display: inline-block; }
nav .logout, nav .clients { float: right; }
@media screen and (max-width: 790px) { nav .logout, nav .clients { float: none; } }
nav a { display: block; color: #fff; text-decoration: none; text-transform: uppercase; white-space: nowrap; padding: 10px; }
nav a.active, nav a:hover { color: #e9c91a; }
nav a:focus { color: #fff; }
nav .menu-trigger { display: none; clear: both; padding: 10px 10px 5px 10px; }
nav .menu-trigger:before { content: '\2630'; display: inline-block; margin-right: .5em; }
@media screen and (max-width: 540px) { nav .menu-trigger { display: block; } }
@media screen and (max-width: 540px) { nav { padding: 0 0 5px 0; }
  nav a { padding: 5px 10px; }
  nav ul { max-height: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; overflow: hidden; }
  nav ul:target, nav ul.target { max-height: 1000px; } }
.visuals { margin: 0; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; }
@media screen and (max-width: 1040px) { .visuals { width: 250px; } }
@media screen and (max-width: 790px) { .visuals { top: 180px; } }
@media screen and (max-width: 540px) { .visuals { display: none; } }
.visuals:after, .visuals:before { content: ''; position: absolute; z-index: 3; }
@media screen and (max-width: 790px) { .visuals:after, .visuals:before { display: none; } }
.visuals:after { left: 0; right: 0; top: 240px; height: 10px; background-color: white; box-shadow: 0 250px 0 0 white, 0 500px 0 0 white; }
.visuals:before { background-color: white; width: 10px; left: 240px; top: 0; bottom: 0; }
.visuals li { width: 100%; height: 100%; background-size: cover; background-position: 100% 50%; }
@media screen and (max-width: 790px) { .visuals li { background-position: 50% 100%; } }
.visuals li:before, .visuals li:after { content: ''; position: absolute; z-index: 2; }
@media screen and (max-width: 790px) { .visuals li:before, .visuals li:after { display: none; } }
.visuals li:before { left: 250px; top: 250px; background-color: rgba(233, 201, 26, 0.2); }
.visuals li:after { left: 0; top: 500px; background-color: rgba(255, 255, 255, 0.4); }
.toggle + .toggleable { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; max-height: 0; overflow: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
.toggle.active + .toggleable { max-height: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
input, button, .button { border: 1px solid #666; border-radius: 3px; font-size: 1.06667em; }
label { display: block; position: relative; padding-left: 12em; margin-bottom: 1.26667em; }
label strong { position: absolute; left: 0; top: 0; width: 10em; }
button, .button { color: #fff; background-color: #6599bf; border-color: #6599bf; cursor: pointer; }
button:hover, .button:hover { background-color: #004268; border-color: #004268; }
.buttons { padding-left: 12em; }
@media screen and (max-width: 790px) { label, .buttons { padding-left: 0; }
  label { padding-top: 1.26667em; } }

/* WordPress: current menu item highlight */
nav .current-menu-item > a,
nav .current-page-ancestor > a { color: #e9c91a; }

/* WordPress: last nav item (Klanten) floats right */
nav ul li:last-child { float: right; }
@media screen and (max-width: 790px) { nav ul li:last-child { float: none; } }