/*
Theme Name:   Woodfield Dental Child Theme
Theme URI:    https://en-ca.wordpress.org/themes/twentytwentyone/
Description:  A Twenty Twenty-One child theme 
Author:       Andi | SmartWebPros
Author URI:   https://www.smartwebpros.com/
Template:     twentytwentyone
Version:      1.4.6
Text Domain:  twentytwentyone-child
*/

:root {
--woodfield--brand-color: #0B7E9D;
--woodfield--nav-hover: #000000;
--primary-nav--color-link: var(--woodfield--brand-color);
--primary-nav--color-link-hover: var(--woodfield--brand-color);
}

/**
 * Extends
 */
 .post-thumbnail,
 .entry-content .wp-audio-shortcode,
 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
 *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
 .default-max-width {
     max-width: var(--responsive--alignfull-width);
     margin-left: auto;
     margin-right: auto;
 }
 p, ul li{
     font-size: 1.1rem;
 }
 h2{
     font-size: 2rem;
 }
 a{
     text-decoration: none;
     color:var(--woodfield--brand-color);
     font-weight: 500;
 }
 a:hover{
    text-decoration: dotted;
    color:black;
    transition: 0.5s;
}
 .blue-text{
     color:var(--woodfield--brand-color);
 }
 /* Contact form 7 style */
 .row-form label{
    margin: 0px 20px; 
 }
 input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], .site textarea{
    border: 2px solid var(--woodfield--brand-color);
    border-radius: var(--form--border-radius);
    color: var(--form--color-text);
    line-height: 1;
    padding: 5px;
    margin: 0px;
    width: 100%;
 }
 input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, .site textarea:focus{
    outline: none;
 }
 input[type=radio]:checked{
    border: 4px solid var(--woodfield--brand-color);
 }
 input[type=checkbox], input[type=radio]{
    border: 2px solid var(--woodfield--brand-color);
 }
 select{
    border: var(--form--border-width) solid var(--woodfield--brand-color);
 }
 .wpcf7-textarea{
     max-height:120px;
 }
 .wpcf7-submit{
    background-color:var(--woodfield--brand-color)!important;
 }
  /* Contact form 7 style */
 .container{
     max-width:1200px;
     margin: 0 auto;
     padding:10px
 }
 .container-content h2{
    font-size: 2rem;
    color: #0b7e9d;
    padding: 10px 0px;
 }
 .hero-banner{
    background-color: #e9f8fe;
    padding: 40px 0px;
    /*background-image: url('/wp-content/uploads/2021/10/white-cloud-blue-sky-1.jpg');*/
	background-image: url('/wp-content/uploads/2022/05/white-cloud-blue-sky-1.webp');
    box-shadow: 5px 5px 20px #0b7e9d4a;
    background-size: cover;
    background-position: bottom;
}
 .hero-banner h1{
    font-size: 4rem!important;
    font-weight: 400;
    color: #454446;
    padding: 10px;
    max-width: 1200px;
}

.center-header {
    display: flex;
    flex-flow: column wrap;
    /* flex-flow: row wrap; */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    /* justify-content: space-around;
    align-items: baseline; */
    font-weight: 400;
}
.center-content{
    justify-content: center;
}

.menu-button-container {
    padding-top: calc(2.7 * var(--global--spacing-vertical));
}
/**Nav**/

.primary-navigation > div > .menu-wrapper {
   justify-content: center;
}

/**COVID-19 link**/
.primary-navigation .primary-menu-container #primary-menu-list .menu-item:not(.sub-menu li):last-child > a {
    color: red;
    font-weight: 600;
}

.primary-navigation .primary-menu-container #primary-menu-list .menu-item:not(.sub-menu li):last-child > a:hover {
    color: var(--woodfield--nav-hover);
    font-weight: 600;
}
/** /COVID-19 link**/

.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
    color: var(--woodfield--brand-color);
}

.primary-navigation a:hover, .primary-navigation .current-menu-item > a:first-child:hover, .primary-navigation .current_page_item > a:first-child:hover {
    text-decoration: none;
    color: var(--woodfield--nav-hover);
    transition: ease .3s;
}

.primary-navigation .sub-menu {
    border: none;
}

@media only screen and (min-width: 482px){
    .primary-navigation .sub-menu {
        box-shadow: 2px 2px 2px 2px lightgray;
    }
}

.primary-navigation > div > .menu-wrapper > li > .sub-menu:before {
    all: unset;
}
.icon-minus {
    color: var(--woodfield--nav-hover);
}

