.page {
    margin: 6em auto 0;
    width: 80%;
    min-width: 980px;
    font-family: Helvetica, Arial, sans-serif;
}

a {
    color: #27B8DF;
    text-decoration: none;
}

h1 {
    font-weight: 400;
    letter-spacing: -.2px;
}

h2 {
    font-style: italic;
    font-weight: 200;
    margin-top: -.7em;
    font-family: Georgia, serif;
}

.widgets {
    position: relative;
    float: left;
    margin-top: 3em;
}

.widgets-square {
    position: relative;
    margin: 3em 0 0 0;
    float: left;
}

.widgets-no-margin {
    position: relative;
    margin: 3em 0 0 0;
    float: left;
}

.widgets-no-margin .circle {
    margin: 0;
    border-radius: 0;
    width: 160px;
    height: 160px;
}

.widgets-square .circle {
    border-radius: 0;
    margin: 0 5em 0 0;
    width: 200px;
    height: 200px;
}

.circle {
    width: 250px;
    position: relative;
    height: 250px;
    border-radius: 175px;
    background: #000;
    float: left;
    margin: 0 0 0 2em;
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    -o-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.circle img {
    -webkit-transition: opacity 1s ease-in 0s;
    -moz-transition: opacity 1s ease-in 0s;
    -o-transition: opacity 1s ease-in 0s;
    transition: opacity 1s ease-in 0s;
}

.fadeOut {
    -webkit-animation: fadeOut 1s 1 forwards;
    -moz-animation: fadeOut 1s 1 forwards;
    -o-animation: fadeOut 1s 1 forwards;
    animation: fadeOut 1s 1 forwards;
}

.showUp {
    -webkit-animation: showUp 1s 1 forwards;
    -moz-animation: showUp 1s 1 forwards;
    -o-animation: fadeOut 1s 1 forwards;
    animation: showUp 1s 1 forwards;
}