.btn-flotante {
	font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	border-radius: 20px; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #25D366; /* Color de fondo */
    padding: 2px;
	position: fixed;
	bottom: 40px;
	right: 40px;
	transition: all 300ms ease 0ms;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	z-index: 99;
}
.btn-flotante img {
	width: 50px;
    height: 50px;
}
.btn-flotante:hover {
	background-color: #9DBB32; /* Color de fondo al pasar el cursor */
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-15px);
}
@media only screen and (max-width: 1300px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 20px;
	}
}
  
body { margin: 0px; 
    /*font-family: 'segoe ui';*/
    font-family: 'segoe ui';
 }

.loading {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    background: rgba(0, 0, 0, 0.8);
  }
  .loading  .spinner:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border-top: 3px solid #FFFFFF;
    border-right: 3px solid transparent;
    animation: spinner 0.6s linear infinite;
  }
  @keyframes spinner { to { transform: rotate(360deg); } }

.BGBodyIndex {
    background: url("../img/BGBodyindex.jpg") no-repeat center center fixed;  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

  
/* CSS barra navegador */
.NavTop {
    height: 70px;
    width: 100%;
    background-color: #111111;
    position: relative;
}
    .NavTop  #NavCheck { display: none; }
    .NavTop  .NavTop-Cabezado { display: inline;}
    .NavTop  .NavTop-Cabezado  .NavTop-Titulo {
        display: inline-block;
        font-size: 22px;
        color: #fff;
        padding: 10px 10px 10px 10px;
        margin-top: 7px;
        font-weight: bold;
    }
    .NavTop  .NavTop-Cabezado  img{
        width: 50px; 
        float: left;
        margin: 10px;
    }
    .NavTop  .NavTop-btn { display: none; }
    .NavTop  .NavTop-links {
        display: inline;
        float: right;
        font-size: 20px;
    }  
    .NavTop  .NavTop-links > a {
        display: inline-block;
        padding: 15px 10px 15px 10px;
        text-decoration: none;
        color: #efefef;
    }  
    .NavTop  .NavTop-links  a:hover { opacity: 0.3;} 
    .NavTop  .NavTop-links  .btnlogin {
        display: inline-block;
        padding: 15px 10px 15px 10px;
        text-decoration: none;
        color: #ff7844;
    }
    .NavTop  .NavTop-links  .btnlogin:hover {
        opacity: 0.7;
        text-decoration: underline #ff9d77;
    }

    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) {
        .NavTop  .NavTop-btn {
          display: inline-block;
          position: absolute;
          right: 0px;
          top: 0px;
        }
        .NavTop  .NavTop-btn > label {
          display: inline-block;
          width: 50px;
          height: 50px;
          padding: 10px;
        }
        .NavTop  .NavTop-btn  label:hove, .NavTop  #NavCheck:checked ~ .NavTop-btn  label{ background-color: rgba(0, 0, 0, 0.3); }
        .NavTop  .NavTop-btn  label  span {
          margin-left: 10px;
          display: block;
          width: 25px;
          height: 10px;
          border-top: 2px solid #eee;
        }
        .NavTop  .NavTop-links {
          position: absolute;
          display: block;
          width: 100%;
          background-color: #333;
          height: 0px;
          transition: all 0.3s ease-in;
          overflow-y: hidden;
          top: 70px;
          left: 0px;;
          z-index: 1;
        }
        .NavTop  .NavTop-links  a {
          display: block;
          width: 100%;
        }
        .NavTop  #NavCheck:not(:checked) ~ .NavTop-links {
          height: 0px;
        }
        .NavTop  #NavCheck:checked ~ .NavTop-links {
          height: calc(100vh - 50px);
          overflow-y: auto;
        }
    }
    /*Medida CSS Plantallas Grande*/
    @media (max-width:1300px) {

    }


