/*!
Theme Name: Howells Custom Theme
Theme URI: http://underscores.me/
Author: Arjayson Barantez
Author URI: https://arjaysonbarantez.com
Description: Starter Theme for Custom Designs
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ys
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Yajra Starter is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

body {
  font:16px 'Barlow';
}

a, a:hover {
  transition:all 0.3s ease-in;
  -o-transition:all 0.3s ease-in;
  -moz-transition:all 0.3s ease-in;
  -webkit-transition:all 0.3s ease-in;
}

#masthead .header-contact {
  background: #001548;
  padding:10px 0;
}

#masthead .header-contact i {
  display: inline-block;
  color:#009bd9;
}

#masthead .header-contact .widget  {
  display:inline-block;
  padding:0 15px 0;
  margin:0;
}

#masthead .header-contact .widget:nth-of-type(1){
  border-right: 2px solid #fff;
}

#masthead .header-contact .widget h5 {
  color:#fff;
  display:inline-block;
  font-size:1.250em;
  font-weight:600;
  margin:0;
}

#masthead .header-contact .widget .textwidget {
  color:#009bd9;
  display:inline-block;
  font-size:1.250em;
  font-weight:600;
}

#masthead .header-contact .widget .textwidget p {
  margin:0;
}

.menu-social-container ul {
  margin:0;
  padding:0;
  text-align: right;
  list-style:none;
}

.menu-social-container ul li {
  display:inline-block;
  float:none !important;
  width:20% !important;
  text-align: center;
}

.menu-social-container ul li a {
  margin-left:10px;
}

.menu-social-container ul li a i {
  color:#009bd9 !important;
}

#masthead .site-branding {
  text-align: center;
  margin:0 auto;
  padding:50px 15px;
}

#masthead .nav-area {
  border-top:1px solid #dcdcdc;
  border-bottom:1px solid #dcdcdc;
}

#masthead .nav-area {
  position: relative;
}

#masthead .schedule {
  font-size: 1.250em;
  font-weight: 600;
  color:#0e2252;
  height: 80px;
  line-height: 80px;
  text-align: right;
}

#masthead .schedule i {
  color:#c3d941;
  display: inline-block;
  vertical-align: middle;
  margin-right:5px;
}

#masthead .schedule .widget {
  display: inline-block;
  margin:0;
  vertical-align: middle;
}

#masthead .schedule .widget p {
  margin:-5px 0 0;
}

.mobile-btn {
  display: none;
  border:none;
  background: #001548;
  color:#fff;
  position: absolute;
  top:0;
  left:15px;
  height:40px;
  z-index:10;
}

.mobile-btn:hover {
  cursor:pointer;
  border:none;
}

#site-navigation li {
  width: 20%;
  text-align: center;
}

#site-navigation li a {
  display: block;
  height: 80px;
  line-height: 80px;
  font-size:1.250em;
  color:#000;
  background: rgba(0, 155,217,0);
  padding:0 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#site-navigation li a:hover, #site-navigation li.current-menu-item a {
  color:#fff;
  background: rgba(0, 155,217,1);
  text-decoration: none;
}

#banner {
  background-repeat:no-repeat;
  background-position: center top;
  background-size: cover;
}

#banner.home {
  height: 680px;
}

#banner.inner {
  height: 430px;
}

#banner .container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

#banner h1 {
  font:4.375em 'Cinzel';
  color:#fff;
  text-transform: uppercase;
  line-height: 90%;
}

#banner.inner h1 {
  text-align:center;
}

#banner.home p {
  font-size:1.250em;
  font-weight:300;
  color:#fff;
  margin:20px 0;
}

#banner.home a {
  display: block;
  max-width:300px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size:1.250em;
  color:#0e2252;
  background: #84c442;
  font-weight:700;
}

#banner.home a:hover {
  color:#fff;
  text-decoration: none;
}


#primary.about {
  margin-top:50px;
}

#primary h2 {
  font-size:2.188em
  color:#009bd9;
  font-weight:700;
}

#primary p {
  font-size:1.250em;
  font-weight: 300;
  line-height: 30px;
}

#primary.home {
  padding:80px 0;
}

#primary h2 {
  font-size:2.188em;
  color:#009bd9;
  text-transform: uppercase;
}

#primary.home h2 {
  text-align: center;
}

#primary.home p {
  text-align: center;
}

#primary .white-bg {
  background: #fff;
  padding:140px 15px;
}

#primary.blog-post {
  margin:60px 0;
}

#primary.blog-post h1 {
  font-size:2.188em;
  color:#009bd9;
  text-transform: uppercase;
}

#primary.blog-post .entry-meta {
  font-size: 0.938em;
  font-weight: 700;
  color: #009bd9;
  letter-spacing: 2px;
  margin:30px 0 50px;
}

#services {
  margin-bottom:150px;
}

#services .block {
  height: 600px;
  text-align: center;
  background-repeat:no-repeat;
  background-position: center;
  background-size:cover;
  padding:150px 70px 0;
  box-shadow: -15px 0px 40px #000 inset;
}

#services .block h3 {
  font:1.875em 'Cinzel';
  color:#fff;
  margin:50px 0 30px;
}


#services .block p {
  color:#fff;
  font-weight:300;
  font-size:1.250em;
  line-height: 30px;
}

#blog {
  margin:100px 0;
}

#blog.inner {
  background: #f6f6f6;
  padding:60px 0;
  margin:0;
}

#blog .tile {
  margin-bottom:30px;
}

#blog.inner .tile .wrap {
  background: #fff;
}

#blog.inner img {
  display: block;
  text-align: center;
  margin:0 auto;
}

#blog.inner .tile .wrap .pad {
  padding:15px;
}
#blog h2 {
  text-align:center;
  font-size:3.125em;
  font-weight:700;
  color:#009bd9;
  margin-bottom:60px;
}

#blog h4 {
  font: 1.500em/100% 'Cinzel';
  color:#001548;
  margin:30px 0 20px;
}

#blog.inner h4 {
  margin:0 0 20px;
}

#blog h6 {
  font-size: 0.938em;
  font-weight: 700;
  color:#009bd9;
  letter-spacing:2px;
}

#blog p {
  font-size:1.063em;
  line-height: 150%;
}

#blog a {
  display: block;
  width:220px;
  height: 65px;
  line-height: 65px;
  background: #84c442;
  text-align:center;
  color:#0e2252;
  font-weight:700;
}

#blog a:hover {
  color:#fff;
  text-decoration: none;
}

#team {
  background:#f6f6f6;
  padding:120px 0;
}

#team .member {
  background: #fff;
  padding:60px ;
  margin-bottom:70px;
}

#team .member h3 {
  font:2.500em 'Cinzel';
  color:#001548;
  text-transform:uppercase;
  margin-bottom: 20px;
}

#team .member h4 {
  font-size:1.250em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

#team .member .photo {
  position: relative;
}

#team .member .photo img {
  position:absolute;
  left:0;
  right:0;
  top:0;
}

#team .member p {
  font-size:1.250em;
  font-weight:300;
  line-height: 130%;
  margin-bottom:15px;
}

#service {
  padding:100px 0 60px;
  background: #f6f6f6;
}

#service .service {
  margin-bottom:40px;
}

#service .service .wrap {
  background:#fff;
  padding:0 40px;
  text-align:center;
  display:flex;
  flex-direction: column;
  justify-content: center;
  height: 440px;
}

#service .service img {
  height: 70px;
  width:auto !important;
  margin:0 auto;
}

#service .service h3 {
  font-size:1em;
  font-weight:700;
  text-transform: uppercase;
  margin:30px 0;
  line-height: 120%;
}

#service .service h3 a {
  color:#009bd9;
}

#service .service h3 a:hover {
  text-decoration: none;
  color:#84c442;
}

#service .service p {
  font-size:1.250em;
  font-weight:300;
  margin:0;
}

.page-child #primary {
  margin:30px 0;
}

#addresses {
  background: #f6f6f6;
  padding: 100px 0;
}

#addresses .address {
  background:#fff;
  margin-bottom: 50px;
  padding:60px 45px;
}

#addresses .address .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#addresses .address h3 {
  color:#001548;
  font:2.500em 'Cinzel';
  margin-bottom: 36px;
}

#addresses .address p {
  font-size:1.250em;
  font-weight: 300;
}

#contact .containerext {
  max-width: 1370px;
  margin:0 auto 150px;
  background: #009bd9;
  padding:115px 0;
}

#contact h2 {
  text-align:center;
  font-size:3.125em;
  font-weight:700;
  color:#fff;
  margin-bottom:60px;
  text-transform: uppercase;
}

#contact input {
  width:100%;
  height: 70px;
  color:#000;
  border:none;
  border-radius:0;
  padding:20px;
  margin-bottom:20px;
}

#contact textarea {
  height:175px;
  color:#000;
  border:none;
  border-radius:0;
  padding:20px;
  margin-bottom:20px;
}

#contact input[type="submit"] {
  max-width: 470px;
  margin:0 auto;
  text-align: center;
  background: #64a1f5;
  color:#0e2252;
  font-size:1em;
  font-weight:bold;
  display:block;
}

#colophon {
  background: #f6f6f6;
}

#colophon .site-info {
  padding:100px 0 40px;
  border-bottom:1px solid #dcdcdc;
}

#colophon img {
  width:100%;
  max-width: 360px;
  margin-bottom: 30px;
}

#colophon .widget h3 {
  font:1.563em 'Cinzel';
}

#colophon .widget p {
  line-height: 150%;
  margin-bottom: 30px;
}

#colophon .copyright {
  padding:40px 0;
}

#colophon .copyright p {
  margin:0;
  color:#010101;
  font-size: 1.125em;
  font-weight:300;
}

@media screen and (max-width:1400px) {
  #services .block {
    padding: 50px 50px 0;
  }
}

@media screen and (max-width:1199px) {
  #banner.home {
    height: 480px;
  }

  #banner.home h1 {
    font-size:3.750em;
  }

  #site-navigation li a {
    padding:0 15px;
  }

  #primary .white-bg {
    padding:50px 15px;
  }

}

@media screen and (max-width:991px) {
  #masthead .header-contact .widget h5{
    font-size:1em;
  }
  #masthead .header-contact .widget .textwidget p{
    font-size:1em;
  }
  #masthead .site-branding {
    padding:15px;
  }

}

@media screen and (max-width:767px) {
  #masthead .header-contact {
    text-align:center;
  }
  #banner.home, #banner.inner {
    height: 360px;
  }

  #banner.home h1, #banner h1 {
    font-size:1.875em;
  }

  #blog h2, #contact h2, #primary .blog-post h1 {
    font-size:2.250em;
  }

  #team .member .photo img {
    position:initial;
  }

  #addresses .address {
    padding: 30px 15px;
  }

  #addresses .address h4 {
    font-size:1.5em;
  }

  #colophon .copyright {
    text-align: center;
  }

  .menu-social-container ul {
    text-align: center
  }

  .menu-social-container ul li a{
    margin:10px;
  }

  .mobile-btn {
    display: block;
  }

  #masthead .nav-area {
    height: 40px;
  }

  #masthead .schedule {
    font-size:1em
  }

  #masthead .schedule {
    height:40px;
    line-height: 40px;
  }

  #services .block {
    height: 450px;
    padding:50px 15px;
  }

  #primary-menu {
    height:auto;
    max-height:0px;
    overflow:hidden;
    transition:all 0.3s ease-in;
    -o-transition:all 0.3s ease-in;
    -moz-transition:all 0.3s ease-in;
    -webkit-transition:all 0.3s ease-in;
  }

  #primary-menu.visible {
    height:auto;
    max-height:1000px;
    transition:all 0.3s ease-in;
    -o-transition:all 0.3s ease-in;
    -moz-transition:all 0.3s ease-in;
    -webkit-transition:all 0.3s ease-in;
  }

  #site-navigation ul {
    position: absolute;
    left:0;
    right:0;
    top:40px;
    z-index:10;
  }
  #site-navigation li {
    display: block;
    float:none;
    background:#001548;
    width:100%;
    text-align: left;
  }

  #site-navigation li a {
    height: 40px;
    line-height: 40px;
    color:#fff;
  }
}