@charset "utf-8";
*{
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html body{
    color: #181818;
    font-family: 'Gruppo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    background-color: #000;
    background: radial-gradient(ellipse at top 30% left 30%, transparent 70%, rgba(42, 0, 32, 0.4) 80%, rgba(62, 0, 22, 0.6) 90%, #7b0000 100%),
    radial-gradient(ellipse at bottom 30% right 30%, transparent 70%, rgba(42, 0, 32, 0.4) 80%, rgba(62, 0, 22, 0.6) 90%, #7b0000 100%),
    radial-gradient(ellipse at top 50% right 50%, transparent 70%, rgba(0, 11, 42, 0.4) 80%, rgba(0, 40, 62, 0.6) 90%, rgba(0, 123, 35, 0.69) 100%),
    radial-gradient(ellipse at center, #000, #000);
}
img, object, embed, video {
    max-width: 100%;
}
#workMarcoFoto{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#workFoto{
    width: 100%;
}
.modal, .modal.modal-fixed-footer{
    height: 90%;
    width: 80%;
    max-height: 90%;
    background: #DFDFDF;
    background: linear-gradient(to bottom, #DFDFDF 10%, #FFFFFF 90%);
}
.modal-trigger{
    cursor: pointer;
}
.pRel{
    position: relative;
}
.pAbs{
    position: absolute;
}
.der{
    text-align: right;
}
.izq{
    text-align: left;
}
.cen{
    text-align: center;
}
.fixed-action-btn {
    position: absolute;
    top: 1em;
    right: 1em;
}
#menu li{
    position: relative;
    right: 0;
    text-align: right;
    direction: rtl;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    width: 46px;
    height: 46px;
    background: linear-gradient(to left, #FFF, #FFF 20%, #FFF);
    overflow: hidden;
    padding-bottom: 4px;
    transition: width .8s, background .8s, right .8s;
}
#menu li:hover{
    right: 154px;
    background: linear-gradient(to left, #FFF, #FFF 20%, #424242);
    width: 200px;
}
#menu li span{
    color: white;
    text-shadow: 1px 1px 2px black,
    0 0 1em black,
    0 0 0.2em black;
    margin-left: 10px;
    margin-right: 20px;
}
#marco_master{
    z-index: 100;
}
.marco{
    background-color: #FFF;
    border: #000 solid 5px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    display: none;
}
#home{
    /* background-size: cover;
    background-image: url("../img/fondoGeneral.jpg");
    background-position: center; */
}
#home div{
    /* height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(256,256,256,.3) 80%, #FFF 100%);
    padding: 100px; */
}
#home div p{
    font-size: 60px;
}
#design{
    border-color: #21991D;
}
#ui{
    border-color: #2A51FF;
}
#app{
    border-color: #00FFFF;
}
#press{
    border-color: #005EFF;
}
#marcoNombreOpt{
    position: fixed;
    top: 10px;
    right: 100px;
    width: 500px;
    text-align: right;
    color: white;
    text-shadow: 0 0 10px #001177, 0 0 4px #000;
    font-size: 3em;
}
#miDiv {
    position: fixed;
    top: 10px;
    left: 800px;
    width: 500px;
    text-align: left;
    color: white;
    font-size: 3em;
    opacity: 0;
    /*text-shadow: 0 0 2px #FFF, 0 0 1px #FFF;*/
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.75s;
}
#miDiv.animated {
    transform: translateX(-750px);
    opacity: 1;
}
.cont{
    position: absolute;
    background: radial-gradient(ellipse at bottom 0 right 0, #FFF 50%, #b6b6b6 90%, #828282 100%);
    left: 50px;
    top: 1080px;
    height: 100%;
    border-top: solid 4px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    opacity: 0;
    transition: transform 800ms cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s;
    padding: 2em;
    font-size: 1.3em;
    text-align: right;
}
.cont.ini{
    background: transparent;
}
.works {
    overflow-y: scroll;
    overflow-x: hidden;
}
.works.home {
    overflow-y: hidden;
}
.worksProy{
    box-shadow: 0 0 2px #9a9a9a;
    background-color: white;
}
.worksProyNombre{
    text-align: center;
    padding: .5em;
    height: 2em;
    font-size: .9em;
}
#homeOpt.getIn, #fotoOpt.getIn, #pressOpt.getIn, #mediaOpt.getIn, #appOpt.getIn, #uiOpt.getIn, #designOpt.getIn{
    transform: translateY(-1000px);
    opacity: 1;
}
.letra1{
    font-weight: 300;
    font-family: 'Akshar', sans-serif;
}
.letra2{
    font-weight: 700;
    font-family: 'Gruppo', sans-serif;
}
.letra3{
    font-weight: 400;
    font-family: 'Gruppo', sans-serif;
}
.tipo1{
    font-size: 2em;
}
.tipo2{
    font-size: 1.5em;
}
.tipo3{
    font-size: .8em;
}
a, a:link, a:visited, a:hover, a:active {
    color: #3b4456;
    cursor: pointer;
    text-decoration: none;
}
a:hover{
    color: #2174cd;
}
#portada {
    margin: 100px auto;
    width: 50%;
    min-height: 600px;
    text-align: center;
    padding-top: 40px;
}
#cards{
    position: absolute;
    top: 80px;
    max-width: calc(100% - 160px);
    width: 100%;
    left: 60px;
    border: #FFF solid 10px;
    z-index: 200;
    height: auto;
}
#appCard, #designCard, #uiCard, #mediaCard, #pressCard, #fotoCard{
    background: #000000;
    height: 200px;
    border-radius: .5em;
    color: #B0B0B0;
    padding-top: 1em;
    cursor: pointer;
}
#appCard{
    background: radial-gradient(ellipse farthest-corner at 30% 30%, rgba(0,0,0,.9) 70%, rgba(0, 28, 42, 0.9) 85%, #003957 100%);
    border: solid 2px #0277BD;
}
#uiCard{
    background: radial-gradient(ellipse farthest-corner at 30% 30%, rgba(0,0,0,.9) 70%, rgba(0, 36, 32, 0.9) 85%, #003835 100%);
    border: solid 2px #00796B;
}
#designCard{
    background: radial-gradient(ellipse farthest-corner at 30% 30%, rgba(0,0,0,.9) 70%, rgba(29, 47, 16, 0.9) 85%, #293d14 100%);
    border: solid 2px #558B2F;
}
#mediaCard{
    background: radial-gradient(ellipse farthest-corner at 30% 30%, rgba(0,0,0,.9) 70%, rgba(38, 38, 9, 0.9) 85%, #494911 100%);
    border: solid 2px #9E9D24;
}
#pressCard{
    background: radial-gradient(ellipse farthest-corner at 30% 30%, rgba(0,0,0,.9) 70%, rgba(43, 26, 0, 0.9) 85%, #583a00 100%);
    border: solid 2px #FFA000;
}
#fotoCard{
    background: radial-gradient(ellipse farthest-corner at 30% 30%, rgba(0,0,0,.9) 70%, rgba(47, 0, 0, 0.9) 85%, #6c0000 100%);
    border: solid 2px #D50000;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}