html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
}

.hidden-mobile{
	display: none;
}

.visible-mobile{
	display: inline-block;
}

.visible-medium{
	display: none;
}

.visually-hidden {
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

body{background-image: url('../img/squairy_light.jpg');
	background-repeat: repeat;
}

header{
	background-color: #fff;
	border-top: solid 8px #11469a;
}

.container {max-width: 1280px;
	margin: 0 auto;
}

.header-logo-block{
	padding: 0px 20px;
}

.header-logo{
	max-width: 80%;
	height: auto;
	margin: 20px auto;
}


.header-cta{
	text-align: center;
	color: #11469a;
	margin-bottom: 20px;
}




/*  --- NAVIGATION ---  */

.custom-wrapper {
    background-color: #6cacdd;
    height: auto;
    -webkit-transition: height 0.5s;
    overflow: visible;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
    transition: height 0.5s;
}


@media screen and (min-width: 35em) {
    .custom-wrapper {
        height: auto;
        overflow: visible;
    }
}

.custom-wrapper.open {
    height: 800%;
    border-bottom: 2px solid #fff;
}

.custom-toggle {
    width: 34px;
    height: 52px;
    display: block;
    display: none;
    color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	margin: 0 auto;
	padding-top: 14px;
}

.custom-toggle:hover{
	color: #002157;
}

.custom-wrapper .pure-u-1{
	display: block !important;
}

.pure-menu.pure-menu-horizontal.custom-can-transform{
	text-align: center;
}

.pure-menu-list{
	margin: 0;
	width: 100%;
}

.custom-wrapper .pure-menu-list { 
    white-space: normal;
    display: block;
}

li.pure-menu-item:last-child{
	/*border-top: 2px solid #fff;*/
	background-color: #39b54a;
}

li.pure-menu-item a{
	font-size: 100%;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	padding: 10px;
}

.pure-menu-list li.pure-menu-item a:hover{
	color: #002157;
	background-color: transparent;
}

.pure-menu-list li.current a{
	color: #002157;
}

.custom-wrapper li.pure-menu-item {
    display: block;
}

@media screen and (min-width: 35em) {
    .custom-wrapper li.pure-menu-item {
        display: inline-block;
    }
}



/*  --- TYPOGRAPHY ---  */

h1{
	font-size: 200%;
	font-weight: 900;
	text-transform: uppercase;
	color: #002157;
}

h2{
	font-size: 200%;
	font-weight: 700;
	color: #11469a;
}

h3{
	font-size: 125%;
	font-weight: 700;
	margin-bottom: 0;
}

h4{
	font-size: 150%;
	font-weight: 300;
	margin: 0;
}

h5{
	font-size: 100%;
	font-weight: 300;
	margin: 0;
	color: #11469a;
}

h5 a{
	text-transform: uppercase;
	color: #11469a;
	font-weight: 700;
}

h5 a:hover{
	color: #002157;
}

h6{
	font-size: 75%;
	font-weight: 300;
	line-height: 150%;
	margin: 10px 0px;
}

h6 a{
	color: #fff;
	text-decoration: none;
}

h6 a:hover{
	text-decoration: underline;
}

p{
	font-family: 'Merriweather', serif;
	line-height: 150%;
}

p a{
	text-decoration: none;
}

p a:hover{
	text-decoration: underline;
}




/*  --- BUTTONS ---  */

.button{
	margin: 40px;
}

.button a{
	font-size: 85%;
	border: solid 1px #11469a;
	border-radius: 2px;
	padding: 10px 20px;
	font-weight: 700;
	color: #11469a;
	text-decoration: none;
}

.button a:hover{
	background-color: #f0f0f0;
}

.feature-2 .button a{
	border-color: #771114;
	color: #771114;
}

.button-cta{
	margin: 40px 0px;
}

.button-cta a{
	color: #fff;
	background-color: #39b54a;
	font-size: 85%;
	border-radius: 2px;
	padding: 10px 20px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 1px 1px 4px #002157;
	text-transform: uppercase;
}

.button-cta a:hover{
	color: #002157;
}




/*   --- 16:9 VIDEO ---   */

.videoWrapper{
	position: relative;
	padding-bottom: 56.25%; 
	padding-top: 25px;
	height: 0;
	margin: 20px 10px;
}

.videoWrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}




