/*  
Theme Name:     Places
Description:    Places wordpress theme
Author:         Matteo Prati
Version:        0.0.2
*/

/*===============================================================
GLOBAL
===============================================================*/

@font-face {
  font-family: "Roboto Flex";
  src: url("fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
}

@font-face {
  font-family: "Roboto Flex";
  src: url("fonts/Roboto-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
}

/*
    Variables
-----------------------------------------*/

:root {
    /*breakpoint*/
    --uk-breakpoint-s: 640px;
    --uk-breakpoint-m: 960px;
    --uk-breakpoint-l: 1200px;
    --uk-breakpoint-xl: 1600px;
    
    /*greys*/
    --color-grey-9: #e6e6e6;
    --color-grey-8: #cccccc;
    --color-grey-7: #b3b3b3;
    --color-grey-6: #999999;
    --color-grey-5: #808080;
    --color-grey-4: #666666;
    --color-grey-3: #4d4d4d;
    --color-grey-2: #333333;
    --color-grey-1: #1a1a1a;
    
    /*colors*/
    --color-default: hsl(259, 59%, 98%);
    --color-muted: hsl(0, 0%, 96%);
    --color-primary: #6233c7;
    --color-secondary: #236480;
    --color-tertiary: #7dc8c8;
    
    --gradient-primary: linear-gradient(45deg, rgba(98, 51, 199, 0.62) 0%, rgba(35, 100, 128, 0.72) 70%);
    
    /*opacity*/
    --opacity-light-90: rgba(255,255,255,0.9);
    --opacity-light-60: rgba(255,255,255,0.6);      
    
    /*font*/
    --main-font-family: 'Roboto Flex', serif; 
    --main-font-size: 16px;
    --main-font-color: #6b6180;
    --txt-xlarge: 1.25em;
    --txt-large: 1.125em;
    --txt-small: 0.875em;
    --txt-xsmall: 0.8125em;
    --txt-2xsmall: 0.75em;
    
    /*shadow*/
    --shadow: -15px -15px 30px rgba(255,255,255,.9), 15px 15px 30px hsla(259, 9%, 63%, 0.34);   
    
    /*transitions*/
    --transition-duration: 0.24s;
    --transition-timing-function: ease-in-out;    
}

html {
    background-color: var(--color-page-bg);
    font-family: var(--main-font-family);
    font-size: var(--main-font-size);
    font-weight: 400;
    line-height: 1.86;
    -webkit-text-size-adjust: 100%;
    color: var(--main-font-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {font-family: var(--main-font-family);}

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

.uk-section-default             {background-color: var(--color-default);}
.uk-section-primary             {background-color: var(--color-primary);}
.uk-section-secondary           {background-color: var(--color-secondary);}
.uk-section-tertiary           {background-color: var(--color-tertiary); color:var(--color-primary)}



.my-section-gradient-primary    {
    background-image: linear-gradient(45deg, rgba(98, 51, 199, 0.62) 0%, rgba(35, 100, 128, 0.72) 70%), url('images/overlay.png'); 
    background-color: var(--color-primary);
    background-size: cover;
}

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

.trns {
    -webkit-transition-property: all;
            transition-property: all;
    
    -webkit-transition-duration: var(--transition-duration);
            transition-duration: var(--transition-duration);    

    -webkit-transition-timing-function: var(--transition-timing-function);
            transition-timing-function: var(--transition-timing-function);
}

/*
    Typography
-----------------------------------------*/

h1, h2, h3, h4, h5, h6,
.uk-heading-3xlarge,.uk-heading-2xlarge,.uk-heading-large,.uk-heading-medium,.uk-heading-small,.uk-heading-xlarge, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {font-family: var(--main-font-family);}

.uk-heading-line>::after,.uk-heading-line>::before {
    width: 150px;
    border-bottom-width: 2px;
}

.uk-light .uk-heading-line>::after,.uk-light .uk-heading-line>::before {
    border-bottom-color: #ffffff;
}

/*===============================================================
MAIN NAVBAR
===============================================================*/

.my-header-desktop,
.my-navbar-mobile {
    position: absolute;
    z-index: 1080;
    left: 0;
    right: 0;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
    background: #fff;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .08);
}

.uk-navbar-inactive img.logo-positive,
.uk-navbar-sticky .logo-negative {
    display:none;
}

.uk-navbar,
.uk-navbar .uk-logo {
    font-family: var(--main-font-family);
}

.uk-navbar-nav {
    gap:10;
}

.uk-navbar-item, .uk-navbar-nav>li>a {
    position: relative;
    min-height: 100px;
    padding: 0 20px;
    text-decoration: none;
    text-transform:none;
    font-size: var(--main-font-size);
}

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

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

.uk-navbar-nav>li.current-menu-item>a  {
    font-weight: 600;
}

.uk-light .uk-navbar-nav>li>a {
    color: rgba(255, 255, 255, 0.85);
}

.uk-light .uk-navbar-nav>li>a:hover,
.uk-light .uk-navbar-nav>li.current-menu-item>a {
    color: #fff;
}

.uk-navbar-nav>li>a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    height: 3px;
    width:50%;
    opacity:0;
    background: #fff;
    
    -webkit-transition-property: all;
            transition-property: all;
    
    -webkit-transition-duration: var(--transition-duration);
            transition-duration: var(--transition-duration);    

    -webkit-transition-timing-function: var(--transition-timing-function);
            transition-timing-function: var(--transition-timing-function);    
}

.uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li>a::before {
    background: linear-gradient(45deg,var(--color-primary) 0%, var(--color-secondary) 100%);
}



.uk-navbar-nav>li.current-menu-item>a:before,
.uk-navbar-nav>li>a:hover:before {
    width: 100%;
    opacity: 1;
}

/*===============================================================
OFFCANVAS NAV
===============================================================*/

.offcanvas-megamenu,
#offcanvas-menu {
    z-index: 1081;
}

#offcanvas-menu li>a:hover,
#offcanvas-menu li.current-menu-item>a {
    color: var(--color-primary);
}

/*===============================================================
FOOTER
===============================================================*/

.page-footer .eu-logo {
    color:var(--color-grey-2);
}

/*===============================================================
HOME
===============================================================*/

@media screen and (max-width: 639px) {
    .uk-heading-3xlarge {
        font-size: 96px;
    }
}

.tagline {
    color: #fff;
    letter-spacing: 0.1rem;    
}

.card-icon .icon-block {
    height:160px;
    width:160px;
    background-color: #fff;
    border-radius: 50%;
    box-sizing: border-box; 
    padding:40px;
    transform: translate3d(50%, 35px,0);
}

@media screen and (min-width: 640px) {
    .card-icon .icon-block {transform: translate3d(100%, 35px,0);}    
}


.card-icon .icon-block svg {  
    color:var(--color-primary);
}

.card-icon .text-block {
    z-index:1;
    background-color: var(--color-primary);
    background-image: var(--gradient-primary);
    border-radius: 6px;
    box-sizing: border-box; 
    padding:40px;  
    box-shadow: var(--shadow);
    min-width: 300px;
    text-align: center;
}