/* ANIMATIONS */

@keyframes bg-color-proyectos {
    0%   {background-color: #fdeded; left:0px; top:0px;}
    100% {background-color: rgba(241, 89, 76, 0.65); left:0px; top:0px;}
}
@keyframes bg-color-marketing {
    0%   {background-color: #fdf6e6; left:0px; top:0px;}
    100% {background-color: rgba(239, 159, 0, 0.65); left:0px; top:0px;}
}
@keyframes bg-color-creatividad {
    0%   {background-color: #f4edf5; left:0px; top:0px;}
    100% {background-color: rgba(158, 79, 160, 0.65); left:0px; top:0px;}
}
@keyframes bg-color-consultoria {
    0%   {background-color: #f0f8fa; left:0px; top:0px;}
    100% {background-color: rgba(103, 186, 202, 0.65); left:0px; top:0px;}
}

.proyectos {
    background: #fdeded;
}
.marketing {
    background: #fdf6e6;
}
.creatividad {
    background: #f4edf5;
}
.consultoria {
    background: #f0f8fa;
}
.width-fix {
    width: 370px;
    border-radius: 7px 7px 0 0;
    display: block;
    margin: auto;
}
.align-fix {
    text-align: center;
    z-index: 9;
    /*font-family: BebasNeueRegular, sans-serif;*/
}
#dea {
    position: absolute;
    width: 100%;
    height: 100vh;
    text-align: center;
}
#dea h3 {
    display: block;
    position: relative;
    top: 260px;
    left: -15px;
}
.pricing-table {
    border: 0;
}
.pricing-table h4 {
    font-family: BebasNeueRegular, sans-serif;
}
.btn-fix {
    display: block;
    margin: auto;
    height: 30px;
    width: 370px;
    border-radius: 0 0 7px 7px;
    text-align: center;
    color: #fff !important;;
}
.btn-proyectos {
    background: #f1594c;
    position: relative;
    top: -11px;
}
.btn-marketing {
    background: #ef9f00;
    position: relative;
    top: -11px;
}
.btn-creatividad {
    background: #9e4fa0;
    position: relative;
    top: -11px;
}
.btn-consultoria {
    background: #67baca;
    position: relative;
    top: -11px;
}
.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#path-proyectos, #path-marketing, #path-creatividad, #path-consultoria {
    position: absolute;
    height: 350px;
    width: 100%;
    margin: auto;
    text-align: center;
}
#path-proyectos .svg-container {
    display: inline-block;
    width: 200px;
    height: 240px;
    position: relative;
    top: 175px;
}
#path-marketing .svg-container {
    display: inline-block;
    width: 200px;
    height: 240px;
    position: relative;
    top: 19px;
}
#path-creatividad .svg-container {
    display: inline-block;
    width: 200px;
    height: 240px;
    position: relative;
    top: 5px;
}
#path-consultoria .svg-container {
    display: inline-block;
    width: 200px;
    height: 240px;
    position: relative;
    top: 5px;
}
circle {
    display: none;
    fill: #F1594C;
}

.proyectos:hover, .marketing:hover, .creatividad:hover, .consultoria:hover {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate;
}

.proyectos:hover {
    animation: bg-color-proyectos;
}
.marketing:hover{
    animation: bg-color-marketing;
}
.creatividad:hover{
    animation: bg-color-creatividad;
}
.consultoria:hover{
    animation: bg-color-consultoria;
}

.proyectos, .marketing, .creatividad, .consultoria {
	background: #fdeded;
	cursor: pointer;
	transition-property: background;
	transition-duration: 1s;
	transition-timing-function: linear;
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

.proyectos img, .marketing img, .creatividad img, .consultoria img {
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
.proyectos:hover img, .marketing:hover img, .creatividad:hover img, .consultoria:hover img {
	-webkit-transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	transform: rotateY(180deg);
	transform-style: preserve-3d;
}

.mini-circulito {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    /*background: #F4EDF5;*/
    margin-right: 2px;
}

.mini-proyectos {
    background: #67BACA;
}
.btn-proyectos:hover .mini-proyectos {
    background: #9E4FA0;
}
.mini-marketing {
    background: #9E4FA0;
}
.btn-marketing:hover .mini-marketing {
    background: #67BACA;
}
.mini-creatividad {
    background: #F1594C;
}
.btn-creatividad:hover .mini-creatividad {
    background: #EF9F00;
}
.mini-consultoria {
    background: #EF9F00;
}
.btn-consultoria:hover .mini-consultoria {
    background: #F1594C;
}

.la-factory-small {
    font-size:13px;
}
.padding-fix {
    padding-left: 0px !important;
}
.padding-fix img {
    position: relative;
    top: 10px;
}
.top-fix {
    position: relative;
    top: 110px;
}
.no-border {
    border: none !important;
}
.flecha-larga {
    height: 80% !important;
    z-index: 3 !important;
    position: relative;
    width: auto;
    top: 38px;
    right: 150px;
}

.circulito {
    /*display:none;*/
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #F1594C;
    position: relative;
    margin-bottom: 7px;
}
.circulito:hover {
    background: #A2359E;
}
.circulitos-proyectos {
    display: inline-block;
    height: 200px;
    width: 30px;
    position: relative;
    top: 85px;
    left: 3%;
    overflow: visible;
    cursor: pointer;
}
.trabajo {
    display:inline-block;
    font-size: 12px;
    font-weight: bold;
    width: 30px;
    height: 36px;
    position: relative;
    left: 0px;
    margin-top: 5px;
    float: left;
}
.trabajo:hover {
    color: #F1594C;
}