@font-face {
    font-family: "krasomila";
    /*src: url("https://huwsamuel.uk/media/krasomila/CustomFont.eot");*/
    /*src: url("https://huwsamuel.uk/media/krasomila/CustomFont.woff") format("woff"),*/
    src: url("https://huwsamuel.uk/media/krasomila/Krasomila-021.otf") format("opentype");
    /*url("https://huwsamuel.uk/media/krasomila/CustomFont.svg#filename") format("svg");*/
}

body {
    /*background-color: #ffc808;*/
    background-color: #fff;
    color: #000;

    margin: 0;

    opacity: 0;
    transition: opacity 1s;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

h2 {
    padding: 0px 16px;
    font-family: krasomila;
    line-height: 1.2em;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    font-size: 2.2rem;
    color: #000;
}

h3 {
    color: #000;
    margin: 2rem 0;
}

p {
    padding: 0px 16px;
    font-family: Helvetica;
    /*font-weight: 100;*/
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0em;
    text-transform: none;
    font-size: 1.4rem;
    color: #000;
}

img {
    border: 0;
}

.content-wrapper {
    justify-content: center;
    max-width: 1280px;
    display: flex;

    width: 100%;
    box-sizing: content-box;
    position: relative;

    margin: 0 auto;
    /*box-sizing: border-box;*/
}

.grid-wrapper {
    padding-bottom: 8vw;
    min-height: 100vh;
    width: 100%;
    /*padding-left: 4vw;
    padding-right: 4vw;*/
    margin: 0 auto;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 8px;
    grid-auto-rows: min-content;
}

.grid-wrapper .grid-item .grid-image {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    line-height: 0;
}

.grid-wrapper .grid-item {
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.grid-wrapper .grid-image {
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.grid-wrapper .grid-item .portfolio-text {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    padding: 7%;
    text-align: center;
    z-index: 5;
    /*transition: opacity ease 200ms;*/
}
.hometime:hover .portfolio-text {
    opacity: 1;
    background: url("media/gifs/hometime_invert.png") no-repeat;
    background-size: cover;
}
.hero:hover .portfolio-text {
    opacity: 1;
    background: url("media/gifs/spur_invert.png") no-repeat;
    background-size: cover;
}

.greenman:hover .portfolio-text {
    opacity: 1;
    background: url("media/images/the-green-man_invert.png") no-repeat;
    background-size: cover;
}

.beach:hover .portfolio-text {
    opacity: 1;
    background: url("media/gifs/lifes_a_beach_invert.png") no-repeat;
    background-size: cover;
}
.tantamount:hover .portfolio-text {
    opacity: 1;
    background: url("media/gifs/tantamount_invert.png") no-repeat;
    background-size: cover;
}
.skullchaser:hover .portfolio-text {
    opacity: 1;
    background: url("media/gifs/skullchaser_invert.png") no-repeat;
    background-size: cover;
}
.showreel:hover .portfolio-text {
    opacity: 1;
    background: url("media/images/showreel_invert.png") no-repeat;
    background-size: cover;
}

.grid-wrapper .grid-item .portfolio-text .portfolio-title {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
}

.selftalk:hover .portfolio-text {
    opacity: 1;
    background: url("media/images/self-talk-invert.png") no-repeat;
    background-size: cover;
}

.grid-wrapper .portfolio-title {
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    font-family: krasomila;
    /*font-weight: 100;*/
    line-height: 1.2em;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    font-size: 2rem;
    /*color: #ecbd1a;*/
    color: #d0ee94;
}

.grid-wrapper .grid-item .grid-image .grid-image-inner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.profile {
    width:88%;
    height:100%;
}



.image-hover {
    opacity: 0;
    transition: opacity 0.3s;
}
.image-hover:hover {
    opacity: 1;
}

/* Add a black background color to the top navigation */
.topnav {
    padding-top: 2vw;
    padding-bottom: 2vw;
    overflow: hidden;

    justify-content: center;
    max-width: 1280px;

    width: 100%;
    box-sizing: content-box;
    position: relative;

    /*margin: 0 auto;*/

    /*justify-content: center;
    max-width: 1280px;
    display: flex;
    width: 100%;
    box-sizing: content-box;
    position: relative;
    margin: 0 auto;*/
    left: 0;
    right: 0;
    margin: auto;
}

.topnav-container {
    width: 100%;
    /*padding-left: 4vw;
    padding-right: 4vw;*/
    margin: 0 auto;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: 44px 16px;
    text-decoration: none;

    font-family: Helvetica;
    /*font-weight: 100;*/
    /*line-height: 1.2em;*/
    /*line-height: 60px;*/
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    font-size: 1.5rem;
    color: #000;
    opacity: 0.2;
    transition: 0.3s;
}
.topnav a:hover {
    opacity: 1;
}
/*.topnav a.active {
    opacity: 1;
}*/

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}





.parallax-showreel {
    height: 100%;
    /*position: relative;*/
    overflow: hidden;
}
.parallax-showreel video {
    width: 100%;
    /*position: fixed;
    top:0;
    z-index: -999;*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.parallax-more {
    width: 50px;
    height: 20px;
    background-size: 100%;
    /*background-position: 50%;*/
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM1IiBoZWlnaHQ9IjEwNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTUuMjYxIDIuMjA2QzEwLjQwNC0uNDI0IDQuMzM2IDEuMzgyIDEuNzA2IDYuMjQtLjkyNCAxMS4wOTYuODgyIDE3LjE2NCA1Ljc0IDE5Ljc5NGw5LjUyMi0xNy41ODh6bTMxNCAxNy41ODhjNC44NTctMi42MyA2LjY2Mi04LjY5OCA0LjAzMy0xMy41NTUtMi42My00Ljg1Ny04LjY5OC02LjY2Mi0xMy41NTUtNC4wMzNsOS41MjIgMTcuNTg4ek0xNjcuNSA5NmwtNC43NjEgOC43OTRhMTAgMTAgMCAwMDkuNTIyIDBMMTY3LjUgOTZ6TTUuNzM5IDE5Ljc5NGwxNTcgODUgOS41MjItMTcuNTg4LTE1Ny04NS05LjUyMiAxNy41ODh6bTE2Ni41MjIgODVsMTU3LTg1LTkuNTIyLTE3LjU4OC0xNTcgODUgOS41MjIgMTcuNTg4eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
    position: absolute;
    bottom: 20px;
    /*z-index: 999;*/
    position: absolute;
    left: 50%;
    margin-left: -25px
}

.parallax-beach {
    background-image: url("media/gifs/lifes_a_beach.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    /*background-size: cover;*/
}

.parallax-hometime {
    background-image: url("media/gifs/hometime.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-showreel-2 {
    background-image: url("media/gifs/showreel.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-greenman {
    background-image: url("media/gifs/the-green-man.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-skullchaser {
    background-image: url("media/gifs/skullchaser.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-spur {
    background-image: url("media/gifs/spur.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-tantamount {
    background-image: url("media/gifs/tantamount.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.parallax-selftalk {
    background-image: url("media/gifs/self-talk.gif");

    height: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.column-wrapper {
    padding-bottom: 10vw;
    min-height: 100vh;
    width: 100%;
    /*padding-left: 4vw;
    padding-right: 4vw;*/
    margin: 0 auto;

    box-sizing: border-box;

    display: grid;
    grid-template-columns: repeat(1,minmax(0,1fr));
    /*grid-column-gap: 10px;
    grid-row-gap: 8px;*/
    grid-auto-rows: min-content;
}

.indiv-central {
    padding-top: 10vw;
    padding-bottom: 10vw;
    padding-left: 18vw;
    padding-right: 18vw;
    margin: 0 auto;
    /*width: 50%;*/
    text-align: center;
}

/*  */
@media only screen and (min-width: 1920px) {
    .indiv-central {
        padding-left: 10vw;
        padding-right: 10vw;
    }
}

/* CONTAIN SHOWREEL AT THE TOP OF PAGE */
@media only screen and (max-width: 1425px) {
    .parallax-showreel {
        height: fit-content;
    }
    .parallax-showreel video {
        top: 0;
        transform: none;
    }

    .parallax-more {
        display: none;
    }
}

@media only screen and (max-width: 1370px) {
    .grid-wrapper {
        padding-left: 4vw;
        padding-right: 4vw;
    }
    .column-wrapper {
        padding-left: 4vw;
        padding-right: 4vw;
    }
}


/* ACTIVATE HAMBURGER MENU */
@media only screen and (max-width: 980px) {
    .topnav {
        padding-top: 0;
        padding-bottom: 0;
    }
    .topnav.responsive {
        position: fixed !important;
    }
    .topnav-container {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .float-header a {
        display: none;
    }
    .topnav a.icon {
        display: block;
    }
    .topnav.responsive {
        position: relative;
        position: fixed;
        height: 100%;
        z-index: 100;
        background: #fff;
    }
    .topnav.responsive .icon {
        /*position: absolute;
        right: 0;
        top: 0;*/
        display: none;
    }
    .topnav.responsive .mob-hide {
        display: none;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    .topnav.responsive .topnav-container {
        width: 100%;
        margin: 0 auto;
        height: 100vw;
        display: table;
    }
    .float-header {
        float: none !important;

        vertical-align: middle;
        display: table-cell;
    }
    .float-header a {
        color: #000 !important;
    }
}

/* GRID FORMATATION GO TO SINGLE FORMATION */
@media only screen and (max-width: 767px) {
    body {
        background-color: #fff;
    }
    .grid-wrapper {
        grid-template-columns: repeat(1,minmax(0,1fr)) !important;
    }

    .profile {
        width:100%;
    }

    .indiv-central {
        padding-left: 0vw;
        padding-right: 0vw;
    }
}

@media screen and (max-width: 600px) {

    .topnav {
        position: relative !important;
    }
    .parallax-showreel {
        display: none;
    }

}

/* CHANGE SIZE OF NAV LOGO */
@media screen and (max-width: 420px) {

    .topnav-container a {
        font-size: 1.6rem !important;
    }
}

/*opacity: 0;
transition: opacity 1s;*/

.social-menu ul{
    position: relative;
    /*top: 50%;
    left: 50%;*/
    padding: 0;
    /*margin: 0 auto;*/
    /*transform: translate(-50%, -50%);*/
    display: flex;
    justify-content: center;
    padding-bottom: 2vw;
}

.social-menu ul li{
    list-style: none;
    margin: 0 15px;
}

.social-menu ul li .fab{
    font-size: 30px;
    line-height: 60px;
    transition: .3s;
    color: #000;
}

.social-menu ul li .fab:hover{
    opacity: 1;
}

.social-menu ul li a {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #000;
    text-align: center;
    opacity: 0.2;
    transition: 0.3s;
    /*box-shadow: 0 5px 4px rgba(0,0,0,.5);*/
}
.social-menu ul li a:hover {
    opacity: 1;
}

/*.social-menu ul li a:hover{
    transform: translate(0, -10%);
}*/

/*.social-menu ul li:nth-child(1) a:hover{
    background-color: #000;
}
.social-menu ul li:nth-child(2) a:hover{
    background-color: #000;
}
.social-menu ul li:nth-child(3) a:hover{
    background-color: #0077b5;
}
.social-menu ul li:nth-child(4) a:hover{
    background-color: #000;
}*/