* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*------------------------------------------------------------------
1.2 DEFAULTS -----------------------------------------------------*/

html, body {
  font: 400 18px/1.5 Inter,Helvetica,Arial,sans-serif;
  text-align: center;
  background: #FCFDFD;
  color: #1F2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

/*------------------------------------------------------------------
1.3 GRID ---------------------------------------------------------*/

.container {
	margin: 0 auto;
	padding: 16px 8px;
	max-width: 1272px;
	position: relative;
}

.container .container { width: auto; max-width: none; min-width: 0; padding: 0; }

.col {
  float: left;
  text-align: left;
  padding: 16px 8px;
  min-height: 1px; 
  position: relative;
}

.col_1 { width: 8.333333333333333%; }
.col_2 { width: 16.666666666666667%; }
.col_3 { width: 25%; }
.col_4 { width: 33.333333333333333%; }
.col_5 { width: 41.666666666666667%; }
.col_6 { width: 50%; }
.col_7 { width: 58.333333333333333%; }
.col_8 { width: 66.666666666666667%; }
.col_9 { width: 75%; }
.col_10 { width: 83.333333333333333%; }
.col_11 { width: 91.666666666666667%; }
.col_12 { width: 100%; }

.push_1 { margin-left: 8.333333333333333%; }
.push_2 { margin-left: 16.666666666666667%; }
.push_3 { margin-left: 25%; }
.push_4 { margin-left: 33.333333333333333%; }
.push_5 { margin-left: 41.666666666666667%; }
.push_6 { margin-left: 50%; }
.push_7 { margin-left: 58.333333333333333%; }
.push_8 { margin-left: 66.666666666666667%; }
.push_9 { margin-left: 75%; }
.push_10 { margin-left: 83.333333333333333%; }
.push_11 { margin-left: 91.666666666666667%; }
.push_12 { margin-left: 100%; }

.show_0 { display: block;	}
.hide_0 { display: none; }

.nopad { padding: 0; }
	
.pad_l { padding-left: 24px; }
.pad_r { padding-right: 24px; }
.pad_t { padding-top: 24px; }
.pad_b { padding-bottom: 24px; }

@media screen and (min-width: 540px) {
    
    .container {
        padding: 16px 12px;
    }
    
    .col {
        padding: 16px 12px;
    }
    
	.col_540_1 { width: 8.333333333333333%; }
	.col_540_2 { width: 16.666666666666667%; }
	.col_540_3 { width: 25%; }
	.col_540_4 { width: 33.333333333333333%; }
	.col_540_5 { width: 41.666666666666667%; }
	.col_540_6 { width: 50%; }
	.col_540_7 { width: 58.333333333333333%; }
	.col_540_8 { width: 66.666666666666667%; }
	.col_540_9 { width: 75%; }
	.col_540_10 { width: 83.333333333333333%; }
	.col_540_11 { width: 91.666666666666667%; }
	.col_540_12 { width: 100%; }
	
  .col_540_push_1 { margin-left: 8.333333333333333%; }
  .col_540_push_2 { margin-left: 16.666666666666667%; }
  .col_540_push_3 { margin-left: 25%; }
  .col_540_push_4 { margin-left: 33.333333333333333%; }
  .col_540_push_5 { margin-left: 41.666666666666667%; }
  .col_540_push_6 { margin-left: 50%; }
  .col_540_push_7 { margin-left: 58.333333333333333%; }
  .col_540_push_8 { margin-left: 66.666666666666667%; }
  .col_540_push_9 { margin-left: 75%; }
  .col_540_push_10 { margin-left: 83.333333333333333%; }
  .col_540_push_11 { margin-left: 91.666666666666667%; }
  .col_540_push_12 { margin-left: 100%; }
	
	.show_540 { display: block;	}
	.hide_540 { display: none; }
	
  .nopad_540 { padding: 0; }
	
	.pad_540_l { padding-left: 24px; }
	.pad_540_r { padding-right: 24px; }
	.pad_540_t { padding-top: 24px; }
	.pad_540_b { padding-bottom: 24px; }
}

@media screen and (min-width: 760px) {
	.col_760_1 { width: 8.333333333333333%; }
	.col_760_2 { width: 16.666666666666667%; }
	.col_760_3 { width: 25%; }
	.col_760_4 { width: 33.333333333333333%; }
	.col_760_5 { width: 41.666666666666667%; }
	.col_760_6 { width: 50%; }
	.col_760_7 { width: 58.333333333333333%; }
	.col_760_8 { width: 66.666666666666667%; }
	.col_760_9 { width: 75%; }
	.col_760_10 { width: 83.333333333333333%; }
	.col_760_11 { width: 91.666666666666667%; }
	.col_760_12 { width: 100%; }
	
  .col_760_push_1 { margin-left: 8.333333333333333%; }
  .col_760_push_2 { margin-left: 16.666666666666667%; }
  .col_760_push_3 { margin-left: 25%; }
  .col_760_push_4 { margin-left: 33.333333333333333%; }
  .col_760_push_5 { margin-left: 41.666666666666667%; }
  .col_760_push_6 { margin-left: 50%; }
  .col_760_push_7 { margin-left: 58.333333333333333%; }
  .col_760_push_8 { margin-left: 66.666666666666667%; }
  .col_760_push_9 { margin-left: 75%; }
  .col_760_push_10 { margin-left: 83.333333333333333%; }
  .col_760_push_11 { margin-left: 91.666666666666667%; }
  .col_760_push_12 { margin-left: 100%; }
	
	.show_760 { display: block;	}
	.hide_760 { display: none; }
	
  .nopad_760 { padding: 0; }
	
	.pad_760_l { padding-left: 24px; }
	.pad_760_r { padding-right: 24px; }
	.pad_760_t { padding-top: 24px; }
	.pad_760_b { padding-bottom: 24px; }
}

@media screen and (min-width: 980px) {
    
    .container {
        padding: 16px 16px;
    }
    
    .col {
        padding: 16px 16px;
    }
    
	.col_980_1 { width: 8.333333333333333%; }
	.col_980_2 { width: 16.666666666666667%; }
	.col_980_3 { width: 25%; }
	.col_980_4 { width: 33.333333333333333%; }
	.col_980_5 { width: 41.666666666666667%; }
	.col_980_6 { width: 50%; }
	.col_980_7 { width: 58.333333333333333%; }
	.col_980_8 { width: 66.666666666666667%; }
	.col_980_9 { width: 75%; }
	.col_980_10 { width: 83.333333333333333%; }
	.col_980_11 { width: 91.666666666666667%; }
	.col_980_12 { width: 100%; }
	
  .col_980_push_1 { margin-left: 8.333333333333333%; }
  .col_980_push_2 { margin-left: 16.666666666666667%; }
  .col_980_push_3 { margin-left: 25%; }
  .col_980_push_4 { margin-left: 33.333333333333333%; }
  .col_980_push_5 { margin-left: 41.666666666666667%; }
  .col_980_push_6 { margin-left: 50%; }
  .col_980_push_7 { margin-left: 58.333333333333333%; }
  .col_980_push_8 { margin-left: 66.666666666666667%; }
  .col_980_push_9 { margin-left: 75%; }
  .col_980_push_10 { margin-left: 83.333333333333333%; }
  .col_980_push_11 { margin-left: 91.666666666666667%; }
  .col_980_push_12 { margin-left: 100%; }
	
	.show_980 { display: block;	}
	.hide_980 { display: none; }
	
	.nopad_980 { padding: 0; }
	
	.pad_980_l { padding-left: 24px; }
	.pad_980_r { padding-right: 24px; }
	.pad_980_t { padding-top: 24px; }
	.pad_980_b { padding-bottom: 24px; }
}

@media screen and (min-width: 1200px) {
    
    .container {
        padding: 24px 24px;
    }
    
    .col {
        padding: 24px 24px;
    }
    
	.col_1200_1 { width: 8.333333333333333%; }
	.col_1200_2 { width: 16.666666666666667%; }
	.col_1200_3 { width: 25%; }
	.col_1200_4 { width: 33.333333333333333%; }
	.col_1200_5 { width: 41.666666666666667%; }
	.col_1200_6 { width: 50%; }
	.col_1200_7 { width: 58.333333333333333%; }
	.col_1200_8 { width: 66.666666666666667%; }
	.col_1200_9 { width: 75%; }
	.col_1200_10 { width: 83.333333333333333%; }
	.col_1200_11 { width: 91.666666666666667%; }
	.col_1200_12 { width: 100%; }
	
	.col_1200_push_1 { margin-left: 8.333333333333333%; }
  .col_1200_push_2 { margin-left: 16.666666666666667%; }
  .col_1200_push_3 { margin-left: 25%; }
  .col_1200_push_4 { margin-left: 33.333333333333333%; }
  .col_1200_push_5 { margin-left: 41.666666666666667%; }
  .col_1200_push_6 { margin-left: 50%; }
  .col_1200_push_7 { margin-left: 58.333333333333333%; }
  .col_1200_push_8 { margin-left: 66.666666666666667%; }
  .col_1200_push_9 { margin-left: 75%; }
  .col_1200_push_10 { margin-left: 83.333333333333333%; }
  .col_1200_push_11 { margin-left: 91.666666666666667%; }
  .col_1200_push_12 { margin-left: 100%; }
	
	.show_1200 { display: block;	}
	.hide_1200 { display: none; }
	
	.nopad_1200 { padding: 0; }
	
	.pad_1200_l { padding-left: 24px; }
	.pad_1200_r { padding-right: 24px; }
	.pad_1200_t { padding-top: 24px; }
	.pad_1200_b { padding-bottom: 24px; }
}


/*------------------------------------------------------------------
1.2 TYPOGRAPHY ---------------------------------------------------*/

@media screen and (min-width: 980px) {
    html, body {
        font: 400 20px/1.5 Inter,Helvetica,Arial,sans-serif;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: Fraunces;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 2.4rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

p {
    font-size: 1rem;
}

/*------------------------------------------------------------------
2 Sections ---------------------------------------------------------
------------------------------------------------------------------*/

/*------------------------------------------------------------------
2.0 Global -------------------------------------------------------*/

.button {
    font-size: 20px;
    font-weight: 500;
    padding: 18px 30px;
    border: 2px solid;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    display: inline-block;

    -webkit-transition: background 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}

.button_primary {
    background: #673DE6;
    border-color: #673DE6;
    color: #ffffff;
}

.button_secondary {
    background: #FFFFFF;
    border-color: #673DE6;
    color: #673DE6;
}

.button_primary:hover {
    background: #4E1DE2;
    border-color: #673DE6;
    color: #ffffff;
}

.button_secondary:hover {
    background: #EDEAFB;
}

.pill {
    color: #673DE6;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
    background: #EDEAFB;
    height: 32px;
    padding: 8px 12px;
}

.card-style {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #EDEAFB;
    overflow: hidden;
}

.card-content {
    padding: 24px;
    height: 100%;
}

.card-content h3 {
    margin: 16px 0 8px;
}

.card-content p {
    color: #6B7276;
    margin-bottom: 40px;
}

@media screen and (min-width: 540px) {

    .card-content {
           
    }

}

@media screen and (min-width: 760px) {

    .card-content {
        padding: 32px;
    }

}

@media screen and (min-width: 980px) {

    .card-content {
           
    }

}

@media screen and (min-width: 1200px) {

    h1 {
        font-size: 2.8rem;
    }
    
    .card-content {
        padding: 48px;
    }
}

/*------------------------------------------------------------------
2.1 Menu ---------------------------------------------------------*/

#menu {
    height: 88px;
    background: #ffffff;
}

#menu .container {
    padding: 0 12px;
}

.role p {
    color: #6B7276;
    font-size: 0.6rem;
}

.role p b {
    font-weight: 500;
    color: #1F2937;
    font-size: 0.8rem;
    display: block;
}

.role a:link, .role a:visited {
    text-decoration: none;
    color: #6B7276;
}

.role a:hover b {
    text-decoration: underline;
}

#menu ul {
    list-style-type: none;
    float: right;
}

