/*   */

/*==================================================================
                    NORMALIZE.CSS
===================================================================*/

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}

/* Prevent iOS text size adjust after orientation change, without disabling user zoom */

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Remove default margin */

body {
    margin: 0;
}

/* Remove border when inside `a` element in IE 8/9 */

img {
    border: 0;
    max-width: 100%;
    margin: 0 0;
    padding: 0 0;
}

/* Address `outline` inconsistency between Chrome and other browsers */

a:focus {
    outline: none;
}

a:active,
a:hover {
    outline: 0;
}

/* Address inconsistent and variable font size in all browsers */

small {
    font-size: 80%;
}


/*===================================================
              OPTIONAL STYLES
====================================================*/


/* Remove shadows in boxes on iPad */

input {
    -webkit-appearance: none;
    -moz-appearance: none;
}

/*  Box Sizing - Width includes padding & border*/

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

/* No Bullets, padding or margin on lists */

ul,
ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* No underline on links + link colors */
a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    outline: 0 !important;
}

/* focus & hover for header */
/* header a:hover, */
header a:focus {
    color: #F7E3C3;
    outline: 1px solid #F7E3C3;
}
.header-left>a:first-child:hover,
a.emblem:hover {
    box-shadow: inset 0 0 0 1px #F7E3C3;
}

header input:hover {
    box-shadow: inset 0 0 4px 2px rgba(0, 132, 240, 1);
}

/* focus for footer */
footer a:focus {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
    text-decoration: none;
}
a:not(.commissioners-minutes a):focus {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
    text-decoration: none;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.clearfix:after {
    content: "";
    clear: both;
    display: table;
}

@media only screen and (min-width: 2560px) {
.page {
    max-width: 2560px;
    margin: 0 auto;
    border-left: 2px solid #ac695d;
    border-right: 2px solid #ac695d;
}
}

/* ===============================================================
            STANDARD FONTS FOR HEADERS AND PARAGRAPHS
================================================================*/

/* Most paragraphs */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #53312B;
    letter-spacing: 0.11px;
    line-height: 20px;
}
@media only screen and (min-width: 600px) {
body {
    font-size: 14px;
}
}
@media only screen and (min-width: 1366px) {
body {
    font-size: 16px;
    letter-spacing: 0.11px;
    line-height: 26px;
}
}

/* Page Titles - Gerard C. "Gerry" Rickhoff */
.page-title {
    max-width: 600px;
    margin: 40px auto 30px auto;
    font-family: Arvo, serif;
    font-size: 18px;
    color: #B84323;
    letter-spacing: 2px;
    line-height: 26px;
    text-align: center;
    text-shadow: 0 4px 0 rgba(190,69,53,0.20);
}
@media only screen and (min-width: 600px) {
.page-title {
    font-size: 22px;
}
}
@media only screen and (min-width: 1024px) {
.page-title {
    max-width: 2000px;
    margin: 40px 0 30px 0;
    text-align: left;
}
}
@media only screen and (min-width: 1366px) {
.page-title {
    font-size: 30px;

}
}
@media only screen and (min-width: 1600px) {
.page-title {
    font-size: 32px;
    letter-spacing: 3px;
}
}

/* Section Banner - Statistics About The County Clerk, etc. */
.title-bg{
    background: url('../images/bg-image-1.svg');
    margin-top: 51px;
}
.title-bg h2 {
    text-transform: uppercase;
    font-family: Arvo,serif;
    font-size: 20px;
    font-weight: 400;
    color: #F7E3C3;
    letter-spacing: 3px;
    line-height: 30px;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.20);
    text-align: center;
    margin: 0;
    padding: 30px 0;
}
@media only screen and (min-width: 800px) {
    .title-bg h2 {
        font-size: 24px;
    }
}
@media only screen and (min-width: 1024px) {
    .title-bg h2 {
        font-size: 32px;
    }
}
@media only screen and (min-width: 1280px) {
    .title-bg h2 {
        line-height: 40px;
    }
}

/* Map of Bexar County, Frequently Asked Questions, etc. */
.heading-1 {
    font-family: Arvo, serif;
    font-size: 19px;
    color: #B84323;
    letter-spacing: .1px;
    line-height: 30px;
    text-shadow: 0 4px 0 rgba(190,69,53,0.20);
}
@media only screen and (min-width: 568px) {
.heading-1 {
    font-size: 20px;
    letter-spacing: 2px;
}
}
@media only screen and (min-width: 1024px) {
.heading-1 {
    font-size: 22px;
}
}
@media only screen and (min-width: 1366px) {
.heading-1 {
    margin-bottom: 42px;
    font-size: 30px;
    line-height: 44px;
}
}
@media only screen and (min-width: 1366px) {
.heading-1 {
    font-size: 30px;
}
}
@media only screen and (min-width: 1600px) {
.heading-1 {
    letter-spacing: 3px;
}
}

/* Bexar County Clerk:, Tom Koenig, E-file a Document, etc. */
.heading-2 {
    margin-top: 28px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #53312B;
    letter-spacing: 0.5px;
}
@media only screen and (min-width: 1024px) {
.heading-2 {
    font-size: 18px;
}
}
@media only screen and (min-width: 1366px) {
.heading-2 {
    margin-bottom: 1px ;
    font-size: 20px;
}
}
/* To obtain a refund of a cash bond, you must: */
.heading-3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #53312B;
    letter-spacing: 0.6px;
    line-height: 20px;
}
@media only screen and (min-width: 1024px) {
.heading-3 {
    font-size: 20px;
    line-height: 26px;
}
}
@media only screen and (min-width: 1366px) {
.heading-3 {
    font-size: 24px;
    line-height: 36px;
}
}

.heading-4 {
    font-size: 18px;
}
@media only screen and (min-width: 1024px) {
.heading-4 {
    font-size: 20px;
}
}
@media only screen and (min-width: 1366px) {
.heading-4 {
    font-size: 22px;
}
}

.text-1 {
    font-size: 13px;
}
@media only screen and (min-width: 600px) {
.text-1 {
    font-size: 14px;
    line-height: 22px;
}
}
@media only screen and (min-width: 1024px) {
.text-1 {
    font-size: 16px;
    line-height: 26px;
}
}
@media only screen and (min-width: 1366px) {
.text-1 {
    font-size: 20px;
    line-height: 32px;
}
}

/* LINKS */
.link-1 a {
    color: #3063D2;
    text-decoration: underline;
}

.link-2 a {
    color: #3063D2;
    text-decoration: none;
}

.link-3 a {
    color: #B1482B;
}

.link-1 a:hover,
.link-2 a:hover {
    text-decoration: underline;
    color: #53312B;
}

.link-2 a:visited {
    color: #53312B;
}

/* button - Search Unclaimed Funds, Next: Visiting The Archives, etc. */
.button-1 {
    max-width: 297px;
    margin: 70px auto 0 auto;
}
@media only screen and (min-width: 1024px) {
.button-1 {
    margin-top: 90px;
    margin-left: 0;
    margin-right: 0;
}
}
@media only screen and (min-width: 1366px) {
.button-1 {
    max-width: 100%;
    margin-top: 95px;
}
}

.button-1 a {
    display: inline-block;
    padding: 10px 5px 10px 6px;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #61918D;
    border: 2px solid transparent;
    border-radius: 4px;
}
@media only screen and (min-width: 375px) {
.button-1 a {
    padding: 12px 8px 12px 9px;
}
}
@media only screen and (min-width: 414px) {
.button-1 a {
    font-size: 14px;
    padding: 12px 15px 12px 16px;
}
}
@media only screen and (min-width: 1366px) {
.button-1 a {
    font-size: 18px;
    padding: 14px 36px 14px 36px;
}
}
@media only screen and (min-width: 1600px) {
.button-1 a {
    font-size: 20px;
    padding: 14px 40px 14px 40px;
}
}


.button-1 a:hover,
.button-1 a:focus {
    background: #436562;
    color: white;
}

.button-1 a:focus {
   /*  outline: 3px solid white; */
       box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 3px solid #0086F1;
}

.button-1 span {
    font-weight: 300;
}

/* ===============================================================
                            PAGE HEADER
================================================================*/

/* (for mobile header, see menubarLinks.css) */                                                   */

.top_nav.top_nav_main {
    display: none;
}
@media only screen and (min-width: 768px) {
.top_nav.top_nav_mobile {
    display: none;
}
.top_nav.top_nav_main {
    display: block;
}

}

/* Page Banner - The county of BEXAR */
.skip {
    position: absolute;
    top: 3px;
    left: -1000px;
    padding: 3px 8px;
    color: #F7E3C3;
}
.skip:focus {
    left: 180px;
    font-size: 12px;
    color: #F7E3C3;
    text-decoration: none;
}
@media only screen and (min-width: 480px) {
.skip:focus {
    left: 240px;
}
}
@media only screen and (min-width: 568px) {
.skip:focus {
    left: 20px;
}
}
@media only screen and (min-width: 768px) {
.skip:focus {
    left: 50px;
}
}
@media only screen and (min-width: 1024px) {
.skip:focus {
    left: 120px;
}
}
@media only screen and (min-width: 1366px) {
.skip:focus {
    left: 180px;
}
}
/* Banner - overflow - float */

/* Floats  */
.top_header {
    min-width: 320px;
    background-image: url('../images/bg-image-1.jpg');
    background-size: 100% 130px;
}
@media only screen and (min-width: 1024px) {
.top_header {
    overflow: hidden;
    background-repeat: no-repeat;
}
}

/* header content - right side */
.header-left {
    position: relative;
    overflow: hidden;
    max-width: 275px;
    margin: 0 auto;
}
@media only screen and (min-width: 768px) {
.header-left {
    max-width: 358px;
}
}
@media only screen and (min-width: 1024px) {
.header-left {
    float: left;
    max-width: 100%;
}
}

/* Container - bexar logo + The county of Bexar + County Clerk  Gerard C. Rickhoff */
.header-left > a,
.header-left > div:first-child {
    float: left;
    overflow: hidden;
    position: relative;
    display: block;
   /*  padding: 10px; */
}

.home-link-label {
	display: none;
	position: absolute;
	top: 5px;
	left: 70px;
	padding: 0 15px;
	font-size: 12px;
 	color: #000;
 	background: #F7E3C3;
}
@media only screen and (min-width: 1024px) {
.home-link-label {
	top: 5px;
	left: 100px;
	padding: 0 20px;
}
}
@media only screen and (min-width: 1366px) {
.home-link-label {
	top: 10px;
	left: 150px;
}
}

.header-left > a:hover,
.header-left > a:focus {
/*     outline: 1px solid #F7E3C3; */
}

.header-left > a:hover .home-link-label,
.header-left > a:focus .home-link-label {
	display: block;
}

/* Container - Bexar logo */
.logo-container {
    float: left;
    margin: 10px 0 11px 0;
}
@media only screen and (min-width: 768px) {
.logo-container {
    margin: 20px 0 6px 0;
}
}
@media only screen and (min-width: 1024px) {
.logo-container {
    margin: 13px 0 6px 29px;
}
}
@media only screen and (min-width: 1366px) {
.logo-container {
    width: 100px;
    margin:  14px 0 14px 42px;
}
}

/* Bexar logo */
.logo-container img {
    width: 70px;
}
@media only screen and (min-width: 1366px) {
.logo-container img {
    width: 100px;
}
}

/* Container The County Of Bexar */
.countybexar {
    float: left;
    max-width: 190px;
    margin-top: -6px;
    margin-left: 18px;
}
@media only screen and (min-width: 768px) {
.countybexar {
    max-width: 100%;
    margin: 16px 0 0 20px;
}
}
@media only screen and (min-width: 1024px) {
.countybexar {
    margin-top: 10px;
}
}
@media only screen and (min-width: 1366px) {
.countybexar {
    width: 110px;
    margin: 20px 0 0 39px;
}
}

/* The County Of */
.countybexar h2 {
    margin-top: 33px;
    font-size: 17px;
    color: #F7E3C3;
    letter-spacing: 1px;
    font-weight: 400;
}
@media only screen and (min-width: 768px) {
.countybexar h2 {
    display: block;
    margin-top: 20px;
    margin-bottom: -6px;
    font-size: 12px;
    letter-spacing: 0.06px;
    font-weight: 300;
}
}
@media only screen and (min-width: 1366px) {
.countybexar h2 {
    font-size: 17px;
    margin-bottom: 2px;
}
}

/* BEXAR */
.countybexar h2 span {
    margin-top: 0;
    margin-left: 2px;
    font-size: 17px;
    font-weight: 400;
    color: #F7E3C3;
    letter-spacing: 1px;
}
@media only screen and (min-width: 768px) {
.countybexar h2 span {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    letter-spacing: 3px;
}
}
@media only screen and (min-width: 1366px) {
.countybexar h2 span  {
    font-size: 28px;
    letter-spacing: 5.02px;
}
}

/* Container - vert line */
@media only screen and (min-width: 768px) {
.line {
    float: left;
    width: 1px;
    margin: 36px 17px 0 17px;
}
}
@media only screen and (min-width: 1024px) {
.line {
    margin-top: 30px;
}
}
@media only screen and (min-width: 1366px) {
.line {
    margin: 42px 24px 0 22px;
}
}

.line img {
    display: none;
}
@media only screen and (min-width: 768px) {
.line img:first-child {
    display: inline-block;
}
}
@media only screen and (min-width: 1366px) {
.line img:first-child {
    display: none;
}
.line img+img {
    display: inline;
}
}

/* Container - County Clerk  */
.county-clerk {
    float: left;
    margin: 0 0 0 0;
}
@media only screen and (min-width: 768px) {
.county-clerk {
    margin: 10px 0 0 0px;
}
}
@media only screen and (min-width: 1024px) {
.county-clerk {
    margin-top: 5px;
}
}
@media only screen and (min-width: 1366px) {
.county-clerk {
    margin-top: 9px;
    width: 210px;
}
}

/* County Clerk  */
@media only screen and (min-width: 768px) {
.county-clerk h2 {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 300;
    color: #F7E3C3;
    letter-spacing: 0.6px;
    line-height: 31px;
    font-weight: 300;
}
}
@media only screen and (min-width: 1366px) {
.county-clerk h2 {
    margin-top: 23px;
    font-size: 17px;
}
}

/* County Clerk */
.county-clerk h2 span:first-child {
    display: none;
}
@media only screen and (min-width: 768px) {
.county-clerk h2 span:first-child {
    display: block;
}
}

/* Gerard C.Rickhoff */
.county-clerk h2 span + span {
    display: block;
    position: absolute;
    top: 52px;
    left: 90px;
    font-size: 17px;
    font-weight: 300;
    color: #F7E3C3;
    letter-spacing: 0.6px;
    line-height: 15px;
}
@media only screen and (min-width: 768px) {
.county-clerk h2 span + span {
    position: static;
    margin: -2px;
    font-size: 17px;
    font-weight: 400;
}
}
@media only screen and (min-width: 1366px) {
.county-clerk h2 span + span {
    margin-top: -2px;
    font-size: 24px;
    line-height: 31px;
}
}


/*........................................
NOTE: See menubarLinks.css
for header-right & header-right-1 mobile
.........................................*/
.header-right-1 {
    padding: 2px 0;
    background:  #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
}
@media only screen and (min-width: 768px) {
.header-right-1 {
    background:  transparent;
}
}

.header-right {
    overflow: hidden;
    max-width: 480px;
    max-width: 350px; /* REMOVE WHEN ADDING ENGLISH/SPANISH DROPDOWN */
    margin: 0 auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBE1D6;
    border-top: 1px solid #e4d7c8;
}
@media only screen and (min-width: 768px) {
.header-right {
    max-width: 560px;
    margin: -5px auto 0 auto;
    padding-bottom: 16px;
    border-bottom: none;
    border-top: none;
}
}
@media only screen and (min-width: 1024px) {
.header-right {
    float: right;
    max-width: 100%;
    margin-top: -5px;
    padding-bottom: 17px;  /* Effects Header Height */
}
}
@media only screen and (min-width: 1366px) {
.header-right {
    margin-top: 0;
    padding-bottom: 24px;
}
}

.header-right > div {
    float: left;
}

/* hamburger icon & "Menu" */
.hamburger {
    width: 33%;
    width: 50%; /* REMOVE WHEN ADDING ENGLISH/SPANISH DROPDOWN */
    margin-top: 12px;
    padding: 0 15px;
    text-align: center;
}
@media only screen and (min-width: 768px) {
.hamburger {
    display: none;
}
}

.hamburger > div {
    width: 75px;
    margin: 0 auto;
}

.hamburger img {
    display: block;
    margin-top: 4px;
}

/* Menu */
.hamburger .menu1 {
    margin-left: 30px;
    margin-top: -18px   ;
    font-size: 15px;
    font-weight: 600;
}

/* Language English - Spanish */
.language {
    float: left;
    width: 33%;
    text-align: center;
    padding-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #53312b;
    letter-spacing: 0.22px;
    border-left: 1px solid #EBE1D6;
    border-right: 1px solid #EBE1D6;
}
@media only screen and (min-width: 768px) {
.language {
    width: 70px;
    text-align: left;
    margin-top: 40px;
    margin-left: 0;
    font-size: 12px;
    color: #F7E3C3;
    font-weight: 300;
    letter-spacing: 0.22px;
    border: none;
}
}
@media only screen and (min-width: 1024px) {
.language {
    margin-top: 40px;
}
}
@media only screen and (min-width: 1366px) {
.language {
    width: 85px;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.22px;
    margin-top: 53px;
}
}

.language a {
    padding: 7px 5px;
}

/* Display outline on focus and hover */
.language a:focus,
.language a:hover {
    color: #53312B;
    text-decoration: none;
    padding: 5px;
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
}
@media only screen and (min-width: 768px) {
.language a:focus,
.language a:hover {
    color: #F7E3C3;
    outline: 1px solid #F7E3C3;
    box-shadow: none;
    border: none;
}
}

/* Hide "Spanish" */
.language ul li ul {
    display: none;
}

/* Language English/Spanish down-arrow */
.language img+img {
    display: none;
}
@media only screen and (min-width: 768px) {
.language img:first-child {
    display: none;
}
.language img+img {
    display: inline;
}
}
.language img {
    margin-bottom: 1px;
    margin-left: 7px;
}
@media only screen and (min-width: 1366px) {
.language img {
    margin-left: 7px;
}
}

/* a a a  (text controls) */
.textcontrol-small,
.textcontrol-large {
    display: none;
}
@media only screen and (min-width: 768px) {
.textcontrol-phone {
    display: none;
}
.textcontrol-small {
    display: block;
}
}
@media only screen and (min-width: 1366px) {
.textcontrol-small {
    display: none;
}
.textcontrol-large {
    display: block;
}
}
.textcontrols2 {
    float: left;
    width: 33%;
    width: 50%; /* REMOVE WHEN ADDING ENGLISH/SPANISH DROPDOWN */
    margin: 10px 0 2px 0;
    text-align: center;
}
@media only screen and (min-width: 768px) {
.textcontrols2 {
    width: 80px;
    margin: 30px 0 0 46px;
}
}
@media only screen and (min-width: 1024px) {
.textcontrols2 {
    margin-top: 30px;
}
}
@media only screen and (min-width: 1366px) {
.textcontrols2 {
    width: 105px;
    margin: 33px 0 0 30px;
}
}
.textcontrols2 li {
    display: inline;
}

.textcontrols2.textcontrol-phone a {
    display: inline;
}

.textcontrols2 a {
    display: inline-block;
    height: 57px;
    padding: 18px 5px 10px 5px;
}
@media only screen and (min-width: 768px) {
.textcontrols2 a {
    padding: 0px 0px 20px 4px;
}
}
@media only screen and (min-width: 1366px) {
.textcontrols2 a {
    height: 75px;
    padding: 0px 4px 30px 4px;
}
}

.textcontrols2 a:hover,
.textcontrols2 a:focus {
    outline: 1px solid #F7E3C3!important;
    text-decoration: none;
}

/* a-image */
.textcontrols2 a img {
    margin: 1px;
    outline: 1px solid transparent;
}

/* display yellow a-images  */
.textcontrols2 a img+img {
    display: none;
}


/* display different color of a-images on focus & hover */
.textcontrols2 a:focus img:first-child,
.textcontrols2 a:hover img:first-child {
    display: none;
}
.textcontrols2 a:focus img+img,
.textcontrols2 a:hover img+img {
    display: inline;
}

/* Display outline on focus and hover */
.textcontrols2.textcontrol-small a:focus,
.textcontrols2.textcontrol-large a:focus,
.textcontrols2.textcontrol-small a:hover,
.textcontrols2.textcontrol-small a:hover {
  outline: 1px dotted #fff;
}

/* Search Website */
.search_box.search_main {
    display: none;
}
@media only screen and (max-width: 767px) {
.search_box {
    margin: 0 0 0 0;
}
}

@media only screen and (min-width: 768px) {
.search_box.search_main {
    display: block;
    margin: 13px 0 0 2px;
}
}

@media only screen and (min-width: 1024px) {
.search_box {
    margin-top: 7px;
}
}

/* Search input */
.search_box.search_mobile input {
    width: 100%;
    height: 47px;
    padding-left: 47px;
    font-size: 15px;
    color: #B84323;
    letter-spacing: 0.36px;
    background-color: #f9ecd8;/
    font-weight: 400;
    background-image: url('../images/icon-search-2.svg'), url('../images/line-4.svg');
    background-repeat: no-repeat;
    background-position: 18px 12px, 0px bottom;
    background-size: auto auto, 100% auto;
}

@media only screen and (min-width: 768px) {
.search_box.search_main input {
    width: 196px;
    margin: 24px 0 14px 53px;
    padding: 6px 14px 6px 28px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #B04021;
    background-color: #F7E3C3;
    background-image: url('../images/icon-search-1.svg');
    background-position: 7px 8px;
    background-repeat: no-repeat;
    border: 1px solid #ebcac1;
}
}
@media only screen and (min-width: 1366px) {
.search_box.search_main input {
    width: 280px;
    font-size: 16px;
    background-image: url('../images/icon-search-2.svg');
    background-position: 10px 10px;
    padding: 6px 20px 7px 40px;
    margin:35px 0 21px 50px;
}
}

.search_box input::placeholder {
    /* color: red; */ /* #B04021; *//* #B84323; */
}

/* Emblem */
.emblem {
    display: none;
}
@media only screen and (min-width: 768px) {
.emblem {
    display: block;
    margin: 17px 0 0 62px;
    padding: 0px;
}
}
@media only screen and (min-width: 1024px) {
.emblem {
    margin: 10px 28px 0 44px;
    padding: 8px;
/*     border: 1px solid lightblue; */
}
}
@media only screen and (min-width: 1366px) {
.emblem {
    margin: 10px 40px 0 63px;
}
}

.emblem img+img {
    display: none;
}
.emblem img:first-child {
    /* margin: 17px 0 10px 40px; */
}
@media only screen and (min-width: 1366px) {
.emblem img:first-child {
    display: none;
}
.emblem img+img {
    display: inline;
  /*   margin: 17px 40px 0 63px; */
}
}

/* ===============================================================
                            PAGE FOOTER
================================================================*/


/* Map */
#GPS {
    width: 100%;
    height: 600px;
    pointer-events: none;
}

/*C ontainer --(.about)--*/

.about {
    background: #FBF3E7;
    background-image: url('../images/bg-image-2a.svg'), url('../images/bg-image-2.svg');
    background-repeat: no-repeat;
    background-position: -20px -60px, right 1430px;
    padding-top: 18px;
    border-top: 1px solid #E7CBAF;
}
@media only screen and (min-width: 568px) {
    .about {
        background-position: -20px -60px, right 660px;
    }
}
@media only screen and (min-width: 800px) {
    .about {
        background-position: -20px -60px, right 500px;
    }
}
@media only screen and (min-width: 1024px) {
    .about {
        background-position: -20px -60px, right 310px;
    }
}
@media only screen and (min-width: 1280px) {
    .about {
        background-position: -20px -60px, right 280px;
    }
}
@media only screen and (min-width: 1366px) {
    .about {
        background-position: -20px -60px, right 290px;
    }
}

.about-sub {
    overflow: hidden;
    max-width: 230px;
    margin: 20px auto 0 auto;
}

@media only screen and (min-width: 568px) {
    .about-sub {
        max-width: 568px;
    }
}
@media only screen and (min-width: 800px) {
    .about-sub {
        max-width: 800px;
    }
}
@media only screen and (min-width: 1024px) {
    .about-sub {
        max-width: 1024px;
    }
}
@media only screen and (min-width: 1280px) {
    .about-sub {
        max-width: 1280px;
    }
}
@media only screen and (min-width: 1366px) {
    .about-sub {
        max-width: 1366px;
    }
}
@media only screen and (min-width: 1600px) {
    .about-sub {
        max-width: 1600px;
    }
}
@media only screen and (min-width: 1920px) {
    .about-sub {
        max-width: 1920px;
    }
}
@media only screen and (min-width: 2560px) {
    .about-sub {
        max-width: 2560px;
    }
}

/* Sub-Container childs--(.about-sub div)--*/
.about-sub div:nth-child(even) {
}

.about-sub div {
    padding: 0 20px 25px 20px;
}
@media only screen and (min-width: 568px) {
.about-sub div {
    width: 50%;
    float: left;
    padding-left: 40px;
    padding-right: 40px;
}
.about-sub div:nth-child(3) {
    margin-top: -220px;
}
.about-sub div:last-child {
    margin-top: -274px;
}
}
@media only screen and (min-width: 800px) {
.about-sub div {
    width: 33.3333%;
    padding: 0 40px 25px 40px;
}
.about-sub div:nth-child(3) {
    margin-top: 0;
}
.about-sub div:last-child {
    margin-top: -495px;
}
}
@media only screen and (min-width: 1024px) {
.about-sub div {
    width: 25%;
    padding: 0 38px 25px 38px;
}
.about-sub div:last-child {
    margin-top: 200px;
    margin-left: -1024px;
}
}
@media only screen and (min-width: 1280px) {
.about-sub div {
    width: 20%;
    padding: 0 30px 25px 30px;
}
.about-sub div:last-child {
    margin-top: 0;
    margin-left: 0;
}
}
@media only screen and (min-width: 1366px) {
.about-sub div {
    padding: 0 40px 25px 40px;
}
}
@media only screen and (min-width: 1600px) {
.about-sub div {
    padding: 0 50px 25px 50px;
}
}
@media only screen and (min-width: 1920px) {
.about-sub div {
    padding: 0 80px 25px 80px;
}
}

/* ---- Fonts ----*/

/* About The County */
.about-sub h3 {
    margin-bottom: 10px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #61918D;
    letter-spacing: 0.45px;
}

@media only screen and (min-width: 1600px) {
    .about-sub h3 {
        font-size: 18px;
    }
}

/* Meet the Clerk, Chief Deputies etc. */
.about-sub li > a {
    font-size: 12px;
    font-weight: 400;
    color: #53312B;
    letter-spacing: 0.09px;
    line-height: 28px;
}

@media only screen and (min-width: 1600px) {
    .about-sub li > a {
        font-size: 14px;
    }
}

