/*
Theme Name:     Physio Child Theme
Theme URI: 		http://demo.qreativethemes.com/physio/
Description:    Child theme for Pyhsio
Author:         QreativeThemes
Author URI:   	http://themeforest.net/user/QreativeThemes/portfolio
Template:       physio-qt
Version:        1.0
*/


/* add your custom CSS code below */

/*
 * Edited by Kimon Topouzidis
 *
 * email: kimon@artabout.gr | kimon.topouzidis@gmail.com
*/

@font-face {
    font-family: 'PF Handbook Pro';
    src: url('fonts/PFHandbookPro-Bold.woff2') format('woff2'),
        url('fonts/PFHandbookPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

.phone-info a:before {
    color: #00704e;
}

    .phone-item {
        display: flex;
        justify-self: auto;
        align-self: center;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background-color: white;
        box-shadow: 0 0 11px 2px rgba(0, 0, 0, 0.2);
        z-index: 9;
    }

    .phone-info {
        margin: 0 auto;
        align-self: center;
        display: flex;
        font-size: 32px;
    }

    .phone-call {
        width: 280px;
        display: block;
        background-color: #ffffff;
        position: absolute;
        border-radius: 200px;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 0 13px 1px rgba(0, 0, 0, 0.2);
    }

    .phone-call p,
    .phone-call span {
        margin: 0 auto;
        left: 35%;
        position: relative;
    }



    .phone-container {
        display: none !important;
    }

    .phone-container {
        display: flex;
        flex-flow: row;
        position: fixed;
        bottom: 1.1em;
        left: 1em;
    }

    @media screen and (max-width: 768px) {
        .phone-container {
            display: flex !important;
        }
    }
/* Changes Font for Headers */
h1,h3
{
    font-family: 'PF Handbook Pro' !important;
    font-weight: bold;
    font-style: normal;
}

/* inline the header  */
.header-widgets{
    white-space: nowrap;
    background-color: #f2f0ea !important;
}

/* Color changes -> header*/
.icon-box--text span, h6{
    color: #00704e !important;
    opacity:1;
}
div.icon-box--icon i
{
    color: #00704e !important;
}
div.icon-box--icon i:hover
{
  opacity:0.6;
}

/* Remove the text transform of the days of the opening hours and change the color */

.content-area .opening-hours ul li {text-transform:none; }

.footer .opening-hours ul li.today {
    font-weight: bold;
    color: #00704e;
}

/* Re-color the testimonial */
.testimonials .testimonial--quote {
    color: #6f4e3c;
    background: #f2f0ea;
    
}
.testimonials .testimonial--quote:after {
    background: #f2f0ea;
    
}
/* Re-color the arrow before the link-service widget */
.footer .widget_nav_menu ul.menu li.current-menu-item > a::before {
    color: #00704e;
}
.main-navigation .nav-toggle-mobile-submenu {
    color: #00704e;
}

.content-area {
    margin-bottom: 0px;
}


 .footer .social-icons a{
    color: #00704e !important;
}
 
 .footer .social-icons a:hover {
   opacity:0.8;
}

/* not sure but thats how i lined up the phone numbers */
span.icon-box--description {float:left;}

/* make the submenu bigger */
#navbar .sub-menu {width:320px;}

/* MEDIA */

@media (min-width: 1200px){
    .main-navigation > li > a {
}
nav#navbar ul li a { font-size:1em !important;}
}
@media (max-width:1024px){
    .header-widgets{
        display:none;
    }
}

@media (min-width: 992px){
    nav#navbar ul li a { font-size:0.8em;}
}

@media (max-width: 600px){
     #navbar .sub-menu {width:600px;}
}

@media (max-width:480px){
    img.wp-image-8284 { width:100%}
      #navbar .sub-menu {width:480px;}
}
.phone-call,.phone-item {display:none !important;}



/*---espa banner---*/
img.espa {
display: block;
    position: relative;
    opacity: 1;
    z-index: 10;
    float: right;
    top: 6.4em;
}

@media (min-width: 992px) and (max-width: 1024px){
    img.espa{
    display: block;
    position: absolute;
    opacity: 1;
    z-index: 10;
    float: right!important;
    top: 7.1em;
    width: 40%;
    right: 0;
    }
}

@media (min-width: 700px) and (max-width: 991px){
    img.espa{
    display: block;
    position: absolute;
    opacity: 1;
    z-index: 10;
    float: right!important;
    top: 9.4em;
    width: 40%;
    right: 0;
    }
}

@media (min-width: 500px) and (max-width: 699px){
    img.espa{
    display: block;
    position: absolute;
    opacity: 1;
    z-index: 10;
    float: right!important;
    top: 9.4em;
    width: 50%;
    right: 0;
    }
}

@media (max-width: 499px){
    img.espa{
    display: block;
    position: relative;
    width: auto;
        width: -webkit-fill-available;
    opacity: 1;
    z-index: 10;
    top: 0;
}

	.sr-only{
	display: None
	}
}