@charset "UTF-8";
/************************************************

Stylesheet: Main Stylesheet

*************************************************/
/*********************
GENERAL STYLES
*********************/

/*********************
LINK STYLES
*********************/
a:link, a:visited:link {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

/*********************
H1, H2, H3, H4, H5 P STYLES
*********************/
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
  text-decoration: none; }

/*********************
HEADER STYLES
*********************/
.header ul.off-canvas-list li {
  list-style: none; }

/*********************
NAVIGATION STYLES
*********************/
.top-bar .title-area {
  z-index: 1; }

.off-canvas-list ul {
  margin-left: 0; }
  .off-canvas-list ul li a {
    border-bottom: 0px; }
  .off-canvas-list ul .dropdown {
    margin-left: 20px; }

/*********************
POSTS & CONTENT STYLES
*********************/
#content #inner-content {
  padding: 1rem 0rem; }

.page-title .vcard {
  border: 0px;
  padding: 0px; }

.byline {
  color: #999; }

.entry-content img {
  max-width: 100%;
  height: auto; }

.entry-content .alignleft, .entry-content img.alignleft {
  margin-right: 1.5em;
  display: inline;
  float: left; }

.entry-content .alignright, .entry-content img.alignright {
  margin-left: 1.5em;
  display: inline;
  float: right; }

.entry-content .aligncenter, .entry-content img.aligncenter {
  margin-right: auto;
  margin-left: auto;
  display: block;
  clear: both; }

.entry-content video, .entry-content object {
  max-width: 100%;
  height: auto; }

.entry-content pre {
  background: #eee;
  border: 1px solid #cecece;
  padding: 10px; }

.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px; }
  .wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

.post-password-form input[type="submit"] {
  display: inline-block;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.25s ease-out;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.85em 1em;
  margin: 0 1rem 1rem 0;
  font-size: 0.9rem;
  background: #2199e8;
  color: #fff; }
  [data-whatinput='mouse'] .post-password-form input[type="submit"] {
    outline: 0; }
  .post-password-form input[type="submit"]:hover, .post-password-form input[type="submit"]:focus {
    background: #1583cc;
    color: #fff; }

/*********************
IMAGE GALLERY STYLES
*********************/
/*********************
PAGE NAVI STYLES
*********************/

.page-navigation {
  padding-left: 60px;
}
  

/*********************
COMMENT STYLES
*********************/
#comments .commentlist {
  margin-left: 0px; }

#respond ul {
  margin-left: 0px; }

.commentlist li {
  position: relative;
  clear: both;
  overflow: hidden;
  list-style-type: none;
  margin-bottom: 1.5em;
  padding: 0.7335em 10px; }
  .commentlist li:last-child {
    margin-bottom: 0; }
  .commentlist li ul.children {
    margin: 0; }

.commentlist li[class*=depth-] {
  margin-top: 1.1em; }

.commentlist li.depth-1 {
  margin-left: 0;
  margin-top: 0; }

.commentlist li:not(.depth-1) {
  margin-left: 10px;
  margin-top: 0;
  padding-bottom: 0; }

.commentlist .vcard {
  margin-left: 50px; }
  .commentlist .vcard cite.fn {
    font-weight: 700;
    font-style: normal; }
  .commentlist .vcard time {
    float: right; }
    .commentlist .vcard time a {
      color: #999;
      text-decoration: none; }
      .commentlist .vcard time a:hover {
        text-decoration: underline; }
  .commentlist .vcard img.avatar {
    position: absolute;
    left: 10px;
    padding: 2px;
    border: 1px solid #cecece;
    background: #fff; }

.commentlist .comment_content p {
  margin: 0.7335em 0 1.5em;
  font-size: 1em;
  line-height: 1.5em; }

.commentlist .comment-reply-link {
  float: right; }

/*********************
COMMENT FORM STYLES
*********************/
.respond-form {
  margin: 1.5em 10px;
  padding-bottom: 2.2em; }
  .respond-form form {
    margin: 0.75em 0; }
    .respond-form form li {
      list-style-type: none;
      clear: both;
      margin-bottom: 0.7335em; }
      .respond-form form li label,
      .respond-form form li small {
        display: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url],
    .respond-form form textarea {
      padding: 3px 6px;
      background: #efefef;
      border: 2px solid #cecece;
      line-height: 1.5em; }
      .respond-form form input[type=text]:focus,
      .respond-form form input[type=email]:focus,
      .respond-form form input[type=url]:focus,
      .respond-form form textarea:focus {
        background: #fff; }
      .respond-form form input[type=text]:invalid,
      .respond-form form input[type=email]:invalid,
      .respond-form form input[type=url]:invalid,
      .respond-form form textarea:invalid {
        outline: none;
        border-color: #fbc2c4;
        background-color: #f6e7eb;
        -ms-box-shadow: none;
        box-shadow: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url] {
      max-width: 400px;
      min-width: 250px; }
    .respond-form form textarea {
      resize: none;
      width: 97.3%;
      height: 150px; }

#comment-form-title {
  margin: 0 0 1.1em; }

#allowed_tags {
  margin: 1.5em 10px 0.7335em 0; }