/*  --- FOOTER ---  */

.footer-contact-bar{
	background-color: #002157;
	color: #fff;
}

.footer-contact-bar-content{
	padding: 0px 10px;
}

.social-callout{
	margin-bottom: 20px;
}

.facebook{
	font-size: 75%;
	font-weight: 300;
	line-height: 150%;
	margin: 10px 0px;
}

.facebook a{
	color: #fff;
	text-decoration: none;
}

.facebook a:hover{
	text-decoration: underline;
}

.icon-facebook{
	width: 32px;
	height: 32px;
	padding-left: 10px;
	vertical-align: middle;
}

.footer-copyright-bar{
	background-color: #11469a;
	color: #fff;
}

.footer-copyright-bar-content{
	padding: 0px 10px;
}

.footer-contact__social-button {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    border-radius: 100%;
    text-align: center;
    position: relative;
    margin:0.125rem;
}

.footer-contact__social-button--facebook {
    background-color: #1877f2;
}

.footer-contact__social-button--twitter {
    background-color: #55acee;
}

.footer-contact__social-button--instagram {
    background-color: #d93175;
    background-image: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

.footer-contact__social-button--youTube {
    background-color: #FF0000;
}

.footer-contact__social-button .iconic {
    fill:white;
    stroke:white;
    display: inline-block;
    position: relative;
    top: 50%;
    margin: 0;
    padding: 0;
    width: 1rem;
    height: 1rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}




/*  --- HOMEPAGE ---  */

.homepage-intro{
	text-align: center;
	padding: 40px 10px;
}

.introduction__content {
    font-family: 'Lato', sans-serif;
    font-size: 150%;
    font-weight: 300;
    margin: 0;
}

hr{
	background-color: #6cacdd;
	height: 2px;
	border: none;
	width: 40%;
	margin-bottom: 20px;
}

.text-hr{
	background-color: #000;
	height: 1px;
	border: none;
	width: 100%;
	margin: 40px 0px;
}

.feature-block{
	margin-top: 90px;
}

.feature-text{
	background-color: #fff;
	text-align: center;
	max-width: 90%;
	margin: 0 auto;
	padding: 10px;
	border: solid 2px #11469a;
}

.feature-text img{
	margin-top: -60px;
	width: 100px;
	height: 100px;
}

.feature-2{
	border: solid 2px #771114;
}

.feature-2 h2{
	color: #771114;
}

.color-block{
	background: url('../img/squairy_dark.jpg');
	margin-top: 60px;
}

.color-block-content{
	padding: 30px 10px 50px 10px;
}

.color-block-content h2, .color-block-content p{
	color: #fff;
}

.sponsor-block{
	background-color: #fff;
}

.sponsor-block-content{
	padding: 40px 10px;
	text-align: center;
	margin: 0 auto;
}

.sponsor-block img{
	max-width: 250px;
	margin-top: 20px;
}




/*  --- SUBPAGES ---  */

.secondary-nav{
	padding: 5px;
}

.pure-menu-item.secondary-nav-item{
	margin: 0;
	padding: 0;
	background-color: #fff;
	margin-bottom: 5px;
	text-align: center;
	float: left;
	width: 49%;
	margin: 1px;
	box-shadow: 1px 1px 3px #11469a;
}

li.pure-menu-item.secondary-nav-item:last-child{
	float: left;
	border: none;
}

li.pure-menu-item.secondary-nav-item:last-child a{
	color: #fff;
}

li.pure-menu-item.secondary-nav-item:last-child a:hover{
	color: #002157;
}

.secondary-nav-item a.pure-menu-link{
	color: #11469a;
	font-size: 75%;
}

.secondary-nav-item:hover{
	background-color: #ccc;
}

.secondary-nav-list li.current{
	background-color: #ccc;
}

.main-content{
	padding: 10px;
	margin-bottom: 60px;
}

.testimonial-block{
	background: url('../img/squairy_dark.jpg');
	margin-top: 60px;
}

.testimonial-block-content{
	text-align: center;
}

.testimonial-block-content h2, .testimonial-block-content p{
	color: #fff;
}

.testimonial-block-content p{
	padding: 10px 50px 20px 50px;
}

.testimonial-block-content img{
	border-radius: 50%;
	border: 2px solid #fff;
	margin: 20px 0px 0px 0px;
	max-width: 60%;
	height: auto;
}


/*  ---  GOOGLE MAP  ---  */

.google-maps {
        position: relative;
        padding-bottom: 75%; 
        height: 0;
        overflow: hidden;
        margin: 20px;
}
    
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100% !important;
        height: 100% !important;
}