.header-top-bar {
    background-color: var(--woodfield--brand-color);
    height: auto;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.header-top-bar a {
    font-size: 1.1rem;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 600;
    max-width: 50%;
    line-height: 1.4rem;
}

.header-top-bar a:hover {
    font-size: 1.3rem;
    transition: ease-in-out .8s;
}

.header-top-bar a:hover::after {
    overflow: hidden;
}


.home-heading {
    text-align: center;
}

.page-main {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.contact, .phone {
    margin: 0 2% 0 2%;
}


.new-footer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.footer-heading {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--woodfield--brand-color);
    margin: 0;
}

.footer-seperator {
    height: 20px;
    background-color: var(--woodfield--brand-color);
    margin-bottom: 50px;
}

.footer2 div table, .footer2 div th, .footer2 div td {
    border: none;
    line-height: 1rem;
}

.footer2 div td:nth-child(2) {
    text-align: right;
}

.sub-footer {
    margin-top: 25px;
    margin-bottom: 50px;
}

.footer3 .contact_footer p, .footer3 .contact_footer a {
    text-decoration: none;
    line-height: 3.5rem;
}

.footer3 .contact_footer a:hover {
    color: var(--woodfield--brand-color);
    transition: ease-in-out .3s;
}

.footer3 .contact_footer i {
    color: var(--woodfield--brand-color);
    font-size: 1.5rem;
    padding-right: 10px;
}
.flex-box div{
    padding:10px;
}
.link-flex-container{
    padding-top: 40px;
    padding-bottom:40px;
}
.hero-text-content h1{
    font-size: 4rem;
    color: var(--woodfield--brand-color);
}
.hero-text-content h2{
    font-size: 2rem;
}
.center-text{
    text-align: center;
}
.container-services{
    justify-content: center;
    text-align: center;
    box-shadow: 5px 5px 20px #0b7e9d4a;
    margin: 20px;
}
.sl-next, .sl-prev, .sl-close{
    color: var(--woodfield--brand-color)!important;
}
.cf7mls_next, .cf7mls_back{
    color: white!important;
    background-color: var(--woodfield--brand-color)!important;
}
.primary-button{
    padding: 10px;
    background-color: #0b7e9d;
    color: white;
}
.secondary-button{
    border: 2px solid black;
    padding: 10px;
    background: none;
    text-decoration: none;
    color:white;
}
.secondary-button:hover{
    border: 2px solid var(--woodfield--brand-color);
    color:var(--woodfield--brand-color);
    transition: 0.5s;
}
.padding-bottom{
    margin-bottom:20px;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
    background:var(--woodfield--brand-color);
}
.site-logo a:focus{
    background:none!important;
}
.site-logo a:hover{
    text-decoration:none!important;
}
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img{
    outline: none;
}
.add-top{
    margin-top:20%;
}
.add-top-small{
    margin-top:12%;
}

@media only screen and (min-width: 1080px){
    .hero-text-content{
        margin-top: 15%;
    }
    .services-text{
        padding:10px 20px;
    }
}
@media only screen and (min-width: 768px){
    .flex-box{
        display: flex;
    }
    .team-photo{
        min-width: 500px;
    }
    .link-flex-box{
        display: flex;
        flex-wrap: wrap;
    }
    .link-flex-container{
        width: 350px;
        padding: 10px;
    }
    .hero-text, .hero-img{
        width:50%;
    }
    .hero-img img{
        min-height: 350px;
        box-shadow: 5px 5px 20px #0b7e9d4a;
    }
    .hero-text-content{
        max-width: 600px;
        float: right;
    }
    .container-services{
        padding:30px!important;
    }
    .services-page{
        width:350px!important;
        margin: 20px!important;
    }
    .services-text{
        /* min-height:330px!important ; */
    }
    .add-top{
        margin-top:50px;
    }
    .two-row {
        display: flex;
        justify-content: space-between;
    }
    .two-row div{
        margin:0px 10px;
        width: 50%;
    }
    
}
/***MOBILE***/
@media only screen and (max-width: 482px) {
    .header-top-bar {
        flex-flow: column wrap;
        height: auto;
    }

    .header-top-bar a:hover {
        font-size: .9rem;
        color: var(--woodfield--nav-hover)
    }

}

@media only screen and (max-width: 862px) {
    .new-footer {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        text-align: center;
    }

    .footer1, .footer2, .footer3 {
        border-bottom: 2px var(--woodfield--brand-color) solid;
        padding-bottom: 15px;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 600px) {
	.dr-bill-terzis {
		width: 100%;
	}
}
@media only screen and (min-width: 1130px) {
    .last-boxes{
        padding: 31px 0px 30px 0px!important;
    }
}

/* Services area */
.services-page{
    max-width:330px;
    justify-content: center;
    text-align: center;
    box-shadow: 5px 5px 20px #0b7e9d4a;
    margin: 0 auto;
}
.services-img-box {
    position: relative;
  }
  .services-img-box h3{
      padding:10px;
  }
  
  .services-img {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .services-text-mid {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .services-img-box:hover .services-img, .services-img-box:active .services-img {
    opacity: 0.3;
  }
  
  .services-img-box:hover .services-text-mid, .services-img-box:active .services-text-mid  {
    opacity: 1;
  }
  
  .services-text {
    background-color:#097e9d;
    color: white;
    font-size: 16px;
    padding: 10px;
    min-height: 290px;
  }
  .services-text a{
      color:white;
  }
  .services-text a:hover{
    color:lightblue;
}
  .services-text p{
      margin-bottom:10px;
      color:white;
  }
  .service-text-button .secondary-button{
    border: 2px solid white;
  }
  .service-text-button .secondary-button:hover{
    border: 2px solid lightblue;
  }
  .service-text-button{
    position: absolute;
    bottom:20px;
    width: 94%;
}
.services-img-box h3{
    background-color:white;
}
.team-photo-new{
	width: 800px;
    max-width: 100%;
}
.blog-page{
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}
.blog-page article{
    max-width: 530px;
    padding: 10px;
}
.blog-post{
    max-width: 1200px;
    margin: 0 auto;
}