/******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.

Helpful articles on Sass file organization:
http://thesassway.com/advanced/modular-css-naming-conventions

******************************************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@700&family=Poppins:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline; }

html {
  /*font-size: 62.5%;  Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
  overflow-y: scroll;
  /* Keeps page centered in all browsers regardless of content height */
  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%;
  /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ }

*,
*:before,
*:after {
  /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  -webkit-box-sizing: border-box;
  /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
  -moz-box-sizing: border-box;
  /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
  box-sizing: border-box; }

body {
  background: #fff;
  height: 100%; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block; }

ol, ul {
  list-style: none; }

table {
  /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0; }

caption, th, td {
  font-weight: normal;
  text-align: left; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: ""; }

blockquote, q {
  quotes: "" ""; }

a:focus {
  outline: thin dotted; }

a:hover,
a:active {
  outline: 0; }

a img {
  border: 0; }

/******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/** COLORS **/
/* Brand Colors */
/* UP = brighter, DOWN = darker */
/* Orange */
/* Green */
/** FONTS **/
/******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/******************************************************************
Site Name:
Author: Irvine Acosta

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/* Float Clearing */
/* Border Radius */
/* Single side border-radius */
/** Opacity **/
/** Absolute Position **/
/** Reset (for nested lists) **/
/** Font Size **/
/** Line Height **/
/** SVG BG with fallback **/
/* Transition */
/* Box Shadow */
/* Full Bleed Background */
/* Text Overflow Ellipsis... */
/* Vertical-Align */
/******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Animate

Animation keyframes and classes.

******************************************************************/
/******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Forms

Form elements like input fields and buttons

******************************************************************/
/** BUTTONS **/
.button {
  /* Text */
  color: #222;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  /* Shape & Colors */
  background: #fff;
  height: 40px;
  line-height: 40px;
  padding: 0 3.5rem 0 1.5rem;
  min-width: 140px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  display: inline-block;
  /* Extras */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: 0.2s ease all;
  position: relative; }

.button:before {
  width: 24px;
  height: 24px;
  background: url("../img/icon-arrow.svg");
  content: "";
  top: .5rem;
  right: 1.5rem;
  position: absolute;
  transition: 0.2s ease all; }

