@charset "UTF-8"; 

body{font-family:"Segoe UI",Verdana;background-color:white;}

/* Responsive using @media with wix sites is not necessary because reescaling and responsive is made by wix itself BUTTTT Have the problem of let horizontal scrolling*/
.tapar {   /*set like absolute to the "Banner" or rectangle to hide the wix publicity from free sites  this is the general setup*/
      position: absolute;
      left: 0px;
      top: 0px;
      height: 60px;
      
      margin-bottom: 1em;
      
      border: 0px solid black;
      background-image: url("BannerTap.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
}
.contentResponsive iframe{  /*ever the iframe that containg the wix site or free site fill the window*/
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
}


/*Now set the Width size responsive to each resolution screen custom setup*/


/* Mobile Styles */
@media only screen and (max-width: 350px) {
   .tapar {   
      
      width: 325px;
     
    }
}
@media only screen and (min-width: 351px) and (max-width: 400px) {
   .tapar {   
      
      width: 362px;
     
    }
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
    .tapar {   /*set like absolute to the "Baner" or rectangle to hide the wix publicity from free sites*/
      
      width: 1200px;
     
    }
}

/* Desktop Styles */
@media only screen and (min-width: 960px)and (max-width: 1800px) {
   .tapar {   /*set like absolute to the "Baner" or rectangle to hide the wix publicity from free sites*/
      
      width: 1507px;
      
    }
}@media only screen and (min-width: 1801px) {
   .tapar {   /*set like absolute to the "Baner" or rectangle to hide the wix publicity from free sites*/
      
      width: 2500px;
      
    }
}




/*------------END-------------------*/













/*OLD #header{font-size:17px;line-height:26px;width:860px;margin:0 auto;margin-top:4px;padding:6px;border:1px solid #ddd;} 
#page{width:98%;padding:10px;margin:0 auto;margin-top:6px;}
#migaspan{font-size:14px;margin-top:6px;}
#bar{background-color:#89c53f;width:96%;border:1px solid #ddd;padding:16px 10px 16px 10px;margin:0 auto;font-size:40px;}
.footer{font-size:0.8em;background-color:#edeff4;text-align:center;padding:6px;}
h1,h2,h3,h4{font-family:"Trebuchet MS",serif;font-weight:normal;}
h1{font-size:30px;line-height:30px;margin:16px 0 16px 0;}
h2{font-size:24px;line-height:28px;margin:20px 0 16px 0;}
h3{font-size:22px;margin:16px 0 16px 0;}
h4{font-size:20px;margin:4px 0 2px 0;}
img{max-width:100%;height:auto;border:0;}
.enlaces{border:1px solid #ccc;padding:16px;margin:12px 0 12px 0;line-height:30px;border-radius:10px;width:500px;}
.intro{border:1px solid #7fb1fc;padding:8px;margin:12px 0 12px 0;border-radius:8px;}

/*used status.php*
.datStatus{font-size:18px;color:#526d1c;text-align:left;padding:0px;margin:4px 0 2px 0;}  
 /*used cursos_home.php*
#container1{font-size:17px;line-height:26px;width:100%;margin:0 auto;margin-top:4px;padding:6px;border:0px solid #ddd;} 
#main{width:70%;padding:5px;margin-left: 5px;margin-top:5px;float: right;}
#mySelect{width:50%;padding:8px;margin:8px 0 8px 0;margin-top:5px;font-size:20px;}
.left {
    padding: 4.310344827586206896551724137931%;
    background-color:#d3f490;
    float: left;
    width: 10%;
    margin-right: 10px;
}
.gridleft {
    margin-right: 10px;
}



#main{width:70%;}
#mySelect{width:50%;}
.left {
    width: 10%;
    margin-right: 10px;
}
.gridleft {
    margin-right: 10px;
}
#header{width:98%;}}
.left {
    width: 10%;
    margin-right: 10px;
}
.gridleft {
    margin-right: 10px;
}




@media screen and (min-width:300px) and (max-width:860px) {
    #header{width:98%;}
}


@media screen and (min-width:300px) and (max-width:800px) { /*Mobile distribution Landscape*
    #header{width:98%;padding:2px;font-family:"Segoe UI",Verdana;font-size:15px;line-height:24px;border:0;}
    #page{padding:4px;}
    #barra{padding:10px 0 10px 10px;font-size:27px;border:0;width:98%;}
    #migaspan{font-size:12px;margin-top:2px;}
    h1,h2{margin:14px 0 10px 0;}
    h1{font-size:1.7em;line-height:1.2em;}
    h2{font-size:1.5em;}
    h3{font-size:1.3em;}
    h4{font-size:1.2em;}
    .enlaces{width:92%;}
    
    #demoCanvas{/*Adjust Size Map*
        width: 480px;
        height: 288px;
    }
    #video{/*Adjust Size Map*
        width: 480px;
        height: 288px;
    }
    #player{/*Adjust Size Map*
        width: 480px;
        height: 288px;
    }
    /*#header{border:5px solid #0f1;} *
}


/*@media screen and (max-width:479px) {
    #header{font-size:14px;line-height:22px;}
    #main{width:100%}
    .left {
        width: 100%;
        margin-right: 90px;
    }
    .gridleft {
        margin-right: 90px;
    }
    
    #demoCanvas{
        width: 400px;
        height: 240px;
        
    }
    #header{border:5px solid #00f;} 

}*

@media screen and (max-width:512px) { /*Mobile distribution Portraid*
    #main{width:100%}
    .left {
        width: 100%;
        margin-right: 90px;
    }
    .gridleft {
        margin-right: 90px;
    }
    .datStatus{font-size:14px;}
    /*#header{border:5px solid #f01;} *
    #demoCanvas{/*Adjust Size Map*
        width: 340px;
        height: 204px;
    }
    #video{/*Adjust Size Map*
        width: 340px;
        height: 204px;
    }
    #player{/*Adjust Size Map*
        width: 340px;
        height: 204px;
    }
}
*/