@font-face {
  font-family: 'Designosaur';
  src:  url('../fonts/Designosaur-Regular.otf'),
        url('../fonts/Designosaur-Regular.ttf');
}

body{background: url(../images/bg-site.jpg) no-repeat 50% 0; background-size: cover; margin-top: 60px;}
img{width: 33%;}
#text-destiny{width: 100%; padding: 15px; background: #910600; margin-top: 3%;}
#text-destiny span{color: #FFF; font-size: 27px; font-family: "Designosaur", Arial; letter-spacing: 8px;}
#text-destiny span:before, #text-destiny span:after{width:15px; height: 16px; background: url(../images/arrow.png) no-repeat; position: absolute; content: ""; margin:11px 0 0 -40px; background-size: cover;}
#text-destiny span:after{-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-left: 17px;}

a.btn{background: url(../images/bg-button.jpg) repeat-x; color: #FFF; font-family: "Designosaur", Arial; font-size: 20px; max-width: 230px; border:none; margin-bottom: 15px; padding: 15px 16px;}
a.btn:hover{background-position: bottom left; color: #FFF; background-color: transparent;}

#body-button{margin-top: 5%; padding: 0 20%;}

@media(max-width: 667px){
	#text-destiny span{color: #FFF; font-size: 16px; font-family: "Designosaur", Arial; letter-spacing: 3px;}
	#text-destiny span:before, #text-destiny span:after{width:12px; height: 13px; margin:4px 0 0 -22px; background-size: cover;}
	#text-destiny span:after{margin-left: 12px;}
	img{width: 60%;}
	#text-destiny, #body-button{margin-top: 10%;}
	#body-button{padding: 0 14%;}
}

@media(min-width: 1680px){
	body{margin-top: 145px;}
	img{width: 26%;}
	
}

@media(min-width: 1024px) and (max-width: 1350px){
	#text-destiny span{font-size: 30px;}
}

@media(min-width: 1400px) and (max-width: 1679px){
	img{width: 31%;}
	#text-destiny span{font-size: 32px;}
}