/*
Theme Name: marcela
Theme URI: 
Author: 
Author URI: 
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marcela
Tags: marcela
*/

@font-face {
    font-family: 'Social Media Circled Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Social Media Circled Regular'), url('./fonts/Social Media Circled.woff') format('woff');
}

@font-face {
  font-family: 'Rafflesia-Demo';
    src:  url('./fonts/Rafflesia-Demo.ttf.woff') format('woff'),
    url('./fonts/Rafflesia-Demo.ttf.svg#Rafflesia-Demo') format('svg'),
    url('./fonts/Rafflesia-Demo.ttf.eot'),
    url('./fonts/Rafflesia-Demo.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Neue Medium';
    src: url('./fonts/HelveticaNeue-Medium.woff2') format('woff2'),
        url('./fonts/HelveticaNeue-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue Bold';
    src: url('./fonts/HelveticaNeue-Bold.woff2') format('woff2'),
        url('./fonts/HelveticaNeue-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Helvetica Neue Light';
    src: url('./fonts/HelveticaNeue-Light.woff2') format('woff2'),
        url('./fonts/HelveticaNeue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue Thin';
    src: url('./fonts/HelveticaNeue-Thin.woff2') format('woff2'),
        url('./fonts/HelveticaNeue-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue Roman';
    src: url('./fonts/HelveticaNeue-Roman.woff2') format('woff2'),
        url('./fonts/HelveticaNeue-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root{    
    --primary-font: 'Helvetica Neue Medium', sans-serif;
    --gray-solid: #C7D6EB;
    --gray-dark:#7B9FC4;
    --text-color:#0A2240;
    --social-media: 'Social Media Circled Regular';
    --blue-color:#004876;
    --blue-color2:#7B9FC4;
    --blue-color3:#0A2240;
    --red-color:#F1495B;

}

body{
    font-family:var(--primary-font);        
    font-size: 16px;
    line-height: 18px;    
    position: relative;
    color:var(--text-color);
}

h1{
    font-size:55px;
    line-height: 55px;
}

h2{
    font-size:46px;    
    line-height: 48px;
}

h3{  
    font-size:25px;
    line-height: 28px;
    font-weight: normal;
}

h4{
    font-size:16px;
}


header{
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background: none;
    z-index: 99;
    transition: background 1s ease-out;
}

header nav {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.menu-header{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav ul{
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer ul{
    padding: 0px;
    list-style-type: none;
    margin:0px;
}

nav ul li{
    position: relative;    
    margin:15px 20px;
    text-decoration: none;
}

footer ul li {
    position: relative;    
    margin:15px 0px;
    text-decoration: none;
}

nav ul li a, footer ul li a{    
    text-decoration: none;
    color: white;    
    font-size: 14px;
    transition: all .5s ease;
    font-family: 'Helvetica Neue Light';
}

nav ul li a.active, nav ul li a:hover, footer ul li a.active, footer ul li a:hover{    
    color:white;
    text-decoration: underline;
}

.uppercase{
    text-transform: uppercase;
}

.menu-header .dropdown .btn{
    background:none;
    color:#A6A9AB;
    display: flex;
    align-items: center;
    font-size:20px;
    font-weight: bold;
    outline: none;
}

.menu-header .dropdown .dropdown-menu{
    width:100%;
    min-width: 100%;
}

.menu-header .dropdown .dropdown-menu div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size:20px;
}

.social-media-circled{
    font-family: var(--social-media);
    font-size:25px;
    font-weight: 100;
}

.social a{
    color:var(--orange-color);
    text-decoration: none;
    opacity:1;
    transition: opacity .5s ease;
}

.social a:hover{
    opacity: .8;
}

#home{    
    background:url(./images/bg-inicio.jpg) no-repeat center center / cover;
}

#home .pleca{
    padding-top:100px;
    margin-top:-100px;
    background:rgba(0,0,0,.4);
    min-height: 90vh;
    display: flex;
    align-items: center;    
}


@media all and (max-width: 767px){
    h1{
        font-size:40px;
        line-height: 45px;
    }

    h2{
        font-size:36px;    
        line-height: 38px;
    }

    h3{  
        font-size:20px;
        line-height: 22px;
        font-weight: normal;
    }

    h4{
        font-size:16px;
    }

    div.title{
        font-size:40px;
        line-height: 45px;
    }
}