#menu ul li {
    float: left;
    margin-left: 8px;
}

#menu ul li a:link, #menu ul li a:visited {
    display: block;
    padding: 8px 16px;
    color: #6B7276;
    font-size: 0.8rem;
    text-decoration: none;
    border-radius: 4px;
    -webkit-transition: background 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}

#menu ul li a:hover {
    color: #1F2937;
    background: #EDEAFB;
}

@media screen and (min-width: 540px) {

}

@media screen and (min-width: 760px) {

}

@media screen and (min-width: 980px) {

}

@media screen and (min-width: 1200px) {
    
}

/*------------------------------------------------------------------
2.2 Header -------------------------------------------------------*/

#header, #work {
    background-color: #FCFDFD;
}

#header .container {
    padding-top: 48px;
}

#header h1 {
    margin-bottom: 24px;
    margin-top: 8px;
}

#header .available {
    display: inline-block;
    background: #FAF1D8;
    padding: 12px 16px;
    border-radius: 6px;
    line-height: 1;
    margin-bottom: 40px;
    color: #6B7276;
}

#header .welcome {
    color: #6B7276;
    display: block;
}

#header p {
    color: #6B7276;
    margin-bottom: 32px;
}

#header p b, #header .available b {
    font-weight: 500;
    color: #1F2937;
}

.buttons .button {
    width: 100%;
    display: block;
}

.buttons .button_primary {
    margin-bottom: 16px;
}

@media screen and (min-width: 540px) {

}

@media screen and (min-width: 760px) {

    #header .container {
        padding-top: 48px;
        padding-bottom: 48px;
        background-image: url('../img/Hero.png');
        background-repeat: no-repeat;
        background-position: bottom right -96px;
        background-size: 480px 480px;
    }

    #header .button_primary {
        margin-right: 24px;
        float: left;
    }
    
    #header p {
        margin-bottom: 48px;
    }
        
    .buttons .button {
        width: auto;
        display: inline-block;
        margin-bottom: 0;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
        #header .container {
            background-image: url('../img/Hero-2.png');
        }
    }

}

@media screen and (min-width: 980px) {
    
    #header .container {
        padding-top: 64px;
        padding-bottom: 80px;
        background-position: bottom right 24px;
        background-size: 528px 528px;
    }
    
}

@media screen and (min-width: 1200px) {

}

/*------------------------------------------------------------------
2.3 Logos --------------------------------------------------------*/

#logos {
    background: #673DE6;
}

#logos .container {
}

#logos .logo {
    vertical-align: middle;
    height: 100px;
    display: flex;
    align-items: center;
    opacity: 0.6;
    
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.logo img {
    display: block;
    margin: 0 auto;
    max-width: 120px;
}

