/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20/nov/2015, 10:37:54
    Author     : shinw_000
*/
.menu_holder{
    position:relative;
    float:right;
    height: 100%;
    margin-right: 0%;
}
.menu{
    position:fixed;
    width: 100%;
    height: 100px;
    z-index: 20;
    display:inline-block;
}
.menublack{
    position:fixed;
    width: 100%;
    height: 100px;
    z-index: 20;
    display:inline-block;
    background-color:#1c1c1c;
}
.menu_btn{
    display: none;
}

#logo{
    position:relative;
    float:left;
    height: 50px;
    background: url('/gsi/images/menu/logo_gsi_white.png');
    z-index: 20;
    background-size:cover;
    width: 200px;
    margin-left: 50px;
    top:25px;
    cursor:pointer;
}
#intro{
    position:relative;
    float:left;
    height:50px;
    width:100px;
    z-index: 20;
    text-align: center;
    top:40px;
    cursor:pointer;
    display: inline;
}
#grasshopper{
    position:relative;
    float:left;
    height:50px;
    width:100px;
    z-index: 20;
    top:40px;
    cursor:pointer;
    display: inline;
}
#artwork{
    position:relative;
    float:left;
    height:50px;
    width:100px;
    z-index: 20;
    top:40px;
    cursor:pointer;
}
#contactos{
    position:relative;
    float:left;
    height:50px;
    width:100px;
    z-index: 20;
    top:40px;
    /* margin-right: 50px; */
    cursor:pointer;
}
#epharma{
    position:relative;
    float:left;
    height:50px;
    width:100px;
    z-index: 20;
    top:40px;
    cursor:pointer;
}

.span_menu{
    position:relative;
    height:100%;
    width:100%;
    z-index: 20;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color:white;
    -webkit-font-smoothing: antialiased;
    opacity: 0.7;   
    text-align: center;
}
.span_menu:hover{
    opacity:1;
}
.span_menu_selected{
    opacity:1;
}
.returnUp{
    position: fixed;
    bottom: 30px;
    right: 70px;
    width: 40px;
    height: 40px;

    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    border: 1px solid transparent;
    cursor: pointer;

    background: url("/gsi/images/menu/circle-up.svg") no-repeat scroll 50% 50% / 24px 24px #0095ce;
    opacity: 0;
    
    z-index: 99999;
}

.returnUp:active{
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 2px 2px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 2px 2px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 2px 2px rgba(0,0,0,.28);
}
    
@media screen     
    and (max-width: 768px) {
        
    .menu{
        position:fixed;
        width: 100%;
        height: 80px;
        z-index: 25;
        display: none;        
    }
    
    .menublack{
        position:fixed;
        width: 100%;
        height: 80px;
        z-index: 20;
        background-color:#1c1c1c;
    }
    
    #logo{
        position:relative;        
        height: 50px;
        background: url('/gsi/images/menu/logo_gsi_white.png');
        z-index: 22;
        background-size:cover;
        width: 200px;
        margin: 0px 20px;
        top: 15px;
        cursor:pointer;
    }
    
    .menu_btn{
        position: relative;
        display: block;
        width: 32px;
        height: 32px;
        
        float: right;
        right: 20px;
        top: 22px;
        z-index: 25;
        background-image: url('/gsi/images/icons/menu.svg');
        background-position: center center;
        background-size: 32px 32px;
        background-repeat:no-repeat;
        cursor: pointer;
    }
    
    .menu_holder{
        position: relative;
        width: 100%;
        height: 245px;
        background-color: #1c1c1c;         
        z-index: 20;
        display: none;
        float:none;
        margin: 0px 0px;
    }
    
    #intro{
        float: left;
        position:relative;        
        height:30px;
        width:100%;
        z-index: 20;
        text-align: left;
        text-indent: 50px;        
        cursor:pointer;
        border-bottom: 1px solid #323232;
    }
    
    #grasshopper{
        float: left;
        position:relative;        
        height:30px;
        width:100%;
        z-index: 20;
        text-align: left;
        text-indent: 50px;        
        cursor:pointer;
        border-bottom: 1px solid #323232;
    }
    
    #artwork{
        float: left;
        position:relative;        
        height:30px;
        width:100%;
        z-index: 20;
        text-align: left;
        text-indent: 50px;        
        cursor:pointer;        
        border-bottom: 1px solid #323232;
    }
    #contactos{
        float: left;
        position:relative;        
        height:30px;
        width:100%;
        z-index: 20;
        text-align: left;
        text-indent: 50px;        
        cursor:pointer;       
        border-bottom: 1px solid #323232;
    }
    #epharma{
        float: left;
        position:relative;        
        height:30px;
        width:100%;
        z-index: 20;
        text-align: left;
        text-indent: 50px;        
        cursor:pointer;
        border-bottom: 1px solid #323232;
    }

    .span_menu{
        position:relative;
        height:100%;
        width:100%;
        z-index: 20;
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        color:white;
        line-height: 30px;
        -webkit-font-smoothing: antialiased;
        opacity: 0.7;   
        text-align: left;
    }
        
}