body {

font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
height: 100vh;
background-color: #202521;

}

.section {

background-color: #F29F01;
padding: 40px 24px;

}

.img-box {

background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
border: 4px solid #364039;
border-radius: 2px;
height: 120px;
width: 120px;

}

.img-box .icon {

position: absolute;
top: 3px;
right: 3px;
cursor: pointer;

}

.img-box .extension {

line-height: 1;
position: absolute;
bottom: 3px;
right: 3px;
font-size: 11px;

}

.img-box .icon .fa {

color: #364039;

}

.img-box img {

max-height: 100%;
vertical-align: middle;

}

.img-box img.full-dimenssion {

width: 100%;

}

.hero.is-small .hero-body {

padding: 10px 1.5rem;

}

.hero.is-small .title{

font-size: 18px;
font-weight: normal;
word-break: break-all;

}

.hero.is-medium .hero-body {

padding: 20px 0px;

}

.is-morion .title, .is-morion .subtitle{

color: #fff;

}

.is-morion {

background-color: #364039;

}

.is-morion.strong {

background-color: #202521;

}

.is-morion a, .is-morion p {

color: white;

}

.header.is-morion {

padding: 16px 24px;
margin: 0;

}

.brand {

height: 64px;

}

.copied {

animation: copied 0.6s ease;

}

i.white {

animation: copied-icon 0.6s ease;

}

.no-padding {

padding: 0;

}

.columns.is-vcentered {

align-items: center;

}

.columns {

display: flex;
flex-wrap: wrap;
margin: -16px;

}

.columns.is-space-between {

justify-content: space-between;

}

.column {

padding: 16px;

}

@keyframes copied {

0%   {background-color: white;}
50%  {background-color: #364039; color: white;}
100% {background-color: white;}

}

@keyframes copied-icon {

50%  {color: white;}

}