/** MEDIA BREAKS
  small    med     lg      xlg
  480px | 568px | 768px | 1024px
**/

/** FONT FAMILY
  Amatic SC | Dancing Script | Kaushan Script
  Open Sans Condensed | Poppins | Raleway | Shadows Into Light
**/

/** COLORS
  grey          #B1B9C3 rgba(177, 185, 195, 1)
  green         #43EE6D rgba(67, 238, 109, 1)
  navyBlue      #0C2F5A rgba(12, 47, 90, 1)
  midnightBlue  #1F618D rgba(31, 97, 141, 1)
**/


/********* GLOBAL *********/
  .primaryBG { background-color: rgba(67, 238, 109, 1); }
  .secondaryBG { background-color: rgba(31, 97, 141, 1); }

  body {
    background-color: rgba(233, 237, 241, .8);
    color: #333;
    font-family: 'Poppins', 'Open Sans Condensed', Arial; }

  .phone a.disabled { cursor: initial; color: #333; }
  .phone a.disabled:hover { font-weight: normal; }

  /**containers**/
  .container {
    display: flex;
    align-items: center;
    justify-content: center; }
  .container-item-top { align-self: flex-start; }

/********* TYPOGRAPHY *********/
  h1, h2, h3 { color: #000; line-height: 1.3; margin: .5em 0 .25em; }
  h1 { font-family: 'Kaushan Script', cursive; font-size: 2rem; margin-top: 1em; }
  h2 { font-family: 'Raleway', sans-serif; font-size: 1.3rem; font-weight: 700; margin-top: 1em; }
  h3 { font-family: 'Shadows Into Light', cursive; font-size: 1.8rem; }
  p { 
    font-family: 'Poppins', 'Open Sans Condensed', Arial; 
    font-size: 1rem; 
    line-height: 1.4; 
    margin: 0 0 .8em; 
    text-align: justify; }
  a { color: #1F618D; }
  a:active, a:hover, a:focus { color: #FFF; }
  #home h1 { margin-left: -5px; }
    @media screen and (min-width: 568px) {
      h1 { font-size: 2.4rem; }
      h2 { font-size: 1.6rem; }
      a, p, li { font-size: 1.1rem; line-height: 1.5; }
    }
    @media screen and (min-width: 768px) {
      a, p, li { font-size: 1.2rem; }
    }


/********* BUTTONS *********/
  form .submitBtn { 
    background-color:#B1B9C3; 
    -webkit-box-shadow: 0px 0px 3px .3px rgba(12, 47, 90, .8);
       -moz-box-shadow: 0px 0px 3px .3px rgba(12, 47, 90, .8);
            box-shadow: 0px 0px 3px .3px rgba(12, 47, 90, .8);
    color:#0C2F5A; 
    float: right;
    font-weight:bold;
    letter-spacing: .5px;
    width: 300px; }
  form .submitBtn:hover { 
    -webkit-box-shadow: 0px 1px 4px 1px rgba(12, 47, 90, 1);
      -moz-box-shadow: 0px 1px 4px 1px rgba(12, 47, 90, 1);
            box-shadow: 0px 1px 4px 1px rgba(12, 47, 90, 1); }

  @media screen and (max-width: 50em) {
    form .submitBtn {
      letter-spacing: 0;
      width: 225px;
    }
  }


/********* FORMS *********/
  .notifcation { background-color: #43EE6D; color: #FFF; }

  form h2 { 
    background-color:#0C2F5A; 
    color:#FFF;
    letter-spacing: 1px; 
    padding: .5em 0; 
    margin: 0;
    margin-bottom: 1em; 
    text-align: center; 
    overflow: hidden; }

  .tablet label { text-align: center; }
  .tablet select,
  .tablet input:not(.submitBtn) {
    font-size: 90%;
    padding-left: 1em; }

  #property_form { margin-top: 2em; }


  @media screen and (max-width: 36em) {
    form h2 {
      letter-spacing: 0;
      margin-left: -50vw;
      margin-right: -50vw;
      max-width: unset;
      padding: 1em 0;
      position: relative;
          left: 50%;
          right: 50%;
      width: 100vw; }
  }



/********* HEADER *********/
  .logo { 
    position: absolute; 
    top: 275px;
    right: 0;
    z-index: 9; }
  .header { 
    position: relative;
    z-index: 9; }

  @media screen and (max-width: 50em) {
    .logo { top: 175px; }
    .header { height: 75px; width: 100px; }
  }
  @media screen and (max-width: 36em) {
    .logo { top: 120px }
    .header { height: 50px; width: 75px; }
  }


/********* CONTACT BOX *********/
  .contact-us { 
    background: #555;
    border-top-right-radius: 5px;
    padding: 0;
    position: fixed;
    bottom: 0;
    width: 200px;
    z-index: 10; }
  .contact-us:hover { cursor: pointer; }
  .contact-us.open { width: 350px; }
  .contact-us h2 {
    color: #fff;
    font-family: 'Shadows Into Light', cursive;
    font-size: 1.6rem;
    margin: .1em 0;
    text-align: center; }
  .contact-us ul {
    display: none;
    margin: .3em auto;
    padding: 0;
    text-align: center; }
  .contact-us li {
    display: inline-block;
    margin: 0; }
  .contact-us .fa {
    color: #fff;
    font-size: 1.4rem;
    height: 22px;
    line-height: 22px;
    margin-right: .5em;
    width: 22px; }
  .contact-us .fa-envelope,
  .contact-us .fa-facebook-square { font-size: 1.2rem; }
  .contact-us a {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1; }
  .contact-us span {
    color: #fff;
    font-size: 1.2rem;
    margin: 0 .5em; }

  @media screen and (max-width: 320px) {
    .contact-us { 
      border-radius: 0px 5px 5px 0px;
      bottom: 20px;
      width: 40px; }
    .contact-us h2,
    .contact-us ul li a,
    .contact-us span { display: none; }
    .contact-us ul,
    .contact-us li { display: block; }
    .contact-us ul { margin: 1em auto; }
    .contact-us ul li:not(:last-child) { margin-bottom: .5em; }
    .contact-us .fa { margin-right: 0; }
    .contact-us .fa.fa-mobile { font-size: 30px; }
    .contact-us .fa.fa-envelope-o { font-size: 20px; }
    .contact-us .fa.fa-facebook-square { font-size: 22px; }
  }



/********* HOME PAGE **********/
  /** contact info **/
  #contactContainer { margin: 2em auto 0; }
  #contactContainer .photoContainer { 
    border-radius: 20px;
    overflow: hidden; }
  #contactContainer .photoContainer img { opacity: 0.7; }

  /** photo overlay **/
  #contactContainer .photoOverlay { position: absolute; }
  .photoOverlay address { padding: .5em 0; }
  .photoOverlay p,
  .photoOverlay a {
    color: #FFF!important;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    text-align: center; }
  .photoOverlay address p {
    font-family: 'Dancing Script', cursive; 
    font-size: 1.8rem; 
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: .5em;
    text-shadow: 1px 1px 2px #777; }

  /** analysis form **/
  #analysisContainer {
    margin: 2em auto 0;
    position: relative; }
  #analysisForm legend { 
    color:#1F618D;
    font-family: 'Amatic SC', cursive; 
    font-size: 1.8rem; 
    font-weight: bold; 
    letter-spacing: .5px;
    line-height: 1.3; 
    padding-bottom: .3em; 
    text-align: center;
    text-shadow: 1px 1px 2px #777; }
  #analysisForm input { 
    display: block;
    font-size: 85%; 
    left: 0; 
    margin: .5em auto; 
    width: 100%; }
  #analysisForm .submitBtn { 
    background-color:#1F618D; 
    border: solid 1px #000;
    -webkit-box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.6);
       -moz-box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.6);
            box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.6);
    color: #FFF;
    width: 60%; }
  #analysisForm .submitBtn:hover { 
    cursor:pointer;  
    -webkit-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.8);
       -moz-box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.8);
            box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.8); }

  @media screen and (min-width: 320px) {
    #contactContainer .photoContainer { max-width: 400px; }
    #contactContainer .photoContainer,
    #contactContainer .photoOverlay,
    #analysisForm { margin-left: auto; margin-right: auto; width: 90%; }
    .photoOverlay p, .photoOverlay a { font-size: 1.1rem; }
    .photoOverlay address p,
    #analysisForm legend { font-size: 2rem; }
  }
  @media screen and (min-width: 568px) {
    #contactContainer .photoContainer,
    #contactContainer .photoOverlay, #analysisForm { width: 100%; }
  }
  @media screen and (min-width: 830px) and (max-width: 1024px){
    .photoOverlay address p { font-size: 1.6rem; }
    .photoOverlay p, .photoOverlay a { font-size: 1rem; }
  }





