/* Mani in NANO */

@font-face {
    font-family: 'Regular';
    src: url('../fonts/Graphik-Regular.eot');
    src: url('../fonts/Graphik-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Graphik-Regular.woff') format('woff'), url('../fonts/Graphik-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Semibold';
    src: url('../fonts/Graphik-Semibold.eot');
    src: url('../fonts/Graphik-Semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/Graphik-Semibold.woff') format('woff'), url('../fonts/Graphik-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Medium';
    src: url('../fonts/Graphik-Medium.eot');
    src: url('../fonts/Graphik-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Graphik-Medium.woff') format('woff'), url('../fonts/Graphik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px black; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: gray; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
  }

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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding: 0;
    margin: 0;
    font-size: calc(1em + 1vw);
}

/*	=====================================================================
									GENERAL							
	===================================================================== */

::selection {
    color: rgba(255, 255, 255, .99);
    background: rgba(0, 0, 0, .99);
}

::-moz-selection {
    color: rgba(255, 255, 255, .99);
    background: rgba(0, 0, 0, .99);
}

/* ------ Backgrounds ------ */

.website-background-black {
    background: #000000;
}

.website-background-white {
    background: #ffffff;
}

/* ------ Colors ------ */

.text-color-white {
    color: #d5a4f1;
    font-family: Medium;
}

.text-color-red {
    color: #9c75f2;
    font-family: Medium;
}

.text-color-black {
    color: #000000;
    font-family: Medium;
}

.text-color-gray {
    color: #888888;
    font-family: Medium;
}

/* ------ Text styles ------ */

.underline {
    text-decoration: underline;
}

.hide-text-block {
    position: relative;
    display: block;
    overflow: hidden;
}

h1 {
    font-family: 'Semibold';
    position: fixed;
    line-height: 110%;
    letter-spacing: -2px;
    font-size: 3.2em;
    /* general fallback */
    font-size: 18vm;
    /* IE9 fallback */
    /*     font-size: 19vmin; */
    font-size: 18vmin;
}

@media screen and (max-width: 767px) {
    h1 {
        line-height: 130%;
    }
}

h2 {
    font-family: 'Semibold';
    line-height: 140%;
    font-size: 100px;
    font-size: 2.222em;
}

h3 {
    font-family: 'Medium';
    line-height: 120%;
    font-size: 64px;
    /* font-size: 1.780em; */
}

h4 {
    font-family: 'Semibold';
    line-height: 140%;
    font-size: 48px;
    font-size: 40px;
    margin: 16vh 0 4vh 0;
    margin: 24vh 0 4vh 0;
}

@media screen and (max-width: 767px) {
    h4 {
        font-size: 30px;
    }
}

h5 {
    font-family: 'Semibold';
    line-height: 140%;
    font-size: 36px;
    font-size: 30px;
    margin: 12vh 0 5vh 0;
    margin: 12vh 0 3vh 0;
}

@media screen and (max-width: 767px) {
    h5 {
        font-size: 20px;
    }
}

h6 {
    font-family: "Semibold";
    line-height: 140%;
    font-size: 24px;
    margin: 8vh 0 2vh 0;
}

/* ------ paragraph styling ------ */

p {
    line-height: 170%;
    font-family: 'Regular';
    font-size: 18px;
    margin-bottom: 3vh;
}

p.size-small {
    font-family: "Medium";
    font-size: 16px;
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    p.size-small {
        font-size: 14px;
    }
}

.size-Medium {
    line-height: 180%;
    font-size: 20px;
}

.size-large {
    line-height: 160%;
    font-size: 24px;
    margin-bottom: 4vh;
}

b {
    font-family: "Medium";
}

i {
    font-style: italic;
}

/* ------ List ------ */

ul {
    line-height: 180%;
    font-family: 'Regular';
    font-size: 18px;
    margin-bottom: 5vh;
}

li {
    margin-left: 3vh;
}

blockquote {
    line-height: 170%;
    font-family: 'Regular';
    font-size: 18px;
    /* 	font-style:italic; */
    color: #666666;
    margin: 6vmin 0;
    padding: 10px 20px 10px 30px;
    border-left: 4px solid #dddddd;
}

/* ------ Links ------ */

a,
a:after,
a:visited {
    text-decoration: none;
    cursor: pointer;
    color: #000000;
}

a.text-color-white,
a.text-color-white:after,
a.text-color-white:visited {
    color: #ffffff;
}

a.text-color-red,
a.text-color-red:after,
a.text-color-red:visited {
    color: #ea0f1e;
}

/* ------ Hover states ------ */

.on-hover-40,
.on-hover--40 {
    transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.on-hover-40:hover {
    padding-left: 40px;
    transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.on-hover--40:hover {
    padding-left: -40px;
    transition: all .4s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media screen and (max-width: 767px) {
    .on-hover-40:hover {
        padding-left: 0px;
    }
    .on-hover--40:hover {
        padding-left: 0px;
    }
}

/* ------ Media ------ */

img {
    max-width: 100%;
    max-height: 100%;
    pointer-events: none !important;
}

video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ------ Hide .lazy elements if JavaScript is off ------ */

.no-js .lazy {
    display: none;
}

/* ------ Grid ------ */

.top-bottom-margin {
    margin: 40vh 0 20vh 0;
    margin: 35vh 0 20vh 0;
    margin: 35vh 0 30vh 0;
}

.max-width {
    max-width: 68%;
    max-width: 21.5em;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .max-width {
        max-width: 100%;
        max-width: 86%;
    }
}

/* ------ Logo ------ */

.logo {
    float: right;
}

.logo-inner {
    position: fixed;
    top: 10%;
    z-index: 999;
}

@media screen and (max-width: 767px) {
    .logo-inner {
        top: 5%;
        left: 75%;
    }
}

.label-logo:after {
    font-family: "Semibold";
    font-size: 20px;
    content: "jos.";
}

.label-logo:hover:after {
    content: "jos.gg";
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .label-logo:hover:after {
        content: "jos.";
    }
}

.label-logo {
    -webkit-animation: fadelogo .6s cubic-bezier(0.2, 0.6, 0.2, 1);
    -moz-animation: fadelogo .6s cubic-bezier(0.2, 0.6, 0.2, 1);
    animation: fadelogo .6s cubic-bezier(0.2, 0.6, 0.2, 1);
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

@-webkit-keyframes fadelogo {
    0% {
        -webkit-transform: translateY(10vh);
    }
    100% {
        -webkit-transform: translateY(0vh);
    }
}

@keyframes fadelogo {
    0% {
        opacity: 0;
        transform: translateY(10vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0vh);
    }
}

/* ------ Reading position ------ */

.rpi-progress-bar {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding-bottom: 20px;
    z-index: 1;
}

.rpi-progress-bar__position {
    box-sizing: inherit;
    height: 4px;
    /* control the height of the progress bar */
    width: 100%;
    background-color: #D1001D;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition: -webkit-transform 50ms;
    transition: -webkit-transform 50ms;
    transition: transform 50ms;
    transition: transform 50ms, -webkit-transform 50ms;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    will-change: transform;
    position: relative;
}

/*	=====================================================================
									HOMEPAGE							
	===================================================================== */

.vertical-center {
    position: absolute;
    height: 100%;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-align-items: center;
    /* Safari */
    align-items: center;
}

.label-hello:after {
    content: "Hello.";
    text-align: center;
}

.label-hello:hover:after {
    content: "About";
    text-align: center;
}

.label-iam:after {
    content: "I am";
    text-align: center;
}

.label-iam:hover:after {
    content: "Projects";
    text-align: center;
}

.label-dejan:after {
    content: "Jos";
    text-align: center;
}

.label-dejan:hover:after {
    content: "Contact";
    text-align: center;
}

.label-error:after {
    content: "Oops!";
    text-align: center;
}

.label-error:hover:after {
    content: "Home";
    text-align: center;
}

.animate {
    -webkit-animation: animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
    -moz-animation: animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
    animation: animate .6s cubic-bezier(0.2, 0.6, 0.2, 1);
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

@-webkit-keyframes animate {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: translateY(30vh);
    }
    /* WORK ON THISSS! */
    /* 	0% {transform: translateY(100%);} */
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

/* ------ Contact Page CSS ------ */

.lanyard-contact-info {
    user-select: none;
}

/* ------ Delays ------ */

.delay02 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.delay04 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.delay06 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.delay08 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

.delay10 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.delay12 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

/* ------ Background photo ------ */

.return-home-button {
    text-align: center;
    color: #d0c3ec;
    font-size: 15px;
}

.bg-photo {
    z-index: -9;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 56%;
    height: 100%;
    width: 50%;
    background-image: url(../img/HomeImg.webp);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-animation: bg-photo 1.2s cubic-bezier(.5, .6, .6, 1);
    -moz-animation: bg-photo 1.2s cubic-bezier(.5, .6, .6, 1);
    animation: bg-photo 1.2s cubic-bezier(.5, .6, .6, 1);
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

/* put the image ../img/HomeImg.png in the background with an animation if the user is on desktop */


@media screen and (max-width: 767px) {
    .bg-photo {
        -webkit-animation: bg-photo .6s cubic-bezier(.5, .6, .6, 1);
        -moz-animation: bg-photo .6s cubic-bezier(.5, .6, .6, 1);
        animation: bg-photo .6s cubic-bezier(.5, .6, .6, 1);
    }
}

@-webkit-keyframes bg-photo {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bg-photo {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media screen and (max-width:480px) {
    .bg-photo {
        left: -8%;
    }
}

/*	=====================================================================
							HOMEPAGE MOBILE							
	===================================================================== */

@media screen and (min-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .hide-web {
        display: none;
    }
    .toggle-mobile-second {
        display: none;
    }
    .mobile-tap-area {
        background: transparent;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .tap-indication {
        text-align: center;
        width: 100%;
        font-family: "Medium";
        color: #ffffff;
        position: fixed;
        bottom: 4%;
        font-size: 0.6em;
        /* general fallback */
        font-size: 3.6vm;
        /* IE9 fallback */
        font-size: 3.6vmin;
        animation: bounce 1s infinite alternate;
        -webkit-animation: bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
        -moz-animation: bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
        animation: bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
    }
    .hover-indication {
        text-align: center;
        width: 100%;
        font-family: "Medium";
        color: #ffffff;
        position: fixed;
        bottom: 4%;
        font-size: 0.6em;
        /* general fallback */
        font-size: 3.6vm;
        /* IE9 fallback */
        font-size: 3.6vmin;
        animation: bounce 1s infinite alternate;
        -webkit-animation: bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
        -moz-animation: bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
        animation: bounce .5s cubic-bezier(.5, .6, .6, 1) infinite alternate;
    }
    @keyframes bounce {
        from {
            transform: translateY(0px);
        }
        to {
            transform: translateY(-8px);
        }
    }
    @-webkit-keyframes bounce {
        from {
            transform: translateY(0px);
        }
        to {
            transform: translateY(-8px);
        }
    }
}

/*	=====================================================================
							ABOUT AND CONTACT					
	===================================================================== */

.max-width-left-70 {
    max-width: 70%;
}

@media screen and (max-width: 767px) {
    .max-width-left-70 {
        max-width: 100%;
    }
}

/* ------ Copy email to clipboard ------ */

.label-email {
    cursor: pointer;
}

.label-email:hover:after {
    content: "Copy to clipboard";
}

.label-email:hover:active:after {
    content: "Email copied";
}

@media screen and (max-width: 767px) {
    .label-email:hover:after {
        content: "Copied to clipboard";
    }
}

/*	=====================================================================
								WORK LIST							
	===================================================================== */

.work-block {
    margin: 12vh 0;
}

@media screen and (max-width: 767px) {
    .work-block {
        margin-top: 10vh 0;
    }
}

/*	=====================================================================
								PROJECT PAGE							
	===================================================================== */

.block-image-overflow {
    width: 100%;
    overflow: hidden;
}

.hero-image {
    width: 100vw;
    height: 90vh;
    overflow: hidden;
    margin: 30vh 0;
}

@media screen and (max-width: 767px) {
    .hero-image {
        margin: 20vh 0;
    }
}

.hero-image img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    .hero-image img {
        background-position: right bottom;
    }
}

.max-width-70 {
    max-width: 70%;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .max-width-70 {
        max-width: 100%;
        margin: auto;
    }
}

.links a {
    display: block;
    margin: 4vh 0;
    font-family: "Medium";
    font-size: 19px;
}

.images {
    margin: 8vh 0;
}

@media screen and (max-width: 767px) {
    .images {
        margin: 4vh 0;
    }
}

.images img {
    margin: 4vh 0;
}

@media screen and (max-width: 767px) {
    .images img {
        margin: 2vh 0;
    }
}

.video {
    margin: 8vh 0;
}

@media screen and (max-width: 767px) {
    .video {
        margin: 4vh 0;
    }
}

/* iPhone video container */

.iphone-video {
    width: 100%;
    height: 80vh;
    display: -webkit-flex;
    /* Safari */
    display: flex;
    -webkit-align-items: center;
    /* Safari */
    align-items: center;
    position: relative;
}

.iphone-notch {
    background-image: url(../img/devices-iphone-notch.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 20%;
    width: 100%;
    position: absolute;
    z-index: 1;
    margin-top: -17%;
}

.iphone-mask {
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    height: 70vh;
}

.iphone-video video {
    width: auto;
    height: 70vh;
}

.devices-iphone {
    background-image: url(../img/devices-iphone.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}

@media screen and (max-width: 767px) {
    .iphone-video {
        height: 60vh;
    }
    .iphone-mask {
        -moz-border-radius: 18px;
        -webkit-border-radius: 18px;
        border-radius: 18px;
        height: 52vh;
    }
    .iphone-video video {
        height: 52vh;
    }
}

.Iam {
  padding: 2em 5em;
  font: normal 40px/50px Montserrat, sans-serif;
  color: #999;
}
.Iam p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
}
.Iam b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 50px;
  top: 40px;
}
.Iam .innerIam {
  display: inline-block;
  color: #e74c3c;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;


/*animation*/
-webkit-animation:move 5s;
   -moz-animation:move 5s;
    -ms-animation:move 5s;
     -o-animation:move 5s;
        animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
@keyframes move{
0%  { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}

@-webkit-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-moz-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-o-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}