@-webkit-keyframes dropIn {
                0% { top: -50px;}
                90% { top: 20px;}
                100% { top: 10px;}
            }

            @keyframes dropIn {
                    0% { top: -60px;}
                    90% { top: 20px;}
                    100% { top: 10px;}
            }
            @-webkit-keyframes dropIn {
                0% { top: -50px;}
                90% { top: 20px;}
                100% { top: 10px;}
            }

            @keyframes dropIn {
                    0% { top: -60px;}
                    90% { top: 20px;}
                    100% { top: 10px;}
            }
            @-webkit-keyframes fromRight {
                0% { opacity: 0; -webkit-transform: translateX(100%);}
                30% { opacity: 0; -webkit-transform: translateX(100%);}
                90% { opacity: 0.9; -webkit-transform: translateX(-3%);}
                100% { opacity: 1; -webkit-transform: translateX(0);}
            }

            @keyframes fromRight {
                    0% { opacity: 0; transform: translateX(100%);}
                    30% { opacity: 0; transform: translateX(100%);}
                    90% { opacity: 0.9; transform: translateX(-3%);}
                    100% { opacity: 1; transform: translateX(0);}
            }
            @-webkit-keyframes fromLeft {
                0% { opacity: 0; -webkit-transform: translateX(-100%);}
                30% { opacity: 0; -webkit-transform: translateX(-100%);}
                90% { opacity: 0.9; -webkit-transform: translateX(3%);}
                100% { opacity: 1; -webkit-transform: translateX(0);}
            }

            @keyframes fromLeft {
                    0% { opacity: 0; transform: translateX(-100%);}
                    30% { opacity: 0; transform: translateX(-100%);}
                    90% { opacity: 0.9; transform: translateX(3%);}
                    100% { opacity: 1; transform: translateX(0);}
            }
            .diag-div{
                margin-top: 50px;
                transform: skewY(3deg);
                width: 100%;
                background: #00ACE9;
                background: -webkit-linear-gradient(left top, #00ACE9, #6A9A1F); 
                background: -o-linear-gradient(bottom right, #00ACE9, #6A9A1F); 
                background: -moz-linear-gradient(bottom right, #00ACE9, #6A9A1F); 
                background: linear-gradient(to bottom right, #00ACE9, #6A9A1F);
                color: white;
                padding: 10%;
                margin-bottom: 2%;
            }
            .diag-content{
                transform: skewY(-3deg);
            }
            @media screen and (min-width: 1500px) {
                .diag-div{
                    margin-top: 50px;
                    transform: skewY(3deg);
                    width: 100%;
                    background: #00ACE9;
                    background: -webkit-linear-gradient(left top, #00ACE9, #6A9A1F); 
                    background: -o-linear-gradient(bottom right, #00ACE9, #6A9A1F); 
                    background: -moz-linear-gradient(bottom right, #00ACE9, #6A9A1F); 
                    background: linear-gradient(to bottom right, #00ACE9, #6A9A1F);
                    color: white;
                    padding: 5%;
                }
            }
            .display-card{
                display:inline-flex;
                align-items: center;
                justify-content: center;
                transition: all 0.5s ease;
                color: #6e6e6e;
                background: #e9e9e9;
                border-radius: 5px;
                padding: 20px;
                width: 100%;
                box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
                margin-top: 15px;
                text-align: center;
                margin-bottom: 2%;
                min-height: 200px;
            }
            .display-card:hover{
                border: none;
                color: white;
                background: #6A9A1F;
                box-shadow: 0 15px 25px rgba(0,0,0,0.16), 0 15px 25px rgba(0,0,0,0.23);
            }
            .outline{
               border: 4px solid white;
                padding: 5px;
                color: white;
                
            }
            .outline-gray{
               border: 4px solid #6f6f6f;
                padding: 5px;
                color: #6f6f6f;
                
            }
            .outline-blue{
               border: 4px solid #00ACE9;
                padding: 5px;
                color: #00ACE9;
                
            }
            .margin-top-10{
                margin-top: 10%;
            }
            h1{
                margin:0;
            }
            a:hover{
                text-decoration: none;
            }
            a:focus{
                text-decoration: none;
            }
            .container-fluid{
                padding:0;
            }
            html {
                position: relative;
                min-height: 100%;
            }
            body{
                margin-bottom:240px;
            }
            .footer{
                background: white;
                padding: 15px;
                border: none;
                border-radius: none;
                text-align: center;
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 200px;
                color: #7e7e7e;
            }
            .menu{
                position: fixed;
                top: 10px;
                right: 3%;
                transition: all 0.5s ease;
                -moz-transition: all 0.5s ease;
                -webkit-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
                background: #D43F3F;
                z-index: 999;
                color: white;
                max-width: 75%;
                max-height: 75%;
            }
            .drop-in{
                -webkit-animation: dropIn 0.65s ease-in;
                animation: dropIn 0.5s ease-in;
            }
            .from-right{
                -webkit-animation: fromRight 0.65s ease-in;
                animation: fromRight 1s ease-in;
            }
            .from-left{
                -webkit-animation: fromLeft 0.65s ease-in;
                animation: fromLeft 1s ease-in;
            }
            .menu-glyph{
                transition: all 0.25s ease-out;
                -moz-transition: all 0.25s ease-out;
                -webkit-transition: all 0.25s ease-out;
                -o-transition: all 0.25s ease-out;
            }
            .menu-glyph:hover{
                color: #00ACE9;
            }
            .menu-fixed-closed{
                min-width: 50px;
                min-height: 50px;
                border-radius: 25px;
                display: inline-flex;
                align-items: center;
                padding: 0;
                justify-content: center;
                font-size: 25px;
            }
            .menu-fixed-open{
                min-width: 300px;
                min-height: 240px;
                border-radius: 5px;
                border-top-right-radius: 25px;
                display: block;
                padding: 15px;
                font-size: 25px;
            }
            .hidden{
                display: none;
            }
            nav.menu ul{
                list-style-type: none;
                padding: 5;
                margin:0;
            }
            nav.menu a{
                transition: all 0.25s ease;
                -moz-transition: all 0.25s ease;
                -webkit-transition: all 0.25s ease;
                -o-transition: all 0.25s ease;                
                color: white;
                text-decoration: none;
            }
            nav.menu a:hover{
                text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
            }
.button{
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    padding: 15px;
    background: #D43F3F;
    box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    color: white;
    text-align: center;
    border-radius: 3px;
}
.button:hover{
    background: #00ACE9;
    box-shadow: 0 15px 25px rgba(0,0,0,0.16), 0 15px 25px rgba(0,0,0,0.23);
}
form{
    display:block;
    transition: all 0.5s ease;
    color: #6e6e6e;
    background: #e9e9e9;
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    margin-top: 15px;
    text-align: center;
    margin-bottom: 2%;
}
.divider-line{
    border-bottom: 3px solid #7e7e7e;
    margin: 20px;
}