*{margin:0px; padding:0px;}


/*first gen*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
body {width: 100%; margin-bottom:180px;}

#index {width:100%;}
#index h1 {font-size:70px; top:120px;}
#index p {display:none;}
#butempezar {position: fixed; font-size:16px; padding:10px; bottom:30px; border: solid 6px;}

#menuresponsive {display:block; width:100%; background: linear-gradient(#fff, #444); padding:2px; position:fixed; bottom:0px; z-index: 1; text-align:center; font-size:10px; padding:5px;}
#menuresponsive img {margin-right:16px; width:3%;}
.title {background:linear-gradient(#444, #fff); color:#000; font-weight: bold;}
#especialidad {font-size:18px; letter-spacing:3px; line-height:16px;}
#esquemalateral {display:none;}
#contenedor{width:90%; position: relative; top: 80px;}
#contenedor h3 {padding:10px;}
.descripcion2{width:85%; font-size:18px;}
.descripcion3{width:90%; margin-left:5%;}
.descripcion3 p {font-size:12px;}

#fin1 {width:90%;}
#fin2{width:90%;}
#paypal {position: relative;}
#paypal form {padding-bottom:100px;}
#imgfondo {display:none;}

select {font-size:12px;}

.but2 {width:95%;font-size:10px; padding:10px; margin:2px;}
#contenBasicos {width:45%; font-size:14px;}
#contenCCAA {width:45%; font-size:14px;}
#conbas #butcon .but {font-size:6px; padding: 8px; margin-left:-10px; width:98%;}
#CCAA .but2 {width:49%; margin-left:-10px; padding:8px; font-size:6px;}

#curso h2 {padding:20px; font-size:24px;}

.butmateria {width:80%; font-size: 20px; height:100px; line-height: 10px;}
.but {font-size:10px;}
.butoutro{width:50%; font-size:10px;}
}


/*smartphone and ipad*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
body {width: 100%; margin-bottom:180px;}

#index h1 {top:100px;}
#index p {display:none;}
#butempezar {position: fixed; font-size:16px; padding:10px; bottom:30px; border: solid 6px;}

#menuresponsive {display:block; width:100%; background: linear-gradient(#fff, #444); padding:2px; position:fixed; bottom:0px; z-index: 1; text-align:center; font-size:10px; padding:5px;}
#menuresponsive img {margin-right:16px; width:3%;}
.title {background:linear-gradient(#444, #fff); color:#000; font-weight: bold;}
#especialidad {font-size:18px; letter-spacing:3px; line-height:16px;}
#esquemalateral {display:none;}
#contenedor{width:90%; position: relative; top: 80px;}
.descripcion2{width:85%; font-size:18px;}
.descripcion3{width:90%; margin-left:5%;}
.descripcion3 p {font-size:12px;}

#fin1 {width:90%;}
#fin2{width:90%;}
#paypal {position: relative; padding-bottom:100px; width:100%; margin-right:20%; margin-left: 20%;}
#imgfondo {display:none;}

select {font-size:12px;}

.but2 {width:95%;font-size:10px; padding:10px; margin:2px;}
#contenBasicos {width:45%; font-size:14px;}
#contenCCAA {width:45%; font-size:14px;}
#conbas #butcon .but {font-size:6px; padding: 8px; margin-left:-10px; width:98%;}
#CCAA .but2 {width:49%; margin-left:-10px; padding:8px; font-size:6px;}

#curso h2 {padding:20px; font-size:24px;}

.butmateria {width:80%; font-size: 20px; height:100px; line-height: 10px;}
.but {font-size:10px;}
.butoutro{width:50%; font-size:10px;}
}


/*portratit and landscape tabs*/
@media only screen and (min-width: 769) and (max-width: 1024px){
body {width: 100%; margin-bottom:180px;}

#index h1 {top:100px;}
#index p {display:none;}
#butempezar {position: fixed; font-size:16px; padding:10px; bottom:30px; border: solid 6px;}

.title {font-size:30px; background:linear-gradient(#444, #fff); color:#000;}

#menuresponsive {display:block; width:100%; background: linear-gradient(#fff, #444); padding:2px; position:fixed; bottom:0px; z-index: 1; text-align:center; font-size:10px; padding:5px;}
#menuresponsive img{width:3%; margin-right:22px;}
#esquemalateral {display:none;}

#especialidad {letter-spacing: 1px; font-size:14px;}

}


/*big screen*/
@media only screen and (min-width: 1025px){
body {width: 100%; margin-bottom:180px;}

#index {width:100%;}
#index h1 {font-size:160px; top:110px;}
#index p {font-size:24px; top:160px;}
#butempezar {width:100%; font-size:20px; padding:20px; margin-bottom: 10px;}

#esquemalateral {padding:20px;}
#menuresponsive {display:none;}

#curso h2 {padding:20px;}
#contenedor h3 {padding:24px; font-size:36px;}
.descripcion2 {top:100px;}
#butobj1{position:relative; top:-30px;}
}


/*landscape*/
@media only screen and (min-width: 320px) and (max-width: 1024px) {
body {width: 100%; margin-bottom:180px;}

#index h1 {top:50px; font-size:100px;}
#index p {display:none;}
#butempezar {position:relative; top:100px; padding: 4px; border: solid 6px; font-size:16px;}

.title {font-size:24px; background:linear-gradient(#444, #fff); color:#000;}
#menuresponsive {display:block; width:100%; background: linear-gradient(#fff, #444); padding:2px; position:fixed; bottom:0px; z-index: 1; text-align:center; font-size:10px; padding:5px;}
#menuresponsive img{margin-right:22px; width:3%;}
#esquemalateral {display:none;}

#especialidad {letter-spacing: 1px; font-size:14px;}

#imgfondo {position:relative; top: 100px; width: 20%;}
#paypal {margin-left:0px; width:90%;}
#paypal form {text-align:center;}

}