/****** font-face **********/

@font-face {
	font-family: 'pbold';
	src: url('font/RALEWAY-BOLD.eot?#iefix') format('embedded-opentype'), 
	url('font/Raleway-Bold.ttf')  format('truetype');
}

@font-face {
	font-family: 'plight';
	src: url('font/Raleway-Light.eot?#iefix') format('embedded-opentype'), 
	url('font/Raleway-Light.ttf')  format('truetype');
}

@font-face {
	font-family: 'euph';
	src: url('font/EuphoriaScript-Regular.eot?#iefix') format('embedded-opentype'), 
	url('font/EuphoriaScript-Regular.ttf')  format('truetype');
}


@font-face {
	font-family: 'aleo';
	src: url('font/Aileron-Bold.eot?#iefix') format('embedded-opentype'), 
	url('font/Aileron-Bold.ttf')  format('truetype');
}


@font-face {
	font-family: 'iconos';
	src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
	url('font/fontawesome-webfont.ttf')  format('truetype');
}

/****** font-face **********/


*{margin:0; padding:0; font-weight:normal; font-style:normal;}
html{ height:100%;}
body{	
	color:#252525;
	font-family:'plight', Arial, sans-serif;
	background:#fff;
	height:100%;
}

body{overflow: hidden;}

h2{font-size: 20px;}
h4{font-size:18px;}

.main{
    width: 100%;
    height: 100%;
    background: rgb(84, 196, 207);
}

/*logo ********/


a#logo {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 30%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,-50%);
    display: inline-block;
    width: 20%;
    text-align: center;
}
	
a#logo img{     max-width: 76%;}
	
	
#nombre img {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 65%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: inline-block;
    width: 60%;
    text-align: center;
    /* border-top: 8px dotted #fff; */
    padding-top: 12px;
}


/******** RESPONSIVE **********/

@media screen and (min-width: 1366px) {
    
    a#logo { width: 25%;}
    
    #nombre img {
	top: 75% !important;}
}
    
}


@media screen and (max-width: 1024px){
	#nombre img {
	top: 55%;}
}
	
@media screen and (max-width: 900px){
	a#logo { width: 40%;}
	
}
@media screen and (max-width: 800px){
	 a#logo { width: 30%;}
	
}
@media screen and (min-height: 150px) and (max-height: 320px){
	#nombre img {
	top: 76%;}
}
@media screen and (min-height: 320px) and (max-height: 500px){
	#nombre img {
	top: 76%;}
}
@media screen and (min-height: 580px) and (max-height: 680px){
	#nombre img {
		top: 42%;
	}
}
@media screen and (min-height: 400px) and (max-height: 740px){
	#nombre img {
		top: 42%;
	}
}
@media screen and (min-height: 400px) and (max-height: 420px) and (min-width: 730px) and (max-width: 740px){
	#nombre img {
		top: 70%;
	}
}
@media screen and (min-height: 860px){
	#nombre img {
	top: 55%;}

}

@media screen and (min-height: 860px){
	#nombre img {
	top: 55%;}

}
@media screen and (min-height: 980px){
	#nombre img {
	top: 48%;}
	
}
@media screen and (min-height: 1024px){
	#nombre img {
	top: 55%;}
	
}
@media screen and (min-height: 1300px){
	#nombre img {
	top: 45%;}
	
}
@media screen and (max-height: 900px) and (min-width: 900px){
#nombre img {
    top: 66%;
}
}

canvas{ 
    border: none;
    padding: 0;
    margin: 0;

}


h1{
    font-size: 3.2em;
    font-family: sans-serif;
}

p{
    font-size: 1.5em;
    font-family: monospace;
}