@media screen and (max-width: 400px) {
 .visual {width:100%;margin:0;}
}
 @media only screen and (max-device-width: 400px) and (orientation : portrait) {
.visual {width:100%;margin:0;}
}
@media screen and (max-width: 600px) {
img#tit {width:97%;margin:5% 0 3% 3%;}
h1 {width:100%;}
#container {display:none;}
#barra {width:100%;margin: 0;}
#navlist {width:100%;margin: 0;}
#navlist li {width:100%;line-height:1.3em;font-size:90%;margin:0;padding:0;text-align:left;}
#barra a, #navlist li.extend {
box-shadow:none;
border:none; font-family:arial, helvetica, sans-serif; text-decoration:none;font-weight:bold; color: #FFFFFF;
 background-color: #7d7e7d; background-image: -webkit-gradient(linear, left top, left bottom, from(#7d7e7d), to(#0e0e0e));
 background-image: -webkit-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -moz-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -ms-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -o-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: linear-gradient(to bottom, #7d7e7d, #0e0e0e);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7d7e7d, endColorstr=#0e0e0e);
height:auto;
margin: 0;
display: block;
text-decoration: none;
color: #FFFFFF;
padding:0.8em 0 0.8em 1em;
}
#barra a:hover, #barra a#current
{ border:none;
 background-color: #646464; background-image: -webkit-gradient(linear, left top, left bottom, from(#646464), to(#282828));
 background-image: -webkit-linear-gradient(top, #646464, #282828);
 background-image: -moz-linear-gradient(top, #646464, #282828);
 background-image: -ms-linear-gradient(top, #646464, #282828);
 background-image: -o-linear-gradient(top, #646464, #282828);
 background-image: linear-gradient(to bottom, #646464, #282828);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#646464, endColorstr=#282828);
text-decoration: none;
color:#FFFFFF;
}
#magia-services {width:96%;padding:0 2% 4% 2%;}
.magia-center {float:left;width:96%;padding:2%;}
#services {
font-size:0.9em;
width:80%;
margin:0 auto;
padding:0;
text-align:center;
display: block;
height:auto;
float:none;
}
#services li {
letter-spacing:1px;
margin:0 0 4% 3%;
list-style: none;
float:none;
}
.copy {font-size:0.9em;margin:0.5em 0 0 0;}
.bottom1 {width:95%;float:left;padding:1% 3% 1.5% 2%;}
.bottom2 {width:96%;margin:0 0 2% 2%;line-height:1.5em;}
.perfil h2 {font-size:1.3em;font-weight:bold;color:#FFCE49;margin:0.3em 0 0 0;}
.visual {margin:1em 1em 0 0;clear:left; }
}

 @media only screen and (max-device-width: 600px) and (orientation : portrait) {
 img#tit {width:97%;margin:5% 0 3% 3%;}
 #container {display:none;}
#barra {width:100%;}
#navlist {width:100%;}
#navlist li {width:100%;line-height:1.3em;font-size:90%;margin:0;padding:0;text-align:left;}
#barra a, #navlist li.extend {
box-shadow:none;
border:none; font-family:arial, helvetica, sans-serif; text-decoration:none;;font-weight:bold; color: #FFFFFF;
 background-color: #7d7e7d; background-image: -webkit-gradient(linear, left top, left bottom, from(#7d7e7d), to(#0e0e0e));
 background-image: -webkit-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -moz-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -ms-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: -o-linear-gradient(top, #7d7e7d, #0e0e0e);
 background-image: linear-gradient(to bottom, #7d7e7d, #0e0e0e);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7d7e7d, endColorstr=#0e0e0e);
height:auto;
margin: 0;
display: block;
text-decoration: none;
color: #FFFFFF;
padding:0.8em 0 0.8em 1em;
}
#barra a:hover, #barra a#current
{ border:none;
 background-color: #646464; background-image: -webkit-gradient(linear, left top, left bottom, from(#646464), to(#282828));
 background-image: -webkit-linear-gradient(top, #646464, #282828);
 background-image: -moz-linear-gradient(top, #646464, #282828);
 background-image: -ms-linear-gradient(top, #646464, #282828);
 background-image: -o-linear-gradient(top, #646464, #282828);
 background-image: linear-gradient(to bottom, #646464, #282828);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#646464, endColorstr=#282828);
text-decoration: none;
color:#FFFFFF;
}
#tit {width:97%;margin:5% 0 3% 3%;}
#magia-services {width:96%;padding:0 2% 4% 2%;}
.magia-center {float:left;width:96%;padding:2%;}
.magiaint {float:right;width:98%;margin:2%;clear:left;}
#services {
font-size:0.9em;
width:80%;
margin:0 auto;
padding:0;
text-align:center;
display: block;
height:auto;
float:none;
}
#services li {
letter-spacing:1px;
margin:0 0 4% 3%;
list-style: none;
float:none;
}
.copy {font-size:0.9em;margin:0.5em 0 0 0;}
.bottom1 {width:95%;float:left;padding:1% 3% 1.5% 2%;}
.bottom2 {width:96%;margin:0 0 2% 2%;line-height:1.5em;}
.perfil h2 {font-size:1.3em;font-weight:bold;color:#FFCE49;margin:0.3em 0 0 0;}
.visual {margin:1em 1em 0 0;clear:left; }
}
 

/* iPads (portrait and landscape) ----------- */
 @media only screen and (max-device-width: 768px) and (orientation : landscape) {
video {display:none;}
}
@media screen and (max-device-width: 768px) {
video {display:none;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
img#tit {width:40%;margin:1% 0 0 3%;}
#barra {width:100%;}
#navlist {width:100%;}
#navlist li {
line-height:1.3em;
font-size:85%;
margin:0 0 0 4%;
padding:0.5% 0 0.5% 0;
}
#magia-services {width:99%;padding:0 0 4% 1%;}
.magia-center {width:29%;padding:2%;}
.bottom1 {width:95%;float:left;padding:1% 3% 1.5% 2%;}
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
img#tit {width:40%;margin:1% 0 0 3%;}
#barra {width:100%;}
#navlist {width:100%;}
#navlist li {
line-height:1.3em;
font-size:85%;
margin:0 0 0 2%;
padding:0.5% 0 0.5% 0;
}
#tit {width:70%;margin:1% 0 0 3%;}
#magia-services {width:99%;padding:0 0 4% 1%;}
.magia-center {width:29%;padding:2%;}
.bottom1 {width:95%;float:left;padding:1% 3% 1.5% 2%;}
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
img#tit {width:40%;margin:1% 0 0 3%;}
#barra {width:100%;}
#navlist {width:100%;}
#navlist li {
line-height:1.3em;
font-size:85%;
margin:0 0 0 2%;
padding:0.5% 0 0.5% 0;
}
#magia-services {width:99%;padding:0 0 4% 1%;}
.magia-center {width:29%;padding:2%;}
.bottom1 {width:95%;float:left;padding:1% 3% 1.5% 2%;}
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
 }

 
@media screen and (min-width: 601px) and (max-width: 767px) {
#multimedia {display:none;}
.magia-center {width:46%;}
img#tit {width:50%;margin:1% 0 3% 3%;}
#barra {width:100%;}
#navlist {width:100%;}
#navlist li {
line-height:1.3em;
font-size:85%;
margin:0 0 0 2%;
padding:0.5% 0 0.5% 0;
}
#magia-services {width:99%;padding:0 0 4% 1%;}
.magia-center {width:29%;padding:2%;}
.bottom1 {width:95%;float:left;padding:1% 3% 1.5% 2%;}
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
.magia-center {float:left;width:96%;padding:2%;}
.magiaint {float:right;width:45%;margin:2.5em 1em 0.5em 1em;clear:left;}
#services {font-size:0.7em;
width:97%;
margin:0 auto;
padding:1% 3% 0 0;
}
}


@media screen and (min-width: 768px) and (max-width: 1142px) {
#barra {width:100%;}
#navlist {width:100%;}
#magia-services {width:99%;padding:0 0 4% 1%;}
.magia-center {width:29%;padding:2%;}
.bottom1 {width:95%;float:left;padding:1% 3% 1.5% 2%;}
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}


@media screen and (min-width: 768px) and (max-width: 960px) {
#multimedia {display:none;}
.magia-center {width:46%;}
img#tit {width:40%;margin:1% 0 3% 3%;}
#navlist li {
line-height:1.3em;
font-size:85%;
margin:0 0 0 2%;
padding:0.5% 0 0.5% 0;
}
#navlist {float:none; margin:0 auto;}
}

@media screen and (min-width: 961px) and (max-width: 1031px) {
img#tit {width:35%;margin:0 0 0 3%;}
#navlist li {
line-height:1.3em;
font-size:85%;
margin:0 0 0 2%;
padding:0.5% 0 0.5% 0;
}
}
@media screen and (min-width: 1030px) and (max-width: 1142px) {
img#tit {width:33%;margin:0 0 0 3%;}
#navlist li {
line-height:1.3em;
font-size:90%;
margin:0 0 0 3%;
padding:0.5% 0 0.5% 0;
}
}
@media screen and (min-width: 1143px) and (max-width: 1274px) {
img#tit {width:30%;margin:0 0 0 3%;}
#navlist li {
line-height:1.3em;
font-size:95%;
margin:0 0 0 3%;
padding:0.5% 0 0.5% 0;
}
}