/* Estilos importados */
 @import url(css/reset.css);
 @import url(css/grid.css);
 @import url(css/fonts.css);

/* Estilos generales */
 body {
    font-family:'pt_sansregular', Helvetica, Arial, sans-serif;
}

#header{
    background: #3498db;
    margin: 0 0 50px;
    position: relative;
}
#main-header{
    background: #1273b4;
}
.logo{
    margin:15px 0 0;
}
.logo a{
    display: block;
    width:180px;
    height: 131px;
    text-indent: -9999px;
    background: url(images/logo.png) no-repeat;
}
nav{
    margin: 10px 0 20px 0;
    height: 35px;
}
#main-menu li{
    margin: 0 20px 0 0;
    float: left;
}
#main-menu li a{
    color:#fff;
    text-decoration:none;
    text-transform: uppercase;
    line-height: 35px;
    font-size: 0.8em;
    padding: 10px 12px 7px;
    transition: background-color 0.5s ease;
}

.color-item-1:hover{
    background: #9b59b6;
    -webkit-box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
}

.color-item-2:hover{
    background: #e74c3c;
    -webkit-box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
}

.color-item-3:hover{
    background: #27ae60;
    -webkit-box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
}

.color-item-4:hover{
    background: #e67e22;
    -webkit-box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
}

.color-item-5:hover{
    background: #3299BB;
    -webkit-box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0 0 rgba(0,0,0,0.2);
}

#social-icons{
    float: right;
}

#social-icons li{
    float: left;
    margin: 0 0 0 10px;
}

.social{
    display: block;
    width: 35px;
    height: 35px;
    text-indent: -9999px;
}

.pinterest{
    background: url('images/sprite-social.png') no-repeat -36px 0;
}

.pinterest:hover{
    background-position: -36px -36px;
}

.instagram{
    background: url('images/sprite-social.png') no-repeat -144px 0;
}

.instagram:hover{
    background-position: -144px -36px;
}

.youtube{
    background: url('images/sprite-social.png') no-repeat -108px 0;
}

.youtube:hover{
    background-position: -108px -36px;
}

.facebook{
    background: url('images/sprite-social.png') no-repeat -72px 0;
}

.facebook:hover{
    background-position: -72px -36px;
}

.twitter{
    background: url('images/sprite-social.png') no-repeat 0 0;
}

.twitter:hover{
    background-position: 0 -36px;
}

.slider-wrapper {
    position:relative;
    overflow:hidden;
    width:100%;
    margin:50px auto;
    color:#fff;
}
.slider {
    position:relative;
    width:100%;
    /*  height:400px; when responsive, comment this out */
    margin:0 auto;
}
.slide h2{
    font-family: 'bebas_neue_regularregular';
    font-size:3em;
}
.caption-slide{
    width: 500px;
}
.more{
    display: block;
    color: #fff;
    text-transform: uppercase;
    background: #e74c3c;
    text-decoration:none;
    padding: 10px 20px 7px 20px;
    font-size: .9em;
    transition: background-color 0.5s ease;
}
.more:hover{
    background: #f65343;
    color:#fff;
}
.celebra-argos{
    display: block;
    width: 189px;
    height: 55px;
    position: absolute;
    background: url(images/celebra.png) no-repeat;
    bottom: -23px;
    margin: auto;
    left: 0;
    right: 0;
}
.container {
    margin: 0 auto;
    max-width: 1183px;
}
.container div {
    float: left;
    width: 20%;
    height: 159px;
    margin: 0 2px 4px;
    position: relative;
}
.container .item-w2 {
    width: 40%;
}
.container .item-h2 {
    height: 322px;
}
.container .item-h3 {
    height: 485px;
}
.item a{
    color:#fff;
}
.item p{
    position: absolute;
    top: 0;
    display: block;
    padding: 10px 0;
    text-align:center;
    width: 100%;
}
.item p a{
    text-decoration: none;
    text-transform: uppercase;
}
.color-1{
    background: #c0392b;
    color:#fff;
}
.color-2{
    background: #9b59b6;
    color:#fff;
}
.color-3{
    background: #f1c40f;
    color:#fff;
}
.color-4{
    background: #2ecc71;
    color:#fff;
}
.color-5{
    background: #2c3e50;
    color:#fff;
}
.ideas{
    background: url(images/ideas.jpg) no-repeat center center;
}
.globos{
    background: url(images/fiesta-globos.jpg) no-repeat center center;
}
.personaje{
    background: url(images/violeta.jpg) no-repeat center right;
}
.fiesta-amigos{
    background: url(images/fiesta-amigos.jpg) no-repeat center center;
}
.fiesta-colores{
    background: url(images/party-red.jpg) no-repeat center center;
}
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

footer{
    background: #2980b9;
    color:#fff;
    margin: 30px 0 0;
    font-size: 0.85em;
    padding: 30px 0;
}

.logo-footer a{
    display: block;
    width: 100px;
    height: 73px;
    text-indent: -9999px;
    background: url(images/logo-footer.png) no-repeat;
    margin: 0 0 10px;
}

.footer-nav li a{
    color:#85c5ee;
    text-decoration: none;
    border-bottom: 1px dashed #2b88c5;
    display: block;
    line-height: 35px;
    font-size: 0.9em;
}

.footer-nav li a:hover{
    color:#fff;
    border-bottom: 1px solid #3e91c8;
}