/* CSS Carrusel */
.Carrusel {
    position: relative;
    width:100%;
    margin: auto;
    }
    .Carrusel  .Slide {
        display: none;
        padding: 80px;
        text-align: center;
    }

    .Carrusel  .prev, .Carrusel  .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -30px;
        padding: 16px;
        color: #888;
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        display: none;
    }
    .Carrusel  .next {
        position: absolute;
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    .Carrusel .prev:hover, .Carrusel .next:hover {color: white; }
    .Carrusel .Slide > .Texto{
        font-size:24px;
        color:#FFF;
        font-style:italic;
        text-shadow:.5px 0px #b14943; 
    }
    .Carrusel  .Slide  .Texto  .Comillas { font-size:30px; padding:0 3px 3px; position:inherit;}
     

    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) {      
        .Carrusel  .Slide  .Texto{ font-size:15px; margin-top: 20px; }
        .Carrusel  .Slide  .Texto  .Comillas { font-size:15px; padding:0 1px 1px;}
        .Carrusel  .Slide {padding: 10px; }
    }



/* CSS Banner Section1 */
.Section1  .BoxBanner .Title{
    font-weight: bold;
    text-align: center;
    font-size:24px;
    color:#FFF;
    padding: 5px;
}
.Section1 .BoxBanner  .SubTitle{
    text-align: center;
    font-size:18px;
    color:#FFF;
    padding: 5px;
}
.Section1 .BoxBanner .Texto{
    text-align: center;
    font-size:18px;
    color:#FFF;
    padding: 5px;
}
.Section1 .BoxBanner button{
    background: rgb(255,83,17);
    background: linear-gradient(160deg, rgba(255,83,17,1) 0%, rgba(255,108,51,1) 61%, rgba(255,120,68,1) 100%);
    border-radius: 10px;
    border: none;
    color: white;
    padding: 10px 15px;
    margin-top: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 40%;
    cursor: pointer;
}
.Section1 .BoxBanner button:hover{ 
    background: rgb(255,120,68);
    background: linear-gradient(160deg, rgba(255,120,68,1) 0%, rgba(255,108,51,1) 28%, rgba(255,83,17,1) 70%);
 }


/*Medida CSS SmartPhone*/
@media (max-width:1300px) {  
    .Section1 .Box3{display: none;}
    .Section1 .BoxBanner .Title{font-size:20px; margin-top: 80px;}
    .Section1 .BoxBanner .SubTitle{font-size:18px;}
    .Section1 .BoxBanner .Texto{font-size:16px;}
}







