* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
    font-family: 'Crimson Text', serif;
}

body {
    line-height: 1.7em;
    color: #121615; /*#7f8c8d;*/
    font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    font-family: 'Rosario', sans-serif;
    color: #187565;
}

a {
    color: #187565;
}
a:hover,
a:focus {
    background: none;
    border: none;
    color: #121615;
    transform: color 1s ease;
}

/*hr {
    border-top: 1px solid #f1f1f2;
    max-width: 48em;
}*/

hr {
  border: 0;
  margin: 1.35em auto;
  max-width: 100%;
  background-position: 50%;
  box-sizing: border-box;
}

.horizontal-lines {
    height: 10px;
    color: #187565;
    background-image: linear-gradient(
        #187565,
        #187565 33.33%,
        transparent 33.33%,
        transparent 100%);
    background-size: 100% 3px;
    width: 40px;
}

article > figure > img {
    max-width: 100%;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(180,222,212,0.2);
}

.is-center {
    text-align: center;
}

.description {
	max-width: 48em;
}

	.description-centered {
		margin: 0 auto;
	}

.description p {
	margin: 0 0 1em 0;
}

.services {
	margin: 0 auto;
}

input#poohbear {
    display: none;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type], .pure-form textarea {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}
.pure-form input:not([type]):focus, .pure-form input[type=password]:focus, .pure-form input[type=email]:focus, .pure-form input[type=url]:focus, .pure-form input[type=date]:focus, .pure-form input[type=month]:focus, .pure-form input[type=time]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=week]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=color]:focus, .pure-form input[type=number]:focus, .pure-form input[type=search]:focus, .pure-form input[type=text]:focus, .pure-form select:focus, .pure-form textarea:focus {
	border-color: rgb(180,222,212);
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button, a.pure-button {
    background-color: #187565;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

.pure-button-primary, a.pure-button-primary {
    background: transparent;
    border: 2px white solid;
    color: rgba(255, 255, 255, 1);
}
    .pure-button-primary:hover, a.pure-button-primary:hover {
        background: rgba(255, 255, 255, 0.5);
        color: rgba(24, 117, 101, 0.8);
    }


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em;
    text-align: center;
}
.home-menu {
    background: #fff;
    background: rgba(255,255,255,0.9);
}
.pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-item, .pure-menu-horizontal .pure-menu-separator {
	/* pure-menu-horizontal normally have vertical align set to middle. */
	vertical-align: baseline;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: black;
}

.home-menu a {
    color: #187565;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #121615;
    transform: color 1s ease;
}

/*
 * -- SPLASH STYLES --
 */

.splash-container {
    background: linear-gradient(rgba(24, 117, 101, 0.8), rgba(24, 117, 101, 0.8)), url('../../img/bg1280.jpeg') center center no-repeat;
    background-size: cover;
    overflow: hidden;
    min-height: 600px;
}

.splash-container-bio {
    background: #e7f1ef;
}

.splash {
    width: 80%;
    max-width: 48em;
    margin: 10% auto;
}

.splash-bio {
    max-width: 48em;
    margin: 0 auto;
    padding: 1em;
}

.splash-secondary {
	background: rgba(255,255,255,0.9);
	border-radius: 5px;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 1.75em; /* 28px / 16px */
    color: white;
    font-weight: 500;
    line-height: 1em;
}
	.splash-head-secondary {
		color: #187566;
		border: none;
	}
	
.splash-head-bio {
    font-size: 1.75em;
    font-weight: normal;
    margin: 0;
}
    .splash-head-bio a, .splash-head-bio a:visited {
        color: inherit;
        transition: color 1.5s ease;
    }
    .splash-head-bio a:hover {
        text-decoration: none;
        color: #092e28;
    }
    
.splash-subhead-bio {
    color: #121615;
    font-size: 1.25em;
    margin: 0;
}
    .splash-subhead-bio a {
        color: inherit;
        text-decoration: underline;
    }
    .splash-subhead-bio a:hover {
        text-decoration: none;
    }

.splash-subhead {
    color: white;
    font-size: 1.25em;
}
	.splash-subhead-secondary {
		color: rgba(0, 0, 0, 0.6);
	}

.splash .pure-button-primary, .splash a.pure-button-primary {
	font-size: 120%;
}


/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    width: 100%;
}

