@font-face {
  font-family: 'ArvilSans';
  src: url('../fonts/ArvilSans.eot?#iefix') format('embedded-opentype'),  url('../fonts/ArvilSans.woff') format('woff'), url('../fonts/ArvilSans.ttf')  format('truetype'), url('../fonts/ArvilSans.svg#ArvilSans') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FuturaBook';
  src: url('../fonts/FuturaStd-Book.eot?#iefix') format('embedded-opentype'),  url('../fonts/FuturaStd-Book.woff') format('woff'), url('../fonts/FuturaStd-Book.ttf')  format('truetype'), url('../fonts/FuturaStd-Book.svg#FuturaStd-Book') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'FuturaBold';
  src: url('../fonts/FuturaStd-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/FuturaStd-Bold.otf')  format('opentype'),
	     url('../fonts/FuturaStd-Bold.woff') format('woff'), url('../fonts/FuturaStd-Bold.ttf')  format('truetype'), url('../fonts/FuturaStd-Bold.svg#FuturaStd-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}



.color-bar{
	width: 100%;
	height: 4px;
	background: url(../img/color-bar.jpg);
	background-size: 100%;
	top:-5px;
	-webkit-transition: all 0.5s 1s;
	-moz-transition: all 0.5s 1s;
	-ms-transition: all 0.5s 1s;
	-o-transition: all 0.5s 1s;
	transition: all 0.5s 1s;
	position: fixed;
	z-index: 10;
	opacity: 0;
}

.color-bar-2{
	width: 100%;
	height: 4px;
	background: url(../img/color-bar.jpg);
	background-size: 100%;
}

.color-bar.active{
	top: 0;
	opacity: 1;
}

header{
	padding: 1em 0;
	width: 100%;
	background: #fff;
	position: fixed;
	z-index: 10;
	top:-100px;
	-webkit-transition:all 0.5s 1s;
	-moz-transition:all 0.5s 1s;
	-ms-transition:all 0.5s 1s;
	-o-transition:all 0.5s 1s;
	transition:all 0.5s 1s;
	opacity: 0;
}

header.active{
	top:4px;
	opacity: 1;
}

header h1{
	text-indent: -9999px;
	font-size:1px;
	margin:0;
}

header h1 a{
	background: url(../img/logo-unidad-para-las-victimas.jpg);
	display: block;
	width: 386px;
	height: 75px;
}

nav{
	float: right;
	margin-top: 2em;
}

nav ul{
	margin:0; 
}

nav ul li{
	list-style: none;
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.750em;
	margin: 0 0.6em;
}

nav ul li a{
	color: #444;
	letter-spacing: 0.05em;
	font-family: 'FuturaBook', sans-serif;
}

#home{
	background: url(../img/red-pat.jpg);
	margin: 0 1.5em;
	padding: 4em 0;
	margin-top: 7em;
	-webkit-transform: translate(0px, -60em);
	-moz-transform: translate(0px, -60em);
	-ms-transform: translate(0px, -60em);
	-o-transform: translate(0px, -60em);
	transform: translate(0px, -60em);

	-webkit-transition:all 0.6s 0.3s;
	-moz-transition:all 0.6s 0.3s;
	-ms-transition:all 0.6s 0.3s;
	-o-transition:all 0.6s 0.3s;
	transition:all 0.6s 0.3s;


}

#home.active{
	margin-top: 7em;
	-webkit-transform: translate(0px, 0em);
	-moz-transform: translate(0px, 0em);
	-ms-transform: translate(0px, 0em);
	-o-transform: translate(0px, 0em);
	transform: translate(0px, 0em);
}

#home .date{
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 0;
	font-family: 'FuturaBook', sans-serif;
}

#home .date:after, #home .date:before{
	position: absolute;
	top: 40%;
	width: 4px;
	height: 4px;
	background:#fff;
	content: "";
	border-radius: 100%;
}

#home .date:after{
	right: -10px;
}

#home .date:before{
	left: -10px;
}

#home h2{
	color: #fff;
	text-shadow:4px 4px 0px rgba(0, 0, 0, 0.25);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 90%;
	margin-top: 0.3em;
}

#home .ilustration-wrapper{
	min-height: 390px;
	padding: 1em 0;
}

#home .ilustration{
	position: absolute;
}

#home .i-1{
	background: url(../img/main-ilu-1.png) no-repeat;
	width: 232px;
	height: 206px;
	left: -13px;
	top: 50px;
}

