/* About info */
.btn-esp {
    display: block;
    margin: 0 auto;
    top: 1.5em;
    width: 200px;
    height: 65px;
    -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 3;
    }

.btn-front {
    position: absolute;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #b03567;
    color: #fff;
    cursor: pointer;
    border-radius: 25px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-front:hover {
    background-color: #FF1D78;
}

.btn-back {
    visibility: hidden;
    padding: 0 10px;
    position: absolute;
    border-radius: 25px;
    color: white;
    width: 100%;
    height: 100%;
    background-color: #b03567;
    color: #222;
    -webkit-transform: translateZ(-2px) rotateX(180deg);
    transform: translateZ(-2px) rotateX(180deg);
    overflow: hidden;
    -webkit-transition: box-shadow 0.8s ease;
    transition: box-shadow 0.8s ease;
}

.btn-back p {
    margin-top: 27px;
    margin-bottom: 25px;
}
.btn-back button {
    display: inherit;
    margin: 0 auto;
    background-color: transparent;
    border: 0;
    border-radius: 2px;
    font-size: 1em;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
}
.btn-back button:focus {
    outline: 0;
}
.btn-back button.yes {
    background-color: #b03567;
    color: #fff;
}
.btn-back button.yes:hover {
    background-color: #FF1D78;
}
.btn-back button.no {
    color: #2196F3;
}
.btn-back button.no:hover {
    background-color: #ddd;
}

.btn[data-direction="left"] .btn-back,
.btn[data-direction="right"] .btn-back {
    -webkit-transform: translateZ(-2px) rotateY(180deg);
    transform: translateZ(-2px) rotateY(180deg);
}

.btn-esp.is-open {
    position: inherit;
    width: 800px;
    height: 460px;
    margin-bottom: 4em;
}
.btn-esp.is-open .btn-front {
    pointer-events: none;
    line-height: 160px;
}
.btn-esp.is-open .btn-back {
    visibility: visible;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btn-esp[data-direction="top"].is-open {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.btn-esp[data-direction="right"].is-open {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.btn-esp[data-direction="bottom"].is-open {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.btn-esp[data-direction="left"].is-open {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

@media (max-width: 900px) {
    .btn-esp.is-open {
    width: 400px;
    height: 760px;
    }
}

@media (max-width: 400px) {
    input.menu + label { right: 20px !important; }

    .btn-esp.is-open {
    width: 300px;
    height: 1030px;
    }
}

/* Nav */

input.menu { visibility: hidden; }
input.menu + label {
    position: fixed;
    top: 40px;
    right: 40px;
    height: 20px;
    width: 15px;
    z-index: 5;
}
input.menu + label span {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    margin-top: -1px;
    left: 0;
    display: block;
    background: #fff;
    transition: .5s;
    box-shadow: 0px 0px 10px black;
}
input.menu + label span:first-child { top: 3px; }
input.menu + label span:last-child { top: 16px; }
input.menu + label label:hover { cursor: pointer; }
input.menu:checked + label span {
    opacity: 0;
    top: 50%;
    background: #000;
}
input.menu:checked + label span:first-child {
    opacity: 1;
    transform: rotate(405deg);
}
input.menu:checked + label span:last-child {
    opacity: 1;
    transform: rotate(-405deg);
}
input.menu ~ nav {
    visibility: hidden;
    background: rgba(255, 255, 255, 0.88);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 3;
    transition: .5s;
    z-index: 4;
    overflow: scroll;
}
input.menu ~nav > h1 {
    text-align: center;
    margin-top: 3em;
    color: #DB0058;
    text-shadow: 0px 0px 9px #969696;
}
input.menu ~ nav > ul {
    text-align: center;
}
input.menu ~ nav > a > ul {
    width: 44%;
    opacity: 1;
    transition: .5s;
    margin: 2em;
    box-shadow: 0px 0px 5px black;
    border-radius: 1em;
}
input.menu ~ nav > ul > li.odd { float: left; }
input.menu ~ nav > a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-family: sans-serif;
    display: block;
}
input.menu:checked ~ nav {
    visibility: visible;
    height: 100%;
}
input.menu:checked ~ nav > ul > li {
    opacity: 1;
    transition-delay: .5s;
    border-radius: 5px;
}
/* Blur + Gray Scale */
.hover10 {
    -webkit-filter: grayscale(0) blur(0);
    filter: grayscale(0) blur(0);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    box-shadow: 0px 0px 10px black;
}
.hover10:hover {
    -webkit-filter: grayscale(100%) blur(3px);
    filter: grayscale(100%) blur(3px);
    box-shadow: 0px 0px 10px black;
}
a {
    color: #900;
    text-decoration: none;
}
a:hover {
    color: red;
    position: relative;
}

.demo-2 {
    position:relative;
    width:300px;
    height:400px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(219, 0, 88, 0.7)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family: 'Roboto';
    font-size: 1em;
    line-height: 2.5em;
    text-align: right;
}
.demo-2 h2 {
    font-size:3em;
    line-height:24px;
    text-align: right;
    margin: 0;
    font-family: 'Roboto';
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
ul.effect img.top:hover {
    bottom:-175px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

@media (max-width: 1400px) {
    input.menu ~ nav > a > ul { width: 80% !important; }
}

@media (max-width: 800px) {
    .effect img { margin: -135px 0; }
}

@media (max-width: 650px) {
    p.zero { display: none; }

    .effect img { margin: -35px 0; }
}

@media (max-width: 550px) {
    .effect img { margin: 20px 0; }
}

@media (max-width: 450px) {
    .demo-2 h2 {
        font-size: 2em;
        text-align: center;
        left: 0;
    }

    .effect img { margin: 75px 0; }
}


/* GENERIC CSS - OVERWRITE MAIN.CSS ONLY FOR INDEX **/
#bg,
#bg div {
    height: 100%;
    top: 20px;
    left: 0;
}

strong {
    color: #373241;
    font-weight: 700;
}

header p {
    color: rgba(255, 255, 255, .85);
}

#header_center {
    margin: 12em auto;
    padding: 12em 0;
    text-align: center;
}
#header_center strong {
    color: whitesmoke;
}

@media screen and (max-width: 640px) {
    #header_center {
        margin: 3em auto;
        padding: 9em 0;
    }
}
#signup-form strong, #signup-form2 strong{
    color: whitesmoke;
}

.left,
.left_T {
    padding: 1em 0em;
    width: 32%;
    float: left;
    margin-right: 0.5%;
}
.left-sr{
    width: 24%;
    margin-right: 1%;
}

@media screen and (max-width: 900px) {
    div.left {
        float: none;
        width: 100%;
    }
}
@media screen and (max-width: 1100px) {
    div.left-sr {
        width: 32%;
        float: left;
        margin-right: 0.5%;
    }
}



#login-form{
    padding: 1em 0em 2em;
    margin-bottom: 2em;
}

a:hover .button, .button:hover, .copyright a:hover {
    color: white !important;
}

a.button:focus, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
    outline: none;
}