.break {
  text-align: center; }
  .break .behance.button {
    background: #222;
    color: #fff;
    height: 56px;
    text-align: center;
    border-radius: 28px;
    font-size: 1.25rem;
    margin: 2.5rem auto;
    line-height: 56px;
    padding-left: 4rem;
    padding-right: 1.5rem;
    position: relative; }
  .break .behance.button:before {
    width: 40px;
    height: 40px;
    background: url(../img/icon-behance-circle.svg);
    content: " ";
    position: absolute;
    top: 8px;
    left: 8px; }
  .break .behance.button:hover {
    background: #0057FF; }

.button:hover {
  background: #FFE72C; }

.button:hover:before {
  right: 1rem; }

.button:focus {
  background: #FFCF2C;
  box-shadow: none;
  transform: translate(0px, 2px); }

.button.disabled {
  pointer-events: none;
  background: #DADADA !important;
  border: 1px solid #DADADA; }

.button.alt {
  background: #fff;
  border: 1px solid #ccc;
  color: #222222; }

/** INPUTS **/
.input-group {
  margin-bottom: 16px;
  position: relative;
  max-width: 500px;
  /** The Select Ticker **/ }
  .input-group label {
    font-weight: 700;
    font-size: 1em;
    display: block;
    margin-bottom: 4px;
    color: #222222; }
  .input-group input,
  .input-group select,
  .input-group textarea {
    height: 40px;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 1em;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* remove default arrow */
    outline: none;
    box-shadow: none;
    overflow: auto;
    box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1); }
  .input-group select {
    background-image: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%);
    box-shadow: none;
    color: #222222;
    padding-top: 8px;
    padding-bottom: 8px; }
  .input-group textarea {
    height: auto;
    min-height: 140px; }
  .input-group input:focus,
  .input-group textarea:focus,
  .input-group select:focus {
    border: 2px solid #FF6738; }
  .input-group .select-wrapper {
    position: relative; }
  .input-group .select-wrapper:after {
    content: 'arrow_drop_down';
    color: #222222;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 24px !important;
    pointer-events: none; }

::-webkit-input-placeholder {
  color: #ccc; }

:-ms-input-placeholder {
  color: #ccc; }

::placeholder {
  color: #ccc; }

.error-message {
  display: none;
  color: red;
  padding-left: 16px;
  position: relative; }

.error-message:before {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: red;
  left: 0;
  top: 8px;
  content: ''; }

.input-group.error .error-message {
  display: block; }

.input-group.error input,
.input-group.error select,
.input-group.error textarea {
  border: 2px solid red;
  padding: 9px; }

/** RADIO BUTTONS & CHECKBOXES **/
.radiocheck-group {
  margin-bottom: 16px; }
  .radiocheck-group input {
    display: none; }
  .radiocheck-group label {
    display: block;
    min-height: 24px;
    padding-left: 32px;
    line-height: 24px;
    color: #666666;
    margin-bottom: 10px;
    position: relative; }
  .radiocheck-group label:before {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0;
    left: 0; }
  .radiocheck-group input[type=radio] ~ label:before {
    color: #999999;
    content: "radio_button_unchecked"; }
  .radiocheck-group input[type=radio]:checked ~ label:before {
    color: #FF6738;
    content: "radio_button_checked"; }
  .radiocheck-group input[type=checkbox] ~ label:before {
    color: #999999;
    content: "check_box_outline_blank"; }
  .radiocheck-group input[type=checkbox]:checked ~ label:before {
    color: #FF6738;
    content: "check_box"; }

/** Star Rating **/
.star-rating {
  margin-bottom: 16px; }
  .star-rating:before,
  .star-rating:after {
    content: "";
    display: table; }
  .star-rating:after {
    clear: both; }
  .star-rating .rate {
    float: left;
    height: 46px; }
  .star-rating .rate:not(:checked) > input {
    display: none; }
  .star-rating .rate:not(:checked) > label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 32px;
    color: #E4E4E4; }
  .star-rating .rate:not(:checked) > label:before {
    font-family: 'Material Icons';
    content: 'star'; }
  .star-rating .rate > input:checked ~ label {
    color: #F8B465; }
  .star-rating .rate:not(:checked) > label:hover,
  .star-rating .rate:not(:checked) > label:hover ~ label {
    color: #FF9C03; }
  .star-rating .rate > input:checked + label:hover,
  .star-rating .rate > input:checked + label:hover ~ label,
  .star-rating .rate > input:checked ~ label:hover,
  .star-rating .rate > input:checked ~ label:hover ~ label,
  .star-rating .rate > label:hover ~ input:checked ~ label {
    color: #FF9C03; }

/*********************
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/
/******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Base Mobile Stylesheet

Be light and don't over style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. This is called at the top of the main stylsheet
and will be used across all viewports.

******************************************************************/
html, body {
  background: #fafafa;
  color: #666666;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 2rem; }

.material-icons, .input-group .select-wrapper:after, .radiocheck-group label:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }

h1 {
  font-size: 2.5rem; }

h2 {
  font-size: 2.25rem; }

h3 {
  font-size: 2rem; }

h4 {
  font-size: 1.75rem; }

h5 {
  font-size: 1.5rem; }

h6 {
  font-size: 1.25rem; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Bitter", serif;
  color: #222222;
  font-weight: 700;
  margin-bottom: .5rem; }

p {
  margin-top: .5rem; }

.wrap {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px; }

.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E7E7E7;
  padding: 0.8rem 0 0.2rem 0;
  margin-bottom: 1.5rem; }
  .site-header:before,
  .site-header:after {
    content: "";
    display: table; }
  .site-header:after {
    clear: both; }
  .site-header .profile {
    float: left; }
    .site-header .profile:before,
    .site-header .profile:after {
      content: "";
      display: table; }
    .site-header .profile:after {
      clear: both; }
    .site-header .profile .photo {
      float: left;
      width: 40px;
      transform: translateY(-2px); }
      .site-header .profile .photo img {
        width: 100%; }
    .site-header .profile .title h5 {
      display: none; }
    .site-header .profile .title span {
      margin-top: 4px;
      display: none;
      color: #555; }
  .site-header .links {
    float: right;
    display: flex;
    gap: .5rem;
    height: 40px;
    align-items: center; }
    .site-header .links a {
      width: 32px;
      height: 32px;
      display: block; }
      .site-header .links a g {
        fill: #333333;
        transition: 0.5s ease all; }
    .site-header .links a.email:hover g {
      fill: #ff1d6c; }
    .site-header .links a.behance:hover g {
      fill: #0056ff; }
    .site-header .links a.linkedin:hover g {
      fill: #0073b2; }
    .site-header .links a.vimeo:hover g {
      fill: #00adef; }

.filters {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  /*
	input[type="radio"]#ux:checked+label { background:#E73A3A; border-color:#E73A3A;}
	input[type="radio"]#visual:checked+label { background:#FA068C; border-color:#FA068C;}
	input[type="radio"]#frontend:checked+label { background:#AA10EE; border-color:#AA10EE;}
	input[type="radio"]#animation:checked+label { background:#1089ED; border-color:#1089ED;}
	input[type="radio"]#brand:checked+label { background:#208946; border-color:#208946;}
	input[type="radio"]#art:checked+label { background:#F25B00; border-color:#F25B00;}
*/ }
  .filters input[type="radio"] {
    display: none; }
  .filters label {
    border: 1px solid #E4E4E4;
    background: #fff;
    color: #666;
    font-size: .88rem;
    height: 32px;
    line-height: 31px;
    padding: 0 16px;
    display: block;
    border-radius: 16px;
    box-sizing: border-box;
    cursor: pointer;
    transition: 0.5s ease all; }
  .filters label:hover {
    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.15);
    background: #fff;
    border: 1px solid #ccc; }
  .filters input[type="radio"]:checked + label {
    background: #000;
    border-color: #000;
    color: #fff; }
  .filters input[type="radio"]:checked + label {
    box-shadow: none; }

.work {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; }
  .work .item {
    background: #fff;
    border: 1px solid #E4E4E4;
    border-radius: .5rem;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    overflow: hidden;
    text-decoration: none;
    outline: none;
    transition: 0.5s ease all; }
    .work .item .image {
      width: 100%;
      grid-row: 1;
      grid-column: 1; }
    .work .item .content {
      padding: 1rem 1.5rem; }
      .work .item .content h5 {
        color: #222;
        font-size: 1rem;
        margin-bottom: .4rem; }
      .work .item .content ul.tags li {
        display: inline-block;
        color: #888;
        font-size: .75rem;
        margin-right: .5rem;
        padding-left: 1.25rem;
        line-height: 1rem;
        position: relative; }
      .work .item .content ul.tags li:before {
        content: '';
        width: 1rem;
        height: 1rem;
        display: block;
        top: 0;
        left: 0;
        position: absolute; }
      .work .item .content ul.tags li:last-child {
        margin-right: 0; }
      .work .item .content ul.tags li.date:before {
        background: url("../img/icon-date.svg"); }
      .work .item .content ul.tags li.visual:before {
        background: url("../img/icon-visual.svg"); }
      .work .item .content ul.tags li.ux:before {
        background: url("../img/icon-ux.svg"); }
      .work .item .content ul.tags li.code:before {
        background: url("../img/icon-code.svg"); }
      .work .item .content ul.tags li.art:before {
        background: url("../img/icon-art.svg"); }
      .work .item .content ul.tags li.brand:before {
        background: url("../img/icon-brand.svg"); }
      .work .item .content ul.tags li.animation:before {
        background: url("../img/icon-motion.svg"); }
  .work .item:hover {
    border: 1px solid #ccc;
    box-shadow: 0px 6px 12px 2px rgba(0, 0, 0, 0.15); }

.featured.work {
  grid-template-columns: 1fr;
  margin-bottom: 1rem; }

.logos.work ul.tags {
  margin-top: .5rem; }

.video {
  background: #000;
  margin: 2rem 0;
  padding: 2rem 0; }
  .video .video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: .5rem; }
  .video .content {
    border-radius: .5rem;
    padding: 2rem;
    background: #222;
    margin-top: .5rem; }
    .video .content h5, .video .content p, .video .content ul.tags, .video .content .button {
      transform: translate(0, 0); }

/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
@media only screen and (min-width: 425px) {
  /******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: 481px and Up Stylesheet

This stylesheet is loaded for larger devices. It's set to
481px because at 480px it would load on a landscaped iPhone.
This isn't ideal because then you would be loading all those
extra styles on that same mobile connection.

A word of warning. This size COULD be a larger mobile device,
so you still want to keep it pretty light and simply expand
upon your base.scss styles.

******************************************************************/
  /*
IMPORTANT NOTE ABOUT SASS 3.3 & UP 
You can't use @extend within media queries
anymore, so just be aware that if you drop
them in here, they won't work.
*/
  .logos.work {
    grid-template-columns: 1fr; }
  .site-header .profile {
    display: flex;
    align-items: center; }
    .site-header .profile .photo {
      margin-right: .75rem; }
    .site-header .profile .title {
      transform: translateY(-4px); }
      .site-header .profile .title h5 {
        display: block;
        font-size: 1.25rem;
        margin: 0; }
      .site-header .profile .title span {
        display: none; } }

/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {
  /******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Tablet & Small Desktop Stylesheet

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/
  .work {
    grid-template-columns: 1fr 1fr; }
  .site-header {
    padding: 1rem 0;
    margin-bottom: 2.5rem; }
    .site-header .profile .photo {
      margin-right: .75rem;
      width: 60px;
      height: 64px;
      border-radius: 30px; }
    .site-header .profile .title {
      transform: translateY(2px); }
      .site-header .profile .title h5 {
        font-size: 1.25rem; }
      .site-header .profile .title span {
        display: block;
        font-size: 1rem; }
    .site-header .links {
      height: 60px; }
      .site-header .links a {
        width: 40px;
        height: 40px; }
  .filters {
    margin-bottom: 2.5rem; }
    .filters label {
      font-size: 1rem;
      color: #888;
      border: 1px solid #fafafa;
      background: #fafafa; }
    .filters label:hover {
      color: #222; } }

/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1024px) {
  /******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Tablet & Small Desktop Stylesheet

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/
  /*
IMPORTANT NOTE ABOUT SASS 3.3 & UP 
You can't use @extend within media queries
anymore, so just be aware that if you drop
them in here, they won't work.
*/
  .work {
    gap: 1.5rem; }
  .break .behance.button {
    margin: 3rem auto; } }

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1280px) {
  /******************************************************************
Site Name: 
Author: Irvine Acosta

Stylesheet: Super Large Monitor Stylesheet

You can add some advanced styles here if you like. This kicks in
on larger screens.

******************************************************************/
  .wrap {
    max-width: 1680px;
    padding-left: 3rem;
    padding-right: 3rem; }
  .work {
    grid-template-columns: 1fr 1fr 1fr; }
  .featured .work {
    grid-template-columns: 1fr 1fr; }
  .video {
    background: #000; }
    .video .wrap {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 1.5rem; }
      .video .wrap .content {
        grid-row: 1 / 2;
        background: none;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center; }
  /*

.site-header {
	background:none;
	border: 0;
	margin-top:2rem;
	padding-bottom:0;
	
	.links {
		transform: translateY(84px);
	}
}
*/ }

/*********************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*********************/