.relative{
	position: relative;
}

#home .i-2{
	background: url(../img/main-ilu-2.png) no-repeat;
	width: 554px;
	height: 362px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

#home .i-3{
	background: url(../img/main-ilu-3.png) no-repeat;
	width: 163px;
	height: 203px;
	right: -30px;
}

#home h6{
	color: #fff;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.25);
	opacity: 0;
	-webkit-transform:translate(0px, 10px);
	-moz-transform:translate(0px, 10px);
	-ms-transform:translate(0px, 10px);
	-o-transform:translate(0px, 10px);
	transform:translate(0px, 10px);

	-webkit-transition:all 0.5s 2.8s;
	-moz-transition:all 0.5s 2.8s;
	-ms-transition:all 0.5s 2.8s;
	-o-transition:all 0.5s 2.8s;
	transition:all 0.5s 2.8s;
}

#home.active h6{
	opacity: 1;
	-webkit-transform:translate(0px, 0px);
	-moz-transform:translate(0px, 0px);
	-ms-transform:translate(0px, 0px);
	-o-transform:translate(0px, 0px);
	transform:translate(0px, 0px);
}

#home p{
	color: #fff;
	position: relative;
	display: inline-block;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.25);
}

#home p.post{
	-webkit-transform:translate(0px, 10px);
	-moz-transform:translate(0px, 10px);
	-ms-transform:translate(0px, 10px);
	-o-transform:translate(0px, 10px);
	transform:translate(0px, 10px);

	opacity: 0;

	-web-moz-kit-transition:all 0.5s 3s;
	tran-ms-sition:all 0.5s 3s;
	tran-o-sition:all 0.5s 3s;
	transition:all 0.5s 3s;
	transition:all 0.5s 3s;
}

#home.active p.post{
	opacity: 1;
	-webkit-transform:translate(0px, 0px);
	-moz-transform:translate(0px, 0px);
	-ms-transform:translate(0px, 0px);
	-o-transform:translate(0px, 0px);
	transform:translate(0px, 0px);
}

#home h2, #home .date{
	opacity: 0;
	-webkit-transform:translate(0px, -10px);
	-moz-transform:translate(0px, -10px);
	-ms-transform:translate(0px, -10px);
	-o-transform:translate(0px, -10px);
	transform:translate(0px, -10px);
}

#home.active h2{
	opacity: 1; 
	-webkit-transform:translate(0px, 10px);
	-moz-transform:translate(0px, 10px);
	-ms-transform:translate(0px, 10px);
	-o-transform:translate(0px, 10px);
	transform:translate(0px, 10px);

	-webkit-transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;
	-moz-transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;
	-ms-transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;
	-o-transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;
	transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;

}

#home.active .date{
	opacity: 1; 
	-webkit-transform:translate(0px, 10px);
	-moz-transform:translate(0px, 10px);
	-ms-transform:translate(0px, 10px);
	-o-transform:translate(0px, 10px);
	transform:translate(0px, 10px);

	-webkit-transition: opacity 0.5s 1.9s, transform 0.5s 1.9s;
	-moz-transition: opacity 0.5s 1.9s, transform 0.5s 1.9s;
	-ms-transition: opacity 0.5s 1.9s, transform 0.5s 1.9s;
	-o-transition: opacity 0.5s 1.9s, transform 0.5s 1.9s;
	transition: opacity 0.5s 1.9s, transform 0.5s 1.9s;
}

#home .ilustration{
	opacity: 0;
	
}

#home .i-1{
	transform:translate(10px, 0px);
}	

#home .i-3{
	transform:translate(0px, 10px);
}

#home .i-3{
	transform:translate(-10px, 0px);
}	

#home.active .ilustration{
	opacity: 1;
}

#home.active .ilustration.i-1, #home.active .ilustration.i-3{
	
	-webkit-animation-name:bounce;
	-webkit-animation-duration:1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: both;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name:bounce;
	-moz-animation-duration:1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-fill-mode: both;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction: alternate;

	-o-animation-name:bounce;
	-o-animation-duration:1s;
	-o-animation-timing-function: ease-out;
	-o-animation-fill-mode: both;
	-o-animation-iteration-count:infinite;
	-o-animation-direction: alternate;

	animation-name:bounce;
	animation-duration:1s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
	animation-iteration-count:infinite;
	animation-direction: alternate;
}

