@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;500;600;700&family=Libre+Baskerville:wght@700&display=swap');

*  {
    margin:0;
    padding:0
  }

  #wrap             /* encloses everything on page */
   {
     width: auto;
     min-width: 360px;
     margin: 40px auto;
     padding: 0px;
     background: #ffffff;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.39);
     border: 0;
   }

   #content
     {
   		width: auto;
   		margin: 0 auto;
   		padding: 0px;
   	}

   #main
     {
       float: left;
       width: 330px;
       margin: 10px;
       padding: 0px 5px;
     }

  #sidebar
    {
      float: right;
      width: 230px;
      margin-top: 10px;
      margin-right: 55px;
      margin-bottom: 20px;
      padding: 10px;
      border: solid 1px #eee;
    }

body
  {
    background-color: #464646;
    background-image: url("https://advanced-appraisal.com/sf.JPG");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }

/*
body,
	html
  {color: #000000}
*/


ul li
  {
    font-size: 13px;
    line-height: 1.3;
    margin-left: 40px;
  }

.main-text
  {
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 1.2em ;
    font-family: 'PT Serif', serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }

#topbar
  { width: 100%;
    margin: 0 auto;
    padding-top: 30px;
  }

#topbar-text
  {
    padding: 10px 10px 10px 10px;
    color: #13294b;
    font-family: 'Libre Baskerville', serif;
    font-size: 34px;
    font-variant-caps: small-caps;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    text-align: left;
  }

#logo {
  float: left;
  vertical-align: top;
  margin-bottom: 0px;
  margin-top: -16px;
  padding-bottom: 0px;
  width: 170px;
  display: inline-block;
}

#logo-and-text {
  margin: 0 auto;
}

#nav-list
  {
    text-align: center;
    height: 25px;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid #4b81af;
    border-bottom: 1px solid #464540;
    margin: 0px;
    font-size: 13px;
    background: #2b6a9f;
    background: -webkit-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: -moz-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: -ms-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: -o-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: linear-gradient(to bottom,#2b6a9f 0,#1f537a 100%);
    -webkit-box-shadow: 0 2px 2px #555;
    box-shadow: 0 2px 2px #555;
  }

    #nav-list li {display: inline-block}

    #nav-list a
      {
        text-decoration: none;
        margin: 0 -4px 0 -2px;
        padding: 0 12px;
        font-weight: bold;
        font-family: 'Nunito', sans-serif;
        font-size: 12px;
        line-height: 1;
        color: #ffffff;
      }

    #nav-list a:hover, #nav-list a:focus
      {
        color: yellow;
        background: transparent;
      }

      #sublist {
        left: 0;
        max-height: 0;
        position: absolute;
        top: 100%;
        z-index: 0;
        -webkit-perspective: 400px;
        -moz-perspective: 400px;
        -ms-perspective: 400px;
        -o-perspective: 400px;
        perspective: 400px;
      }
      
      #sublist li {
        opacity: 0;
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        transform: rotateY(90deg);
        -webkit-transition: opacity .4s, -webkit-transform .5s;
        -moz-transition: opacity .4s, -moz-transform .5s;
        -ms-transition: opacity .4s, -ms-transform .5s;
        -o-transition: opacity .4s, -o-transform .5s;
        transition: opacity .4s, transform .5s;
      }

.headline
  {
/*    float: left;  */
    text-align: left;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
  }

article  {padding: 0px;}


aside  {float: right;}

#social-email
  {
    display: inline-block;
    margin-top: 10px;
    margin-left: 38px;
  }

#email  {float: right; padding-left: 20px}

#linked  {padding-left: 10px}

#footer {
  clear:both;
  padding: 1px;
  background: -webkit-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
  background: -moz-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
  background: -ms-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
  background: -o-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
  background: linear-gradient(to bottom,#2b6a9f 0,#1f537a 100%);
  -webkit-box-shadow: 0 2px 2px #555;
  box-shadow: 0 2px 2px #555;
}

#footer p
  {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
  }

* html #footer {height: 1px}

#appraisal-property-types
  {
    float: left;
    padding: 10px 0px 0px 0px;
    margin: 0px 0px 0px 30px;
  }

#appraisal-purposes
  {
    float: left;
    padding: 10px 0px 12px 0px;
    margin: 10px 0px 0px 30px;
  }

.color-with-marker ::marker
  {
    color: #CE2029;
    font-size: 1.25em;
    margin-top: 0.2em;
  }


#three-major-appraisals {
  margin-top:0px;
  margin-bottom: 0px;
  padding-left: 25px;
}

