html,body {
	background: #ceccc0;
	font-family: calibri;
	color:#000000;
} 

.red-quad {
	position: absolute;
	left: 5%;
	top: 10%;
	width: 320px;
	height: 220px;
	background: #68685e;

	-webkit-animation: left-slide 1s;
}
.red-quad a { 
    color: #fff;
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
   }
.red-quad .hider {
	width: 100%;
	height: 25%;
	background: #68685e;
	position: absolute;
	bottom: 0;
	left: 0;
}

.red-quad .red {
	color: #fff;
	font-size: 120px;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 1.90;
	
	background: #68685e;
	
	-webkit-text-stroke-color: #f00;
	
	-webkit-animation: text-hold 1s, text-show 0.2s 1s;
}

.red-quad .designer {
	color: #000;
	font-size: 32px;
	margin-left: -1px;
	
	-webkit-animation: top-slide-hold 1.1s, top-slide 0.2s 1.1s;
}

.functions {
	position: absolute;
	left: 350px;
	top: 0;
}

.functions .function {
	position: relative;
	margin-bottom: 2em;
}

.functions .function .mark {
	font-size: 80px;
	line-height: 0.52;
	font-weight: bold;
	text-align: center;
}

.functions .function .mark img {
	width: 80px;
	height: 80px;
}

.functions .function.n1 .mark {
	-webkit-animation: mark-hold 2s, mark-flash 0.5s 2s;
}

.functions .function.n2 .mark {
	-webkit-animation: mark-hold 4s, mark-flash 0.5s 4s;
}

.functions .function.n3 .mark {
	-webkit-animation: mark-hold 6s, mark-flash 0.5s 6s;
}

.functions .function .text{
	position: absolute;
	left: 100px;
	top: 0px;
	font-size: 28px;
	
	color: #000;
}

.functions .function .text div{
	width: 500px;
}
.functions .function .text a { color:#000; }
.functions .function .text a:hover { color:#888888; }
.functions .function .second-text{
	font-size: 20px;
	color: #777;
	width: 500px;
	-webkit-animation: function-hold 2s, function-show 2s 2s;
}

.functions .function.n1 .text, .functions .function.n1 .second-text{
	-webkit-animation: function-hold 2s, function-show 2s 2s;
}

.functions .function.n2 .text, .functions .function.n2 .second-text{
	-webkit-animation: function-hold 4s, function-show 2s 4s;
}

.functions .function.n3 .text, .functions .function.n3 .second-text{
	-webkit-animation: function-hold 6s, function-show 2s 6s;
}

@-webkit-keyframes function-hold {
    0% {opacity: 0; margin-left: 50px;}
	100% {opacity: 0; margin-left: 50px;}
}

@-webkit-keyframes function-show {
    0% {opacity: 0; margin-left: 50px;}
	100% {opacity: 1; margin-left: 0;}
}

@-webkit-keyframes text-hold {
    0% {opacity: 0}
	100% {opacity: 0}
}

@-webkit-keyframes mark-hold {
    0% {opacity: 0; margin-left: -1em;}
	100% {opacity: 0; margin-left: -1em;}
}

@-webkit-keyframes mark-flash {
    0% {opacity: 1; margin-left: -1em;}
	10% {opacity: 0;}
	20% {opacity: 1;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	70% {opacity: 0;}
    100% {opacity: 1; margin-left: 0em;}
}

@-webkit-keyframes left-slide {
    0% {margin-left: -1000px}
    100% {margin-left: 0px}
}

@-webkit-keyframes text-show {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes bottom-slide {
    0% {margin-bottom: -1em}
    100% {margin-bottom: 0}
}

@-webkit-keyframes top-slide-hold {
    0% {margin-top: -1em}
	100% {margin-top: -1em}
}

@-webkit-keyframes top-slide {
    0% {margin-top: -1em}
    100% {margin-top: 0}
}