:root 
{
    --verde: #a8d16b; 
    --gris: #839589;
    --gristexto: rgb(124, 126, 119);;
    --blanco: #ffffff;
}

body 
{
    background-color: rgba(206, 243, 150, 0.5);
}

#top 
{ 
    position: fixed; 
    font-family:verdana,arial; 
    font-size:11pt; 
    text-align:center; 
    top: -10px;                    /* Distancia hasta el borde superior */ 
    margin-left: 5px;
    width:98%; 
    background-color:white;  
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 9999;
    -webkit-box-shadow: 0px -9px 13px 5px rgba(102,102,102,0.73);
    -moz-box-shadow: 0px -9px 13px 5px rgba(102,102,102,0.73);
    box-shadow: 0px -9px 13px 5px rgba(102,102,102,0.73);
    
}  

#content
{
    position: relative; 
    border: 0px solid black;
    text-align:center; 
    top: -10px;
    margin-left: 5px;
    margin-bottom: -10px;
    padding-top: 155px;
    width:99.2%; 
    background-color:white;  
    -webkit-box-shadow: 0px -10px 13px 5px rgba(102,102,102,0.73);
    -moz-box-shadow: 0px -10px 13px 5px rgba(102,102,102,0.73);
    box-shadow: 0px -10px 13px 5px rgba(102,102,102,0.73);
}

#kidiatras
{
    display: inline-flex;
    width: 10%;
    text-align:center;
    border: 0px solid black;
    position: absolute;
    left: -140px;
    top:27px;
    -webkit-transition: -webkit-transform 1s ease;
    -moz-transition: -moz-transform 1s ease;
    -o-transition: -o-transform 1s ease;
    transition: transform 1s ease;
}

#kidigyne
{
    display: inline-flex;
    width: 10%;
    text-align:center;
    border: 0px solid black;
    position: relative;
    top:3px;
    right: -300px;
    -webkit-transition: -webkit-transform 1s ease;
    -moz-transition: -moz-transform 1s ease;
    -o-transition: -o-transform 1s ease;
    transition: transform 1s ease;
}

#contmenu
{
    display: inline-block;
    width: 55%;
    border: 0px solid black;
    position: relative;
    text-align: center;
    margin-left: 3%;
    top:-33px;
    right: -60px;
}

#menu li
{
    display:inline-block;
    font-family: chevin-pro, sans-serif;
    font-weight: bold;
    font-size: 18px;
}

#menu a
{
    
    color: var(--gristexto);
    text-decoration: none;
    border-radius: 7px;
    padding-left: 17px;
    padding-right:  17px;
    padding-top:  5px;
    padding-bottom:   5px;
    
}

#menu a:hover
{
    
    color: var(--blanco);
    transition: all 0.3s;
    background: var(--verde);
    border:1px solid --gris;
    text-shadow: black 0.1em 0.1em 0.2em;
    box-shadow:0px 0px 2px 2px #839589;
}

.fade-in
{
    animation: fadeIn 1.5s;
}

@keyframes fadeIn 
{
    from
    {
        opacity: 0;
    }

    to
    {
      opacity: 1;
    }
}

.fade-out
{
    animation: fadeOut 1s;
}

@keyframes fadeOut 
{
    from
    {
        opacity: 1;
    }

    to
    {
      opacity: 0;
    }
}

.kidilogoShow
{
    transform: translate(230px, 0px);
    -webkit-transform: translate(230px, 0px);
    -ms-transform: translate(230px, 0px);
    -o-transform: translate(230px, 0px);
    -moz-transform: translate(230px, 0px);

}

.kidigyneShow
{
    transform: translate(-230px, 0px);
    -webkit-transform: translate(-230px, 0px);
    -ms-transform: translate(-230px, 0px);
    -o-transform: translate(-230px, 0px);
    -moz-transform: translate(-230px, 0px);

}

#contenedor 
{
    top:0;
    left: 0;
    position: fixed;
    width: 100%;
    height:100%;
    background-color: rgb(255, 255, 255);
    z-index: 9999999;
    border: 0px solid black;
}
#menumodule
{
    position:fixed;
    margin-left:2%;
    margin-top:1%;
    width:92%;
    height:88%;
    background-color:var(--gris); 
    display:none;
    z-index: 9999999;
    border-radius: 15px;
    opacity:.85;
    padding: 1.5%;
    box-shadow:0px 0px 7px 7px var(--verde);
}
#moduleheader
{
    position:relative;
    width:100%;
    height:auto;
    border:0px solid white;
}

