/*MEDIA QUERY START MAX 480 -------------------------------- */ @media screen and (max-width: 360px) { .tr01 { clear: both; width: 100%; margin: 5px auto; } .tr01 .td01 { width: 100%; padding: 1%; } .tr02 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr02 .td02 { width: 100%; padding: 1%; } .tr03 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr03 .td03 { width: 100%; padding: 1%; } .tr04 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr04 .td04 { width: 100%; padding: 1%; } .tr05 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr05 .td05 { width: 100%; padding: 1%; } .tr06 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr06 .td06 { width: 100%; padding: 1%; } .tr07 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr07 .td07 { width: 100%; padding: 1%; } .tr08 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr09 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr10 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; } .tr11 .td11 { width: 100%; padding: 1%; } .tr12 { clear: both; width: 100%; } .tr12 .td12 { width: 100%; padding: 1%; } /*COLUMNS CODE START ////////////////////////// */ .tr-25-50-25 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 100%; gap: 0%; } .tr-left40 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%;} .tr-left60 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%;} .tr-left75 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%; } .tr-left80 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%; } } /*MEDIA QUERY ENDMAX 480 END -------------------------------- */ /*MEDIA QUERY START MAX 480 -------------------------------- */ @media screen and (min-width: 461px) and (max-width: 480px) { .tr01 { clear: both; width: 100%; margin: 5px auto; } .tr01 .td01 { width: 100%; padding: 1%; } .tr02 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr02 .td02 { width: 100%; padding: 1%; } .tr03 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr03 .td03 { width: 100%; padding: 1%; } .tr04 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr04 .td04 { width: 100%; padding: 1%; } .tr05 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr05 .td05 { width: 100%; padding: 1%; } .tr06 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; } .tr06 .td06 { width: 100%; padding: 1%; } .tr07 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr07 .td07 { width: 100%; padding: 1%; } .tr08 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr09 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr10 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr11 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; } .tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; } .tr12 .td12 { width: 100%; padding: 1%; } /*COLUMNS CODE START ////////////////////////// */ .tr-25-50-25 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 100%; gap: 0%; } .tr-left60 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%;} .tr-left75 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%; } } /*MEDIA QUERY ENDMAX 480 END -------------------------------- */ /*MEDIA QUERY START FROM 481 and MAX 767 START -------------------------------- */ @media screen and (min-width: 481px) and (max-width: 767px) { .tr02 { display: grid; grid-template-rows: auto; grid-template-columns: 50% 50%; } .tr03 { display: grid; grid-template-rows: auto; grid-template-columns: 33.3% 33.3% 33.3%; } .tr04 { display: grid; grid-template-rows: auto auto; grid-template-columns: 50% 50%; } .tr06 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 33.3% 33.3% 33.3%; } .tr08 { display: grid; grid-template-rows: auto auto auto auto; grid-template-columns: 50% 50%; } .tr10 { display: grid; grid-template-rows: auto auto auto auto auto; grid-template-columns: 50% 50%; } .tr12 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 50% 50%; } .tr-left60 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; } } /*MEDIA QUERY START FROM 481 and MAX 767 END -------------------------------- */ /*MEDIA QUERY START FROM 769 and MAX 1024 START -------------------------------- */ @media screen and (min-width: 768) and (max-width: 1024px) { /*COLUMNS CODE START ////////////////////////// */ .tr01 { clear: both; width: 100%; } .tr01 .td01 { width: 100%; padding: 1%; } .tr02 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; } .tr02 .td02 { width: 100%; padding: 1%; } .tr03 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; } .tr03 .td03 { width: 100%; padding: 1%; } .tr04 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 24.25% 24.25% 24.25% 24.25%; gap: 1%; } .tr04 .td04 { width: 100%; padding: 1%; } .tr05 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%; gap: 1%; } .tr05 .td05 { width: 100%; padding: 1%; } .tr06 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 16% 16% 16% 16% 16% 16%; gap: .80%; } .tr06 .td06 { width: 100%; padding: 1%; } .tr07 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 13.45% 13.45% 13.45% 13.45% 13.45% 13.45% 13.45%; gap: .98%; } .tr07 .td07 { width: 100%; padding: 1%; } .tr08 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% ; gap: 1%; } .tr08 .td08 { width: 100%; padding: 1%; } .tr09 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% ; gap: 1.01%; } .tr09 .td09 { width: 100%; padding: 1%; } .tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% ; gap: 1%; } .tr10 .td10 { width: 100%; padding: 1%; } .tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% ; gap: 1%; } .tr11 .td11 { width: 100%; padding: 1%; } .tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% ; gap: 1%; } .tr12 .td12 { width: 100%; padding: 1%; } .tr-left25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 74%; gap: 1%; } .tr-left30 { clear: both; width: 100%; display: grid; grid-template-columns: 30% 69%; gap: 1%; } .tr-left40 { clear: both; width: 100%; display: grid; grid-template-columns: 40% 59%; gap: 1%; } .tr-left60 { clear: both; width: 100%; display: grid; grid-template-columns: 60% 39%; gap: 1%; } .tr-left70 { clear: both; width: 100%; display: grid; grid-template-columns: 69% 30%; gap: 1%; } .tr-left75 { clear: both; width: 100%; display: grid; grid-template-columns: 74% 25%; gap: 1%; } .tr-left80 { clear: both; width: 100%; display: grid; grid-template-columns: 80% 19%; gap: 1%; } .tr-25-50-25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 48% 25%; gap: 1%; } /*COLUMNS CODE END ////////////////////////// */ } /*MEDIA QUERY START FROM 769 and MAX 1024 END -------------------------------- */ /*MEDIA QUERY START FROM 1025 and MAX 1200 START -------------------------------- */ @media (min-width: 1024px) and (max-width: 1200px) { /*COLUMNS CODE START ////////////////////////// */ .tr01 { clear: both; width: 100%; } .tr01 .td01 { width: 100%; padding: 1%; } .tr02 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; } .tr02 .td02 { width: 100%; padding: 1%; } .tr03 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; } .tr03 .td03 { width: 100%; padding: 1%; } .tr04 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 24.25% 24.25% 24.25% 24.25%; gap: 1%; } .tr04 .td04 { width: 100%; padding: 1%; } .tr05 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%; gap: 1%; } .tr05 .td05 { width: 100%; padding: 1%; } .tr06 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 16% 16% 16% 16% 16% 16%; gap: .80%; } .tr06 .td06 { width: 100%; padding: 1%; } .tr07 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 13.45% 13.45% 13.45% 13.45% 13.45% 13.45% 13.45%; gap: .98%; } .tr07 .td07 { width: 100%; padding: 1%; } .tr08 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% ; gap: 1%; } .tr08 .td08 { width: 100%; padding: 1%; } .tr09 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% ; gap: 1.01%; } .tr09 .td09 { width: 100%; padding: 1%; } .tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% ; gap: 1%; } .tr10 .td10 { width: 100%; padding: 1%; } .tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% ; gap: 1%; } .tr11 .td11 { width: 100%; padding: 1%; } .tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% ; gap: 1%; } .tr12 .td12 { width: 100%; padding: 1%; } .tr-left25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 74%; gap: 1%; } .tr-left30 { clear: both; width: 100%; display: grid; grid-template-columns: 30% 69%; gap: 1%; } .tr-left40 { clear: both; width: 100%; display: grid; grid-template-columns: 40% 59%; gap: 1%; } .tr-left60 { clear: both; width: 100%; display: grid; grid-template-columns: 60% 39%; gap: 1%; } .tr-left70 { clear: both; width: 100%; display: grid; grid-template-columns: 69% 30%; gap: 1%; } .tr-left75 { clear: both; width: 100%; display: grid; grid-template-columns: 74% 25%; gap: 1%; } .tr-left80 { clear: both; width: 100%; display: grid; grid-template-columns: 80% 19%; gap: 1%; } .tr-25-50-25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 48% 25%; gap: 1%; } } /*MEDIA QUERY START FROM 1025 and MAX 1200 END -------------------------------- */ /*MEDIA QUERY START FROM 1025 and MAX 1200 START -------------------------------- */ @media (min-width: 1201px) { /*COLUMNS CODE START ////////////////////////// */ .tr01 { clear: both; width: 100%; } .tr01 .td01 { width: 100%; padding: 1%; } .tr02 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; } .tr02 .td02 { width: 100%; padding: 1%; } .tr03 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; } .tr03 .td03 { width: 100%; padding: 1%; } .tr04 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 24.25% 24.25% 24.25% 24.25%; gap: 1%; } .tr04 .td04 { width: 100%; padding: 1%; } .tr05 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%; gap: 1%; } .tr05 .td05 { width: 100%; padding: 1%; } .tr06 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 16% 16% 16% 16% 16% 16%; gap: .80%; } .tr06 .td06 { width: 100%; padding: 1%; } .tr07 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 13.45% 13.45% 13.45% 13.45% 13.45% 13.45% 13.45%; gap: .98%; } .tr07 .td07 { width: 100%; padding: 1%; } .tr08 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% ; gap: 1%; } .tr08 .td08 { width: 100%; padding: 1%; } .tr09 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% ; gap: 1.01%; } .tr09 .td09 { width: 100%; padding: 1%; } .tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% ; gap: 1%; } .tr10 .td10 { width: 100%; padding: 1%; } .tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% ; gap: 1%; } .tr11 .td11 { width: 100%; padding: 1%; } .tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% ; gap: 1%; } .tr12 .td12 { width: 100%; padding: 1%; } .tr-left25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 74%; gap: 1%; } .tr-left30 { clear: both; width: 100%; display: grid; grid-template-columns: 30% 69%; gap: 1%; } .tr-left40 { clear: both; width: 100%; display: grid; grid-template-columns: 40% 59%; gap: 1%; } .tr-left60 { clear: both; width: 100%; display: grid; grid-template-columns: 60% 39%; gap: 1%; } .tr-left70 { clear: both; width: 100%; display: grid; grid-template-columns: 69% 30%; gap: 1%; } .tr-left75 { clear: both; width: 100%; display: grid; grid-template-columns: 74% 25%; gap: 1%; } .tr-left80 { clear: both; width: 100%; display: grid; grid-template-columns: 80% 19%; gap: 1%; } .tr-25-50-25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 48% 25%; gap: 1%; } /*COLUMNS CODE END ////////////////////////// */ } /*MEDIA QUERY START FROM 1201 Large -------------------------------- */ /* responsive devices 320px — 480px: Mobile devices. 481px — 768px: iPads, Tablets. 769px — 1024px: Small screens, laptops. 1025px — 1200px: Desktops, large screens. 1201px and more — Extra large screens, TV. */