/*  
Theme Name:     medisan v0.2.0
Description:    Medisan Srl theme
Version:        0.2.0
Author:         Matteo Prati
Author URI:     https://www.matteoprati.com/
*/

/*-----------------------------------------------------------------
GLOBAL
-----------------------------------------------------------------*/

body {
    font-family: 'Open Sans', sans-serif;
}

html {
    font-family: 'Open Sans', sans-serif;    
}

/*
    Transitions
-----------------------------------------*/

.trns {
    -webkit-transition-property: all;
            transition-property: all;
    
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;    

    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}


/*
    Colors
-----------------------------------------*/


:root {
    --primary-color: #002D4A;
    --primary-color-hover: #001726;
    --secondary-color: #386786;
    --third-color: #7da0ac;
    --inverse-color: #dcfbff;
    --inverse-color-hover: #ffffff;
    --overlay-color: rgba(125, 160, 172, 0.60);
    --overlay-color-light: rgba(255, 255, 255, 0.6);
    --complementary-color: #ffa760;
    --dark-grey: #333;
    --ultra-light-grey: #f7f7f7;
}

.primary-color {
    color: var(--primary-color);
}

.secondary-color {
    color: var(--secondary-color);
}

.inverse-color {
    color: var(--inverse-color);
}

.secondary-bg           {background-color: var(--secondary-color);}
.third-bg               {background-color: var(--third-color);}
.complementary-bg       {background-color: var(--complementary-color);}
.inverse-bg             {background-color: var(--inverse-color);}
.ultra-light-grey-bg    {background-color: var(--ultra-light-grey);}

.gradient-bg {
    background-image: linear-gradient(to right top, #7da0ac, #94b6c0, #abcdd5, #c3e4ea, #dcfbff);       
}
/*
    Typography
-----------------------------------------*/

.uk-link,a.uk-icon,a {
    color: var(--primary-color);
}

.uk-link:hover,a.uk-icon:hover,a:hover {
    color: var(--primary-color-hover);
}

.uk-link-heading a:hover,a.uk-link-heading:hover {
    color: var(--primary-color);
}

h1, h2, h3, h4, h5, h6,
.uk-h1 {
    font-family: 'Open Sans', sans-serif;
    color: var(--primary-color);
}

h6 {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--secondary-color);
}

.uk-heading-small {font-size:2rem;}

@media (min-width: 960px) {
    .uk-heading-small {font-size: 3.25rem;}
}

.my-text-darker {color: #3e3e3e;}

.my-text-xsmall {font-size: 0.785rem;}
.my-text-small {font-size: 0.875rem;}

/*
    Pictures and images
-----------------------------------------*/

.img-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
}



/*
    Button
-----------------------------------------*/

.stroke-icon-button {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 500px;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .1s ease-in-out;
    transition-property: color,border;    
}

.stroke-icon-button.bt-thin {
    border-width: 0px;
    border-color: rgba(0, 45, 74, 0.3);
}


.bt-hover:hover {
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-transition-property: all;
            transition-property: all;
    
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;    

    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}

.uk-button {
   border-radius: 40px;
}

.my-button-secondary{
    background-color: var(--secondary-color);
    color: var(--inverse-color) !important;    
}

.my-button-secondary:hover {
    background-color: var(--primary-color);
    color:#fff; 
}

.my-button-complementary {
    background-color: var(--complementary-color);
}

/*
    Divider
-----------------------------------------*/

.uk-divider-small::after {
    content: "";
    display: inline-block;
    width: 90px;
    max-width: 100%;
    border-top: 3px solid var(--primary-color);
    vertical-align: top
}

/*
    Scrollbar
-----------------------------------------*/

/* width */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-color); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color); 
}

@media only screen and (max-width: 639px) {
    ::-webkit-scrollbar {
      width: 3px;
      height: 3px;
    }    
}

/*
    Card
-----------------------------------------*/

.card-media {
    height: 250px;
    background-color: var(--overlay-color);
}

@media only screen and (max-width: 1199px) {
    .uk-h4.uk-card-title {font-size: 1.2rem;}
}

@media only screen and (max-width: 959px) {
    .uk-h4.uk-card-title {font-size: 1rem;}
}

/*-----------------------------------------------------------------
HEADER NAVBAR
-----------------------------------------------------------------*/

.header-desktop,
.header-mobile {
    z-index: 1980;
    left: 0;
    right: 0;
}

.header-desktop:after {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:0;
    width:100%;
    height:140%;
    background: linear-gradient(0deg, rgba(0,0,0,0) 20%, rgba(255,255,255,0.35) 100%);

}

.uk-navbar-nav>li.current-menu-item {
    position: relative;
}

.uk-navbar-nav>li.current-menu-item:before {
    content: "";
    display: block;
    position: absolute;
    top:-3px;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}