/* CSS Banner Section2 */
.Section2 {
    background: url("../img/Section2.jpg") no-repeat center fixed; 
    position: relative;
    margin-top: 50px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
    .Section2 .Title{    
        text-align: center;
        color:#FFF;
        padding: 25px;
    }
    .Section2 .SubTitle{    
        text-align: center;
        font-size:70px;
        color:#Ff7844;
        padding: 10px;
        font-weight: bold;
    }
    .Section2 .Texto{        
        text-align: center;
        font-size:18px;
        color:#FFF;
        padding: 5px;
    }
    .Section2 .Banner{    
        margin: 20px;
        background-color: #111111;
        border-radius: 10px;
        border: none;
        height: 350px;
    }
    .Section2 .Banner img{    
        padding: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .Section2 .Banner .BoxTitle{    
        color: #fff;    
        font-weight: bold;
        text-align: center;
        font-size:24px;
        padding: 5px;
    }
    .Section2 .Banner .BoxTexto{  
        color: #fff;  
        text-align: center;
        font-size:18px;
        padding: 5px;
    }



/* CSS Banner background3 */
.Section3 {
    background: url("../img/Section3.jpg") no-repeat center fixed; 
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
    .Section3 .Title{    
        text-align: center;
        color:#FFF;
        font-size:30px;
        margin-top: 20px;
    }
    .Section3 .SubTitle{    
        text-align: center;
        color:#FFF;
        padding: 10px;
        font-size:20px;
    }
    .Section3 .Banner1{
        margin: 10px;
        padding: 10px;
        background-color: #111111;
        border-radius: 10px;
        border: none;
    }
    .Section3 .Banner1 .Texto{
        font-size:20px;
        color:#fff;
    }
    .Section3 .Banner1 img{ 
        height: 18px;
        width: 20px;
        margin-right: 10px;
        margin-left: 10px;
    }
    .Section3 .Banner2{
        height: 270px;
        margin: 10px;
        background-color: #FFF;
        border-radius: 10px;
        border: none;
    }
    .Section3 .Banner2 img{ 
        height: 100%;
        width: 100%;
        border-radius: 10px;
    }
    .Section3 .Banner2 .Title{    
        text-align: center;
        color:#FF7844;
        font-size:30px;
        margin-top: 10%; 
        font-weight: bold;
    }
    .Section3 .Banner2 .SubTitle{    
        text-align: center;
        color:#1C1C1C;
        padding: 10px;
        font-size:20px;
    }


    .Section3 .Banner2 .button{        
        background: rgb(255,83,17);
        background: linear-gradient(160deg, rgba(255,83,17,1) 0%, rgba(255,108,51,1) 61%, rgba(255,120,68,1) 100%);
        border-radius: 10px;
        border: none;
        color: white;
        padding: 10px 15px;
        margin-top: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-left: 40%;
        cursor: pointer;
        
    }
    .Section3 .Banner2 .button:hover{ 
        background: rgb(255,120,68);
        background: linear-gradient(160deg, rgba(255,120,68,1) 0%, rgba(255,108,51,1) 28%, rgba(255,83,17,1) 70%);
    }


/*Medida CSS SmartPhone*/
@media (max-width:1300px) {  
    .Section3 .Banner1 .Texto{
        font-size:16px;
    }
    .Section3 .Banner2{
        height: 220px;
    }
    .Section3 .Banner2 .Title{    
        font-size:20px;
    }
    .Section3 .Banner2 .SubTitle{    
        font-size:15px;
    }
    .Section3 .Banner2 .button{ 
        margin-left: 25%;
    }
}



/* CSS Banner background4 */
.Section4 {
    background: url("../img/Section4.jpg") no-repeat fixed; 
    position: relative;
}
    .Section4 .Title{    
        text-align: center;
        color:#FFF;
    }
    .Section4 .SubTitle{    
        text-align: center;
        color:#FFF;
    }
    .Section4 video{    
        height: 450px;
        width: 100%;
        margin: auto;
        padding: 20px;
        
    }

    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) {  

        .Section4 video{    
            height: 300px;
            
        }
    }



/* CSS Banner background5 */
.Section5 {
    position: relative;
}
    .Section5 .Title{    
        text-align: center;
        color:#FFF;
    }
    .Section5 .SubTitle{    
        text-align: center;
        color:#FFF;
    }
    .Section5 .Banner{
        margin: 10px;
    }
    .Section5 .Header{
        background: rgb(255,83,17);
        background: linear-gradient(160deg, rgba(255,83,17,1) 0%, rgba(255,108,51,1) 61%, rgba(255,120,68,1) 100%);
        padding: 10px;
        color:#FFF;
        text-align: center;
        border-radius: 10px 10px 0px 0px;
    }
    .Section5 .Container{
        padding: 20px;
        height: 220px;
        background-color: #111111;
        border-radius: 0px 0px 10px 10px;
    }
    .Section5 .Container img{ 
        height: 18px;
        width: 20px;
        margin-right: 10px;
        margin-left: 10px;
    }
    .Section5 .Container .Texto{
        color:#FFF;
        margin: 5px;
    }

    .Section5 .Container .button{ 
        background: rgb(255,83,17);
        background: linear-gradient(160deg, rgba(255,83,17,1) 0%, rgba(255,108,51,1) 61%, rgba(255,120,68,1) 100%);
        border-radius: 10px;
        border: none;
        color: #FFF;
        padding:6px 12px;
        margin-top: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
    }
    .Section5 .Container .button:hover{ 
        background: rgb(255,120,68);
        background: linear-gradient(160deg, rgba(255,120,68,1) 0%, rgba(255,108,51,1) 28%, rgba(255,83,17,1) 70%);
    }


    .Section5 .Container .MinText{ 
        color:#666;
        margin: 5px;
        text-align: center;
        
    }

    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) {  

        .Section5 .Banner{ margin: 5px; }
        .Section5 .Container{  padding: 5px;  height: 250px;}
        .Section5 .Container img{  margin-right: 5px; margin-left: 5px; }
    }

/* CSS Banner background5 */
.Section6 {
    background-color: #111111;
    position: relative;
}
    .Section6 .Texto {
        color:#FFFFFF;
        margin: 5px;
    }
    .Section6 button {        
        background: rgb(255,83,17);
        background: linear-gradient(160deg, rgba(255,83,17,1) 0%, rgba(255,108,51,1) 61%, rgba(255,120,68,1) 100%);
        border-radius: 8px;
        border: none;
        color: #FFFFFF;
        padding: 8px 8px;
        margin-top: 18px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        cursor: pointer;
        width: 60%;
    }
    .Section6 button:hover{ 
        background: rgb(255,120,68);
        background: linear-gradient(160deg, rgba(255,120,68,1) 0%, rgba(255,108,51,1) 28%, rgba(255,83,17,1) 70%);
    }






.BGBodyaccess {
    background: url("../img/BGBodyaccess.jpg");
    background-repeat: no-repeat;
    background-size: auto;
}

    .Access .Form{
        width: 30%;
        background-color: #111111;
        margin: auto;
        margin-top: 100px;
        border-radius: 10px;
        position: relative;

    }

    .Access .Form1{  display: block; }
    .Access .Form2{  display: none; }
    .Access .Form3{  display: none; }

    .Access .Form1{  height: 350px; }
    .Access .Form2{  height: 450px; }
    .Access .Form3{  height: 290px; }

    .Access .Form img{
        width: 50%;
        padding: 20px;
        display: block;
        margin-left: auto;
        margin-right: auto;

    }

    .Access .Form  label {
      padding: 12px 12px 12px 0;
      display: inline-block;
      margin-left: 20px;
      color: #FFFFFF;
    }

    .Access .Form  input[type=text], .Access .Form  input[type=password]{
        width: 95%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
    }

    .Access .Form  input[type=button]{
        background: rgb(255,83,17);
        background: linear-gradient(160deg, rgba(255,83,17,1) 0%, rgba(255,108,51,1) 61%, rgba(255,120,68,1) 100%);
        border-radius: 10px;
        border: none;
        color: #FFFFFF;
        padding: 10px 15px;
        margin: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
    }
    .Access .Form  input[type=button]:hover{ 
        background: rgb(255,120,68);
        background: linear-gradient(160deg, rgba(255,120,68,1) 0%, rgba(255,108,51,1) 28%, rgba(255,83,17,1) 70%);
    }

    .Access .Texto {
        color: #FFFFFF;
        text-align: center;
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
    }
    .Access .alert {
        color: #FFFFFF;
        background-color: rgb(255,120,68);
        font-weight: bold;
        display: none;
        margin: 10px;
        padding: 5px;
        border-radius: 5px;
        width: 90%;
        right: 0;
        font-size: 1em;
        text-align: center;
      }

      

    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) {  

        .Access .Form{ width: 80%; height: 400px;}
        .Access .Form  input[type=text], .Access .Form  input[type=password]{
            width: 100%;
        }
        
        .Access .Form1, .Access .Form3{  height: 410px; }
        .Access .Form2{  height: 650px; }
    }


