@font-face {
    font-family: 'dharma_gothic_mexlight';
    src: url('/fonts/Dharma/dharmagothicm-exlight-webfont.woff2') format('woff2'),
         url('/fonts/Dharma/dharmagothicm-exlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dharma_gothic_mexlight_italic';
    src: url('/fonts/Dharma/dharmagothicm-exlightitalic-webfont.woff2') format('woff2'),
         url('/fonts/Dharma/dharmagothicm-exlightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dharma_gothic_mregular';
    src: url('/fonts/Dharma/dharmagothicm-regular-webfont.woff2') format('woff2'),
         url('/fonts/Dharma/dharmagothicm-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dharma_gothic_mregular_italic';
    src: url('/fonts/Dharma/dharmagothicm-regularitalic-webfont.woff2') format('woff2'),
         url('/fonts/Dharma/dharmagothicm-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



html{
    background-color: black;
}

h1{
    font-family: 'dharma_gothic_mregular_italic',Arial, sans-serif;
    font-size: 6rem;
    font-weight: 300;
    text-align: center;
    margin:5px;
    color:#282828;
}

h2{
    font-family: 'dharma_gothic_mregular_italic';
    letter-spacing: .03em;
    font-size:calc(4em + 3vw);
    margin:5px;
    color:white;
}

h3{
    font-family: 'Poppins';
    font-size:calc(1em + 1vw);
    font-weight: 700;
    margin:5px;
    color:#70e3d1;
}

a{
    text-decoration: none;
}

.projectsContainer{
    width:100%;
}

.project-block{
    position: relative;
    display: block;
    overflow: hidden;
    margin:12vh 0;
	padding: 0;
	border: 0;
    width: 100%;
}

.on-hover-wipe{
	transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);
    
}
.on-hover-wipe:hover {
    margin-left: -40px;
	transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);	
}

.on-hover-wipe:hover {
    margin-left: 40px;
	transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);	
}


/* Video Tile CSS */



.textWrapper{
    position: absolute;
    width:400px;
    height:225px;
    z-index:1;
    background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%)
}


.videoTileContainer{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
  }