* { box-sizing: border-box; } .container { width: 80%; max-width: 1200px; margin: 0 auto; } @media (max-width: 767px) { .container { max-width: 90%; } } .row { margin: 0 -15px; } .row::after { content: ""; display: table; clear: both; } .row.no-gutter { margin: 0; } .row.no-gutter [class*='col-'] { padding-right: 0; padding-left: 0; } .row.sm-gutter [class*='col-'] { padding-right: 10px; padding-left: 10px; } @media (max-width: 767px) { .row.sm-gutter [class*='col-'] { padding-right: 15px; padding-left: 15px; } } .row.sm-gutter [class*='col-']:first-of-type { padding-left: 15px; } .row.sm-gutter [class*='col-']:last-of-type { padding-right: 15px; } *[class*=col-] { padding: 0 15px; position: relative; min-height: 1px; float: left; } *[class*=col-].col-xs-100 { width: 100%; } *[class*=col-].col-xs-91 { width: 91.3%; } *[class*=col-].col-xs-90 { width: 90%; } *[class*=col-].col-xs-83 { width: 83.33333333%; } *[class*=col-].col-xs-80 { width: 80%; } *[class*=col-].col-xs-75 { width: 75%; } *[class*=col-].col-xs-70 { width: 70%; } *[class*=col-].col-xs-66 { width: 66.66666667%; } *[class*=col-].col-xs-60 { width: 60%; } *[class*=col-].col-xs-58 { width: 58.33333333%; } *[class*=col-].col-xs-50 { width: 50%; } *[class*=col-].col-xs-41 { width: 41.66666667%; } *[class*=col-].col-xs-40 { width: 40%; } *[class*=col-].col-xs-33 { width: 33.33333333%; } *[class*=col-].col-xs-30 { width: 30%; } *[class*=col-].col-xs-25 { width: 25%; } *[class*=col-].col-xs-20 { width: 20%; } *[class*=col-].col-xs-16 { width: 16.66666667%; } *[class*=col-].col-xs-10 { width: 10%; } *[class*=col-].col-xs-8 { width: 8.33333333%; } *[class*=col-].col-xs-push-91 { left: 91.66666667%; } *[class*=col-].col-xs-push-90 { left: 90%; } *[class*=col-].col-xs-push-83 { left: 83.33333333%; } *[class*=col-].col-xs-push-80 { left: 80%; } *[class*=col-].col-xs-push-75 { left: 75%; } *[class*=col-].col-xs-push-70 { left: 70%; } *[class*=col-].col-xs-push-66 { left: 66.66666667%; } *[class*=col-].col-xs-push-60 { left: 60%; } *[class*=col-].col-xs-push-58 { left: 58.33333333%; } *[class*=col-].col-xs-push-50 { left: 50%; } *[class*=col-].col-xs-push-41 { left: 41.66666667%; } *[class*=col-].col-xs-push-40 { left: 40%; } *[class*=col-].col-xs-push-33 { left: 33.33333333%; } *[class*=col-].col-xs-push-30 { left: 30%; } *[class*=col-].col-xs-push-25 { left: 25%; } *[class*=col-].col-xs-push-20 { left: 20%; } *[class*=col-].col-xs-push-16 { left: 16.66666667%; } *[class*=col-].col-xs-push-10 { left: 10%; } *[class*=col-].col-xs-push-8 { left: 8.33333333%; } *[class*=col-].col-xs-pull-91 { right: 91.66666667%; } *[class*=col-].col-xs-pull-90 { right: 90%; } *[class*=col-].col-xs-pull-83 { right: 83.33333333%; } *[class*=col-].col-xs-pull-80 { right: 80%; } *[class*=col-].col-xs-pull-75 { right: 75%; } *[class*=col-].col-xs-pull-70 { right: 70%; } *[class*=col-].col-xs-pull-66 { right: 66.66666667%; } *[class*=col-].col-xs-pull-60 { right: 60%; } *[class*=col-].col-xs-pull-58 { right: 58.33333333%; } *[class*=col-].col-xs-pull-50 { right: 50%; } *[class*=col-].col-xs-pull-41 { right: 41.66666667%; } *[class*=col-].col-xs-pull-40 { right: 40%; } *[class*=col-].col-xs-pull-33 { right: 33.33333333%; } *[class*=col-].col-xs-pull-30 { right: 30%; } *[class*=col-].col-xs-pull-25 { right: 25%; } *[class*=col-].col-xs-pull-20 { right: 20%; } *[class*=col-].col-xs-pull-16 { right: 16.66666667%; } *[class*=col-].col-xs-pull-10 { right: 10%; } *[class*=col-].col-xs-pull-8 { right: 8.33333333%; } @media (min-width: 768px) { *[class*=col-].col-sm-100 { width: 100%; } *[class*=col-].col-sm-91 { width: 91.66666667%; } *[class*=col-].col-sm-90 { width: 90%; } *[class*=col-].col-sm-83 { width: 83.33333333%; } *[class*=col-].col-sm-80 { width: 80%; } *[class*=col-].col-sm-75 { width: 75%; } *[class*=col-].col-sm-70 { width: 70%; } *[class*=col-].col-sm-66 { width: 66.66666667%; } *[class*=col-].col-sm-60 { width: 60%; } *[class*=col-].col-sm-58 { width: 58.33333333%; } *[class*=col-].col-sm-50 { width: 50%; } *[class*=col-].col-sm-41 { width: 41.66666667%; } *[class*=col-].col-sm-40 { width: 40%; } *[class*=col-].col-sm-33 { width: 33.33333333%; } *[class*=col-].col-sm-30 { width: 30%; } *[class*=col-].col-sm-25 { width: 25%; } *[class*=col-].col-sm-20 { width: 20%; } *[class*=col-].col-sm-16 { width: 16.66666667%; } *[class*=col-].col-sm-10 { width: 10%; } *[class*=col-].col-sm-8 { width: 8.33333333%; } *[class*=col-].col-sm-push-91 { left: 91.66666667%; } *[class*=col-].col-sm-push-90 { left: 90%; } *[class*=col-].col-sm-push-83 { left: 83.33333333%; } *[class*=col-].col-sm-push-80 { left: 80%; } *[class*=col-].col-sm-push-75 { left: 75%; } *[class*=col-].col-sm-push-70 { left: 70%; } *[class*=col-].col-sm-push-66 { left: 66.66666667%; } *[class*=col-].col-sm-push-60 { left: 60%; } *[class*=col-].col-sm-push-58 { left: 58.33333333%; } *[class*=col-].col-sm-push-50 { left: 50%; } *[class*=col-].col-sm-push-41 { left: 41.66666667%; } *[class*=col-].col-sm-push-40 { left: 40%; } *[class*=col-].col-sm-push-33 { left: 33.33333333%; } *[class*=col-].col-sm-push-30 { left: 30%; } *[class*=col-].col-sm-push-25 { left: 25%; } *[class*=col-].col-sm-push-20 { left: 20%; } *[class*=col-].col-sm-push-16 { left: 16.66666667%; } *[class*=col-].col-sm-push-10 { left: 10%; } *[class*=col-].col-sm-push-8 { left: 8.33333333%; } *[class*=col-].col-sm-pull-91 { right: 91.66666667%; } *[class*=col-].col-sm-pull-90 { right: 90%; } *[class*=col-].col-sm-pull-83 { right: 83.33333333%; } *[class*=col-].col-sm-pull-80 { right: 80%; } *[class*=col-].col-sm-pull-75 { right: 75%; } *[class*=col-].col-sm-pull-70 { right: 70%; } *[class*=col-].col-sm-pull-66 { right: 66.66666667%; } *[class*=col-].col-sm-pull-60 { right: 60%; } *[class*=col-].col-sm-pull-58 { right: 58.33333333%; } *[class*=col-].col-sm-pull-50 { right: 50%; } *[class*=col-].col-sm-pull-41 { right: 41.66666667%; } *[class*=col-].col-sm-pull-40 { right: 40%; } *[class*=col-].col-sm-pull-33 { right: 33.33333333%; } *[class*=col-].col-sm-pull-30 { right: 30%; } *[class*=col-].col-sm-pull-25 { right: 25%; } *[class*=col-].col-sm-pull-20 { right: 20%; } *[class*=col-].col-sm-pull-16 { right: 16.66666667%; } *[class*=col-].col-sm-pull-10 { right: 10%; } *[class*=col-].col-sm-pull-8 { right: 8.33333333%; } } @media (min-width: 992px) { *[class*=col-].col-md-100 { width: 100%; } *[class*=col-].col-md-91 { width: 91.66666667%; } *[class*=col-].col-md-90 { width: 90%; } *[class*=col-].col-md-83 { width: 83.33333333%; } *[class*=col-].col-md-80 { width: 80%; } *[class*=col-].col-md-75 { width: 75%; } *[class*=col-].col-md-70 { width: 70%; } *[class*=col-].col-md-66 { width: 66.66666667%; } *[class*=col-].col-md-60 { width: 60%; } *[class*=col-].col-md-58 { width: 58.33333333%; } *[class*=col-].col-md-50 { width: 50%; } *[class*=col-].col-md-41 { width: 41.66666667%; } *[class*=col-].col-md-40 { width: 40%; } *[class*=col-].col-md-33 { width: 33.33333333%; } *[class*=col-].col-md-30 { width: 30%; } *[class*=col-].col-md-25 { width: 25%; } *[class*=col-].col-md-20 { width: 20%; } *[class*=col-].col-md-16 { width: 16.66666667%; } *[class*=col-].col-md-10 { width: 10%; } *[class*=col-].col-md-8 { width: 8.33333333%; } *[class*=col-].col-md-push-91 { left: 91.66666667%; } *[class*=col-].col-md-push-90 { left: 90%; } *[class*=col-].col-md-push-83 { left: 83.33333333%; } *[class*=col-].col-md-push-80 { left: 80%; } *[class*=col-].col-md-push-75 { left: 75%; } *[class*=col-].col-md-push-70 { left: 70%; } *[class*=col-].col-md-push-66 { left: 66.66666667%; } *[class*=col-].col-md-push-60 { left: 60%; } *[class*=col-].col-md-push-58 { left: 58.33333333%; } *[class*=col-].col-md-push-50 { left: 50%; } *[class*=col-].col-md-push-41 { left: 41.66666667%; } *[class*=col-].col-md-push-40 { left: 40%; } *[class*=col-].col-md-push-33 { left: 33.33333333%; } *[class*=col-].col-md-push-30 { left: 30%; } *[class*=col-].col-md-push-25 { left: 25%; } *[class*=col-].col-md-push-20 { left: 20%; } *[class*=col-].col-md-push-16 { left: 16.66666667%; } *[class*=col-].col-md-push-10 { left: 10%; } *[class*=col-].col-md-push-8 { left: 8.33333333%; } *[class*=col-].col-md-pull-91 { right: 91.66666667%; } *[class*=col-].col-md-pull-90 { right: 90%; } *[class*=col-].col-md-pull-83 { right: 83.33333333%; } *[class*=col-].col-md-pull-80 { right: 80%; } *[class*=col-].col-md-pull-75 { right: 75%; } *[class*=col-].col-md-pull-70 { right: 70%; } *[class*=col-].col-md-pull-66 { right: 66.66666667%; } *[class*=col-].col-md-pull-60 { right: 60%; } *[class*=col-].col-md-pull-58 { right: 58.33333333%; } *[class*=col-].col-md-pull-50 { right: 50%; } *[class*=col-].col-md-pull-41 { right: 41.66666667%; } *[class*=col-].col-md-pull-40 { right: 40%; } *[class*=col-].col-md-pull-33 { right: 33.33333333%; } *[class*=col-].col-md-pull-30 { right: 30%; } *[class*=col-].col-md-pull-25 { right: 25%; } *[class*=col-].col-md-pull-20 { right: 20%; } *[class*=col-].col-md-pull-16 { right: 16.66666667%; } *[class*=col-].col-md-pull-10 { right: 10%; } *[class*=col-].col-md-pull-8 { right: 8.33333333%; } } @media (min-width: 1200px) { *[class*=col-].col-lg-100 { width: 100%; } *[class*=col-].col-lg-91 { width: 91.66666667%; } *[class*=col-].col-lg-90 { width: 90%; } *[class*=col-].col-lg-83 { width: 83.33333333%; } *[class*=col-].col-lg-80 { width: 80%; } *[class*=col-].col-lg-75 { width: 75%; } *[class*=col-].col-lg-70 { width: 70%; } *[class*=col-].col-lg-66 { width: 66.66666667%; } *[class*=col-].col-lg-60 { width: 60%; } *[class*=col-].col-lg-58 { width: 58.33333333%; } *[class*=col-].col-lg-50 { width: 50%; } *[class*=col-].col-lg-41 { width: 41.66666667%; } *[class*=col-].col-lg-40 { width: 40%; } *[class*=col-].col-lg-33 { width: 33.33333333%; } *[class*=col-].col-lg-30 { width: 30%; } *[class*=col-].col-lg-25 { width: 25%; } *[class*=col-].col-lg-20 { width: 20%; } *[class*=col-].col-lg-16 { width: 16.66666667%; } *[class*=col-].col-lg-10 { width: 10%; } *[class*=col-].col-lg-8 { width: 8.33333333%; } *[class*=col-].col-lg-push-91 { left: 91.66666667%; } *[class*=col-].col-lg-push-90 { left: 90%; } *[class*=col-].col-lg-push-83 { left: 83.33333333%; } *[class*=col-].col-lg-push-80 { left: 80%; } *[class*=col-].col-lg-push-75 { left: 75%; } *[class*=col-].col-lg-push-70 { left: 70%; } *[class*=col-].col-lg-push-66 { left: 66.66666667%; } *[class*=col-].col-lg-push-60 { left: 60%; } *[class*=col-].col-lg-push-58 { left: 58.33333333%; } *[class*=col-].col-lg-push-50 { left: 50%; } *[class*=col-].col-lg-push-41 { left: 41.66666667%; } *[class*=col-].col-lg-push-40 { left: 40%; } *[class*=col-].col-lg-push-33 { left: 33.33333333%; } *[class*=col-].col-lg-push-30 { left: 30%; } *[class*=col-].col-lg-push-25 { left: 25%; } *[class*=col-].col-lg-push-20 { left: 20%; } *[class*=col-].col-lg-push-16 { left: 16.66666667%; } *[class*=col-].col-lg-push-10 { left: 10%; } *[class*=col-].col-lg-push-8 { left: 8.33333333%; } *[class*=col-].col-lg-pull-91 { right: 91.66666667%; } *[class*=col-].col-lg-pull-90 { right: 90%; } *[class*=col-].col-lg-pull-83 { right: 83.33333333%; } *[class*=col-].col-lg-pull-80 { right: 80%; } *[class*=col-].col-lg-pull-75 { right: 75%; } *[class*=col-].col-lg-pull-70 { right: 70%; } *[class*=col-].col-lg-pull-66 { right: 66.66666667%; } *[class*=col-].col-lg-pull-60 { right: 60%; } *[class*=col-].col-lg-pull-58 { right: 58.33333333%; } *[class*=col-].col-lg-pull-50 { right: 50%; } *[class*=col-].col-lg-pull-41 { right: 41.66666667%; } *[class*=col-].col-lg-pull-40 { right: 40%; } *[class*=col-].col-lg-pull-33 { right: 33.33333333%; } *[class*=col-].col-lg-pull-30 { right: 30%; } *[class*=col-].col-lg-pull-25 { right: 25%; } *[class*=col-].col-lg-pull-20 { right: 20%; } *[class*=col-].col-lg-pull-16 { right: 16.66666667%; } *[class*=col-].col-lg-pull-10 { right: 10%; } *[class*=col-].col-lg-pull-8 { right: 8.33333333%; } } body { font-family: 'Karla', sans-serif; } h1 { font-family: 'Unica One', cursive; font-size: 64px; font-weight: 400; text-transform: uppercase; } h2 { font-family: 'Unica One', cursive; font-size: 42px; font-weight: 400; } .demo-grid { margin-bottom: 20px; } .demo-grid::after { content: ""; display: table; clear: both; } .demo-grid:nth-of-type(1) > div:nth-of-type(1) { background: #ffb900; } .demo-grid:nth-of-type(1) > div:nth-of-type(2) { background: #f5b200; } .demo-grid:nth-of-type(1) > div:nth-of-type(3) { background: #ebaa00; } .demo-grid:nth-of-type(1) > div:nth-of-type(4) { background: #e0a300; } .demo-grid:nth-of-type(1) > div:nth-of-type(5) { background: #d69b00; } .demo-grid:nth-of-type(1) > div:nth-of-type(6) { background: #cc9400; } .demo-grid:nth-of-type(1) > div:nth-of-type(7) { background: #c28d00; } .demo-grid:nth-of-type(1) > div:nth-of-type(8) { background: #b88500; } .demo-grid:nth-of-type(1) > div:nth-of-type(9) { background: #ad7e00; } .demo-grid:nth-of-type(1) > div:nth-of-type(10) { background: #a37600; } .demo-grid:nth-of-type(2) > div:nth-of-type(1) { background: #479fe9; } .demo-grid:nth-of-type(2) > div:nth-of-type(2) { background: #3e9ae8; } .demo-grid:nth-of-type(2) > div:nth-of-type(3) { background: #3595e7; } .demo-grid:nth-of-type(2) > div:nth-of-type(4) { background: #2c91e6; } .demo-grid:nth-of-type(2) > div:nth-of-type(5) { background: #238ce5; } .demo-grid:nth-of-type(2) > div:nth-of-type(6) { background: #1b87e2; } .demo-grid:nth-of-type(2) > div:nth-of-type(7) { background: #1a82d9; } .demo-grid:nth-of-type(2) > div:nth-of-type(8) { background: #197cd0; } .demo-grid:nth-of-type(2) > div:nth-of-type(9) { background: #1877c7; } .demo-grid:nth-of-type(2) > div:nth-of-type(10) { background: #1771be; } .demo-grid:nth-of-type(3) > div:nth-of-type(1) { background: #acacac; } .demo-grid:nth-of-type(3) > div:nth-of-type(2) { background: #939393; } .demo-grid:nth-of-type(3) > div:nth-of-type(3) { background: #868686; } .demo-grid:nth-of-type(3) > div:nth-of-type(4) { background: #797979; } .demo-grid:nth-of-type(3) > div:nth-of-type(5) { background: #6c6c6c; } .demo-grid:nth-of-type(3) > div:nth-of-type(6) { background: #606060; } .demo-grid:nth-of-type(3) > div:nth-of-type(7) { background: #535353; } .demo-grid:nth-of-type(4) > div:nth-of-type(1) { background: #ffb900; } .demo-grid:nth-of-type(4) > div:nth-of-type(2) { background: #479fe9; } .demo-grid.reset div { background: none !important; } .demo-grid div { -webkit-transition: height 0.3s cubic-bezier(0, 0, 0.2, 1); -moz-transition: height 0.3s cubic-bezier(0, 0, 0.2, 1); -ms-transition: height 0.3s cubic-bezier(0, 0, 0.2, 1); -o-transition: height 0.3s cubic-bezier(0, 0, 0.2, 1); transition: height 0.3s cubic-bezier(0, 0, 0.2, 1); } .demo-grid .inner { border: 1px solid #acacac; padding: 20px; } .demo-grid .inner p { margin: 0; }