﻿	@media only screen and (max-width: 950px) /*, (min-device-width: 768px) and (max-device-width: 1024px)*/  {
	
	table.datos {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	  
	table.datos thead {
		display: flex;
		flex-direction: column;
		width: 25%;
		align-items: flex-start;
		flex-wrap: nowrap;
	}
	
	table.datos tbody {
		display: flex;
		flex-direction: column;
		width: 70%;
	}

	table.datos thead tr,
	table.datos tbody tr {
	    display: flex;
	    flex-direction: column;
	    margin: 2rem 0;
	}

	table, thead, tbody, th, td, tr {
		display: block;
	}

	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

    tr {
      margin: 0 0 1rem 0;
    }
          
		td {
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}
		
		td:nth-of-type(1):after{
			content: "";
		    width: 160%;
		    height: 2px;
		    background: #4ca5e0;
		    position: absolute;
		    left: -50%;
		    top: -20px;
    	}
    	
		table.datos tbody tr:nth-child(even) td{
			background-color: transparent;
		}
		
		table.datos {
	    	border-bottom: none;
	    }
	    
	    td:before {
			position: absolute;
			top: .5rem;
			left: -42%;
			white-space: nowrap;
			font-weight: var(--font-weight-extrabold);
			text-transform: uppercase; 
		}

		/*td:nth-of-type(1):before { content: "COOKIES"; }
		td:nth-of-type(2):before { content: "TIPO"; }
		td:nth-of-type(3):before { content: "TEMPORALIDAD"; }
		td:nth-of-type(4):before { content: "TITULARIDAD"; }
		td:nth-of-type(5):before { content: "FINALIDAD"; }
		td:nth-of-type(6):before { content: "DOMINIOS"; }*/
		
		
		td[data-label]:nth-of-type(1):before { content: " " attr(data-label) " "; }
		td[data-label]:nth-of-type(2):before { content: " " attr(data-label) " "; }
		td[data-label]:nth-of-type(3):before { content: " " attr(data-label) " "; }
		td[data-label]:nth-of-type(4):before { content: " " attr(data-label) " "; }
		td[data-label]:nth-of-type(5):before { content: " " attr(data-label) " "; }
		td[data-label]:nth-of-type(6):before { content: " " attr(data-label) " "; }

	}
			
    
    @media only screen and (max-width: 480px) {
	    table.datos tbody{
	    	width: 65%;
	    }
    
    	td:before {
        	left: -55%;
		}
    }