/********* BROKER PAGE **********/
  #family h1 { 
    font-size: 2.4rem;
    margin-bottom: .5em;
    margin-left: 0; }
  .brokerContainer { 
    margin: 0 auto 3em;  
    text-align: center; }

  /*photo*/
  .brokerContainer .photo { 
    border: none;
    border-radius: 8px; 
    -webkit-box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.6);
       -moz-box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.6);
            box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.6);
    margin: 0 auto; 
    overflow: hidden; }
  .brokerContainer .photo:hover {
    -webkit-box-shadow: 1px 1px 2px #333, 0 0 15px #333, 0 0 5px #ABFABF;
       -moz-box-shadow: 1px 1px 2px #333, 0 0 15px #333, 0 0 5px #ABFABF;
            box-shadow: 1px 1px 2px #333, 0 0 15px #333, 0 0 5px #ABFABF; }

  /*text*/
  .brokerContainer .name { 
    color: #000; 
    font-family: 'Shadows Into Light', cursive; 
    font-size: 1.8rem; 
    font-weight: bold; 
    margin: .4em auto 0; }
  .brokerContainer .title { font-size: 1.25rem; }
  .brokerContainer .phone,
  .brokerContainer .email {
    color: #333;
    font-size: 1.2rem;
    line-height: 1.5; }



/********* BROKER PROFILE *********/
  #broker-profile #sliderContainer { display: none; }
  #broker-profile h1 { margin-left: 0; }
  #profile { padding: 0 1em; }
  #profile a { color: #333; }
  #profile a:hover { position: static; }

  /*first column*/
  #profile .bioPic { 
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 3px .3px rgba(12, 47, 90, .8);
      -moz-box-shadow: 0px 0px 3px .3px rgba(12, 47, 90, .8);
            box-shadow: 0px 0px 3px .3px rgba(12, 47, 90, .8); 
    margin: .5em auto;
    max-height: 600px; 
    overflow: hidden; }
  #profile .bio { margin-top: 1.5em; }
  #profile .bio > p { padding: 0 .6em; text-indent: 30px; }
  #profile .info ul li:nth-child(-n+2) { margin: .5em 0; }
  #profile .info ul li.personal-page,
  #profile .info ul li.social-media { height: 55px; margin-bottom: .4em; }
  #profile .info ul li.personal-page a,
  #profile .social-icons { line-height: 55px; vertical-align: top; }
  #profile .subtitle { 
    color: #1F618D;
    display: inline-block;
    font-family: 'Shadows Into Light', cursive;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-right: .5em;
    text-transform: uppercase;
    width: 20%; }
  #profile .info ul.social-icons { display: inline-block; margin: 0; }
  #profile .info ul.social-icons li { margin: 0; }

  /*second column*/
  #profile .bio h2 { font-size: 1.6rem; }
  #profile .miniTitle {
    color: #1F618D;
    font-size: 1.5rem;
    margin-top: 1.5em; }

  @media screen and (min-width: 320px) and (max-width: 480px) {
    #profile .bioPic { width: 80%; }
  }
  @media screen and (min-width: 568px) {
    #broker-profile h1 { width: 100%; }
    #profile .bio,
    #profile .bio h2 { margin-top: 0; }
  }