#home .go-scroll:after{
	position: absolute;
	content: "";
	width: 15px;
	height: 37px;
	background: url(../img/arrow-down.png) no-repeat;
	background-position: center;
	left: 0;
	right: 0;
	margin: auto;
	top:10px;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	transform:rotate(-90deg);



	-webkit-transition:all 0.4s 3.6s;
	-moz-transition:all 0.4s 3.6s;
	-ms-transition:all 0.4s 3.6s;
	-o-transition:all 0.4s 3.6s;
	transition:all 0.4s 3.6s;
}

#home.active .go-scroll:after{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
}

@-webkit-keyframes bounce{
	0%   { 
		transform:translate(0px, 0px); }
  	100% { 
  		transform:translate(0px, 6px); 
  	}
}

@-moz-keyframes bounce{
	0%   { 
		transform:translate(0px, 0px); }
  	100% { 
  		transform:translate(0px, 6px); 
  	}
}

@-o-keyframes bounce{
	0%   { 
		transform:translate(0px, 0px); }
  	100% { 
  		transform:translate(0px, 6px); 
  	}
}

@keyframes bounce{
	0%   { 
		transform:translate(0px, 0px); }
  	100% { 
  		transform:translate(0px, 6px); 
  	}
}

#home.active .i-1{
	-webkit-transform:translate(-10px, 0px);
	-moz-transform:translate(-10px, 0px);
	-ms-transform:translate(-10px, 0px);
	-o-transform:translate(-10px, 0px);
	transform:translate(-10px, 0px);


	-webkit-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	-moz-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	-ms-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	-o-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
}

#home.active .i-2{
	-webkit-transform:translate(0px, -10px);
	-moz-transform:translate(0px, -10px);
	-ms-transform:translate(0px, -10px);
	-o-transform:translate(0px, -10px);
	transform:translate(0px, -10px);


	-webkit-transition: opacity 0.5s 2s, transform 0.5s 2s;
	-moz-transition: opacity 0.5s 2s, transform 0.5s 2s;
	-ms-transition: opacity 0.5s 2s, transform 0.5s 2s;
	-o-transition: opacity 0.5s 2s, transform 0.5s 2s;
	transition: opacity 0.5s 2s, transform 0.5s 2s;
	
}

#home.active .i-3{
	-webkit-transform:translate(10px, 0px);
	-moz-transform:translate(10px, 0px);
	-ms-transform:translate(10px, 0px);
	-o-transform:translate(10px, 0px);
	transform:translate(10px, 0px);

	-webkit-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	-moz-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	-ms-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	-o-transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
	transition: opacity 0.5s 2.2s, transform 0.5s 2.2s;
}

.go-scroll{
	width: 65px;
	height: 65px;
	background: #fff;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: -35px;
	border-radius: 100%;
	opacity: 0;
	-webkit-transform:translate(0px, 10px);
	-moz-transform:translate(0px, 10px);
	-ms-transform:translate(0px, 10px);
	-o-transform:translate(0px, 10px);
	transform:translate(0px, 10px);

	-webkit-transition:all 0.3s 3.3s;
	-moz-transition:all 0.3s 3.3s;
	-ms-transition:all 0.3s 3.3s;
	-o-transition:all 0.3s 3.3s;
	transition:all 0.3s 3.3s;
}

#home.active .go-scroll{
	opacity: 1;
	-webkit-transform:translate(0px, 0px);
	-moz-transform:translate(0px, 0px);
	-ms-transform:translate(0px, 0px);
	-o-transform:translate(0px, 0px);
	transform:translate(0px, 0px);
}

section{
	padding: 6em 0;
	position: relative;
}

section h3{
	letter-spacing: 0.08em; 
	text-shadow:3px 3px 0px #efb6b0;
	position: relative;
}

.link-text{
	text-decoration: underline;
}

.intro-wrap{
	margin-bottom: 2em;
}

#reto .first:first-letter{
	position: absolute;
    line-height: 100%;
	color: #dd5c4f;
	font-size: 5.188em;
	float: left;
	line-height: 0;
	padding: 0.15em;
	padding-left: 0;
	font-family: 'ArvilSans', sans-serif;
	padding-top: 0.48em;
}

#reto h3{
	margin-bottom: 0.5em;
}

#reto h3:after{
	width: 156px;
	height: 23px;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -8px;
	content: "";
	position: absolute;
	background: url(../img/underline.png);
}

