@import url('https://fonts.googleapis.com/css?family=Montserrat');

#colorNav{
	text-align: center;
	z-index: 1000;
}

#colorNav li:hover{
	background-color: black;

}

#colorNav > ul{
	width: 90%;
	margin: 0 auto;
	position: relative;
	display: block;
}

#colorNav > ul > li{ /* will style only the top level li */
	list-style: none;
	width: 255px;
	height: 70px;
	display: inline-block;
	margin: 1px;
	border-radius: 3px;
	position: relative;
}

#colorNav p{
	color:black;
	cursor: hand;
	padding-top: 3px;
}

#colorNav a{
	color: #262626;
	text-transform: uppercase;
	font: 22px 'Montserrat', sans-serif;
	font-weight: bold;
}

#colorNav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	width:255px;
	top:50px;
	
	
	/* This is important for the show/hide CSS animation */
	max-height:0px;
	overflow:hidden;
	
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
}

#colorNav li ul li{
	background-color:#8ec355;
}

#colorNav li ul li a{
	padding:12px;
	color:#000;
	display:block;
	font: 15px 'Montserrat', sans-serif;
	font-weight: bold;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
	background-color:#689735;
}

#colorNav li ul li:hover{
	background-color:#344b1b;
}

#colorNav li ul li:first-child{
	border-radius:3px 3px 0 0;
	margin-top:25px;
	position:relative;
	z-index: 1000;

}

#colorNav li ul li:first-child:before{ /* the pointer tip */
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#689735;
	left:50%;
	top:-10px;
	margin-left:-5px;
	z-index: 1000;
}

/* This will trigger the CSS */
/* transition animation on hover */

#colorNav li:hover ul{
	max-height:200px; /* Increase when adding more dropdown items */
}


/*----------------------------
	Color Themes
-----------------------------*/


#colorNav li.black{
	background-color:#bfbfbf;
}

#colorNav li.green{		
	background-color:#c0dea0;
	z-index: 1000;
}

#colorNav li.red{		
	background-color:#ed9297;
}

#colorNav li.yellow{	
	background-color:#ffe680;
}

/*----------------------------
	Color Div Index Terapias
-----------------------------*/
#divter{
	margin: 30px 0 30px 0;
	display: inline-block;
	border-radius: 5px;
	width: 19.5%;
	height: 10%;
	text-align: center;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
}

/*----------------------------
	Color Div
-----------------------------*/

/*enfermedades gastrointestinales*/
#div1{
	margin-bottom: 30px;
	display: block;
	background-color: #9bc969;
	border-radius: 5px;
	width: 80%;
	-webkit-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	-moz-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
}

#div1 p{
	padding: 0 10px 15px 10px
}

/*neurología*/
#div2{
	margin-left: 60px;
	margin-bottom: 30px;
	display: block;
	background-color: #c0dca3;
	border-radius: 5px;
	width: 80%;
	-webkit-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	-moz-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
}

#div2 p{
	padding: 0 10px 15px 10px
}

/*sistema inmune*/
#div3{
	margin-left: 120px;
	margin-bottom: 30px;
	display: block;
	background-color: #e6ffb3;
	border-radius: 5px;
	width: 80%;
	-webkit-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	-moz-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
}

#div3 p{
	padding: 0 10px 15px 10px;
}

#div3 ul li{
	margin: 0;
	padding: 0;
}

/*síndromes dolorosos*/
#div4{
	margin-left: 180px;
	margin-bottom: 30px;
	display: block;
	background-color: #9bc969;
	border-radius: 5px;
	width: 80%;
	-webkit-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	-moz-box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
	box-shadow: 0px 0px 27px 1px rgba(0,0,0,0.63);
}

#div4 p{
	padding: 0 10px 15px 10px;
}


/*----------------------------
	Div preguntas frecuentes
-----------------------------*/

#big_side{
	float: left;
	display: inline-block;
	width: 75%;
}

#side_menu{
	float: right;
	display: inline-block;
	width: 25%;
	text-align: right;
}

#side_menu h3{
	color: #336600;
}

#side_menu ul li{
	list-style: none;
	margin-bottom: 20px;
	color: #336600;
}

#side_menu ul li a{
	color:black;
	color: #336600;
}

#side_menu ul li a:hover{
	color: #ff8080;
}

#half{
	float: left;
	display: inline-block;
	width: 50%;
}

#half2{
	margin-top: 50px;
	float: right;
	display: inline-block;
	width: 50%;
	text-align: right;
}

#wide{
	margin-top: 50px;
	display: inline-block;
	width: 100%;
}

/*----------------------------
	Inicio slider
-----------------------------*/
.slider {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: cambio 20s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}