.backgroundDB{
    background: #ffeae0;
}

.MiniBox{ 
    margin: 10px;
}
    .MiniBox .Seccion1{
        background: rgb(255,83,17);
        background: linear-gradient(148deg, rgba(255,83,17,1) 5%, rgba(255,120,68,1) 100%);
        padding: 19px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        color: #FFF;
        font-weight: bold;
        border: 1px solid #ff9d77;
        text-align: center;
    }
    .MiniBox .Seccion2{
        background: #FFF;
        border: 1px solid #ff9d77;
        padding: 15px;

    }

    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) {  
        .MiniBox .Seccion1{ 
            padding: 5px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px; 
        }

        .MiniBox .Seccion2{ 
            padding: 5px;
        }
    }


.Box{
    background: #FFF;
    margin: 20px;
}
    .Box .Seccion1, .Box .Seccion2, .Box .Seccion3{
        margin: 30px;
    }

    .Box .Seccion1 .Title, .Box .Seccion2 .Title, .Box .Seccion3 .Title{
        color: #FF5311;
        font-weight: bold;
        font-size: 25px;
        margin: 10px;
    }

    .Box .Seccion1 .Text, .Box .Seccion2 .Text, .Box .Seccion3 .Text{
        color: #111111;
        margin: 10px;
    }

    .Box .Seccion1 .project-bar, .Box .Seccion2 .project-bar, .Box .Seccion3 .project-bar  {
        height: 22px;
        background: #e0e0e0;
        border-radius: 30px;
        width: 80%;
        margin: 0px auto;
    }
    .Box .Seccion1 .project-percent, .Box .Seccion2 .project-percent, .Box .Seccion3 .project-percent {
        padding: 2px;
        height: 18px;
        background: rgb(255,83,17);
        background: linear-gradient(148deg, rgba(255,83,17,1) 5%, rgba(255,120,68,1) 100%);
        border-radius: 30px;
        position: relative;
        width: 0;
        transition: 2s linear;
    }
    .Box .Seccion1 .project-percent::before, .Box .Seccion2 .project-percent::before, .Box .Seccion3 .project-percent::before {
        content: attr(percent);
        position: absolute;
        right: 0px;
        left: 0px;
        padding: 0px 0px;
        color: #ffffff;
        font-size: 15px;
        border-radius: 25px;
        font-weight: bold;
        width: 20px;
        margin: 0px auto;
    }

    .Box .Seccion4 img{
        float: right;
        height: 220px;
    }

    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) { 
        .Box{  margin: 10px; }
        .Box .Seccion4 img{ display: none; }

    }

