@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
         @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
         .fa-2x {
         font-size: 2em;
         }
         .version {
            position: fixed;
            color: red;
            z-index: 501;
            right: 1%;
            top: 1px;
         }
         #load_screen {
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 501;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
          }
          .load_screen_bg {
            z-index: 500;
            position: fixed;
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            background-color: black;
            color: whitesmoke;
            text-align: center;
          }
          
          @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
          }
          
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
          
          /* Add animation to "page content" */
          .animate-bottom {
            position: relative;
            -webkit-animation-name: animatebottom;
            -webkit-animation-duration: 1s;
            animation-name: animatebottom;
            animation-duration: 1s
          }
          
          @-webkit-keyframes animatebottom {
            from { bottom:-100px; opacity:0 } 
            to { bottom:0px; opacity:1 }
          }
          
          @keyframes animatebottom { 
            from{ bottom:-100px; opacity:0 } 
            to{ bottom:0; opacity:1 }
          }
         .fa {
         position: relative;
         display: table-cell;
         width: 60px;
         height: 36px;
         text-align: center;
         vertical-align: middle;
         font-size:20px;
         }
         .main-menu:hover,nav.main-menu.expanded {
         width:250px;
         overflow:visible;
         }
         .main-menu {
         background:#212121;
         border-right:1px solid black;
         position:fixed;
         top:0;
         bottom:0;
         height:100%;
         left:0;
         width:60px;
         overflow:hidden;
         -webkit-transition:width .05s linear;
         transition:width .05s linear;
         z-index:300;
         }
         .main-menu>ul {
         margin:7px 0;
         }
         .main-menu li {
         position:relative;
         display:block;
         width:250px;
         }
         .main-menu li>a {
         position:relative;
         display:table;
         border-collapse:collapse;
         border-spacing:0;
         color:#999;
         font-family: arial;
         font-size: 14px;
         text-decoration:none;
         -webkit-transition:all .1s linear;
         transition:all .1s linear;
         }
         .main-menu .nav-icon {
         position:relative;
         display:table-cell;
         width:60px;
         height:36px;
         text-align:center;
         vertical-align:middle;
         font-size:18px;
         }
         .main-menu .nav-text {
         position:relative;
         display:table-cell;
         vertical-align:middle;
         width:190px;
         font-family: 'Titillium Web', sans-serif;
         }
         .main-menu>ul.logout {
         position:absolute;
         left:0;
         bottom:0;
         }
         .no-touch .scrollable.hover {
         overflow-y:hidden;
         }
         .no-touch .scrollable.hover:hover {
         overflow-y:auto;
         overflow:visible;
         }
         a:hover,a:focus {
         text-decoration:none;
         }
         nav {
         -webkit-user-select:none;
         -moz-user-select:none;
         -ms-user-select:none;
         -o-user-select:none;
         user-select:none;
         }
         nav ul,nav li {
         outline:0;
         margin:0;
         padding:0;
         }
         .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
         color:#fff;
         background-color:#5fa2db;
         }
         .area {
         float: left;
         background: #e2e2e2;
         width: 100%;
         height: 100%;
         }
         @font-face {
         font-family: 'Titillium Web';
         font-style: normal;
         font-weight: 300;
         src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(https://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
         .home {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: rgb(14, 14, 14);
            color: whitesmoke;
            height:110%
        }
        .flightplans {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: rgb(14, 14, 14);
            color: whitesmoke;
            height:100%
        }
        .maps {
            width:100%;
            padding: 50px 0;
            text-align: center;
            background-color: rgb(14, 14, 14);
            color: whitesmoke;
            height:100%
        }
        .docs {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: rgb(14, 14, 14);
            color: whitesmoke;
            height:94%
        }
        .notes {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: rgb(14, 14, 14);
            color: whitesmoke;
            height:100%
        }
        .page {
            position: absolute;
            left: 60px;
            width: 97%;
            top: -1px;
            height:90%
        }
        .header1 {
            position: absolute;
            width:100%;
            height:160px;
            top: 1px;
            background-color: white;
            color: black;
        }
        .logo_big {
            width:170px;
            height:150px;
            top: 10px;
            right: 46%;
            position: absolute;
            z-index: 10;
        }
        body {
            overflow-x: hidden;
            font-family: Arial,Helvetica,sans-serif;
            background-color: rgb(14, 14, 14);
        }
        .home_body {
            position:absolute;
            top:260px;
            left: 170px;
            float: left;
            text-align: left;
        }
        .heading {
            position:absolute;
            left:33%;
            top:160px;
            height:90%;
            color: whitesmoke;
        }
        .flight_plans {
            position: absolute;
            width: 80%;
            height: 70%;
            right: 10%;
        }       
        .refresh_flight_plans_view {
            width: 18px;
            height: 15px;
            top: 17%;
            left: 10%;
            position: absolute; 
            z-index: 10;
            -moz-transition: transform 2s;
            -webkit-transition: transform 2s;
            transition: transform 2s;
        }
        .refresh_flight_plans_view:active {
            transform: rotate(1000deg);
            -moz-transform: rotate(1000deg);
            -webkit-transform: rotate(1000deg);
        }
        .next {
          display:inline-block;
        }
        .docs_title {
          color: orangered;
        }
        .docs_com_body{
          position: absolute;
          color: whitesmoke;
          left: 50px;
          text-align: left;
          width: 90%;
          display:inline-block;
        }
        .tooltip {
          position: relative;
          display: inline-block;
          border-bottom: 1px dotted black;
        }
        
        .tooltip .tooltiptext {
          visibility: hidden;
          width: 120px;
          background-color: #555;
          color: #fff;
          text-align: center;
          border-radius: 6px;
          padding: 5px 0;
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: 50%;
          margin-left: -60px;
          opacity: 0;
          transition: opacity 0.3s;
        }
        
        .tooltip .tooltiptext::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: #555 transparent transparent transparent;
        }
        
        .tooltip:hover .tooltiptext {
          visibility: visible;
          opacity: 1;
        }
        ul {
            list-style: none; /* Remove default bullets */
          }
          
          ul li::before {
            content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
            color: whitesmoke; /* Change the color */
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */
            width: 1em; /* Also needed for space (tweak if needed) */
            margin-left: -1em; /* Also needed for space (tweak if needed) */
          }
          .tiles {
            position: absolute;
            width: 150%;
            height: 200%;
          }
        
          .tile {
            position: relative;
            width: 80%;
            height: 70%;
            overflow: hidden;
          }
        
          .photo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            transition: transform .5s ease-out;
          }
        
          .txt {
            position: absolute;
            z-index: 2;
            right: 0;
            bottom: 10%;
            left: 0;
            font-family: 'Roboto Slab', serif;
            font-size: 9px;
            line-height: 12px;
            text-align: center;
            cursor: default;
          }
        
          .x {
            font-size: 32px;
            line-height: 32px;
          }
          .wrapper_spacer_1 {
            opacity: 0.0;
            position: absolute;
            height: 100%;
            width:100%;
            background-color: black;
          }
          button{
            padding: 0.8em 0em;
            width:350px;
            background: #ff6e00;
            border-radius:15px;
            border:0;
            color:#fff;
            font-size:1.2em;
            font-family: Arial,Helvetica,sans-serif;
            font-weight:bold;
            cursor:pointer;
            margin:1em 2em;
            text-transform:uppercase;
            }
        .light{
            background: -moz-linear-gradient(-45deg,  #ff6e00 0%, #ff6e00 40%, #ffffff 50%, #ff6e00 60%, #ff6e00 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff6e00), color-stop(40%,#ff6e00), color-stop(50%,#ffffff), color-stop(60%,#ff6e00), color-stop(100%,#ff6e00));
            background: -webkit-linear-gradient(-45deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
            background: -o-linear-gradient(-45deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
            background: -ms-linear-gradient(-45deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
            background: linear-gradient(135deg,  #ff6e00 0%,#ff6e00 40%,#ffffff 50%,#ff6e00 60%,#ff6e00 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6e00', endColorstr='#ff6e00',GradientType=1 );
            background-repeat: no-repeat;  
            background-position:0px;
            background-size:300%; 
            }
            
        .light:hover{
            animation:light 1s;
                -webkit-animation:light 1s;
            
            }
            
        @keyframes light {
            0% {
                    background-position:-600px; 
            }
            100% { 
                    background-position:0px; 
            }
            }
                    
        @-webkit-keyframes light {
            0% {
                    background-position:-600px; 
            }
            100% { 
                    background-position:0px; 
            }
            }