.main-text-before-list {
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 10px ;
  font-family: 'PT Serif', serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.main-text-list {
  margin-top: 9px;;
  margin-left: 80px;
}

.main-text ul {
  padding-left: 30px
}

.main-text-list li{
  font-size: 14px;
  margin-left: 12px;
  font-family: 'PT Serif', serif;
  font-weight: 500;
  line-height: 1.5;
}

.main-text-list ::marker
  {
    color: #f24464;
    font-size: 1.2em;
    margin-top: 0.2em;
  }


a
  {
    color: #CE2029;
    text-decoration: none;
    font-weight: 400;
  }

a:hover
  {
    text-decoration: underline;
    color: #0052d6;
    text-decoration-style: solid;
    text-decoration-color: #c00100;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.2rem;
  }

a:active {}

h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
  {
    margin-top: 0.5em;
    Margin-bottom: 0.5em;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    color: #004481;
    text-shadow: 2px 2px 1px #ddd;
  }

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
  {
    margin-bottom: 0.25em;
    margin-top: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    color: #004481;
  }

  h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
    {
      margin-bottom: 0.25em;
      margin-top: 0;
      font-family: 'Roboto', sans-serif;
      font-size: 15px;
      font-weight: 800;
      text-align: left;
      color: #004481;
    }


.desktopmsg     /* message above form */
  {
    display: table;
    background: #1d73be;
    color: #ffffff;
    width: auto;
    max-width: 90%;
    position: relative;
    height: auto;
    padding: 0.3em;
    text-align: left;
    margin: 0 auto;
    font-size: 0.8rem;
    font-weight: 500;
  }

#assignments, #testimony  /* submenu on assignments page  */
  {
    display: block;
    text-align: center;
    height: 25px;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid #4b81af;
    border-bottom: 1px solid #464540;
    margin-bottom: 15px;
    font-size: 13px;
    background: #2b6a9f;
    background: -webkit-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: -moz-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: -ms-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: -o-linear-gradient(top,#2b6a9f 0,#1f537a 100%);
    background: linear-gradient(to bottom,#2b6a9f 0,#1f537a 100%);
    -webkit-box-shadow: 0 2px 2px #555;
    box-shadow: 0 2px 2px #555;
  }

    #assignments li, #testimony li {display: inline-block}

    #assignments a
      {
        text-decoration: none;
        margin: 0 -4px 0 -2px;
        padding: 0 8px;
        font-weight: bold;
        font-family: 'Nunito', sans-serif;
        font-size: 12px;
        line-height: 1;
        color: #ffffff;
      }

      #testimony a
        {
          text-decoration: none;
          margin: 0 -4px 0 -2px;
          padding: 0 11px;
          font-weight: bold;
          font-family: 'Nunito', sans-serif;
          font-size: 12px;
          line-height: 1;
          color: #ffffff;
        }

    #assignments a:hover, #assignments a:focus, #testimony a:hover, #testimony a:focus
      {
        color: yellow;
        background: transparent;
      }


			/* Make selected text in a paragraph white on a blue background */
p::selection
  {
    color: white;
    background-color: #5576d1;
  }

  blockquote {
      display: table;
      font-size: 14px;
      width: auto;
      max-width: 95%;
      margin: 25px auto;
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      color: #ffffff;
      padding: 10px 10px 15px 10px;
      border-left: 0px solid #0055a0;
      border-right: 0px solid #ccc;
      border-top: 0px solid #ccc;
      border-bottom: 0px solid #ccc;
      border-radius: 0.3em;
      line-height: 1.4;
      position: relative;
      background: #024873;
  }


  blockquote::before{
    font-family: 'Open Sans', sans-serif;
    content: "\201C";
    color:#ffffff;
    font-size: 2em;
    position: absolute;
    left: 10px;
    top:-0px;
  }

  blockquote::after{
    content: '';
  }

  /* Hide short text by default (resolution > 1200px) */
  .short-text { display: none; }

  /* When resolution <= 1200px, hide full text and show short text  */
  @media (max-width: 999px) {
      .short-text { display: inline-block; }
      .full-text { display: none; }
  }





/*-- START MEDIA QUERIES ------------------------------------------------------------------ */

@media (min-width: 400px) and (max-width: 599px)  {
  #wrap {width: 400px; margin: 60px auto}
  #content {width: 400px}
  #main {width: 370px; margin-left: 10px; margin-right: 10px; padding: 0px 5px}
  #sidebar {width: 230px; margin-left: 10px; margin-right: 80px; margin-top: 26px}
  #topbar-text {font-size: 37px}
  #nav-list a {font-size: 12px; padding: 0 34px; margin: 0px -19px}
  #nav-list {height: 30px; padding-top: 14px}
  h1 {font-size: 22px;}
  h2 {font-size: 17px}
  h3 {font-size: 16px}
  .main-text {font-size: 16px}
  .main-text-list li {font-size: 14px; line-height: 1.7}
  ul li {font-size: 15px}
  blockquote {font-size: 14px}
  #assignments a {font-size: 12px; padding: 0 12px}
  #testimony a {font-size: 12px; padding: 0 14px}
  }

@media (min-width: 600px) and (max-width: 767px)  {
  #wrap {width: 600px; margin: 60px auto}
  #content {width: 600px}
  #main {width: 335px; margin-left: 10px; margin-right: 10px; padding: 0px 5px}
  #sidebar {width: 200px; margin-left: 10px; margin-right: 10px; margin-top: 1px; padding: 5px}
  #topbar-text {font-size: 28px}
  #nav-list a {font-size: 13px; padding: 0 50px; margin: 0px -13px}
  #nav-list {height: 30px; padding-top: 14px}
  h1 {font-size: 20px;}
  h2 {font-size: 17px}
  h3 {font-size: 15px}
  .main-text {font-size: 16px}
  .main-text-list li {font-size: 14px; line-height: 1.7}
  ul li {font-size: 13px}
  blockquote {font-size: 14px}
  #assignments a {font-size: 12px; padding: 0 8px}
  #testimony a {font-size: 12px; padding: 0 11px}
  }

@media (min-width: 768px) and (max-width: 999px)  {
    #wrap {width: 768px; margin: 60px auto}
    #content {width: 768px}
    #main {width: 430px; margin-left: 30px; margin-right: 10px; padding: 0px 10px}
    #sidebar {width: 210px; margin-left: 10px; margin-right: 40px; margin-top: 6px; padding: 5px}
    #topbar-text {font-size: 36px}
    #nav-list a {font-size: 14px; padding: 0 70px; margin: 0px -15px}
    #nav-list {height: 30px; padding-top: 14px}
    h1 {font-size: 26px;}
    h2 {font-size: 18px}
    h3 {font-size: 16px}
    .main-text {font-size: 16px}
    .main-text-list li {font-size: 15px; line-height: 1.7}
    ul li {font-size: 13px}
    blockquote {font-size: 15px}
    #assignments a {font-size: 13px; padding: 0 15px}
    #testimony a {font-size: 13px; padding: 0 19px}
   }

@media (min-width: 1000px) and (max-width: 1199px)  {
  #wrap {width: 1000px; margin: 60px auto}
  #content {width: 1000px}
  #main {width: 550px; margin-left: 70px; margin-right: 10px; padding: 0px 10px}
  #sidebar {width: 230px; margin-left: 10px; margin-right: 80px; margin-top: 10px}
  #topbar-text {font-size: 48px}
  #nav-list a {font-size: 15px; padding: 0 77px; margin: 0px 0px}
  #nav-list {height: 30px; padding-top: 14px}
  h1 {font-size: 34px;}
  h2 {font-size: 20px}
  h3 {font-size: 18px}
  .main-text {font-size: 18px}
  .main-text-list li {font-size: 16px; line-height: 1.7}
  ul li {font-size: 15px}
  blockquote {font-size: 16px}
  #assignments a {font-size: 13px; padding: 0 12px}
  #testimony a {font-size: 13px; padding: 0 30px}
  }

@media (min-width: 1200px) and (max-width: 1399px){

  	#wrap {width: 1125px; margin: 60px auto}
  	#content {width: 1125px}
  	#main {width: 675px; margin-left: 70px; margin-right: 10px; padding: 0px 10px}
  	#sidebar {width: 230px; margin-left: 10px; margin-right: 80px; margin-top: 19px}
    #topbar-text {font-size: 54px}
    #nav-list a {font-size: 18px; padding: 0 78px; margin: 0px 10px}
    #nav-list {height: 30px; padding-top: 14px}
    h1 {font-size: 40px}
    h2 {font-size: 22px}
    h3 {font-size: 18px}
    .main-text {font-size: 20px}
    .main-text-list li {font-size: 17px; line-height: 1.7}
    ul li {font-size: 15px}
    blockquote {font-size: 17px}
    #assignments a {font-size: 15px; padding: 0 17px}
    #testimony a {font-size: 15px; padding: 0 37px}
}

@media (min-width: 1400px) {
    	#wrap {width: 1250px; margin: 60px auto}
    	#content {width: 1250px}
    	#main {width: 800px; margin-left: 70px; margin-right: 10px; padding: 0px 10px}
    	#sidebar {width: 230px; margin-left: 10px; margin-right: 80px; margin-top: 25px}
      #topbar-text {font-size: 60px}
      #nav-list a {font-size: 18px; padding: 0 80px; margin: 0px 15px}
      #nav-list {height: 30px; padding-top: 14px}
    	h1 {font-size: 48px}
      h2 {font-size: 24px}
    	h3 {font-size: 18px}
    	.main-text {font-size: 22px}
      .main-text-list li {font-size: 18px}
      ul li {font-size: 16px}
      blockquote {font-size: 18px}
      #assignments a {font-size: 15px; padding: 0 30px}
      #testimony a {font-size: 15px; padding: 0 52px}
}


/* DOMINGO */
/*NEW MENU*/

/* The navigation menu */
/* Add a black background color to the top navigation */
.topnav {
  background-color: #2b6a9f;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #4a81ad;
  color: white;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #2b6a9f;
  color: #e1e1e1;
  font-weight: bolder;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;}
  }

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;  }
}

  /*Formulario*/
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */

img {
  width: 100%;
  height: auto;
}