/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Fullscreen Section */
item-video {
/* width: 100%;
100% height
height: 100vh;
color: white;
background: #2980b9; */
text-align: center;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
-webkit-display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
}

item-video h1 {
font-size: 40px;
font-family: 'Roboto';
font-weight: 700;
max-width: 700px;
margin-bottom: 10px;
}

item-video p {
font-family: 'Roboto Slab';
font-weight: 400;
font-size: 20px;
max-width: 700px;
margin-bottom: 20px;
opacity: .65;
}

.play {
width: 40px;
height: 40px;
background-color: rgba(0,0,0,0.5);
display: block;
margin: 0 auto;
/* Important for :after */
position: relative;
/* Makes a circle */
border-radius: 50%;
}

.play:hover {
background: #333;
cursor: pointer;
}

.play:after {
position: absolute;
content: "";
/* Centering */
top: 50%;
margin-top: -10px;
left: 50%;
margin-left:  -5px;
/* CSS Triangle */
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 14px;
border-color: transparent transparent transparent #ffffff;
}

/* Fullscreen Overlay */
.overlay {
width: 100%;
height: 100vh;
/* 50% opacity black */
background: rgba(0,0,0,.5);
/* Stays locked on scroll */
position: fixed;
/* On top of the rest*/
z-index: 2;
/* Hidden */
opacity: 0;
/* No interference */
left: -100%;
/* CSS3 Transition */
transition: opacity .5s;
-webkit-transition: opacity .5s;
}

/* 90% width container */
.video-container {
width: 80%;
/* Centering */
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.close {
z-index: 9999999999;
width: 20px;
fill: white;
position: absolute;
left: 0;
/* Bring above video */
top: 10px;
margin-left: 10px;
}

.close:hover {
/* 50% opacity white */
fill: rgba(255,255,255,0.5);
cursor: pointer;
}

/* Class to fade in overlay */
.show {
opacity: 1;
}