ul {
    list-style: none;
}

ul li {
   margin-bottom: 0.75em;
   text-align: left;
}

h1, h2, h3, h4, h5 {
    /*text-transform: uppercase;*/
    color: whitesmoke;
    font-weight: 700;
}

.button:active,
button:active,
input[type=submit]:active,
input[type=reset]:active,
input[type=button]:active {
    background-color: #FF1D78;
}



/* FIN GENERIC CSS - OVERWRITE MAIN.CSS ONLY FOR INDEX **/

/* NUEVOS ESTILOS DE PORTADA */

/** MENU NAVEGACIÓN Y MENÚ DE LOGIN **/
#login-form {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 2000;
    top: 44px;
    right: 0;
    background-color: #373241;
    border-radius: 0 0 25px 25px;
}

#login-form input {
    text-align: center;
}

.login-button {
    width: 200px;
    text-align: center;
} 

.hamburger-menu {
    display:none;
}

#sidebar {
    margin-left: -150px;
    top: 40px;
    width: 150px;
    min-height: 100vh;
    background-color: #b03567;
    transition-duration: 0.25s;
}

#sidebar ul li {
    background-color: #b03567;
    width: 150px;
    padding: 0;
    margin: 0;
}

#sidebar .menubtn {
    width: 100%;
}

.menubtn {
    padding: 0 25px;
}

#content {
    transition-duration: 0.25s;
}

@media (max-width: 1024px) {
    .extended-menu {
        display:none;
    }
    .hamburger-menu {
        display: inline;
    }

    #sidebar {
        margin-left: -150px;
    }
    #sidebar.active {
        transition-duration: 0.25s;
        transform: translateX(150px);
    }
    #content.active {
        transition-duration: 0.25s;
        transform: translateX(150px);
    }
}

/** FIN MENU NAVEGACIÓN Y MENÚ DE LOGIN **/

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    font-weight: normal;
    border-radius: 25px;
}
.big {
    font-size: 1.6em;
}

.colored {
    color: #ff1f78;
}

.vertical-align {
    display: flex;
    align-items: center;
}

footer {
    background-color: #ff1f78cc;
}

section {
    width: 100%;
    background-color: #ff1f78cc;
    color: whitesmoke;
    padding: 6em 0;
    text-align: center;
}

