/*
Theme Name: Д-р Веселин Колев
Theme URI: https://dr-kolev.com
Description: Добър невролог в Бургас
Author: УЕБ АРТ ЕООД
Author URI: https://webart.bg
Version: 1.0
Text Domain: webart
*/
@charset "UTF-8";
:root {
    --black: #000000; 
    --white: #ffffff; 
    --grey-light: #e6e6e6;
    --grey: #ABABAB;
    --grey-dark: #777777;
    --black: #000000; 
    --red-light: #ffbdab; 
    --red: #F84311; 
    --red-dark: #B42C1A; 
    --green:#6CC99D;
    --green-dark:#0D8352;
    --blue: #183667;
    --blue-dark: #092639;
    --sky: #56E4FC;    
    --yellow: #F5E293;

    /* Shadows */
    --shadow-header: 0px 0px 10px 2px rgba(0,0,0,0.05);
    --shadow-card: 0px 2px 4px 0px rgba(135, 135, 135, 0.45);
    --shadow-menu: 5px 5px 4px -3px #000000;   
}

#header { position: absolute; top: 0; left: 0; right: 0; z-index: 10;   }
#header[data-bar="admin"] { top: 32px; }

.header-spacer { background-color: var(--blue-dark); margin-bottom: 30px;  }

.header-wrapper { padding: 25px 0;  }
.header { display: flex; align-items: center; justify-content: space-between; gap: 0 30px; }
.header-hamburger { display: none; flex-shrink: 0; }
.header-logo { flex-shrink: 0; }
.header-logo a.logo { display: block; width: 200px; }
.header-menu { flex-grow: 1; }
.header-actions { flex-shrink: 0; }



