@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/***************************************************
   GERAL 
****************************************************/
body {
    /* background-color: gray; */
    background-image: url("../images/fundo1.jpg");
    background-repeat: repeat;
    font-family: 'Open Sans', sans-serif;
}

a {
    text-decoration: none;
    color: #7d7c7c;
    font-size: 14px;
}
a:hover{ color: #fff; }

.btn{ background-color: #ddd; color: #000; }
.btn:hover{ color: #fff; }

/***************************************************
   HEADER 
****************************************************/
.sidebar__trigger {
    z-index: 4;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: #323232;
}

.sidebar__trigger>i {
    display: inline-block;
    margin: 1.5em 0 0 1.5em;
    color: #ffffff;
}

.logo {
    margin: 56px 27px 55px 39px;
}

.sidebar-nav {
    position: fixed;
    top: 0;
    left: -326px;
    transition: all .3s ease-in;
    width: 326px;
    height: 100%;
    background: #323232;
    color: rgba(255, 255, 255, 0.7);
    z-index: 3;
}

.sidebar-nav:hover,
.sidebar-nav:focus,
.sidebar__trigger:focus+.sidebar-nav,
.sidebar__trigger:hover+.sidebar-nav {
    left: 0;
    color: #595656;
}

.sidebar-nav ul {
    position: absolute;
    top: 64px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 326px;
}

.sidebar-nav ul li {
    background: #292929;
    border-top: 1px solid #323232;
    border-bottom: 1px solid #323232;
}

.sidebar-nav-link {
    height: 70px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    position: relative;

}
.admin .sidebar-nav-link{ height: 45px; }
.sidebar-nav-link:hover{
   text-decoration: none;
}

.sidebar-nav-link>img {
    position: absolute;
    margin: 0;
    right: -16px;
    display: none;
}

.arrow-container {
    position: relative;
    background: red;
    display: block;
    overflow: visible;
    z-index: 100;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #ffffff;

    left: 255px;
    position: relative;
    display: inline-block;
    z-index: 1000;

}

.sidebar-nav-link span {
    padding-left: 30px;
}

.sidebar-nav ul li.active,
.sidebar-nav ul li:hover { background: #ffffff; }
.sidebar-nav ul li.active img,
.sidebar-nav ul li:hover img { display: block; }
.sidebar-nav ul li a:hover{ color: #7d7c7c; }

@media (min-width: 992px) {

    .sidebar__trigger {
        width: 64px;
        display: none;
    }

    .sidebar-nav:hover,
    .sidebar-nav:focus,
    .sidebar__trigger:hover+.sidebar-nav,
    .sidebar__trigger:focus+.sidebar-nav {
        width: 326px;
    }

    .main-content {
        margin-left: 326px;
    }

    .sidebar-nav {
        width: 326px;
        left: 0;
    }

    .sidebar-nav ul {
        top: 1.3em;
    }
}


/***************************************************
   MAIN CONTENT
****************************************************/

.main-content {
    min-height: 100vh;
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    padding-top: 79px;
}

@media (min-width: 992px) {
   .main-content { padding-top: 0px; }
}


/***************************************************
   Listagem
****************************************************/

.project-item{ position: relative; width: 100%; background: rgba(255,255,255, 0.2); padding: 3px; }
.project-item .project-image{ background-size: contain; background-repeat: no-repeat; background-position: center center; width: 100%; padding-bottom: 75%;  background-color: #fff;}
.project-item .project-info{ color: #fff; padding: 15px 5px; }


/***************************************************
   SIMULADOR
****************************************************/


/* Paleta de cores */
   .palette-holder{ position: fixed; top: 79px; left: 2vw; right: 2vw; width: auto; }
   .color-palette{ background: #fff; padding: 2vw; width: 100%; }
   .color-palette-wrapper{ position: relative; width: 100%; }
   .color-palette .colors{ position: relative; width: 96vw; }
   .color-palette .color{ width: 4vw; height: 4vw; margin: 0 1.8vw 1.9vw 0; cursor: pointer; white-space: nowrap; position: relative;}
   .color-palette .color .color-face{ display: inline-block; width: 4vw; height: 4vw; border: 2px solid #fff; background-size: cover; background-position: center center; }
   .color-palette .color .color-id{ display: inline-block;
                                    position: absolute; 
                                    width: 4vw; height: 4vw;
                                    top: 0px; left: 0px;
                                    line-height: 4vw;
                                    text-align: center;
                                    color: #fff;
                                    font-size: 12px;
                                    text-shadow: 1px 2px #000;
                                 }
   .color-palette .color.selected .color-face{ border-color: #d3f; }
   .color-palette .color .color-name{ position: relative; display: inline-block; font-size: 14px; overflow: visible; white-space: normal; }

   .color-palette .color-selected{ margin-top: 2vw; }
   .color-palette .color-focus .color,
   .color-palette .color-selected .color{ width: 100%; }
   .color-palette .color-selected .color .color-face{ margin-right: 5px; }

   @media (min-width: 992px) {
      .palette-holder{ top: 15px; right: 15px; left: auto; bottom: 15px; width: auto; }
      .color-palette{ padding: 15px; }
      .color-palette .colors{ height: 306px; width: 142px; margin-bottom: -15px; margin-right: -5px; }
      .color-palette .color{ width: 28px; height: 28px; margin: 0 0 10px 0; position: relative; }
      .color-palette .color .color-face{ width: 28px; height: 28px; }
      .color-palette .color .color-id{ width: 28px; height: 28px; line-height: 28px; }
      .color-palette .color-selected{ margin-top: 20px; }
      .color-palette .color .color-name{ max-width: 104px; font-size: 14px; }
      .color-palette .color-focus .color .color-name{ max-width: 137px; }
   }
   
   

   .simulator-editor .main-content{ justify-content: left; }
   .simulator{ background:#fff; margin: 15px; padding: 5px; }
   .simulator #editor{ width: 100%; height: 100%; cursor: pointer; }

   
/***************************************************
   LOADER
****************************************************/
.loader{ display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0,0,0,0.9); z-index: 10; cursor: progress; }
.loader img{ height: 10vh; }