h1{
color:#01153B;
font-size:26px;
font-style:normal;
font-weight:normal;
font-stretch:normal;
line-height:1.4em;
font-family:'Play', sans-serif;
}
h2{
vertical-align:middle;
text-align:center;
font-family:Play;
font-size:16px;
color:white;
}
p{
color:#01153B;
font-size:15px;
font-style:normal;
font-weight:normal;
font-stretch:normal;
line-height:1.4em;
font-family:'Play', sans-serif;
}
hr{
border:0;
height:0;
border-top:1px solid rgba(0, 0, 0, 0.1);
border-bottom:1px solid rgba(255, 255, 255, 0.3);
}
.content {
width:100%;
height:900px;
margin: auto;
display: block;
}
@keyframes animatedgradient {
0% {
background-position:0% 50%;
}
50% {
background-position:100% 50%;
}
100% {
background-position:0% 50%;
}
}
#box {
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
color:white;
position:relative;
overflow:hidden;
margin:auto;
border-radius:15px;
font-family:'Raleway';
font-size:2.5rem;
}
.gradient-border {
--borderWidth:3px;
//background: #1D1F20;
position:relative;
border-radius:15px;
border-radius:var(--borderWidth);
}
.gradient-border:after {
content:'';
position:absolute;
top:calc(-1 * var(--borderWidth));
left:calc(-1 * var(--borderWidth));
height:calc(100% + var(--borderWidth) * 2);
width:calc(100% + var(--borderWidth) * 2);
background:linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
border-radius:calc(2 * var(--borderWidth));
z-index:-1;
animation:animatedgradient 3s ease alternate infinite;
background-size:300% 300%;
}
.mask {
margin:auto;
overflow:hidden;
border-radius:15px;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.view img {
margin:auto;
width:100%;
height:100%;
display:block;
padding:2px;
border-radius:15px;
}
.view h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
font-size:17px;
font-family:Raleway, serif;
padding:10px;
margin:20px 0 0 0;
}
.view p {
font-family:Merriweather, serif;
font-style:italic;
font-size:14px; 
color:#fff;
padding:0px 20px 0px;
text-align:center;
}
.view-tenth img {
padding:2px;
border-radius:15px;
transform:scaleY(1);
transition:all .7s ease-in-out;
}
.view-tenth .mask {
border-radius:15px;
margin:auto;
background-color:rgba(255, 231, 179, 0.3);
transition:all 0.5s linear;
opacity:0;
}
.view-tenth h2 {
background:transparent;
margin:20px 40px 0px 40px;
transform:scale(0);
color:#333;
transition:all 0.5s linear;
opacity:0;
}
.view-tenth p {
margin:auto;
color:#333;
opacity:0;
transform:scale(0);
transition:all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform:scale(10);
transform:scale(10);
opacity:0;
}
.view-tenth:hover .mask {
transform:scale(1);
opacity:1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info {
transform:scale(1);
opacity:1;
}