/* BREADCRUMBS */
.breadcrumb-wrapper { margin-bottom: 30px;  background-color: #F7F8F5; }
ol.breadcrumb { 
    margin: 0; padding: 8px 0; list-style: none none; list-style-position: inside; 
    display: flex; align-items: center; 
    font-size: 14px; opacity: 0.9;
}
ol.breadcrumb li:not(:last-child)::after { content: '•'; padding: 0 6px;  }
.rank-math-breadcrumb {  margin: 0; padding: 8px 0; list-style: none none; list-style-position: inside;  display: flex; align-items: center;  font-size: 13px; border-bottom: 1px solid var(--grey);  }
.rank-math-breadcrumb p { margin-bottom: 0; }
.rank-math-breadcrumb a {}
.rank-math-breadcrumb .separator { padding: 0 6px; }
.rank-math-breadcrumb span.last,
.rank-math-breadcrumb a:last-child { font-style: italic; font-weight: 500; color: var(--blue); }
 

#navigation { padding: 10px 0; background-color: var(--darker); color: var(--white); }
ul.navigation-header {
    margin: 0; padding: 0; list-style: none none; list-style-position: inside;
    display: flex; justify-content: center; align-items: center; gap: 0 40px; 
}
ul.navigation-header a { opacity: 0.85; transition:opacity 0.2s; text-decoration: none; color: var(--white); }
ul.navigation-header a:hover { opacity: 1;}
ul.navigation-header > li > a { font-size: 20px; font-weight: 600;   }
ul.navigation-header > li.current-menu-item > a { color: var(--yellow); }

/* Hardcoded menu */
ul.mainmenu {
    margin: 0; padding: 0; list-style: none none; list-style-position: inside;
    display: flex; justify-content: center; align-items: center; gap: 0 5px; 
}
ul.mainmenu li.item { position: relative; }
ul.mainmenu a.link { 
    opacity: 0.85; transition:opacity 0.2s; text-decoration: none; color: var(--white); font-size: 19px; font-weight: 600; 
    padding: 10px 18px; 
    transition:all 0.10s;
}
ul.mainmenu a.link .drop { font-size: 16px; color: var(--yellow); margin-left: 3px;  }
ul.mainmenu li.item-active a.link { color: var(--yellow); }

/* Submenus */
ul.mainmenu ol {  
    margin: 0; padding: 5px 20px; list-style: none none; list-style-position: inside; 
    background-color: var(--blue);
    position: absolute; top: 100%; left: 0; z-index: 10; 
    box-shadow: var(--shadow-menu);
    width: 240px;
    display: none;
}
ul.mainmenu ol li.subitem { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
ul.mainmenu ol li.subitem:last-child { border-bottom: none; }
ul.mainmenu ol li.subitem a.sublink { display: block; line-height: 1.15; padding: 7px 0;  color: var(--white); font-size: 16px; text-decoration: none; opacity: 0.7;  }
ul.mainmenu ol li.subitem a.sublink:hover { color: var(--yellow); opacity: 1;   }

/* Show - Hide */
ul.mainmenu li.item:hover ol  { display: block;  }
ul.mainmenu li.item:hover a.link  { color: var(--yellow); background-color: var(--blue); opacity: 1; }


#sidebar .is_sticky { position: sticky; top: 60px; }

.layout-static {  display: flex; gap: 0; align-items: stretch; margin-bottom: calc(var(--padding-module) / 2); } 
.layout-static #main { order: 3;  flex-grow: 1; padding-bottom: 30px;  }
.layout-static .layout-spacer { order: 2; flex-shrink: 0; width: 40px; }
.layout-static #sidebar  { order: 1; flex-shrink: 0; width: 260px; padding-bottom: 30px;  }


.component-heading { margin-bottom: 30px; }
.component-heading .heading-wrapper {}
.component-heading .heading { display: inline-block; margin-bottom: 0; }
.component-heading hr { border-color: var(--blue); border-width: 6px; margin: 10px 0;   }

ul.sidebar-menu { 
    margin: 0; padding: 0; list-style: none none; list-style-position: inside; 
    background-color: var(--blue-dark); color: var(--white); 
    border-radius: 5px; overflow: hidden; 
}
ul.sidebar-menu > li {}
ul.sidebar-menu > li > a { display: block; padding: 8px 15px; color: currentColor; text-decoration: none; transition:all 0.2s;   }
ul.sidebar-menu > li > a:hover { background-color: var(--blue);  }
ul.sidebar-menu > li.current-menu-item > a { color: var(--yellow); font-weight: 700;  }

/* FOOTER */
.footer-page-spacer { }
#footer { background-color: var(--blue-dark); color:var(--white); padding: 20px 0;  }
.copyright-wrapper {  display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.copyright { opacity: 0.7; }
.copyright .divider { opacity: 0.4; padding: 0 10px; }
.copyright a { color: currentColor; }
.web-design {}

a.webart { color: var(--white); opacity: 0.1; text-decoration: none; transition:all 0.2s;  }
a.webart:hover { opacity: 0.9; }


ul.hospitals { margin: 0; padding: 0; list-style: none none; list-style-position: inside; }
ul.hospitals li.divider { }
ul.hospitals li.divider hr { margin: 20px 0; border-width: 5px; border-color: var(--yellow); }

ul.hospitals .heading .icon { margin-right: 10px; } 
ul.hospitals iframe { width: 100%; border: none; height: 350px; }

.row-doctor { align-items: center; }
 

/* ╔═══════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║                                         MODULES                                               ║ */
/* ╚═══════════════════════════════════════════════════════════════════════════════════════════════╝ */

.module { 
    --module-content: unset;
    --module-padding: 66px;
    position: relative; 
}

.module[data-padding="1"] { padding-top: var(--module-padding); padding-bottom: var(--module-padding); }

.module[data-bg="default"] { background-color: transparent;  }
.module[data-bg="white"] { background-color: var(--white);  }
.module[data-bg="blue"] { background-color: var(--blue); color: var(--white); }
 
.module[data-bg="default"] + .module[data-bg="default"],
.module[data-bg="white"] + .module[data-bg="white"],
.module[data-bg="blue"] + .module[data-bg="blue"] { margin-top: calc(var(--module-padding) * -1)}

/* MODULE 0  ------------------------------------------------------------------------------------- */
.module-0 { 
    --module-padding: 200px;
    background-color: var(--blue); color: var(--white);
    background-image: url('images/hero-cover.webp'); background-size: cover; background-position: center center;  background-repeat: no-repeat; 
    border-bottom: 10px solid var(--yellow);
}

.comp-hero { width: 100%; max-width: 740px; display: flex; align-items: center; gap: 0 40px;  }
.comp-hero .col-media { flex-shrink: 0; }
.comp-hero .col-details { flex-grow: 1; }
.comp-hero .photo { width: 200px; border-radius: 5px; border: 3px solid var(--sky);  }
.comp-hero .photo picture { display: block; border-radius: 5px; border: 8px solid var(--blue); }
.comp-hero .superheading { color: var(--yellow); }
.comp-hero .heading { margin-bottom: 0; }
.comp-hero hr { margin: 18px 0 18px 0; border-width: 8px; border-color: var(--yellow); }
.comp-hero .description {  margin-bottom: 20px;  }
.comp-hero .description p:last-of-type { margin-bottom: 0; }
.comp-hero .actions { display: flex; gap: 0 20px; }

/* MODULE 1  ------------------------------------------------------------------------------------- */
.module-1 {  }

.row-cards {  margin-top: -150px }
.row-cards .card { height: 100%;  }

.card { padding: 30px; background-color: var(--white); color: var(--black); border-radius: 6px; }
.card-head {}
.card-head .symbol { text-align: center; margin-bottom: 15px;  }
.card-head .symbol picture { display: inline-block; width: 100%; max-width: 52px; }
.card-head .symbol picture img { max-height: 52px; }
.card-head .heading {  margin-bottom: 15px; text-transform: uppercase; font-weight: 700; text-align: center;  }
.card-body ul { margin-top: 0; margin-bottom: 0; padding-left: 10px; }

.card-booking { border-left: 4px solid var(--red); color: var(--red); padding-left: 12px; }
.card-booking a { color: currentColor; }

/* MODULE 2  ------------------------------------------------------------------------------------- */
.module-2 {  }
.module-2 .module-description {}
.module-2 .module-actions { padding-top: 30px; display: flex; gap: 0 20px;  }

.photo-kolev { border-radius: 6px; overflow: hidden; }

.comp-heading { display: flex; gap: 0 20px; margin-bottom: 20px; }
.comp-heading .heading { margin: 0; }
.comp-heading hr { border-width: 5px; border-color: var(--yellow); margin: 8px 0; max-width: 60%;  }
.comp-heading .ch-icon { flex-shrink: 0; line-height: 1; font-size: 48px; color: var(--yellow); }
.comp-heading .ch-text { flex-grow: 1; }


/* MODULE 3  ------------------------------------------------------------------------------------- */
.module-3 {  }
.module-3 .module-description {}
.module-3 .module-actions { padding-top: 30px; display: flex; justify-content: center;  gap: 0 20px;  }

.card-news { 
    background-color: var(--white); color: var(--black); border-radius: 6px; overflow: hidden;  
    height: 100%;
}
.card-news .col-media { position: relative;}
.card-news .col-media .ratio { overflow: hidden; }
.card-news .col-media picture img {  transition:all 0.2s;  }
.card-news .col-media picture:hover img { transform: scale(1.1); }
.card-news .col-details { padding: 15px; }

.card-news .tag { 
    display: inline-block; padding: 4px 8px; font-size: 14px; text-transform: uppercase; font-weight: 600;
    background-color: var(--grey-dark); color: var(--white); 
    position: absolute; bottom: 0; left: 15px; 
}
.card-news .tag-diagnostics { background-color: var(--green-dark); }
.card-news .tag-disease { background-color: var(--red-dark); }


.row-catnews {}
.row-catnews > [class*="col-"] { margin-bottom: 20px; }
.row-catnews .card-news { background-color: var(--blue); color: var(--white);  }
.row-catnews .card-news .title { margin-bottom: 0; }
.row-catnews .card-news a { color: currentColor; text-decoration: none;  }
.row-catnews .card-news a:hover { text-decoration: underline; color: var(--yellow); }

/* slick padding  */
.slick-articles .slick-slide {  margin-left:  15px; margin-right:  15px;  }
.slick-articles .slick-list { margin-left: -15px; margin-right: -15px; }
/* force slides to have the same height */
.slick-articles .slick-track { display: flex !important; }
.slick-articles .slick-slide { height: inherit !important; }

.slick-articles .slick-arrow { 
    display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; 
    outline: none; border: none;
    background-color: var(--yellow); color: var(--blue);
    position: absolute; top: -70px; z-index: 10;  
    line-height: 1; font-size: 26px; 
    border-radius: 3px; 
    transition:all 0.2s;
}
.slick-articles .slick-arrow:hover { opacity: 0.777; }
.slick-articles .slick-prev { right: 60px; }
.slick-articles .slick-next { right: 0; }

 
/* MODULE 4  ------------------------------------------------------------------------------------- */
.module-4 {  
    background-color: var(--blue-dark) !important;  color: var(--white);
    background-image: url('images/cover-contact.webp'); background-size: cover; background-position: center center;  background-repeat: no-repeat; 
}
.module-4 .module-inner { margin: 0 auto; max-width: 700px; }

.module-4 .module-heading { margin-bottom: 30px; text-align: center;  }
.module-4 .blockquote {}
.module-4 .blockquote hr { border-width: 5px; border-color: var(--yellow); margin: 0;  }
.module-4 .blockquote .description { text-align: center; padding: 30px 0; font-size: 18px; line-height: 1.4; }
.module-4 .module-actions { padding-top: 30px; text-align: center;  }

.module-4-phone { font-size: 36px; color: var(--white); text-decoration: none; letter-spacing: 1px; }
.module-4-phone .icon { margin-right: 14px; }
.module-4-phone:hover,
.module-4-phone:focus,
.module-4-phone:active { color: var(--yellow); }


/* MODULE 5  ------------------------------------------------------------------------------------- */
.module-5 {  }


.bio-photo { display: block; width: 300px; float: right; margin-left: 25px; margin-bottom: 10px; border: 6px solid var(--grey-light); background-color: var(--grey-light); }
.bio-photo picture { display: block;  }
.bio-photo figcaption { font-style: italic; font-size: 14px; color: var(--blue); padding: 6px 15px 2px 15px; text-align: center;  }


.custom-pagination {}
ul.pagination { 
    margin: 0; padding: 0; list-style: none none; list-style-position: inside;
    display: flex; justify-content: center;  align-items: center; gap: 0 10px; 
}
ul.pagination li {}
ul.pagination .page-numbers { 
    display: inline-flex; gap: 0 8px; align-items: center; justify-content: center; padding: 8px 15px; border: 2px solid transparent;
    border-color: var(--blue); background-color: var(--blue); color: var(--white);
    text-decoration: none; border-radius: 2px;
    transition:all 0.2s; 
}
ul.pagination .page-numbers:not(.current):hover { background-color: var(--blue-dark); border-color: var(--blue-dark);  }
ul.pagination .page-numbers.current { background-color: var(--white); color: var(--blue); font-weight: bold; }


/* CONTACT FORM 7 */
.conform-wrapper { padding: 30px 0; }
.conform-wrapper .wpcf7-not-valid-tip { font-size: 13px; background-color: var(--red); color: var(--white); padding: 2px 7px;  }
.conform-wrapper .wpcf7 form .wpcf7-response-output { margin: 15px 0; font-size: 14px; }
.conform-wrapper .wpcf7 form.invalid .wpcf7-response-output { background-color: #ffb900;  }

.conform-heading { margin-bottom: 5px; font-size: 22px; font-weight: 700; text-transform: uppercase;  }

.conform label { display: block; font-size: 15px; margin-bottom: 3px; padding-top: 8px;  }

.conform .wpcf7-text,
.conform .wpcf7-textarea { width: 100%; padding: 6px 12px; border: 1px solid  var(--blue); outline: 1px solid var(--grey-light);   }
.conform .wpcf7-textarea { height: 166px; }

.conform .wpcf7-text.wpcf7-not-valid,
.conform .wpcf7-textarea.wpcf7-not-valid { border-color: var(--red); outline-color: var(--red-light); }


.conform .wpcf7-submit { 
    outline: none; border: none; background-color: var(--green-dark); color: var(--white); font-weight: 600; 
    text-transform: uppercase; font-size: 16px; padding: 8px 20px; margin-top: 15px; border-radius: 3px; 
}

.article-featured-image { margin-bottom: 30px; }
.article-content { font-size: 18px; }


/* MODULE 6  ------------------------------------------------------------------------------------- */
.module-6 {  }
.module-6 .module-inner { margin: 0 auto; max-width: 720px; text-align: center; }
.module-6 .heading { text-transform: uppercase; }

/* ╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗ */
/* ║ ####################################   DEVELOPMENT BREAKPOINTS   ##################################  ║ */
/* ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝ */

/* 4XL */ 
@media (max-width: 1919.98px) { 

} /* @media ---| width < 1920px |--- */

/* 3XL */ 
@media (max-width: 1599.98px) { 


} /* @media ---| width < 1600px |--- */

/* 2XL */ @media (max-width: 1439.98px) { 


} /* @media ---| width < 1440px |--- */

/* XL */ @media (max-width: 1365.98px) {



} /* @media ---| width < 1366px |--- */

/* LG */ 
@media (max-width: 1279.98px) {

    .header-logo a.logo { width: 170px; }
    .bio-photo { width: 222px; }

} /* @media ---| width < 1200px |--- */

/* MD */ @media (max-width: 991.98px) {

    .header-menu { display: none; }
    .header-hamburger { display: block; }

    .module {
        --module-padding: 44px; 
    }

    .header-logo a.logo { background-color: var(--blue); }
    .row-cards { margin-top:0; }
    .card { padding: 20px; }
    .module-4-phone { font-size: 32px; }

    .copyright-wrapper { display: block; text-align: center;  }
    .copyright { margin-bottom: 15px; }

    .comp-hero .photo { width: 144px; }
    .module-0 { background-image: url('images/hero-cover-masked.webp'); }
    .module-0[data-padding="1"] { padding-top: 120px;  }
    .comp-hero .superheading { margin-bottom: 5px; }
    .comp-hero .heading.h1 { font-size: 32px; }
 
    .row-cards {}
    .row-cards > [class*="col-"] { margin-bottom: 30px; }
    .row-cards .col-4 { width: 50%; }
    .row-cards .col-4:last-child { width: 100%; }

    .bio-photo { width: 175px; }
    .layout-static .layout-spacer { width: 30px; }

    .row-catnews > .col-6 { width: 100%; }
    .row-catnews .card-news .title {}
    .copyright .divider { padding: 0 6px; }
    
    .article-content { font-size: 16px; }
    .header-wrapper { padding: 16px 0; }
    .header-spacer { margin-bottom: 20px; }
    a.webart { opacity: 0.25;}
    



} /* @media ---| width < 992px |--- */

/* SM */ @media (max-width: 767.98px) {

    .comp-hero { flex-wrap: wrap; }
    .comp-hero .photo { width: 140px; display: inline-block;  }
    .comp-hero .col-media { flex-grow: 1; text-align: center; margin-bottom: 15px;  }
    .comp-hero .col-details { text-align: center; }
    .comp-hero .actions { justify-content: center; }

    .row-cards .col-4 { width: 100%; }
    
    .row-doctor {  text-align: center;  }
    .row-doctor .col-4 { margin-bottom: 20px; }

    .photo-kolev { text-align: center;  }
    .photo-kolev picture { display: inline-block; max-width: 200px; }
    .module-2 .comp-heading hr { margin-left: auto; margin-right: auto; }
    .module-2 .module-actions  { justify-content: center; }

    .layout-static { flex-wrap: wrap; }
    .layout-static #main { order: 1; width: 100%;  }
    .layout-static .layout-spacer { width: 100%; order: 2; }
    .layout-static #sidebar  { width: 100%;  order: 3; }

    .conform .wpcf7-submit { width: 100%; padding: 12px 15px;  }
    .module-4 .blockquote .description { font-size: 17px; }


} /* @media ---| width < 768px |--- */

/* XS */ @media (max-width: 575.98px) and (orientation:landscape) {}
@media (max-width: 575.98px) {

    .comp-heading .ch-icon { font-size: 38px; }
    .slick-articles .slick-arrow { width: 38px; height: 38px; top: 25px;  }

    .bio-photo { width: 138px; }
    .bio-photo figcaption { font-size: 12px; padding: 6px 10px 2px 10px; }

    .module-3 .module-actions { flex-wrap: wrap; }
    .module-3 .module-actions .btn { margin-bottom: 15px; }

} /* @media ---| width < 576px |--- */

@media screen and (min-width: 320px) and (max-width: 767.98px) and (orientation: landscape) { }

/* XXS */ @media (max-width: 319.98px) and (orientation:landscape) {}
@media (max-width: 319.98px) {

    .bio-photo { width: 100%; float: none; margin-left: 0; margin-bottom: 20px;  }
    .module-4-phone { font-size: 28px; }

} /* @media ---| width < 320px |--- */

/* ---| END |--- */
/* ¡ NO STYLES BELOW THIS LINE PLEASE ! */