@font-face { font-family:"AkkuratLight"; src: url(fonts/AkkuratLight/AL.eot);src: url(fonts/AkkuratLight/AL.woff) format('woff'), url(fonts/AkkuratLight/AL.tff) format('truetype'), url(fonts/AkkuratLight/AL.svg) format('svg');}
@font-face { font-family:"AkkuratRegular"; src: url(fonts/AkkuratRegular/AR.eot);src: url(fonts/AkkuratRegular/AR.woff) format('woff'), url(fonts/AkkuratRegular/AR.tff) format('truetype'), url(fonts/AkkuratRegular/AR.svg) format('svg');}

/*CSS Index.html*/
.Index{margin: 0 auto; background-color:#202020}
.Index > div {position: absolute;top: calc(50% - 76px);left: calc(50% - 78px);width: 152px; background:url(../img/LogoIndex.png) no-repeat; text-align: center; padding-top: 140px;}
.Index > div > span { text-decoration: none; color: #676766; font-family:"AkkuratLight"; font-size: 12px; margin: 0px 4px; transition:color ease 0.5s; cursor:pointer; display:none} 
.Index > div > span:hover{color:white}
.Index #Cover { width:100%; height:100%; position:absolute; background:black; top:0px; left:0px; padding:0px; z-index:2}

/*CSS Generic*/
body{margin: 0 auto; background-color:#ececec}
#Menú{height:100%; font-size: 14px; position:fixed; padding: 40px 15px 0px 30px; transition: all ease 0.5s; left:0px}
#Menú > ul {list-style: none;margin: 0;padding: 0; font-family:"AkkuratRegular"}
a { text-decoration: none; color: #545654; transition: color ease .5s; }
a:hover{color:#a6a9ab}
#Active {color:#f75b4c}
#TextoBio p{font-family:"AkkuratLight"; font-size:9pt; color:#202020; margin: 0px}
#TextoBio span{ font-family:"AkkuratRegular"; font-size:11pt; letter-spacing: 4px;}
#InfoFooter{ text-align: center; display:none; margin: 0 auto; margin-top: 66px;}
#InfoFooter p{font-family:"AkkuratLight"; color:#ececec; font-size:10pt;}
#InfoFooter span{font-family:"AkkuratLight"; font-size:11pt; color:#545654; margin-right: 32px; margin-left:32px}
#InfoFooter borde{border-top: 1px solid;}
#InfoFooter #NoML {margin-left:0px}
#InfoFooter a {color:#ececec}
#InfoFooter a:hover{color:#545654}
#Servicio p{font-family:"AkkuratLight"; font-size:8pt; color:#202020; margin: 0px; letter-spacing: 6px}
#Servicio span{font-family:"AkkuratLight"; font-size:60pt; color:white}
#Servicio span2{font-size:18pt; letter-spacing:8px}
#Contacto span{font-family:"AkkuratLight"; font-size:60pt; color:white; letter-spacing:30px; line-height:90pt}
#Contacto p{font-family:"AkkuratLight"; font-size:18pt; color:#202020; margin: 0px;}
#Login p {font-family:"AkkuratLight"; margin: 0px; font-size: 15px; word-spacing: 12px;}
#Login span{font-size: 60pt; letter-spacing: 12px;line-height: 58px; margin-bottom: 11px; color: #dadbdc ;}
footer {position:fixed;left:0px;bottom:0px;height:17px;width:100%;background:#282828;text-align:center; z-index: 100; transition:height 1s}
footer p { width:auto}

#wrapper{width: calc(100% - 153px);margin-left: 153px;}
#Contenido{width:100%; margin: 0 auto;}

/*Contenidos*/
#Biografía{width: 1024px; position:absolute; padding-top:40px; margin-left:193px}
#Portfolio{width: calc(100% - 153px); margin: 0 auto;position: absolute; padding-top: 40px; margin-bottom: 40px;}
#Servicio{width: 1050px; position:absolute; padding-top:40px; margin-left:193px; margin-top: -19px;}
#Contacto{width: 1024px; position:absolute; padding-top:40px; margin-left:193px; margin-top: -27px;}
#Briefer{width: 1024px; position:absolute; padding-top:40px; margin-left:193px; margin-top: -19px;}

/*CSS Biografía*/
#TextoBio{width: 260px; margin-right:80px; float:left; line-height: 24px;}
#Eslogan{ width:684px; float:left; font-family:"AkkuratLight"; font-size:65px; color:white; letter-spacing:30px; line-height: 119px; margin-top: -33px;}

/*CSS Portfolio*/
.Lightbox{box-sizing: border-box;height: 100%;text-align: center;position: fixed;width: 100%;left: 0;top: 0;background: rgba(0,0,0,.8);overflow: auto;display:none;z-index: 99;}
.Lightbox .CerrarLightbox {background: url(../img/Cerrar.png) transparent;height: 28px;width: 28px;right: 40px;top: 20px;padding: 0;border: medium none;position: fixed;cursor: pointer;outline: none; transition: background 1s;}
.Lightbox .CerrarLightbox:hover {background: url(../img/CerrarHover.png) transparent;}
.CerrarNaranja { background:url(../img/CerrarNaranja.png) !important}
.CerrarNaranja:hover { background:url(../img/CerrarNaranjaHover.png) !important}
.Lightbox h1 {width: 570px;margin: 0 auto; font-family:"AkkuratRegular"; margin-top:20px; color:white; text-align: left; font-size: 36px;}
.Lightbox h1 span {color:#f15c51}
.Lightbox p{width: 570px;margin: auto;color: white;font-family: "AkkuratLight";text-align: left;}
.Lightbox p span {color:#f15c51}
#LBC{width: 1024px;margin: 0 auto;}
#ContIMG{box-shadow: 0px 0px 42px black; z-index: 2; position: relative;}
#ContIMG > img {vertical-align: top;}

/*CSS Contacto*/
#Social{height: 31px;padding: 0px;}
#Social li{list-style:none; float:left}
#Social li, #Social a{height:40px;display:block; cursor:pointer}
#Twitter{left:0px;width:33px; background: url(../img/Social.png) 0 0;}
#Twitter:hover{background: url(../img/SocialHover.png) 0 0;}
#Facebook{left:33px;width:33px; background: url(../img/Social.png) -33px 0;}
#Facebook:hover{background: url(../img/SocialHover.png) -33px 0;}
#Vimeo{left:66px;width:33px; background: url(../img/Social.png) -66px 0;}
#Vimeo:hover{background: url(../img/SocialHover.png) -66px 0;}
#Behance{left:99px;width:33px; background: url(../img/Social.png) -99px 0;}
#Behance:hover{background: url(../img/SocialHover.png) -99px 0;}
#Instagram{left:132px;width:33px; background: url(../img/Social.png) -132px 0;}
#Instagram:hover{background: url(../img/SocialHover.png) -132px 0;}
#Pinterest{left:165px;width:33px; background: url(../img/Social.png) -165px 0;}
#Pinterest:hover{background: url(../img/SocialHover.png) -165px 0;}
#Spotify{left:198px;width:33px; background: url(../img/Social.png) -198px 0;}
#Spotify:hover{background: url(../img/SocialHover.png) -198px 0;}
#LinkedIn{left:231px;width:33px; background: url(../img/Social.png) -231px 0;}
#LinkedIn:hover{background: url(../img/SocialHover.png) -231px 0;}

/*CSS Login*/
#Login{ margin: 19px 12px;}
#Password{background-color: #dadbdc;border: 0px;font-family: AkkuratLight;padding-left: 10px;height: 23px;width: 274px;letter-spacing: 3px; margin: 13px 0px;}


#JukeBoxHead { background: url(../img/headbanda.png) no-repeat center #ee5f56;width: 500px;height: 630px; float:left}
#JukeBoxPlayer { background: #ee5f56;width: 524px;height: 570px;float: left;padding: 30px 0px 30px 0px;overflow: hidden}

.cbp-filter-item{font-family: "AkkuratLight";}

.VerMás{position:absolute; top:calc(50% - 18px); left:calc(50% - 55px); cursor:pointer; width:110px; height:36px; background:url(../img/VistaCompleta.png); transition: all ease 0.5s}
.VerMás:hover{background:url(../img/VistaCompletaHover.png)};
.VerMásEn{background:url(../img/ViewLarge.png) ;}
.VerMásEn:hover{background:url(../img/ViewLargeHover.png) !important}

.SocialButtons{width:1024px; height:26px; float:right; margin-top: 45px; margin-bottom: 60px;}
.SocialButtons > div { width:26px; height:26px; float:right; cursor:pointer; margin-left: 10px; transition:all ease 0.5s}
.Like{ background-image:url(../img/Like.png)}
.Like:hover{background-image:url(../img/LikeHover.png)}
.Liked{background-image:url(../img/LikeHover.png)}
.Share{background-image:url(../img/Share.png)}
.Share:hover{background-image:url(../img/ShareHover.png)}
.Shared{background-image:url(../img/ShareHover.png)}
.Twit{background-image:url(../img/Twit.png)}
.Twit:hover{background-image:url(../img/TwitHover.png)}
.Twitted{background-image:url(../img/TwitHover.png)}
.Naranja{background: #ee5f56; padding-top: 4%; overflow:hidden}

#LBFoot{ background:url(../img/LBFoot.png); width:70px; height: 59px; position: fixed; bottom: 48px; left: calc(50% - 35px);  z-index: 1;}

@media all and (max-width:1024px){
	#Menú{display:none !important}
	#wrapper{width: calc(100%); margin-left:0px}
	#Portfolio{width: calc(100%); margin: 0 auto;position: absolute; padding-top: 40px; margin-bottom: 40px;}
	#grid-container{margin-left: 0px !important; margin-top: 30px;}
	#filters-container{box-shadow: 0px 0px 0px 0px black;}
	#LBC{width: 90%;margin: 0 auto;}
	.CerrarLightbox { background:url(../img/CerrarNaranja.png) !important; z-index:4}
	.CerrarLightbox:hover { background:url(../img/CerrarNaranjaHover.png) !important}
}