/* We want to give the content area some more padding */
.content {
    padding: 1em 1em 3em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    margin-bottom: 0.25em;
}
    .content-head a, .content-head a:visited {
	    color: #187565;
	    text-decoration: underline;
    }
    .content-head a:hover {
	    color: #092e28;
	    text-decoration: none;
	    transition: color 1.5s ease;
    }

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #187565;
    margin: 0 0 0.5em 0;
}
    .content-subhead a, .content-subhead a:visited {
	    color: inherit;
	    font-weight: 400;
	    text-decoration: underline;
	    transition: color 2s ease;
    }
    .content-subhead a:hover {
	    color: #0e463c;
	    text-decoration: none;
    }
    .content-subhead i {
        margin-right: 7px;
    }
.content-subhead-date {
	color: #777;
    font-weight: 400;
    font-size: 1em;
}

/* This is a modifier class used when the content-head or content-subhead is inside a ribbon */
.content-head-ribbon, .content-subhead-ribbon {
    color: white;
}
.content-head-ribbon-light{
	color: #187565;
}
.content-subhead-ribbon-light {
	color: inherit;
}
/*h2.content-head-ribbon {
    margin-bottom: 0px;
}*/
p.content-subhead-ribbon {
    font-size: 1.25em;
    font-weight: 600;
    font-style: italic;
    margin-top: 0;
}

.contact a, .contact a:visited {
    color: #187565;
    text-decoration: underline;
}
    .contact a:hover {
        color: #092e28;
	    text-decoration: none;
	    transition: color 1.5s ease;
    }
    
    .contact a[href^="tel:"] {
        color: inherit;
        text-decoration: none;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #187565;
    color: white;
}
.ribbon h1, .ribbon h2, .ribbon h3, .ribbon h4, .ribbon h5, .ribbon h6 {
    color: white;
}
.ribbon a, .ribbon a:visited {
    color: inherit;
    text-decoration: underline;
}
    .ribbon a:hover {
        text-decoration: none;
    }
.ribbon .pure-button-primary, .ribbon a.pure-button-primary {
    /*color: rgba(0, 0, 0, 0.6);*/
    text-decoration: none;
}
    .ribbon a.pure-button-primary:hover {
        color: rgba(24, 117, 101, 0.8);
    }
.ribbon .pure-button-secondary, .ribbon a.pure-button-secondary {
	background-color: #187565;
	color: white;
	text-decoration: none;
}
.ribbon .ribbon-light, .ribbon-light {
	background: #e7f1ef;
	color: #121615;
}
.ribbon-light h1, .ribbon-light h2, .ribbon-light h3, .ribbon-light h4, .ribbon-light h5, .ribbon-light h6 {
    color: #187565;
}
.ribbon .ribbon-radio, .ribbon-radio {
    background: linear-gradient(rgba(24, 117, 101, 0.8), rgba(24, 117, 101, 0.8)), url('https://source.unsplash.com/OKLqGsCT8qs/1334x750') center top no-repeat;
    background-size: cover;
    min-height: 600px;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent; 
  border-bottom: 15px solid #187565;
  margin: -15px auto 0;
}
	.arrow-up-light {
		border-bottom: 15px solid #e7f1ef;
	}
.arrow-down {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid white;
	margin: 0 auto -15px;
}