.UserForm{
    background-color: #FFF;
    margin: 20px;
    padding: 5px;
}
.UserForm .Title{
    color: #FF5311;
    font-weight: bold;
    font-size: 25px;
    padding: 10px;
}


.UserForm  label {
    display: inline-block;
    margin-left: 20px;
    color: #000;
  }

  .UserForm input[type=text], .UserForm input[type=password], .UserForm select{
      width: 90%;
      padding: 5px;
      margin: 8px auto;
      box-sizing: border-box;
  }

  .UserForm  input[type=button]{
      background: rgb(255,83,17);
      background: linear-gradient(160deg, rgba(255,83,17,1) 0%, rgba(255,108,51,1) 61%, rgba(255,120,68,1) 100%);
      border-radius: 10px;
      border: none;
      color: #FFFFFF;
      padding: 5px;
      margin: 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      width: 30%;
  }
  .UserForm  input[type=button]:hover{ 
      background: rgb(255,120,68);
      background: linear-gradient(160deg, rgba(255,120,68,1) 0%, rgba(255,108,51,1) 28%, rgba(255,83,17,1) 70%);
  }

  .UserForm  input[type=image]{ 
      width: 100%;
  }

  
  .chart{ margin: 20px; }

  .UserForm .MinText{ 
        color:#666;
        margin: 5px;
        text-align: center;
    }

    .UserForm table{  width: 100%; } 
    .UserForm table th { padding: 5px; }
    .UserForm table td { text-align: center; padding: 5px;}


    /*Medida CSS SmartPhone*/
    @media (max-width:1300px) { 
        .UserForm{ margin: 10px; }
        .chart{ margin: 10px; }
        .UserForm input[type=text], .UserForm input[type=password], .UserForm select{ width: 100%;}

    }


    .card {
      text-align: center;
      background: white;
      padding: 30px;
      border-radius: 4px;
      box-shadow: 0 2px 3px #C8D0D8;
      display: inline-block;
      margin: 50px;
    }
    .card .TitleSuccess {
        color: #88B04B;
        font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
        font-weight: 900;
        font-size: 40px;
        margin-bottom: 10px;
      }
    .card .TitleCancel {
        color: #FE2E2E;
        font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
        font-weight: 900;
        font-size: 40px;
        margin-bottom: 10px;
        }
    .card p {
        color: #404F5E;
        font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
        font-size:20px;
        margin: 0;
      }
    .card .success {
      color: #9ABC66;
      font-size: 100px;
      line-height: 200px;
      margin-left:-15px;
    }
    .card .cancel {
        color: #FE2E2E;
        font-size: 100px;
        line-height: 200px;
        margin-left:-15px;
    }


