/* SECTIONS */ .section { clear: both; padding: 0px; margin-bottom: 2em; } .kcsp_section { clear: both; padding: 0px; margin-bottom: 2em; } /* COLUMN SETUP */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; background-color: #f9f9f9; } .col:first-child { margin-left: 0; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 */ } /* GRID OF THREE */ .span_3_of_3 { width: 35%; background-color: #f9f9f9; padding: 20px; } .span_2_of_3 { width: 35%; background-color: #f9f9f9; padding: 20px; } .span_1_of_3 { width: 35%; background-color: #f9f9f9; padding: 20px; } .col-container { display: table; /* Make the container element behave like a table */ width: 100%; /* Set full-width to expand the whole page */ padding-bottom: 30px; } .col-nav { display: table-cell; /* Make elements inside the container behave like table cells */ width: 18%; background-color: #f9f9f9; padding: 20px; border: 5px solid white; } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 480px) { .col { margin: 1% 0 1% 0%;} .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } } @media only screen and (max-width: 650px) { .col-nav { display: block; width: 100%; } } .button{ max-width: 100%; box-sizing: border-box; margin: 0; display: inline-block; border-radius: 6px; padding: 0 20px; line-height: 40px; color: #ffffff; font-size: 16px; background-color: #3371e3; text-decoration: none; } h5 { font-size: 16px; line-height: 1.5em; margin-bottom: 2em; } #usersGrid a { display: inline-block; background-color: #f9f9f9; } #ktpContainer, #distContainer, #kcspContainer, #isvContainer, #servContainer { position: relative; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } #isvContainer { margin-bottom: 80px; } #kcspContainer { margin-bottom: 80px; } #distContainer { margin-bottom: 80px; } #ktpContainer { margin-bottom: 80px; } .partner-box { position: relative; width: 47%; max-width: 48%; min-width: 48%; margin-bottom: 20px; padding: 20px; flex: 1; display: flex; justify-content: left; align-items: flex-start; } .partner-box img { background-color: #f9f9f9; } .partner-box > div { margin-left: 30px; } .partner-box a { color: #3576E3; } @media screen and (max-width: 1024px) { .partner-box { flex-direction: column; justify-content: flex-start; } .partner-box > div { margin: 20px 0 0; } } @media screen and (max-width: 568px) { #ktpContainer, #distContainter, #kcspContainer, #isvContainer, #servContainer { justify-content: center; } .partner-box { flex-direction: column; justify-content: flex-start; width: 100%; max-width: 100%; min-width: 100%; } .partner-box > div { margin: 20px 0 0; } } @media screen and (max-width: 568px) { #ktpContainer, #distContainer, #kcspContainer, #isvContainer, #servContainer { justify-content: center; } .partner-box { flex-direction: column; justify-content: flex-start; width: 100%; max-width: 100%; min-width: 100%; } .partner-box > div { margin: 20px 0 0; } }