/* Fonts */

/*  600 - Bold
    500 - Demi
    400 - Medium
    300 - Regular
    200 - UltraLight
 */

:root {
    --Main-Background-Color: #141414;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Heavy.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-Heavy.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-Heavy.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-Heavy.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Bold.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-Bold.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-Bold.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Demi.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-Demi.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-Demi.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-Demi.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Medium.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-Medium.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-Medium.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Regular.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-Regular.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-Regular.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-UltLt.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-UltLt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-UltLt.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-UltLt.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-UltLt.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'AvenirNext LT Pro Cn';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-HeavyCn.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-HeavyCn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-HeavyCn.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-HeavyCn.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-HeavyCn.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'AvenirNext LT Pro Cn';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-BoldCn.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-BoldCn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-BoldCn.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-BoldCn.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-BoldCn.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'AvenirNext LT Pro Cn';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-DemiCn.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-DemiCn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-DemiCn.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-DemiCn.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-DemiCn.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'AvenirNext LT Pro Cn';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-MediumCn.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-MediumCn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-MediumCn.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-MediumCn.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-MediumCn.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'AvenirNext LT Pro Cn';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Cn.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-Cn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-Cn.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-Cn.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-Cn.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'AvenirNext LT Pro Cn';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-UltLtCn.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-UltLtCn.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-UltLtCn.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-UltLtCn.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-UltLtCn.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'AvenirNext LT Pro';
    src: url('../assets/fonts/avenir/AvenirNextLTPro-It.eot');
    /* IE9 Compat Modes */
    src: url('../assets/fonts/avenir/AvenirNextLTPro-It.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../assets/fonts/avenir/AvenirNextLTPro-It.woff') format('woff'), /* Modern Browsers */
    url('../assets/fonts/avenir/AvenirNextLTPro-It.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../assets/fonts/avenir/AvenirNextLTPro-It.svg#svg') format('svg');
    /* Legacy iOS */
    font-style: oblique;
    font-weight: 300;
}

body {
    margin: 0 0;
    padding: 0 0;
    background-color: #141414;
    overflow-x: hidden;
}

/*@-webkit-keyframes fadeinout {
    30% { opacity: 1; }
    70% { opacity: 1; }
  }
  
  @keyframes fadeinout {
    30% { opacity: 1; }
    70% { opacity: 1; }
  }*/

#Cover {
    transition: all 2s;
}

.hide {
    opacity: 0;
}

nav ul {
    padding-left: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}

nav li {
    color: #717171;
    width: 100vw;
    font-size: 20pt;
    text-decoration: none;
    list-style: none;
    font-family: 'AvenirNext LT Pro', sans-serif;
    font-weight: 200;
    padding: 5px;
    text-align: center;
    background-color: #3333336b;
    transition: 0.3s color ease;
}

nav li:hover {
    color: #ffffff
}

@media screen and (min-width:650px) {
    nav ul {
        display: flex;
        justify-content: flex-end;
    }
    nav {
        padding-top: 5px;
        border-bottom: solid 1px #717171;
        text-decoration: none;
    }
    nav li {
        width: auto !important;
        padding-left: 40px !important;
        background-color: transparent !important;
    }
    #container {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    #workHeader {
        font-size: 18pt;
    }
    #topPageContent {
        display: flex !important;
        justify-content: space-evenly;
    }
}

@media only screen and (max-width: 758px) {
    /* For mobile phones: */
    
    #SoundEngineerText{
        padding-top: 100px;
    }

    #portfolioTopText{
        width:60vw;
        margin-left:auto;
        margin-right:auto;
        display:block;
    }

    .contentHeader{
        font-size:40pt !important;
    }

    #CVText{
        display:block !important;
        margin-left:auto;
        margin-right:auto;
    }

    #CVTextblock{
        width:60vw;
    }
    
}

/*   ABOUT PAGE   */

#workspace {
    background-color: #141414;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    overflow-x: hidden;
}

#pageHeading {
    color: #ffffff;
    width: 70vw;
    font-size: 70pt;
    text-decoration: none;
    list-style: none;
    font-family: 'AvenirNext LT Pro', sans-serif;
    font-weight: 200;
    margin-top: 20px;
    margin-bottom: 20px;
}

#pageCentreContent {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #dfdfdf;
    font-size: 12pt;
    text-decoration: none;
    list-style: none;
    font-family: 'AvenirNext LT Pro', sans-serif;
    font-weight: 200;
    line-height: 1.5;
}

#topPageContent {
    width: 70vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #dfdfdf;
    font-size: 12pt;
    text-decoration: none;
    list-style: none;
    font-family: 'AvenirNext LT Pro', sans-serif;
    font-weight: 200;
    line-height: 1.5;
}

#leftContentText {
    width: 35vw;
}

#rightContentImage {
    margin-top: 200px;
    max-height: 500px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    mix-blend-mode: lighten;
}

#rightContentImageNoBlend {
    margin-top: 100px;
    max-height: 700px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    /*margin-left: 10vw; */
}

#skillsAndTools {
    padding-top: 100px;
    text-align: center;
}

.whiteButton {
    border: 1px solid #363636;
    font-weight: normal;
    padding: 10px;
    background-color: rgba(207, 207, 207, 1);
    color: #363636;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.whiteButton:hover {
    border: 1px solid var(--Main-Background-Color);
    color: #ffffff;
    background-color: #141414;
}

.blackButton {
    border: 1px solid rgba(207, 207, 207, 1);;
    font-weight: normal;
    padding: 10px;
    background-color: #141414;
    color: rgba(207, 207, 207, 1);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.blackButton:hover {
    border: 1px solid var(--Main-Background-Color);
    color: #363636;
    background-color: rgba(207, 207, 207, 1);
}

#DroneOpButton {
    border: 1px solid #363636;
    font-weight: normal;
    padding: 10px;
    background-color: rgba(207, 207, 207, 1);
    color: #363636;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

#DroneOpButton:hover {
    border: 1px solid var(--Main-Background-Color);
    color: #ffffff;
    background-color: rgba(15, 15, 15, 1);
}

/* remove underline on links */

a {
    text-decoration: none;
}



.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    margin-bottom:100px;
  }
  * html .clearfix             { zoom: 1; } /* IE6 */
  *:first-child+html .clearfix { zoom: 1; } /* IE7 */

  
/* Skills List */

#Skillbar {
    margin-left: auto;
    margin-right: auto;
}

#skillsList {
    margin-top: 50px;
    width: auto;
    z-index: 1;
    height: auto;
    -webkit-font-smoothing: none;
}

#skillsList li {
    float: left;
    padding-left: 80px;
    list-style: none;
}

#skillsList li:nth-child(1) {
    float: left;
    padding-left: 40px !important;
}

#skillStatusBar {
    width: 7px;
    background-color: fffff;
    height: 180px;
    margin-left: 7px;
}

#skillStatusBar.animation-element {
    background: rgb(230, 230, 230);
    background: -moz-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(230, 230, 230, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(230, 230, 230, 1)), color-stop(100%, rgba(230, 230, 230, 1)));
    background: -webkit-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(230, 230, 230, 1) 100%);
    background: -o-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(230, 230, 230, 1) 100%);
    background: -ms-linear-gradient(top, rgba(230, 230, 230, 1) 0%, rgba(230, 230, 230, 1) 100%);
    background: linear-gradient(to bottom, rgba(230, 230, 230, 1) 0%, rgba(230, 230, 230, 1) 100%);
    transform-origin: top;
    transform: rotate(180deg);
    position: absolute;
    height: 0px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    margin-top: 200px;
}

.langskills #skillStatusBar {
    background: rgb(0, 16, 156) !important;
    background: -moz-linear-gradient(top, rgb(0, 10, 156) 0%, rgb(67, 113, 240) 100%) !important;
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(0, 10, 156)), color-stop(100%, rgb(67, 113, 240))) !important;
    background: -webkit-linear-gradient(top, rgb(0, 10, 156) 0%, rgb(67, 113, 240) 100%) !important;
    background: -o-linear-gradient(top, rgb(0, 10, 156) 0%, rgb(67, 113, 240) 100%) !important;
    background: -ms-linear-gradient(top, rgb(0, 10, 156) 0%, rgb(67, 113, 240) 100%) !important;
    background: linear-gradient(to bottom, rgb(0, 10, 156) 0%, rgb(67, 113, 240) 100%) !important;
}

#skillStatusBar.animation-element.in-view {}

#VSCodeImg.animation-element.in-view {
    top: 0px;
    opacity: 1;
}