/*
	Theme Name:  Dedonato
	Theme URI:   http://klicked.com/
	Description: Dedonato
	Author:      Klicked.com
	Author URI:  https://klicked.com
	Template:    twentytwenty
	Version:     1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open Sans:regular,bold,italic,bolditalic|Chivo:regular,bold,italic,bolditalic|');
:root {
  --font-headings: Chivo;
  --font-base: Open Sans;
  --font-headings-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-base-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
/*hide stuff*/
.skip-link, .screen-reader-text {
  display: none;
}
/*root*/
html {
  font-size: 20px;
  font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
  line-height: 1.78;
}
/*typography*/
body, p {
  font-size: 1rem;
  font-weight: 400;
  color: #252e36;
}
body {
  background: #e8e4dd;
  width: 100vw;
  margin: 0;
  padding: 0;
}
/*links*/
#site-header a {
  transition: all .2s;
  color: #fff;
  text-decoration: none;
  font-family: "Chivo", Arial, sans-serif;
  font-weight: 700;
}
#site-header a:hover {
  opacity: 0.5;
}
/*layout*/
#site-header {
  align-content: center;
  align-items: center;
  background: #252e36;
  border-bottom: .25rem solid #c04239;
  border-top: .25rem solid #c04239;
  display: flex;
  margin: 3.2rem 0 0 0;
  width: 100%;
  height: 8.05rem;
  min-height: 3.4rem;
  position: relative;
  z-index: 2;
}
.header-titles {
  background: #252e36;
  width: 11.8rem;
  height: 11.8rem;
  border-radius: 75%;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: -27.5%;
  margin-left: -5.9rem;
}
.site-titles {
  width: 20rem;
  position: absolute;
  top: 3.2rem;
  left: -4.2rem;
  text-align: center;
}
.header-titles h1 {
  font-family: "Chivo", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.728rem;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 100%;
}
.header-titles h1 a {
  text-align: center;
}
.header-titles h2 {
  color: #abafb1;
  font-size: 0.83333rem;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
/*header nav*/
.main-nav-wrapper, .social-nav-wrapper {
  position: absolute;
  padding: 0;
  margin: 0;
  line-height: 1;
}
.main-nav-wrapper {
  left: 7vw;
  height: .9rem;
}
.social-nav-wrapper {
  right: 10vw;
  height: 1rem;
}
ul#primary-menu, ul#social-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul#primary-menu {
  height: .9rem;
  float: left;
}
ul#social-menu {
  height: 1rem;
  float: right;
}
ul#primary-menu li, ul#social-menu li {
  display: inline-block;
  float: left;
  padding: 0;
  margin: 0;
}
ul#primary-menu li {
  display: inline-block;
  height: .9rem;
}
ul#primary-menu li:first-child,
ul#primary-menu li#menu-item-12 {
  margin-right: 3rem;
}
ul#primary-menu li a {
  font-size: .9rem;
}
ul#social-menu li a {
  display: block;
  width: 1rem;
  height: 1rem;
  font-family: "FontAwesome";
  font-size: 1rem;
  color: #fff;
  margin: 0;
  padding: 0;
}
ul#social-menu li#menu-item-16 {
  margin-left: 3rem;
}
ul#social-menu li#menu-item-16 a {
  background-position: 0 -20px;
}
#photo-box {
  background: url("/wp-content/themes/dedonato/images/shutterstock_1471568423-1.jpg") 0 -7.5rem no-repeat;
  background-size: 100%;
  width: 100%;
  height: 28.5rem;
  margin: 0;
  padding: 0;
}
#photo-box .pithy {
  width: 100%;
  display: block;
  clear: both;
  position: relative;
  top: 12rem;
}
#photo-box q, #photo-box cite {
  width: 90%;
  margin: 0 auto;
  font-size: 1.44rem;
  font-weight: bold;
  display: block;
  line-height: 1.125;
  text-align: center;
  padding: 0;
  overflow: hidden;
  color: #252e36;
}
#photo-box cite {
  font-style: italic;
  font-weight: 100;
}
#site-content {
  margin: 0 15vw;
}
#site-content .entry-header-inner h1 {
  text-align: left;
}
.entry-content p {
  margin: 1.6rem 0;
}
.entry-content a {
  transition: all .2s;
}
.entry-content a:hover {
  color: #252e36;
}
/*contact form*/
input[type="text"], input[type="email"], textarea {
  width: 100%;
  border: 1px solid rgb(185, 182, 178);
  border-radius: 3px;
  padding: 16px;
}
button, [type="button"], [type="reset"], [type="submit"] {
  line-height: 1;
  color: #E8E4DD;
  cursor: pointer;
  font-weight: 900;
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
  font-size: 1rem;
  background-color: #252e36 !important;
  border-radius: .2rem;
  border-width: 0;
  text-decoration: none;
  padding: .8rem;
}
button:hover, [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover, button:focus, [type="button"]:focus, [type="reset"]:focus, [type="submit"]:focus {
  background-color: #cd2653 !important;
  outline: none;
}
#site-footer {
  background: #252e36;
  border-bottom: .25rem solid #c04239 !important;
  border-top: .25rem solid #c04239 !important;
  width: 100%;
  padding: .8rem 15vw;
  margin-bottom: 2rem;
}
#site-footer a {
  color: #fff;
  text-decoration: none;
  font-size: .69444rem;
  font-family: "Chivo", Arial, sans-serif;
  font-weight: 700;
  transition: all .2s;
}
#site-footer a:hover {
  opacity: .5;
}
.main-nav-wrapper {
    left: 7vw;
  }
  ul#primary-menu li:first-child {
    margin-right: 1.5rem;
  }
   ul#primary-menu li#menu-item-12 {
    margin-right: 3rem;
  } 