#menu {
    padding: 1.5em; 
}

.navbar {
    background-color: #b03567;
    padding: 0;
}

.fixed-top {
    position: fixed !important;
    z-index: 1030 !important;
}

#about {
    color: whitesmoke;
}

#about p {
    font-size: 1.3em;
}

.lightsection {
    color:#ff1f78;
    background-color: whitesmoke;
}

.lightsection h1, .lightsection h2, .lightsection h3, .lightsection h4, .lightsection h5 {
    color:#ff1f78;
}

#about strong {
    color: whitesmoke;
}

#about .block {
    padding: 0 2em;
}

#form .block:nth-child(2n) {
    margin-right: 0;
    margin-left: 4%;
}

#form .row {
    width: 95%;
}

#form .block {
    width: 42%;
    margin-bottom: 2em;
}


.block:nth-child(2n) {
    margin-right: 0;
    margin-left: 2%;
}

.block {
    width: 48%;
    margin-bottom: 2em;
}

.block section {
    padding: 2em 3em;
    border-radius: 25px;
    text-align: center;
    margin-bottom: 1em;
    background-color: whitesmoke;
    color: #373241;
}

@media (max-width: 1024px) {
    .block {
        width: 100% !important;
        margin-right: 0 !important;
    }
    .block:nth-child(2n) {
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {
    .block {
        padding-left: 0px;
    }
    .block section {
        padding: 0em;
    }
}


nav .button {
    border-radius: 0;
}

nav .button.active {
    background-color: #FF1D78;
}

#servicios header {
    height: 180px;
}
#equipo {
    background-color: transparent;   
}
#equipo h3, #servicios h3 {
    color: #ff1f78;
}

#equipo section {
    background-color: transparent; 
    color: whitesmoke;
    padding: 1em;
    height: 100%;
    border-radius: 25px;
}

#equipo section img {
    width: 200px;
    border-radius: 50%;
    margin-top: 2em;
    border: 2px solid white;
}

#equipo section header {
    height:100px;
}

#equipo section header h3 + p {
    margin-top: -1.2em;
    margin-bottom: 3em;
}

#equipo .zero {
    color: whitesmoke;;
    padding: 2em 0 0 0; 
    font-size: 1.3em;
}

#equipo  strong {
    color: whitesmoke;
}

#equipo div.row .left section {
    border-radius: 25px;
    padding: 1em 0;
}

#equipo div.row .left:nth-child(3n) {
    margin-right: 0 !important;
}

@media (max-width: 900px) {
    #equipo .zero {
        margin-bottom: 1em;
    }

    #equipo section img {
        width: 275px;
    }
    #equipo div.row .left {
        width: 100%;
        margin-right: 0;
    }
}

#clientes h2 {
    width: 100%;
}

#clientes p {
    font-size: 1.5em;
}

#clientes .one-column {
    display: none;
}

@media (max-width:900px) {
    #clientes .one-column {
        display: inline-block;
    }
    #clientes .two-columns {
        display: none;
    }
}
#form {
    background-color: transparent;
}

.fa-ul {
    margin-left: 1.5em;
}

#publicaciones a {
    color: #373241;
}

#publicaciones section {
    text-align: center;
    color: #373241;
    background-color: whitesmoke;
    padding: 2em 0;
}

@media (max-width:900px) {
    #publicaciones section header {
        max-height: 75px;
    }
}

/** MAPA DE GOOGLE CON SUS MEDIA QUERYS**/
.address-info {
    margin-bottom: 2em;
    text-align: left;
}

.address-info .row {
    width: 100%;
}

.address-info li.sky-tab-content-1 {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.smallmap iframe, .bigmap iframe, .minimap iframe{
    border-radius: 25px;
}

.minimap {
    display: none;
}

.smallmap {
    display: none;
}

.bigmap {
    display: block;
}

.sky-tabs {
    width: 100%;
}

@media (max-width: 1512px) {
    .smallmap{
        display: block;
    }
    .bigmap {
        display: none;
    }
}

@media (max-width: 500px) {
    .minimap {
        display: block;
    }
    .smallmap{
        display: none;
    }
    .bigmap {
        display: none;
    }
}

/** FIN MAPA DE GOOGLE CON SUS MEDIA QUERYS**/

/*** MATERIAL ICONS ***/
.material-icons.normal {
    font-size: 30px !important;  /* Preferred icon size */
}

.material-icons.medium {
    font-size: 40px !important;  /* Preferred icon size */
}

.material-icons.large {
    font-size: 100px !important;  /* Preferred icon size */
    margin-bottom: 20px;
}

/*** FIN MATERIAL ICONS ***/