/* Navigation banner main page wide screen view*/
    /* 1200px for clean transition from full screen to mobile*/
        @media screen and (min-width: 1200px) {
    
        div#MenuSide{
            visibility: none;
            display: none;
        }
    
        div#NavBanner2{
            visibility: none;
            display: none;
        }
        
        input#menu-x {
            display: none;
        }
        
        #NavBanner{
            margin: 0px;
            padding: 0px 0px 0px 0px;
            Top: 0px;
            Position: absolute;
            width: 100%;
            background: linear-gradient(rgba(14, 17, 17, 0.89),rgba(64, 64, 64, 0.9));
            -webkit-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.87);
            -moz-box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.87);
            box-shadow: 0px 10px 10px -4px rgba(0,0,0,0.87);	
        
        }
        
        img#BannerLogo{
            max-width: 350px;
            float: left;
            padding: 0px 0px 0px 0px;
            margin: 10px 0px 10px 70px;
            position: relative;
        }
        
        img#BannerLogo:hover{
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";  /* IE 8 */
            filter: alpha(opacity=70); /* IE 5-7 */
            -moz-opacity: 1.3;   /* Netscape */
            -khtml-opacity: 1.3;  /* Safari 1.x */
            opacity: 1.3; 
        }
             
        /* Button settings and draw-in function*/
            
        ul#Nav,ul#Nav li{
            list-style-type:none;}
        
        ul#Nav {
            margin: 0px 80px 0px 0px;
            border:0px solid rgb(188, 190, 197);       
                
        }
            
        ul#Nav a{
            float: right;
            margin: 30px 0px 0px 25px;
            font-size: 170%; 
            font-weight: bold;
            text-decoration:none;
        }
     
    }   
            /*Draw-in Function for Home nav button*/
    
            .btn-draw1 {
                position: relative;
                display: inline-block;
                color: rgb(188, 190, 197);
                border-bottom: 2px solid rgb(188, 190, 197);
                cursor: pointer;
                overflow: hidden;
                -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
                transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
 
            }   
    
            .btn-draw1:after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                height: 100%;
                width: 2px;
                background: rgb(188, 190, 197);
                -webkit-transform: translateY(102%);
                transform: translateY(102%);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.2s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
    
            .btn-draw1 > span {
                position: relative;
                display: block;
                padding: 0.5em;
                color: inherit;
            }
    
            .btn-draw1 > span:before, .btn-draw1 > span:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                background: rgb(188, 190, 197);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1 ease-in-out, -webkit-transform 0.1s ease-in-out;
            }
    
            .btn-draw1 > span:before {
                height: 2px;
                width: 100%;
                -webkit-transform: translateX(102%);
                transform: translateX(102%);
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
    
            .btn-draw1 > span:after {
                height: 100%;
                width: 2px;
                -webkit-transform: translateY(-102%);
                transform: translateY(-102%);
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
    
            .btn-draw1:hover:after,
            .btn-draw1:hover > span:before,
            .btn-draw1:hover > span:after {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
    
            .btn-draw1:hover:after {
                -webkit-transition-delay: 0s;
                transition-delay: 0s;
            }
    
            .btn-draw1:hover > span:before {
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
    
            .btn-draw1:hover > span:after {
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
    
            .btn-draw1:hover {
                color: #404040;
                -moz-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                -moz-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                background-color: rgb(188, 190, 197);
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }


        
            /*Draw-in Function for webdesign nav button*/
            .btn-draw2 {
                position: relative;
                display: inline-block;
                color: rgb(188, 190, 197);
                border-bottom: 2px solid rgb(188, 190, 197);
                cursor: pointer;
                overflow: hidden;
                -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
                transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
            }

            .btn-draw2:after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                height: 100%;
                width: 2px;
                background: rgb(188, 190, 197);
                -webkit-transform: translateY(102%);
                transform: translateY(102%);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.2s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
                
            }
    
            .btn-draw2 > span {
                position: relative;
                display: block;
                padding: 0.5em;
                color: inherit;
            }
    
            .btn-draw2 > span:before, .btn-draw2 > span:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                background: rgb(188, 190, 197);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1 ease-in-out, -webkit-transform 0.1s ease-in-out;
            }
    
            .btn-draw2 > span:before {
                height: 2px;
                width: 100%;
                -webkit-transform: translateX(102%);
                transform: translateX(102%);
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
    
            .btn-draw2 > span:after {
                height: 100%;
                width: 2px;
                -webkit-transform: translateY(-102%);
                transform: translateY(-102%);
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
    
            .btn-draw2:hover:after,
            .btn-draw2:hover > span:before,
            .btn-draw2:hover > span:after {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }
    
            .btn-draw2:hover:after {
                -webkit-transition-delay: 0s;
                transition-delay: 0s;
            }
    
            .btn-draw2:hover > span:before {
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
    
            .btn-draw2:hover > span:after {
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
    
            .btn-draw2:hover {
                color: #404040;
                -moz-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                -moz-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                background-color: rgb(188, 190, 197);
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
    


            /*Draw-in Function for Projects nav button*/
            .btn-draw3 {
                position: relative;
                display: inline-block;
                color: rgb(188, 190, 197);
                border-bottom: 2px solid rgb(188, 190, 197);
                cursor: pointer;
                overflow: hidden;
                -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
                transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
            }

            .btn-draw3:after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                height: 100%;
                width: 2px;
                background: rgb(188, 190, 197);
                -webkit-transform: translateY(102%);
                transform: translateY(102%);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.2s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }

            .btn-draw3 > span {
                position: relative;
                display: block;
                padding: 0.5em;
                color: inherit;
            }

            .btn-draw3 > span:before, .btn-draw3 > span:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                background: rgb(188, 190, 197);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1 ease-in-out, -webkit-transform 0.1s ease-in-out;
            }

            .btn-draw3 > span:before {
                height: 2px;
                width: 100%;
                -webkit-transform: translateX(102%);
                transform: translateX(102%);
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }

            .btn-draw3 > span:after {
                height: 100%;
                width: 2px;
                -webkit-transform: translateY(-102%);
                transform: translateY(-102%);
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }

            .btn-draw3:hover:after,
            .btn-draw3:hover > span:before,
            .btn-draw3:hover > span:after {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }

            .btn-draw3:hover:after {
                -webkit-transition-delay: 0s;
                transition-delay: 0s;
            }

            .btn-draw3:hover > span:before {
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }

            .btn-draw3:hover > span:after {
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }

            .btn-draw3:hover {
                color: #404040;
                -moz-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                -moz-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                background-color: rgb(188, 190, 197);
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
                    

            /*Draw-in Function for Contact nav button*/
            .btn-draw4 {
                position: relative;
                display: inline-block;
                color: rgb(188, 190, 197);
                border-bottom: 2px solid rgb(188, 190, 197);
                cursor: pointer;
                overflow: hidden;
                -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
                transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
            }
            
            .btn-draw4:after {
                content: '';
                position: absolute;
                right: 0;
                bottom: 0;
                height: 100%;
                width: 2px;
                background: rgb(188, 190, 197);
                -webkit-transform: translateY(102%);
                transform: translateY(102%);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.2s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }

            .btn-draw4 > span {
                position: relative;
                display: block;
                padding: 0.5em;
                color: inherit;
            }

            .btn-draw4 > span:before, .btn-draw4 > span:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                background: rgb(188, 190, 197);
                -webkit-transition: -webkit-transform 0.1s ease-in-out;
                transition: -webkit-transform 0.1s ease-in-out;
                transition: transform 0.1s ease-in-out;
                transition: transform 0.1 ease-in-out, -webkit-transform 0.1s ease-in-out;
            }

            .btn-draw4 > span:before {
                height: 2px;
                width: 100%;
                -webkit-transform: translateX(102%);
                transform: translateX(102%);
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }

            .btn-draw4 > span:after {
                height: 100%;
                width: 2px;
                -webkit-transform: translateY(-102%);
                transform: translateY(-102%);
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }

            .btn-draw4:hover:after,
            .btn-draw4:hover > span:before,
            .btn-draw4:hover > span:after {
                -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
            }

            .btn-draw4:hover:after {
                -webkit-transition-delay: 0s;
                transition-delay: 0s;
            }

            .btn-draw4:hover > span:before {
                -webkit-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }

            .btn-draw4:hover > span:after {
                -webkit-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }

            .btn-draw4:hover {
                color: #404040;
                -moz-border-radius: 4px;
                border-radius: 4px;
                -webkit-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                -moz-box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                box-shadow: -10px -10px -10px 10px rgba(0,0,0,0.87);
                background-color: rgb(188, 190, 197);
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }