:root {
    --container-width: 1440px;
}



/* BROWSER RESET
   ========================================================================== */

   html {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-overflow-style: scrollbar;
    
}

*, 
*::before,
*::after {
    box-sizing: inherit;
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@-ms-viewport {
    width: device-width;
}

article, aside, figcaption, figure, footer, 
header, hgroup, main, nav, section {
    display: block;
    padding: 0;
    margin: 0;
}
div {
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
    width: 100%;
    padding:0;
    margin: 0;
    color: #1d1d1b;
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,  Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    line-height: 1.5;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    background: black;
    color: #eee;
    font-family: monospace;
    font-size: 1em;

}

a {
    color: #212529;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 400;   
}

a img {
    border: 0;
}

small {
  font-size: 80%; 
}

sub, sup {
    position: relative;
    vertical-align: baseline; 
    font-size: 75%;
    line-height: 0;
}

sub {
  bottom: -0.25em; 
}

sup {
  top: -0.5em; 
}

h1, h2, h3, h4, h5, h6 {
    display: block;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #1d1d1b;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    font-weight: normal;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0;
}



/* LAYOUT
   ========================================================================== */

section {
    width: 100%;
}

.container {
    display: block;
    position: relative;
    width: 100%;
    max-width: var(--container-width);
    overflow: hidden;
    margin: 0 auto 0 auto;
}

.full-width {
    max-width: 100%;
}

.boxed-page {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}



/* GRID
   ========================================================================== */

.grid, .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(50px, 1fr));
}

/*ie doesn't support auto-fit and autofill keywords, and cause IE doesnt support auto-placements and they are meaningless to IE try avoid using*/ 
.grid-auto-width {
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

.grid-gap {
    grid-gap: 1rem;
}

.col-1 {
    grid-column: auto / span 1; 
}

.col-2 {
    grid-column: auto / span 2;
}

.col-3 {
    grid-column: auto / span 3;
}

.col-4 {
    grid-column: auto / span 4;
}

.col-5 {
    grid-column: auto / span 5;
}

.col-6 {
    grid-column: auto / span 6;
}

.col-7 {
    grid-column: auto / span 7;
}

.col-8 {
    grid-column: auto / span 8;
}

.col-9 {
    grid-column: auto / span 9;
}

.col-10 {
    grid-column: auto / span 10;
}

.col-11 {
    grid-column: auto / span 11;
}

.col-12 {
    grid-column: auto / span 12;
}



/* TYPOGRAPHY
   ========================================================================== */

h1, h1 a {
    margin:1.5rem 0;
    font-size: 2.5rem;
    color: #333;
    line-height: 2rem;
}

h2 {
    margin: 1.5rem 0;
    font-size: 2rem;
    color: #333;
    line-height: 1.75rem;
}

h3 {
    margin: 0.75rem 0;
    font-size: 1.5rem;
    color: #333;
    line-height: 1.75rem;
}

h4 {
    margin: 0.75rem 0;
    font-size: 1.25rem;
    color: #333;
    line-height: 1.75rem;
}

h5 {
    margin: 0.75rem 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.75rem;
}

h6 {
    margin: 0.75rem 0;
    font-size: 0.5rem;
    color: #333;
    line-height: 1.75rem;
}

h1:first-child, 
h2:first-child, 
h3:first-child, 
h4:first-child, 
h5:first-child, 
h6:first-child, 
p:first-child {
    margin-top: 0;
}

a:link {
    color: #284d47;
    text-decoration: underline;
}

a:hover {
    color: #FF6705;
    text-decoration: none;
}

a:visited {
    color: indigo;
    text-decoration: underline;
}

code {
    font-family: Consolas, "Courier New", Courier, mono;
}

ul , ol{
    margin-left: 1.25rem;
}

.list-style-none {
    list-style: none;
}

blockquote {
    position: relative;
    margin: 1.875rem 1.25rem;
    padding: 1.25rem 3.125rem;
    background: #e9e9e9;
    border-left: 0.625rem solid #000;
    font-size: 1.25rem;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote p {
    display: inline;
}

.section-title h6 {
    position: relative;
    color: #ccc;
    font-weight: 400;
}

.section-title h6::after {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 4.375rem;
    height:0.75rem;
    margin-left: 0.9375rem;
    border-bottom: 2px solid #333;
}

.outline {
    color: #1d2d51;
    text-shadow:
	   -1px -1px 0 orange,  
		1px -1px 0 orange,
		1px 1px 0 orange,
		1px 1px 0 orange
}


/* RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 1024px) {

    .grid:not(.gallery), 
    .row:not(.gallery) {
    display: block;
}

    .row > [class*='col-'],
    .grid > [class*='col-'] {
     width: 100% !important;
     max-width: 100% !important;
}

     img.full-width {
     width: 100%;
     height: auto;
}

}