#logos .logo:hover {
    opacity: 1;
}

@media screen and (min-width: 540px) {
    
    .logo img {
        max-width: unset;
    }
    
}

@media screen and (min-width: 760px) {

    #logos .logo {
        height: 120px;
    }

    .logo img {
        max-width: 120px;
    }

}

@media screen and (min-width: 980px) {

    .logo img {
        max-width: unset;
    }

}

@media screen and (min-width: 1200px) {
    
}

/*------------------------------------------------------------------
2.4 Work ---------------------------------------------------------*/

#work .title h3 {
    margin-bottom: 0;
    text-align: center;
}

#work .title {
    padding-top: 24px;
    padding-bottom: 20px;
}

#work .story {
    padding-top: 12px;
    padding-bottom: 12px;
}

.story-image {
    padding: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 300px;
}

.story-title {
    padding: 24px;
    height: 100%;
}

.story-title h3 {
    margin: 16px 0 8px;
}

.story-title p {
    color: #6B7276;
    margin-bottom: 40px;
}

@media screen and (min-width: 540px) {

}

@media screen and (min-width: 760px) {

    #work .card-style {
        height: 400px;
    }
    
    .story-image {
        height: 400px;
    }
    
    .story-title {
        padding: 32px;
    }

}

@media screen and (min-width: 980px) {

}

@media screen and (min-width: 1200px) {
    
    .story-title {
        padding: 48px;
    }
    
}


/*------------------------------------------------------------------
2.5 At a glance ---------------------------------------------------------*/

#glance {
    padding: 24px 0;
    border-top: 1px solid #EDEAFB;
}

#glance .glance h3 {
    margin-bottom: 40px;
}

#glance .glance p {
    color: #6B7276;
    margin-bottom: 16px;
}

#glance .glance p b {
    font-weight: 500;
    color: #1F2937;
    background: #EDEAFB;
    padding: 2px 8px;
    border-radius: 4px;
}

#principles {
    /*padding-top: 0; */
}

#principles .container {
    background: #ffffff;
    border: 1px solid #EDEAFB;
    border-radius: 12px;
}

#principles .card {
    border-bottom: 1px solid #EDEAFB;
    overflow: hidden;
    padding: 24px;
}

#principles .card:last-child {
    border-bottom: 0px none;
}

#principles .card h4 {
    color: #1F2937;
    margin-bottom: 12px;
}

#principles .card p {
    color: #6B7276;
    font-size: 0.9rem;
}

@media screen and (min-width: 760px) {

    #principles .card {
        padding: 32px;
    }

}

@media screen and (min-width: 980px) {

    #principles .container {
        display: flex;
    }

    #principles .card {
        border-right: 1px solid #EDEAFB;
        border-bottom: 0px none;
        padding: 40px;
        flex-grow: 1;
    }
    
    #principles .card:last-child {
        border-right: 0px none;
    }

}







#glance-1 {
    padding: 24px 0;
}

#summary {
    padding: 24px;
} 

#glance-1 h3 {
    margin-bottom: 0;
    text-align: center;
}

#glance-1 .title {
    padding-bottom: 8px;
}

#glance-1 .glance-1 p {
    color: #6B7276;
    margin-bottom: 24px;
}

#glance-1 .glance-1 p:last-child {
    margin-bottom: 0;
}

#glance-1 .glance-1 p b {
    font-weight: 500;
    color: #1F2937;
    background: #EDEAFB;
    padding: 2px 8px;
    border-radius: 4px;
}

#principles-1 {
    padding: 0;
    border-top: 1px solid #EDEAFB;
}

#principles-1 .card-1 {
    border-bottom: 1px solid #EDEAFB;
    overflow: hidden;
    padding: 24px;
}

#principles-1 .card-1:last-child {
    border-bottom: 0px none;
}

#principles-1 .card-1 h4 {
    color: #1F2937;
    margin-bottom: 12px;
}

#principles-1 .card-1 p {
    color: #6B7276;
    font-size: 0.9rem;
}

@media screen and (min-width: 760px) {

    #summary {
        padding: 32px;
    } 

    #principles-1 .card-1 {
        padding: 32px;
    }

}

@media screen and (min-width: 980px) {
    
    
    #summary {
        padding: 48px;
    } 

    #principles-1 .container {
        display: flex;
    }

    #principles-1 .card-1 {
        border-right: 1px solid #EDEAFB;
        border-bottom: 0px none;
        padding: 40px;
        flex-grow: 1;
    }
    
    #principles-1 .card-1:last-child {
        border-right: 0px none;
    }

}

#hero .hero-story-container {
    padding-top: 12px;
    padding-bottom: 12px;
}

.hero-story-image {
    padding: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 300px;
}

.hero-story-content {
    padding: 24px;
}

.hero-story-content h3 {
    margin: 24px 0 12px;
}

.hero-story-content p {
    color: #6B7276;
}

.hero-story .numbers {
    border-top: 1px solid #EDEAFB;
    border-bottom: 1px solid #EDEAFB;
    margin: 12px 0;
}

.hero-story .number {
    padding: 32px 0;
}

