/* Reset ------------ */

body,div,header,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:bold;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

/* Styles ------------ */

* {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; *behavior:url('/css/boxsizing.htc');}

html {min-height:100%; height:100%; width:100%;}
body {background:#fff; color:#000; font:14px/1.4 'Open Sans', Arial, sans-serif; height:100%; min-height:100%; width:100%; -webkit-text-size-adjust:100%;}

hr {clear:both; border:0; border-bottom:5px solid #ddf0f7; height:0px; margin:20px 0; padding:0; width:100%;}
em {font-style: italic;}

a {color:#333;}

.container {max-width:1250px; width:90%; margin:0 auto; clear:both;}

header {display:block; width:100%; background:#09478f; color:rgba(255,255,255,0.5); overflow:hidden; text-align:left;}
header .heading {float:left; width:50%; padding:40px 0; overflow:hidden; background:url('images/liam-flynn-mark.png') 0px 10px no-repeat; background-size:contain;}
header h1 {color:#fff; margin-left:32%; font-size:24px; text-transform: uppercase; font-weight:bold;}
header h2 {color:#fff; margin-left:32%; opacity: 0.5; font-size: 15px;}
header h1 a, header h2 a {color:#fff; text-decoration:none;}
header ul a {color:rgba(255,255,255,0.7); text-decoration: none;}
header ul a:hover {color:rgba(255,255,255,1);}

header ul.contacts {float:right; width:40%; padding-top:40px}
header ul.contacts li {margin:5px 0; float:left; width:40%;}
header ul.contacts li i {margin-right:5px; opacity: 0.7;}

nav {background:rgba(0,0,0,0.1); overflow:hidden; width:100%; padding:7px 0; text-align: center; font-size:13px;}
nav ul {text-align: center;}
nav ul li {display:inline-block; border-left:1px solid rgba(255,255,255,0.2);}
nav ul li:first-child {border-left:0;}
nav ul li a {display:block; padding:6px 20px /* 8px */ /* 12px */; color:#fff; text-decoration: none; opacity: 0.8;}
nav ul li a:hover {opacity:1;}
nav ul li a.selected {font-weight:bold; opacity:1;}

.response {margin:0; padding:15px; background:#ffc; z-index:5;}
.response p {margin:0; padding:0; background:transparent; font-weight:bold; text-align:center; font-size:18px;}
.response p i {color:#1999c7; margin-right:5px;}

.hero {min-height:600px; background:#09478; background-position:50% 50%; background-size:cover; background-attachment:fixed; display:block; overflow:hidden;}
.hero.sub {min-height:400px;}

h2 {font-size:30px; color:#1999c7; text-transform: uppercase;}
h3 {font-size:25px; color:#43586f; font-weight: normal; margin:15px 0; text-align:center;}
h3 span {color:#43586f; opacity:0.6;}
h4 {color:#43586f; font-size:24px; opacity:0.6; margin:10px 0; text-align: center; font-weight:normal;}

section {overflow: hidden; padding:40px 0;}
section p {margin:10px 0; font-size:18px;}
section ul {list-style:square; margin:20px 0 20px 50px;}
section li {margin:10px 0; font-size:18px;}
section ol {list-style:decimal; margin:20px 0 20px 50px;}

.home-promo {background:#f7f7f7; padding:60px 0;}
.home-promo-inner {/*width:700px; */max-width:100%; border-radius:5px;}
.home-promo-inner h4 {margin:0 0 20px 0; color:#900; font-size:28px; opacity:1; text-align:center;}
.home-promo-inner p.snip {margin:auto auto 20px auto;}
.home-promo-inner p.more {text-align:center;}
.home-promo-inner p.more a {display:inline-block; padding:8px 30px; background:#09478f; border-radius:5px; color:#fff; text-decoration:none;}
.home-promo-inner p.more a:hover {background:#1999c7;}

.videocardsouter {background:#09478f; padding:60px 0;}
.videocards {width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.videocards h4 {font-size:35px; color:#fff; margin:30px auto 20px auto; text-align: center; width:100%;}
.videocard {flex:1 1; margin:15px; padding:0; background:#fff; border-radius:5px; position:relative;}
.videocard h3 {margin:0; font-size:15px; font-weight:bold; background:#1999c7; color:#fff; padding:0;}
.videocard h3 a {padding:15px 10px; text-decoration: none; display:block; color:#fff;}
.videocard h3 a:hover {text-decoration: none; opacity:0.9;}
.videocard h6 {background:#1999c7; color:#fff; font-size:20px; text-align: center; border-radius:50%; line-height:50px; height:50px; width:50px; position:absolute; right:-10px; bottom:40px;}
.videocard p {margin:10px 0; padding:15px; font-size:16px;}
.videocard ul {list-style:none; margin:15px; padding:0;}
.videocard ul li {font-size:12px; margin:0; padding:5px 0; border-top:1px solid #eee;}

.content {width:65%; float:left;}

.pullimage {width:30%;}
.pullimageleft {float:left; margin-right:5%;}
.pullimageright {float:right; margin-left:5%;}
.pullimage img {width:100%; margin-bottom:10px;}
.pullimage .caption {margin:-7.5px 0 12px 0; font-size:11px; line-height:140%; color:rgba( 0,0,0, .5 );}
.pullimage cite {opacity:0.8; display: block; margin:0 0 20px 0; font-style: italic;}

a.button {background:#09478f; border-radius: 5px; display: inline-block; margin:20px 0; padding:10px 20px; font-size:16px; text-transform: uppercase; color:#fff; text-decoration: none;}
a.button:hover {opacity: 0.7;}

blockquote {clear:both; font-size:20px; margin:40px 0;}
blockquote .container { background:#1999c7; padding:30px;}
blockquote p {color:#fff;}
blockquote p.source {font-size:16px; margin-top:10px; opacity:0.5;}

ul.servicesindex {list-style:none; text-indent:0; margin:30px 0; padding:0; overflow:hidden; text-align: center;}
ul.servicesindex li {width:32%; float:left; margin-right:2%;}
ul.servicesindex li:nth-child(3n) {margin-right:0;}
ul.servicesindex li a {color:#fff; padding:20px; background:#09478f; min-height: 5em; border-radius: 5px; text-decoration: none; display:block; text-align: center;}
ul.servicesindex li a:hover {background:#1999c7;}

img.headshot {float:right; max-width:25%; margin:0 0 40px 40px;}

footer {display:block; width:100%; margin-top:80px; padding:30px 0 50px 0; background:#eee; color:rgba(0,0,0,0.8); overflow:hidden; text-align:left;}
footer .container {max-width:600px;}
footer .brand {float:left; width:30%; max-width:170px;}
footer .footing {margin-left:35%;}
footer .footing .brand {display:none;}
footer p {font-size:16px;}
footer p a {text-decoration: none;}
footer p a:hover {color:#09478f;}
footer p i {margin-left:5px;}
footer ul {font-size:16px; margin:20px 0 20px 0;}
footer ul a {color:#000; opacity:0.7; text-decoration: none;}
footer ul a:hover {color:#09478f; opacity:1;}
footer ul.contacts li {margin:5px 0;}
footer ul.contacts li i {margin-right:5px; opacity: 1; color:#1999c7;}

body.videos-body {display:flex; flex-direction:column;}
body.videos-body header {overflow:visible; margin-top:0;}
body.videos-body footer {overflow:visible; margin-top:0;}
body.videos-body section.videos {overflow:visible; flex:1;}

.content.login {width:100%;}
.login form {display:flex; flex-direction:column; align-items:center; width:50%; margin:0 auto; padding:20px; background:rgba( 0,0,0, .05 );}
.login .field {display:flex; flex-direction:column; align-items:flex-start; margin:0 0 12px 0;}
.login .field label {margin:0 0 5px 0;}
.login .field input[type="text"],
.login .field input[type="email"],
.login .field input[type="password"] {width:250px; max-width:100%; padding:8px; border:1px solid rgba( 0,0,0, .4 ); border-radius:3px;}
.login button {padding:10px 16px; background:#09478f; border:0; border-radius:3px; color:#fff; line-height:1em; cursor:pointer;}

.logout {margin-bottom:15px; text-align:right;}
.logout a {display:inline-block; padding:6px 12px; background:rgba( 0,0,0, .05 ); border-radius:3px; text-decoration:none;}
.logout a:hover {background:rgba( 0,0,0, .1 );}

section.videos {padding:40px 0; background:rgba( 0,0,0, .03 );}
section.videos h2 {margin-bottom:20px;}

section.videos-search {}
section.videos-search .video .thumbnail {width:100%;}
section.videos-search .video .thumbnail img {width:100%; height:auto;}


.content.videos {width:100%;}
.content.videos h2 {text-align:center;}

.thumbnail-placeholder {width:100%; aspect-ratio:5/3; background:rgba( 0,0,0, .05 ); border-radius:3px;}

.video-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:30px;}
.video-grid .video,
.video-grid .cat {display:flex; flex-direction:column; width:400px; padding:0; background:rgba( 0,0,0, .0 ); border-radius:5px; text-decoration:none;}
.video-grid .video h3,
.video-grid .cat h3 {margin:0; font-weight:600; font-size:18px; line-height:140%;}
.video-grid .video h3.long,
.video-grid .cat h3.long {font-size:18px; line-height:140%;}
.video-grid .video h4 {margin:0; color:rgba( 0,0,0, .65 ); font-size:16px; line-height:140%;}
.video-grid .video .thumbnail,
.video-grid .cat .thumbnail {flex:1; width:100%; border-radius:5px;}
.video-grid .video .thumbnail img {display:block; width:100%; min-height:100px; border-radius:5px;}
.video-grid .cat .thumbnail img {max-width:100%; height:auto; border-radius:5px;}
.video-grid .video .text,
.video-grid .cat .text {display:flex; flex-direction:column; gap:5px; padding:20px;}

.content.videocat-page {width:100%;}
.videocat-page {width:100%; text-align:center;}
.videocat-page iframe {width:700px; height:400px; border:0;}
.videocat-page .cat-info {display:inline-block; max-width:600px; margin:10px 0 15px 0; padding-bottom:15px; border-bottom:1px solid rgba( 0,0,0, .05 );}
.videocat-page .cat-info.wide {max-width:900px;}
.videocat-page .video {display:flex; flex-direction:column; align-items:center; justify-content:flex-end; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba( 0,0,0, .05 );}
.videocat-page .video:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}
.videocat-page .video .info {display:inline-block; max-width:600px; margin:10px 0 0 0;}
.videocat-page .video .info p {margin:0 0 10px 0;}
.videocat-page .video .info p:last-child {margin-bottom:0;}

.video-search {display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;}
.video-search form {display:flex; align-items:center; justify-content:center; gap:10px; width:100%;}
.video-search input[type="text"] {width:280px; padding:8px; border:1px solid rgba( 0,0,0, .3 ); border-radius:5px;}
.video-search button {margin:20px 0; padding:8px 20px; background:rgba(9,71,143, 1); border:0; border-radius:5px; font-size:14px; line-height:140%; text-transform:uppercase; color:white; text-decoration:none; cursor:pointer;}
.video-search button:hover {background:rgba(9,71,143, .8);}
.video-search p {color:rgba( 0,0,0, .5 );}

.content.video-page {width:100%;}
.video-page {width:100%; text-align:center;}
.video-page iframe {width:700px; height:400px; border:0;}
.video-page .video .info {display:inline-block; max-width:600px; margin:20px 0 0 0;}

.showcase-link {margin-top:20px; text-align:center; font-size:16px; line-height:140%;}
.showcase-link a.inverse {display:inline-block; padding:10px 20px; background:#ffc; border:1px solid rgba( 0,0,0, .075 ); border-radius:5px; text-decoration:none;}
.showcase-link a.inverse u {text-decoration:underline;}
.showcase-link a.inverse:hover u {text-decoration:none;}

.grid {display:grid;}
.grid .video iframe {width:100%; height:26vw;}
.videocat-page .grid .video:last-child {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba( 0,0,0, .05 );}

@media (max-width: 800px) {
  
    .login form {width:100%;}

    .videocat-page iframe {max-width:100%; height:53vw;}
    .videocat-page h2 {text-align:center;}
    .videocat-page h3 {text-align:center;}
    .videocat-page h4 {text-align:center;}
    .videocat-page .video {margin-bottom:35px;}
    .videocat-page .logout {margin-bottom:35px;}
  
    .video-page iframe {max-width:100%; height:53vw;}
    .video-page h3 {text-align:center;}
    .video-page .logout {margin-bottom:35px;}
    
    .content.videos h2 {text-align:center;}
    .content.videos h3 {text-align:center;}
    .video-grid .video h3 {text-align:center;}
    
    .grid {display:flex; flex-direction:column;}
    .grid .video iframe {height:50vw;}

    .extraneous {display: none;}
    header .heading {width:100%; padding:20px 0; background:url('images/liam-flynn-mark.png') 100% 0% no-repeat; background-size:contain;}
    header h1 {margin-left:0%;}
    header h2 {margin-left:0%;}
    header ul.contacts {display:none;}

    nav {background:rgba(0,0,0,0.1); overflow:hidden; width:100%; padding:7px 0; text-align: left; font-size:14px;}
    nav ul {text-align: left;}
    nav ul li {display:block; width:100%; border-left:0; border-top:1px solid rgba(255,255,255,0.1);}
    nav ul li:first-child {border-top:0;}
    nav ul li a {display:block; padding:3px 0; color:#fff; text-decoration: none; opacity: 0.8;}

    .videocard {flex:1 1 40%;}

    a.button {font-size:14px;}

    footer .brand {display: none;}
    footer .footing {clear:both; width:100%; margin:0;}
    footer .footing .brand {float:right; max-width:80px; display:block; margin:0 0 30px 30px;}
    footer ul, footer p {font-size:14px;}

    .hero {min-height:300px; background-attachment: scroll;}
    .hero.sub {display:none;}

    blockquote {font-size:16px; margin:20px 0;}
    blockquote .container {padding:20px;}
    blockquote p.source {font-size:14px;}

    h2 {font-size:25px; text-align:left;}
    h3 {font-size:18px; margin:20px 0; text-align:left;}
    h4 {font-size:18px; text-align:left;}

    .pullimage {width:100%;}
    .pullimageleft {float:left; width:100%; margin-right:0;}
    .pullimageright {float:left; width:100%; margin-left:0;}
    .content {width:100%; float:left;}
    .content h2 {margin-top:20px; font-size:20px;}
    section {margin:20px 0;}
    section p, section li {font-size:14px;}

}

@media ( max-width: 800px ){

  section {padding-top:0;}
  section .container {display:flex; flex-direction:column;}
  section .container .pullimageleft {order:2; margin-top:30px;}
  section .container .content {order:1;}

}

@media (max-width: 600px) {
    .videocard {flex:1 1 100%;}
}

@media (max-width: 800px) {

    .extraneous {display:inline;}

}