.nocomments {
  margin: 0 20px 1.1em; }

/*********************
SIDEBARS & ASIDES
*********************/
.widget ul {
  margin: 0; }
  .widget ul li {
    list-style: none; }

/*********************
FOOTER STYLES
*********************/
.footer {
  clear: both;
  margin-top: 1em; }

/*********************
FOUNDATION STYLES
*********************/

/*********************
PLUGIN STYLES
*********************/
.gform_body ul {
  list-style: none outside none;
  margin: 0; }

/******************************************************************

Stylesheet: Retina Screens & Devices Stylesheet

When handling retina screens you need to make adjustments, especially
if you're not using font icons. Here you can add them in one neat
place.

******************************************************************/
/******************************************************************

Stylesheet: Print Stylesheet

This is the print stylesheet. There's probably not a lot
of reasons to edit this stylesheet. 

Remember to add things that won't make sense to print at 
the bottom. Things like nav, ads, and forms shouldbe set 
to display none.
******************************************************************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
    filter: none !important;
    -ms-filter: none !important; }
  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; }
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } }

/* Custom Css By Nick*/

/* Font */ 


/* Header */

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #E3F9F7;
  height: 75px;
  font-family: "Titillium Web", sans-serif;
  margin-bottom: 0px; }
  .nav-bar .nav-bar-logo {
    padding: 1.8rem; }
  .nav-bar li {
    background: #E3F9F7; }
  .nav-bar a {
    color: #666;
    transition: color 0.2s ease-in; }
    .nav-bar a:hover {
      color: #666; }
  @media screen and (max-width: 800px) {
    .nav-bar {
      height: 53.57143px; } }
  .nav-bar .offcanvas-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
    color: #fff;
    font-family: "Titillium Web", sans-serif;
    text-transform: uppercase;
    background-color: #566d7c;
    transition: background-color 0.2s ease-in;
    cursor: pointer; }
    .nav-bar .offcanvas-trigger .offcanvas-trigger-text {
      margin-right: 0.25rem;
      margin-top: 0.25rem; }
    .nav-bar .offcanvas-trigger:hover {
      background-color: #6b879a; }
    @media screen and (max-width: 800px) {
      .nav-bar .offcanvas-trigger {
        padding: 0.9rem; } }

.off-canvas {
  background: #222b31;
  padding: 20px;
  color: #fff;
  font-family: "Titillium Web", sans-serif; }
  .off-canvas > .menu {
    margin-bottom: 1rem; }
  .off-canvas .menu a {
    color: rgba(255, 255, 255, 0.6);
    padding-top: 7px;
    padding-bottom: 7px;
    transition: color .2s ease-in; }
    .off-canvas .menu a:hover {
      color: #fff; }
  .off-canvas .fa {
    color: #fff; }
  .off-canvas .is-accordion-submenu-parent > a::after {
    border-color: rgba(255, 255, 255, 0.6) transparent transparent; }
  .off-canvas .social-links {
    margin-left: 20px; }
    .off-canvas .social-links li {
      margin-right: 5px; }
    .off-canvas .social-links a:hover .fa {
      color: #bfbfbf;
      transition: color .2s ease-in; }
    .off-canvas .social-links .fa {
      font-size: 2.2rem; }

.body-info {
  text-align: center;
  font-family: "Titillium Web", sans-serif;
  color: #2c3840; }
  .body-info .button {
    margin: 1rem 0;
    padding: 0.85em 2em; }

.is-open + .off-canvas-content .hamburger .line:nth-child(1),
.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
  width: 12px; }
.is-open + .off-canvas-content .hamburger .line:nth-child(1) {
  transform: translateX(-5px) rotate(-45deg); }
.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
  transform: translateX(-5px) rotate(45deg); }

.hamburger .line {
  width: 20px;
  height: 2px;
  background-color: #fff;
  display: block;
  margin: 3px auto;
  transition: all 0.3s ease-in-out; }
  .hamburger .line:last-child {
    margin-bottom: 0; }


/* Sub Navigation Filter */

.sub-nav {
  background-color: #f2f2f2;
  padding: 0.5rem 0.5rem 0.5rem 0; }
  .sub-nav li {
    color: #999999;
    font-size: 0.77778rem;
    padding-left: 0.88889rem; }
    .sub-nav li.active a {
      border-radius: 3px;
      background: #008CBA;
      color: #fff;
      cursor: default;
      font-weight: normal;
      padding: 0.16667rem 0.88889rem; }


/* Sub Nav Button */ 

.searchsubmit {
    background-color: #E3F9F7; /* Green */
    border: none;
    color: black;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 8px;
}

.searchsubmit:hover {
    background-color: #2c3840; /* Green */
    color: white;
}


/* Footer */

@charset "UTF-8";
.hero {
  background: url("http://www.banksy-wallpaper.com/wallpapers/800x600/10-i-am-father.jpg") no-repeat center center;
  background-size: cover;
  height: 50vh;
  overflow: hidden; }
  .hero h1, .hero h2 {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    padding: 1rem 0 0 1rem;
    margin: 0; }

.row {
  max-width: 1200px; }

.footer {
  background-color: #f9f9f9;
  text-align: center;
  font-size: 1.2rem;
  padding: 0rem; }
  .footer .inline-list a {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-color: #f9f9f9;
    border-radius: 2px;
    font-size: 1.5rem;
    color: #FB8CBC;
    text-align: center;
    line-height: 35px;
    margin: 0 3px 0 0; }
  .footer .contact {
    list-style-type: none;
    margin: 0;
    text-align: left;
    color: #666; }
    .footer .contact li {
      margin-bottom: 2rem; }
      .footer .contact li p {
        padding-left: 5rem; }
    .footer .contact i {
      position: absolute;
      background-color: #FB8CBC;
      color: #fff;
      font-size: 2rem;
      border-radius: 50%;
      line-height: 1;
      margin: 0 0 0 -4rem;
      vertical-align: middle;
      padding: .25em .45em; }
  .footer .copywrite {
    color: #8f9296;
    font-size: 0.875rem;
    margin: 0 0 1rem 0; }
  .footer .about {
    color: #666;
    font-size: 0.875rem;
    margin: 0 0 1rem 0; }
  .footer .footer-links a {
    list-style: none;
    font-weight: normal;
    color: #666;
    padding: 3rem 0 2rem;
    margin: 0;
    font-size: 0.875rem; }
    .footer .footer-links a::after {
      content: "•";
      padding: 0 0.2rem 0 0.4rem; }
    .footer .footer-links a:last-child::after {
      content: "";
      padding: 0 0.4rem 0 0.8rem; }
  @media only screen and (min-width: 40.063em) {
    .footer p {
      text-align: left; }
    .footer .social {
      text-align: left;
      margin: 0; }
    .footer .contact {
      text-align: left; }
      .footer .contact > i {
        margin-right: 1rem; } }

.logo {
  color: #666;
  font-size: 1.5rem; }
  .logo i {
    margin-right: 0.5rem; }

/* Front Page Images */

.image-wrapper {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
  text-align: center;
  border-radius: 4px; }

.image-overlay-content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0; }

.overlay-fade-in p {
  letter-spacing: 0.15em;
  color: #f4f4f4;
  font-size: 28px;
  opacity: 0;
  transition: all 0.2s linear; }
.overlay-fade-in img {
  transition: all 0.2s linear; }
.overlay-fade-in .image-overlay-content {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease-in-out; }
.overlay-fade-in h2 {
  color: #f2f2f2;
  font-size: 1.8rem;
  margin-top: 40%;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.7); }
.overlay-fade-in .button {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #FFF;
  color: #222;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
  position: relative;
  border: 1px solid #999;
  opacity: 0;
  transition: all 0.2s ease-in-out; }
  .overlay-fade-in .button:hover {
    box-shadow: 0 0 5px #000; }
.overlay-fade-in:hover img {
  transform: scale(1.2); }
.overlay-fade-in:hover .image-overlay-content {
  opacity: 1; }
.overlay-fade-in:hover h2, .overlay-fade-in p, .overlay-fade-in .button {
  opacity: 1; }
.overlay-fade-in:hover p {
  transition-delay: 0.1s; }
.overlay-fade-in:hover .button {
  transition-delay: 0.2s; }

/* Home Page Button */ 

.buttonhp {
    background-color: #2c3840; /* Dark blue */
    border: none;
    color: white;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 12px;
    
}
.buttonhp:hover {
    background-color: #E3F9F7; /* Green */
    color: black;
}

/* Pick This Puppy Button */ 

.pickthispuppybutton {
    background-color: #f44336; /* Red */
    border: none;
    color: white;
    padding: 12px 20px;
    text-align: center;
    text-decoration: bold;
    display: inline-block;
    font-size: 20px;
    border-radius: 8px;
}
.pickthispuppybutton:hover {
    background-color: #f44336; /* Green */
    color: white;
}

/* background image */ 

body {
    background-image: url("http://www.pickapuppy.com/wp-content/uploads/2016/09/Pick-A-Puppy-Background-Image.jpg");
    
}

/* Puppy Information */ 

.container {
    margin:  0px auto;
    width: 700px;
    background-color:#f9f9f9;
}

.container > div {
    width: 50%;
}
.col1 {
    float: left;
    
}
.col2 {
    float: right;
}
.col3 {
    margin: auto;
}

/* Grid Wrapper */ 

 .item-wrapper {
  padding: 20px;
  border: 2px solid #efefef;
  border-radius: 7px;
  margin-top: 40px;
}
.item-wrapper:hover .img-wrapper img {
  -webkit-filter: grayscale(0);
}
.item-wrapper:hover .img-wrapper .add-to-cart {
  bottom: 0;
}

.img-wrapper {
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.img-wrapper .add-to-cart {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #333;
  padding: 16px 8px;
  bottom: -50px;
  position: absolute;
  z-index: 2;
  color: #fff;
  margin: 0 auto;
  border: none;
  box-shadow: none;
}
.img-wrapper .add-to-cart:hover {
  background-color: #008cba;
}
.img-wrapper img {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-filter: grayscale(1);
  width: 100%;
}

h3 {
  font-size: 22px;
}

h5 {
  font-weight: bold;
}

p {
  color: #888;
  font-size: 13px;
  margin-bottom: 0;
} 


/* Sub Menu Hide Mobile */ 

@media screen and (max-width: 800px) {
  .submenuhide {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

/* Contact Form Size By Side */ 

#responsive-form{
  max-width:800px /*-- change this to get your desired form width --*/;
  margin:0 auto;
        width:100%;
}
.form-row{
  width: 100%;
}
.column-half, .column-full{
  float: left;
  position: relative;
  padding: 0.65rem;
  width:100%;
  -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
  .column-half{
    width: 50%;
  }
}

/* Contact Form Styling */

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
  background: #fff;
}
.wpcf7-submit{
  float: right;
  background: #2c3840;
  color: #fff;
  text-transform: uppercase;
  border: none;
  padding: 8px 20px;
  cursor: pointer;
}
.wpcf7-submit:hover{
  background: #ff0000;
}
span.wpcf7-not-valid-tip{
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  background: #ff0000;
  padding: 5px;
}
div.wpcf7-validation-errors { 
  text-shadow: none;
  border: transparent;
  background: #E3F9F7;
  padding: 5px;
  color: #666;
  text-align: center;
  margin: 0;
  font-size: 12px;
}
div.wpcf7-mail-sent-ok{
  text-align: center;
  text-shadow: none;
  padding: 5px;
  font-size: 12px;
  background: #E3F9F7;
  border-color: #E3F9F7;
  color: #666;
  margin: 0;
}

/* Footer Contact */
.footercontact {
background-color: #E3F9F7;
}

.puppycontact {
background-color: #f9f9f9;
}

/* Parent Picture Table */

th {
    background-color: #E3F9F7;
    color: black;
    font size: 12px;
}


/* Sub Nav Puppy Price */ 


.sub-navpuppy {
  background-color: #f2f2f2;
  padding: 0.5rem 0.5rem 0.5rem 0; }
  .sub-navpuppy li {
    color: #999999;
    font-size: 0.77778rem;
    padding-left: 0.88889rem; }
    .sub-navpuppy li.active a {
      border-radius: 3px;
      background: #008CBA;
      color: #fff;
      cursor: default;
      font-weight: normal;
      padding: 0.16667rem 0.88889rem; }

@media screen and (max-width: 800px) {
  .puppypricenav {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

/* Hide on Desktop */ 

.hidedesktop { 
display:none; 
}
@media screen and (max-width: 500px) {
.hidedesktop { 
display:block; }
}

/* Hide Mobile */ 

@media screen and (max-width: 800px) {
  .hidemobile {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}


/* Puppy Data Table */ 

.containerpuppy {
    width: 100%;
    height: 270px;
    margin: auto;
    
    border-style: solid;
    border-color: #E3F9F7;
   
}
.onepuppy {
    width: 50%;
    height: 265px;
    background: #f9f9f9;
    float: left;
   padding: 12px;
}
.twopuppy {
    margin-left: 15%;
    height: 265px;
    background: #f9f9f9;
    padding: 15px;
}

/* Pop Up Purchase */


.mobile-ios-modal {
  width: 100%;
  min-height: 160px;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0.75rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.mobile-ios-modal-inner {
  padding: 0.5rem 0.5rem 1.5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.mobile-ios-modal-options {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.mobile-ios-modal-options .button {
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  margin-bottom: 0;
  color: #FF0000;
  background: transparent;
  border-color: #e6e6e6;
  border-bottom: 0;
}

.mobile-ios-modal-options-stacked .button {
  display: block;
  width: 100%;
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  margin-bottom: 0;
  color: #FF0000;
  background: transparent;
  border-color: #e6e6e6;
  border-bottom: 0;
}

/* Mobile Banner */ 


.hero-section {
  background: url("http://www.pickapuppy.com/wp-content/uploads/2017/04/Puppy-Finder-Banner-1-e1492136938432.png") 50% no-repeat;
  background-size: cover;
  height: 60vh;
  text-align: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero-section .hero-section-text {
  color: #FB8CBC;  
  text-shadow: 1px 1px 2px #666;
  padding-top: 330px;
}
.herobackground {
background-color: #fff;
padding-left: 10px;
padding-right: 10px;
padding-botton: 2px;
/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.8);
}

.mobilepicker {
background-color: #f9f9f9;
padding-bottom: 10px;
padding-top: 10px; 
}


/* Mobile Box Image */ 


.main-links {
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.main-links h4 {
  font-family: "Sanchez", serif;
}

@media screen and (max-width: 39.9375em) {
  .main-links h4 {
    font-size: 1.5rem;
  }
}

.main-links .columns {
  position: relative;
}

.main-links .title-box {
  text-align: center;
  background: white;
  color: #4ec6cd;
  position: absolute;
  width: 80%;
  top: 90%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: .2rem 1rem;
}

.main-links .title-box .title-box-title {
  margin-bottom: 0;
}

.main-links .title-box .title-box-title:hover {
  color: #227479;
  transition: color .3s ease-in;
}

@media screen and (max-width: 39.9375em) {
  .main-links img {
    height: 250px;
    display: block;
    margin: 2rem auto;
  }
}