﻿body {
    padding: 0px;
    margin: 0px;
    min-width:320px;
}
a {
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
#contenido {
    width:60vw;
    height:80vh;
    padding:3vh;
    text-align:center;
    background-color: #f2f2f2;
    margin-top:10vh;
    margin-left:20vw;
}
.alert{position:absolute; top:10px; width:100%;}

/* MENU INICIAL */

button, .btn {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

    button.grey, .btn.grey {
        background-color: white;
        color: black;
        border: 2px solid #e7e7e7;
    }

        button.grey:hover, .btn.grey:hover {
            background-color: #e7e7e7;
        }

    button.success, .btn.success {
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
    }

        button.success:hover, .btn.success:hover {
            background-color: #4CAF50;
            color: white;
        }

    button.primary, .btn.primary {
        background-color: white;
        color: black;
        border: 2px solid #008CBA;
    }

        button.primary:hover, .btn.primary:hover {
            background-color: #008CBA;
            color: white;
        }

    button.danger, .btn.danger {
        background-color: white;
        color: black;
        border: 2px solid #f44336;
    }

        button.danger:hover, .btn.danger:hover {
            background-color: #f44336;
            color: white;
        }

    button.black, .btn.black {
        background-color: white;
        color: black;
        border: 2px solid #555555;
    }

        button.black:hover, .btn.black:hover {
            background-color: #555555;
            color: white;
        }

@media (max-width: 800px) {
    #PC{display:none;}
    #contenido {
        width: 100vw;
        height: 100vh;
        padding:3vh;
        padding-top: 10vh;
        text-align: center;
        background-color: #ffffff;
        margin-top: 0;
        margin-left: 0;
    }
    ul.menu li{
        background: #f2f2f2;
    }
        ul.menu li:hover {
            color:#f2f2f2;
            background: #0094ff;
        }
}

.loading {
    border: 16px solid #f3f3f3; /* Light grey */
    /*border-top: 16px solid #fff656;*/ /* Blue */
    border-bottom: 16px solid #3498db; /* yellow */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin-top: calc(25% - 60px);
    margin-left: calc(50% - 60px);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 1em 0 -1em #ffffff;
    }

    40% {
        box-shadow: 0 1em 0 0 #FFF;
    }
}