@font-face { font-family: 'gotham-rounded-light'; src: url('types/gotham-rounded-light.otf'); } 
@font-face { font-family: 'Luckiest Guy'; src: url('types/LuckiestGuy.ttf'); } 
@font-face { font-family: 'Minnadrop-Regular'; src: url('types/Minnadrop-Regular.otf'); } 
@font-face { font-family: 'Quicksand'; src: url('types/Quicksand-Light.otf'); } 
@font-face { font-family: 'Quicksand';font-weight:bold; src: url('types/Quicksand-Bold.otf'); } 
@font-face { font-family: 'Quicksand';font-weight:bold italic; src: url('types/Quicksand-BoldItalic.otf'); } 
@font-face { font-family: 'Quicksand';font-weight:italic; src: url('types/Quicksand-Italic.otf'); } 
@font-face { font-family: 'Quicksand';font-weight:light; src: url('types/Quicksand-Light.otf'); } 
@font-face { font-family: 'Quicksand';font-weight:light italic; src: url('types/Quicksand-LightItalic.otf'); } 
@font-face { font-family: 'Quicksand';font-weight:italic; src: url('types/Quicksand-Italic.otf'); } 
@font-face { font-family: 'Quicksand'; src: url('types/Quicksand-Regular.otf'); } 
@font-face { font-family: 'Calibri'; src: url('types/CALIBRI.otf'); } 
@font-face { font-family: 'American Purpose Casual 01'; src: url('types/American Purpose Casual 01.otf'); font-weight: normal;font-style: normal;} 
@font-face { font-family: 'Myriad Pro'; src: url('types/MyriadPro-Regular.otf'); } 
@font-face { font-family: 'Arial Rounded'; src: url('types/arial-rounded-mt-bold.ttf'); } 


#collage hr{
    border:none;
    border-top:2px solid #f5f2f2;
    height:1px;
}

#collage #playPanel {
  
    padding:10px 0px;
    margin: 10px auto;
    max-width:800px;
    width:95%;
}

#collage #actualImageBox {
    display: inline-block;
    font-size:0.8em;
    margin: 10px 10px;
    vertical-align: top;
    width:280px;
}

#collage #stepBox, #collage #timeBox {
    display:inline-block;
    width:48%;
}

#collage #stepBox div {
  
    display:inline-block;
    padding:1px 4px;
    margin: 0px auto;
    max-width:800px;
}

#collage img#actualImage{
    border:2px solid #a46;
    height:280px;
    width:280px;
}

#collage #sortable {
    
    list-style-type: none;
    display: inline-block;
    margin: 10px;
    padding: 0;
    width: 600px;
}

    #collage #sortable li {
        background-size: 600% 600%;
        border: none;
        cursor: pointer;
        margin: 0;
        padding: 0;
        float: left;
        
    }

#collage button  {

    border:1px solid #cce;
    display: inline;
    font-size: 14px;
    height: auto;
    width: auto;
    padding: 3px 8px;
}

#container {
	text-align: justify;
	}
#container > div {
	width: 100px; /* Declare your value. Can be in relative units. */
	display: inline-block;
	vertical-align: top;

	/* IE fix. */
	*display: inline;
	zoom: 1;
	}
#container:after {
	content: "";
	width: 100%;
	display: inline-block;
    }
    
.col
{
    float: left;
    width: 45%;
}
.col1
{
    float: left;
    width: 10%;
}

.col2
{
    float: left;
    width: 30%;
}

.row{
    height: auto;
    overflow: auto;
}

.lugares{
    border-radius: 25px;
    background: url("../images/lugares.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
    width: 400px;
    height: 210px; 
    align: center;
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}
.personajes{
    border-radius: 25px;
    background: url("../images/personajes.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
    width: 400px;
    height: 210px;
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}

.personalizado{
    border-radius: 25px;
    background: url("../images/figuras.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
      width: 400px;
    height: 210px; 
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}

.animals{
    border-radius: 25px;
    background: url("../images/animales.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
      width: 400px;
    height: 210px; 
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}

.animals:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}
.lugares:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}
.personalizado:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}
.personajes:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}

.space { height: 1px; width: 100%;margin-top: 15px;}
#space { width: 50px; margin-top: 15px;}
    
.p1{

	font-family: "Luckiest Guy"; font-size: 50px;width: 60%; margin: 0 auto; color:#005256;
    
}

p{
    text-align: center;
    vertical-align: middle;
    line-height: 150px;
    color:#428bf7;
    font-size:50px;
    font-family:"Luckiest Guy";
    
}