/* -------  Directory Styles added by Rachel  ------- */
.directory-user {
    margin-bottom: 2.5rem;
}

h3.directory-username {
    margin-top: .5rem;
}

.directory-action-buttons {
    margin: .6em 0;
}

a.button-view, a.button-submit {
    color: white;
    padding: .3rem .5rem;
    margin-right: .5rem;
    text-decoration: none;
}

a.button-view {
    background: #6cacdd;
}

a.button-submit {
    background: #39b54a;
}


/*New Directory*/

.directory-list__order-buttons {
    margin: 0;
    border: none;
    padding: 0.75rem;
    background-color:#FFF;
    border:0.125rem solid #6cacdd;
    display:inline-block;
}

.directory-list__order-button {
    /* Default Button - Removes default CSS */
    border: none;
    background: transparent;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    width: 100%;
    padding: 10px 20px;
    background-color: #6cacdd;
    border-radius: 0;
    border:0.063rem solid #5393C4;
    border-bottom-width:0;
    /*box-shadow: 0 1px 2px rgba(57,121,170, 0.75);*/
    color:#FFF;
    text-transform:uppercase;
    font-size:85%;
    font-weight:700;
    text-shadow:0.063rem 0 0.125rem #5393C4;
    margin:0;
    transition-duration:0.2s;
    transition-timing-function:ease-in;
}

.directory-list__order-button:hover, .directory-list__order-button:focus{
    color:#002157;
}
  
.directory-list__order-button:first-of-type {
    border-radius: 0.25rem 0.25rem 0 0; 
}
  
.directory-list__order-button:last-of-type {
    border-radius: 0 0 0.25rem 0.25rem; 
}
  
@media screen and (min-width: 40em) {
    .directory-list__order-button {
        display: inline-block;
        width: auto; 
        border-bottom-width:0.125rem;
    }
      
    .directory-list__order-button:first-of-type {
        border-radius: 0.25rem 0 0 0.25rem; 
    }
      
    .directory-list__order-button:last-of-type {
        border-radius: 0 0.25rem 0.25rem 0; 
    } 
}
  
.directory-list__order-button.is-active, .directory-list__order-button.is-active:link, .directory-list__order-button.is-active:visited, .directory-list__order-button.is-active:hover, .directory-list__order-button.is-active:focus {
    background-color: #206091; 
    border-color:#064677;
    color:rgba(255,255,255,0.85);
    text-shadow:0.063rem 0 0.125rem #064677;
}
  
.directory-list__order-button > a {
    text-decoration: none;
    color: #002855; 
}

.directory-list__users {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap; 
    margin:0 -0.5rem;
}

.directory-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -moz-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 1.5rem 0.5rem;
    border: 1px solid rgba(0,45,94, 0.6);
    padding: 1.5rem;
    position:relative;
    box-shadow:0 1rem 1rem -1rem rgba(0,45,94, 0.7);
    z-index:0;
}

.directory-card::before{
    content:"";
    position:absolute;
    background: rgba(255,255,255,0.3);
    background-image:linear-gradient(123.75deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.9) 60%, transparent 100%);
    height:calc(100% - 6.75rem);
    top:6.75rem;
    left:0;
    width:100%;
    opacity:1;
    z-index:-1;
}

.directory-card::after{
    content:"";
    position:absolute;
    background: url(../img/squairy_dark.jpg);
    height:6.75rem;
    top:0;
    left:0;
    width:100%;
    opacity:0.7;
    z-index:-1;
}
  