#manos
{
    position: relative;
    width:100%;
    height:auto;
    border:0px solid black;
}

#doctor
{
    position: relative;
    float:left;
    width:100%;
    height:460px;
    background-image:url(../imgs/doctor.jpg);
    background-repeat:no-repeat;
    background-position:center;
} 

#redessociales
{
    position: relative;
    float:left;
    width:100%;
    height:400px;
    background-color:#d7dfda;
    background-repeat:no-repeat;
    background-position:center;
} 
#splash 
{
    top:15%;
    left:0;
    position: relative;
    z-index: 999999;
    border: 0px solid black;
}
#webcontent
{
    width: 100%;
    height:100%;
    display:inline-flex;

}

#divcontent
{
    font-family: Comfortaa, sans-serif;
    color: var(--blanco);
    font-size: 40px;
}

#footer
{

    background-color: var(--gris);
    position: relative;
    bottom: 0;
    width: 100%;
    color: white;
    border-radius: 3px;
}

.text-title
{
    font-family: VagFont, sans-serif;
    color: var(--blanco);
    font-size: 60px;
}

#contacto
{
    position: relative;
    background-image: url("../imgs/contacto.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    width:100%;
    display:flex;
}

.contac
{
    width: 450px;
    margin: auto;
    background: rgba(0,0,0,0.4);
    padding: 10px 20px;
    box-sizing: border-box;
    margin-top: 15px;
    border-radius: 7px;
}

.contac h2
{
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 30px;
    margin-bottom: 20px;
}

.contac input, .contac textarea
{
    width: 100%;
    margin-bottom: 20px;
    padding: 7px;
    box-sizing: border-box;
    font-size: 17px;
    border:none;
}

.contac textarea
{
    min-height: 100px;
    max-height: 200px;
    max-width: 100%;
}

#boton
{
    background: #686868;
    color: #fff;
    padding: 20px;
    border-radius: 7px;
}
  
#boton:hover
{
    background:#31384a;
    text-shadow: black 0.1em 0.1em 0.2em;
    cursor: pointer;
}
  
@media (max-width: 480px)
{
    .contac
    {
        width: 100%;
    }
}

.gotop
{
    display:none;
	padding:9px;
	background:rgba(57, 64, 71,.6);
	font-size:20px;
	color:#fff;
    cursor:pointer;
    border-radius:5px;
	position: fixed;
	bottom:20px;
	right:20px;
    z-index: 66666;
}

.icon-arrow-up:before 
{
    content: "\279C";
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.gotop:hover
{
    background:rgba(143, 140, 140,.6);
    color:rgba(17,90,163, 1);
    transition: all 400ms ease-in;
}

.espectext
{
    top:-7px;
    left:2px;
    position: absolute;
    font-family: Comfortaa, sans-serif;
    font-size:11px;
    color:#475a2b;
    text-shadow: black 0.08em 0.08em 0.19em;
    cursor: pointer;
    display:inline-block;
    z-index: 99999;
}

.especlabels
{
    border:0px solid black;display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: VagFont;
    font-size: 28px;
    color:rgb(38, 52, 66)
}

.especlabels:hover
{
    cursor: pointer;
    box-shadow:0px 0px 4px 4px #4b4d49;
    text-shadow:1px 1px rgb(32, 122, 118);
    color:rgb(13, 43, 63);
    border-radius: 12px;
    transition: .6s;
    padding: 5px;
}

.especsinfo
{
    position:absolute;
    display: inline-block;
    margin: 0 auto;    
    width: 50%;
    height:77%;
    top:13%;
    left:-60%;
    background-color:rgb(180, 179, 175);
    z-index:9999;
    border-radius:12px;
    box-shadow:0px 0px 3px 3px var(--verde);
    font-family: VagFont, sans-serif;
    letter-spacing: 1px;
    color: var(--blanco);
    font-size: 25px;
}

#dimmer
{
    background:#000;
	background-color:#666666;
    opacity:0.6;
    position:relative; /* important to use fixed, not absolute */
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    z-index:999; /* may not be necessary */
}

#contespecs
{
    width:98%;
    height:84%;
    border:0px solid black;
    margin-top:15px;
    border-radius:10px;
    background-color: rgba(206, 243, 150, 0.5);
}

.underespecinfo
{
    background:#000;
	background-color:#666666;
    opacity:0.6;
    position:relative; /* important to use fixed, not absolute */
    top:0;
    left:0;
    width:100%;
    height:100%;

}

ul 
{
    list-style-type: disc;
    text-align: left;
    line-height: 35px;
}

hr
{
    color:white;
}