/* Default CSS */

     .colum1{
         margin-bottom: 10px;
         clear: both;
         width: 100%;
     }

     .colum2{
         padding-bottom: 10px;
         margin-bottom: 10px;
         text-align: left;
         width: 100%;
     }

/*-------------------------------------*/

     .lnknvl{
         border-radius: 15px;
         margin: 5px;
         width: 70%;
         padding: 5px;
         text-align: center;
     }

     .lnknvllft{
         float: left;
     }

     .lnknvlrght{
         float: right;
     }

     .lnktxt a{
         font-size: 14px;
         font-weight: bold;
         text-decoration: none;
     }

     .basicocor{
         background-color: #CD6100;
     }

     .basicocor a{
         color: white;
     }
 
     .mediocor{
         background-color: #0000FF;
     }

     .mediocor a{
         color: white;
     }

     .superior1cor{
         background-color: #FFCC00;
     }

     .superior1cor a{
         color: black;
     }

     .superior2cor{
         background-color: #FF0000;
     }

     .superior2cor a{
         color: white;
     }

     .math1cor{
         background-color: #86EDF5;
     }

     .math1cor a{
         color: black;
     }

     .math2cor{
         background-color: #FF8C00;
     }

     .math2cor a{
         color: black;
     }

/*-------------------------------------*/

     .imgm{
         text-align: center; 
     }

     .imgm1{
         height: auto;
         width: 100%;
         max-width: 378px;
         text-align: center;
     }

     .imgm2{
         height: auto;
         width: 100%;
         max-width: 299px;
         text-align: center;
     }

     .info{
         border-radius: 10px;
         padding: 10px 20px 10px 20px; 
         text-align: left;
         background-color: #DDDDDD;
         width: auto;
     }

     .info1{
         display: none;
     }

     .info2{
         display: block;
     }

/*-----------------------------------------*/

     @media only screen and (min-width: 601px) {

       .colum1{
           display:flex;
           clear: both;
           float: none; 
           padding: 0px 0px 20px 0px;
           width:auto;
       }

       .colum2{
            width: 50%;
       }

      .info{
            padding: 10px 20px 10px 20px; 
            text-align: justify;
       }

       .info1{
            display: block;
       }

       .info2{
            display: none;
       }

     }