.uk-navbar-nav>li>a {
    text-transform: none;
    font-family: inherit;
    font-weight: 500;
    color: var(--secondary-color);
}

.uk-navbar-nav>li>a:hover {
    color: var(--primary-color);
}

.uk-navbar-nav>li.current-menu-item>a {
    color:#002D4A;
    font-weight: 700;
    cursor: pointer;
    pointer-events: none;
}

.uk-dropdown-nav .current-menu-item a {
    font-weight: 700;
     color: inherit!important;
    text-decoration: none!important;   
}

.main-navbar {
    padding: 20px 0;
    font-size: 14px;
}

.main-navbar .uk-navbar-right {
    font-weight: 600;    
}

.uk-sticky:not(.uk-navbar-transparent){
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(9px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.uk-sticky:not(.uk-navbar-transparent) .main-navbar {}

/*-----------------------------------------------------------------
OFFCANVAS NAVBAR
-----------------------------------------------------------------*/

.uk-offcanvas {
    z-index: 2000;
}

.offcanvas-menu .uk-offcanvas-bar {
    background: inherit;
    background-color: var(--primary-color);
}

.uk-offcanvas-overlay::before {
    background: var(--overlay-color);
    backdrop-filter: blur(4px);
}

/*-----------------------------------------------------------------
FOOTER
-----------------------------------------------------------------*/

.section-footer {
    background-color:var(--secondary-color);
}

.section-subfooter {
    background-color:var(--primary-color);    
}

/*-----------------------------------------------------------------
COVER
-----------------------------------------------------------------*/

@media only screen and (max-width: 1199px) {
    .section-cover {position: relative;}
    
    .section-cover:after {
        content: "";
        display: block;
        position: absolute;
        top:0;
        /*min-height: calc(100vh);*/
        height: 100%;
        width: 100%;
        background-color: var(--overlay-color);
        backdrop-filter: blur(9px);        
    }
    
    .section-cover-light:after {background-color: var(--overlay-color-light);}
    
    .section-cover div {z-index:881;}
}

.section-cover {
    z-index:880; 
    position:relative;    
}

.section-cover:not(.uk-light) a {
    color:var(--primary-color);
}

.section-cover:not(.uk-light) a:hover {
    color:var(--primary-color-hover);
}

.section-cover .uk-grid-divider>:not(.uk-first-column)::before {
    border-color: var(--overlay-color);
}

.cover-scroll-btn {
    position:absolute; 
    bottom:0; 
    transform:translate(0, -100%)
}
    

/*-----------------------------------------------------------------
HOMEPAGE
-----------------------------------------------------------------*/

.op-areas-item {
    padding: 10px 0;
}

.op-areas-item:hover {
    /*background-color: rgba(255, 255, 255, 0.07);*/
}

.op-areas-item:nth-child(n+2) {
    border-top:1px solid rgba(255,255,255,0.4);   
}

.op-areas-heading {
    font-weight: 500;
    color: var(--inverse-color);
}

.op-areas-heading:hover {
    _text-decoration: none;
    color:var(--inverse-color-hover);
}

.op-area-dd {
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
}

.op-area-dd>span.item:not(:first-of-type):before {
    content:" | ";
}

#about p {
    color:#e8e8e8;
}

/*
    Openstreetmap
-----------------------------------------*/

.leaflet-map,.ums_map_opts {
    height: 100% !important;
}

@media only screen and (max-width: 959px) {
    .leaflet-map {
        height: 70% !important;
    }
}

.my-marker-inner {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: -15px;
  
  border-radius: 50% 50% 50% 0;
  border: 4px solid var(--primary-color);
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  color:transparent;
}

.my-marker-inner:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  background-color: var(--primary-color);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    border-radius: 2px !important;
    background: var(--overlay-color) !important;
    backdrop-filter: blur(5px); 
    color: rgba(255, 255, 255, 0.9) !important;
}

.leaflet-popup-tip {display: none;}

.leaflet-popup-content {
    text-align: left;
    width: 150px;
}

/*-----------------------------------------------------------------
ARCHIVES
-----------------------------------------------------------------*/


.archive-item {
    padding-top:40px;
    padding-bottom:40px;
    border-bottom:1px solid #d2d2d2;
}


.archive-item .date {}

.archive-item .title {}

/*-----------------------------------------------------------------
404
-----------------------------------------------------------------*/

.fourofour h1 {
    font-size:15rem;
    font-weight: 800;
    color:var(--complementary-color);
}

.fourofour h2 {
    font-size:1em;
}

@media only screen and (max-width: 639px) {
    .fourofour h1 {font-size:7.5rem;}
    .fourofour h2 {font-size:0.75em;}
    .fourofour .main-logo img {width:90px ;}
}