.logo1{
    cursor:pointer;
}

h1{
    list-style-type: none;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    color:#333;
}
.desc{
    list-style-type: none;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    color:#333;
    font-size: 12px;
    text-align:center;
}
.off-screen-menu{
    background-color: #555;
    width:100%;
    max-width: 450px;
    height:100vh;
    position:fixed;
    top:0px;
    right:-450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 3rem;
    transition: 3s ease;
    
}

li{
    list-style-type: none;
    text-decoration: none; 
}

li.active{
    color:#777;
}

.off-screen-menu a{
    list-style-type: none;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Arial Narrow', Arial, sans-serif;
    color:#FFF;
}

.off-screen-menu.active{
    right:0;
}

nav{
    background-color: #999;
    display:flex;
    padding:1rem;

}

.ham-menu{
    width:50px;
    height:50px;
    margin-left:auto;
    position:relative;
    cursor:pointer;
}

.ham-menu span{
height: 5px;
width:100%;
background-color: #FFF;
border-radius: 25px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
transition: 2s ease;
}

.ham-menu span:nth-child(1){
    top:25%;
}
.ham-menu span:nth-child(3){
    top:75%;
}
.ham-menu.active span:nth-child(1){
    top:50%;
    transform:translate(-50%, -50%) rotate(45deg);
}
.ham-menu.active span:nth-child(2){
    opacity:0;
}
.ham-menu.active span:nth-child(3){
    top:50%;
    transform:translate(-50%, -50%) rotate(-45deg);
}

.icons{
    width:100%;
    height:200px;
    font-size: 50px;
    font-weight: bold;
    display:inline-block;
    text-align:center;
    margin-top:50vh;
}
.icons a{
    color:#333;
}
.icons a:hover{
    color:#999;
}
#video1{
	width:400px;
	height:300px;

}
.columns {
	columns: 5 250px;
	column-rule: 4px solid #333333;

}
.container{
    display:grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap:20px 20px;
}
.newButton{
    background-color: #333;
    color:#FFF;
    width:100px;
    height:70px;
    cursor:pointer;
}

.newButton:hover{
    background-color: #999;
    color:#FFF;

}
.w3-row{
    padding: none;
}

.w3-row-padding{
    padding: 30px 30px;
}
.w3-center{
    text-align: center;
    font-family: 'Arial Narrow', Arial, sans-serif;
    color:#333;
    font-size: 25px;
}

@media(max-width:768px){
    .container{
        width:100%;
        height:auto;
        display:block;
    }


}