@media screen and (min-width: 40rem) {
    .directory-card {
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        width: calc(50% - 1rem); 
    } 
}

.directory-card__photo-container{
    max-width:5rem;
    height:5rem;
    box-shadow:0 0 1.25rem rgba(0,45,94, 0.7);
    margin-bottom:2rem;
}

.directory-card__photo {
    max-width: 5rem;
    position:relative;
    z-index:1;
}
  
.directory-card__name {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem; 
    color: #002D5E;
    font-size: 125%;
    font-weight: 700;
}
  
.directory-card__honorary-suffix {
    display: block;
    color: #206091;
    font-size: 0.8rem;
    font-weight: bold;
}
  
.directory-card__details {
    line-height: 1.3;
}
  
.directory-card__label {
    margin-top: 1rem;
    font-weight: 600; 
}
    
.directory-card__label::after {
      content: ":"; 
}
  
.directory-card__value {
    margin: 0;
    padding: 0;
    /* Style phone number differently when certain UAs convert them to links. */ 
}
    
.directory-card__value + .directory-card__value {
   margin-top: 0.5rem; 
}
    
.directory-card__value--phone a[href^="tel:"]::before {
   content: "Call "; 
}
  
.directory-card__actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: auto -1.5rem -1.5rem;
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: rgba(108,172,221, 0.3);
    padding: 1rem 1.5rem 0;
    list-style-type: none; 
}
    
.directory-card__actions li {
    display: inline; 
}
  
.directory-card__action {
    display: inline-block;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    color: #005EB8;
    font-weight: bold;
}

/* Lazy Video Embed*/

.lazy-video {
    display: block;
    width: 100%;
    margin: 0;
}

.lazy-video__wrapper {
    position: relative;
    max-width: 100%;
    background-color: #2C2A29;
    overflow: hidden;
}

.lazy-video__link {
    position: relative;
    display: block;
    height: 0;
    margin: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

    .lazy-video__link:focus {
        display: block;
        outline-offset: -0.5rem;
        outline-color: #EAAA00;
    }

.lazy-video__poster {
    width: 100%;
    max-width: 100%;
    opacity: 0.6;
    transition: all 0.25s ease-out;
    will-change: opacity;
}

.lazy-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%) scale(0.95);
    will-change: transform, opacity;
    fill: white;
    stroke: white;
    opacity: 0.7;
    transition: all 0.25s ease-out;
}

.lazy-video__link:hover .lazy-video__play,
.lazy-video__link:focus .lazy-video__play {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.25s ease-out;
}

.lazy-video__link:hover .lazy-video__poster,
.lazy-video__link:focus .lazy-video__poster {
    opacity: 0.3;
    transition: all 0.25s ease-out;
}

.lazy-video__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lazy-video__details {
    display: block;
    width: calc(100% - 2rem);
    background-color: white;
    display: inline-block;
    padding: 1rem;
    line-height:150%;
}