.hide-element {
    border: 0;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip; rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.episode p {
    margin-bottom: 0;
}
.episode-heading {
    text-transform: uppercase;
    font-size: 0.875em;
}
.episode-title {
    color: inherit;
    margin: 0;
}
.episode-meta {
    margin-bottom: 1em;
}
.episode-meta-date {
    font-style: italic;
}
.episode footer {
    margin: 1em 0;
}
article.episode.pure-u-1.pure-u-md-1-2 {
    padding: 0 1em 1em 0;
}

ul.radio-schedule {
    list-style: none outside none;
    margin: 0;
    padding-left: 0;
}

.subscribe {
	padding: 1em 1em 0em;
}
.subscribe-head, .subscribe-head a, .subscribe-head a:visited  {
	color: #777;
	font-weight: 400;
    text-transform: uppercase;
}
	.subscribe-head a:hover {
		text-decoration: none;
	}
	h2.subscribe-head {
		font-size: 1em;
		margin-bottom: 0;
	}

.testimonials-container{
    max-width: 1335px;
    margin: 0 auto;
}
.testimonials {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.testimonial {
    /*height: 300px;*/
    flex-basis: 100%;
    -ms-flex: auto;
    width: 259px;
    max-width: 100%;
    /*border-radius: 5px;
    background-color: #e7f1ef;
    color: #121615;*/
    padding: 1em;
    /*margin: 0.5em;*/
}
.testimonial-provider {
    font-size: 1em;
    font-weight: bold;
}

/*
 * -- INFO TABLE WRAPPER --
 * This element wraps up all the information table elements
 */
 .info-tables {
    max-width: 980px;
    margin: 0 auto;
 }
.info-tables {
    margin-bottom: 2.125em;
    text-align: center;
}

/*
 * -- INFO TABLE  --
 * Every info table has the .info-table class
 */
.info-table {
    border: 0;
    margin: 0 0.5em 2em;
    padding: 0 0 1em;
}

/*
 * -- INFO TABLE HEADER COLORS --
 * Choose a different color based on the type of info table.
 */
.info-table-primary .info-table-header {
    background: rgba(0, 0, 0, 0.6);
}

.info-table-secondary .info-table-header {
    background: inherit;
}

.info-table-edu .info-table-header {
	background: #187565;
}

/*
 * -- INFO TABLE HEADER --
 * By default, a header is black/white, and has some styles for its <h2> name.
 */
.info-table-header {
    background: #111;
    color: #fff;
}
    .info-table-header h3 {
        margin: 0;
        padding: 1.25em 0 1.25em;
        /*font-size: 1em;*/
        font-weight: bold;
		color: #fff;
    }


/*
 * -- INFO TABLE PRICE --
 * Styles for the price and the corresponding <span>per month</span>
 */
.info-table-price {
    font-size: 1em;
    margin: 0.2em 0 0;
    font-weight: 100;
}
    .info-table-price span {
        display: block;
        text-transform: uppercase;
        font-size: 0.8em;
        padding: 0.25em 0;
        font-weight: 400;
        
        color: #fff;
    }



/*
 * -- INFO TABLE LIST --
 * Each info table has a <ul> which is denoted by the .info-table-list class
 */
.info-table-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}


/*
 * -- INFO TABLE LIST ELEMENTS --
 * Styles for the individual list elements within each info table
 */
.info-table-list li {
    padding: 0.8em 0;
    background: #f7f7f7;
    border-bottom: 1px solid #e7e7e7;
}


/*
 * -- INFO TABLE BUTTON --
 * Styles for the "Choose" button at the bottom of a info table.
 * This inherits from Pure Button.
 */
.button-choose {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    border-radius: 2em;
    font-weight: bold;
    font-size: 0.8em;
    position: relative;
    bottom: -1.5em;
}

/* This is the class used for the footer */
.footer {
    background: #B4DED4;
    width: 100%;
    /*border-top: 1px solid #187565;*/
}

.footer a {
	color: #187565;
	text-decoration: underline;
}
	.footer a:hover {
		color: #187565;
		text-decoration: none;
	}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }
        .home-menu ul {
            float: right;
        }

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        width: 75%;
    }

    .splash-head {
        font-size: 250%;
    }
    .splash-bio {
        padding: 1em 0;
    }

    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }
    
    .testimonial {
        flex-basis: 50%;
        max-width: 50%;
    }

}

/*
 * -- BIG DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    .home-menu {}
    	.home-menu ul {
	    	float: right;
    	}
    
    .splash-container {
        background: linear-gradient(rgba(24, 117, 101, 0.8), rgba(24, 117, 101, 0.8)), url('../../img/bg1366.jpg') center center no-repeat;
        background-size: cover;
    }
    /*.splash-container-bio {
        background: url('../../img/attorneys/P6.jpg') center center no-repeat;
    }*/
    
    /* We decrease the width of the .splash even more */
    .splash {
	    width: 60%;
    }
    
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
    
    .splash-bio {
        padding: 1em 0;
    }
    
    .testimonial {
        flex-basis: 33.33%;
        max-width: 33.33%;
        padding: 2em;
    }
}

/* -- BIGGER DESKTOP MEDIA QUERIES --
 */
@media only screen and (min-width: 120em) {
	.splash-container {
        background: linear-gradient(rgba(24, 117, 101, 0.8), rgba(24, 117, 101, 0.8)), url('../../img/bg-xl.jpg') center center no-repeat;
        background-size: cover;
	}
	.splash-container-bio {
    	/*background: background: url('../../img/attorneys/P6.jpg') center center no-repeat;*/
    	
	}
	
	.splash {
		width: 55%;
	}
	
	.ribbon .ribbon-radio, .ribbon-radio {
    background: linear-gradient(rgba(24, 117, 101, 0.8), rgba(24, 117, 101, 0.8)), url('https://source.unsplash.com/OKLqGsCT8qs/1920x1080') center top no-repeat;
    }
}