strong{
	font-family: 'FuturaBold', sans-serif;
}

strong.special{
	color: #dd5c4f;
}

#participar{
	background:#fbf8f4;
	margin: 0 1.5em;
	padding-top: 10em;
}

#participar img{
	-webkit-animation-name:bounce;
	-webkit-animation-duration:1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: both;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction: alternate;

	-moz-animation-name:bounce;
	-moz-animation-duration:1s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-fill-mode: both;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction: alternate;

	-o-animation-name:bounce;
	-o-animation-duration:1s;
	-o-animation-timing-function: ease-out;
	-o-animation-fill-mode: both;
	-o-animation-iteration-count:infinite;
	-o-animation-direction: alternate;

	animation-name:bounce;
	animation-duration:1s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
	animation-iteration-count:infinite;
	animation-direction: alternate;	
}

#participar .text-center .large-4:nth-child(1) img{
	-webkit-animation-delay:0.3s;
	-moz-animation-delay:0.3s;
	-ms-animation-delay:0.3s;
	-o-animation-delay:0.3s;
	animation-delay:0.3s;
}

#participar .text-center .large-4:nth-child(2) img{
	-webkit-animation-delay:0.75s;
	-moz-animation-delay:0.75s;
	-ms-animation-delay:0.75s;
	-o-animation-delay:0.75s;
	animation-delay:0.75s;
}



#participar h3:after{
	width: 66px;
	height: 66px;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -60px;
	content: "";
	position: absolute;
	background: url(../img/bulb.png);
}

#participar h4{
	color: #dd5c4f;
	line-height: 90%;
	margin-top: 0;
}

#participar h5{
	color: #dd5c4f;
	margin-top: 0;
	line-height: 100%;
}

#participar .dark{
	margin: 2em auto;
	background: #f8f2e9;
	padding: 1.5em 0 1em;
}

#participar .dark p{
	margin: 0;
}

#participar .large-text-right{
	padding-right: 2em;
	position: relative;
}

#participar .large-text-right:after{
	width: 9px;
	height: 80px;
	content: "";
	position: absolute;
	right: 0;
	background: url(../img/separator.png) no-repeat;
	top: -5px;
}

#participar .small{
	font-style: italic;
	font-size: 0.875em;
}

#inscripcion{
	background: url(../img/red-pat.jpg);
	margin:1.5em;
	padding-top: 8em;
}

#inscripcion h3{
	text-shadow:3px 3px 0px #74404f;
	color: #fff;
	margin-bottom: 1em;
}

#inscripcion h3:after{
	width: 84px;
	height: 49px;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -40px;
	content: "";
	position: absolute;
	background: url(../img/pencil.png);
}

#inscripcion p{
	color: #fff;
}

#inscripcion h6{
	color: #fff;
}

#inscripcion .cta{
	padding:3em 1.5em;
	background: url(../img/cta-bg.png);
	background-size: contain;
	background-position:center;
	background-repeat: no-repeat; 
}

#inscripcion .cta p{
	color: #3a3861;
}

.button{
	text-transform: uppercase;
	font-family: 'FuturaBook', sans-serif;
}

#logistica{
	padding-top: 8em;
}

#logistica .large-4{
	background: url(../img/beige-1.png);
	padding: 4em 0;
	background-position:center;
	background-size: contain;
	background-repeat: no-repeat; 
}

#logistica .large-4 p{
	max-width: 70%;
	margin: 0 auto;
}

#inscripcion ul li{
  color:#FFF;  
  font-family: 'FuturaBook', sans-serif;
  list-style:none;
  font-size: 1.3em;
}

#inscripcion h4{
  color:#FFF;  
  line-height:100%;
  margin-top:2em;
}

#logistica h3:after{
	width: 75px;
	height: 59px;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -60px;
	content: "";
	position: absolute;
	background: url(../img/logistica.png);
}


#logistica h4{
	margin-bottom: 0;
	line-height: 100%;
	font-size: 2.188em;
}

#logistica strong.special {
	color: #dd5c4f;
}

#incentivos{
	background: #212549;
	color: #fff;
	margin:1.5em;
}

#incentivos h3{
	color: #fff;
	text-shadow: 3px 3px 0px #98494e;
}

#incentivos .special{
	text-transform: uppercase;
	color: #fff;
}

#cronograma{
	background: url(../img/cronograma-bg.png);
	padding-top: 8em;
}

