/* Meat Boy CSS
Color
Main Meat Red       #990000
Bright Red          #bb0707
Forest BG           #cfe4c6



*/

.clear {
    clear: both;
}

body {
    background-color: #990000;
}

header {
    position: relative;
    background: rgba(153, 0, 0, 0.25);
}

header video {
    display: block;
    position: absolute;
    z-index: -5;
    overflow: hidden;
    width: 100%;
    top: -20%;
}

footer {
    background: #bb0707;
}

footer div {
    text-align: center;
}

.logo {
    margin: 50px 0 90px 0;
}

.logo h1,
.logo h2 {
    height: 0;
    text-indent: -100000px;
}

.logo img {
    max-width: 100%;
}

.face {
    margin: 20px 0;
}

.face img {
    max-width: 100%;
}

.main {
    position: relative;
    background:
        url('../img/forestbg.png') bottom center no-repeat,
        url('../img/forest.jpg') bottom center fixed;
    background-size: contain, cover;
}

.red-line {
    background: #bb0707;
    height: 12px;
}

.tile-border {
    background: url('../img/border.png') repeat-x;
    height: 120px;
}

.tile-border-low {
    background: url('../img/border.png') repeat-x 0 -120px;
    height: 120px;
}

.grid-container {
}

.link-button {
    position: relative;
    z-index: 10;
}

.spacer {
    height: 100px;
}

a {
    text-decoration: none;
    color: #990000;
}

a:hover {
    color: #f00;
}

.link-button a {
    display: block;
    position:  relative;
    background-color: #ffffff;
    border-radius: 6px;
    margin: 12px;
    padding: 6px;
}

.link-button img.screenshot {
    max-width: 100%;
}

.link-button img.over {
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    width: 70px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.link-button:hover img.over,
.link-button:hover img.over-social {
    background: #f00;
}

.link-button img.over-social {
    display: block;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    width: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.link-button span {
    display: block;
    font-size: 64px;
    text-align: center;
    font-family: "upheaval";
}

.saw-big {
    width: 500px;
    height: 500px;
}

.saw-med {
    width: 250px;
    height: 250px;
}

.saw-small {
    width: 125px;
    height: 125px;
}

.saw-left {
    right: 80%;
}

.saw-right {
    left: 80%;
}

.saw {
    position: fixed;
}

.saw img {
    max-width: 100%;
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;

	animation-duration: 7s;
	-webkit-animation-duration: 7s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		opacity: 0.9;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.95);
		opacity: 0.9;
	}
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.9;
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.9;
	}
}

@media (max-width: 1100px) {
    .link-button span {
        font-size: 32px;
    }
    .link-button img.over {
        width: 40px;
    }
    .link-button img.over-social {
        width: 40px;
    }
}

@media (max-width: 767px) {
    header video {
        display: none;
    }
    .saw {
        display: none;
    }
    .link-button a {
        border-radius: 4px;
        padding: 4px;
    }
    .link-button img.over {
        display: none;
        visibility: none;
    }
    .link-button img.over-social {
        width: 40px;
        padding: 4px;
        border-radius: 4px;
    }
    .tile-border {
        height: 60px;
    }
    .tile-border-low {
        background-position: 0 -120px;
        height: 60px;
    }
}