.end {
    background-image: url('../images/bg-image-1.svg');

    text-align: center;
    font-size: 14px;
    font-weight: 300;
    color: #F7E3C3;
    letter-spacing: 0.1px;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media only screen and (max-width: 414px) {
    .end {
        padding-left: 0px;
    }
}

.end p {
    display: inline-block;
    margin: 10px 7px 5px 7px;
}

.end p + p {
    margin: 0 0px 10px 0px;
}

@media only screen and (min-width: 500px) {
    .end p {
        display: inline-block;
    }
}


/*=================================================
                    HOME PAGE
==================================================*/


/*------------ Container for Welcome Carousel & How Can We Help --------------*/

/* main content */
main.homepage {
    background-color: #F7E3C3;
}

/* Outer container */
.welcome-container {

    border: 1px solid transparent;
}
@media only screen and (min-width: 600px) {
.welcome-container {
    background-image: url('../images/bg-image-welcome-1.png'), url('../images/bg-image-welcome-2.png');
    background-repeat: no-repeat;
    background-position: top left, right bottom;
}
}
@media only screen and (min-width: 1024px) {
    .welcome-container {

}
}
@media only screen and (min-width: 1366px) {
    .welcome-container {

}
}
@media only screen and (min-width: 1600px) {
    .welcome-container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
}
@media only screen and (min-width: 1601px) {
.welcome-container {
    background-image: url('../images/bg-image-welcome-1a.png'), url('../images/bg-image-welcome-2a.png');
    background-position: -100px -90px, right bottom;
}
}
@media only screen and (min-width: 1900px) {
.welcome-container {
    max-width: 1800px;
    background-image: url('../images/bg-image-welcome-1a.png'), url('../images/bg-image-welcome-2b.png');
    background-position: left -90px, right bottom;
}
}

/* Inner container */
.welcome-container > div {
    margin-top: 40px;
    padding-bottom: 36px;
  /*   border: 1px solid red; */
}
@media only screen and (min-width: 600px) {
.welcome-container > div {
    padding-bottom: 40px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container > div {
    overflow: hidden;
    width: 908px;
    margin: 50px auto 0 auto;
    padding-bottom: 20px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container > div {
    width: 1246px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container > div {
    margin-top: 70px;
    width: 1460px;
    padding: ;
}
}

/*----------------HOMEPAGE: Welcome Carousel-----------------------*/


/* Outer Container:  Welcome Carousel */
.welcome-container .container {
    /* Bootstrap */
    padding-right: 15px;
    padding-left: 15px;

    /* My Styles */
    width: 296px;
    margin-top: 40px auto;
    padding: 0;
}
@media only screen and (min-width: 414px) {
.welcome-container .container {
  width: 374px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .container {
  width: 500px;
}
}
@media (min-width: 800px) {
.welcome-container .container {
   width: 680px;
}
}
@media (min-width: 1024px) {
.welcome-container .container {
    float: left;
    width: 560px;
  }
}
@media (min-width: 1366px) {
.welcome-container .container {
    width: 820px;
  }
}
@media (min-width: 1600px) {
.welcome-container .container {
    width: 965px;
  }
}

/* Inner Container: Welcome Carousel */
.welcome-container .carousel {
    position: relative;
    height: 240px;
}
@media (min-width: 414px) {
.welcome-container .carousel {
    height: 285px;
}
}
@media (min-width: 600px) {
.welcome-container .carousel {
    height: 356px;
}
}
@media (min-width: 800px) {
.welcome-container .carousel {
    height: 459px;
}
}
@media (min-width: 1024px) {
.welcome-container .carousel {
    height: 391px;
}
}
@media (min-width: 1366px) {
.welcome-container .carousel {
    height: 550px;
}
}
@media (min-width: 1600px) {
.welcome-container .carousel {
    height: 640px;
}
}

/* Container for slides */
.carousel-inner {
  position: relative;
  overflow: hidden;
}


/* Container for each slide - slide border */
.welcome-container .carousel-inner > .item {
    border: 3px solid #FDF5EA;
    border-radius: 3px;
}
@media only screen and (min-width: 414px) {
.welcome-container .carousel-inner > .item {
    border: 5px solid #FDF5EA;
    border-radius: 4px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .carousel-inner > .item {
    border: 6px solid #FDF5EA;
    border-radius: 5px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .carousel-inner > .item {
    border: 10px solid #FDF5EA;
    border-radius: 7px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .carousel-inner > .item {
    border: 8px solid #FDF5EA;
    border-radius: 6px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .carousel-inner > .item{
    border: 12px solid #FDF5EA;
    border-radius: 8px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .carousel-inner > .item.{
    border: 14px solid #FDF5EA;
    border-radius: 10px;
}
}

/*-------------------- Slide image ----------------------*/
.welcome-container .carousel-inner > .item > img,
.welcome-container .carousel-inner > .item > a > img {
    /* Bootstrap CSS */
    display: block;
    max-width: 100%;
    height: auto;
}

/* Mobile image */
@media only screen and (min-width: 1366px) {
.welcome-container .carousel-inner > .item.two-images > img:first-child {
    display: none;
}
}

/* Desktop image */
.welcome-container .carousel-inner > .item.two-images > img:nth-child(2) {
    display: none;
}
@media only screen and (min-width: 1366px) {
.welcome-container .carousel-inner > .item.two-images > img:nth-child(2) {
    display: block;
}
}

.welcome-container .carousel-inner > .item > img {
    line-height: 1;
    margin: auto;
}


/*-------------- Text on a slide ---------------------------*/

/* Container for WELCOME TO BEXAR COUNTY */
.welcome-container .carousel-caption {
    /* Bootstrap */
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);

    /* My Styles */
    top: 0;
    bottom: auto;
    right: 0;
    left: 0;
    bottom: 3px;
    padding: 0;
    font-family: Arvo, serif;
    font-weight: 400;
    text-shadow: none;
}

/*----------------- Slide 1 -----------------*/

/* WELCOME TO BEXAR COUNTY */
.welcome-container .slide-1 h3 {
    margin: 124px 0 0 17px;
    font-size: 13px;
    color: #FFFFFF;
    text-align: left;
    letter-spacing: 1.2px;
    line-height: 16px;
    text-shadow: 0 2px 0 #000000;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-1 h3 {
    margin: 157px 0 0 17px;
    font-size: 17px;
    letter-spacing: 1.6px;
    line-height: 20px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-1 h3 {
    margin: 207px 0 0 22px;
    font-size: 25px;
    letter-spacing: 2.3px;
    line-height: 30px;
    text-shadow: 0 4px 0 #000000;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-1 h3 {
    margin: 284px 0 0 28px;
    font-size: 31px;
    letter-spacing: 2.9px;
    line-height: 37px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-1 h3 {
    margin: 235px 0 0 28px;
    font-size: 25px;
    letter-spacing: 2.3px;
    line-height: 30px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-1 h3 {
    margin: 349px 0 0 125px;
    font-size: 14px;
    color: #FE5C42;
    letter-spacing: 1.3px;
    line-height: 17px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-1 h3 {
    margin: 413px 0 0 146px;
    font-size: 16px;
    letter-spacing: 1.5px;
    line-height: 19px;
}
}

.welcome-container .slide-1 h3 span {
    display: block;
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-1 h3 span {
    display: inline;
}
}

/* HIDE: Where culture and history & GERARD C. RICKHOFF */
.welcome-container .slide-1 div p,
.welcome-container .slide-1 div div {
    display: none;
}

@media only screen and (min-width: 1366px) {
.welcome-container .slide-1 div p,
.welcome-container .slide-1 div div {
    display: block;
}
}

/* beginning quotation mark: position */
.welcome-container .slide-1 p > img:first-child {
    margin-top: -20px;
    margin-right: 6px;
}

/* ending quotation mark - position */
.welcome-container .slide-1 p > span+img {
    margin-top: -20px;
}

/* quote marks */
.welcome-container .slide-1 p + img {
    margin-top: -50px;
}

/* Where culture and history */
.welcome-container .slide-1 p {
    margin: 9px 0 0 -35px;
    font-size: 18px;
    letter-spacing: 1.06px;
    text-shadow: 0 4px 0 #000;
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-1 p {
margin: 11px 0 0 -42px;
font-size: 22px;
letter-spacing: 1.06px;
text-shadow: 0 4px 0 #000;
}
}

/* GERARD C. RICKHOFF, BEXAR COUNTY CLERK */
.welcome-container .slide-1 div div {
    font-size: 11px;
    margin: 0px 0 0 200px;
    letter-spacing: 1.12px;
    text-shadow: 0 4px 0 #000000;
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-1 div div {
    font-size: 12px;
    margin: 2px 0 0 270px;
}
}

/*-------------------- Slide 2 ----------------------*/

/* THE TOP 5 SERVICES */
.welcome-container .slide-2 > div {
    text-align: left;
}

.welcome-container .slide-2 h3 {
    margin: 11px 0 5px 20px;
    font-size: 14px;
    color: #FE5C42;
    letter-spacing: 1.45px;
    text-shadow: 0 4px 0 #000000;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-2 h3 {
    margin: 15px 0 9px 20px;
    font-size: 20px;
    letter-spacing: 1.83px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-2 h3 {
    margin: 24px 0 16px 24px;
    font-size: 26px;
    letter-spacing: 2.44px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-2 h3 {
    margin: 28px 0 28px 31px;
    font-size: 35px;
    letter-spacing: 3.28px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-2 h3 {
    margin: 33px 0 16px 33px;
    font-size: 26px;
    letter-spacing: 2.44px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-2 h3 {
    margin: 46px 0 35px 46px;
    font-size: 24px;
    letter-spacing: 2.20px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-2 h3 {
    margin: 55px 0 42px 55px;
    font-size: 28px;
    letter-spacing: 2.62px;
}
}

/* Shortened heading: TOP 5 SERVICES: */
.welcome-container .slide-2 h3 span {
    display: none;
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-2 h3 span {
    display: inline;
}
}

/* Real Property/Land Records */
.welcome-container .slide-2 li {
    margin-left: 17px;
    margin-bottom: 4px;
    font-size: 12px;
    color: #FFF;
    letter-spacing: .69px;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-2 li {
    margin-left: 17px;
    margin-bottom: 7px;
    font-size: 18px;
    letter-spacing: .86px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-2 li {
    margin-left: 24px;
    margin-bottom: 15px;
    font-size: 24px;
    letter-spacing: 1.15px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-2 li {
    margin-left: 31px;
    margin-bottom: 25px;
    font-size: 32px;
    letter-spacing: 1.55px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-2 li {
    margin-left: 33px;
    margin-bottom: 17px;
    font-size: 24px;
    letter-spacing: 1.15px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-2 li {
    margin-left: 46px;
    margin-bottom: 29px;
    font-size: 24px;
    letter-spacing: 1.13px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-2 li {
    margin-left: 55px;
    margin-bottom: 35px;
    font-size: 28px;
    letter-spacing: 1.35px;
}
}

.welcome-container .slide-2 li a {
    text-decoration: underline;
}

. .slide-2 li a:focus,
.welcome-container .slide-2 li a:hover {
    text-decoration: none;
    color: #fe9180;
}

/* 1, 2, 3, etc. */
.welcome-container .slide-2 li img {
    width: 18px;
    margin-top: -1px;
    margin-right: 15px;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-2 li img {
    width: 21px;
    margin-top: -3px;
    margin-right: 15px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-2 li img {
    width: 26px;
    margin-top: -4px;
    margin-right: 15px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-2 li img {
    width: 34px;
    margin-top: -7px;
    margin-right: 15px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-2 li img {
    width: 27px;
    margin-top: -3px;
    margin-right: 15px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-2 li img {
    width: 32px;
    margin-top: -4px;
    margin-right: 15px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-2 li img {
    width: 38px;
    margin-top: -5px;
    margin-right: 26px;
}
}

/*----------------- Slide 3 ---------------------*/

/* Outer Container */
.welcome-container .slide-3 {
    margin-top: 131px;
    margin-left: 10px;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-3 {
    margin-top: 165px;
    margin-left: 13px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-3 {
    margin-top: 222px;
    margin-left: 17px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-3 {
    margin-top: 300px;
    margin-left: 23px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-3 {
    margin-top: 248px;
    margin-left: 19px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-3 {
    margin-top: 350px;
    margin-left: 28px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-3 {
    margin-top: 416px;
    margin-left: 33px;
}
}

/* Inner container */
.welcome-container .slide-3 > div {
    text-align: left;
}

/* Official Public Records Search */
.welcome-container .slide-3 h3 {
    margin: 0;
    font-size: 14px;
    color: #fff;
    letter-spacing: .49px;
    text-shadow: 0 4px 0 #000000;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-3 h3 {
    font-size: 16px;
    letter-spacing: .62px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-3 h3 {
    font-size: 23px;
    letter-spacing: .83px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-3 h3 {
    font-size: 32px;
    letter-spacing: 1.11px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-3 h3 {
    font-size: 27px;
    letter-spacing: .92px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-3 h3 {
    font-size: 19px;
    letter-spacing: 0.66px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-3 h3 {
    margin-top: 0;
    font-size: 23px;
    letter-spacing: 0.79px;
}
}

/* Shortened heading: TOP 5 SERVICES: */
.welcome-container .slide-3 h3 span {
    display: none;
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-3 h3 span {
    display: inline;
}
}

/* SEARCH FOR DOCUMENTS... */
.welcome-container .slide-3 p {
display: none;
font-size: 13px;
color: #FFB3A7;
letter-spacing: 0.68px;
line-height: 20px;
text-shadow: 0 2px 0 #000000;
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-3 p {
    display: block;
    width: 563px;
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: 0.57px;
    line-height: 17px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-3 p {
    width: 670px;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 0.68px;
    line-height: 20px;
}
}

/* SEARCH RECORDS button */

/* switch buttons between mobile & desktop */
.welcome-btn.target-blank {
    display: none;
}

@media only screen and (min-width: 1280px) {
.welcome-btn.no-target-blank  {
    display: none;
}
.welcome-btn.target-blank {
    display: block;
}
}

.welcome-btn {
    float: right;
    width: 60px;
    margin-top: -19px;
    margin-right: 8px;
    padding: 3px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    color: #FFF;
    letter-spacing: 0.21px;
    text-align: center;
    background: #FE5C42;
    border-radius: 4px;
}
@media only screen and (min-width: 414px){
.welcome-btn {
    width: 124px;
    margin-top: -23px;
    margin-right: 8px;
    padding: 5px 0;
    font-size: 13px;
}
}
@media only screen and (min-width: 600px) {
.welcome-btn {
    width: 147px;
    margin-top: -30px;
    margin-right: 13px;
     padding: 7px 0 6px 0;
}
}
@media only screen and (min-width: 800px) {
.welcome-btn {
    width: 196px;
    margin-top: -46px;
    margin-right: 15px;
    padding: 17px 0 17px 0;
    font-size: 18px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-btn {
    width: 132px;
    margin-top: -38px;
    margin-right: 15px;
    padding: 11px 0 10px 0;
    font-size: 12px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-btn {
    width: 150px;
    margin-top: -52px;
    margin-right: 15px;
    padding: 7px 0 6px 0;
    font-size: 12px;
    letter-spacing: 0.18px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-btn {
    width: 150px;
    margin-top: -54px;
    margin-right: 18px;
    padding: 8px 0 7px 0;
    font-size: 14px;
    letter-spacing: 0.21px;
}
}

.welcome-btn a:focus,
.welcome-btn a:hover {
    text-decoration: none;
    border-radius: 4px;
    padding: 6px;
   outline: 1px solid #fff;
   color: #fff;
}

/* shorten SEARCH button */
.welcome-btn span {
    display: none;
}
@media only screen and (min-width: 414px) {
.welcome-btn span {
    display: inline;
}
}

/*----------------- Slide 4 ---------------------*/

/* Outer Container */
.welcome-container .slide-4 {
    margin-top: 11px;
    margin-left: 8px;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-4 {
    margin-top: 13px;
    margin-left: 10px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-4 {
    margin-top: 18px;
    margin-left: 13px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-4 {
    margin-top: 24px;
    margin-left: 18px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-4 {
    margin-top: 21px;
    margin-left: 15px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-4 {
    margin-top: 29px;
    margin-left: 21px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-4 {
    margin-top: 34px;
    margin-left: 25px;
}
}

/* Inner container */
.welcome-container .slide-4 > div {
    text-align: left;
}

/* 300 */
.welcome-container .slide-4 div div:first-child {
    width: 94px;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-4 div div:first-child {
    width: 102px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-4 div div:first-child {
    width: 136px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-4 div div:first-child {
    width: 183px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-4 div div:first-child {
    width: 152px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-4 div div:first-child {
    width: 220px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-4 div div:first-child {
    width: 262px;
}
}

/* SAN ANTONIO */
.welcome-container .slide-4 div + div  {
    margin-top: 3px;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-4 div + div  {
    margin-top: 4px;
    font-size: 13px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-4 div + div  {
    margin-top: 5px;
    font-size: 18px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-4 div + div  {
    margin-top: 7px;
    font-size: 24px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-4 div + div  {
        margin-top: 6px;
    font-size: 20px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-4 div + div  {
    margin-top: 8px;
    font-size: 29px;
    letter-spacing: 0.79px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-4 div + div {
    margin-top: 10px;
    font-size: 34px;
}
}

/* Tri-Centennial Anniversary */
.welcome-container .slide-4 h3 {
    margin-top: 44px;
    margin-bottom: 5px;
    font-family: Arvo, serif;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0.79px;
    text-shadow: 0 4px 0 #000000;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-4 h3 {
    margin-top: 60px;
    font-size: 18px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-4 h3 {
    margin-top: 90px;
    font-size: 24px;
    letter-spacing: .83px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-4 h3 {
    margin-top: 140px;
    font-size: 32px;
    letter-spacing: 1.11px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-4 h3 {
    margin-top: 106px;
    font-size: 27px;
    letter-spacing: .92px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-4 h3 {
    margin-top: 196px;
    font-size: 19px;
    letter-spacing: 0.66px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-4 h3 {
    margin-top: 240px;
    font-size: 23px;
    letter-spacing: 0.79px;
}
}

/* line break on: Tri-Centennial Anniversary*/
.welcome-container .slide-4 h3 span {
    display: block;
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-4 h3 span {
    display: inline;
}
}

/* THE CITY OF SAN ANTONIO WITH ITS FIVE MISSIONS */
.welcome-container .slide-4 p {
    display: none;
    margin-top: 0;
    width: 650px;
    font-size: 13px;
    color: #FE5C42;
    letter-spacing: 0.68px;
    line-height: 20px;
    text-shadow: 0 2px 0 #000000;
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-4 p {
    display: block;
    width: 557px;
    font-size: 11px;
    letter-spacing: 0.68px;
    line-height: 20px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-4 p {
    width: 650px;
    font-size: 13px;
    letter-spacing: 0.68px;
    line-height: 20px;
}
}

/* READ THE STORY button */
.welcome-container .slide-4 .welcome-btn {
    width: 110px;
    margin-top: -34px;
    margin-right: 15px;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-4 .welcome-btn {
    width: 124px;
    margin-top: -36px;
    margin-right: 15px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-4 .welcome-btn {
    width: 143px;
    margin-top: -40px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-4 .welcome-btn {
    width: 196px;
    margin-top: -60px;
    margin-right: 22px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-4 .welcome-btn {
    width: 132px;
    margin-top: -52px;
    margin-right: 15px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-4 .welcome-btn {
    width: 150px;
    margin-top: -52px;
}
}


/*----------------- Slide 5 ---------------------*/
@media only screen and (max-width: 413px) {
.welcome-container .slide-5 .welcome-btn {
    width: 100px;
}
}

/*----------------- Slide 6 ---------------------*/

/* Outer Container */
.welcome-container .slide-6 {
    margin-top: 13px;
    margin-left: 10px;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-6 {
    margin-top: 20px;
    margin-left: 13px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-6 {
    margin-top: 35px;
    margin-left: 17px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-6 {
    margin-top: 48px;
    margin-left: 23px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-6 {
    margin-top: 39px;
    margin-left: 19px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-6 {
    margin-top: 84px;
    margin-left: 33px;
}
}
@media only screen and (min-width: 1600px) {
.welcome-container .slide-6 {
    margin-top: 100px;
}
}

/* Inner container */
.welcome-container .slide-6 > div {
    width: 313px;
    text-align: left;
}

/* Bexar County Historical Spanish Archives */
.welcome-container .slide-6 h3 {
    width: 167px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    letter-spacing: .49px;
    line-height: 16px;
    text-shadow: 0 2px 4px #02102D;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-6 h3 {
    width: 211px;
    font-size: 18px;
    letter-spacing: .62px;
    line-height: 20px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-6 h3 {
    width: 281px;
    font-size: 24px;
    letter-spacing: .82px;
    line-height: 26px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-6 h3 {
    width: 378px;
    font-size: 32px;
    letter-spacing: 1.11px;
    line-height: 35px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-6 h3 {
    width: 313px;
    font-size: 27px;
    letter-spacing: .92px;
    line-height: 29px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-6 h3 {
    width: 382px;
    margin-top: 0;
    font-size: 32px;
    letter-spacing: 0.17px;
    line-height: 36px;
}
}

/* The Bexar Archives currently reside */
.welcome-container .slide-6 p {
    display: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: -0.03px;
    line-height: 17px;
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-6 p {
    display: block;
    width: 350px;
    margin-top: 6px;
    font-family: 'Open Sans', san-serif;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: -0.03px;
    line-height: 17px;
}
}

/* LEARN MORE button */
.welcome-container .slide-6 .welcome-btn {
float: none;
width: 100px;
margin-top: 0;
}
@media only screen and (min-width: 414px) {
.welcome-container .slide-6 .welcome-btn {
    width: 119px;
    margin-top: 16px;
}
}
@media only screen and (min-width: 600px) {
.welcome-container .slide-6 .welcome-btn {
    width: 119px;
    margin-top: 16px;
}
}
@media only screen and (min-width: 800px) {
.welcome-container .slide-6 .welcome-btn {
    width: 160px;
    margin-top: 16px;
}
}
@media only screen and (min-width: 1024px) {
.welcome-container .slide-6 .welcome-btn {
    width: 115px;
    margin-top: 16px;
}
}
@media only screen and (min-width: 1366px) {
.welcome-container .slide-6 .welcome-btn {
    width: 119px;
    margin-top: 16px;
}
}


/*------------- Dot Slide Indicators ------------*/


/* ol Container: Dot indicators */
.welcome-container .carousel-indicators {
    /* bootstrap.css */
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;

    /* My Styles */
    width: 120px;
    bottom: 25px;
    left: 177px;
    line-height: 0;
    border-radius: 4px;
}
@media (min-width: 414px) {
.welcome-container .carousel-indicators  {
   width: 130px;
   left: 234px;
}
}
@media (min-width: 600px) {
.welcome-container .carousel-indicators  {
    left: 335px;
}
}
@media (min-width: 800px) {
.welcome-container .carousel-indicators  {
    left: 480px;
}
}
@media (min-width: 1024px) {
.welcome-container .carousel-indicators  {
    left: 383px;
}
}
@media (min-width: 1366px) {
.welcome-container .carousel-indicators  {
    bottom: 35px;
    left: 592px;
}
}
@media (min-width: 1600px) {
.welcome-container .carousel-indicators  {
    bottom: 45px;
    left: 708px;
}
}

.welcome-container .carousel-indicators :focus {
    padding: 0;
    border-radius: 4px;
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    outline: 1px solid #0086F1;
}

/* The Dot indicator li */
.welcome-container .carousel-indicators  li {
    /* bootstrap.css */
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 10px;

    /* My Styles */
    width: 30px;
    height: 30px;
    margin: 3px;
    background: #E4B291;
    border: 1px solid transparent;



}
@media screen and (min-width: 414px) {
.welcome-container .carousel-indicators  li {
    margin: 3px 4px 3px 3px;
}
}

/* Active Dot Indicator */
.welcome-container .carousel-indicators  .active {
    /* bootstrap.css */
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;

    /* My Styles */
    width: 10px;
    height: 10px;
    margin: 3px 3px;
    background: #B84323;

}

.welcome-container .carousel-indicators  li,
.welcome-container .carousel-indicators  li.active {
    /* Bootbootstrap-accessibility.css */
    height: 18px;
    width: 18px;
    border-width: 2px;
    position: relative;
    box-shadow: 0px 0px 0px 1px #808080;

    /* My Styles */
    height: 10px;
    width: 10px;
    box-shadow: none;
}

.welcome-container .carousel-indicators .active li {
    /* Bootbootstrap-accessibility.css */
    background-color: rgba(100, 149, 253, 0.6);
    background-color: #E4B291;
}

.welcome-container .carousel-indicators .active li.active {
    /* Bootbootstrap-accessibility.css */
    background-color: white;

    /* My Styles */
    background-color: #B84323;
    outline: none;
}

/* Dot indicators focus */
.carousel-tablist-highlight {
    /* Bootbootstrap-accessibility.css */
    display: block;
    outline: 2px solid transparent;
    background-color: transparent;
    box-shadow: 0px 0px 0px 1px transparent
}

.carousel-indicators li:hover {
    background: #3063D2;
    background: #82a1e3;
}

.carousel-tablist-highlight.hover,
.carousel-tablist-highlight.focus {
    /* Bootbootstrap-accessibility.css */
    outline: 2px solid #6495ED;
    background-color: rgba(0, 0, 0, 0.4);

    /* My Style */
    background-color: transparent;
    outline: none;
    outline: 2px solid #0086F1;
}

/* Carousel Pause Button */
.carousel-pause-button {
    /* Bootbootstrap-accessibility.css */
    position: absolute;
    top: -30em;
    left: -300em;
    display: block;

    /* My Styles */
    display: none;
    position: absolute;
    top: 420px;
    left: 220px;
    font-family: 'Open Sans';
    font-size: 16px;
    font-weight: 600;
    color: #B84323;
    letter-spacing: 0.53px;
    border:none;
    background: #F6E3C5;
}

/* Carousel Pause Button - displayed on focus */
.carousel-pause-button.focus {
    /* Bootbootstrap-accessibility.css */
    top: 0.5em;
    left: 0.5em

    /* My Styles */
    top: 420px;
    left: 220px;
    outline: 1px solid blue;
    border-radius: 0;
}

/* pause icon */
.carousel-pause-button:before {
    content: url('../images/icon-pause.svg');
    position: relative;
    top: 5px;
    margin-right: 8px;
}

.carousel:hover .carousel-caption,
.carousel.contrast .carousel-caption {
     /* Bootbootstrap-accessibility.css */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    /* My Styles */
    background-color: transparent;
     z-index: 0;

}

/* CONTAINER for next & prev buttons */
.carousel-control {
    /* bootstrap.css */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    background-color: rgba(0, 0, 0, 0);
    filter: alpha(opacity=50);
    opacity: .5;

    /* My Styles */
    opacity: 1;  /* show prev & next arrows at full opacity */
    background: none;
}

.carousel-control.left {
    /* bootstrap.css */
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-repeat: repeat-x;

    /* My Styles */
    width: 50px;
    top: 183px;
    left: 10px;
    background-image: none;
}
@media only screen and (min-width: 414px) {
.carousel-control.left {
    top: 227px;
    left: 20px;
}
}
@media only screen and (min-width: 600px) {
.carousel-control.left {
    top: 300px;
    left: 60px;
}
}
@media only screen and (min-width: 800px) {
.carousel-control.left {
    top: 402px;
    left: 90px;
}
}
@media only screen and (min-width: 1024px) {
.carousel-control.left {
    top: 332px;
    left: 80px;
}
}
@media only screen and (min-width: 1366px) {
.carousel-control.left {
    width: 68px;
    top: 475px;
    left: 130px;
}
}
@media only screen and (min-width: 1600px) {
.carousel-control.left {
    top: 555px;
    left: 172px;
}
}
.carousel-control.right {
    /* bootstrap.css */
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-repeat: repeat-x;

    width: 50px;   /* My CSS */
    top: 183px;
    right: 10px;
    background-image: none;
}
@media only screen and (min-width:414px) {
.carousel-control.right {
    top: 227px;
    right: 20px;
}
}
@media only screen and (min-width:600px) {
.carousel-control.right {
    top: 296px;
    right: 60px
}
}
@media only screen and (min-width:800px) {
.carousel-control.right {
    top: 400px;
    right: 90px;
}
}
@media only screen and (min-width:1024px) {
.carousel-control.right{
    top: 332px;
    right: 80px;
}
}
@media only screen and (min-width:1366px) {
.carousel-control.right{
    width: 68px;
    top: 475px;
    right: 130px;
}
}
@media only screen and (min-width:1600px) {
.carousel-control.right{
    top: 555px;
    right: 172px;
}
}

.carousel-control:hover,
.carousel-control:focus {
    /* bootstrap.css */
    color: #fff;
    text-decoration: none;
    filter: alpha(opacity=90);
    outline: 0;
    opacity: .9;

    opacity: 1;
}

a.carousel-control:focus,
a.carousel-control:hover {
    /* Bootbootstrap-accessibility.css */
    outline: 2px solid #6495ED;
    background-image: linear-gradient(to right, transparent 0px, rgba(0, 0, 0, 0.5) 100%);
    box-shadow: 0px 0px 0px 1px #000000;

    /* My Styles */
    outline: none;
    background-image: none;
    box-shadow: inset 0 0 4px 1px rgba(41, 159, 255, 1);
    height: 49px;
}
@media only screen and (min-width: 1366px) {
a.carousel-control:focus,
a.carousel-control:hover {
    height: 68px;
}
}

/*--------------- HOMEPAGE: How Can We Help You Today----------------*/

/* Container - How Can We Help Today? & jump menu */
.how-can-we {
    overflow: hidden;
    width: 296px;
    margin: 60px auto 0 auto;
    background-repeat: no-repeat;
}
@media only screen and (min-width: 414px) {
.how-can-we {
    width: 300px;

}
}
@media only screen and (min-width: 600px) {
.how-can-we {
    width: 400px;
}
}
@media only screen and (min-width: 800px) {
.how-can-we {
    width: 450px;
}
}
@media only screen and (min-width: 1024px) {
.how-can-we {
    float: right;
    width: 300px;
    margin-top: 0;
}
}
@media only screen and (min-width: 1366px) {
.how-can-we {
    width: 365px;
}
}
@media only screen and (min-width: 1600px) {
.how-can-we {
    width: 430px;
    margin-top: 5px;
}
}

/* Container for headshot & HOW CAN WE HELP YOU TODAY? */
.how-can-we-sub {
    overflow: hidden;
}

/* Clerk's headshot */
.headshot {
    float: left;
    width: 70px;
}
@media only screen and (min-width: 414px) {
.headshot {
    width: 85px;
}
}
@media only screen and (min-width: 1600px) {
.headshot {
    width: 103px;
}
}

/* How Can We Help Today? */
.how-can-we-sub h2 {
    float: left;
    width: 180px;
    margin-top: 12px;
    margin-left: 13px;
    font-family: Arvo, serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1.4px;
    line-height: 21px;
    color: #B84323;
    text-shadow: 0 4px 0 rgba(190, 69, 53, 0.20);
}
@media only screen and (min-width: 414px) {
.how-can-we-sub h2 {
    width: 200px;
    margin-top: 15px;
    font-size: 18px;
    letter-spacing: 1.6px;
    line-height: 24px;
}
}
@media only screen and (min-width: 600px) {
.how-can-we-sub h2 {
    width: 240px;
    font-size: 21px;
    letter-spacing: 1.9px;
    line-height: 26px;

}
}
@media only screen and (min-width: 1024px) {
.how-can-we-sub h2 {
    width: 200px;
    margin-top: 17px;
    margin-left: 13px;
    font-size: 18px;
    letter-spacing: 1.6px;
    line-height: 24px;
}
}
@media only screen and (min-width: 1366px) {
.how-can-we-sub h2 {
    width: 262px;
    margin-top: 11px;
    margin-left: 17px;
    font-size: 24px;
    letter-spacing: 2.1px;
    line-height: 32px;
}
}
@media only screen and (min-width: 1600px) {
.how-can-we-sub h2 {
    width: 307px;
    margin-top: 15px;
    margin-left: 20px;
    font-size: 28px;
    letter-spacing: 2.5px;
    line-height: 37px;
}
}

/* Help You Today? */
@media only screen and (min-width: 768px) {
.how-can-we-sub h2 span {
    display: block;
    margin-top: 4px;
}
}
@media only screen and (min-width: 1024px) {
.how-can-we-sub h2 span {
    margin-top: 8px;
}
}
@media only screen and (min-width: 1366px) {
.how-can-we-sub h2 span {
    margin-top: 14px;
}
}
@media only screen and (min-width: 1600px) {
.how-can-we-sub h2 span {
    margin-top: 20px;
}
}

/* Container - jump menu */
.jump-menu {
    margin: 20px auto 0 auto;
}

/* I need information on... */
.jump-menu p {
    margin-top: 15px;
    margin-left: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #61918D;
    letter-spacing: 0.44px;
    line-height: 10px;
    text-align: left;
}
@media only screen and (min-width: 768px) {
.jump-menu p {
    margin-top: 60px;
    margin-top: 12px;
    line-height: 19px;
}
}

@media only screen and (min-width: 1024px) {
.jump-menu p {
    margin-top: 12px;
    line-height: 19px;
    font-size: 14px;
}
}
@media only screen and (min-width: 1366px) {
.jump-menu p {
    margin-top: 20px;
    line-height: 19px;
    font-size: 17px;
}
}
@media only screen and (min-width: 1600px) {
.jump-menu p {
    margin-top: 18px;
    line-height: 19px;
    font-size: 20px;
}
}

.jump-menu > p {
    font-size: 20px;
    color: #61918D;
}

/* Select One */
.jump-menu select {
    font-weight: 400;
    width: 290px;
    height: 41px;
    margin: 0 3px;
    padding-left: 9px;
    padding-right: 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #53312B;
    letter-spacing: 0.38px;
    line-height: 16px;
    text-indent: -1px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #FDF5EA;
    background-image: url('../images/up_down_arrow_1.svg');
    background-size: 7px 15px;
    background-repeat: no-repeat;
    background-position: 271px 12px;
    border: 1px solid rgba(83, 49, 43, 0.25);
    border-radius: 4px;
}

/* Remove FF outline on select:focus */
.jump-menu select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
@media only screen and (min-width: 600px) {
.jump-menu select {
    width: 396px;
    height: 50px;
    margin-top: 1px;
    padding-left: 11px;
    padding-right: 40px;
    font-size: 16px;
    background-size: 9px 19px;
    background-position: 372px 15px;
}
}
@media only screen and (min-width: 800px) {
.jump-menu select {
    width: 446px;
    height: 58px;
    padding-left: 13px;
    font-size: 18px;
    background-position: 420px 19px;
}
}
@media only screen and (min-width: 1024px) {
.jump-menu select {
    width: 297px;
    height: 37px;
    margin-top: -5px;
    padding-left: 11px;
    padding-right: 30px;
    font-size: 13px;
    background-size: 7px 15px;
    background-position: 278px 10px;
}
}
@media only screen and (min-width: 1366px) {
.jump-menu select {
    width: 360px;
    height: 50px;
    margin-top: -1px;
    padding-left: 11px;
    padding-right: 40px;
    font-size: 16px;
    background-size: 8px 17px;
    background-position: 338px 16px;
}
}
@media only screen and (min-width: 1600px) {
.jump-menu select {
    width: 422px;
    height: 58px;
    margin-top: 1px;
    padding-left: 13px;
    font-size: 18px;
    background-size: 9px 19px;
    background-position: 396px 19px;
}
}

.jump-menu select:focus,
.jump-menu select:hover {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
}

/* Submit button */
.submit-1 {
    width: 290px;
    margin-top: 29px;
    margin-left: 3px;
    font-size: 21px;
    padding: 11px 0 10px 0;
    font-size: 17px;
    color: #FFF;
    letter-spacing: 0.3px;
    text-align: center;
    background: #61918D;
    border: none;
    border-radius: 4px;
}
@media only screen and (min-width: 600px) {
.submit-1 {
    width: 396px;
    font-size: 19px;
    padding: 15px 0 15px 0;
}
}
@media only screen and (min-width: 800px) {
.submit-1 {
    width: 446px;
    font-size: 21px;
    padding: 19px 0 18px 0;
}
}
@media only screen and (min-width: 1024px) {
.submit-1 {
    width: 297px;
    font-size: 17px;
    padding: 7px 0 10px 0;
}
}
@media only screen and (min-width: 1366px) {
.submit-1 {
    width: 360px;
    font-size: 17px;
    padding: 10px 0 13px 0;

}
}
@media only screen and (min-width: 1600px) {
.submit-1 {
    width: 422px;
    font-size: 21px;
    padding: 13px 0 16px 0;
}
}


.submit-1:hover,
.submit-1:focus {
    font-size: 17px;
    background: #2a837c;
    background: #25746d;
}
@media only screen and (min-width: 600px) {
.submit-1:hover,
.submit-1:focus {
    font-size: 21px;
}
}
@media only screen and (min-width: 800px) {
.submit-1:hover,
.submit-1:focus {
    font-size: 21px;
}
}
@media only screen and (min-width: 1024px) {
.submit-1:hover,
.submit-1:focus {
    font-size: 19px;
}
}
@media only screen and (min-width: 1366px) {
.submit-1:hover,
.submit-1:focus {
    font-size: 21px;
}
}

/* select menu disabled */
.jump-menu select:disabled {
    opacity: 0.6;
}

.jump-menu button:disabled {
    opacity: 0.6;
}


/*----------------- HOMEPAGE: Meet Your Clerk ------------------------ */



/* Container for 3 Images: Map of San Antonio, Church of the Square, etc. */
.historical-archives-images {

}

/* Container for each Image: Map of San Antonio, Church of the Square, etc. */
@media only screen and (min-width: 1024px) {
.historical-archives-images div {

}
}

/* Images: Map of San Antonio, Church of the Square, etc. */
.historical-archives img {
    display: block;
}

/* Outer Container for 3 images Meet Your Clerk, Visit The Courthouse, etc. */
.meet-your-clerk {
    background-image: url('../images/bg-image-3.jpg');
    background-attachment: fixed;
}

/* Inner Container for 3 images Meet Your Clerk, Visit The Courthouse, etc.*/
.meet-sub {
    overflow: hidden;
    padding: 55px 0 85px 0;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid #E8CDAF;
}

@media only screen and (min-width: 1024px) {
.meet-sub {
    width: 981px;
    padding: 45px 0 90px 0;
}
}

@media only screen and (min-width: 1366px) {
.meet-sub {
    width: 1230px;
    padding: 65px 0 100px 0;
}
}
@media only screen and (min-width: 1600px) {
.meet-sub {
    width: 1458px;
    padding: 57px 0 114px 0;
}
}

/* div container for each image Meet Your Clerk, Visit The Courthouse, etc. */
.meet-sub > div {
    max-width: 280px;
    margin: 45px auto;
}
@media only screen and (min-width: 414px) {
.meet-sub div {
    max-width: 280px;
}
}
@media only screen and (min-width: 1024px) {
.meet-sub div {
    float: left;
    max-width: 274px;
    margin: 45px 25px ;
}
}
@media only screen and (min-width: 1366px) {
.meet-sub div {
    max-width: 280px;
    margin: 45px 65px;
}
}

@media only screen and (min-width: 1600px) {
.meet-sub div {
    max-width: 429px;
    margin: 45px 28px 20px 28px;
}
}

/* a container for each image Meet Your Clerk, Visit The Courthouse, etc. */
.meet-sub a {
    display: block;
}

/* image Meet Your Clerk, Visit the Courthouse, etc. */
.meet-sub > div > a:not(.zoom-icon) > img {
    border: 8px solid #fdf5ea;
    border-radius: 7px;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
}

.meet-your-clerk a:focus,
.meet-your-clerk a:hover {
    padding: 0;
    text-decoration: none;
    border-radius: 4px;
    text-decoration: none;
    color: black;
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
}

/* Meet Your Clerk: H2 */

.meet-your-clerk h2 {
    font-weight: 600;
    font-size: 17px;
    color: #61918D;
    letter-spacing: 0.6px;
    line-height: 0;
}
@media only screen and (min-width: 1366px) {
    .meet-your-clerk h2 {
        margin-top: 20px;
        font-size: 21px;
    }
}
@media only screen and (min-width: 1600px) {
    .meet-your-clerk h2 {
        margin-top: 25px;
        font-size: 24px;
    }
}

/* The Honorable Gerard: H3 */

.meet-your-clerk h3 {
    margin-top: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #53312B;
    letter-spacing: 0.45px;
    line-height: 1.5;
}
@media only screen and (min-width: 1366px) {
    .meet-your-clerk h3 {
        margin-top: 14px;
        font-size: 14px;
    }
}
@media only screen and (min-width: 1600px) {
    .meet-your-clerk h3 {
        margin-top: 16px;
        font-size: 18px;
    }
}

.information-list.clerk-bio td:first-child {
    width: 100%;
}

/*---------HOMEPAGE: Statistics About the County Clerk ------------------*/

/* Container: Statistics about the County Clerk */
.statistics {
    background: url('../images/bg-image-1.svg');
}

/* Statistics about the County Clerk */
.statistics h2 {
    font-family: Arvo, serif;
    font-size: 24px;
    font-weight: 400;
    color: #F7E3C3;
    letter-spacing: 3px;
    line-height: 30px;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.20);
    text-align: center;
    margin: 0;
    padding: 30px 0;
}
@media only screen and (min-width: 1024px) {
    .statistics h2 {
        font-size: 32px;
    }
}
@media only screen and (min-width: 1280px) {
    .statistics h2 {
        line-height: 40px;
    }
}

/* Container for content with bg image */
.bg {
    background-image: linear-gradient(-180deg, rgba(255,255,255,0.60) 0%, #F7E3C3 100%);
    background-repeat: repeat;
    background-attachment: fixed;
    border-top: 1px solid #E7CBAF;
}


/* Container:  In 2017, we recorded 279,391 documents */
.a2017 {
    padding: 23px 15px;
    margin: 0 auto;
    max-width: 1200px;
}

/* In 2017, we recorded 279,391 documents */
.a2017 h2 {
    padding-top: 50px;
    font-family: Arvo, serif;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #53312B;
    letter-spacing: 0.09px;
    line-height: 23px;
}
@media only screen and (min-width: 568px) {
.a2017 h2 {
    font-size: 16px;
    letter-spacing: 0.11px;
    line-height: 27px;
}
}
@media only screen and (min-width: 1024px) {
.a2017 h2 {
    font-size: 20px;
    letter-spacing: 0.13px;
    line-height: 33px;
}
}
@media only screen and (min-width: 1600px) {
.a2017 h2 {
    font-size: 24px;
    letter-spacing: 0.16px;
    line-height: 40px;
}
}

/* Hover over the graph below to */
@media only screen and (min-width: 800px) {
.a2017 span{
    display: block;
}
}


/* Outer container - Stats Donut & 300K DOCS */
.circle {
    overflow: hidden;
    margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
    .circle {
        max-width: 1000px;
    }
}

@media only screen and (min-width: 1280px) {
    .circle {
        max-width: 1200px;
    }
}

/* Container for Stats Donut */
.float-1 {
    max-width: 600px;
    margin: 0 auto;

}

@media only screen and (min-width: 1024px) {
.float-1 {
    float: left;
    max-width: 65%;
}
}

@media only screen and (min-width: 1280px) {
.float-1 {
    max-width: 50%;
    margin-left: 100px;
}
}

@media only screen and (min-width: 1600px) {
.float-1 {
    max-width: 50%;
    margin-left: 140px;
}
}

/* Inner Container - stats donut */
.circle-statistics {
    position: relative;
    max-width: 280px;
    margin: 36px auto 0 auto;
    text-align: center;

}
@media only screen and (min-width: 414px) {
.circle-statistics {
    max-width: 360px;
}
}
@media only screen and (min-width: 1024px) {
.circle-statistics {
    max-width: 450px;
    padding: 0 20px;
}
}
@media only screen and (min-width: 1600px) {
.circle-statistics {
    max-width: 445px;
    padding: 0;
}
}

/* hover area for: Marriage Licenses */
.area-1 {
    width: 40px;
    height: 45px;
    position: absolute;
    left: 46px;
    top: 36px;
}

@media only screen and (min-width: 414px) {
.area-1 {
    width: 48px;
    height: 50px;
    left: 66px;
    top: 55px;
}
}

@media only screen and (min-width: 1024px) {
.area-1 {
    width: 48px;
    height: 60px;
    left: 100px;
    top: 60px;
}
}

@media only screen and (min-width: 1600px) {
.area-1 {
    width: 55px;
    height: 65px;
    left: 87px;
    top: 68px;
}
}


/* hover area for: Assumed Names/DBA */
.area-2 {
    background: none;
    width: 34px;
    height: 50px;
    position: absolute;
    left: 85px;
    top: 20px;
}

@media only screen and (min-width: 414px) {
.area-2 {
    background: none;
    width: 38px;
    height: 60px;
    position: absolute;
    left: 114px;
    top: 20px;
}
}
@media only screen and (min-width: 1024px) {
.area-2 {
    background: none;
    width: 45px;
    height: 65px;
    position: absolute;
    left: 149px;
    top: 24px;
}
}
@media only screen and (min-width: 1600px) {
.area-2 {
    background: none;
    width: 48px;
    height: 70px;
    position: absolute;
    left: 142px;
    top: 28px;
}
}

/* hover area for: Real Property Records */
.area-3 {
    width: 55px;
    height: 55px;
    position: absolute;
    left: 152px;
    top: 215px;
}

@media only screen and (min-width: 414px) {
.area-3 {
    width: 90px;
    height: 75px;
    position: absolute;
    left: 184px;
    top: 275px;
}
}

@media only screen and (min-width: 1024px) {
.area-3 {
    width: 87px;
    height: 75px;
    position: absolute;
    left: 240px;
    top: 315px;
}
}

@media only screen and (min-width: 1600px) {
.area-3 {
    width: 85px;
    height: 85px;
    position: absolute;
    left: 242px;
    top: 340px;
}
}

/* hover area for: Foreclosure Notices */
.area-4 {
    width: 26px;
    height: 70px;
    position: absolute;
    left: 118px;
    top: 0px;
}

@media only screen and (min-width: 414px) {
.area-4 {
    width: 28px;
    height: 70px;
    position: absolute;
    left: 152px;
    top: 5px;
}
}

@media only screen and (min-width: 1024px) {
.area-4 {
    width: 30px;
    height: 85px;
    position: absolute;
    left: 196px;
    top: 5px;
}
}
@media only screen and (min-width: 1600px) {
.area-4 {
    width: 40px;
    height: 85px;
    position: absolute;
    left: 188px;
    top: 5px;
}
}

/* display on hover: Marriage License: 14,744, etc */
.marriage,
.assumed,
.real,
.fore {
    overflow: hidden;
    position: relative;
    padding: 10px 0 10px 10px;
    font-size: 12px;
    letter-spacing: 0.22px;
    text-align: left;
    color: white;
    opacity: 0;
    background: #485465;
    border-radius: 2px;
}
@media only screen and (min-width: 1024px) {
.marriage,
.assumed,
.real,
.fore {
    padding: 15px 0 15px 15px;
    font-size: 15px;
    letter-spacing: .28px;
}
}

.marriage {
    width: 208px;
    left: 50px;
    top: -205px;
}
@media only screen and (min-width: 414px) {
.marriage {
    left: 70px;
    top: -265px;
}
}
@media only screen and (min-width: 1024px) {
.marriage {
    width: 260px;
    left: 76px;
    top: -302px;
}
}
@media only screen and (min-width: 1600px) {
.marriage {
    left: 85px;
    top: -330px;
}
}

.assumed {
    width: 228px;
    left: 70px;
    top: -263px;
}
@media only screen and (min-width: 414px) {
.assumed {
    left: 112px;
    top: -330px;
}
}
@media only screen and (min-width: 1024px) {
.assumed {
    width: 285px;
    left: 128px;
    top: -380px;
}
}

@media only screen and (min-width: 1600px) {
.assumed {
    left: 145px;
    top: -418px;
}
}

.real {
    width: 238px;
    left: 60px;
    top: -100px;
}
@media only screen and (min-width: 414px) {
.real {
    left: 150px;
    top: -110px;
}
}
@media only screen and (min-width: 600px) {
.real {
    left: 212px;
}
}
@media only screen and (min-width: 1024px) {
.real {
    width: 300px;
    left: 210px;
    top: -134px;
}
}
@media only screen and (min-width: 1280px) {
.real {
    width: 300px;
    left: 238px;
    top: -150px;
}
}
@media only screen and (min-width: 1600px) {
.real {
    left: 260px;
    top: -150px;

}
}

.fore {
    width: 217px;
    left: 80px;
    top: -350px;
}
@media only screen and (min-width: 414px) {
.fore {
    left: 150px;
    top: -420px;
}
}
@media only screen and (min-width: 1024px) {
.fore {
    width: 270px;
    left: 168px;
    top: -492px;
}
}
@media only screen and (min-width: 1600px) {
.fore {
    left: 184px;
    top: -540px;
}
}

/* colored dot for Marriage License: 14,744, etc */
.marriage img,
.assumed img,
.real img,
.fore img {
    float: left;
    margin-top: 3px;
}
@media only screen and (min-width: 1280px) {
.marriage img,
.assumed img,
.real img,
.fore img {
    margin-top: 3px;
}
}

/* Marriage License: 14,744, etc */
.marriage > span,
.assumed > span,
.real > span,
.fore > span {
    float: left;
    display: block;
    margin-left: 9px;
}
@media only screen and (min-width: 1280px) {
.marriage > span,
.assumed > span,
.real > span,
.fore > span {
    margin-left: 10px;
}
}

.marriage > span span,
.assumed > span span,
.real > span span,
.fore > span span {
    margin-left: 10px;
}

/* display block on hover */
.circle-statistics .area-1:hover + .marriage,
.circle-statistics .area-2:hover + .assumed,
.circle-statistics .area-3:hover + .real,
.circle-statistics .area-4:hover + .fore,
.circle-statistics .area-1:focus + .marriage,
.circle-statistics .area-2:focus + .assumed,
.circle-statistics .area-3:focus + .real,
.circle-statistics .area-4:focus + .fore  {
    opacity: 0.9;
    transition: opacity .3s ease-in;
}

/* Outer Container for 300K Docs, 300 Years & 1897 */
.float-2 {
    max-width: 600px;
    margin: -70px auto 0 auto;
}

@media only screen and (min-width: 1024px) {
.float-2 {
    float: right;
    max-width: 35%;
    margin-top: -45px;
}
}

@media only screen and (min-width: 1280px) {
.float-2 {
    max-width: 70%;
    margin-top: -53px;
}
}

@media only screen and (min-width: 1600px) {
.float-2 {
    max-width: 50%;
    margin-top: -48px;
}
}

/* Inner Container for 300k Docs, 300 Years & 1897 ------------*/
@media only screen and (min-width: 1024px) {
.docs {
    margin-top: 70px;
    padding: 0px 0 38px 0px;
}
}
@media only screen and (min-width: 1280px) {
.docs {
    margin-top: 60px;
    padding: 0px 0 80px 0px;
}
}
@media only screen and (min-width: 1600px) {
    .docs {
        padding: 10px 0 100px 280px;
    }
}

/* Inner inner container for 300k Docs, 300 Years & 1897 ------------*/
.docs-sub {
    text-align: center;
    margin: 0px auto 110px 0px;
    max-width: 700px;
}
@media only screen and (min-width: 1280px) {
.docs-sub {
    text-align: center;
    margin: 0px 0 110px 0;
    max-width: 400px;
}
}

/* Container for each one - 300k Docs, 300 Years & 1897 */
.docs-sub>div {
    margin-top: -10px;
}
@media only screen and (min-width: 1024px) {
.docs-sub>div {
    margin-top: -90px;
}
}

/* Icons beside - 300k Docs, 300 Years & 1897 */
.docs img {
    max-height: 55px;
    position: relative;
    left: 0px;
    top: 40px;
}
@media only screen and (min-width: 414px) {
    .docs img {
        max-height: 70px;
        position: relative;
        left: 0px;
        top: 0px;
    }
}
@media only screen and (min-width: 1024px) {
    .docs img {
        position: relative;
        left: -260px;
        top: 130px;
    }
}
@media only screen and (min-width: 1280px) {
    .docs img {
        max-height: 79px;
        left: -310px;
        top: 137px;
    }
}
@media only screen and (min-width: 1600px) {
    .docs img {
        left: -260px;
        top: 135px;
    }
}

/* 300k Docs, 300 Years & 1897 */
.docs h2 {
    margin-top: 40px;
    font-size: 30px;
    font-weight: 600;
    color: #53312B;
    letter-spacing: 1.04px;
    line-height: 65px;
    text-align: center;
}
@media only screen and (min-width: 414px) {
    .docs h2 {
        margin-top: 10px;
        font-size: 34px;
    }
}
@media only screen and (min-width: 1024px) {
    .docs h2 {
        margin-top: 40px;
        font-size: 34px;
        text-align: left;
    }
}
@media only screen and (min-width: 1280px) {
    .docs h2 {
        font-size: 40px;
    }
}
@media only screen and (min-width: 1600px) {
    .docs h2 {
        font-size: 50px;
    }
}

/* Submitted by the citizens */
.docs h3 {
    font-size: 14px;
    color: #53312B;
    margin: -18px 0 90px 0;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}
@media only screen and (min-width: 414px) {
.docs h3 {
    margin: -18px 0 90px 0;
    font-size: 16px;
}
}
@media only screen and (min-width: 1024px) {
    .docs h3 {
        margin: -18px 0 20px 0;
        font-size: 18px;
        text-align: left;
    }
}
@media only screen and (min-width: 1280px) {
    .docs h3 {
        font-size: 18px;
    }
}
@media only screen and (min-width: 1600px) {
    .docs h3 {
        font-size: 18px;
    }
}

/*--------------------HOMEPAGE: Browse The Historical Spanish Archives ----------------------*/


/* Container - Browse The Historical Spanish Archives */
.historical-archives  {
    margin-top: -40px;
    padding-top: 60px;
    font-family: Arvo, serif;
    font-weight: 400;
    background-image: url('../images/bg-image-4.jpg');
    background-repeat: no-repeat;
    background-size: auto 100%;
}
@media only screen and (min-width: 1024px) {
.historical-archives  {
    padding-top: 60px;
    background-size: 100% 100%;
}
}
@media only screen and (min-width: 1280px) {
.historical-archives  {
    margin-top: -15px;
}
}
@media only screen and (min-width: 1600px) {
.historical-archives  {
    margin-top: -15px;
    padding-top: 90px;
}
}

.meet-sub-2 {
    max-width: 296px;
    margin: 0 auto;
}
@media only screen and (min-width: 600px) {
.meet-sub-2 {
    max-width: 400px;
}
}
@media only screen and (min-width: 1024px) {
.meet-sub-2 {
    max-width: 981px;
}
}
@media only screen and (min-width: 1366px) {
.meet-sub-2 {
    max-width: 1230px;
}
}
@media only screen and (min-width: 1600px) {
.meet-sub-2 {
    max-width: 1506px;
}
}

.meet-sub {
    padding: 30px 0;
}

.historical-archives .meet-sub {
    padding-top: 0px;
    padding-bottom: 10px;
}
@media only screen and (min-width: 1024px) {
.historical-archives .meet-sub {
    padding-top: 0px;
    padding-bottom: 10px;
}
}
@media only screen and (min-width: 1366px) {
.historical-archives .meet-sub {
    padding-top: 20px;
    padding-bottom: 40px;
}
}
@media only screen and (min-width: 1600px) {
.historical-archives .meet-sub {
    padding-top: 39px;
    padding-bottom: 81px;
}
}


/* BROWSE THE HISTORICAL */
.historical-archives h2 {
    width: 190px;
    margin: 0 auto;
    font-size: 12px;
    font-weight: 400;
    color: #B84323;
    letter-spacing: 1px;
    line-height: 15px;
    text-align: center;
}
@media only screen and (min-width: 414px) {
.historical-archives h2 {
    width: 100%;

}
}
@media only screen and (min-width: 600px) {
.historical-archives h2 {
    font-size: 18px;
    letter-spacing: 1.5px;
    line-height: 20px;
}
}
@media only screen and (min-width: 800px) {
.historical-archives h2 {
    font-size: 20px;
    letter-spacing: 1.5px;
    line-height: 20px;
}
}
@media only screen and (min-width: 1024px) {
.historical-archives h2 {
    font-size: 20px;
    letter-spacing: 1.92px;
    line-height: 25px;
}
}
@media only screen and (min-width: 1366px) {
.historical-archives h2 {
    font-size: 27px;
    letter-spacing: 2.56px;
    line-height: 33px;
}
}
@media only screen and (min-width: 1600px) {
.historical-archives h2 {
    font-size: 32px;
    letter-spacing: 3px;
    line-height: 39px;
}
}

/* The Bexar Archives are the official */
.historical-archives p {
    width: 296px;
    margin: 25px auto 0 auto;
    font-size: 12px;
    color: #53312B;
    letter-spacing: .15px;
    line-height: 20px;
}
@media only screen and (min-width: 414px) {
.historical-archives p {
    width: 390px;
    font-size: 12px;
    letter-spacing: .15px;
    line-height: 20px;
}
}
@media only screen and (min-width: 600px) {
.historical-archives p {
    width: 550px;
    font-size: 14px;
    letter-spacing: .15px;
    line-height: 20px;
}
}
@media only screen and (min-width: 800px) {
.historical-archives p {
    width: 680px;
    font-size: 15px;
    letter-spacing: .19px;
    line-height: 26px;
    text-align: center;
}
}
@media only screen and (min-width: 1024px) {
.historical-archives p {
    width: 909px;
}
}
@media only screen and (min-width: 1366px) {
.historical-archives p {
    width: 1212px;
    font-size: 20px;
    letter-spacing: .26px;
    line-height: 34px;
}
}
@media only screen and (min-width: 1600px) {
.historical-archives p {
    width: 1420px;
    font-size: 24px;
    letter-spacing: .3px;
    line-height: 40px;
}
}

/* container for image (also see .meet-sub img) */
.zoom-image-homepage {
    position: relative;
}

/* image Map of San Antonio, Church of the Square, etc. */
.zoom-image-homepage > img {
    border: 8px solid #fdf5ea;
    border-radius: 7px;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
}

/* zoom icon */
.historical-archives .zoom-icon {
   /*  position: absolute; */
    width: 40px;
    top: 86px;
    left: 120px;
}
@media only screen and (min-width: 1024px) {
.historical-archives .zoom-icon {
    top: 84px;
    left: 118px;
}
}
@media only screen and (min-width: 1600px) {
.historical-archives .zoom-icon {
    width: 60px;
    top: 130px;
    left: 174px;
}
}

/* large "zoomed-in" image */
@media only screen and (min-width: 414px) {
.historical-archives .large-image-with-zoom .large-image-text + img {
    max-width: 400px;
    margin-left: -53px;
}
}
@media only screen and (min-width: 600px) {
.historical-archives .large-image-with-zoom .large-image-text + img {
    max-width: 560px;
    margin-left: -82px;
}
}
@media only screen and (min-width: 800px) {
.historical-archives .large-image-with-zoom .large-image-text + img {
    max-width: 709px;
    margin-top: 5px;
    margin-left: -156px;
}
}
@media only screen and (min-width: 1024px) {
.historical-archives .large-image-with-zoom .large-image-text + img {
    margin-left: 136px;
}
}
@media only screen and (min-width: 1366px) {
.historical-archives .large-image-with-zoom .large-image-text + img {
    margin-left: 260px;
}
}
@media only screen and (min-width: 1600px) {
.historical-archives .large-image-with-zoom .large-image-text + img {
    margin-left: 398px;
}
}

/* X to close modals */
.close2 {
    width: 22px;
    position: absolute;
    top: 13px;
    right: 0px;
}
@media only screen and (min-width: 414px) {
.close2 {
    top: 15px;
    right: 30px;
}
}
@media only screen and (min-width: 600px) {
.close2 {
    width: 30px;
    top: 16px;
    right: 40px;
}
}
@media only screen and (min-width: 800px) {
.close2 {
    top: 22px;
    right: 55px;
}
}
@media only screen and (min-width: 1024px) {
.close2 {
    width: 34px;
    top: 22px;
    right: -118px;
}
}
@media only screen and (min-width: 1280px) {
.close2 {
    top: 22px;
    right: -246px;
}
}
@media only screen and (min-width: 1366px) {
.close2 {
    width: 42px;
    right: -272px;
}
}
@media only screen and (min-width: 1600px) {
.close2 {
    right: -389px;
}
}
@media only screen and (min-width: 1920px) {
.close2 {
    right: -541px;
}
}
@media only screen and (min-width: 2560px) {
.close2 {
    right: -867px;
}
}

/*-------------HOMEPAGE: Physical Address, Mailing Address, etc. --------------*/

/* Outer Container - Physical Address + Mailing Address + etc. */
.physical {
    padding: 8px 0 55px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #53312B;
    letter-spacing: 0.07px;
    line-height: 28px;
    background: #F6E2C3;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.60) 0%, #F7E3C3 100%);
}

/* Inner Container - Physical Address + Mailing Address + etc. */
.physical-sub {
    overflow: hidden;
    max-width: 750px;
    margin: 0 auto;
    padding-left: 30px;
}
@media only screen and (min-width: 1024px) {
.physical-sub {
    max-width: 1150px;
}
}

/* Outer Container - each section: Physical Address, Mailing Address, etc */
.physical-sub > div {
    width: 225px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media only screen and (min-width: 600px) {
.physical-sub > div {
    float: left;
    width: 50%;
}
}
@media only screen and (min-width: 1024px) {
.physical-sub > div {
    width: 25%;
}
}

/* Inner Container - each section: Physical Address, Mailing Address, etc */
.physical-sub > div > div {
    width: 185px;
    margin: 0 auto;
  /*   background: white; */
}

/* Icon beside Physical Address */
.physical-sub img {
    position: relative;
    top: 41px;
    left: -30px
}

/* Physical Address */
.physical-sub h3 {
    margin-bottom: 4px;
    font-family: arvo, serif;
    font-size: 18px;
    color: #B1482B;
}

/* See all departments */
.link-1 a.see-dept {
    color: #61918D;
}

a.see-dept:hover,
a.see-dept:focus {
    color: #53312B;
    text-decoration: none;
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    outline: 2px solid #0086F1;
}


/* ===================================================
                    MEET THE CLERK
====================================================*/

/* page container */
.page-2 {
    max-width: 2560px;
    margin: 0 auto;
    background: #F7E3C3;
}

/* Outer Container */
.meet-the-clerk {
    /* margin: 0 auto; */
}

/* Inner Container */
.clerk-bio {
    position: relative;
    text-align: center;
    margin-bottom: 100px;
    max-width:1200px!important;
}
@media only screen and (min-width: 1024px) {
.clerk-bio {
    width: 960px;
    margin: 0 auto;
}
}
@media only screen and (min-width: 1366px) {
.clerk-bio {
    width: 1174px;
    margin: 0 auto;
}
}

/* Gerard C. "Gerry" Rickhoff */
.services.meet-the-clerk .page-title {
    max-width: 100%;
    margin-top: 91px;
    margin-bottom: 0;
    text-align: center;
}
@media only screen and (min-width: 1024px) {
.services.meet-the-clerk .page-title {
    max-width: 337px;
    margin-left: 455px;
}
}
@media only screen and (min-width: 1366px) {
.services.meet-the-clerk .page-title {
    max-width: 440px;
    margin-top: 98px;
    margin-left: 471px;
}
}
@media only screen and (min-width: 1600px) {
.services.meet-the-clerk .page-title {
    max-width: 492px;
}
}

/* Bexar County Clerk */
.meet-the-clerk .information-list h2 {
    margin-top: 6px;
    margin-bottom: 10px;
    margin-left: 5px;
    font-weight: 600;
}
@media only screen and (min-width: 600px) {
.meet-the-clerk .information-list h2 {
    margin-top: 8px;
    font-size: 18px;
}
}
@media only screen and (min-width: 1024px) {
.meet-the-clerk .information-list h2 {
    max-width: 178px;
    text-align: center;
    margin-left: 455px;
}
}
@media only screen and (min-width: 1366px) {
.meet-the-clerk .information-list h2 {
    max-width: 197px;
    margin-top: 11px;
    margin-left: 471px;
    font-size: 20px;
}
}

/* Container for page content */
.bio-1 {
    margin: 20px auto 0 auto;
}
@media only screen and (min-width: 1366px) {
.bio-1 {
    margin-top: 15px
}
}

/* clerk image   Political Stats  Responsibilities */
.bio-1 div:first-child {
    max-width: 397px;
    margin: 0 auto;
}
@media only screen and (min-width: 1024px) {
.bio-1 div:first-child {
    float: left;
    max-width: 397px;
    margin-top: -74px;
}
}
@media only screen and (min-width: 1366px) {
.bio-1 div:first-child {
    max-width: 397px;
    margin-top: -78px;
}
}

/* Container: Gerard Rickhoff has served as */
.bio-1 div+div {
    max-width: 600px;
    margin: 0 auto;
}
@media only screen and (min-width: 1024px) {
.bio-1 div+div {
    float: right;
    max-width: 500px;
}
}
@media only screen and (min-width: 1366px) {
.bio-1 div+div {
    max-width: 700px;
}
}

/* Political Stats & Responsibilities */
.bio-1 table {
    max-width: 405px;
    margin:50px 0;
    text-align: left;
}

@media only screen and (min-width: 1024px) {
.bio-1 table {
    max-width: 397px;
}
}

/* Political Stats */
.bio-1 > div img + table td:first-child {
    width: 170px;
}

/* Responsibilities */
.meet-the-clerk ul {
    padding-left: 15px;
    padding-bottom: 5px;
    list-style: disc;
}
.meet-the-clerk ul li {
    margin-top: 6px;
}
@media only screen and (min-width: 1366px) {
.meet-the-clerk ul li {
    margin-top: 0;
}
}

/* Gerard Rickhoff has served as  */
.meet-the-clerk p {
    margin-top: 20px;
    text-align: left;
}
@media only screen and (min-width: 1024px) {
.meet-the-clerk p {
    margin-top: 0px;
}
}
@media only screen and (min-width: 1024px) {
.meet-the-clerk p + p {
    margin-top: 20px;
}
}
@media only screen and (min-width: 1366px) {
.meet-the-clerk p + p {
    margin-top: 25px;
}
}

/* Inner Container - TIMELINE OF THE BEXAR ARCHIVES */
.meet-clerk .timeline-of-archives {
    padding-bottom: 42px;
}

.meet-clerk .timeline-of-archives>div>div {
    max-width: 320px;
    margin: 0 auto;
    padding-bottom: 5px;
}
@media only screen and (min-width: 360px) {
.meet-clerk .timeline-of-archives>div>div {
    width: 100%;
    max-width: 360px;
}
}
@media only screen and (min-width: 414px) {
.meet-clerk .timeline-of-archives>div>div {
    max-width: 400px;
}
}
@media only screen and (min-width: 600px) {
.meet-clerk .timeline-of-archives>div>div {
    max-width: 580px;
}
}
@media only screen and (min-width: 800px) {
.meet-clerk .timeline-of-archives>div>div {
    max-width: 760px;
}
}
@media only screen and (min-width: 1024px) {
.meet-clerk .timeline-of-archives>div>div {
    max-width: 840px;
}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div>div {
    max-width: 1050px;
}
}

/* June - abbreviation for phone screen */
.meet-clerk .timeline-of-archives>div div div:first-child span {
    display: none;
}
@media only screen and (min-width: 800px) {
.meet-clerk .timeline-of-archives>div div div:first-child span {
    display: inline-block;
}
}

/* June 1, 2007 */
.meet-clerk .timeline-of-archives>div div div:first-child {
    float: left;
    width: 92px;
    padding-top: 17px;
    font-weight: 700;
    color: #61918D;
    text-align: right;
}
@media only screen and (min-width: 360px) {
.meet-clerk .timeline-of-archives>div div div:first-child {
    width: 100px;
}
}
@media only screen and (min-width: 414px) {
.meet-clerk .timeline-of-archives>div div div:first-child {
    width: 104px;
}
}
@media only screen and (min-width: 800px) {
.meet-clerk .timeline-of-archives>div div div:first-child {
    width: 160px;
}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div div:first-child {
    width: 190px;
    padding-top: 24px;
}
}

/* timeline vertical line |   */
.meet-clerk .timeline-of-archives>div div div:nth-child(2) {
    position: absolute;
    top: 0px;
    left: 115px;
    bottom: 0;
    border-left: 2px solid #61918D;
}
@media only screen and (min-width: 360px) {
.meet-clerk .timeline-of-archives>div div div:nth-child(2) {
    left: 123px;
}
}
@media only screen and (min-width: 414px) {
.meet-clerk .timeline-of-archives>div div div:nth-child(2) {
    left: 127px;
}
}
@media only screen and (min-width: 600px) {
.meet-clerk .timeline-of-archives>div div div:nth-child(2) {
    left: 127px;
}
}
@media only screen and (min-width: 800px) {
.meet-clerk .timeline-of-archives>div div div:nth-child(2) {
    left: 207px;
    bottom: 0;
}
}
@media only screen and (min-width: 1024px) {
.meet-clerk .timeline-of-archives>div div div:nth-child(2) {
    left: 217px;
    bottom: 0;
}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div div:nth-child(2) {
    left: 278px;
}
}

/* first item in timeline - adjust top & bot of vertical line */
.meet-clerk .timeline-of-archives>div div:first-child div:nth-child(2) {
    top: 26px;
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div:first-child div:nth-child(2) {
    top: 37px;
}
}

/* last item in timeline */
.meet-clerk .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 115px;
}
@media only screen and (min-width: 414px) {
.meet-clerk .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 90px;
}
}
@media only screen and (min-width: 600px) {
.meet-clerk .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 76px;
}
}
@media only screen and (min-width: 1024px) {
.meet-clerk .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 70px;
}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 92px;
}
}


/*  LETTERBOX: timeline dot •  &  Bexar County Spanish Archive */
.meet-clerk .timeline-of-archives>div div div:last-child {
    float: left;
    max-width: 165px;
    margin-left: 51px;
    margin-right: 12px;
    margin-bottom: 41px;
    padding: 18px 12px 16px 12px;
    background-position: 0 35px;
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
}
@media only screen and (min-width: 360px) {
.meet-clerk .timeline-of-archives>div div div:last-child {
    max-width: 182px;
}
}
@media only screen and (min-width: 414px) {
.meet-clerk .timeline-of-archives>div div div:last-child {
    max-width: 220px;
}
}
@media only screen and (min-width: 600px) {
.meet-clerk .timeline-of-archives>div div div:last-child {
    max-width: 412px;
}
}
@media only screen and (min-width: 800px) {
.meet-clerk .timeline-of-archives>div div div:last-child {
    max-width: 666px;
    margin-left: 95px;
}
}
@media only screen and (min-width: 1024px) {
.meet-clerk .timeline-of-archives>div div div:last-child {
    max-width: 828px;
    margin-left: 129px;
    margin-right: 0;
    padding: 18px 21px 16px 21px;
}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div div:last-child {
    margin-left: 188px;
    margin-bottom: 55px;
    padding: 22px 27px 21px 27px;
}
}

/* timeline dot  •  */
.meet-clerk .timeline-of-archives>div div div:last-child img:first-child {
    display: inline-block;
    width: 12px;
    margin-top: -2px;
    margin-left: -45px;

}
@media only screen and (min-width: 800px) {
.meet-clerk .timeline-of-archives>div div div:last-child img:first-child {
    margin-left: -65px;

}
}
@media only screen and (min-width: 1024px) {
.meet-clerk .timeline-of-archives>div div div:last-child img:first-child {
    margin-left: -98px;

}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div div:last-child img:first-child {
    width: 15px;
    margin-left: -97px;

}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div div:last-child img:first-child {
    width: 19px;
    margin-top: 2px;
    margin-left: -136px;
}
}

/* letterbox pointer  <  */
.meet-clerk .timeline-of-archives>div div div:last-child img + img {
    display: inline-block;
    width: 9px;
    margin-top: -2px;
    margin-left: 9px;
}
@media only screen and (min-width: 800px) {
.meet-clerk .timeline-of-archives>div div div:last-child img + img {
    margin-left: 29px;
}
}
@media only screen and (min-width: 1024px) {
.meet-clerk .timeline-of-archives>div div div:last-child img + img {
    margin-left: 53px;
}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div div:last-child img + img {
    width: 13px;
    margin-left: 74px;
}
}

/* The earliest Spanish colonial-era */
.meet-clerk .timeline-of-archives>div div div:last-child span {
    display: inline-block;
    margin-left: 10px;
}
@media only screen and (min-width: 1024px) {
.meet-clerk .timeline-of-archives>div div div:last-child span {
    margin-left: 20px;
}
}
@media only screen and (min-width: 1366px) {
.meet-clerk .timeline-of-archives>div div div:last-child span {
    margin-left: 27px;
}
}


/*=========================================
             CHIEF DEPUTIES
==========================================*/

/*  Main content */

/* Page Container */
.services.chief-deputies .page-container {
    padding-bottom: 64px;
}

/* Chief Deputies */
.services.chief-deputies .page-title {
    margin: 60px auto 0 auto;
    font-size: 28px;
    text-align: center;
}
@media only screen and (min-width: 1024px) {
.services.chief-deputies .page-title {
    font-size: 30px;
}
}
@media only screen and (min-width: 1366px) {
.services.chief-deputies .page-title {
    font-size: 32px;
}
}



/* REMOVE ALL THE FOLLOWING CSS WHEN YOU ADD A SECOND CLERK TO THE PAGE */
/* Images of deputies */
.chief-deputies .download div img {
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
    padding: 10px 10px;
    margin-bottom: 7px;
}

/* Tom Kenig, Chief Deuty of Operations */
.chief-deputies .download div h3 {
    text-align: left;
    font-size: 16px;
    color: #61918D;
}
@media only screen and (min-width: 1024px) {
.chief-deputies .download div h3 {
    font-size: 16px;
    letter-spacing: 0.5px;
}
}
@media only screen and (min-width: 1366px) {
.chief-deputies .download div h3 {
    font-size: 20px;
}
}

/* Tom began working in  */
.chief-deputies .download p {
     margin-top: -3px;
     margin-bottom: 4px;
}
@media only screen and (min-width: 480px) {
.chief-deputies .download {
    width: 400px;
}
}

@media only screen and (min-width: 1366px) {
.chief-deputies .download div p {
    padding-bottom:25px;
}
}

/* USE ALL THE FOLLOWING CSS WHEN YOU ADD A SECOND CLERK TO THE PAGE */
/* Content Container */
/* .chief-deputies .download {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
} */

/* Container - both sections: Tom Koenig & Betty A. Aguilar */
/* .chief-deputies .download div {
    margin-top: 62px;
    width: 100%;
    float: left;
    text-align: center;
}
@media only screen and (min-width: 1024px) {
.chief-deputies .download div {
    width: 40%;
}
}
@media only screen and (min-width: 1366px) {
.chief-deputies .download div {
    width: 40%;
}
}
@media only screen and (min-width: 1024px) {
.chief-deputies .download div:first-child {
    margin-left: 0px;
}
.chief-deputies .download div:nth-child(2) {
    margin-left: 180px;
}
}
@media only screen and (min-width: 1366px) {
.chief-deputies .download div:first-child {
    margin-left: 75px;
}
.chief-deputies .download div:nth-child(2) {
    margin-left: 70px;
}
} */

/* Images of deputies */
/* .chief-deputies .download div img {
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
    padding: 10px 10px;
    margin-bottom: 7px;
} */

/* Tom Kenig, Chief Deuty of Operations */
/* .chief-deputies .download div h3 {
    text-align: left;
    font-size: 16px;
    color: #61918D;
}
@media only screen and (min-width: 1024px) {
.chief-deputies .download div h3 {
    font-size: 16px;
    letter-spacing: 0.5px;
}
}
@media only screen and (min-width: 1366px) {
.chief-deputies .download div h3 {
    font-size: 20px;
    padding: 0 35px
}
} */

/* Tom began working in  */
/* .chief-deputies .download p {
     margin-top: -3px;
     margin-bottom: 4px;
}
@media only screen and (min-width: 480px) {
.chief-deputies .download {
    width: 400px;
}
}
@media only screen and (min-width: 1024px) {
.chief-deputies .download {
    width: 900px;
}
}
@media only screen and (min-width: 1366px) {
.chief-deputies .download {
    width: 1200px;
}
}

.chief-deputies .download div p {
    text-align: left;
    padding-bottom:25px;
}
@media only screen and (min-width: 1366px) {
.chief-deputies .download div p {
    padding: 0 35px;
    padding-bottom:25px;
}
} */


/*=========================================
            VISITING THE OFFICE
=========================================*/

/* Outer container */
.services.services-visit {
    position: static;
    margin-top: 60px;
    padding: 0 0;
}

/* Inner container */
.services .page-container.visiting-container {
    max-width: 100%;
    padding-bottom: 0;
}

/* Visiting the County Clerk's Office */
.services.services-visit .page-title {
    margin: 0 auto 40px auto;
   text-align: center;
}

.visiting-container .page-title span {
   display: block;
}
@media only screen and (min-width: 365px) {
.visiting-container .page-title span {
    display: inline-block;
}
}

.physical.physical-visit {
    padding: 0px 0 88px 0;
    background: linear-gradient(-180deg, #F7E3C3 -5%, rgba(255,255,255,0.54) 60%, #F7E3C3 100%);
}

/* Horiz line */
.hor-line-visiting {
    border-top: 1px solid #E7CBAF;
}

/* Container for: Map of Bexar County Courthouse, Justice Center */
.map-visit {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 350px;
    margin-top: -90px;
    margin-bottom: 60px;
}
@media only screen and (min-width: 414px) {
.map-visit {
    max-width: 520px;
}
}
@media only screen and (min-width: 600px) {
.map-visit {
    max-width: 1000px;
}
}
@media only screen and (min-width: 1024px) {
.map-visit {
    max-width: 1000px;
    margin-bottom: 102px;
        padding: 0;
}
}
@media only screen and (min-width: 1280px) {
.map-visit {
    max-width: 1200px;
}
}
@media only screen and (min-width: 1366px) {
.map-visit {
    max-width: 1320px;
}
}
@media only screen and (min-width: 1600px) {
.map-visit {
    max-width: 1550px;
    margin-top: 94px;
    margin-bottom: 114px;
}
}

/* Contact Information By Department
   Map of Bexar County Courthouse, Justice Center */

.services.services-visit .page-title.visit-1 {
    margin: 160px 0 30px 0;
    text-align: left;
}
@media only screen and (min-width: 1600px) {
.services.services-visit .page-title.visit-1 {
    margin: 110px 0 44px 0;
}
}

.map-visit .heading-1 {
    line-height: 30px;
}

/* Table:  Department  Phone #  Address */
.map-visit table
{
    border-collapse: separate;
    overflow: hidden;
    width: 100%;
    margin-bottom: 0px;
    border: 1px solid #DBCEC4;
    border-radius: 4px;
}

.map-visit th {
    padding: 8px 10px;
    font-family: Arvo, serif;
    font-size: 16px;
    font-weight: normal;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 28px;
    background: #61918D;
}
@media only screen and (min-width: 1024px) {
.map-visit th {
    padding: 8px 14px;
}
}

.map-visit td
{
    padding: 5px 10px 6px 10px;
    font-size: 15px;
    letter-spacing: 0.33px;
    background: #FDF5EA;
    border-top: 1px solid #DBCEC4;
}
@media only screen and (min-width: 1024px) {
.map-visit td
{
    padding: 5px 14px 6px 14px;
}
}

.map-visit td:first-child {
    width: 155px;
}
@media only screen and (min-width: 600px) {
.map-visit td:first-child {
    width: 220px;
}
}
@media only screen and (min-width: 800px) {
.map-visit td:first-child {
    width: 260px;
}
}
@media only screen and (min-width: 1024px) {
.map-visit td:first-child {
    width: 330px;
}
}
@media only screen and (min-width: 1366px) {
.map-visit td:first-child {
    width: 350px;
}
}

/* Table:  Department Phone # Address - hide column 3 */
.visiting-container table th:nth-child(3),
.visiting-container table td:nth-child(3) {
    display: none;
}
@media only screen and (min-width: 568px) {
.visiting-container table th:nth-child(3),
.visiting-container table td:nth-child(3) {
    display: table-cell;
    max-width: ;
}
}

/* Map of Bexar County Courthouse */
.map-of-bexar.map-visit h1 {
    margin-top: 160px;
}
@media only screen and (min-width: 800px) {
.map-of-bexar.map-visit h1 {
    margin-top: 180px;
}
}
@media only screen and (min-width: 1600px) {
.map-of-bexar.map-visit h1 {
    margin-top: 117px;
}
}

/* County map */
.map-visit-2{
    padding: 0 20px;
    margin-left: 10px;
    margin-bottom: -80px;
}
@media only screen and (min-width: 414px) {
.map-visit-2{
    margin-left: 50px;
    margin-bottom: -90px;
}
}
@media only screen and (min-width: 1024px) {
.map-visit-2{
    margin-bottom: -160px;
    padding: 0 0px;
    margin-left: 0px;
}
}
@media only screen and (min-width: 1280px) {
.map-visit-2{
    margin-bottom: -170px;
}
}
@media only screen and (min-width: 1366px) {
.map-visit-2{
    margin-bottom: -211px;
}
}
@media only screen and (min-width: 1600px) {
.map-visit-2{
    margin-bottom: -205px;
}
}

/* placeholder below county map */
.page-container.finance {
    padding-bottom: 30px;
    margin-top: -50px;
}
@media only screen and (min-width: 414px) {
.page-container.finance {
    padding-bottom: 0;
}
}
@media only screen and (min-width: 1024px) {
.page-container.finance {
    padding-bottom: 165px;
    margin-top: -59px;
}
}
@media only screen and (min-width: 1366px) {
.page-container.finance {
    padding-bottom: 230px;
    margin-top: -110px;
}
}

@media only screen and (min-width: 1600px) {
.page-container.finance {
   padding-bottom: 11opx;
    margin-top: -105px;
}
}

/*=====================IN THE NEWS ======================*/
@media only screen and (min-width: 1600px) {
.services.in-the-news {
    padding: 0 120px;
}
}

.in-the-news .page-container {

    padding-bottom: 84px;
}
@media only screen and (min-width: 1024px) {
.in-the-news .page-container {
    padding-bottom: 110px;
}
}
@media only screen and (min-width: 1366px) {
.in-the-news .page-container {
    max-width: 1328px;
    padding-bottom: 120px;
}
}

/* Bexar County Clerk in the News */
.in-the-news.services .page-title {
    max-width: 200px;
    margin-top: 55px;
    margin-bottom: 12px;
}
@media only screen and (min-width: 400px) {
.in-the-news.services .page-title {
    max-width: 100%;
    text-align: left;
}
}
@media only screen and (min-width: 1600px) {
.in-the-news.services .page-title {
    margin-top: 60px;
}
}

.map-of-bexar.map-news h1 {
    margin-top: 30px;
    margin-bottom: 11px;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .11px;
}

@media only screen and (min-width: 600px) {
.map-of-bexar.map-news h1 {
    font-size: 20px;
}
}
@media only screen and (min-width: 1366px) {
.map-of-bexar.map-news h1 {
    font-size: 22px;
}
}
@media only screen and (min-width: 1600px) {
.map-of-bexar.map-news h1 {
    margin-bottom: 4px;
    font-size: 24px;
}
}

.map-of-bexar.map-news p + p {
    margin-top: 15px;
}

.in-the-news .hor-line-1 {
    position: static;
    margin-top: 48px;
}

/*=====================================
                 AWARDS
=====================================*/

/* Main content */
@media only screen and (min-width: 1024px) {
.awards {
    text-align: center;
}
}

/* Awards for Outstanding */
.services.awards .page-title {
    max-width: 665px;
    text-align: center;
    margin: 60px auto 0 auto;
    letter-spacing: 1.8px;
}
@media only screen and (min-width: 485px) {
.services.awards .page-title {
    text-align: left;
}
}
@media only screen and (min-width: 800px) {
.services.awards .page-title {
    max-width: 100%;
    text-align: center;
}
}

/* Mr. Rickhoff and the Bexar County */
.awards .heading-2 {
    margin-top: 19px;
    font-size: 14px;
    line-height: 32px;
}
@media only screen and (min-width: 600px) {
.awards .heading-2 {
    font-size: 16px;
}
}
@media only screen and (min-width: 800px) {
.awards .heading-2 {
    text-align: center;
}
}
@media only screen and (min-width: 1024px) {
.awards .heading-2 {
    max-width: 900px;
    margin: 19px auto 0 auto;
    text-align: center;
}
}
@media only screen and (min-width: 1366px) {
.awards .heading-2 {
    max-width: 1130px;
    font-size: 20px;
}
}

.awards .steps {
    overflow: hidden;
}

.awards-pa {
  margin-top: 50px;
  text-align: center;
}
@media only screen and (min-width: 1366px) {
.awards-pa {
    max-width: 906px;
    margin: 107px auto;
}
}
@media only screen and (min-width: 1600px) {
.awards-pa {
    max-width: 900px;
}
}

@media only screen and (min-width: 1600px) {
.awards-pa>div:first-child {
    margin-right: 20px;
}
}

.awards-ma {
    margin-top: 0px;
   margin-bottom:31px;
}
@media only screen and (min-width: 1024px) {
.awards-ma {
    margin-top: 35px;
}
}

/* Rectangles with content */
.awards .step-1-2-3 {
    width: 296px;
    padding: 40px 10px 20px 10px;
    background: #FDF5EA;
    margin: 38px auto 0 auto;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
}
@media only screen and (min-width: 1024px) {
.awards .step-1-2-3 {
    width: 296px;
    float: none;
}
}

.awards .step-1-2-3 + .step-1-2-3 {
    margin-top: 38px;
}
@media only screen and (min-width: 1024px) {
.awards .step-1-2-3 + .step-1-2-3 {
    margin-top: 0;
}
}
@media only screen and (min-width: 360px) {
.awards .step-1-2-3 {
    width: 330px;
    padding: 40px 20px 20px 20px;
}
}
@media only screen and (min-width: 600px) {
.awards .step-1-2-3 {
    width: 437px;
    padding: 40px 47px 20px 47px;
}
}
@media only screen and (min-width: 1024px) {
.awards .step-1-2-3 {
    float: left;
    width: 296px;
    height: 560px;
    margin: 0 4px;
    padding: 40px 10px 20px 10px;
}
}
@media only screen and (min-width: 1366px) {
.awards .step-1-2-3 {
    width: 390px;
    margin: 0 4px;
    padding: 10px 10px 40px 10px;
}
}
@media only screen and (min-width: 1600px) {
.awards .step-1-2-3 {
    width: 437px;
    height: 590px;
    margin: 0 4px;
    padding: 10px 48px;
}
}
@media only screen and (min-width: 1024px) {
.awards .step-1-2-3:nth-child(2) {
    margin-left: 40px;
}
}
@media only screen and (min-width: 1366px) {
.awards .step-1-2-3:nth-child(2) {
    margin-left: 61px;
}
}
@media only screen and (min-width: 1600px) {
.awards .step-1-2-3:nth-child(2) {
    margin-left: 56px;
}
}

@media only screen and (min-width: 1024px) {
.awards .step-1-2-3 + .step-1-2-3 + .step-1-2-3 {
    float: right;
}
}

@media only screen and (min-width: 1024px) {
.awards .step-1-2{
    width: 460px;
    height: 400px;
}
.awards .step-1-2:nth-child(2){
        margin-left: 31px;
}
}
@media only screen and (min-width: 1366px) {
.awards .step-1-2 {
  width: 397px;
  height: 397px;
}
.awards .step-1-2:nth-child(2){
        margin-left: 98px;
    }
}
@media only screen and (min-width: 1600px) {
.awards .step-1-2 {
  width: 397px;
  height: 397px;
  padding: 10px 10px;
}
.awards .step-1-2:nth-child(2){
        margin-left: 74px;
    }
}

.awards .step-1-2-3 h3 span {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto 10px auto;
    padding-top: 18px;
    font-size: 35px;
    text-align: center;
    color: #53312B;
    border-radius: 30px;
    background: none;
}

/* Heading */
.awards .step-1-2-3 h3 {
    margin: 28px 0 4px 0;
    letter-spacing: 0.3px;
}
@media only screen and (min-width: 360px) {
.awards .step-1-2-3 h3 {
    font-weight: 600;
}
}
@media only screen and (min-width: 600px) {
.awards .step-1-2-3 h3 {
    font-size: 18px;
}
}
@media only screen and (min-width: 1600px) {
.awards .step-1-2-3 h3 {
    font-size: 18px;
}
}

@media only screen and (min-width: 1024px) {
.awards .step-1-2 h3 span{
    margin-bottom: 21px;

}
}
@media only screen and (min-width: 1366px) {
.awards .step-1-2 h3 span {
    font-size: 40px;
    margin-bottom: 15px;
}
}
@media only screen and (min-width: 1600px) {
.awards .step-1-2 h3 span {
    margin-bottom: 27px;
    font-size: 50px;
}
}

@media only screen and (min-width: 1366px) {
.awards .step-1-2  p {
    margin-top: -2px;
    font-size: 16px;
    line-height: 24px;
}
}
@media only screen and (min-width: 1366px) {
.awards .step-1-2  img {
    margin-top: 30px;
    max-width: 80%;
}
}

/* bulleted list */
.awards .step-1-2-3 ul {
    margin-left: 0;
}
@media only screen and (min-width: 600px) {
.awards .step-1-2-3 ul {
    margin-left: 0;
}
}

.awards .step-1-2-3 ul li {
    margin-left: 15px;
}

.awards .step-1-2-3 ul li span,
.faq-answers ul li span {
    position: relative;
    left: 5px;
}

/* ===============================================================
               STANDARD STYLE FOR SERVICES PAGES
================================================================*/

/* Outer Container */
.services {
    position: relative;
    margin: 0px auto 0 auto;
    padding: 0 12px;
}
@media only screen and (min-width: 414px) {
.services {
    padding: 0 30px 0 30px;
}
}
@media only screen and (min-width: 600px) {
.services {
    padding: 0 55px 0 55px;
}
}
@media only screen and (min-width: 800px) {
.services {
    padding: 0 60px 0 60px;
}
}
@media only screen and (min-width: 1024px) {
.services {
    padding: 0 20px 0 20px;
}
}
@media only screen and (min-width: 1460px) {
.services {
    padding: 0;
}
}

/* Page title layout */
.services .page-title {
    margin: 40px auto 40px auto;
}

/* Inner Container */
.page-container {
    max-width: 984px;
    padding-bottom: 50px;
}
@media only screen and (min-width: 820px) {
.page-container {
    margin: 0 auto;

}
}
@media only screen and (min-width: 1024px) {
.page-container {
    padding-bottom: 100px;

}
}
@media only screen and (min-width: 1366px) {
.page-container {
    max-width: 1310px;
    padding-bottom: 100px;

}
}
@media only screen and (min-width: 1600px) {
.page-container {
    max-width: 1440px;
    padding-bottom: 100px;
}
}

.page-container>h1 {
    margin-left: auto;
    margin-right: auto;
}

/* Container - Opening Paragraph & PDF Downloads  */
.download {
    overflow: hidden;
    margin: 0 auto;
}

/* Opening Paragraph */
@media only screen and (min-width: 1024px) {
.download>div:first-child {
    max-width: 580px;
    float: left;
}
}
@media only screen and (min-width: 1366px) {
.download>div:first-child {
    max-width: 720px;
}
}
@media only screen and (min-width: 1600px) {
.download>div:first-child {
    max-width: 850px;
}
}

/* Download & Print */
.download-print {
    width: 296px;
    min-height: 180px;
    margin: 40px auto 0 auto;
    padding-bottom: 30px;
    background: #FDF5EA;
    border: 1px solid #DBCEC4;
    border-radius: 4px;
}
@media only screen and (min-width: 360px) {
.download-print {
    width: 330px;
}
}
@media only screen and (min-width: 600px) {
.download-print {
    width: 437px;
    padding-bottom: 40px;
}
}
@media only screen and (min-width: 1024px) {
.download-print {
    float: right;
    /* width: 296px; */
    width: 340px;
    margin-top: 5px;
}
}
@media only screen and (min-width: 1366px) {
.download-print {
    width: 390px;
}
}
@media only screen and (min-width: 1600px) {
.download-print {
    width: 437px;
}
}

/* Download & Print with only one item */
.download-print.one-item {
    padding-bottom: 0px;
    min-height: 134px;
}
@media only screen and (min-width: 600px) {
.download-print.one-item {
    padding-bottom: 0px;
    min-height: 154px;
}
}

@media only screen and (min-width: 600px) {
.download-print.one-item {
    padding-bottom: 0px;
    min-height: 154px;
}
}

.download-print h3 {
    margin-top: 0px;
    padding: 8px 11px;
    font-family: Arvo, serif;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 28px;
    background: #61918D;
    border-radius: 4px 4px 0 0;

}
@media only screen and (min-width: 600px) {
.download-print h3 {
    font-size: 16px;
}
}
@media only screen and (min-width: 1024px) {
.download-print h3 {
    font-size: 14px;
}
}
@media only screen and (min-width: 1600px) {
.download-print h3 {
    font-size: 16px;
}
}

/* PDF Download files  */
.download-print ul {
    margin-top: -12px;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #3063D2;
    letter-spacing: 0.07px;
    line-height: 22px;
}
@media only screen and (min-width: 360px) {
.download-print ul {
    margin-left: 26px;
}
}
@media only screen and (min-width: 600px) {
.download-print ul {
    margin-top: 0;
    font-size: 16px;
    line-height: 28px;
}
}
@media only screen and (min-width: 1024px) {
.download-print ul {
    margin-top: -12px;
    margin-left: 30px;
    font-size: 12px;
    line-height: 22px;
}
}
@media only screen and (min-width: 1366px) {
.download-print ul {
    margin-top: 0px;
    margin-left: 30px;
    font-size: 14px;
    line-height: 24px;
}
}
@media only screen and (min-width: 1600px) {
.download-print ul {
    margin-left: 36px;
    font-size: 16px;
    line-height: 28px;
}
}

.download-print ul li {
    margin-top: 24px;
}

/* Adjust vert position of document with double-line title */
.download-print ul li.double-line {
    margin-top: 10px;
}
.download-print ul li.double-line + li {
    margin-top: 12px;
}
.download-print ul li span+span {
    display: block;
    margin-left: 40px;
}
.download-print ul li span.pc2 {
    margin-left: 46px;
}

/* Acrobat icon */
.download-print li:not(.pc) a span:first-child:before {
    content: url('../images/acrobat.svg');
    position: relative;
    top: 11px;
    margin-right: 10px;
}

.download-print li.double-line a span:first-child:before {
    top: 26px;
}

/* pc icon */
.download-print li.pc a span:first-child:before {
    content: url('../images/pc.svg');
    position: relative;
    top: 14px;
     margin-right: 10px;
    margin-left: -5px;
    left: 0px;
}
.download-print li.pc.double-line a span:first-child:before {
    top: 24px;
}

/* map pin icon */
.download-print li.pin a span:first-child:before {
    content: url('../images/pin.svg');
    position: relative;
    top: 14px;
     margin-right: 10px;
    margin-left: -5px;
    left: 0px;
}

/* map pin icon */
.download-print li.faq a span:first-child:before {
    content: url('../images/faq.svg');
    position: relative;
    top: 14px;
     margin-right: 10px;
    margin-left: -5px;
    left: 0px;
}


/* 2-step and 3-step instructions
To obtain a refund of a cash bond, you must,
To purchase a marriage license, you must, etc */

/* 2nd set of instructions for Birth/Death Certificate page */
.to-obtain-2 {
    margin-top: 100px;
}
.to-obtain h3 {
    max-width: 296px;
    margin: 60px auto 24px auto;
   /*  text-align: center; */
}
@media only screen and (min-width: 360px) {
.to-obtain h3 {
    max-width: 330px;
}
}
@media only screen and (min-width: 600px) {
.to-obtain h3 {
    max-width: 437px;
}
}
@media only screen and (min-width: 1024px) {
.to-obtain h3 {
    max-width: 650px;
    margin: 0 0 30px 0;
    font-size: 18px;
    letter-spacing: .4px;
    line-height: 26px;
}
}
@media only screen and (min-width: 1366px) {
.to-obtain h3 {
    max-width: 900px;
    margin: -40px 0 40px 0;
    font-size: 24px;
     line-height: 36px;
}
}
@media only screen and (min-width: 1600px) {
.to-obtain h3 {
    letter-spacing: .6px;
}
}

/* Outer Container for 2-step and 3-step instructions */
.steps {
    overflow: hidden;
}

/* Outer Container for each instruction (3-step instructions) */
.step-1-2-3 {

}
@media only screen and (min-width: 1024px) {
.step-1-2-3 {
    width: 30%;
    float: left;
}
}

@media only screen and (min-width: 1024px) {
.spacer {
    width: 5%;
    float: left;
    border: 1px solid transparent;

}
}

/* Inner Container for each instruction (3-step instructions) */
.step-1-2-3 div {
    width: 296px;
    margin: 0px auto 0 auto;
    padding: 10px 10px 40px 10px;
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
}

.spacer + .step-1-2-3 div {
    margin-top: 38px;
}
@media only screen and (min-width: 1024px) {
.spacer + .step-1-2-3 div {
    margin-top: 0;
}
}

@media only screen and (min-width: 360px) {
.step-1-2-3 div {
    width: 330px;
    padding: 10px 20px 40px 20px;
}
}
@media only screen and (min-width: 600px) {
.step-1-2-3 div {
    width: 437px;
    padding: 10px 47px 70px 47px;
}
}
@media only screen and (min-width: 1024px) {
.step-1-2-3 div {
    float: left;
    margin: 0;
    width: 312px;
    padding: 10px 20px 40px 20px;
}
}
@media only screen and (min-width: 1366px) {
.step-1-2-3 div {
    width: 390px;
    padding: 10px 25px 40px 25px;
}
}
@media only screen and (min-width: 1600px) {
.step-1-2-3 div {
    width: 437px;
    padding: 10px 48px;
}
}

/* Outer Container for each instruction (2-step instructions) */
@media only screen and (min-width: 1024px) {
.step-1-2 {
    width: 47.1%;
    float: left;
}
}

@media only screen and (min-width: 1024px) {
.spacer-2 {
    width: 5.8%;
    float: left;
    color: blue;
    border: 1px solid transparent;

}
}

/* Inner container for each instruction (2-step instructions) */
@media only screen and (min-width: 1024px) {
.step-1-2 div {
    width: 460px;
    padding: 10px 30px;
}
}

.spacer-2 + .step-1-2 div {
    margin-top: 38px;
}
@media only screen and (min-width: 1024px) {
.spacer-2 + .step-1-2 div {
    margin-top: 0;
}
}

@media only screen and (min-width: 1366px) {
.step-1-2 div {
    width: 620px;
    padding: 10px 47px;
}
}

@media only screen and (min-width: 1600px) {
.step-1-2 div {
    width: 677px;
}
}

/*
Height for instruction containers
(to make them the same height when floating side by side) */

@media only screen and (min-width: 1024px) {
.cash-bond-refund-before .step-1-2-3 div {
    min-height: 570px;
}
.cash-bond-refund-after .step-1-2-3 div {
    min-height: 610px;
}
.court-registry .step-1-2 div {
    min-height: 374px;
}
.court-registry-minor .step-1-2 div {
    min-height: 325px;
}
.personal-financial-statement .step-1-2-3 div {
   min-height: 420px;
}
.open-records-request .step-1-2-3 div {
    min-height: 218px;
}
.marriage-license .step-1-2-3 div {
    min-height: 320px;
}
.informal-marriage-license .step-1-2-3 div {
    min-height: 325px;
}
.military-discharge-file .step-1-2-3 div {
    min-height: 365px;
}
.military-discharge-copy .step-1-2-3 div {
    min-height: 301px;
}
.assumed-name-file .step-1-2-3 div {
    min-height: 324px;
}
.assumed-name-copy .step-1-2-3 div {
    min-height: 284px;
}
}

@media only screen and (min-width: 1366px) {
.cash-bond-refund-before .step-1-2-3 div {
    min-height: 550px;
}
.cash-bond-refund-after  .step-1-2-3 div {
    min-height: 568px;
}
.court-registry .step-1-2 div {
    min-height: 370px;
}
.court-registry-minor .step-1-2 div {
    min-height: 285px;
}
.personal-financial-statement .step-1-2-3 div {
   min-height: 356px;
}
.open-records-request .step-1-2-3 div {
    min-height: 200px;
}
.marriage-license .step-1-2-3 div {
    min-height: 320px;
}
.informal-marriage-license .step-1-2-3 div {
    min-height: 341px;
}
.military-discharge-file .step-1-2-3 div {
    min-height: 362px;
}
.military-discharge-copy .step-1-2-3 div {
    min-height: 320px;
}
.assumed-name-file .step-1-2-3 div {
    min-height: 322px;
}
.assumed-name-copy .step-1-2-3 div {
    min-height: 302px;
}
}

@media only screen and (min-width: 1600px) {
.cash-bond-refund-before .step-1-2-3 div {
    min-height: 567px;
}
.cash-bond-refund-after .step-1-2-3 div {
    min-height: 585px;
}
.court-registry .step-1-2 div {
    min-height: 388px;
}
.court-registry-minor .step-1-2 div {
    min-height: 302px;
}
.personal-financial-statement .step-1-2-3 div {
   min-height: 374px;
}
.open-records-request .step-1-2-3 div {
    min-height: 234px;
}
.marriage-license .step-1-2-3 div {
    min-height: 340px;
}
.informal-marriage-license .step-1-2-3 div {
    min-height: 359px;
}
.military-discharge-file .step-1-2-3 div {
    min-height: 379px;
}
.military-discharge-copy .step-1-2-3 div {
    min-height: 337px;
}
.assumed-name-file .step-1-2-3 div {
    min-height: 338px;
}
.assumed-name-copy .step-1-2-3 div {
    min-height: 297px;
}
}

/* Heading for 2-step and 3-step instructions */
.step-1-2-3 h3 {
    margin: 0 auto;
    font-size: 15px;
    color: #B84323;
    letter-spacing: 0.1px;
    line-height: 24px;
}
@media only screen and (min-width: 360px) {
.step-1-2-3 h3 {
    font-weight: 600;
}
}
@media only screen and (min-width: 600px) {
.step-1-2-3 h3 {
    margin-top: 36px;
    margin-bottom: 15px;
    font-size: 17px;
}
}
@media only screen and (min-width: 1024px) {
.step-1-2-3 h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
}
}
@media only screen and (min-width: 1366px) {
.step-1-2-3 h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
}
}
@media only screen and (min-width: 1600px) {
.step-1-2-3 h3 {
    margin-top: 36px;
    margin-bottom: 10px;
    font-size: 17px;
}
}

.step-1-2-3 h3 span {
    display: block;
    margin: -5px auto 10px auto;
    width: 60px;
    height: 60px;
    padding-top: 18px;
    font-size: 35px;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    background: #B1482B;
}
@media only screen and (min-width: 600px) {
.step-1-2-3 h3 span {
    width: 86px;
    height: 86px;
    margin-bottom: 22px;
    padding-top: 29px;
    font-size: 50px;
    border-radius: 43px;
}
}
@media only screen and (min-width: 1024px) {
.step-1-2-3 h3 span {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    padding-top: 18px;
    font-size: 35px;
    border-radius: 30px;
}
}
@media only screen and (min-width: 1366px) {
.step-1-2-3 h3 span {
    width: 86px;
    height: 86px;
    margin-bottom: 22px;
    padding-top: 29px;
    font-size: 50px;
    border-radius: 43px;
}
}

/* paragraphs for 2-step and 3-step instructions */
@media only screen and (min-width: 1366px) {
.step-1-2-3 p {
    font-size: 14px;
    line-height: 20px;
}
}

/* bulleted lis for 2-step and 3-step instructions */
.step-1-2-3 ul {
    margin-left: 12px;
    list-style: disc;
    font-size: 12px;
    color: #53312B;
    letter-spacing: 0.06px;
    line-height: 20px;
}
@media only screen and (min-width: 600px) {
.step-1-2-3 ul {
    margin-left: 14px;
    font-size: 14px;
}
}
@media only screen and (min-width: 1024px) {
.step-1-2-3 ul {
    font-size: 12px;
}
}
@media only screen and (min-width: 1600px) {
.step-1-2-3 ul {
    font-size: 14px;
}
}

/* Footnote for 3-step instructions - "Failure to properly... */
.footnote {
max-width: 1220px;
margin-top: 33px;
font-size: 13px;
color: #53312B;
letter-spacing: 0.09px;
line-height: 19px;
}

/* Text heading below 3-step instructions)
   What is the status of my cash bond refund?, etc.*/
.status>h1 {
    margin-top: 66px;
    margin-bottom: 30px;
}

/* Tabulated information
   TRCP (Texas Rules of Civil Procedure)
   Probate Filing Department, etc. */
.information-list table
{
    border-collapse: separate;
    overflow: hidden;
    width: 100%;
    border: 1px solid #DBCEC4;
    border-radius: 4px;
}

.information-list th {
    padding: 8px 14px;
    font-family: Arvo, serif;
    font-size: 16px;
    font-weight: normal;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 28px;
    background: #61918D;
}

.information-list td
{
    padding: 5px 14px 6px 14px;
    font-size: 15px;
    letter-spacing: 0.33px;
    background: #FDF5EA;
    border-top: 1px solid #DBCEC4;
}

.information-list td:first-child {
    width: 155px;
}
@media only screen and (min-width: 600px) {
.information-list td:first-child {
    width: 220px;
}
}
@media only screen and (min-width: 800px) {
.information-list td:first-child {
    width: 260px;
}
}
@media only screen and (min-width: 1024px) {
.information-list td:first-child {
    width: 300px;
}
}
@media only screen and (min-width: 1366px) {
.information-list td:first-child {
    width: 350px;
}
}

/* horizontal line before Map of Bexar County Courthouse */
.hor-line-1 {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 50px;
    border-top: 1px solid #E7CBAF;
}
@media only screen and (min-width: 1366px) {
.hor-line-1 {
    margin-top: 70px;
}
}
@media only screen and (min-width: 1600px) {
.hor-line-1 {
    margin-top: 90px;
}
}

.hor-line-2 {
    border-top: 1px solid #E7CBAF;
}

/* Map of Bexar County Courthouse, Justice Center & Paul Elizondo Tower (PET) */
.map-of-bexar>h1 {
    margin-top: 130px;
    margin-bottom: 30px;
}
@media only screen and (min-width: 1366px) {
.map-of-bexar>h1 {
    margin-top: 180px;
}
}
@media only screen and (min-width: 1600px) {
.map-of-bexar>h1 {
    margin-top: 218px;
}
}

.map-of-bexar p + p {
    margin-top: 28px;
}

.county-map-1 {
    position: relative;
}

/* swap out maps */
.county-map-1 img+img {
    display: none;
}
@media only screen and (min-width: 414px) {
.county-map-1 img:first-child {
    display: none;
}
.county-map-1 img+img {
    display: block;
}
}

/* position maps */
.county-map-1 img {
    margin-top: 20px;
    border-radius: 8px;
}
@media only screen and (min-width: 414px) {
.county-map-1 img {
    max-width: 1600px;
    position: absolute;
    top: 0;
    left: -495px;
}
}
@media only screen and (min-width: 1024px) {
.county-map-1 img {
    top: -50px;
    left: -250px;
}
}
@media only screen and (min-width: 1366px) {
.county-map-1 img {
    top: 5px;
    left: -75px;
}
}
@media only screen and (min-width: 1470px) {
.county-map-1 img {
    position: static;
    display: block;
    width: 100%;
    margin: 8px auto 0 auto;
}
}
@media only screen and (min-width: 1600px) {
.county-map-1 img {
    border-radius: 12px;
}
}

/* Container - FAQs questions */
.faq-questions {
    margin: 80px 0px 0 0px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #3063D2;
    letter-spacing: 0.5px;
}
@media only screen and (min-width: 414px) {
.faq-questions {
    margin: 710px 0px 0 0px;
}
}
@media only screen and (min-width: 1024px) {
.faq-questions {
    margin-top: 670px;
    font-size: 17px;
}
}
@media only screen and (min-width: 1366px) {
.faq-questions {
    margin-top: 712px;
    font-size: 20px;
}
}
@media only screen and (min-width: 1470px) {
.faq-questions {
    margin-top: 110px;
}
}
@media only screen and (min-width: 1600px) {
.faq-questions {
    margin-top: 94px;
}
}

/* FAQs Quetions - list */
.faq-questions ul {
    margin-top: 35px;
}

.faq-questions li {
    display: block;
    margin-top: 16px;
    text-decoration: underline;
}
@media only screen and (min-width: 1600px) {
.faq-questions li {
    margin-top: 16px;
}
}

/* container - FAQs Answers */
.faq-answers {
    max-width: 1200px;
    margin: 40px 0px 20px 0px;
}
@media only screen and (min-width: 1024px) {
.faq-answers {
    margin-bottom: -20px;
}
}
@media only screen and (min-width: 1366px) {
.faq-answers {
    margin-bottom: -10px;
}
}

/* FAQs answers - headings - How do I file an ans, etc. */
.faq-answers h3 {
    margin-top: 20px;
    margin-bottom: -18px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #53312B;
    letter-spacing: 0.1px;
    line-height: 20px;
}
@media only screen and (min-width: 600px) {
.faq-answers h3 {
    font-size: 16px;
}
}
@media only screen and (min-width: 1024px) {
.faq-answers h3 {
    font-size: 18px;
}
}
@media only screen and (min-width: 1366px) {
.faq-answers h3 {
    font-size: 20px;
    line-height: 26px;
}
}

.faq-answers p {
    margin-top: 16px;
}

/* FAQs answers - bulleted lists */
.faq-answers ul {
    margin: -10px 0 45px 10px;
    list-style: disc;
    font-size: 12px;
    color: #53312B;
    letter-spacing: 0.06px;
    line-height: 20px;
}
@media only screen and (min-width: 600px) {
.faq-answers ul {
    font-size: 14px;
}
}
@media only screen and (min-width: 1024px) {
.faq-answers ul {
    font-size: 12px;
}
}
@media only screen and (min-width: 1024px) {
.faq-answers ul {
    font-size: 12px;
}
}
@media only screen and (min-width: 1600px) {
.faq-answers ul {
    font-size: 14px;
}
}

.faq-answers ul li {
    margin-top: 22px;
    margin-left: 15px;
    margin-bottom: -19px;
    font-size: 14px;
}
@media only screen and (min-width: 1366px) {
.faq-answers ul li {
    font-size: 16px;
}
}

/* FAQs answers - tables */
.faq-answers table {
     border-collapse: collapse;
     margin-bottom: 25px;
     margin-top: -10px;
}

.faq-answers tr {
   height: 70px;
}
@media only screen and (min-width: 768px) {
.faq-answers tr {
   height: 100%;
}
}

.faq-answers td {
    padding: 0;
    display: block;
}
@media only screen and (min-width: 768px) {
.faq-answers td {
    display: inline-block;
}
}
.faq-answers td:first-child {
    width: 315px;
}
.faq-answers td:nth-child(2) {
    width: 210px;
}
@media only screen and (min-width: 1024px) {
.faq-answers td:first-child {
    width: 356px;
}
.faq-answers td:nth-child(2) {
    width: 230px;
}
}


/* =================================
         Birth Certificate
=====================================*/
.birth .page-title {
    max-width: 275px;
    font-size: 18px;
}
@media only screen and (min-width: 600px) {
.birth .page-title {
    max-width: 300px;
    font-size: 18px;
}
}
@media only screen and (min-width: 800px) {
.birth .page-title {
    max-width: 340px;
    font-size: 22px;
}
}
@media only screen and (min-width: 1024px) {
.birth .page-title {
    max-width: 2000px;
    margin: 40px 0 30px 0;
    text-align: left;
}
}
@media only screen and (min-width: 1366px) {
.birth .page-title {
    font-size: 30px;

}
}
@media only screen and (min-width: 1600px) {
.birth .page-title {
    font-size: 32px;
    letter-spacing: 3px;
}
}

@media only screen and (min-width: 1024px) {
.birth .to-obtain {
    margin-top: 50px;
}
}

.birth .indent-1 {
    max-width: 550px;
    margin-left: 30px;
}

/*==========================================================
      File a DD 214 Certifiate of Release or Discharge
 =========================================================*/


/* If your military discharge DD 214 has been recorded */
.military h1 + div div p:first-child {
    max-width: 746px;
}
@media only screen and (min-width: 1377px) {
.military h1 + div div p:first-child {
    max-width: 854px;
}
}

@media only screen and (min-width: 1024px) {
.military  .to-obtain h3 {
    max-width: 100%;
    margin-top: 23px;
}
}

/*===============================
        Marriage License
===============================*/

/* To purchase a marriage license each person */
.to-purchase-a-marriage {
    padding-top: 13px;
}

.marriage-license .to-obtain h3 {
    max-width: 200px;
    margin-top: 60px;
}
@media only screen and (min-width: 600px) {
.marriage-license .to-obtain h3 {
    max-width: 437px;
}
}
@media only screen and (min-width: 1024px) {
.marriage-license .to-obtain h3 {
    max-width: 100%;
    margin-top: 0px;
}
}
@media only screen and (min-width: 1366px) {
.marriage-license .to-obtain h3 {
    margin-top: -15px;
}
}


/*=================================
     Informal Marriage License
====================================*/
.informal-marriage-license .download-print h3 span {
    display:block;
}
@media only screen and (min-width: 600px) {
.informal-marriage-license .download-print h3 span {
    display: inline;
}
}

@media only screen and (min-width: 1024px) {
.informal-marriage-license .to-obtain h3 {
    margin-top: 0px;
}
}
@media only screen and (min-width: 1366px) {
.informal-marriage-license .to-obtain h3 {
    margin-top: 14px;
}
}

/*================================
       Refund of Cash Bond
=================================*/
.cash-bond-refund-before .to-obtain h3,
.cash-bond-refund-after .to-obtain h3 {
    max-width: 200px;
}
@media only screen and (min-width: 600px) {
.cash-bond-refund-before .to-obtain h3,
.cash-bond-refund-after .to-obtain h3 {
    max-width: 437px;
}
}
@media only screen and (min-width: 1024px) {
.cash-bond-refund-before .to-obtain h3,
.cash-bond-refund-after .to-obtain h3 {
    max-width: 100%;
    margin-top: 20px
}
}


/*=========================
           Civil
=============================*/
.civil-tb {
border-collapse: collapse;
margin-bottom: -7px!important;
}
@media only screen and (min-width: 1366px) {
.civil-tb {
margin-bottom: 24px!important;
}
}
.civil-tb tr {
   height: 70px;
}
.civil-tb td:nth-child(3) {
    width: 145px;
}
@media only screen and (min-width: 768px) {
.civil-tb tr {
   height: 100%;
}
}

.civil-tb td {
    padding: 0;
    display: block;
}
@media only screen and (min-width: 768px) {
.civil-tb td {
    display: inline-block;
}
}
.civil-tb td:first-child {
    width: 35px;
}
.civil-tbcivil-tb td:nth-child(2) {
    width: 210px;
}

@media only screen and (min-width: 1024px) {
.civil-tb td:first-child {
    width: 50px;
}
.civil-tb td:nth-child(2) {
    width: 250px;
}
.civil-tb td:nth-child(3) {
    width: 145px;
}
}

/*=============================
        Criminal E-filing
=============================*/

/* Who is required to E-file their documents: */
@media only screen and (min-width: 1024px) {
.criminal .heading-2 {
    margin-top: 0;
}
}

/* Frequently Asked Questions */
.asked{
      margin-top:125px;
    }
@media only screen and (min-width: 403px) {
.asked {
        margin-top: 100px;
    }
}
@media only screen and (min-width: 410px) {
.asked {
        margin-top: 120px!important;
    }
}
@media only screen and (min-width: 415px) {
    .asked {
        margin-top: -600px!important;
    }
}

@media only screen and (min-width: 1024px) {
.asked {
        margin-top: -550px!important;
    }
}

@media only screen and (min-width: 1470px) {
.asked {
        margin-top: 180px!important
    }
}


/*===========================================
        File an Assumed Business Name
============================================*/

/* To register an Assumed Business Name with the County Clerk */
.assumed-name-file .to-obtain h3 {
    margin-top: 20px;
}


/*========================================
      File an Assumed Business Name
========================================*/

/* Cotainer for To purchase a copy of an Assumed Name */
@media only screen and (min-width: 1024px) {
.assumed-name-copy .download > div:first-child {
    max-width: 520px;
}
}
@media only screen and (min-width: 1366px) {
.assumed-name-copy .download > div:first-child {
    max-width: 100%;
}
}

/* Container for OBTAIN A COPY OF AN ASSUMED NAME */
.assumed-name-copy .download-print {
   padding-bottom: 30px;
}
@media only screen and (min-width: 400px) {
.assumed-name-copy .download-print {
   width: 340px;
}
}
@media only screen and (min-width: 600px) {
.assumed-name-copy .download-print {
   width: 400px;
}
}

/* OBTAIN A COPY OF AN ASSUMED NAME */
@media only screen and (min-width: 600px) {
.assumed-name-copy .download-print h3 {
    /* font-size: 14px; */
}
}
@media only screen and (min-width: 800px) {
.assumed-name-copy .download-print h3 {
    font-size: 16px;
}
}

/* ASSUMED NAME */
.assumed-name-copy .download-print h3 span {
    display: block;
}
@media only screen and (min-width: 400px) {
.assumed-name-copy .download-print h3 span {
    display: inline;
}
}
@media only screen and (min-width: 1366px) {
.assumed-name-copy .to-obtain h3 {
margin-top: 20px;
}
}

/* Apply Online: */
.assumed-name-copy .download-print ul {
    margin-top: 10px;
}

@media only screen and (min-width: 1024px) {
.assumed-name-copy .download-print li.pc a span:first-child::before {
    margin-left: 0px;
}
}
@media only screen and (min-width: 1366px) {
.assumed-name-copy .download-print li.pc a span:first-child::before {
    margin-left: -5px;
}
}

@media only screen and (min-width: 1024px) {
.assumed-name-copy .download-print ul li span.pc2 {
    margin-left: 50px;
}
}
@media only screen and (min-width: 1366px) {
.assumed-name-copy .download-print ul li span.pc2 {
    margin-left: 46px;
}
}


/*============================
         Probate
============================= */

.probate>div>div:first-child h3 {
    margin-top: 5px;
}

.information-list h2 {
    margin-top: 150px;
}

.space {
    margin-bottom: 25px;
}


/* ================================
           Court Registry
=================================*/

/* In order to process a request to disburse funds */
.court-registry>.to-obtain h3 {
    margin-top: 60px;
}
@media only screen and (min-width: 1366px) {
.court-registry>.to-obtain h3 {
    margin-top: 22px;
}
}

/* Information on refund for funds submitted to the Justice */
.status.court>h1 {
    max-width: 290px;
}
@media only screen and (min-width: 375px) {
.status.court>h1 {
    max-width: 100%;
}
}
@media only screen and (min-width: 600px) {
.status.court>h1 {
    max-width: 450px;
}
}
@media only screen and (min-width: 800px) {
.status.court>h1 {
    max-width: 600px;
}
}
@media only screen and (min-width: 1024px) {
.status.court>h1 {
    max-width: 880px;
}
}
@media only screen and (min-width: 1366px) {
.status.court>h1 {
    max-width: 1200px;
}
}
@media only screen and (min-width: 1600px) {
.status.court>h1 {
    max-width: 1250px;
}
}

@media only screen and (min-width: 1600px) {
.status.court>p + p {
    margin: 13px 0 26px 0;
}
}

@media only screen and (min-width: 1600px) {
.status.court>p + h3 {
    margin-top: -10px;
}
}

/* TRCP (Texas Rules of Civil Procedure) */
.texas-rules {
    margin-top: 13px;
    padding-bottom: 26px;
}

.texas-rules table + table {
    margin-top: 19px;
}

/* Horizontal Line */
@media only screen and (min-width: 1024px) {
.court-registry .hor-line-1 {
    margin-top: 20px;
}
}
@media only screen and (min-width: 1366px) {
.court-registry .hor-line-1 {
    margin-top: 50px;
}
}

/* Container for Unclaimed Funds...Non-sufficient Fund Letter */
.court-registry .container-col {
    margin-top: 70px;
}
@media only screen and (min-width: 1366px) {
.court-registry .container-col {
    margin-top: 97px;
}
}

/* Change Bootstrap float from 992px to 1024px */
@media (min-width: 992px) {
  .court-registry .container {
    width: 970px;
  }
}

@media (min-width: 992px) {
.court-registry .col-md-4 {
    float: none;
    width: 100%;
}
.court-registry .container {
    /* width: 100%; */
  }
}
@media (min-width: 1024px) {
.court-registry .col-md-4 {
    float: left;
    width: 33.33333333%;
}
}
@media (min-width: 1600px) {
.court-registry .col-md-4 {
    padding: 0 42px;
}
}

/* Unclaimed Funds...Non-sufficient Fund Letter */
.unclaimed {
    margin-bottom: -80px;
}
@media only screen and (min-width: 1024px) {
.unclaimed {
    margin-bottom: 0px;
    padding-top: 26px;
}
}

.unclaimed + div + .hor-line-1 {
    margin-top: 100px;
}

.court-registry .map-of-bexar {
    margin-top: 212px;
}

.court-registry .container-col h3 {
    margin-top: 70px;
    margin-bottom: 19px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: #B34824;
    letter-spacing: 0.08px;
    line-height: 24px;
}
@media only screen and (min-width: 1024px) {
.court-registry .container-col h3 {
    margin-top: 20px;
}
}

/* SEARCH UNCLAIMED FUNDS button */
a.search-unclaimed-funds {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 20px 13px 20px;
    font-size: 18px;
    letter-spacing: 0.3px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #61918D;
    border: 2px solid transparent;
    border-radius: 4px;
}
@media only screen and (min-width: 600px) {
a.search-unclaimed-funds {
    padding: 16px 20px 18px 20px;
    font-size: 20px;
}
}
@media only screen and (min-width: 1024px) {
a.search-unclaimed-funds {
    margin-top: 20px;
}
}
@media only screen and (min-width: 1366px) {
a.search-unclaimed-funds {
    margin-top: 50px;
}
}

/* Only in court registry - SEARCH UNCLAIMED FUNDS button */
@media only screen and (min-width: 1024px) {
.court-registry a.search-unclaimed-funds {
    padding: 12px 20px 13px 20px;
    font-size: 18px;
}
}
@media only screen and (min-width: 1366px) {
.court-registry a.search-unclaimed-funds {
    padding: 16px 20px 18px 20px;
    font-size: 20px;
}
}

/* Container - Sample Letter image and text */
.sample-letter {
    max-width: 435px;
    margin: 30px auto 0 auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
@media only screen and (min-width: 600px) {
.sample-letter {
    margin-top: 60px;
}
}
@media only screen and (min-width: 1024px) {
.sample-letter {
    margin-top: 20px;
    padding-bottom: 50px;
}
}
@media (min-width: 1366px) {
.sample-letter {
    max-width: 100%;
}
}

/* Sample NSF Letter */
.sample-letter h4 {
    margin-top: -64px;
    font-size: 20px;
    font-weight: 400;
    color: #61918D;
    letter-spacing: 0.6px;
    text-align: center;
}
@media only screen and (min-width: 480px) {
.sample-letter h4 {
    margin-top: -70px;
    font-size: 24px;
}
}
@media only screen and (min-width: 1024px) {
.sample-letter h4 {
    margin-top: -60px;
    font-size: 20px;
}
}
@media only screen and (min-width: 1366px) {
.sample-letter h4 {
    margin-top: -70px;
    font-size: 24px;
}
}

/* Non-Sufficient Funds Letter */
.sample-letter p {
    margin-top: -5px;
    font-size: 15px;
    color: #53312B;
    letter-spacing: 0.45px;
    text-align: center;
}

@media only screen and (min-width: 480px) {
.sample-letter p {
    font-size: 18px;
}
}
@media only screen and (min-width: 1024px) {
.sample-letter p {
    margin-top: -9px;
    font-size: 15px;
}
}
@media only screen and (min-width: 1366px) {
.sample-letter p {
    margin-top: -6px;
    font-size: 18px;
}
}

/* Map of Bexar County Courthouse */
@media only screen and (min-width: 1024px) {
.court-registry .map-of-bexar>h1 {
    margin-top: 100px;
}
}
@media only screen and (min-width: 1366px) {
.court-registry .map-of-bexar>h1 {
    margin-top: 160px;
}
}

/* ==============================
       Court Registry Minor
================================*/

.information-list.court-registry .download-print span {
    display: inline;
}

@media only screen and (min-width: 1366px) {
.court-registry-minor .unclaimed {
    margin-bottom: 0px;
    padding-top: 50px;
}
}


/*===========================
          Finance
=============================*/

/* Container for Filing a Financial Statement */
.personal-financial-statement .download {
    max-width: 284px;
    margin: 0 auto;
}
@media only screen and (min-width: 435px) {
.personal-financial-statement .download {
    max-width: 380px;
}
}
@media only screen and (min-width: 1024px) {
.personal-financial-statement .download {
    max-width: 100%;
}
}

.finance-docs {
    margin: 10px 0 0 0;
}

.finance-docs ul {
    margin: 15px 0 25px 0;
    padding-left: 15px;
    list-style: disc;
    font-size: 12px;
    letter-spacing: 0.11px;
    text-decoration: underline;
}

.finance-docs ul a {
    color: #3063D2;
}

@media only screen and (min-width: 1024px) {
.finance-docs ul {
    font-size: 14px;
}
}
@media only screen and (min-width: 1366px) {
.finance-docs ul {
    font-size: 16px;
}
}

.finance-docs li {
    margin-top: 10px;
}
@media only screen and (min-width: 1366px) {
.finance-docs li {
    margin-top: 5px;
}
}

@media only screen and (min-width: 1024px) {
.personal-financial-statement .to-obtain h3 {
    margin-top: 40px;
}
}
@media only screen and (min-width: 1600px) {
.personal-financial-statement .to-obtain h3 {
    max-width: 100%;
}
}

.finance {
    padding-bottom: 0px;
    margin-top: -50px;
}
@media only screen and (min-width: 1024px) {
.finance {
    padding-bottom: 0px;
    margin-top: -59px;
}
}
@media only screen and (min-width: 1366px) {
.finance {
    padding-bottom: 0px;
    margin-top: -110px;
}
}

@media only screen and (min-width: 1600px) {
.finance {
    padding-bottom: 0px;
    margin-top: -105px;
}
}

/*======================================
          Open Records Request
========================================*/
@media only screen and (min-width: 1024px) {
.open-records {
    max-width: 100%;
    float: none;
}
}

@media only screen and (min-width: 1024px) {
.open-records>div:first-child {
    max-width: 100%;
    float: none;
}
}

@media only screen and (min-width: 1024px) {
.open-records-request .to-obtain h3 {
    max-width: 750px;
    margin-top: 14px;
}
}
@media only screen and (min-width: 1366px) {
.open-records-request .to-obtain h3 {
    max-width: 900px;
    margin-top: 14px;
}
}


/*===================================
            Real Property
===================================*/

.real-property .page-title {
  margin-bottom: 0;
}
@media only screen and (min-width: 1024px) {
.real-property .page-title {
  margin-bottom: -50px;
}
}

/* Paul Elizondo Tower */
.heading-2.hand-file {
    margin: 46px 0 -16px 0;
    font-weight: 600;
}

.heading-2.hand-file span {
    display: block;
}
@media only screen and (min-width: 414px) {
.heading-2.hand-file span {
    display: inline;
}
}

/* Container for In Person: and By Mail: */
@media only screen and (min-width: 800px) {
.in-person {
    overflow: hidden;
}

.in-person p {
    float: left;
}

.in-person p + p {
    margin-left: 90px;
}
}
@media only screen and (min-width:1024px) {
.in-person p {
    float: none;
}

.in-person p + p {
    margin-left: 0;
}
}
@media only screen and (min-width:1366px) {
.in-person p {
    float: left;
}

.in-person p + p {
    margin-left: 50px;
}
}
@media only screen and (min-width:1600px) {
.in-person p + p {
    margin-left: 80px;
}
}


/* Who may E-File their documents: */
.heading-2.bold-1 {
    font-weight: 600;
}

/* See Map of the Courthouse */
.see-map {
    margin-top: 20px;
}

/* Container - ACS Corporate Headquarters */
.container-col-dif {
    margin-top: -50px;
}
@media only screen and (min-width: 1024px) {
.container-col-dif {
    margin-top: -10px;
}
}
@media only screen and (min-width: 1366px) {
.container-col-dif {
    margin-top: -36px;
}
}

/* Container PERSONS AUTHORIZED TO FILE */
.persons-authorized {
    margin-top: 40px;
    padding: 0 15px;
}
@media only screen and (min-width: 992px) {
.persons-authorized {
    margin-top: 260px;
}
}
@media only screen and (min-width: 1366px) {
.persons-authorized {
    margin-top: 322px;
}
}

/* Container - Download & Print */
.real-property .download .download-print {
    display: none;
}
@media only screen and (min-width: 1024px) {
.real-property .download .download-print {
    display: block;
    margin-top: 80px;
}
}

.download-print-2 {
    margin: 40px 0 0 0;
}
@media only screen and (min-width: 1024px) {
.download-print-2 {
    display: none;
}
}

/* Container - FAQs questions */
.faq-questions.new {
    margin: -50px 0px 0 0px;
}
@media only screen and (min-width: 1024px) {
.faq-questions.new {
    margin-top: -60px;
}
}
@media only screen and (min-width: 1366px) {
.faq-questions.new {
    margin-top: -87px;
}
}
@media only screen and (min-width: 1470px) {
.faq-questions.new {
    margin-top: px;
}
}
@media only screen and (min-width: 1600px) {
.faq-questions.new {
    margin-top: px;
}
}

.faq-questions.new h2 {
    margin-bottom: 5px;
}

/*===============================================================
                      RECORD SEARCH PAGES
================================================================*/


/* Page Titles */
.page-title-2 {
    max-width: 600px;
    margin: 60px auto 20px auto;
    font-family: Arvo, serif;
    font-size: 18px;
    color: #B84323;
    letter-spacing: 2px;
    line-height: 26px;
    text-align: center;
    text-shadow: 0 4px 0 rgba(190,69,53,0.20);
}
@media only screen and (min-width: 600px) {
.page-title-2 {
    font-size: 22px;
}
}
@media only screen and (min-width: 1366px) {
.page-title-2 {
    font-size: 30px;

}
}
@media only screen and (min-width: 1600px) {
.page-title-2 {
    font-size: 32px;
    letter-spacing: 3px;
}
}


/* ================================
            Misdemeanor Page
===================================*/

.misdemeanor {
    margin: 0 auto 50px auto;
}
@media only screen and (min-width: 1024px) {
.misdemeanor {
    margin: 0 auto 50px auto;
}
}
@media only screen and (min-width: 1600px) {
.misdemeanor {
    max-width: 1440px;
}
}

@media only screen and (min-width: 1024px) {
.misdemeanor .intro  {
    padding: 0 20px 0 20px;
    max-width: 1120px;
}
}

@media only screen and (min-width: 1024px) {
.misdemeanor p {
    text-align: center;
}
}

.card-a-z {
    overflow: hidden;
    max-width: 260px;
    margin: 50px auto 0 auto;
    text-align: center;

}
@media only screen and (min-width: 535px) {
.card-a-z {
    max-width: 522px;
}
}
@media only screen and (min-width: 800px) {
.card-a-z {
    max-width: 782px;
}
}
@media only screen and (min-width: 1055px) {
.card-a-z {
    max-width: 1042px;
}
}
@media only screen and (min-width: 1315px) {
.card-a-z {
    max-width: 1302px;
    margin-top: 87px;
}
}

.card-a-z a {
    float: left;
    width: 200px;
    height: 200px;
    margin: 30px;
    padding: 47px 0 0 0;
    font-weight: 600;
    font-size: 50px;
    color: #53312B;
    letter-spacing: 1.04px;
    line-height: 45px;
    text-decoration: none;
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
}

/* LAST NAME */
.card-a-z a:after {
    content: "LAST NAME";
    display: block;
    margin-top: 16px;
    font-weight: 700;
    font-size: 18px;
    color: #B1482B;
    letter-spacing: 0.06px;
    text-align: center;
    line-height: 24px;
}


/*================================
      Search Results Page
================================*/


/* main content container */
@media only screen and (min-width: 1366px) {
.search-results .services {
    max-width: 1270px;
}
}

/* container for Search Results & search box */
.search-1 {
    overflow: hidden;
    margin-top: 52px;
}

/* Container for Search Results */
.search-results .page-title {
    margin: 11px 0 0 0;
}

/* Search Results */
.search-results .page-title {
    font-size: 25px;
    text-align: left;
}
@media only screen and (min-width: 800px) {
.search-results .page-title {
     float: left;
}
}
@media only screen and (min-width: 1366px) {
    .search-results .page-title {
    font-size: 32px;
}
}

/* The search form */
.form-search-site {
    width: 200px;
    margin-top: 60px;
}
@media only screen and (min-width: 440px) {
.form-search-site {
    width: 364px;
  /*   margin-top: 0px; */
}
}
@media only screen and (min-width: 800px) {
.form-search-site {
    float: right;
    margin-top: 0;
}
}
@media only screen and (min-width: 1024px) {
.form-search-site {
    width: 583px;
}
}
@media only screen and (min-width: 1366px) {
.form-search-site {
    width: 723px;
}
}

/* Container for the search box */
@media only screen and (min-width: 440px) {
.search-2 {
    display:  inline-block;
}
}

/* Search box */
.search-site-input {
    display: block;
    width: 300px;
    height: 50px;
    margin: 0;
    padding: 5px 14px 6px 28px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-indent: 22px;
    color: #B04021;
    background-color: rgb(253,245,234);
    background-image: url('../images/icon-search-3.svg');
    background-position: 13px 15px;
    background-repeat: no-repeat;
    border: 0px solid #ebcac1;
    border-radius: 4px;
}
@media only screen and (min-width: 440px) {
.search-site-input {
    display: inline-block;
    width: 260px;
    border-radius: 0;
}
}
@media only screen and (min-width: 1024px) {
.search-site-input {
    width: 460px;
    font-size: 18px;
}
}
@media only screen and (min-width: 1366px) {
.search-site-input {
    width: 600px;
}
}

/* Search button */
.search-3 {
    display: inline-block;
    width: 160px;
    height: 50px;
    margin-top: 50px;
    color: #fff;
    background: #61918D;
    border: none;
    border-radius: 4px;
}
@media only screen and (min-width: 440px) {
.search-3 {
    width: 100px;
    margin-top: 0;
    margin-left: -4px;
    border-radius: 0;
}
}
@media only screen and (min-width: 1024px) {
.search-3 {
    width: 120px;
}
}

/* Container for the search results */
.search-4 {
    margin-top: 100px;
}
@media only screen and (min-width: 1024px) {
.search-4 {
    margin-top: 150px;
}
}

/* Results headings */
#results div.heading-4 {
    margin-top: 35px;
    margin-bottom: 10px;
    font-weight: 600;
}
@media only screen and (min-width: 800px) {
#results div.heading-4 {
    margin-bottom: 0;
}
}


/* main text in results */
#results div:not(.heading-4) {
    font-size: 14px;
    color: #53312B;
    letter-spacing: 0.09px;
    line-height: 26px;
}

/* Links in results */
#results a {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
@media only screen and (min-width: 600px) {
#results a {
    font-size: 16px;
    line-height: 40px;
}
}

#results a + div {
    margin-top: 10px;
}
@media only screen and (min-width: 800px) {
#results a + div {
    margin-top: 0;
}
}

/* =================================
        Fugitives Search Page
===================================*/


/* Main container */
.fugitives-search {
    margin: 0 auto 50px auto;
}
@media only screen and (min-width: 1024px) {
.fugitives-search {
    margin: 0 auto 50px auto;
}
}
@media only screen and (min-width: 1600px) {
.fugitives-search {
    max-width: 1440px;
}
}

@media only screen and (min-width: 1024px) {
.fugitives-search .intro  {
    padding: 0 20px 0 20px;
    max-width: 1120px;
}
}

/* Container for Select Fugitive & Select Court & Search For Fugitives */
.fugitives-search .input-select {
    width: 294px;
    margin: 14px auto 0 auto;
    padding-bottom: 150px;
}
@media only screen and (min-width: 414px) {
.fugitives-search .input-select {
   width: 348px;
}
}
@media only screen and (min-width: 600px) {
.fugitives-search .input-select {
   width: 417px;
}
}
@media only screen and (min-width: 1024px) {
.fugitives-search .input-select {
    width: 920px;
}
}
@media only screen and (min-width: 1366px) {
.fugitives-search .input-select {
    width: 1227px;
}
}

/* DWI/Family Violence Fugitive Search */
.fugitives-search h1 {
    max-width: 630px;
}
@media only screen and (min-width: 1600px) {
.fugitives-search h1 {
    max-width: 795px;
}
}

/* Fugitive Search */
.fugitives-search h1 span {
    display: block;
}
@media only screen and (min-width: 480px) {
.fugitives-search h1 span {
    display: inline;
}
}

/* Please select which type of fugitive */
@media only screen and (min-width: 1024px) {
.fugitives-search h1 + p {
    max-width: 900px;
    margin: 0 auto;
}
}
@media only screen and (min-width: 1366px) {
.fugitives-search h1 + p {
    max-width: 1400px;
}
}
@media only screen and (min-width: 1600px) {
.fugitives-search h1 + p {
    max-width: 1600px;
}
}


/* Container for Select Fugitive type & selectboxes */
@media only screen and (min-width: 1024px) {
.fugitives-search > div:first-child {
    max-width: 1000px;
    padding: 0 20px 0px 20px;
}
}
@media only screen and (min-width: 1366px) {
.fugitives-search > div:first-child {
    max-width: 1260px;
    padding: 0 20px 0px 20px;
}
}

.input-select form > div:first-child {
    overflow: hidden;
}

.input-select form > div > div {
    overflow: hidden;
    margin-top: 14px;
}

@media only screen and (min-width: 1024px) {
.input-select form > div > div {
    float: left;
}

.input-select form > div > div:nth-child(2) {
    margin-left: 40px;
}
}

/* Select Fugitive Type & Select Court */

.text-fugitive {
    margin-top: 11px;
    margin-bottom: 0;
    margin-left: 63px;
    font-size: 15px;
    color: #61918D;
}
@media only screen and (min-width: 600px) {
.text-fugitive {
    margin-left: 79px;
    font-size: 20px;
}
}
@media only screen and (min-width: 1024px) {
.text-fugitive {
    margin-left: 62px;
    font-size: 17px;
}
}
@media only screen and (min-width: 1366px) {
.text-fugitive {
    margin-left: 79px;
    font-size: 20px;
}
}

/* 1 & 2 in colored circle - FLOAT LEFT */
.color-badge {
    float: left;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: 12px;
    margin-right: 10px;
    padding: 0px;
    font-size: 17px;
    font-weight: 600;
    line-height: 0;
    text-align: center;
    color: #fff;
    border-radius: 14px;
    background-color: #61918D;
}
@media only screen and (min-width: 600px) {
.color-badge {
    width: 40px;
    height: 40px;
    margin-top: 22px;
    font-size: 24px;
    border-radius: 20px;
}
}
@media only screen and (min-width: 1024px) {
.color-badge {
    width: 30px;
    height: 30px;
    margin-top: 12px;
    font-size: 17px;
    border-radius: 14px;
}
}
@media only screen and (min-width: 1366px) {
.color-badge {
    width: 40px;
    height: 40px;
    margin-top: 22px;
    font-size: 24px;
    border-radius: 20px;
}
}

.color-badge span {
    display: inline-block;
    margin-top: 14px;
}
@media only screen and (min-width: 600px) {
.color-badge span {
    margin-top: 19px;
}
}
@media only screen and (min-width: 1024px) {
.color-badge span {
    margin-top: 14px;
}
}
@media only screen and (min-width: 1366px) {
.color-badge span {
    margin-top: 19px;
}
}

/* Select One (select menus) - FLOAT LEFT*/
.select-size {
    float: left;
    width: 244px;
    height: 41px;
    margin-top: 5px;
    margin-left: 10px;
    -webkit-appearance: none;    /* Removes browser styling Chrome & Safari  */
    -moz-appearance: none;       /* Removes browser styling FF */
    padding-left: 8px;
    font-size: 13px;
    color: #53312B;
    background: #FDF5EA;
    background-image: url('../images/up_down_arrow_1.svg');
    background-repeat: no-repeat;
    background-position: 220px 11px;
    border: 1px solid rgba(83,49,43,0.25);
    border-radius: 4px;
    outline: none;
    color: #000;              /* Remove FF outline */
    /* color: rgba(0,0,0,0); */
    text-shadow: 0 0 0 #000;
}
@media only screen and (min-width: 414px) {
.select-size {
    width: 297px;
    background-position: 271px 11px;
}
}
@media only screen and (min-width: 600px) {
.select-size {
    width: 350px;
    height: 58px;
    margin-top: 10px;
    margin-left: 17px;
    font-size: 17px;
    background-position: 324px 20px;
}
}
@media only screen and (min-width: 1024px) {
.select-size {
    width: 244px;
    height: 41px;
    margin-top: 5px;
    margin-left: 10px;
    font-size: 15px;
    background-position: 220px 11px;
}
}
@media only screen and (min-width: 1366px) {
.select-size {
    float: left;
    width: 350px;
    height: 58px;
    margin-top: 10px;
    margin-left: 17px;
    font-size: 17px;
    background-position: 324px 19px;
}
}

.select-size:disabled{
    opacity: 0.6;
}

/* Select One (select menus) on focus */
.select-size:focus {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
  -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
    outline: none;
}

/* Remove FF outline on select:focus */
.select-size:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.select-size option {
    background: #FDF5EA;
    size: 17px;
}


/* Container for SEARCH FOR FUGITIVES */
.input-select form > div > div:last-child {
    float: right;
    width: 100%;
}
@media only screen and (min-width: 1024px) {
.input-select form > div > div:last-child {
    width: 270px;
    margin-top: 24px;
}
}
@media only screen and (min-width: 1366px) {
.input-select form > div > div:last-child {
    width: 318px;
    margin-top: 9px;
}
}
/* SEARCH FOR FUGITIVES */
.color-button {
    float: right;
    width: 244px;
    height: 41px;
    margin-top: 32px;
    background-color: #61918D;
    color: white;
    font-size: 15px;
    border-radius: 4px;
}
@media only screen and (min-width: 414px) {
.color-button {
    width: 297px;
}
}
@media only screen and (min-width: 600px) {
.color-button {
    width: 350px;
    height: 58px;
    font-size: 20px;
    letter-spacing: .3px;
}
}
@media only screen and (min-width: 1024px) {
.color-button {
    width: 270px;
    height: 41px;
    font-size: 17px;
}
}
@media only screen and (min-width: 1366px) {
.color-button {
    width: 318px;
    height: 58px;
    margin-top: 58px;
    font-size: 20px;
    letter-spacing: .3px;
}
}

.search-fugitives:disabled {
    opacity: 0.6;
}
.disabled-text {
    opacity: 0.6;
}


.color-table{
  background-color: #61918D;

  height: 44px;
  border-radius: 4px 4px 0 0;
  background-color: #61918d;

color: #ffffff;
font-family:'Arvo', serif;
font-size: 16px;
line-height: 28px;
text-transform: uppercase;
/* Text style for "Defendent" */
letter-spacing: 0.5px;
  }
.tdfugitive{

color: #53312b;
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 36px;
text-transform: uppercase;
/* Text style for "ABDELILAH," */
letter-spacing: 0.33px;
}

.color-table-2{
  background-color: white;
}

.tabla{
/*   margin-top: 40px; */
width: 1221px;
position: relative;
top: -110px;
}

.tabla small {
    display: block;
    margin-bottom: 7px;
}

.tabla-scroll{
    overflow:scroll;
    overflow-x: hidden;
    overflow-y: hidden;
    height:993px;
    overflow: auto;
}
.btn.focus, .btn:focus, .btn:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.tabla-scroll:hover {
  overflow: auto;
}


.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
  border-radius: 10px;
  background-color: transparent;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: transparent;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: grey;
}



.loader-fugitives{
    display: none;
    position: relative;
    top: -60px;
}
.text-loader{
    width:100%;
    text-align: center;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 104px;
  height: 60px;
  margin:0 45%;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #B84323;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #B84323 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.table td {
    background: #FDF5EA;
}

.table th {
    font-weight: normal;
}

/* =====================================
           Unclaimed Funds Page
========================================*/

/* Enter a Search Term - select box */
.search-term {
    float: left;
    width: 244px;
    height: 41px;
    margin-top: 5px;
    margin-left: 10px;
    font-size: 13px;
    color: #53312B;
    text-indent: 12px;
    background: #FDF5EA;
    background-position: 220px 11px;
    border: 1px solid rgba(83,49,43,0.25);
    border-radius: 4px;
}
@media only screen and (min-width: 414px) {
.search-term {
    width: 297px;
    text-indent: 11px;
}
}
@media only screen and (min-width: 600px) {
.search-term {
    width: 350px;
    height: 58px;
    margin-top: 10px;
    margin-left: 17px;
    font-size: 17px;
    text-indent: 11px;
}
}
@media only screen and (min-width: 1024px) {
.search-term {
    width: 244px;
    height: 41px;
    margin-top: 5px;
    margin-left: 10px;
    font-size: 15px;
    text-indent: 12px;
}
}
@media only screen and (min-width: 1366px) {
.search-term {

    float: left;
    width: 350px;
    height: 58px;
    margin-top: 10px;
    margin-left: 17px;
    font-size: 17px;
    text-indent: 13px;
}
}

/* Enter a Search Term - select box ON FOCUS */
.search-term:focus {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
                -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
    outline: none;
}

/* =====================================
     Unclaimed Funds Agreement Page
======================================*/


/* Container */
@media only screen and (min-width: 1024px) {
.unclaimed-agreement {
    max-width: 850px;
}
}
@media only screen and (min-width: 1366px) {
.unclaimed-agreement {
    max-width: 1000px;}
}

.unclaimed-agreement ul {
    list-style: disc;
    margin: 22px 0 22px 15px;
}

.unclaimed-agreement li {
    margin-top: 5px;
}
@media only screen and (min-width: 650px) {
.unclaimed-agreement li {
    margin-top: -2px;
}
}

/* AGREE */
.agree {
    max-width: 296px;
    margin: 60px auto 100px auto;
}
@media only screen and (min-width: 400px) {
.agree {
    max-width: 350px;
}
}
.agree a:first-child {
    display: inline-block;
    width: 140px;
    height: 51px;
    padding-top: 12px;
    font-size: 18px;
    letter-spacing: 0.3px;
    text-align: center;
    color: #fff;
    background: #61918D;
    border: 2px solid transparent;
    border-radius: 4px;
}
@media only screen and (min-width: 400px) {
.agree a:first-child {
    display: inline-block;
    width: 160px;
    height: 58px;
    padding-top: 14px;
    font-size: 20px;
    letter-spacing: 0.3px;
    text-align: center;
    color: #fff;
    background: #61918D;
    border: 2px solid transparent;
    border-radius: 4px;
}
}

/* DISAGREE */
.agree>a+a {
    display: inline-block;
    width: 140px;
    height: 51px;
    margin-left: 12px;
    padding-top: 12px;
    font-size: 18px;
    color: #61918D;
    letter-spacing: 0.3px;
    text-align: center;
    border: 2px solid #5F918D;
    border-radius: 4px;
}
@media only screen and (min-width: 400px) {
.agree>a+a {
    display: inline-block;
    width: 160px;
    height: 58px;
    margin-left: 25px;
    padding-top: 14px;
    font-size: 20px;
    color: #61918D;
    letter-spacing: 0.3px;
    text-align: center;
    border: 2px solid #5F918D;
    border-radius: 4px;
}
}

/* hover & focus for AGREE */
.agree a:first-child:hover,
.agree a:first-child:focus {
    font-size: 17px;
    background: #25746d;
    text-decoration: none;
}
@media only screen and (min-width: 600px) {
.agree a:first-child:hover,
.agree a:first-child:focus {
    font-size: 21px;
}
}
@media only screen and (min-width: 800px) {
.agree a:first-child:hover,
.agree a:first-child:focus {
    font-size: 21px;
}
}
@media only screen and (min-width: 1024px) {
.agree a:first-child:hover,
.agree a:first-child:focus {
    font-size: 19px;
}
}
@media only screen and (min-width: 1366px) {
.agree a:first-child:hover,
.agree a:first-child:focus {
    font-size: 21px;
}
}

/* hover & focus for DISAGREE */
.agree a+a:hover,
.agree a+a:focus {
    font-size: 17px;
    text-decoration: none;
    border: 3px solid #25746d;
}
@media only screen and (min-width: 600px) {
.agree a+a:hover,
.agree a+a:focus {
    font-size: 21px;
}
}
@media only screen and (min-width: 800px) {
.agree a+a:hover,
.agree a+a:focus {
    font-size: 21px;
}
}
@media only screen and (min-width: 1024px) {
.agree a+a:hover,
.agree a+a:focus {
    font-size: 19px;
}
}
@media only screen and (min-width: 1366px) {
.agree a+a:hover,
.agree a+a:focus {
    font-size: 21px;
}
}

/* ===============================================================
                            MOST WANTED PAGE
================================================================*/


/*------------- Page Containers-----------*/

/* Outer div for page content */
@media only screen and (min-width: 1600px) {
.most-wanted.misdemeanor {
    max-width: 1460px;
}
}

/* Inner div for page content */
.most-wanted.misdemeanor .intro {
    max-width: 1417px;
    padding: 20px;
}
@media only screen and (min-width: 800px) {
.most-wanted.misdemeanor .intro {
    padding: 0 40px 0 40px;
}
}
@media only screen and (min-width: 1366px) {
.most-wanted.misdemeanor .intro {
    max-width: 100%;
    padding: 0 40px 0 40px;
}
}


/*------------- Page Title & Opening Paragraph--------------*/

/* County Clerk Most Wanted */
.most-wanted .page-title-2 {
    max-width: 155px;
    margin-top: 20px;
}
@media only screen and (min-width: 360px) {
.most-wanted .page-title-2 {
    max-width: 100%;
    margin-top: 60px;
}
}
@media only screen and (min-width: 800px) {
.most-wanted .page-title-2 {
    margin-top: 60px;
}
}
@media only screen and (min-width: 1024px) {
.most-wanted .page-title-2 {
    font-size: 25px;
}
}
@media only screen and (min-width: 1366px) {
.most-wanted .page-title-2 {
    font-size: 30px;
}
}
@media only screen and (min-width: 1600px) {
.most-wanted .page-title-2 {
    font-size: 32px;
}
}

/* Please help us locate all persons wanted */
.most-wanted h1 + p {
    max-width: 260px;
    margin: 0 auto;
}
@media only screen and (min-width: 340px) {
.most-wanted h1 + p {
    max-width: 300px;
}
}
@media only screen and (min-width: 440px) {
.most-wanted h1 + p {
    max-width: 500px;
}
}
@media only screen and (min-width: 800px) {
.most-wanted h1 + p {
    max-width: 850px;
}
}
@media only screen and (min-width: 1366px) {
.most-wanted h1 + p {
    max-width: 1220px;
    font-size: 18px;
}
}
@media only screen and (min-width: 1600px) {
.most-wanted h1 + p {
    max-width: 100%;
    font-size: 20px;
    letter-spacing: 0.5px;
}
}


/*------------ Table of Fugitive Data---------------*/

/* Outer div for fugivives data */
.most-wanted .container-fluid {
    max-width: 280px;
    margin-top: 51px;
    padding: 0;
}
@media only screen and (min-width: 440px) {
.most-wanted .container-fluid {
    max-width: 375px;
    margin-top: 51px;
}
}
@media only screen and (min-width: 600px) {
.most-wanted .container-fluid {
    max-width: 516px;
    margin-top: 51px;
}
}
@media only screen and (min-width: 800px) {
.most-wanted .container-fluid {
    max-width: 708px;
    margin-top: 51px;
}
}
@media only screen and (min-width: 1024px) {
.most-wanted .container-fluid {
    max-width: 943px;
}
}
@media only screen and (min-width: 1366px) {
.most-wanted .container-fluid {
    max-width: 1220px;
}
}

/* Inner Container for Fugitives data */
.most-wanted .col-sm-12 {
    padding: 0;
}


/*----------- Tabs: HOT CHECK, DWI FUGITIE, FAMILY VIOLENE -----------*/


/* div Container for HOT CHECK DWI FUGITIVE FAMILY VIOLENCE */
#nav-wanted {
    width:100%;
   /*  height: 95px; */
    display:table; /* centers modern browsers */
    margin:0 auto; /* centers modern browsers */
    text-align:center; /* centers IE6/7 */
}

/* ul Container for tabs: HOT CHECK DWI FUGITIVE FAMILY VIOLENCE */
#nav-wanted ul {
    height: 68px;
    list-style:none;
    background-color: #61918d; /* dark green */
    text-align: center; /* IE6/7 haslayout trip-switch, and IE6/7 only need ul to be display inline, yet does no harm to others */
    border-radius: 4px 4px 0 0;
    border: none;
}
@media only screen and (min-width: 600px) {
#nav-wanted ul {
    height: 60px;
}
}

/*  li containers for tabs HOT CHECK DWI, FUGITIVE FAMILY and VIOLENCE */
#nav-wanted li {
    display:inline-block;
    width: 80px;
    background: none;
    text-align: center;
    font-family: 'Arvo', serif;
    font-size:11px;
    text-transform: uppercase;
    color:#61918d;  /* dark green */
    letter-spacing:0.01px;
    border-top: 9px solid #61918d; /* dark Green */
}
@media only screen and (min-width: 440px) {
#nav-wanted li {
    width: 102px;
}
}
@media only screen and (min-width: 600px) {
#nav-wanted li {
    width: 125px;
}
}
@media only screen and (min-width: 800px) {
#nav-wanted li {
    width: 210px;
    font-size: 12px;
}
}
@media only screen and (min-width: 1024px) {
#nav-wanted li {
    width: 232px;
    font-size:14px;
}
}
@media only screen and (min-width: 1366px) {
#nav-wanted li {
    width: 300px;
    font-size:16px;
}
}
/* li container for HOT CHECK tab */
#pan1 {
    margin-left: 15px;
}
@media only screen and (min-width: 440px) {
#pan1 {
    margin-left: 29px;
}
}
@media only screen and (min-width: 600px) {
#pan1 {
    margin-left: 64px;
}
}
@media only screen and (min-width: 800px) {
#pan1 {
    margin-left: 33px;
}
}
@media only screen and (min-width: 1024px) {
#pan1 {
    margin-left: 116px;
}
}
@media only screen and (min-width: 1366px) {
#pan1 {
    margin-left: 150px;
}
}

/* li container for HOT CHECK tab */
#pan2 {
    margin-left: 5px;
    margin-right: 5px;
}
@media only screen and (min-width: 440px) {
#pan2 {
    margin-left: 6px;
    margin-right: 6px;
}
}
@media only screen and (min-width: 1024px) {
#pan2 {
    margin-left: 8px;
    margin-right: 8px;
}
}

/* a-tags for tabs HOT CHECK, DWI FUGITIVes & family violence */
.nav-tabs > li > a {
    margin-right: 0;
    padding: 17px 0 11px 0;
    border-radius: 4px 4px 0 0;
    background: #afc3bb;
    border: none!important;
}
@media only screen and (min-width: 600px) {
.nav-tabs > li > a {
    padding: 10px 0 10px 0;
}
}
@media only screen and (min-width: 800px) {
.nav-tabs > li > a {
    padding: 20px 0 15px 0;
}
}
@media only screen and (min-width: 1024px) {
.nav-tabs > li > a {
    padding: 20px 0 12px 0;
}
}
@media only screen and (min-width: 1366px) {
.nav-tabs > li > a {
    padding: 20px 0 9px 0;
}
}

/* a tags for tabs focus & hover (Bootstrap override) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: #faeddb; /* light orange */
    border-bottom-color: transparent;
    color: #61918d;
    outline: none;
}

/* FUGITIVES tab */
.nav-tabs > li:nth-child(2) > a span {
    display: block;
}
@media only screen and (min-width: 800px) {
.nav-tabs > li:nth-child(2) > a span {
    display: inline-block;
}
}
.nav-tabs > li:last-child > a span {
    display: none;
}
@media only screen and (min-width: 600px) {
.nav-tabs > li:last-child > a span {
    display: inline-block;
}
}


/*----------------- Fugitive Photos & Text------------------*/


/* Outer container for all fugitive information */
#fondo {
    background-color: #faeddb;
    width: 100%;
    height: 100%;
}

/* Inner container for all fugitive information */
#fondo > div {
    padding: 0 12px;
}
@media only screen and (min-width: 1366px) {
#fondo > div {
    padding-left: 96px;
}
}

/* Container for each fugitive */
#fondo > div > div {
    overflow: hidden;
    display: inline-block;
    max-width: 420px;
    margin-left: 26px;
    margin-bottom: 50px;
}
@media only screen and (min-width: 440px) {
#fondo > div > div {
margin-left: 55px;
}
}
@media only screen and (min-width: 600px) {
#fondo > div > div {
margin-left: 55px;
}
}
@media only screen and (min-width: 800px) {
#fondo > div > div {
margin-left: 170px;
}
}
@media only screen and (min-width: 1024px) {
#fondo > div > div {
    width:  410px;
    height: 220px;
    margin-left: 30px;
    margin-bottom: 0;
}
}
@media only screen and (min-width: 1366px) {
#fondo > div > div {
    max-width: 100%;
    width:  500px;
    margin-left: 35px;
}
}

/* Photo of fugitive */
@media only screen and (min-width: 600px) {
#fu1 {
    float: left;
    margin-top: 17px;
}
}

/* Text beneath photo of fuguitive */
#fug1 {
    text-align: left;
    font-size: 13px;
    margin-top: 12px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.1px;
    line-height: 17px;
}
@media only screen and (min-width: 600px) {
#fug1 {
    float: left;
    margin-left:  20px;
}
}
@media only screen and (min-width: 1024px) {
#fug1 {
    max-width: 250px;
    line-height: 19px;
}
}
@media only screen and (min-width: 1366px) {
#fug1 {
    max-width: 350px;
    font-size: 15px;
}
}

#fug1 span {
    display: none;
}
@media only screen and (min-width: 1366px) {
#fug1 span {
    display: inline;
}
}


/* Hot Check Fugitives
    DWI Fugitives
    Family Violence Fugitives */
#fonto > div > h3 {
    margin: 55px 0 77px 0;
}


/* ===============================================================
                COMMISSIONERS MINUTES PAGE
================================================================*/

/* Container for content */
@media only screen and (min-width: 1024px) {
.misdemeanor2 {
    margin: 0px auto 100px auto;
}
}

@media only screen and (min-width: 1024px) {
.misdemeanor2 .intro  {
    padding: 0 50px;
}
}
@media only screen and (min-width: 1366px) {
.misdemeanor2 .intro  {
    max-width: 1267px;
    padding: 0 20px;
}
}

/* Commissioner's Minutes */
.commissioners-minutes .page-title-2 {
    max-width: 100%;
    text-align: left;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 50px;
}
@media only screen and (min-width: 360px) {
.commissioners-minutes .page-title-2 {
    font-size: 24px;
}
}
@media only screen and (min-width: 1366px) {
.commissioners-minutes .page-title-2 {
    font-size: 30px;

}
}

/* 2018 */
.menu-file {
    font-size: 15px;
    color: #53312B;
    font-weight: 600;
    line-height: 30px;
    background-color:  #fdf5ea;
    border-bottom: 1px solid rgba(83,49,43,0.20);
}
.menu-file-2 {    /* first menu-file */
    border-top: 1px solid rgba(83,49,43,0.20);
}
@media only screen and (min-width: 800px) {
.menu-file {
    font-size: 17px;
    line-height: 32px;
}
}
@media only screen and (min-width: 1024px) {
.menu-file {
    font-size: 19px;
    line-height: 34px;
}
}
@media only screen and (min-width: 1366px) {
.menu-file {
    font-size: 22px;
    line-height: 37px;
}
}

/* 2018 hover */
.menu-file:hover {
    font-size: 17px;
    color: #b84323;
}
@media only screen and (min-width: 800px) {
.menu-file:hover {
    font-size: 19px;
}
}
@media only screen and (min-width: 1024px) {
.menu-file:hover {
    font-size: 21px;
}
}
@media only screen and (min-width: 1366px) {
.menu-file:hover {
    font-size: 24px;
}
}

/* 2018 focus */
a.minutes-color-a:focus > div {
    font-size: 17px;
    color: #b84323;
}
@media only screen and (min-width: 800px) {
a.minutes-color-a:focus > div {
    font-size: 19px;
}
}
@media only screen and (min-width: 1024px) {
a.minutes-color-a:focus > div {
    font-size: 21px;
}
}
@media only screen and (min-width: 1366px) {
a.minutes-color-a:focus > div {
    font-size: 24px;
}
}

/* arrow icon beside 2018 */
.icono-minutes {
    top: -1px;
    padding-left: 6px;
    padding-right: 5px;
    font-size: 9px;
}
@media only screen and (min-width: 1024px) {
.icono-minutes {
    top: -1px;
    padding-left: 7px;
    padding-right: 6px;
    font-size: 10px;
}
}
@media only screen and (min-width: 1366px) {
.icono-minutes {
    top: -2px;
    padding-left: 9px;
    padding-right: 8px;
    font-size: 11px;
}
}

/* container for all [acrobat icon + January 3, 2018] */
.submenu-file {
    padding: 5px;
    border-bottom: 1px solid #CBC2B8;
    font-size: 13px;
}
@media only screen and (min-width: 1024px) {
.submenu-file {
    padding: 5px;
    border-bottom: 1px solid #CBC2B8;
    font-size: 13px;
}
}
@media only screen and (min-width: 1366px) {
.submenu-file {
    padding: 5px;
    border-bottom: 1px solid #CBC2B8;
    font-size: 14px;
}
}

/* container for each [acrobat icon + January 3, 2018] */
@media only screen and (min-width: 1366px) {
.submenu-file > div:first-child {
    padding-left: 3px;
    padding-right: 0;
}
.submenu-file > div + div {
    padding-left: 30px;
    padding-right: 30px;
}
}

/* acrobat icon */
.submenu-file img {
    display: block;
    width: 20px;
    margin-right: 6px;
}
@media only screen and (min-width: 1100px) {
.submenu-file img {
    display: inline;
}
}

/* January 3, 2018  */
.submenu-file a {
    color: #3063D2;
    text-decoration: underline;
}

.submenu-file a:hover,
.submenu-file a:focus {
    font-weight: 600;
    color: #000;
}


/* =================================================
         STANDARD STYLES FOR HISTORY PAGES
==================================================*/

/* Historical map or image for the page
   Swap out maps */
.historical-map-1 img + img {
    display: none;
}
@media only screen and (min-width: 730px) {
.historical-map-1 img:first-child {
    display: none;
}
.historical-map-1 img:nth-child(2) {
    display: inline;
}
}
@media only screen and (min-width: 975px) {
.historical-map-1 img:nth-child(2) {
    display: none;
}
.historical-map-1 img:nth-child(3) {
    display: inline;
}
}
@media only screen and (min-width: 1224px) {
.historical-map-1 img:nth-child(3) {
    display: none;
}
.historical-map-1 img:last-child {
    display: inline;
}
}
@media only screen and (min-width: 1600px) {
.historical-map-1 img {
    width: 100%;
}
}

/* Page Title & Opening Statement */
@media only screen and (min-width: 800px) {
.services.history-1 {
    margin: 6px 0!important;
    padding: 0 60px 0 60px;
}
}

.services.zoom {
    position: relative;
   padding: 0;
}
.services.zoom2 {
    position: relative;
}

.history-container.page-container {
    padding-bottom: 0;
}

/* page title - Bexar Archive, 300 aniversary, State Seal, etc */
.history-1 .page-title  {
    margin-top: -15px;
    margin-bottom: 0;
    font-size: 14px;
}
@media only screen and (min-width: 375px) {
.history-1 .page-title  {
    font-size: 17px;
}
}
@media only screen and (min-width: 600px) {
.history-1 .page-title {
    font-size: 28px;
}
}
@media only screen and (min-width: 720px) {
.history-1 .page-title {
    font-size: 24px;
}
}
@media only screen and (min-width: 800px) {
.history-1 .page-title {
    margin-top: -22px;
    font-size: 28px;
}
}
@media only screen and (min-width: 1024px) {
.history-1 .page-title {
    font-size: 28px;
    text-align: center;
}
}
@media only screen and (min-width: 1366px) {
.history-1 .page-title {
    font-size: 30px;
    left: 7px;
}
}
@media only screen and (min-width: 1600px) {
.history-1 .page-title {
    font-size: 32px;
    left: 0px;
}
}

/* Container - Introductory Quote */
.history-quote {
    width: 296px;
    margin: 25px auto 0 auto;
}
@media only screen and (min-width: 414px) {
.history-quote {
    width: 354px;
}
}
@media only screen and (min-width: 600px) {
.history-quote {
    width: 490px;
}
}
@media only screen and (min-width: 800px) {
.history-quote {
    width: 680px;
    text-align: center;
}
}
@media only screen and (min-width: 1024px) {
.history-quote {
    width: 760px;
    margin: 25px auto 0 auto;
}
}
@media only screen and (min-width: 1366px) {
.history-quote {
    margin-top: 35px;
    width: 1180px;
}
}

/* beginning quotation mark - position */
.history-quote>p>img:first-child {
    margin-top: -18px;
}

/* ending quotation mark -position */
.history-quote>p>i+img {
    margin-top: -10px;
}

/* quote marks - size */
.history-quote img {
    width: 12px;
}
@media only screen and (min-width: 600px) {
.history-quote img {
    width: 16px;
}
}
@media only screen and (min-width: 1024px) {
.history-quote img {
    width: 18px;
}
}
@media only screen and (min-width: 1366px) {
.history-quote img{
    width: 20px;
}
}

/*  - Mary Maverick, Early Texas Settler
    - Fray Pedro Pérez de Mezquía O.F.M. 1718
    - The Texas Constitution */
.history-container>div + p {
    max-width: 100%;
    margin-top: 0;
    text-align: center;
}

/* The Bexar Archives currently reside in two separate locales: */
.history-lead-in {
font-family: Arvo, serif;
font-size: 24px;
color: #B1482B;
letter-spacing: 0.11px;
line-height: 36px;
}

/*-------------- TYPICAL CONTENT LAYOUT -----------------*/

/* content container */
.history-content {
    position: relative;
    margin-top: 50px;
    margin-bottom: 90px;
}
@media only screen and (min-width: 800px) {
.history-content {
    max-width: 733px;
    margin: 76px auto 90px auto;
}
}
@media only screen and (min-width: 1024px) {
.history-content {
    max-width: 920px;
    margin: 76px auto 90px auto;
}
}
@media only screen and (min-width: 1366px) {
.history-content {
    max-width: 1140px;
}
}
@media only screen and (min-width: 1600px) {
.history-content {
    max-width: 1320px;
}
}

.zoom2 .history-content {
    position: relative;
}

/* Content in Left Column */
@media only screen and (min-width: 1024px) {
.history-left {
    float: left;
    max-width: 288px;
    margin-top: 4px;
}
}
@media only screen and (min-width: 1366px) {
.history-left {
    max-width: 346px;
     margin-top: 8px;
}
}
@media only screen and (min-width: 1600px) {
.history-left {
    max-width: 405px;
}
}

/* Content in Right Column */
.history-right {
    max-width: 296px;
    margin: 60px auto 0 auto;
}
@media only screen and (min-width: 414px) {
.history-right {
    max-width: 355px;
}
}
@media only screen and (min-width: 600px) {
.history-right {
    max-width: 491px;
}
}
@media only screen and (min-width: 800px) {
.history-right {
    max-width: 600px;
}
}
@media only screen and (min-width: 1024px) {
.history-right {
    float: right;
    max-width: 574px;
    margin-top: 0;
}
}
@media only screen and (min-width: 1366px) {
.history-right {
    max-width: 720px;
}
}
@media only screen and (min-width: 1600px) {
.history-right {
    max-width: 860px;
}
}

/* container for image with zoom */
.image-with-zoom {
    position: relative;
    max-width: 296px;
    margin: 0 auto;
}
@media only screen and (min-width: 600px) {
.image-with-zoom {
    max-width: 400px;
}
}
@media only screen and (min-width: 1024px) {
.image-with-zoom {
    max-width: 288px;
}
}
@media only screen and (min-width: 1366px) {
.image-with-zoom {
    max-width: 346px;
}
}
@media only screen and (min-width: 1600px) {
.image-with-zoom {
    max-width: 405px;
}
}

/* container - image with zoom and zoom icon */
.zoom-image {
    position: relative;
    padding: 9px 9px 90px 9px;
    background: #FDF5EA;
    border-radius: 7px;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
}
/* container - image with zoom and zoom icon */
@media only screen and (min-width: 600px) {
.zoom-image {
    width: 398px;
}
}
@media only screen and (min-width: 1024px) {
.zoom-image {
    width: 288px;
}
}
@media only screen and (min-width: 1366px) {
.zoom-image {
    width: 346px;
}
}
@media only screen and (min-width: 1600px) {
.zoom-image {
    width: 398px;
}
}

/* zoom icon */
.zoom-icon {
    position: absolute;
    width: 78px;
    top: 36%;
    left: 37.5%;
}
@media only screen and (min-width: 600px) {
.zoom-icon {
    width: 105px;
    font-size: 20px;
}
}
@media only screen and (min-width: 1024px) {
.zoom-icon {
    width: 76px;
    font-size: 17px;
}
}
@media only screen and (min-width: 1366px) {
.zoom-icon  {
    width: 91px;
    font-size: 20px;
}
}
@media only screen and (min-width: 1600px) {
.zoom-icon {
    width: 105px;
    font-size: 24px;
}
}

.zoom-icon:hover img,
.zoom-icon:focus img,
.zoom-icon-2:hover img,
.zoom-icon-2:focus img {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    outline: 2px solid #0086F1;
}

/* Container - heading and subheading beneath image */
.image-text {
    width: 100%;
    position: absolute;
    top: 371px;
}

@media only screen and (min-width: 600px) {
.image-text {
/*     top: 84.5%; */
    top: 503px;
}
}
@media only screen and (min-width: 1024px) {
.image-text {
   top: 362px;
}
}
@media only screen and (min-width: 1366px) {
.image-text {
    top: 434px;
}
}
@media only screen and (min-width: 1600px) {
.image-text {
    top: 499px;
}
}

/* HEADING for Carousel slides and images with zoom (note: various font sizes shown are necessary for the longest heading) */
.zoom-image-heading {
    margin-bottom: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #61918D;
    letter-spacing: 0.3px;
    text-align: center;
}
@media only screen and (min-width: 600px) {
.zoom-image-heading {
    font-size: 20px;
}
}
@media only screen and (min-width: 1024px) {
.zoom-image-heading {
    font-size: 17px;
}
}
@media only screen and (min-width: 1366px) {
.zoom-image-heading  {
    font-size: 20px;
}
}
@media only screen and (min-width: 1600px) {
.zoom-image-heading {
    font-size: 24px;
}
}

/* SUBHEADING for Carousel slides and images with zoom  */
.zoom-image-subheading {
    margin-top: 7px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #53312B;
    letter-spacing: 0.01px;
    text-align: center;
}
@media only screen and (min-width: 1366px) {
.zoom-image-subheading {
    letter-spacing: 0.45px;
}
}
@media only screen and (min-width: 1600px) {
.zoom-image-subheading {
    font-size: 18px;
    letter-spacing: 0.45px;
}
}

/* OUTER CONTAINER for large version of images with zoom  */
.large-image-with-zoom {
  opacity: 0;
    position: absolute;
    top: 0;
    z-index: 100;
    pointer-events: none;
    transition: opacity .4s ease-in;
}

.large-image-with-zoom:target,
.large-image-with-zoom:target + div.overlay2   {
    opacity: 1;
    pointer-events: auto;
}

/* INNER CONTAINER for large version of images with zoom */
.large-image-with-zoom div {
    position: relative;
}

/* Text above large image */
@media only screen and (min-width: 414px) {
.large-image-text {
    margin-left: -48px;
}
}
@media only screen and (min-width: 600px) {
.large-image-text {
    margin-top: 0;
    margin-left: -40px;
}
}
@media only screen and (min-width: 800px) {
.large-image-text {
    margin-top: ;
    margin-left: -100px;
}
}
@media only screen and (min-width: 1024px) {
.large-image-text {
    width: 709px;
    margin-top: ;
    margin-left: auto;
    text-align: center;
}
}
@media only screen and (min-width: 1366px) {
.large-image-text {
    margin-top: ;
    margin-left: ;
}
}
@media only screen and (min-width: 1600px) {
.large-image-text {
    margin-top: ;
    margin-left: ;
}
}

/* HEADING for large version of Carousel slides and images with zoom  */
.zoom-image-heading-large {
    margin-bottom: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.6px;
    text-align: left;
}
@media only screen and (min-width: 414px) {
.zoom-image-heading-large {
    font-size: 18px;
}
}
@media only screen and (min-width: 600px) {
.zoom-image-heading-large {
    font-size: 22px;
}
}
@media only screen and (min-width: 800px) {
.zoom-image-heading-large {
    font-size: 26px;
}
}
@media only screen and (min-width: 1024px) {
.zoom-image-heading-large {
    width: 709px;
    font-size: 36px;
    letter-spacing: 1.4px;
    text-align: center;
}
}

/* SUBHEADING for large version of Carousel slides and images with zoom */
.zoom-image-subheading-large {
    margin-top: 7px;
    font-size: 12px;
    color: #fff;
    letter-spacing: 0.45px;
    text-align: left
}
@media only screen and (min-width: 414px) {
.zoom-image-subheading-large {
    font-size: 14px;
}
}
@media only screen and (min-width: 600px) {
.zoom-image-subheading-large {
    font-size: 15px;
}
}
@media only screen and (min-width: 800px) {
.zoom-image-subheading-large {
    margin-top: 7px;
    font-size: 17px;
}
}
@media only screen and (min-width: 1024px) {
.zoom-image-subheading-large {
    font-size: 18px;
    text-align: center;
}
}

/* large "zoomed-in" image */
.large-image-with-zoom .large-image-text + img {
    max-width: 296px;
    border: 12px solid black ;
    border-radius: 10px;
}
@media only screen and (min-width: 414px) {
.large-image-with-zoom .large-image-text + img {
    max-width: 400px;
    margin-left: -53px;
}
}
@media only screen and (min-width: 600px) {
.large-image-with-zoom .large-image-text + img {
    max-width: 560px;
    margin-left: -82px;
}
}
@media only screen and (min-width: 800px) {
.large-image-with-zoom .large-image-text + img {
    max-width: 709px;
    margin-top: 5px;
    margin-left: -156px;
}
}
@media only screen and (min-width: 1024px) {
.large-image-with-zoom .large-image-text + img {
    margin-left: 105px;
}
}
@media only screen and (min-width: 1366px) {
.large-image-with-zoom .large-image-text + img {
    margin-left: 216px;
}
}
@media only screen and (min-width: 1600px) {
.large-image-with-zoom .large-image-text + img {
    margin-left: 305px;
}
}

/* X to close modals */
.close1 {
    width: 22px;
    position: absolute;
    top: 13px;
    right: 0px;
}
@media only screen and (min-width: 414px) {
.close1 {
    top: 15px;
    right: 5px;
}
}
@media only screen and (min-width: 600px) {
.close1 {
    width: 30px;
    top: 16px;
    right: 40px;
}
}
@media only screen and (min-width: 800px) {
.close1 {
    top: 22px;
    right: 55px;
}
}
@media only screen and (min-width: 1024px) {
.close1 {
    width: 50px;
    top: 28px;
    right: -110px;
}
}
@media only screen and (min-width: 1280px) {
.close1 {
    top: 22px;
    right: -230px;
}
}
@media only screen and (min-width: 1366px) {
.close1 {
    right: -275px;
}
}
@media only screen and (min-width: 1600px) {
.close1 {
    right: -390px;
}
}
@media only screen and (min-width: 1920px) {
.close1 {
    right: -542px;
}
}
@media only screen and (min-width: 2560px) {
.close1 {
    right: -870px;
}
}

.close1:hover img,
.close1:focus img,
.close2:hover img,
.close2:focus img,
.close3:hover img,
.close3:focus img {
    outline: 2px solid #0086F1;
}

/* Introductory Statement - swap out */
.history-left p.heading-3 {
    color: #B84323;
    text-align: center;
}
.history-right p.heading-3 {
    display: none;
    color: #B84323;
}
@media only screen and (min-width: 1024px) {
.history-left p.heading-3 {
    display: none;
}
.history-right p.heading-3 {
    display: block;
}
}

/* Typical paragraph of content */
.history-content p {
    margin-bottom: 24px;
}

/*-------------------- Carousel ----------------------*/

/* Outer container of carousel */
.history-carousel .container {
    /* Bootstrap */
    padding-right: 15px;
    padding-left: 15px;

    /* My Styles */
    width: 296px;
    margin-top: 40px auto;
    padding: 0;
}

@media only screen and (min-width: 414px) {
.history-carousel .container {
  width: 350px;
}
}
@media (min-width: 465px) {
.history-carousel .container {
    width: 397px;
  }
}
@media (min-width: 1024px) {
.history-carousel .container {
    width: 288px;
  }
}
@media (min-width: 1366px) {
.history-carousel .container {
    width: 346px;
  }
}
@media (min-width: 1600px) {
.history-carousel .container {
    width: 405px;
  }
}

/* Outer container for text beneath the slides */
.history-carousel .carousel-caption {
    /* Bootstrap */
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 30;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);

    /* My Styles */
    right: 0;
    left: 0;
    padding: 0;
    bottom: auto;
    top: 366px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-shadow: none;
}

/* Inner container for text beneath the slides */
.image-text-2 {
    width: 100%;
    position: absolute;
    top: 0;
}
@media only screen and (min-width: 414px) {
.image-text-2 {
    top: 75px;
}
}
@media (min-width: 465px) {
.image-text-2 {
    top: 137px;
  }
}
@media (min-width: 1024px) {
.image-text-2 {
    top: -12px;
  }
}
@media (min-width: 1366px) {
.image-text-2 {
    top: 67px;
  }
}
@media (min-width: 1600px) {
.image-text-2 {
    top: 134px;
  }
}

/* zoom icon */
.zoom-icon-2 {
    position: absolute;
    top: -210px;
    right: 98px;
}
@media only screen and (min-width: 414px) {
.zoom-icon-2 {
    top: -174px;
    right: 125px;
}
}
@media only screen and (min-width: 465px) {
.zoom-icon-2 {
    top: -142px;
    right: 147px;
}
}
@media only screen and (min-width: 1024px) {
.zoom-icon-2 {
    top: -215px;
    right: 94px;
}
}
@media only screen and (min-width: 1366px) {
.zoom-icon-2 {
    top: -177px;
    right: 122px;
}
}
@media only screen and (min-width: 1600px) {
.zoom-icon-2 {
    top: -140px;
    right: 152px;
}
}

/* ol container for Dot indicators */
.history-carousel .carousel-indicators {
    /* bootstrap.css */
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 30;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;

    /* My Styles */
    width: 140px;
    bottom: 86px;
    left: 167px;
    line-height: 0;
    border-radius: 4px;
}
@media (min-width: 414px) {
.history-carousel .carousel-indicators  {
    left: 210px;
    bottom: 98px;
}
}
@media (min-width: 465px) {
.history-carousel .carousel-indicators  {
    left: 250px;
    bottom: 108px;
}
}
@media (min-width: 600px) {
.history-carousel .carousel-indicators  {
    left: 252px;
    bottom: 108px;
}
}
@media (min-width: 1024px) {
.history-carousel .carousel-indicators  {
    left: 160px;
    bottom: 84px;
}
}
@media (min-width: 1366px) {
.history-carousel .carousel-indicators  {
    left: 208px;
    bottom: 97px;
}
}
@media (min-width: 1600px) {
.history-carousel .carousel-indicators  {
    left: 254px;
    bottom: 109px;
}
}

/* The Dot indicator li */
.history-carousel .carousel-indicators  li {
    /* bootstrap.css */
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 10px;

    /* My Styles */
    width: 10px;
    height: 10px;
    margin: 3px;
    background: rgba(255,255,255,0.60);
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: none;
}
/* color for Dot Indicator - Bejar in Span & State Seal */
.history-carousel .carousel-indicators.indicators-2  li {
    background: rgba(83,49,43,0.50);
}
 /* Bejar in Spain - background: #8C8E95; */

/* Active Dot Indicator */
.history-carousel .carousel-indicators  li.active {
    /* bootstrap.css */
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;

    /* My Styles */
    width: 10px;
    height: 10px;
    margin: 3px 3px;
    background: #fff;
}
/* color for Active Dot Indicator - Bejar in Span & State Seal */
.history-carousel .carousel-indicators.indicators-2  li.active {
    background: #53312B;
}

/* Next and Prev buttons */
.history-carousel .carousel-control.left {
    /* bootstrap.css */
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-repeat: repeat-x;

    /* My Styles */
    top: 175px;
    left: 20px;
    background-image: none;
}
@media only screen and (min-width: 414px) {
.history-carousel .carousel-control.left {
    top: 210px;
}
}
@media only screen and (min-width: 465px) {
.history-carousel .carousel-control.left {
    top: 242px;
}
}
@media only screen and (min-width: 1024px) {
.history-carousel .carousel-control.left {
    top: 169px;
}
}
@media only screen and (min-width: 1366px) {
.history-carousel .carousel-control.left {
    top: 207px;
}
}
@media only screen and (min-width: 1600px) {
.history-carousel .carousel-control.left {
    top: 244px;
}
}
.history-carousel .carousel-control.right {
    /* bootstrap.css */
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-repeat: repeat-x;

    /* My Styles */
    top: 175px;
    right: 20px;
    background-image: none;
}
@media only screen and (min-width:414px) {
.history-carousel .carousel-control.right {
    top: 210px;
}
}
@media only screen and (min-width:465px) {
.history-carousel .carousel-control.right {
    top: 242px;
}
}
@media only screen and (min-width:1024px) {
.history-carousel .carousel-control.right {
    top: 169px;
}
}
@media only screen and (min-width:1366px) {
.history-carousel .carousel-control.right {
    top: 207px;
}
}
@media only screen and (min-width:1600px) {
.history-carousel .carousel-control.right {
    top: 244px;
}
}

/*------------------ Carousel - large version ----------------------*/


/* dark overlay */
.overlay2 {
    /* display: none; */
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
    transition: display .4s ease-in;
}

/* Conatainer for large zoomed version of carousel */
.history-carousel-large {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    transition: opacity .4s ease-in;
}
@media only screen and (min-width: 1024px) {
.history-carousel-large {
    left: 80px;
}
}
@media only screen and (min-width: 1366px) {
.history-carousel-large {
    left: 203px;
}
}
@media only screen and (min-width: 1600px) {
.history-carousel-large {
    left: 294px;
}
}

.history-carousel-large:target,
.history-carousel-large:target + div.overlay2 {
    opacity: 1;
    pointer-events: auto;
}

.history-carousel-large .container {
    padding: 0;
}
@media only screen and (min-width: 768px) {
.history-carousel-large .container {
    width: 100%;
    margin: 0 auto;
}
}

/* Outer container - large version of carousel */
.history-carousel-large .carousel {
    margin: -40px auto 0 auto;
}
@media only screen and (min-width: 414px) {
.history-carousel-large .carousel {
    margin-top: -35px;
}
}
@media only screen and (min-width: 800px) {
.history-carousel-large .carousel {
    margin-top: -22px;
}
}
@media only screen and (min-width: 1024px) {
.history-carousel-large .carousel {
    margin-top: -10px;
}
}

.history-carousel-large .carousel-inner {
    position: relative;
    z-index: 110;
   /*  overflow: visible; */
}

.history-carousel-large .item {
    margin-top: 110px;
    z-index: 120;
}

/* slide image - large version of carousel */
.history-carousel-large .item img {
    margin: 0 auto;
    border: 12px solid black;
    border-radius: 10px;
}

/* Container for slide caption */
.history-carousel-large .carousel-caption {
    /* Bootstrap */
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 30;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);

    /* My Styles */
    top: -85px;
    right: auto;
    left: 5px;
    z-index: 130;
}
@media only screen and (min-width:414px) {
.history-carousel-large .carousel-caption {
    top: -94px;
}
}
@media only screen and (min-width:600px) {
.history-carousel-large .carousel-caption {
    position: absolute;
    top: -98px;
    left: 42px;
}
}
@media only screen and (min-width:800px) {
.history-carousel-large .carousel-caption {
    top: -108px;
    left: 56px;
}
}
@media only screen and (min-width:1024px) {
.history-carousel-large .carousel-caption {
    top: -122px;
    left: 0;
}
}
@media only screen and (min-width:1366px) {
.history-carousel-large .carousel-caption {
   /*  left: 165px; */
}
}
@media only screen and (min-width:1600px) {
.history-carousel-large .carousel-caption {
   /*  left: 170px; */
}
}

/* SUBHEADING for Carousel slides */
@media only screen and (max-width:413px) {
.history-carousel-large .zoom-image-subheading-large {
    margin-top: 0px;
    font-size: 13px;
    line-height: 18px;
}
}

/* Next and Prev buttons  - large version of carousel */
.history-carousel-large .carousel-indicators {
    display: none;
}

/* Prev button - large version of carousel */
.history-carousel-large .carousel-control.left {
    /* bootstrap.css */
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-repeat: repeat-x;

    /* My Styles */
    width: 28px;
    top: 218px;
    left: -6px;
    background-image: none;
    z-index: 130;
}
@media only screen and (min-width:360px) {
.history-carousel-large .carousel-control.left {
    top: 236px;
}
}
@media only screen and (min-width:414px) {
.history-carousel-large .carousel-control.left {
    top: 250px;
    left: -20px;
}
}
@media only screen and (min-width:507px) {
.history-carousel-large .carousel-control.left {
    top: 308px;
    left: -20px;
}
}
@media only screen and (min-width:600px) {
.history-carousel-large .carousel-control.left {
    width: 34px;
    top: 300px;
    left: -44px;
}
}
@media only screen and (min-width:700px) {
.history-carousel-large .carousel-control.left {
    width: 34px;
    top: 340px;
    left: -44px;
}
}
@media only screen and (min-width:800px) {
.history-carousel-large .carousel-control.left {
    width: 34px;
    top: 373px;
    left: -46px;
}
}
@media only screen and (min-width:1024px) {
.history-carousel-large .carousel-control.left {
    width: 50px;
    top: 391px;
    left: -100px;
}
}

/* Next button - large version of carousel */
.history-carousel-large .carousel-control.right {
    /* bootstrap.css */
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);
    background-repeat: repeat-x;

    /* My Styles */
    width: 28px;
    top: 218px;
    right: -6px;
    background-image: none;
    z-index: 130;
}
@media only screen and (min-width:360px) {
.history-carousel-large .carousel-control.right {
    top: 236px;
}
}
@media only screen and (min-width:414px) {
.history-carousel-large .carousel-control.right {
    top: 250px;
    right: -20px;
}
}
@media only screen and (min-width:507px) {
.history-carousel-large .carousel-control.right {
    top: 308px;
    right: -20px;
}
}
@media only screen and (min-width:600px) {
.history-carousel-large .carousel-control.right {
    width: 34px;
    top: 300px;
    right: -44px;
}
}
@media only screen and (min-width:700px) {
.history-carousel-large .carousel-control.right {
    width: 34px;
    top: 340px;
    right: -44px;
}
}
@media only screen and (min-width:800px) {
.history-carousel-large .carousel-control.right {
    width: 34px;
    top: 373px;
    right: -46px;
}
}
@media only screen and (min-width:1024px) {
.history-carousel-large .carousel-control.right {
    width: 50px;
    top: 391px;
    right: -100px;
}
}

/* X to close modals */
.close3 {
    width: 22px;
    position: absolute;
    top: 32px;
    right: 0px;
    z-index: 130;
}
@media only screen and (min-width: 414px) {
.close3 {
    width: 26px;
    right: 0px;
}
}
@media only screen and (min-width: 600px) {
.close3 {
    width: 30px;
    top: 28px;
    right: 40px;
}
}
@media only screen and (min-width: 800px) {
.close3 {
    width: 34px;
    top: 34px;
    right: 55px;
}
}
@media only screen and (min-width: 1024px) {
.close3 {
    width: 50px;
    top: 38px;
    right: -110px;
}
}
@media only screen and (min-width: 1280px) {
.close3 {
    top: 40px;
    right: -236px;
}
}
@media only screen and (min-width: 1366px) {
.close3 {
    width: 42px;
    right: -255px;
}
}
@media only screen and (min-width: 1600px) {
.close3 {
    right: -370px;
}
}
@media only screen and (min-width: 1920px) {
.close3 {
    right: -522px;
}
}
@media only screen and (min-width: 2560px) {
.close3 {
    right: -850px;
}
}

/* Historical Stats Table */
.history-content table {
    border-collapse: separate;
    overflow: hidden;
    width: 100%;
    margin: 45px auto 0 auto;
    border: 1px solid #DBCEC4;
    border-radius: 5px;
}
@media only screen and (min-width: 465px) {
.history-content table {
    width: 397px;
}
}
@media only screen and (min-width: 1024px) {
.history-content table {
    width: 288px;
}
}
@media only screen and (min-width: 1366px) {
.history-content table {
    width: 346px;
    margin-top: 49px;
}
}
@media only screen and (min-width: 1600px) {
.history-content table {
    width: 405px;
}
}

/* Historical Stats Table that follows a carousel */
.history-content table.with-carousel {
    width: 296px;
}
@media only screen and (min-width: 414px) {
.history-content table.with-carousel {
    width: 350px;
}
}
@media only screen and (min-width: 465px) {
.history-content table.with-carousel {
    width: 397px;
}
}
@media only screen and (min-width: 1024px) {
.history-content table.with-carousel {
    width: 288px;
}
}
@media only screen and (min-width: 1366px) {
.history-content table.with-carousel {
    width: 346px;
    margin-top: 49px;
}
}
@media only screen and (min-width: 1600px) {
.history-content table.with-carousel {
    width: 400px;
}
}

.history-content th {
    padding: 8px 14px;
    font-family: Arvo, serif;
    font-size: 16px;
    font-weight: normal;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 28px;
    background: #61918D;
}

.history-content td {
    padding: 5px 7px 6px 10px;
    font-size: 13px;
    letter-spacing: 0.01px;
    line-height: 26px;
    vertical-align: top;
    background: #FDF5EA;
    border-top: 1px solid #DBCEC4;
}
@media only screen and (min-width: 600px) {
.history-content td {
    font-size: 15px;
    letter-spacing: 0.2px;
}
}
@media only screen and (min-width: 1024px) {
.history-content td {
    font-size: 12px;
    letter-spacing: 0.01px;
}
}
@media only screen and (min-width: 1366px) {
.history-content td {
    font-size: 14px;
    letter-spacing: 0.15px;
}
}
@media only screen and (min-width: 1600px) {
.history-content td {
    font-size: 15px;
    letter-spacing: 0.2px;
}
}

.history-content td:first-child {
    font-weight: 600;
}

.history-content table + table ul {
    list-style: disc;
    padding-right: 20px;
    padding-bottom: 5px;
}
@media only screen and (min-width: 1366px) {
.history-content table + table ul {
    padding-right: 30px;
}
}

.history-content table li {
    margin-top: 12px;
    line-height: 17px;
}
@media only screen and (min-width: 465px) {
.history-content table li {
    margin-top: 10px;
}
}
@media only screen and (min-width: 1024px) {
.history-content table li {
    margin-top: 2px;
    line-height: 20px;
}
}
@media only screen and (min-width: 1366px) {
.history-content table li {
    margin-top: 6px;
    line-height: 20px;
}
}


/* =================================================
         SPECIFIC HISTORY PAGES
==================================================*/

/* ========== Bexar Archives ========================*/

/* Wide Container - Introductory Quote */
@media only screen and (min-width: 1366px) {
.bexar-archive .history-quote {
    width: 1250px;
}
}


/* The Bexar Archives currently reside  */
.bexar-archive .history-right p span {
    color: #B84323;
}

/* OUter Container - Interactive Map, Historicl Markers, etc. */
.history-min-img {
	padding: 16px 0 11px 0;
    text-align: center;
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.60) 0%, #F7E3C3 100%);
    background-image: -o-linear-gradient(rgba(255,255,255,0.60) 0%, #F7E3C3 100%);
    background-image: linear-gradient(rgba(255,255,255,0.60) 0%, #F7E3C3 100%);
}

/* OUter Container - Interactive Map, Historicl Markers, etc. */
.history-min-img div div {
    max-width: 300px;
	margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
@media only screen and (min-width: 540px) {
.history-min-img div div {
    max-width: 500px;
}
}
@media only screen and (min-width: 1024px) {
.history-min-img div div {
    max-width: 996px;

}
}
@media only screen and (min-width: 1220px) {
.history-min-img div div {
    max-width: 1200px;

}
}

@media only screen and (min-width: 1366px) {
.history-min-img div div {
    max-width: 1330px;

}
}
@media only screen and (min-width: 1600px) {
.history-min-img div div {
    max-width: 1545px;
}
}

/* Containers for individual maps: Interactive Map, Historicl Markers, etc. */
.history-min-img a {
	display: block;
    float: left;
    width: 198px;
    /* height: 200px; */
    margin: 20px 51px;
    padding: 2px 0 3px 0;
    font-size: 16px;
    text-decoration: none;
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
}
.history-min-img a:nth-child(4) {
	padding-top: 17px;
}
.history-min-img a:nth-child(5) {
	padding-top: 15px;
}
@media only screen and (min-width: 540px) {
.history-min-img a {
    margin: 20px 26px;
}
}
@media only screen and (min-width: 1024px) {
.history-min-img a {
    margin: 20px 67px;
}
}
@media only screen and (min-width: 1220px) {
.history-min-img a {
    margin: 20px 21px;
}
}
@media only screen and (min-width: 1366px) {
.history-min-img a {
    margin: 20px 34px;
}
}
@media only screen and (min-width: 1600px) {
.history-min-img a {
    margin: 20px 55px;
}
}

/* Focus - Containers for individual maps */
.history-min-img a:hover,
.history-min-img a:focus {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    outline: 1px solid #0086F1;
    text-decoration: none;
}


/* "Maps & Self-Guided Tours of Historical Bexar County" */
.history-min-img h1 {
    margin-top: 40px;
    margin-bottom: 37px;
}


/* text:  "Interactive Map"  "Historical Markers"  etc */
.history-min-img p {
	margin-top: 11px;
    text-decoration-line: none;
}

/* TIMELINE OF THE BEXAR ARCHIVES */
@media only screen and (max-width: 535px) {
.two-two span {
    display: block;
}
}

/* Outer Container - TIMELINE OF THE BEXAR ARCHIVES */
.timeline-of-archives {
    /* padding-top: 100px; */
    background-image: url('../images/bg-image-3.jpg');
    background-attachment: fixed;
}

/* Inner Container - TIMELINE OF THE BEXAR ARCHIVES */
.timeline-of-archives>div {
    padding-top: 78px;
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div {
    padding-top: 100px;
}
}

/* Inner Container - TIMELINE OF THE BEXAR ARCHIVES */
.timeline-of-archives>div>div {
    overflow: hidden;
    position: relative;
    width: 320px;
    margin: 0 auto;
    padding-bottom: 5px;
}
@media only screen and (min-width: 360px) {
.timeline-of-archives>div>div {
    width: 100%;
    max-width: 364px;
}
}
@media only screen and (min-width: 414px) {
.timeline-of-archives>div>div {
    max-width: 398px;
}
}
@media only screen and (min-width: 600px) {
.timeline-of-archives>div>div {
    max-width: 584px;
}
}
@media only screen and (min-width: 800px) {
.timeline-of-archives>div>div {
    max-width: 786px;
}
}
@media only screen and (min-width: 1024px) {
.timeline-of-archives>div>div {
    max-width: 1020px;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div>div {
    max-width: 1090px;
}
}

/* 1718 */
.timeline-of-archives>div div div:first-child {
    float: left;
    width: 50px;
    padding-top: 17px;
    font-weight: 700;
    color: #61918D;
    text-align: right;
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div div:first-child {
    padding-top: 24px;
}
}

/* timeline vertical line |   */
.timeline-of-archives>div div div:nth-child(2) {
    position: absolute;
    top: 0px;
    left: 70px;
    bottom: 0;
    border-left: 2px solid #61918D;
}
@media only screen and (min-width: 1024px) {
.timeline-of-archives>div div div:nth-child(2) {
    left: 107px;
    bottom: 0;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div div:nth-child(2) {
    left: 138px;
}
}

/* first item in timeline - adjust top & bot of vertical line */
.timeline-of-archives>div div:first-child div:nth-child(2) {
    top: 26px;
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div:first-child div:nth-child(2) {
    top: 37px;
}
}

/* last item in timeline */
.timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 132px;
}
@media only screen and (min-width: 414px) {
.timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 110px;
}
}
@media only screen and (min-width: 600px) {
.timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 92px;
}
}
@media only screen and (min-width: 1024px) {
.timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 70px;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 92px;
}
}

/*  LETTERBOX: timeline dot •  &  The earliest Spanish colonial-era */
.timeline-of-archives>div div div:last-child {
    float: left;
    max-width: 206px;
    margin-left: 50px;
    margin-right: 12px;
    margin-bottom: 41px;
    padding: 18px 12px 16px 12px;
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
}
@media only screen and (min-width: 360px) {
.timeline-of-archives>div div div:last-child {
    max-width: 232px;
}
}
@media only screen and (min-width: 414px) {
.timeline-of-archives>div div div:last-child {
    max-width: 286px;
}
}
@media only screen and (min-width: 600px) {
.timeline-of-archives>div div div:last-child {
    max-width: 468px;
}
}
@media only screen and (min-width: 800px) {
.timeline-of-archives>div div div:last-child {
    max-width: 666px;
}
}
@media only screen and (min-width: 1024px) {
.timeline-of-archives>div div div:last-child {
    max-width: 828px;
    margin-left: 129px;
    margin-right: 0;
    padding: 18px 21px 16px 21px;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div div:last-child {
    margin-left: 188px;
    margin-bottom: 55px;
    padding: 22px 27px 21px 27px;
}
}

/* timeline dot  •  */
.timeline-of-archives>div div div:last-child img:first-child {
    display: inline-block;
    width: 12px;
    margin-top: -2px;
    margin-left: -47px;

}
@media only screen and (min-width: 1024px) {
.timeline-of-archives>div div div:last-child img:first-child {
    margin-left: -98px;

}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div div:last-child img:first-child {
    width: 15px;
    margin-left: -97px;

}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div div:last-child img:first-child {
    width: 19px;
    margin-top: 2px;
    margin-left: -136px;
}
}

/* letterbox pointer  <  */
.timeline-of-archives>div div div:last-child img + img {
    display: inline-block;
    width: 9px;
    margin-top: -2px;
    margin-left: 12px;
}
@media only screen and (min-width: 1024px) {
.timeline-of-archives>div div div:last-child img + img {
    margin-left: 53px;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div div:last-child img + img {
    width: 13px;
    margin-left: 74px;
}
}

/* The earliest Spanish colonial-era */
.timeline-of-archives>div div div:last-child span {
    display: inline-block;
    margin-left: 12px;
}
@media only screen and (min-width: 1024px) {
.timeline-of-archives>div div div:last-child span {
    margin-left: 20px;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives>div div div:last-child span {
    margin-left: 27px;
}
}

/* NEXT: THE BEXAR ARCHIVE INDEX */
.timeline-of-archives .button-1 {
    margin:  34px 0 64px 100px;
}
@media only screen and (min-width: 1024px) {
.timeline-of-archives .button-1 {
    margin-left: 178px;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives .button-1 {
    margin: 42px 0 86px 238px;
}
}

.timeline-of-archives .button-1 a {
    max-width: 206px;
    padding: 10px 5px 10px 6px;
    font-size: 13px;
    letter-spacing: 0.3px;
}
@media only screen and (min-width: 375px) {
.timeline-of-archives .button-1 a {
    max-width: 100%;
    padding: 12px 8px 12px 9px;
}
}
@media only screen and (min-width: 414px) {
.timeline-of-archives .button-1 a {
    font-size: 14px;
    padding: 12px 15px 12px 16px;
}
}
@media only screen and (min-width: 1366px) {
.timeline-of-archives .button-1 {
    max-width: 100%;
}
.timeline-of-archives .button-1 a {
    max-width: 100%;
    font-size: 18px;
    padding: 14px 36px 14px 36px;
}
}
@media only screen and (min-width: 1600px) {
.timeline-of-archives .button-1 a {
    font-size: 20px;
    padding: 14px 40px 14px 40px;
}
}

/* ========== Bexar Courthouses ========================*/
@media only screen and (min-width: 1024px) {
.courthouses .history-quote {
    width: 760px;
}
}
@media only screen and (min-width: 1366px) {
.courthouses .history-quote {
    width: 1250px;
}
}

/*Container*/
.courthouses-content>div {
    overflow: hidden;
    max-width: 600px;
    margin: 54px auto;
}
@media only screen and (min-width: 1024px) {
.courthouses-content>div {
    max-width: 920px;
}
}
@media only screen and (min-width: 1366px) {
.courthouses-content>div {
    max-width: 1100px;
}
}
@media only screen and (min-width: 1600px) {
.courthouses-content>div {
    max-width: 1340px;
}
}

.courthouses-content div div {
    float: left;
    max-width: 100%;
}
@media only screen and (min-width: 1024px) {
.courthouses-content div div {
    max-width: 408px;
}
.courthouses-content div div+div:nth-child(even) {
     margin-right: 90px;
}
.courthouses-content div div:nth-child(odd) {
     margin-right: 0px;
}
.courthouses-content div div:first-child {
    max-width: 1400px;
}
}
@media only screen and (min-width: 1366px) {
.courthouses-content div div {
    max-width: 505px;
}
}
@media only screen and (min-width: 1600px) {
.courthouses-content div div {
    max-width: 620px;
}
}

/*IMG*/
.courthouses-content div div img {
    width: 620px;
}
.courthouses-content div div+div img {
    margin-top: 50px;
}
@media only screen and (min-width: 1024px) {
.courthouses-content div div:first-child img {
    width: 100%;
}
.courthouses-content div div+div img {
    height: 300px;
    margin-top: 50px;
}
}
@media only screen and (min-width: 1366px) {
.courthouses-content div div+div img {
    height: 400px;
    margin-top: 60px;
}
}
@media only screen and (min-width: 1600px) {
.courthouses-content div div+div img{
    height: 467px;
     margin-top: 70px;
}
}

/* Casas Reales - west side of Main Plaza */
.courthouses-content .heading-2 {
    margin-top: 20px;
    max-width: 320px;
    font-weight: 600;
}
@media only screen and (min-width: 1024px) {
.courthouses-content .heading-2 {
    max-width: 100%;
    margin-top: 26px;
}
}
@media only screen and (min-width: 1366px) {
.courthouses-content .heading-2 {
    margin-top: 30px;
}
}
@media only screen and (min-width: 1600px) {
.courthouses-content .heading-2 {
    margin-top: 44px;
}
}

/*Button*/
.courthouses .button-1 {
    width: 226px;
    margin: 40px auto 100px auto;
}
@media only screen and (min-width: 414px) {
.courthouses .button-1 {
    width: 236px;
}
}
@media only screen and (min-width: 1024px) {
.courthouses .button-1 {
    margin: 40px auto 100px auto;
}
}
@media only screen and (min-width: 1366px) {
.courthouses .button-1 {
    width: 276px;
    margin: 98px auto 110px auto;
}
}
@media only screen and (min-width: 1366px) {
.courthouses .button-1 {
    width: 298px;
}
}

.courthouses .button-1 a{
    padding-left: 40px;
    padding-right: 40px;
}


/*=========== Bexar Archives Index ==================*/

/* content container */
.archives-index .history-content {
   /*  max-width: 397px; */
    margin: 70px auto 0 auto;
}
@media only screen and (min-width: 1024px) {
.archives-index .history-content {
    max-width: 840px;
    margin-top: 24px;
}
}
@media only screen and (min-width: 1366px) {
.archives-index .history-content {
    max-width: 880px;
}
}
@media only screen and (min-width: 1600px) {
.archives-index .history-content {
    max-width: 985px;
    margin-top: 26px;
}
}

@media only screen and (min-width: 1024px) {
.archives-index .history-left {
    margin-top: 34px;
}
}
/* Land Grants and Sales */
.archives-index .history-right {
    max-width: 270px;
    margin: 0 auto;
}
@media only screen and (min-width: 600px) {
.archives-index .history-right {
    max-width: 442px;
    padding-left: 36px;
}
}
@media only screen and (min-width: 1024px) {
.archives-index .history-right {
    max-width: 500px;
    padding-left: 20px;
}
}
@media only screen and (min-width: 1366px) {
.archives-index .history-right {
    max-width: 500px;
}
}
@media only screen and (min-width: 1600px) {
.archives-index .history-right {
    max-width: 540px;
}
}

/* large carousel image */
@media only screen and (min-width: 1024px) {
.archives-index .large-image-with-zoom .large-image-text + img {
    margin-left: 66px;
}
}
@media only screen and (min-width: 1366px) {
.archives-index .large-image-with-zoom .large-image-text + img {
    margin-left: 86px;
}
}
@media only screen and (min-width: 1600px) {
.archives-index .large-image-with-zoom .large-image-text + img {
    margin-left: 139px;
}
}

/*list*/
.list-history {
    margin-top: 32px;
    list-style: disc;
    max-width: 1000px;
}
.list-history li {
    padding-bottom: 6px;
}
.list-history li:nth-child(24) {
   padding-bottom: 4px;
}
.list-history li span{
    line-height: 32px;
}

/* BUTTON -Next: visiting the archives */
.button-1.archives-index-button {
    max-width: 246px;
    margin-top: 50px;
    margin-bottom: 70px;
}
@media only screen and (min-width: 1024px) {
.button-1.archives-index-button {
    margin-left: auto;
    margin-right: auto;

}
}
@media only screen and (min-width: 1366px) {
.button-1.archives-index-button {
    max-width: 350px;
    margin-top: 80px;
    margin-bottom: 90px;
}
}
@media only screen and (min-width: 1600px) {
.button-1.archives-index-button {
    max-width: 372px;
    margin-top: 50px;
    margin-bottom: 90px;
}
}

.button-1.archives-index-button a {
   /*  padding: 14px 20px; */
}
@media only screen and (min-width: 1600px) {
.button-1.archives-index-button a {
    /* padding: 14px 41px; */
}
}

.bexar-archives .link-2 {

}

/* ======================= Seal of Texas ===================*/

/* Page quote - There shall be a seal of the state... */
@media only screen and (min-width: 800px) {
.state-seal .history-quote {
    width: 690px;
}
}
@media only screen and (min-width: 1024px) {
.state-seal .history-quote {
    width: 840px;
}
}
@media only screen and (min-width: 1366px) {
.state-seal .history-quote {
    width: 1020px;
}
}

/* Next:  button */
.state-seal .button-1 {
    max-width: 197px;
}
@media only screen and (min-width: 375px) {
.state-seal .button-1 {
    max-width: 203px;
}
}
@media only screen and (min-width: 414px) {
.state-seal .button-1 {
    max-width: 230px;
}
}
@media only screen and (min-width: 1366px) {
.state-seal .button-1 {
    max-width: 324px;
}
}
@media only screen and (min-width: 1600px) {
.state-seal .button-1 {
    max-width: 358px;
}
}

.wiki a:hover,
.wiki a:focus {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
    text-decoration: none;
}

.wiki .download-print a:hover,
.wiki .download-print a:focus {
    border: 1px solid #0086F1;
    outline: 1px solid #0086F1;
    border: none;
    text-decoration: none;
}

/* ================== Visiting The Archives ========================*/

/* Container - page content */
.visiting-the-archives .history-content {
  /*   max-width: 600px; */
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (min-width: 1024px) {
.visiting-the-archives .history-content {
   /*  max-width: 920px; */
}
}
@media only screen and (min-width: 1366px) {
.visiting-the-archives .history-content {
 /*    max-width: 1140px; */
}
}
@media only screen and (min-width: 1600px) {
.visiting-the-archives .history-content {
  /*   max-width: 1320px; */
}
}

.visiting-the-archives .history-content p.heading-3 {
    max-width: 550px;
    text-align: center;
}
@media only screen and (min-width: 1024px) {
.visiting-the-archives .history-content p.heading-3 {
    max-width: 100%;
    text-align: left;
}
}

.visiting-the-archives .history-content .heading-2 {
    max-width: 100%;
    font-weight: 600;
    text-align: left;
}

/* Page Quote - The lands are extensive... */
 @media only screen and (min-width: 800px) {
.visiting-the-archives .history-quote {
    width: 690px;
}
}
 @media only screen and (min-width: 1024px) {
.visiting-the-archives .history-quote {
    width: 850px;
}
}
 @media only screen and (min-width: 1366px) {
.visiting-the-archives .history-quote {
    width: 1250px;
    text-align: center;
}
}

/*---------------- Bexar County Spanish Archives ------------------------*/

/* Container - heading and subheading beneath image */
.visiting-the-archives .image-text {
    width: 100%;
    position: absolute;
    top: 518px;
}

@media only screen and (min-width: 600px) {
.visiting-the-archives .image-text {
    top: 607px;
}
}
@media only screen and (min-width: 1024px) {
.visiting-the-archives .image-text {
   top: 362px;
}
}
@media only screen and (min-width: 1366px) {
.visiting-the-archives .image-text {
    top: 434px;
}
}
@media only screen and (min-width: 1600px) {
.visiting-the-archives .image-text {
    top: 499px;
}
}

/*----------- Hours of Operation, Services We Offer, etc ----------*/

@media only screen and (max-width: 599px) {
.visiting-the-archives .history-content table {
    max-width: 296px;
}

.visiting-the-archives .history-content table + table + table td {
    padding-top: 0;
    padding-left: 3px;
    line-height: 22px;
}

.visiting-the-archives .history-content table + table + table p {
    margin-top: 12px;
    margin-bottom: 0;
}

.visiting-the-archives .history-content table + table + table p + p {
    margin-top: 21px;
    margin-bottom: 8px;
}

.visiting-the-archives .history-content table + table + table span {
    padding-left: 3px;
    font-weight: 600;
}
}

.staff a:hover,
.staff a:focus {
    box-shadow: inset -1px -1px 2px 0 rgba(0, 0, 0, .2),inset 1px 1px 2px 0 rgba(0, 0, 0, .2),
    -2px -2px 4px 0 rgba(0, 134, 241, .2), 2px 2px 4px 0 rgba(0, 134, 241, .2);
    border: 1px solid #0086F1;
    text-decoration: none;
}

/* Container - Collections and Resources & Archives */
.collection-resources {
    overflow: hidden;
    max-width: ;
    margin-top: 8px;
}

/* Inner Container - Our Collection (1717-1836) */
@media only screen and (min-width: 1024px) {
.collection-resources div:first-child {
    float: left;
    width: 260px;
}
}
@media only screen and (min-width: 1366px) {
.collection-resources div:first-child {
   width: 320px;
}
}
@media only screen and (min-width: 1600px) {
.collection-resources div:first-child {
  width: 365px;
}
}

/* Inner Container - Resources & Archives */
.collection-resources div + div {
    margin-top: 22px;
}
@media only screen and (min-width: 1024px) {
.collection-resources div + div {
    float: right;
    width: 270px;
     margin-top: 0;
}
}
@media only screen and (min-width: 1366px) {
.collection-resources div + div {
    width: 338px;
}
}
@media only screen and (min-width: 1600px) {
.collection-resources div + div {
    width: 396px;
}
}

/* Our Collection...    Resorces & Archives */
.collection-resources h2,
.visiting-the-archives .history-right h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

/* The earliest existing...    Other History and... */
.collection-resources p {
    margin-bottom: 5px;
}
@media only screen and (min-width: 600px) {
.collection-resources p {
    font-size: 15px;
}
}

/*  Dolph Briscoe Center...   A&M San Antonio... */
.collection-resources ul {
    list-style: disc;
}
@media only screen and (min-width: 600px) {
.collection-resources ul {
    margin-left: 18px;
}
}

.collection-resources ul li {
    margin-top: 6px;
    margin-left: 13px;
    font-size: 12px;
    color: #53312B;
    letter-spacing: 0.06px;
    line-height: 17px;
}
@media only screen and (min-width: 600px) {
.collection-resources ul li {
    margin-top: 4px;
    margin-left: -2px;
    font-size: 14px;
    line-height: 22px;
}
}
@media only screen and (min-width: 1024px) {
.collection-resources ul li{
    margin-top: 10px;
    margin-left: -4px;
    font-size: 12px;
    line-height: 17px;
}
}
@media only screen and (min-width: 1366px) {
.collection-resources ul li {
    margin-top: 8px;
    margin-left: 0;
    font-size: 15px;
    line-height: 24px;
}
}
@media only screen and (min-width: 1600px) {
.collection-resources ul li {
    margin-top: 6px;
    font-size: 17px;
    line-height: 26px;
}
}

/* BUTTON - Next: 300th Anniversary of San Antonio */
.visiting-the-archives .button-1.archives-index-button {
    max-width: 348px;
}
@media only screen and (min-width: 1366px) {
.visiting-the-archives .button-1.archives-index-button {
    max-width: 515px;
}
}

span.next-300th {
    display: block;
    margin-left: 24px;
 }
 @media only screen and (min-width: 375px) {
span.next-300th  {
    display: inline;
    margin-left: 0;
}
}

/* ================== 300th Anniversary ========================*/

/* Page Quote - The lands are extensive... */
 @media only screen and (min-width: 800px) {
.anniversary .history-quote {
    text-align: left;
}
}
 @media only screen and (min-width: 1024px) {
.anniversary .history-quote {
    width: 740px;
}
}
 @media only screen and (min-width: 1366px) {
.anniversary .history-quote {
    width: 1250px;
    text-align: center;
}
}

.anniversary .button-1 {
    max-width: 250px;
}
@media only screen and (min-width: 1366px) {
.anniversary .button-1 {
    max-width: 100%;
}
}


/*-------- San Antonio's Missions --------*/

/* Container - heading and subheading beneath image */
.anniversary .image-text {
    width: 100%;
    position: absolute;
    top: 457px;
}

@media only screen and (min-width: 600px) {
.anniversary .image-text {
    top: 568px;
}
}

@media only screen and (min-width: 1024px) {
.anniversary .image-text {
   top: 362px;
}
}
@media only screen and (min-width: 1366px) {
.anniversary .image-text {
    top: 434px;
}
}
@media only screen and (min-width: 1600px) {
.anniversary .image-text {
    top: 499px;
}
}

/* ================= Bejar In Spain ========================*/
@media only screen and (min-width: 1024px) {
.bejar-in-spain .history-quote {
    width: 840px;
}
}
@media only screen and (min-width: 1366px) {
.bejar-in-spain .history-quote {
    width: 1280px;
}
}
@media only screen and (min-width: 1600px) {
.bejar-in-spain .history-quote {
    width: 1320px;
}
}

.bejar-in-spain .button-1 {
    margin-top: 50px;
    width: 232px;
}
@media only screen and (min-width: 1024px) {
.bejar-in-spain .button-1 {
    margin-top: 200px;
}
}
@media only screen and (min-width: 1366px) {
.bejar-in-spain .button-1{
    width:100%;
}
}
@media only screen and (min-width: 1600px) {
.bejar-in-spain .button-1{
    margin-top: 400px;
}
}




/* ======================= Colonial Governors===================*/

/* This list includes the governors of  */
@media only screen and (min-width: 1024px) {
.governors .history-quote {
    width: 800px;
}
}
@media only screen and (min-width: 1366px) {
.governors .history-quote {
    width: 940px;
}
}

.governors .title-bg {
    margin-top: 72px;
}

.governors .title-bg.timeline-2a {
    margin-top: -21px;
}

/* Outer Container - TIMELINE OF THE GOVERNORS*/
.governors .timeline-of-archives {
    background-image: none;
    background: #F7E3C3;
}

/* Inner Container - TIMELINE OF THE GOVERNORS */
@media only screen and (min-width: 1024px) {
.governors .viceroys .timeline-of-archives>div>div {
    max-width: 1009px;
}
}
@media only screen and (min-width: 1366px) {
.governors .viceroys .timeline-of-archives>div>div {
    max-width: 1044px;
}
}

/* 1718 rusty brown color */
.governors .viceroys .timeline-of-archives > div div.color-2 div:first-child {
    color: #B1482B;
}

/* last item in timeline */
.governors .viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 90px;
}
@media only screen and (min-width: 360px) {
.governors .viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 70px;
}
}
@media only screen and (min-width: 1366px) {
.governors .viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 83px;
}
}

/*  LETTERBOX: timeline dot •  &  Domingo Terán de los Ríos */
@media only screen and (min-width: 1024px) {
.governors .viceroys .timeline-of-archives>div div div:last-child {
    max-width: 760px;
}
}
@media only screen and (min-width: 1366px) {
.governors .viceroys .timeline-of-archives>div div div:last-child {
    max-width: 754px;
}
}

/*  LETTERBOX: timeline rusty brown dot •  & Domingo Terán de los Ríos */
.governors .viceroys .timeline-of-archives>div div.color-2 div:last-child {
    color: #fff;
    background: #C57558;
}


/* timeline Rusty brown dot */
.governors .viceroys .timeline-of-archives>div div.color-2 div:last-child img:first-child {
    position: relative;
    z-index: 100000;
    color: #B1482B;
}

.governors .viceroys .timeline-of-archives>div div div:last-child a:hover span:not(.no-link) ,
.governors .viceroys .timeline-of-archives>div div div:last-child span:hover:not(.no-link) {
    text-decoration: underline;
}

.link-2 a.white-link,
.link-2 a.white-link span {
    color: #fff;
    text-decoration: underline;
}

.link-2 a.white-link:hover,
.link-2 a.white-link:hover span,
.link-2 a.white-link span:hover  {
    color: #53312B;
}


/* 2ND TIMELINE - GOVERNORS OF TEXAS DURING THE MEXICAN EMPIRE */

/* last item in timeline */
@media only screen and (min-width: 360px) {
.governors .viceroys.timeline-2 .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 90px;
}
}
@media only screen and (min-width: 600px) {
.governors .viceroys.timeline-2 .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 70px;
}
}
@media only screen and (min-width: 1366px) {
.governors .viceroys.timeline-2 .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 84px;
}
}


/* 3RD TIMELINE - GOVERNORS OF TEXAS DURING THE MEXICAN EMPIRE */

/* last item in timeline */
.governors .viceroys.timeline-3 .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 70px;
}
@media only screen and (min-width: 600px) {
.governors .viceroys.timeline-3 .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 70px;
}
}
@media only screen and (min-width: 1366px) {
.governors .viceroys.timeline-3 .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 84px;
}
}

/* List of governors of New Spain */
.list-of-viceroys {
    padding: 0 12px;
}
@media only screen and (min-width: 400px) {
.list-of-viceroys {
    padding: 0 30px;
}
}
@media only screen and (min-width: 560px) {
.list-of-viceroys {
    max-width: 100%;
    text-align: center;
}
}
@media only screen and (min-width: 820px) {
.list-of-viceroys {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}
}
@media only screen and (min-width: 1366px) {
.list-of-viceroys {
    max-width: 880px;
}
}


/* ======================= Colonial Viceroys===================*/

/* This list includes the viceroys of */
@media only screen and (min-width: 414px) {
.viceroys .page-container {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
}
@media only screen and (min-width: 800px) {
.viceroys .page-container {
    max-width: 590px;
}
}
@media only screen and (min-width: 1024px) {
.viceroys .page-container {
    max-width: 900px;
}
}
.viceroys .history-quote {
    text-align: center;
}
@media only screen and (min-width: 1024px) {
.viceroys .history-quote {
    width: 780px;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .history-quote {
    width: 940px;
}
}

.viceroys .title-bg {
    margin-top: 80px;
}
@media only screen and (min-width: 1366px) {
.viceroys .title-bg {
    margin-top: 104px;
}
}

/* Inner Container - TIMELINE OF THE VICEROYS */
.viceroys .timeline-of-archives {
    padding-bottom: 42px;
     background-image: none;
}

.viceroys .timeline-of-archives>div>div {
    max-width: 320px;
    margin: 0 auto;
    padding-bottom: 5px;
}
@media only screen and (min-width: 360px) {
.viceroys .timeline-of-archives>div>div {
    width: 100%;
    max-width: 340px;
}
}
@media only screen and (min-width: 414px) {
.viceroys .timeline-of-archives>div>div {
    max-width: 400px;
}
}
@media only screen and (min-width: 600px) {
.viceroys .timeline-of-archives>div>div {
    max-width: 580px;
}
}
@media only screen and (min-width: 800px) {
.viceroys .timeline-of-archives>div>div {
    max-width: 760px;
}
}
@media only screen and (min-width: 1024px) {
.viceroys .timeline-of-archives>div>div {
    max-width: 880px;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div>div {
    max-width: 1030px;
}
}

/* 1688 - 1696 */
.viceroys .timeline-of-archives>div div div:first-child {
    float: left;
    width: 80px;
    padding-top: 17px;
    font-weight: 700;
    color: #61918D;
    text-align: right;
}
@media only screen and (min-width: 360px) {
.viceroys .timeline-of-archives>div div div:first-child {
    width: 78px;
}
}
@media only screen and (min-width: 414px) {
.viceroys .timeline-of-archives>div div div:first-child {
    width: 82px;
}
}
@media only screen and (min-width: 800px) {
.viceroys .timeline-of-archives>div div div:first-child {
    width: 90px;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div div:first-child {
    padding-top: 24px;
}
}

/* timeline vertical line |   */
.viceroys .timeline-of-archives>div div div:nth-child(2) {
    position: absolute;
    top: 0px;
    left: 107px;
    bottom: 0;
    border-left: 2px solid #61918D;
    z-index: 10;
}
@media only screen and (min-width: 360px) {
.viceroys .timeline-of-archives>div div div:nth-child(2) {
    left: 106px;
}
}
@media only screen and (min-width: 414px) {
.viceroys .timeline-of-archives>div div div:nth-child(2) {
    left: 110px;
}
}
@media only screen and (min-width: 600px) {
.viceroys .timeline-of-archives>div div div:nth-child(2) {
    left: 110px;
}
}
@media only screen and (min-width: 800px) {
.viceroys .timeline-of-archives>div div div:nth-child(2) {
    left: 137px;
    bottom: 0;
}
}
@media only screen and (min-width: 1024px) {
.viceroys .timeline-of-archives>div div div:nth-child(2) {
    left: 147px;
    bottom: 0;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div div:nth-child(2) {
    left: 177px;
}
}

/* first item in timeline - adjust top & bot of vertical line */
.viceroys .timeline-of-archives>div div:first-child div:nth-child(2) {
    top: 26px;
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div:first-child div:nth-child(2) {
    top: 37px;
}
}

/* last item in timeline */
.viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 110px;
}
@media only screen and (min-width: 414px) {
.viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 90px;
}
}
@media only screen and (min-width: 600px) {
.viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 76px;
}
}
@media only screen and (min-width: 1024px) {
.viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 70px;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div.timeline-last-item div:nth-child(2) {
    bottom: 92px;
}
}


/*  LETTERBOX: timeline dot •  &  Gaspar de Sandoval Silva y Mendoza */
.viceroys .timeline-of-archives>div div div:last-child {
    float: left;
    max-width: 165px;
    margin-left: 60px;
    margin-right: 12px;
    margin-bottom: 41px;
    padding: 18px 12px 16px 12px;
    background-position: 0 35px;
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
}
@media only screen and (min-width: 360px) {
.viceroys .timeline-of-archives>div div div:last-child {
    max-width: 190px;
}
}
@media only screen and (min-width: 414px) {
.viceroys .timeline-of-archives>div div div:last-child {
    max-width: 240px;
}
}
@media only screen and (min-width: 600px) {
.viceroys .timeline-of-archives>div div div:last-child {
    max-width: 420px;
}
}
@media only screen and (min-width: 800px) {
.viceroys .timeline-of-archives>div div div:last-child {
    max-width: 550px;
    margin-left: 95px;
}
}
@media only screen and (min-width: 1024px) {
.viceroys .timeline-of-archives>div div div:last-child {
    max-width: 650px;
    margin-left: 129px;
    margin-right: 0;
    padding: 18px 21px 16px 21px;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div div:last-child {
    max-width: 750px;
    margin-left: 188px;
    margin-bottom: 55px;
    padding: 22px 27px 21px 27px;
}
}

/* timeline dot  •  */
.viceroys .timeline-of-archives>div div div:last-child img:first-child {
    display: inline-block;
    width: 12px;
    margin-top: -2px;
    margin-left: -50px;

}
@media only screen and (min-width: 360px) {
.viceroys .timeline-of-archives>div div div:last-child img:first-child {
    margin-left: -49px;

}
}
@media only screen and (min-width: 800px) {
.viceroys .timeline-of-archives>div div div:last-child img:first-child {
    margin-left: -65px;

}
}
@media only screen and (min-width: 1024px) {
.viceroys .timeline-of-archives>div div div:last-child img:first-child {
    margin-left: -98px;

}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div div:last-child img:first-child {
    width: 19px;
    margin-top: 2px;
    margin-left: -136px;
}
}

/* letterbox pointer  <  */
.viceroys .timeline-of-archives>div div div:last-child img + img {
    display: inline-block;
    width: 9px;
    margin-top: -2px;
    margin-left: 14px;
}
@media only screen and (min-width: 360px) {
.viceroys .timeline-of-archives>div div div:last-child img + img {
    margin-left: 13px;
}
}
@media only screen and (min-width: 800px) {
.viceroys .timeline-of-archives>div div div:last-child img + img {
    margin-left: 29px;
}
}
@media only screen and (min-width: 1024px) {
.viceroys .timeline-of-archives>div div div:last-child img + img {
    margin-left: 53px;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div div:last-child img + img {
    width: 13px;
    margin-left: 74px;
}
}

/* The earliest Spanish colonial-era */
.viceroys .timeline-of-archives>div div div:last-child span {
    display: inline-block;
    margin-left: 11px;
}
@media only screen and (min-width: 800px) {
.viceroys .timeline-of-archives>div div div:last-child span {
    margin-left: 10px;
}
}
@media only screen and (min-width: 1024px) {
.viceroys .timeline-of-archives>div div div:last-child span {
    margin-left: 20px;
}
}
@media only screen and (min-width: 1366px) {
.viceroys .timeline-of-archives>div div div:last-child span {
    margin-left: 25px;
}
}

/* NEXT: BEXAR’S COURTHOUSES */
.button-1.archives-index-button.viceroys-3 {
    max-width: 100%;
    margin-top: 0px;
    text-align: center;
}
@media only screen and (min-width: 800px) {
.button-1.archives-index-button.viceroys-3 {
    margin-bottom: 100px;
}
}

/* ================Map of San Antonio ==================*/
@media only screen and (min-width: 800px) {
.map-of-san-antonio .history-quote {
    width: 720px;
}
}
@media only screen and (min-width: 1024px) {
.map-of-san-antonio .history-quote {
    width: 1010px;
}
}
@media only screen and (min-width: 1280px) {
.map-of-san-antonio .history-quote {
    width: 1400px;
}
}
@media only screen and (min-width: 1366px) {
.map-of-san-antonio .history-quote {
    width: 1245px;
}
}

.map-of-san-antonio .history-content img {
    margin-bottom: 93px;
}
.map-of-san-antonio .history-content p {
    text-align: center;
}

.map-of-san-antonio .history-content div {
    margin-left: auto;
    margin-right: auto;
}

.map-of-san-antonio .history-content .button-1 {
    max-width: 205px;
}
@media only screen and (min-width: 375px) {
.map-of-san-antonio .history-content .button-1 {
    max-width: 212px;
}
}
@media only screen and (min-width: 414px) {
.map-of-san-antonio .history-content .button-1 {
    max-width: 240px;
}
}
@media only screen and (min-width: 1366px) {
.map-of-san-antonio .history-content .button-1 {
    max-width: 336px;
}
}
@media only screen and (min-width: 1600px) {
.map-of-san-antonio .history-content .button-1 {
    max-width: 374px;
}
}

@media only screen and (min-width: 1600px) {
.map-of-san-antonio .history-content img + p span {
    display: block;
}
}

/*===================== Sister Cities ========================*/

.sister-cities .history-content {
    margin: 100px auto;
}
@media only screen and (min-width: 400px) {
.sister-cities .history-content {
    max-width: 400px;
}
}
@media only screen and (min-width: 1024px) {
.sister-cities .history-content {
    max-width: 898px;
}
}
@media only screen and (min-width: 1280px) {
.sister-cities .history-content {
    max-width: 998px;
}
}
@media only screen and (min-width: 1366px) {
.sister-cities .history-content {
    max-width: 1243px;
}
}
@media only screen and (min-width: 1600px) {
.sister-cities .history-content {
    max-width: 1400px;
}
}

.city-photos {
    overflow: hidden;
}

.city-photos > div {
    float: left;
    max-width: 397px;
    max-height: 377px;
    text-align: center;
    background: #FDF5EA;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px;
    margin-bottom: 94px;
    padding: 10px 4px 4px 4px;
}
@media only screen and (min-width: 1024px) {
.city-photos > div {
    max-width: 397px;
    height: 377px;
    margin-right: 100px;
}
.city-photos > div:nth-child(2) {
    margin-right: 0;
}
.city-photos > div:nth-child(4) {
    margin-right: 0;
}
.city-photos > div:nth-child(6) {
    margin-right: 0;
}
.city-photos > div:nth-child(8) {
    margin-right: 0;
}
.city-photos > div:nth-child(10) {
    margin-right: 0;
}
}
@media only screen and (min-width: 1280px) {
.city-photos > div {
    max-width: 300px;
    height: 350px;
    margin-right: 49px!important;
}
.city-photos > div:nth-child(3) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(6) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(9) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(11) {
    margin-right: 0!important;
}
}
@media only screen and (min-width: 1366px) {
.city-photos > div {
    max-width: 397px;
    height: 377px;
    margin-right: 24px!important;
}
.city-photos > div:nth-child(3) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(6) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(9) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(11) {
    margin-right: 0!important;
}
}
@media only screen and (min-width: 1600px) {
.city-photos > div {
    max-width: 397px;
    max-height: 377px;
    margin-right: 102px!important;
}
.city-photos > div:nth-child(3) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(6) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(9) {
    margin-right: 0!important;
}
.city-photos > div:nth-child(11) {
    margin-right: 0!important;
}
}

.city-photos .heading-2 {
    color: #B34824;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .06px;
    margin-top: 23px;
    text-align: center;
    margin-bottom: 3px;
}
.city-photos p {
    padding: 0 5px;
    line-height: 24px;
}

.city-photos div p:nth-child(4) {
    margin-top: -14px;
    margin-bottom: 16px;
}

/*foot*/
.sister-cities .history-content>p {
    text-align: center;
}
/*Button Sister*/
.sister-cities .button-1 {
    max-width: 152px;
    margin: 70px auto 0 auto;
}
@media only screen and (min-width: 375px) {
.sister-cities .button-1 {
    max-width: 158px;
}
}
@media only screen and (min-width: 414px) {
.sister-cities .button-1 {
    max-width: 182px;
}
}
@media only screen and (min-width: 1366px) {
.sister-cities .button-1 {
    max-width: 263px;
    margin-top: 94px;
}
}
@media only screen and (min-width: 1600px) {
.sister-cities .button-1 {
    max-width: 290px;
}
}

@media only screen and (min-width: 1024px) {
.sister-cities .history-content > div + p span {
    display: block;
}
}

/*================================Coat Of Arms===============================*/

/*Outer Container */
@media only screen and (min-width: 1024px) {
.services.history-1.coat-of-arms {
    padding-left: 40px;
    padding-right: 40px;
}
}

@media only screen and (min-width: 1024px) {
.coat-of-arms {
    padding-left: 40px;
    padding-right: 40px;
}
}
@media only screen and (min-width: 1600px) {
.coat-of-arms {
    padding-left: 52px!important;
    padding-right: 52px!important;
}
}

@media only screen and (min-width: 1024px) {
.coat-of-arms .history-quote {
    width: 800px;
}
}
@media only screen and (min-width: 1366px) {
.coat-of-arms .history-quote {
    width: 1100px;
}
}

/* Mobile version - 1024px max */

.phone-arms>div:first-child div:first-child {
    max-width: 50%;
    margin: 35px auto;
    margin-bottom: 55px;
}

.phone-arms .heading-2 {
    font-weight: 600;
}

 @media only screen and (min-width: 1024px) {
.phone-arms {
    display: none;
}
}


/*DISPLAY NONE*/
 @media only screen and (max-width: 1023px) {
.large-arms {
     display: none;
}
}
/* Desktop version */
.large-arms {
    max-width: 100%;
}
@media only screen and (min-width: 1600px) {
.large-arms {
    max-width: 1497px;
    margin-top: 51px;
    padding-left: 6px;
    padding-right: 4px;
    margin: 0 auto;
}
}
.large-arms>div:first-child {
    overflow: hidden;
    margin: 0 auto;
}
@media only screen and (min-width: 1024px) {
.large-arms>div:first-child {
    width: 940px;
}
}
@media only screen and (min-width: 1366px) {
.large-arms>div:first-child {
    width: 1260px;
}
}
@media only screen and (min-width: 1600px) {
.large-arms>div:first-child {
    width: 100%;
}
}

/* CONTAINER for:  The coronet...   The Arms of Don Alvaro...  The eagle represents... */
.large-arms div div div,
.large-arms>div>div:first-child {
    background: #FDF5EA;
    padding: 15px;
    margin-bottom: 22px;
    padding-right: 20px;
    box-shadow: 0 1px 4px 0 rgba(91,19,0,0.15);
    border-radius: 7px 7px 7px 7px;
    letter-spacing: 0.5px;
    line-height: 32px;
}
@media only screen and (min-width: 1366px) {
.large-arms div div div,
.large-arms>div>div:first-child {
    padding: 15px 23px 23px 23px;
}
}

/* The coronet surmounting the quadrants... */
.coronet {
    text-align: center;
    max-width: 522px;
    margin: 61px auto 100px auto!important;
    padding-bottom: 30px!important;
}

/* All 5 text boxes */
.arms, .eagle, .san, .cannon, .logo-bexar-h {
    float: left;
}
.arms, .eagle, .san, .cannon {
    margin: 16px 0;
}

.san {
    margin-top: 45px;
}

.cannon {
    margin-top: 64px;
}
@media only screen and (min-width: 1024px) {
.coronet {
    margin-bottom: 50px!important;
}

.san {
    margin-top: 80px;
}

.cannon {
    margin-top: 5px;
}

.arms {
    margin-top: 0px;
}
}
@media only screen and (min-width: 1366px) {
.coronet {
    margin-bottom: 18px!important;
}

.arms {
    margin-top: 30px;
}

.san {
    margin-top: 90px;
}

.cannon {
    margin-top: 20px;
}
}
@media only screen and (min-width: 1600px) {
.san {
    margin-top: 150px;
}

.arms {
    margin-top: 96px;
}

.cannon {
    margin-top: 64px;
}
}

.arms {
    padding-right: 22px!important;
    margin-bottom: 13px!important;
}
.logo-bexar-h {
    max-width: 200px;
    margin: 200px 0 0 30px;
}
@media only screen and (min-width: 1024px) {
.logo-bexar-h {
    max-width: 230px;
    margin:  40px 0 0 30px;
}
}
@media only screen and (min-width: 1366px) {
.logo-bexar-h {
    max-width: 290px;
    margin:  40px 0 0 34px;
}
}
@media only screen and (min-width: 1600px) {
.logo-bexar-h {
    max-width: 570px;
    margin:  28px 0 0 56px;
}
}

.left-logo {
    float: left;
    max-width: 321px;
}
.right-logo {
    float: right;
    max-width: 330px;
}
@media only screen and (min-width: 1366px) {
.left-logo {
    max-width: 490px;
}
.right-logo {
    max-width: 410px;
}
}
@media only screen and (min-width: 1600px) {
.left-logo {
    max-width: 492px;
}
.right-logo {
    max-width: 492px;
}
}

/*Especial P*/
@media only screen and (min-width: 1024px) {
   .large-arms p {
    position: relative;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: -7px;
}
}
@media only screen and (min-width: 1366px) {
   .large-arms p {
    font-size: 18px;
    line-height: 30px;
}
}
@media only screen and (min-width: 1600px) {
   .large-arms p {
    font-size: 20px;
    line-height: 32px;
}
}

/* letterbox pointers */
.large-arms p img {
    width: 9px;
    position: absolute;
}
@media only screen and (min-width: 1366px) {
.large-arms p img {
    width: 13px;
}
}
.coronet p img {
    transform: rotate(90deg);
    bottom: -36px;
    left: 226px;
}
@media only screen and (min-width: 1366px) {
.coronet p img {
    bottom: -42px;
    left: 226px;
}
}
.san p img {
    transform: rotate(180deg);
    top: 60px;
    left: -24px;
}
@media only screen and (min-width: 1366px) {
.san p img {
    top: 60px;
    left: -36px;
}
}
.cannon p img {
    transform: rotate(180deg);
    top: 30px;
    left: -24px;
}
@media only screen and (min-width: 1366px) {
.cannon p img {
    top: 30px;
    left: -36px;
}
}
.arms p img {
    top: 140px;
    right: -31px;
}
@media only screen and (min-width: 1366px) {
.arms p img {
    top: 140px;
    right: -35px;
}
}
.eagle p img {
    top: 10px;
    right: -29px;
}
@media only screen and (min-width: 1366px) {
.eagle p img {
    top: 10px;
    right: -36px;
}
}

.phone-arms p span {
    font-weight: 700;
}

/*BUTTON*/
.coat-button {
    margin: 50px auto 0px auto;
    text-align: center;
}
@media only screen and (min-width: 1366px) {
.coat-button {
    margin-top: 86px;
}
}
 @media only screen and (min-width: 1600px) {
.coat-button {
    margin-bottom: 84px;
}
}

/*======================Walking Tour====================*/

/*container overflow - width*/
.walking {
    margin-left: auto;
    margin-right: auto;
}

 @media only screen and (min-width: 800px) {
.walking-main.history-1 .page-title {
    margin-top: -13px;
}
}

.walking>div {
    overflow: hidden;
    margin: 50px auto;
    max-width: 388px;
}
 @media only screen and (min-width: 768px) {
 .walking, .walking>div {
     max-width: 647px;
}
}
 @media only screen and (min-width: 800px) {
.walking, .walking>div {
     max-width: 681px;
}
}
 @media only screen and (min-width: 1024px) {
.walking, .walking>div {
     max-width: 876px;
}
}
 @media only screen and (min-width: 1280px) {
.walking, .walking>div {
     max-width: 1159px;
}
}
 @media only screen and (min-width: 1366px) {
.walking, .walking>div {
     max-width: 1170px;
}
}
 @media only screen and (min-width: 1600px) {
.walking, .walking>div {
     max-width: 1370px;
}
}


/* Container Left-Right width */
@media only screen and (min-width: 768px) {
.history-left-1 {
    max-width: 646px;
}
}
 @media only screen and (min-width: 800px) {
.history-left-1 {
    max-width: 680px;
}
}
 @media only screen and (min-width: 1024px) {
.history-left-1 {
    max-width: 570px;
    float: left;
}
.history-right-1 {
    float: right;
    max-width: 248px;
}
}
 @media only screen and (min-width: 1280px) {
.history-left-1 {
    max-width: 700px;
}
.history-right-1 {
    max-width: 100%;
}
}
 @media only screen and (min-width: 1366px) {
.history-left-1 {
    max-width: 760px;
}
.history-right-1 {
    max-width: 331px;
}
}
 @media only screen and (min-width: 1600px) {
.history-left-1 {
    max-width:890px;
}
.history-right-1 {
    max-width: 388px;
}
}

/* background for 2-4-6-8-10 */
.tour-two {
    background: #EED9BB;
}
/* LINE BLACK */
.low {
    margin-top: -30px!important;
    margin-bottom: 40px!important;
    letter-spacing: -0.2px;
    line-height: 26px;
}

.frost {
    display: block;
}
@media only screen and (min-width: 768px) {
.frost {
    display: inline;
}
}

.florence {
    display: block;
}
 @media only screen and (min-width: 350px) {
.florence {
    display: inline;
}
 }

.line-tour {
    max-width: 388px;
    margin-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid black;
}
 @media only screen and (min-width: 768px) {
.line-tour {
    margin-top: 10px;
    padding-bottom: 0px;
    border-bottom: 0px solid black;
}
}
.img-a,
.img-b {
    margin-bottom: 20px;
}
 @media only screen and (min-width: 1024px) {
.img-a,
.img-b {
    margin-bottom: 0px;
}
}
/* 1024 PX STYLES IMG */
.imgs img {
    display: block;
    margin-bottom: 40px!important;
}
/* IMG PHONE MARGIN */
.rare-img.only-1 {
    margin-bottom: 20px!important;
}
.rare-img {
    margin-bottom: 60px!important;
}

/* LIST STYLES */
.walking-main ul {
    margin-top: -20px;
    margin-bottom: 25px;
}
.walking-main ul li {
    list-style: disc;
    margin-left: 19px;
    padding-left: 5px;
    margin-bottom: 10px;
}

/* Padding container left-right */
.walking {
    padding: 0!important;
    margin-top: 0px;
    margin-bottom: 0px;
}
.services.history-1.walking-main{
    margin: 0!important;
}
.walking-main {
    padding: 0 12px;
}
 @media only screen and (min-width: 414px) {
.walking-main {
    padding: 0 30px;
}
}
 @media only screen and (min-width: 600px) {
.walking-main {
    padding: 0 55px;
}
}
 @media only screen and (min-width: 680px) {
.walking-main {
    padding: 0 60px;
}
}
/* Letter Spacing h2 */
.walking h2{
    letter-spacing: -1px;
}
 @media only screen and (min-width: 768px) {
.walking h2{
    letter-spacing: 2.81px;
}
}
/* Headings Margins */
.tour-two h2,
.tour-one h2 {
    margin-top: 20px;
    margin-bottom: 20px;
}
 @media only screen and (min-width: 1024px) {
.tour-two h2,
.tour-one h2 {
    margin-top: 0px;
}
}
/* DISPLAY BLOCK AND INLINE TITLES */
/* to the north */
.double-display {
    display: block;
}
@media only screen and (min-width: 400px) {
.double-display {
    display: inline;
}
}
@media only screen and (min-width: 1024px) {
.double-display {
    display: block;
}
}
@media only screen and (min-width: 1280px) {
.double-display {
    display: inline;
}
}
/* will */
.double-display-2 {
    display: block;
}
@media only screen and (min-width: 400px) {
.double-display-2 {
    display: inline;
}
}
/* DISPLAY BLOCK AND NONE TITLE */
.title-tour-1 {
    display: none;
}
 @media only screen and (min-width: 1024px) {
.title-tour-1 {
    display: block;
}
}
 @media only screen and (min-width: 1024px) {
.title-tour {
    display: none;
}
}

/* Mobile */
.walk-only {
    display: none;
}

 @media only screen and (min-width: 1024px) {
.walk-only {
    display: block;
}
}

/* 1024px */
.only-walk  {
    display: block;
}

 @media only screen and (min-width: 1024px) {
.only-walk   {
    display: none;
}
}