@charset "UTF-8";

/************************
*		STRUCTURE		*
************************/


/************************
*		TYPOGRAPHY		*
************************/

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }

body {
     font-family: 'Lato', Tahoma, sans-serif;
	color: #F0F7F5;
	font-weight: 100;
	text-rendering: optimizeLegibility;
     height: 100%;
	background-color: #1d1f29;
	line-height: 1.5em;
}

a {
	color: #00AFFF;
	text-decoration: none;
	border: none;
	border: none;
	transition: all 0.2s;
}

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

h1 {
     font-size: 0px;
}



/************************
*		CONTENTS		*
************************/


.bg_container {
     width: 100%;
     height: 100vh;
     max-height: 1000px;
     min-height: 400px;
     position: relative;
     overflow: hidden;
     -webkit-box-shadow: 0px 11px 70px -1px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 11px 70px -1px rgba(0,0,0,0.4);
     box-shadow: 0px 11px 70px -1px rgba(0,0,0,0.4);
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.bg_container_project {
     width: 100%;
     position: relative;
     overflow: hidden;
     /*background: rgb(148,162,173);
     background: -moz-linear-gradient(top,  rgba(148,162,173,1) 0%, rgba(229,219,220,1) 100%);
     background: -webkit-linear-gradient(top,  rgba(148,162,173,1) 0%,rgba(229,219,220,1) 100%);
     background: linear-gradient(to bottom,  rgba(148,162,173,1) 0%,rgba(229,219,220,1) 100%);*/
     background-color: #21232f;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;

}

.bg2 {
     max-width:100%;
	min-width: 1440px;
	height:auto;
	min-height: 800px;
}

.content {
     width: 100%;
     height: 1340px;
     background-color: #1D1F29;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.start_title {
     margin-top: 30vh;
     font-weight: bold;
     font-size: 5.9vw;
     color: #F0F7F5;
     text-align: center;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.start_subtitle {
     height: 60px;
     margin-left: auto;
     margin-right: auto;
     max-width: 704px;
     text-align: center;
     font-weight: 100;
     font-size: 2vw;
     line-height: 2.5vw;
     color: #F0F7F5;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.start_git_button {
     margin-top: 15vh;
     margin-left: auto;
     margin-right: auto;
     width: 160px;
     height: 50px;
     border: 1px solid #00AFFF;
     border-radius: 25px;
     color: #00AFFF;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     display: block;
     
}

.git_text {
     margin-top: 10px;
     width:160px;
     text-align: center;
     font-weight: 100;
     font-size: 20px;
     position: absolute;
}

.start_git_button:hover {
     background-color: #00AFFF;
     color: #1D1F29;
     -ms-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1); 
    transform: scale(1.1,1.1);
}

.bg_animation {
     width: 100%;
     height: 100vh;
     background-color: #1D1F29;
     position: absolute;
     max-height: 1000px;
}

.lines_animation {
     margin-top: -2vh;
}

.blue {
     width: 10vw;
     height: 1px;
     background-color: #00AFFF;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation: mymove 4.1s infinite;
     animation: mymove 4.1s infinite;
     position: relative;
}

.mint {
     width: 10vw;
     height: 1px;
     background-color: #00cea5;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation: mymove 1.8s infinite;
     animation: mymove 1.8s infinite;
     position: relative;
}

.pink {
     width: 10vw;
     height: 1px;
     background-color: #E9484D;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation: mymove 3.7s infinite;
     animation: mymove 3.7s infinite;
     position: relative;
}


.orange {
     width: 10vw;
     height: 1px;
     background-color: #FFAC48;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation: mymove 3.2s infinite;
     animation: mymove 3.2s infinite;
     position: relative;
}

@-webkit-keyframes mymove {
    0% {left: 0%;}
    50% {left: calc( 100% - 10vw);}
    100% {left: 0%;}
}

@keyframes mymove {
    0% {left: 0%;}
    50% {left: calc( 100% - 10vw);}
    100% {left: 0%;}
}

.grid {
	position: relative;
	margin: 0 auto;
	padding: 100px 0px 100px 0px;
	max-width: 1000px;
	list-style: none;
	text-align: center;
	-webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #1D1F29;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	
	min-height: 100%;
	max-width: 480px;
	opacity: 1;
	margin-left: calc(-1 * (480px - 100%) / 2);
}

.grid figure figcaption {
	padding: 2em;
	color: #F0F7F5;
	font-size: 17.6px;
	text-shadow: 0px 0px 4px #1D1F29;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	font-weight: 100;
	font-size: 30px;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

figure.effect-sadie {
     -webkit-box-shadow: inset 0px -300px 70px -90px rgba(33,35,46,0);
     -moz-box-shadow: inset 0px -300px 70px -90px rgba(33,35,46,0);
     box-shadow: inset 0px -300px 70px -90px rgba(33,35,46,0);
}

figure.effect-sadie figcaption::before {
     -webkit-box-shadow: inset 0px -300px 70px -90px rgba(33,35,46,0.7);
     -moz-box-shadow: inset 0px -300px 70px -90px rgba(33,35,46,0.7);
     box-shadow: inset 0px -300px 70px -90px rgba(33,35,46,0.7);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(245,20,57,0);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(29,31,41,0) 75%);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
	border-top: 1px solid #00AFFF;
}

figure.effect-sadie h2 {
	position: absolute;
	top: 90%;
	left: 0;
	width: 100%;
	color: #F0F7F5;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.5s;
	transition: opacity 0.35s, transform 0.5s;
}

figure.effect-sadie p {
     margin-top: -20px;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	-webkit-transform: translate3d(0,100px,0);
	transform: translate3d(0,100px,0);
}

figure.effect-sadie:hover h2 {
	color: #F0F7F5;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	
}

.about {
     position: absolute;
     width: 100%;
     -webkit-box-shadow: 0px -11px 70px -1px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px -11px 70px -1px rgba(0,0,0,0.4);
     box-shadow: 0px -11px 70px -1px rgba(0,0,0,0.4);
     background-color: #1D1F29;
}

.about_button_grid {
     margin-left: calc(50vw - 120px);
     height: 110px;
}

.about_button_frame {
     width: 60px;
     height: 60px;
     float: left;
     margin: 50px 10px;
}

.about_button_ring {
     margin: 5px;
     position: absolute;
     width: 50px;
     height: 50px;
     border: 1px solid aqua;
     border-radius: 50%;
     -webkit-transition: all 0.6s cubic-bezier(.4,0,0,1);
     transition: all 0.6s cubic-bezier(.4,0,0,1);
}

.about_button {
     margin: 5px;
     position: absolute;
     width: 50px;
     height: 50px;
     background-color: aqua;
     border-radius: 50%;
     -webkit-transition: all 0.6s cubic-bezier(.4,0,0,1);
     transition: all 0.6s cubic-bezier(.4,0,0,1);
     cursor: pointer;
}

.hover_button {
     -ms-transform: scale(1.3,1.3);
    -webkit-transform: scale(1.3,1.3); 
    transform: scale(1.3,1.3);
}

.click_button {
     -ms-transform: scale(0.8,0.8);
    -webkit-transform: scale(0.8,0.8); 
    transform: scale(0.8,0.8);
}

.click_button_ring {
     -ms-transform: scale(1.4,1.4);
    -webkit-transform: scale(1.4,1.4); 
    transform: scale(1.4,1.4);
}

.skills_button {
     background-color: #00AFFF;
}

.hi_button {
     background-color: #00AFFF;
}

.timeline_button {
     background-color: #00AFFF;
}

.skills_button_ring {
     border-color: #00AFFF;
}

.hi_button_ring {
     border-color: #00AFFF;
}

.timeline_button_ring {
     border-color: #00AFFF;
}



.about_grid {
     position: relative;
	margin: 0;
	max-width: 100%;
	list-style: none;
	text-align: center;
	-webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.info_box {
     width: 100%;
     float: left;
     overflow: hidden;
}

.about_card_container {
     width: 300vw;
     height: 100%;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.about_card {
     float: left;
     width: 100vw;
     height: 100%;
}

.skills {
     height: 480px;
}

.skills_active {
     margin-left: 0px;
}

.hi {

}

.hi_active {
     margin-left: -100vw;
}

.timeline {
     height: 480px;
}

.timeline_active {
     margin-left: -200vw;
}

.me_img {
     width: 480px;
     height: 480px;
     opacity: 0.8;
     float: left;
     margin-left: calc(50% - 240px);
}

.about img {
     max-width: 480px;
     max-height: 480px;
}

.hi_text_container {
     max-width: 704px;
     margin-left: calc(50% - 352px);
}

.hi_text {
     color: #F0F7F5;
     font-size: 17.6px;
     line-height: 24px;
     
}

table {
     text-align: left;
     font-size: 17.6px;
     margin-left:auto; 
    margin-right:auto;
}

td:first-child {
     text-align: right;
     font-weight: 100;
}

td {
     padding: 10px;
}

.skills_table {
     padding: 3px 10px;
}

.tool {
     padding: 10px 10px 3px 10px;
}

.tool1 {
     padding: 10px 10px 3px 10px;
}

.tool2 {
     padding: 20px 10px 3px 10px;
}

.svg {
     -ms-transform: scale(0.8,0.8);
    -webkit-transform: scale(0.8,0.8); 
    transform: scale(0.8,0.8);
}

.headline {
    text-align: center;
}




.bg_container_project p{
	line-height: 22px;
	font-size: 17.6px;
	padding: 20px 15px;
	
	max-width: 700px;
	margin: auto;
	text-align: left;
}

.video {
     max-width: 1000px;
     max-height: 562px;
     width: 100vw;
     height: 56.2vw;
     margin: 0px 0px;
}

figure {
     height: 100%;
}

header {
     height: calc(100vh - 100px);
     padding-top: 50px;
     background: #f07057;
     text-align: center;
}

nav {
     height: 100px;
     position: relative;
     background: #F0F7F5;
     z-index: 150;
     margin-bottom: -80px;
     box-shadow: 0 2px 3px rgba(0,0,0,.4);
}

main {
     position: relative;
     padding-top: 110px;
}

.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}

.body_pj {
  margin: 0;
  padding-top: 100vw;
}



@media only screen and (max-width: 710px)
{
     .hi_text_container {
          max-width: 96vw;
          margin-left: 2vw
       }
}

@media only screen and (max-width: 1024px) and (min-device-width : 768px) and (orientation : landscape)
{
       .start_title {
           font-size: 9vw;
           margin-top: 25vh; 
       }
       .start_subtitle {
           font-size: 3.5vw;
           line-height: 3.75vw;
           width: 100vw;
           max-width: 804px;
       }
       
       .info_box {
            margin: 0;
       }
}

@media only screen and (max-width: 1024px) and (min-device-width : 768px) and (orientation : portrait) 
{
       .start_title {
           font-size: 9vw; 
       }
       .start_subtitle {
           font-size: 4vw;
           line-height: 5vw;
           width: 100vw;
       }
       .grid figure {
          margin: 10px 0;
          min-height: 360px;
          min-width: 480px;
       }
       .grid {
            padding: 100px 0px 0px 0px;
            margin-left: calc(50% - 240px);
       }
       .content {
            height: 2480px;
       }
       
       .info_box {
            margin: 0;
       }
}

@media only screen and (max-width: 767px) and (min-device-width : 480px)
{
       .start_title {
           font-size: 11vw; 
       }
       .start_subtitle {
           font-size: 20px;
           line-height: 25px;
           width: 100vw;
           
       }
       .grid figure {
          margin: 10px 0;
          min-height: 360px;
          min-width: 480px;
       }
       .grid {
            padding: 100px 0px 0px 0px;
            margin-left: calc(50% - 240px);
       }
       .content {
            height: 2480px;
       }
       .info_box {
            margin: 0;
       }
       .me_img {
          margin: 0;
       }      
          
}

@media only screen and (max-width: 479px)
{
       .start_title {
           font-size: 11vw; 
       }
       .start_subtitle {
           font-size: 20px;
           line-height: 25px;
           width: 100vw;
           
       }
       .grid figure {
          margin: 10px 0;
          height: 75vw;
          width: 100%;
          min-height: 0;
          min-width: 0;
       }
       .grid figure img {
          height: 75vw;
          max-height: 75vw;
          max-width: 100vw;
          margin: 0;
       }
       .grid {
            max-width: 100%;
            width: 100vw;
            margin: 0;
       }
       .content {
            height: calc(2480px - (2160px - 450vw));
       }
       .about_grid {
            margin-left: 0;
       }
       
       .info_box {
            margin: 0;
            width: 100%;
       }
       
       .me_img {
          margin: 0;
          width: 100vw;
          height: 100vw;
       }
       .about img {
            max-width: 100vw;
            max-height: 100vw;
     } 
     .about_card {
          width: 100vw;
     }
     .skills_active {
          margin-left: 0px;
     }
     .hi_active {
          margin-left: -100vw;
     }
     .timeline_active {
          margin-left: -200vw;
     }
     
}


@media only screen and (min-width: 1740px)
{
       .start_title {
           font-size: 103px; 
       }
       .start_subtitle {
           font-size: 35px;
           line-height: 41px;
           width: 100vw;
       }
}

@media only screen and (min-height: 1000px)
{
       .start_title {
           margin-top: 300px;
       }
       .start_git_button {
           margin-top: 150px;
       }
       
}













   
/************************
*		RESPONSIVE		*
************************/
@media all and (max-width: 480px) {

}

/************************
*		CLEARFIX		*
************************/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}