#cronograma h3:after{
	width: 54px;
	height: 54px;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -50px;
	content: "";
	position: absolute;
	background: url(../img/clock.png);
}

.events-wrapper{
	background-image: url(../img/time-line.png);
	background-position: center -80px;
	background-repeat: no-repeat;
	margin-top: 2em;
	padding-bottom: 2em;
}

.events-wrapper .event{
	background-repeat: no-repeat;
	background-size: contain;
	padding: 2.5em 1em;
}

.events-wrapper .left-side .event{
	background-position: right center;
	padding-right: 3em;
}

.events-wrapper .right-side .event{
	background-position: left center;
	padding-left: 3em;
}

.events-wrapper .e-1{
	background-image: url(../img/bullets-1.png);
}

.events-wrapper .e-2{
	background-image: url(../img/bullets-2.png);
	margin-top: 4.7em;
}

.events-wrapper .e-3{
	background-image: url(../img/bullets-3.png);
	margin-top: 0.6em;
}

.events-wrapper .left-side .event.e-4{
	background-image: url(../img/bullets-4.png);
	margin-top: 1.3em;
}

.events-wrapper .e-5{
	background-image: url(../img/bullets-5.png);
}

.events-wrapper .e-6{
	background-image: url(../img/bullets-6.png);
	margin-top:3em;
}

.events-wrapper .e-4 p{
	font-size: 1em;
}

.event .event-name{
	color: #212549;
	font-family: 'FuturaBold', sans-serif;
	margin: 0;
}

.event .event-date{
	color: #ea5445;
	font-size: 1.375em;
	margin: 0;
}

.magic{
	opacity: 0;
	transition:all 0.5s linear;
}

.magic.show{
	opacity: 1;
}


/* Share */


footer .entypo-export{
	display: none;
	visibility: hidden;
}

footer .share-button.sharer-0 .social{
	opacity: 1;
	visibility: visible;
}

footer .share-button.sharer-0 .social ul li{
	padding: 25px 10px;
}

footer .share-button.sharer-0 .social li[class*=gplus]{
	display: none;
}

footer .share-button.sharer-0 .social li[class*=paper-plane]{
	display: none;
}

footer .share-button.sharer-0 .social li[class*=pinterest]{
	background: url(../img/pinterest.png) no-repeat;
}

footer .share-button.sharer-0 .social li[class*=facebook]{
	background: url(../img/facebook.png) no-repeat;
}

footer .share-button.sharer-0 .social li[class*=twitter]{
	background: url(../img/twitter.png) no-repeat;
}

footer .share-button.sharer-0 [class*=entypo-]:before{
	display: none;
}

footer .share-button.sharer-0 .social.networks-5.center{
	margin-left: 65px;
	margin-top: 10px;
	margin-bottom: 0px;
}

footer{
	background-color: #FDFAF7;
	padding-bottom: 3.5em;
	padding-top: 3.5em;
}

#reto img{
	margin-bottom:2em;
}

ul li a{
	font-family:'FuturaBook';
}

/* Media queries */

@media screen and (max-width: 1090px) {
	
	.small-button {
    	background: #dd5c4f;
    	padding: 0.5em 1em;
    	border-radius: 4px;
    } 

    .small-button a{
    	color: #fff;
    }

}

@media screen and (max-width: 640px) {
	header h1 a{
		max-width: 300px;
		margin: auto;
		background-size: contain;
		background-repeat: no-repeat;
	}

	header{
		padding-bottom: 0;
	}

	#home{
		margin: 0 .5em;
	}

	#home h2{
		font-size: 2.3em;
	}

	#home.active{
		margin-top: 5em;
	}

	#home .i-2{
		width: 100%;
		background-size: contain;
		margin-top: 1em;
	}

	#home .ilustration-wrapper{
		min-height: 270px;
	}

	section h3 {
	    font-size: 3em;
	    line-height: 90%;
	}

	#participar h4{
		font-size: 2em;
	}

	#participar h5{
		font-size: 1.7em;
	}

	#reto h3:after{
		bottom: -18px;
	}

	#participar{
		margin: 0 .5em;
	}

	#inscripcion{
		margin:0.5em;
	}

	.events-wrapper{
		background: none;
	}

	.events-wrapper .e-5{
		margin-top: .5em;
	}

	.events-wrapper .e-2{
		margin-top: 0;
	}

	.events-wrapper .right-side .event.e-4{
		margin-top: 0;
	}


}