/*responsive*/
@media (max-width: 1000px) {
  #photo-box {
    background-position: 0 -5rem;
    height: 25rem;
  }
  #photo-box .pithy {
    top: 12rem;
  }
}
@media (max-width: 900px) {
  #site-header {
    height: 6rem;
  }
  .header-titles {
    width: 10rem;
    height: 10rem;
    margin-left: -5.9rem;
    top: -1.7rem;
  }
  .site-titles {
    top: 2.6rem;
    width: 15rem;
    left: -2.5rem;
  }
  #photo-box {
    background-position: 0 -5rem;
  }
  #photo-box .pithy {
    top: 8rem;
  }
}
@media (max-width: 800px) {
  html {
    font-size: 18px;
  }
  .header-titles {
    top: -2rem;
  }
  .site-titles {
    top: 2.5rem;
  }
  .site-titles h1 {
    font-size: 1.5rem;
  }
  .site-titles h2 {
    font-size: 0.75rem;
    margin-top: .25rem;
  }
  .main-nav-wrapper {
    left: 8vw;
  }
  .social-nav-wrapper {
    right: 8vw;
  }
  #photo-box {
    height: 20.5rem;
  }
  #photo-box .pithy {
    top: 8rem;
  }
}
@media (max-width: 750px) {
  html {
    font-size: 16px;
  }
  #site-header {
    height: 6.5rem;
  }
  .header-titles {
    width: 10rem;
    height: 10rem;
    top: -1.6rem;
  }
  .site-titles {
    top: 2.9rem;
    left: -2.7rem;
  }
  .main-nav-wrapper {
    left: 10vw;
  }
  .social-nav-wrapper {
    right: 12vw;
  }
  #photo-box .pithy {
    top: 9rem;
  }
}
@media (max-width: 700px) {
  #photo-box {
    background-position: 0 -4rem;
  }
}
@media (max-width: 650px) {
  .site-titles {
    left: -2.5rem;
  }
  #photo-box {
    background-position: 0 -4rem;
  }
}
@media (max-width: 600px) {
  .main-nav-wrapper {
    left: 7vw;
  }
  ul#primary-menu li:first-child {
    margin-right: 1.5rem;
  }
   ul#primary-menu li#menu-item-12 {
    margin-right: 3rem;
  } 
  .site-titles {
    left: -2.5rem;
  }
}
@media only screen and (max-width: 600px) and (min-width: 375px) {
    body {
    width:100vw;
    }
    .header-titles {
        margin-left: -5rem;
    }
  ul#primary-menu li, ul#social-menu li {
    display: block;
    clear: both;
        float:none;
    height: .9rem;
      margin:0 0 .5rem 0;
      padding:0;
}
    ul#social-menu li {   
    height: 1rem;
        float:right;
}
     .main-nav-wrapper,
    .social-nav-wrapper {   
    top:2rem;
}
    #photo-box {
    background-position: 0 -1rem;
        height:14rem;
}
    #photo-box .pithy {
    top: 3.5rem;
}
}