/********* REVIEW PAGE *********/
  iframe.reviewVideo { height: 100%; margin:0 auto; width:100% }
  
  @media screen and (min-width: 768px) {
    iframe.reviewVideo { height: 450px; }
  }


/********* COMMUNITY PAGE **********/
  #fourbyfour {
    margin: 2em auto 3em;
    overflow: auto;
    padding: 0;
    position: relative;
    height: auto;
    width: 800px; }
  #fourbyfour .container {
    float: left;
    margin: 0;
    max-width: 400px;
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 0; 
    height: 300px;
    width: 50%; }
  
  /*back*/
  #fourbyfour .back { 
    background-repeat: no-repeat; 
    background-size: cover!important;
    display: block;
    max-height: 300px;
    overflow: hidden; 
    position: absolute; 
    height: 100%; 
    width: 100%; }
  #fourbyfour .back.kokomo { background: url('http://www.cityofkokomo.org/sliderimage/slide___cityhall1.jpg'); background-position:center; }
  #fourbyfour .back.logansport { background: url('https://i.pinimg.com/736x/9b/2c/23/9b2c2336f1169dad62c2a822780611c2--military-veterans-the-military.jpg'); background-position:center; }
  #fourbyfour .back.peru { background: url('/assets/images/city-of-peru.jpg'); background-position:center; }
  #fourbyfour .back.tipton { background: url('http://www.tiptongov.com/egov/images/1513096624_15735.jpg'); }
  #fourbyfour .back.greentown { background: url('/assets/images/greentown-city-hall.jpg'); background-position: right; }
  #fourbyfour .back.russiaville { background: url('/assets/images/town-of-russiaville.jpg'); background-position: bottom; }

  /*front*/
  #fourbyfour .front {
    position: absolute;
    bottom: 0;
    width: 100%; }
  #fourbyfour .front .text-over-image {
    padding: 0 2em;
    position: relative;
    bottom: .5rem;
    width: 100%;
    z-index: 31; }
  #fourbyfour .text-over-image h3 {
    color: #fff;
    font-size: 2rem;
    letter-spacing: .5px;
    margin:0 auto -.2rem;
    text-shadow: 2px 2px 0px #000; }
  #fourbyfour .text-over-image a:after {
    content: ">>";
    color: #fff;
    padding-left: .5em;
    position: relative;
    bottom: -2px; }
  #fourbyfour .text-over-image .link { visibility: hidden; }
  #fourbyfour .text-over-image .link.hover {
    visibility: visible; 
    color: #fff;
    margin-bottom: 0;
    text-transform: uppercase; }
  #fourbyfour .text-over-image .link.hover:hover,
  #fourbyfour .text-over-image .link.hover:hover:after { color: #43EE6D; }
  #fourbyfour .text-over-image a.link:hover { font-weight: normal; }


/********* SELL PAGE *********/
  #sellForm {
    margin: 2em auto 0;
  }