.lazy-video__duration {
    float: right;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    border: 1px solid #6E6259;
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.lazy-video__title {
    font-size: 1.1rem;
}

    .lazy-video__title cite {
        font-style: normal;
        color: #11469a;
        font-family: 'Lato', sans-serif;
        font-weight: bold;
        display:block;
        margin-bottom:1rem;
    }

/*
.directory-list {

	
	&__order-button {
		width: 100%;


		&

		@media screen and (min-width: 40em) {
			display: inline-block;
			width: auto;

			&:first-of-type {
				border-radius: 0.25rem 0 0 0.25rem;
			}

			&:last-of-type {
				border-radius: 0 0.25rem 0.25rem 0;
			}
		}

		&:hover, &:focus {
		}

		&.is-active {
			&, &:link, &:visited, &:hover, &:focus {
				background-color: $pms-286-c;
			}
		}

		> a {
			text-decoration: none;
			color: $wvu-blue;
		}
	}

	&__users {
		@include flexbox();
		@include flex-flow(row wrap);
	}
}

.directory-card {
	@include flexbox();
	@include flex-flow(column wrap);

	width: 100%;
    margin: 1.5rem 0.5rem;
	border: 1px solid lighten($pms-432-c, 64%);
	border-radius: 0.25rem;
    padding: 1.5rem;

	background-image: linear-gradient(to bottom, lighten($pms-432-c, 64%) 6.75rem, white 6.75rem);

	@media screen and (min-width: 40rem) {
		@include flex-grow(0);
		width: calc(50% - 1rem);
	}

    &__photo {
        max-width: 5rem;
    }

    &__name {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

	&__name-suffix-separator {
		@extend .visually-hidden;
	}

	&__honorary-suffix {
		display: block;

		color: $wvu-black;

		font-size: 0.8rem;
		font-weight: bold;
	}

	&__organization-unit {
		@extend .visually-hidden;
	}

	&__organization-name {
		@extend .visually-hidden;
	}

	&__details {
		line-height: 1.3;
	}

	&__label {
		margin-top: 1rem;

		font-weight: 600;

		&::after {
			content: ":";
		}
	}

	&__value {
		margin: 0;
		padding: 0;

		& + & {
			margin-top: 0.5rem;
		}

		 Style phone number differently when certain UAs convert them to links. 
		&--phone {

			a[href^="tel:"] {

				&::before {
					content: "Call ";
				}
			}
		}
	}

	&__actions {
		@include flexbox();
		@include flex-flow(row wrap);

		margin: auto -1.5rem -1.5rem;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: lighten($pms-432-c, 70%);
		padding: 1rem 1.5rem 0;

		list-style-type: none;

		li {
			display: inline;
		}
	}

	&__action {
		display: inline-block;
		margin-right: 1.5rem;
		margin-bottom: 1rem;

		color: $pms-300-c;

		font-weight: bold;
	}
}*/




/*  ---  SPECIAL BREAK FOR NAV COLLAPSE  --- */

@media (max-width: 47.999em) {

.custom-toggle {
    display: block;
}

}




/*  --- MEDIUM media query----------------------------------------------------------------------------------------*/

@media screen and (min-width: 768px) {

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
	font-size: 18px;
}

.hidden-mobile{
	display: block;
}

.visible-mobile{
	display: none;
}

.visible-medium{
	display: inline-block;
}

.header-logo-block{
	padding: 0px;
}

.header-logo{
	max-width: 530px;
	height: auto;
	margin: 20px 10px;
}

.header-cta{
	text-align: right;
	margin-top: 36px;
}

.header-cta h4{
	padding-right: 10px;
}

li.pure-menu-item{
	float: left;
}

li.pure-menu-item:last-child{
	/*border-width: 2px;
	border-color: #fff;
	border-style: solid;*/
	float: right;
}

li.pure-menu-item a{
	font-size: 75%;
	padding: 18px 14px;
}

.feature-block{
	margin-bottom: 20px;
}

h6{
	margin: 20px 0px;
}

.color-block-content{
	text-align: center;
}

.social-callout{
	margin: 20px 0px;
	text-align: right;
}

.facebook{
	margin: 20px 0px;
}

.icon-facebook{
	vertical-align: middle;
}

.right{
	text-align: right;
}

.testimonial-block-content p{
	padding: 10px 30px 20px 30px;
}

.main-content{
	padding: 10px 30px;
}

}




/*  --- LARGE media query----------------------------------------------------------------------------------------------*/

@media screen and (min-width: 64em) {

.visible-medium{
	display: none;
}

/*.custom-wrapper {
    height: 52px;
}*/

li.pure-menu-item a{
	font-size: 100%;
	padding: 15px 20px;
}

.feature-block{
	margin-bottom: 40px;
}

.color-block-content{
	text-align: left;
	padding: 40px 10px;
}

ul.secondary-nav-list{
	display: block;
	margin-top: 40px;
	margin-top: 40px;
}

.pure-menu-item.secondary-nav-item{
	float: none;
	display: block;
	width: 100%;
	margin-bottom: 5px;
}

.pure-menu-item.secondary-nav-item:last-child{
	float: none;
}

.lazy-video {
    width: calc(100% - 2rem);
    margin-left:2rem;
}

}




/*  --- X-LARGE media query----------------------------------------------------------------------------------------------*/

@media screen and (min-width: 80em) {

li.pure-menu-item a{
	padding: 15px 38px;
}

}