/* CSS Columnas */
.col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 {
        float: left;} 
.col-12 {width: 100%;}
.col-11 {width: 91.66666667%;}
.col-10 {width: 83.33333333%;}
.col-9 {width: 75%;}
.col-8 {width: 66.66666667%;}
.col-7 {width: 58.33333333%;}
.col-6 {width: 50%;}
.col-5 {width: 41.66666667%;}
.col-4 {width: 33.33333333%;}
.col-3 {width: 25%; }
.col-2 {width: 16.66666667%;}
.col-1 {width: 8.33333333%;}
.offset-1 {margin-left: 8.333333%;}
.offset-2 {margin-left: 16.666667%;}
.offset-3 {margin-left: 25%;}
.offset-4 {margin-left: 33.333333%;}
.offset-5 {margin-left: 41.666667%;}  
.offset-6 {margin-left: 50%;}     
.offset-7 {margin-left: 58.333333%;}    
.offset-8 {margin-left: 66.666667%;}
.offset-9 {margin-left: 75%;}
.offset-10 {margin-left: 83.333333%;}
.offset-11 {margin-left: 91.666667%;}


/*Medida CSS SmartPhone*/
@media (max-width:1300px){
    
.colvm-1, .colvm-10, .colvm-11, .colvm-12, .colvm-2, .colvm-3, .colvm-4, .colvm-5, .colvm-6, .colvm-7, .colvm-8, .colvm-9 {
    float: left;} 
.colvm-12 {width: 100%;}
.colvm-11 {width: 91.66666667%;}
.colvm-10 {width: 83.33333333%;}
.colvm-9 {width: 75%;}
.colvm-8 {width: 66.66666667%;}
.colvm-7 {width: 58.33333333%;}
.colvm-6 {width: 50%;}
.colvm-5 {width: 41.66666667%;}
.colvm-4 {width: 33.33333333%;}
.colvm-3 {width: 25%; }
.colvm-2 {width: 16.66666667%;}
.colvm-1 {width: 8.33333333%;}
.colvm-0 {width: 0%;}
.offsetvm-0 {margin-left: 0%;}
.offsetvm-1 {margin-left: 8.333333%;}
.offsetvm-2 {margin-left: 16.666667%;}
.offsetvm-3 {margin-left: 25%;}
.offsetvm-4 {margin-left: 33.333333%;}
.offsetvm-5 {margin-left: 41.666667%;}  
.offsetvm-6 {margin-left: 50%;}     
.offsetvm-7 {margin-left: 58.333333%;}    
.offsetvm-8 {margin-left: 66.666667%;}
.offsetvm-9 {margin-left: 75%;}
.offsetvm-10 {margin-left: 83.333333%;}
.offsetvm-11 {margin-left: 91.666667%;}
}