@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&subset=devanagari,latin-ext');

main {color: black; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 400;}
main a {cursor: pointer; text-decoration: underline;}
main h1 {font-size: 3em;}
main h2 {font-size: 2em;}
main h3 {font-size: 1.75em;}
main h4 {font-size: 1.5em;}
main h5 {font-size: 1.25em;}
main h6, main p, main li {font-size: 1em;}
main h1, main h2, main h3, main h4, main h5, main h6, main p, main li {margin: 0; padding: 0; color: inherit; font-weight: 400; line-height: 1.25em;}
main img {max-width: 100%; vertical-align: bottom;}
main p {color: #909193; font-size: 1.5em; margin-bottom: 1em; text-align: inherit;}
main ul {margin: 0 1.75em;}

section {padding-top: 4%; padding-bottom: 4%;}
.row {margin-left: 0; margin-right: 0; margin-bottom: 1em;}
.row:last-child {margin-bottom: 0;}

.grey-bg {background-color: #F3F3F3;}
.blue-bg {background-color: #00AEEF;}
.bg-image {background-position: center center; background-repeat: no-repeat; color: white; display: block; width: 100%; height: 599px; background-color: black;}
.center-img {display: block; margin-left: auto; margin-right: auto;}

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

.lc {text-transform: lowercase;}
.uc {text-transform: uppercase;}

.light {font-weight: 300;}
.normal {font-weight: 400;}
.medium {font-weight: 500;}
.semibold {font-weight: 600;}
.bold {font-weight: 700;}

.primary-color {color: #00AEEF;}
.secondary-color {color: #00D0FE;}

.button-base {background-color: #7ACFF4; border: 0; border-radius: 5px; box-shadow: 0 4px 0 #00ADEB; color: #ffffff; cursor: pointer; display: inline-block; font-weight: 700; padding: 2% 8%; text-decoration: none;}
.button-base:hover {background: #6ec4fa;}
.button-base:active {box-shadow: none; transform: translateY(4px);}

.menu {display: block; width: 100%; background-color: white; text-align: center; z-index: 9999;}
.menu ul {display: inline-block; margin: 0; padding: 0; font-size: 0;}
.menu ul li {display: inline-block; margin: 0 1em; padding: 1em 0.25em; border-bottom: 4px solid white; color: black; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; cursor: pointer;}
.menu ul li:hover {border-bottom: 4px solid skyblue; color: skyblue;}
.menu ul li.nav-active {border-bottom: 4px solid skyblue; color: skyblue;}

.header-tagline {line-height: 1em; margin-bottom: 0.5em;}
.header-section_text-padding {padding-top: 8%; padding-bottom: 8%;}

.feature-section h2 {margin-bottom: 0.5em;}
.feature-section img {display: block; margin-bottom: 1em; max-width: 75%;}
.clc-image {position: relative;}
.clc-image .rgb-logo {max-width: 20%; position: absolute; top: 0; right: 20%;}

.image-section_row-images {margin-bottom: 3em;}
.image-section .button-base {background-color: #FFFFFF; box-shadow: 0 4px 0 #8F958F; color: #00AEEF; font-size: 1.25em; padding-left: 6%; padding-right: 6%;}
.image-section .image-section_row-images {display: flex; align-items: center; max-width: 100%;}
.image-section .image-column {align-self: center;}
.image-section .image-column.column-symbol {color: #FFFFFF; font-size: 4em; margin-left: 2%; margin-right: 2%;}

.combo-section {font-size: 1.25em;}
.combo-section .column-4 {padding-left: 3%; padding-right: 3%;}
.combo-section h4, .combo-section h6 {margin-bottom: 0.75em;}
.combo-section h6 {padding-left: 10%; padding-right: 10%;}

.coupon-info-section {font-size: 1.5em; padding-top: 0; padding-bottom: 0; position: relative;}
.coupon-info-section_text-padding {padding-top: 10%; padding-bottom: 10%;}
.coupon-info-note {font-size: 2em; display: block; line-height: 1em;}

.coupon-section .button-base {font-size: 1.25em;}

@media (max-width: 850px)
{
  main {font-size: 14px;}
  main h1 {font-size: 2.5em;}
  main p {font-size: 1.25em;}
  main p:last-child {margin-bottom: 0;}
  section {padding: 2em 0.5em;}
  
  .column-3 {margin-bottom: 1em;}
  .column-3:last-child {margin-bottom: 0;}
  
  .feature-section {font-size: 1.25em;}
  .feature-section img {margin-left: auto; margin-right: auto;}
  .feature-section .column-4 {margin-bottom: 3em; text-align: center;}
  .feature-section ul {display: inline-block; text-align: left;}
  .clc-image .rgb-logo {right: 18%;}
  
  .image-section .image-section_row-images {display: block; margin-bottom: 5em;}
  .image-section_row-images img {max-width: 50%;}
  .image-section .column-12 {width: 100%;}
  
  .combo-section img {max-width: 75%;}
  .combo-section .column-4 {padding-bottom: 3em;}
  
  .column-ribbon {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
  .coupon-ribbon {max-height: 100%; opacity: 0.2;}
}