/*!
Theme Name: SESAL
Theme URI: https://marian.ro/
Author: Marian.ro
Author URI: https://marian.ro/
Description: Custom Wordpress theme for SESAL
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sesal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

SESAL is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
html, body {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #414042;
}

h5 {
    color: #f15b61;
}

#header {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 50;
}

#header .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

#header .content {
    text-align: center;
    padding-top: 25px;
}

#header .content .container {
    position: relative;
}

#header .content .slogan {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    font-size: 20px;
    color: #fff;
    margin-top: 35%;
    text-transform: uppercase;
    line-height:50px;
    width: 100%;
    font-weight:700;
}

#header .content .logo{
    text-align:center;
    width: 70px;
    height: auto;
    margin: 25px auto;
}

#header .content .logo img{
    width: 100%;
}

#header .content .logo {
    left: 0;
}

#header #header-bg {
    width: 100%;
    height: auto;
}

header .mobile-menu-icon{display:none}

.slider img{width:100%;height:100%;object-fit:cover;z-index:10}
.slider .slide{position:relative;outline:none}
.slider .slide p{position:absolute;font-size:60px;color:#fff;top: 50%;left: 50%;transform: translate(-50%, -50%);font-weight:700;text-transform:uppercase;text-align:center;line-height: 65px}

.slick-dots{bottom:50px}
.slick-dots li button::before{font-size:70px;color:#fff}
.slick-dots li.slick-active button::before{color:#fff;opacity:1}
.slick-track{height:100%}
.slick-list{height:100vh}

.menu{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    padding: 10px;
    -webkit-box-shadow: 0 5px 5px 0 rgba(204,204,204,0.5);
    -moz-box-shadow: 0 5px 5px 0 rgba(204,204,204,0.5);
    box-shadow: 0 5px 5px 0 rgba(204,204,204,0.5);
}

.menu p.info{margin-bottom:0;line-height:20px;font-size:14px;border-left: 1px solid black;padding-left:10px}
.menu p.info a{display:block;font-size:20px;font-weight:700;color:#009683;text-decoration:none}

.menu ul.list-menu{margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;width:100%;font-size:16px}
.menu ul.list-menu li a{color:#009683;text-decoration:none;text-transform:uppercase}

.menu ul.social{margin:0;padding:0;list-style:none;display:flex}
.menu ul.social a{color:#009683;font-size:12px}

#consultanta,
#proiectare,
#instalare,
#mentenanta{font-size:15px}
#consultanta p.heading,
#proiectare p.heading,
#instalare p.heading,
#mentenanta p.heading,
#contact p.heading{font-size:50px;font-weight:400;color:#009582}
#consultanta strong,
#proiectare strong,
#instalare strong,
#mentenanta strong,
#contact strong{font-weight:400;color:#009582}

section {
    padding: 80px 0;
}

section.red-border {
    border-bottom: 50px solid #f15b61;
}

section .title {
    display: block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 40px;
    color: #414042;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: .075em;
}

section#about-us #services {
    padding-top: 20px;
}

section#about-us .icon {
    text-align: center;
    margin: 20px 0;
}

section#about-us.despre-noi .icon img{
    max-width: 120px;
}

section#about-us .icon-title {
    display: block;
    padding-top: 5px;
    font-weight: bold;
}

section#activity .item {
    margin-top: 35px;
}

section#activity .item img.icon {
    margin: 0;
    width: 100%;
}

section#red-bar {
    padding: 50px 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 19px;
}

section#red-bar p {
    margin: 0;
}

section#details {
    padding: 50px 0;
}

.gallery figure{
    display:inline-block
}

footer {
    margin-top:50px;
    text-align:center;
    padding:40px 0;
    color:#fff;
    background: #009582;
}

.carousel {
    margin-top: 50px;
}

.separator {
     background-image: url("assets/images/separator.jpg");
     height: 500px;
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

#mobile-menu{display:none}

@media screen and (max-width: 340px) {
    .menu p.info a{font-size:17px}
}

@media screen and (max-width: 576px){
    .slider .slide p{font-size:40px;line-height:42px}
    #consultanta p.heading,
    #proiectare p.heading,
    #instalare p.heading,
    #mentenanta p.heading{font-size:30px}

    #proiectare img,
    #mentenanta img{display:none}
}

@media screen and (min-width: 576px) {
    #header .content .slogan {
        font-size: 30px;
    }

    #header .content .logo{
        width: 80px;
        height: 80px;
    }

    section .title {
        font-size: 50px;
    }
}

@media screen and (max-width: 991px) {
    header .menu-list,
    header .social-list{display:none!important}

    header .mobile-menu-icon{display:flex!important;text-align:right;cursor:pointer}
    header .mobile-menu-icon span{display:block;border-top:3px solid #009683;width:30px;margin:5px 0}

    .menu ul.list-menu {display: inherit;text-align: center;}
    .menu ul.list-menu li{margin:6px 0}

    header ul.social {text-align:center;display: block!important;}
    .menu ul.social li{display: inline}
}

@media screen and (min-width: 960px) {
    #header #header-bg {
        display: none;
    }

    #header .content {
        padding-top: 75px;
    }

    #header .content .logo{
        width: 150px;
        height: 150px;
    }

    #header .content .slogan {
        font-size: 50px;
    }

    #header:before {
        background-image: url("assets/images/bg_header.jpg");
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-position: center top;
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

    section .title {
        font-size: 60px;
    }
}