@import url('https://fonts.googleapis.com/css?family=Montserrat');


html,body,root{
    margin:0;padding:0;
    width:100%;
    font-family: 'Montserrat', sans-serif;
}

header{
    width:100%;
    height:100vh;
    background:url("https://wallpapercave.com/wp/wVMsPCF.jpg") no-repeat 50% 50%;
    background-size:cover;
    background-attachment : fixed;
}
.content{
    width:90%;
    margin:4em auto;
    font-size:20px;
    line-height:30px;
    text-align:justify;
}

.logo{
    position:fixed;
    float:left;
    margin:16px 36px;
    color: #fff;
    font-weight: bold;
    font-size:24px;
    height:80px;
    transition : 2s;
   line-height:80px;
}
nav{
    position: fixed;
    width:100%;
    height:100px;
}
nav ul {
    list-style-type: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    padding: 0;
    text-align: right;
    margin: 0;
    transition: 1s;
    margin-right:10px;
    width:100%;
}
nav.black ul{
    background : rgba(0,0,0,0.8);
}
nav ul li{
    display: inline-block;
    padding : 20px 0;
}

nav ul li a{
    line-height:80px;
    text-decoration:none;
    color:#fff;
    font-size:16px;
    text-transform : uppercase;
    padding:12px 30px;

}
nav ul li a:hover{
    background-color:rgba(0,0,0,.7);
}
.menu-icon{
    width:100%;
    background:#000;
    text-align:right;
    box-sizing: border-box;
    padding : 15px 24px;
    cursor:pointer;
    color:#fff;
    display:none;
}

@media(max-width:580px){

    .logo{
        position:fixed;
        top:0;
        margin-top:16px;
        line-height: 30px;

    }
    
  nav{
    max-height:0px;
  }
  
    nav ul {
        max-height: 0px;
        background : #000;
        text-align:center;
    }
    nav.black ul {
        background : rgba(0,0,0,.5);
    }
    .showing{
       max-height:20em;
    }
  
    nav ul li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 100%;
        padding:10px 0;
        text-align: center;
        width: 100%;
    

    }
  nav ul li a{
    left:0;margin:0;top:0;padding:0;
    position:relative;
    line-height:0px;
    padding:16px 36px;
  }

    
  
    
  
  
  
    .menu-icon{
        display: block;
    }

}












/* 
  *
  *
  *
  *
*/

.wrapper{
            display:none;
        }

        .st1{fill:#fff;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
        .t1{
            display:flex;
            width:100%;
            height:100vh;
            margin:0;left:0;top:0;padding:0;
            position:fixed;
           /* background-color:#000;*/
            overflow:hidden;


        }
        .wrapperON{
           height:auto;
            width:800px;
            margin : auto auto;
            transition : .3s;

        }
        path{
            transform:scale(.3);
            
            stroke : #fff;
            fill: #fff;
            stroke-dasharray: 1800;
            opacity: 1;
            animation: animate 3s cubic-bezier(0,0.23,1,.1);
            transition: .3s;


        }
        @keyframes animate{
            0%{
                opacity: 0;
                fill : none;
                stroke-dasharray: 1800;
            }
            30%{
                opacity: .07;
                fill:none;
                stroke-dasharray: 1800;

            }
            90%{
                fill:rgba(255,255,255,0);
            }
            100%{
                opacity:1;
                fill : rgba(255,255,255,1);
                stroke-dashoffset: 0;
         
           }
          }
       footer{
            height:100vh;
            width:100%;
            position:absolute;
            background-color:black;
          }
footer p{
  color:#fff;
  text-align:center;
  font-size:30px;
}