/*
* FULLVIGATOR
* Sebastian Alsina
* Copyright (c) 2015, Sebastian Alsina.  All rights reserved.
*/


/* FULLVIGATOR OVERLAY AND GENERAL STYLES */

.fullvigator {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 900;
    top: 0;
    left: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
    font-family: sans-serif;
}

.fullvigator > * {
    transition: all 0.3s ease;
}


/* FULLVIGATOR MENU BUTTON STLYE */

.fullvigatorBtn,
.fullvigatorBtn div {
    width: 80px;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.fullvigatorBtn {
    background-color: rgba(0, 0, 0, 0.5);
}

.fullvigatorBtn div {
    background-image: url(menubars.svg);
    background-size: 70%;
    background-position: center center;
    background-repeat: no-repeat;
}

.fullvigatorBtn.active {
    opacity: 0.2;
}

.fullvigatorBtn div.active {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}


/* NAVGATIONAL BUTTONS STYLE */

.fullvigator a {
    height: 20%;
    display: table;
    background-color: black;
    color: white;
    text-decoration: none;
    font-weight: 300;
    vertical-align: center;
    text-align: left !important;
    font-weight: 900;
}


/* TEXT OF NAVGATIONAL BUTTONS STYLE */

.fullvigator p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 2em;
}


/* FULLVIGATOR PER-BTN STYLES */

.fullvigator a.a,
.fullvigator a.b,
.fullvigator a.c,
.fullvigator a.d,
.fullvigator a.e {
    min-width: 250px;
}

.fullvigator a.a {
    width: 50%;
    background-color: #cccccc;
}

.fullvigator a.b {
    width: 60%;
    background-color: #a7a7a7;
}

.fullvigator a.c {
    width: 70%;
    background-color: #888888;
}

.fullvigator a.d {
    width: 80%;
    background-color: #6a6a6a;
}

.fullvigator a.e {
    width: 95%;
    background-color: #505050;
}

.fullvigator a.a:hover {
    width: 65%;
    background-color: #eabcff;
}

.fullvigator a.b:hover {
    width: 75%;
    background-color: #dd93ff;
}

.fullvigator a.c:hover {
    width: 85%;
    background-color: #d372ff;
}

.fullvigator a.d:hover {
    width: 95%;
    background-color: #c648ff;
}

.fullvigator a.e:hover {
    width: 100%;
    background-color: #b212fc;
}

@media only screen and (min-device-width: 320px) and (max-width: 414px) {
    .fullvigator a.a,
    .fullvigator a.b,
    .fullvigator a.c,
    .fullvigator a.d,
    .fullvigator a.e {
        min-width: 100%;
    }
}

@media only screen and (min-device-width: 320px) and (max-width: 768px) {
    .fullvigatorBtn,
    .fullvigatorBtn div {
        width: 50px;
        height: 50px;
    }
}