.hero-story .numbers p {
    color: #6B7280;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-story .numbers b {
    color: #673DE6;
    font-style: normal;
    letter-spacing: 0px;
    text-transform: none;
    font-size: 1.4rem;
    font-family: Fraunces;
    font-weight: 700;
    line-height: 1.2;
    display: block;
}

@media screen and (min-width: 540px) {

    .hero-story .numbers {
        margin: 24px 0;
    }

}

@media screen and (min-width: 760px) {
 
    .hero-story-image {
        height: 400px;
    } 
 
    .hero-story-content {
        padding: 32px;
    }
    
    .hero-story .numbers {
        margin: 32px 0;
    }
    
}

@media screen and (min-width: 1200px) {
 
    .hero-story-content {
        padding: 48px;
    }
    
}



/*------------------------------------------------------------------
3. PORTFOLIO
-------------------------------------------------------------------*/

#article h1 {
    font-size: 1.6rem;
}

#article h2 {
    font-size: 1.4rem;
}

.heading {
    padding-top: 24px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.heading h1 {
    margin: 24px 0 12px;
}

.heading h2 {
    margin: 24px 0 8px;
}

.heading p {
    color: #6B7276;
}

.tldr.container {
    background: #673DE6;
    color: #E1D8FA;
    border-radius: 12px;
    padding: 12px;
}

.tldr .col {
    padding: 12px;
}

.tldr p {
    font-size: 0.9rem;
}

.tldr .number p {
    color: #E1D8FA;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tldr .number b {
    color: #ffffff;
    font-style: normal;
    letter-spacing: 0px;
    text-transform: none;
    font-size: 1.4rem;
    font-family: Fraunces;
    font-weight: 700;
    line-height: 1.2;
    display: block;
}

.section .heading {
    padding-bottom: 8px;
}

#article .intro-image {
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#article .card-style {
    padding: 16px;
}

#article .card-style:first-child {
    padding-top: 8px;
}

#article .card-style:last-child {
    padding-bottom: 8px;
}

#article .block {
    padding-bottom: 0px;
}

#article h3, h4 {
    margin-bottom: 0.6rem;
}

#article .card-style p {
    color: #6B7276;
    margin-bottom: 24px;
}

#article .card-style p:last-child {
    margin-bottom: 0;
}

.inset {
    background: #EDEAFB;
    padding: 24px;
    border-radius: 12px;
}

.inset p {
    font-size: 0.8rem;
}


@media screen and (min-width: 540px) {
 

    
}

@media screen and (min-width: 760px) {

    #article h1 {
        font-size: 2rem;
    }

    #article .intro-image {
        height: 600px;
    }

    .tldr.container {
        padding: 24px;
    }
    
    #article .card-style {
        padding: 24px;
    }
    
    #article .card-style:first-child {
        padding-top: 16px;
    }
    
    #article .card-style:last-child {
        padding-bottom: 16px;
    }
    
    .inset {
        padding: 32px;
    }
    
}

@media screen and (min-width: 980px) {
 
    .tldr.container {
        padding: 36px;
    }
    
}

@media screen and (min-width: 1200px) {
 
    #article h1 {
        font-size: 2.4rem;
    }
    
    .inset {
        padding: 40px;
    }
    
    #article .card-style:first-child {
        padding-top: 24px;
    }
    
    #article .card-style:last-child {
        padding-bottom: 24px;
    }
    
}



/*------------------------------------------------------------------
9. UTILITY
-------------------------------------------------------------------*/

.container:before, .container:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.container:after, .clearfix:after { clear: both; }
.container, .clearfix { zoom: 1; }

.hidden {
	display: block;
	height: 1px;
	left: -5000px;
	line-height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-indent: -5000px;
	width: 1px;
}

/*------------------------------------------------------------------
10. TESTING
-------------------------------------------------------------------*/

body.dev {
  background-image: url('dev.png');
  background-repeat: repeat-y;
  background-position: center top;
}

.col.dev {
    background-color: #F8E4E3;
}

.dev {
  border: 1px solid #ff0000;
}