.js-loading,
.js-loading:before,
.js-loading:after {
  animation-play-state: paused !important;
}

html,
button,
select,
textarea {
    color: white;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: 1;
  }

input {
    color: red;
  }

.loading {
    background: linear-gradient(45deg, red, #FF6400);
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

main, body, html {
	height: 100%;
	min-height: 100%;
    background-color: linear-gradient(45deg, red, #FF6400);
    margin: 0;
}


header {
    z-index: 1;
    position: fixed;
    height: 36px;
    width: 100%;
} 

ul{
    margin: 7px;
    padding: 0 10px 0 0;
    float: right;
 }

 ul li {
     font-family: 'Dosis', sans-serif;
     font-size: 3vh;
     font-weight: 400;
     color: #ffffff;
     display: inline;
     margin: 10px;
     cursor: pointer;
 }

.home_nav_link,
.about_me_nav_link,
.education_nav_link,
.work_nav_link,
.personal_nav_link,
.contact_me_nav_link {
    opacity: .2;
    transition: opacity 200ms ease-in;
}
 a:hover {
     opacity: 1;
 }
 a:link,
 a:visited {
     color: #ffffff;
     text-decoration: none;
     opacity: .2;
 }



/* Hero CSS */

.hero {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background: linear-gradient(45deg, red, #FF6400);
	background-attachment: fixed;
	height: 100%;
	width: 100%;
}
h1{
    color: white;
    font-size: 15vh;
    font-family: 'Oswald', sans-serif;
    user-select: none;
}
h1:hover{
    cursor: default;
}
.fn{
    grid-column: 7;
    grid-row: 2;
    text-align: right;
}
.fn h1{
    margin: 0 1.38em 0 0;
}
.ln{
    grid-column: 7;
    grid-row: 3;
    text-align: right;
}
.ln h1{
    margin: -8vh 3.3em 0 0;
    font-size: 6.1vh;
}
.preffix {
    grid-column: 7;
    grid-row: 3;
    text-align: right;
}
.preffix h1{
    margin: 1vh 11.75em 0 0;
    font-size: 5vh;
    font-weight: 100;
    font-family: 'Dosis', sans-serif;
    animation: preffix_animation 16s infinite;
}
.im_a_adjective{
    grid-column: 7;
    grid-row: 3;
    text-align: right;
}
.im_a_adjective h1{
    margin: 1vh 4.5em 0 0;
    font-size: 5vh;
    font-weight: 100;
    font-family: 'Dosis', sans-serif;
}

.pm {
    opacity: 100;
    animation: pm 16s infinite;
}
.traveller {
    opacity: 0;
    animation: traveller 16s infinite;
}
.polyglot {
    opacity: 0;
    animation: polyglot 16s infinite;
}
.MBA {
    opacity: 0;
    animation: MBA 16s infinite;
}
.team_member {
    opacity: 0;
    animation: team_member 16s infinite;
}
.movie_fanatic {
    opacity: 0;
    animation: movie_fanatic 16s infinite;
}
.ux_thinker {
    opacity: 0;
    animation: ux_thinker 16s infinite;
}
.hockey_amateur {
    opacity: 0;
    animation: hockey_amateur 16s infinite;
}
.suffix {
    grid-column: 7;
    grid-row: 3;
    text-align: right;
}
.suffix h1{
    margin: 1vh 4em 0 0;
    font-size: 5vh;
    font-weight: 100;
    font-family: 'Dosis', sans-serif;
}


/* Animations for "I'm a animation */

@keyframes preffix_animation {
    0% {margin: 1vh 11.75em 0 0;} /* 11.6 difference from previous em values */
    12.5% {margin: 1vh 8.5em 0 0;}
    25% {margin: 1vh 8.2em 0 0;}
    37.5% {margin: 1vh 7em 0 0;}
    50% {margin: 1vh 10.8em 0 0;}
    62.5% {margin: 1vh 10.3em 0 0;}
    75% {margin: 1vh 9.2em 0 0;}
    87.5% {margin: 1vh 11.4em 0 0;}
    100% {margin: 1vh 11.75em 0 0;}
}
@keyframes pm {
    0% {opacity: 100;}
    12.5% {opacity: 0;}
    87.5% {opacity: 0;}
}
@keyframes traveller {
    0% {opacity: 0;}
    12.5% {opacity: 100;}
    25% {opacity: 0;}
}
@keyframes polyglot {
    12.5% {opacity: 0}
    25% {opacity: 100;}
    37.5% {opacity: 0;}
}
@keyframes MBA {
    25% {opacity: 0}
    37.5% {opacity: 100;}
    50% {opacity: 0;}
}
@keyframes team_member {
    37.5% {opacity: 0}
    50% {opacity: 100;}
    62.5% {opacity: 0;}
}
@keyframes movie_fanatic {
    50% {opacity: 0}
    62.5% {opacity: 100;}
    75% {opacity: 0;}
}
@keyframes ux_thinker {
    62.5% {opacity: 0}
    75% {opacity: 100;}
    87.5% {opacity: 0;}
}
@keyframes hockey_amateur {
    75% {opacity: 0}
    87.5% {opacity: 100;}
    100% {opacity: 0;}
}

.bot_image {
    font-size: 2.5vh;
    background-image:url("https://jcalvomendoza.github.io/img/botchat_with_dialog_box.png");
    width:100%;
  height:100px;
  background-size: 485px;
  background-repeat: no-repeat;
  top: 91.5vh;
  bottom: -100vh;
  margin-left: 0.3em;
  position: absolute;
}

.learn_more {
    grid-column: 1/8;
    position: relative;
    top: 77vh;
    margin-left: auto;
    margin-right: auto;
    opacity: .3;
    animation: learn_more 2s infinite;
}
.learn_more h1 {
    margin: 15vh 0 0 0;
    font-size: 3vh;
    font-weight: 100;
    font-family: 'Dosis', sans-serif;
    transition: opacity 500ms ease-in-out;
    cursor: pointer;
}

@keyframes learn_more {
    50% {top: 79vh; opacity: .7;}
    100% {top: 77vh; opacity: .3;}
}


/* about me section */

.about_me {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-image:url("https://jcalvomendoza.github.io/img/javier_skyline.png"), linear-gradient(45deg, red, #FF6400);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
    width: 100%;
    overflow: hidden;
}
.about_me_blurb {
    grid-column: 4/7;
    text-align: right;
    opacity: 0;
    transition-duration: .2s
}
.about_me_blurb h1{
    margin: 15vh 4em 0 0;
    font-size: 5vmin;
    font-weight: 100;
    font-family: 'Dosis', sans-serif;
}

h2{
    font-size: 4vmin;
    color: white;
    user-select: none;
    font-family: 'Dosis', sans-serif;
}

.education {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-image: linear-gradient(45deg, red, #FF6400);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
}
.chicago_booth {
    grid-column: 1/5;
}
.chicago_booth h1 {
    font-size: 10vmin;
    margin: 15vh 0 0 2em;
}

.chicago_booth h2{
    margin: 1vh 0 0 5.1em;
}
.colgate {
    grid-column: 1/5;
}
.colgate h1 {
    font-size: 10vmin;
    margin: 20vh 0 0 2em;
}
.colgate h2{
    margin: 1vh 0 0 5.1em;
}

/*.graduation_pic {
    grid-column: 5/7;
    grid-row: 1/5;
    overflow: hidden;
    background: url("https://jcalvomendoza.github.io/img/colgate_graduation_2.png"), linear-gradient(45deg, red, #FF6300);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .2;
}*/

.work {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-image:url("https://jcalvomendoza.github.io/img/Chicago.jpg"), linear-gradient(45deg, red, #FF6400);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 80%;
    width: 100%;
    overflow: hidden;
}
.work_blurb {
    grid-column: 2/6;
    grid-row: 2;
    text-align: center;
    opacity: 1;
    transition-duration: .2s
}
.work_blurb h1{
    margin: 15vh 4em 0 0;
    text-align: center;
    font-size: 5vmin;
    font-weight: 100;
    font-family: 'Dosis', sans-serif;
}

.skills {
    background-image:url("https://jcalvomendoza.github.io/img/Chicago.jpg"), linear-gradient(45deg, red, #FF6400);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 20%;
    width: 100%;
    overflow: hidden;
}

.marquee {
  position:relative;
  height:10%;
  width:5000px;
  animation: horizontal_skill_scroll 18s linear infinite;
  }

.marquee:hover {
    animation-play-state: paused
}

.neo4j_logo {
    width:150px;
  height:150px;
  background-image:url("https://jcalvomendoza.github.io/img/Neo4j.png");
  background-size: 10vh;
  background-repeat: no-repeat;
  margin-top:5vh;
  margin-bottom: 2vh;
  float:left;
}

.rstudio_logo {
    width:150px;
  height:150px;
  background-image:url("https://jcalvomendoza.github.io/img/r_studio.png");
  background-size: 10vh;
  background-repeat: no-repeat;
  margin-top:5vh;
  margin-bottom: 2vh;
  float:left;
}

.sketch_logo {
    width:150px;
  height:150px;
  background-image:url("https://jcalvomendoza.github.io/img/sketch.png");
  background-size: 10vh;
  background-repeat: no-repeat;
  margin-top:6vh;
  margin-bottom: 2vh;
  float:left;
}

.framer_logo {
    width:150px;
  height:150px;
  background-image:url("https://jcalvomendoza.github.io/img/framer.png");
  background-size: 7vh;
  background-repeat: no-repeat;
  margin-top:6vh;
  margin-bottom: 2vh;
  float:left;
}

.cc_logo {
    width:150px;
  height:150px;
  background-image:url("https://jcalvomendoza.github.io/img/cc.png");
  background-size: 10vh;
  background-repeat: no-repeat;
  margin-top:6vh;
  margin-bottom: 2vh;
  float:left;
}

.microsoft_office_logo {
    width:250px;
  height:150px;
  background-image:url("https://jcalvomendoza.github.io/img/microsoft_office.png");
  background-size: 25vh;
  background-repeat: no-repeat;
  margin-top:6vh;
  margin-bottom: 2vh;
  float:left;
}

.skill_space {
    width:150px;
  height:15vh;
  margin:3px;
  float:left;
}

@keyframes horizontal_skill_scroll{
0% {left:-0px;}
100% {left:-1935px;}
}

.hockey {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-image:url("https://jcalvomendoza.github.io/img/Patriots_hockey_closeup.png"), linear-gradient(45deg, red, #FF6400);
    background-blend-mode: soft-light;
    background-attachment: fixed;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
    width: 100%;
    overflow: hidden;
}
.hockey_blurb {
    grid-column: 4/7;
    text-align: right;
    opacity: 0;
    transition-duration: .2s
}
.hockey_blurb h1{
    margin: 15vh 4em 0 0;
    font-size: 5vmin;
    font-weight: 100;
    font-family: 'Dosis', sans-serif;
}

.contact_me {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background-image: linear-gradient(45deg, red, #FF6400);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 10%;
    width: 100%;
    overflow: hidden;
}
.contact_links {
    grid-column: 1/8;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    top: 25%;
}
.contact_me h2 {
    margin: 0 auto 0 auto;
}

.scalable-image {
    height: 5vh;
}