/* 

HTML5 / CSS3 / jQuery -portfolio template - Created by Martin Dahlin - martin.dahlin@live.com
Uses the touchTouch gallery jQuery -plugin, created by Martin Angelov: http://tutorialzine.com/2012/04/mobile-touch-gallery/

Tested in Chrome 30 (released Q3 2013)
Tested in Firefox 28 (released Q1 2014)
Tested in Internet Explorer 11 (released Q4 2013)
Tested in Opera 15 (released Q3 2013)
Tested in Safari 7 (released Q4 2013)


:: TABLE OF CONTENTS ::

-Embedded fonts   - Sources custom fonts
-CSS reset        - Various CSS resets.
-Colors           - Color theme settings, excluding images/backgrounds.
-General          - General settings for tags and wrappers.
-Header           - Header tag and ID's related to the page header.
-Navigation       - ID's, Sub-tags and pseudo classes related to the page navigation.
-Main             - Tags and classes for the main content. Contains all wrapper classes.
-Footer           - Footer tag and the paragraph sub-tag.
-Accordions       - ID and classes for the portfolio accordions - including the accordion images.
-Links            - Anchor tag and classes related to all links.
-Icons / Images   - Classes for all the studio/school/software -icons and the personal photo.
-Classes          - General-purpose classes that can be used by all tags. Text sizes, padding, etc.
-Media queries    - Special CSS overrides that occur when the browser window is of a certain size.
                  - Breakpoints at 360, 385, 500, 600, 768 and 900 pixel width


:: CSS ATTRIBUTES ORDER ::

Sizing and whitespace attributes comes first - separated by a blank row - and comes in this order:
-Dimensions (width and height)
-Positioning and directions - Includes z-index which is a depth-control -attribute
-Margin and padding - for controlling the whitespace

After these attributes comes all other attributes - in alphabetical order - with no blank rows in-between!


:: LAST THOUGHTS ::

-Don't delete this top comment block - you will need it!
-As often as possible, use the element unit (em) or percentages (%) for specifying sizes. 
Only use pixels (px) when there is a good reason to.

*/

/*----------------------
    CSS VARIABLES
----------------------*/
:root {
    --icon-right-margin: 10px;
    --full: 100%;
    --half: 50%;
    --quarter: 25%;
    --text-big: 2.2em;
    --text-medium-a: 1.1em;
    --text-medium-b: 1.0em;
    --text-small-a: 0.95em;
    --text-small-b: 0.9em;
    --text-tiny: 0.8em;
}


/*----------------------
    EMBEDDED FONTS
----------------------*/

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

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

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


/*----------------
    CSS resets    
----------------*/

/* Global reset */
* {
    margin: 0;
    padding: 0;
    
    border: 0;
    font-size: var(--text-medium-b);
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, footer, header, nav, section {
    display: block;
}

img { /* Remove annoying borders around images */
    border: 0 solid;
}


/*-------------
    COLORS
-------------*/

a, footer p, h1, h2, h3, .orange, .textSkill, .toolName { /* Orange font color for the theme */
    background-color: transparent;
    color: #b58527;
}

hr {
    background-color: #b58527; /* Orange */
}

a.linkCv:hover, a.linkCv2:hover, p, ul { /* Ordinary text color */
    color: #ffffff;
}

a.linkTop, footer, main { /* BG color */
    background-color: #3f3f3f;
}

a.linkTop, div.wrapAccordion, div.wrapArt, section.content { /* Colors the borders to be the same as BG color */
    border-color: #3f3f3f !important; /* Overrides black default color */
}

div.wrapAccordion, div.wrapArt, div.wrapCv, div.wrapFlex, div.wrapScripts, div.wrapSkills, div.wrapSoftware { /* All content wrappers*/
    background-color: #111 !important;
}

.bgGrey, .bgHide { /* Background pad color - Used in the school, studio and contact -sections */
    background-color: #202020 !important; /* 171717 old */
}

#headerName, #headerTitle  { /* Main header text color */
    color: #ccc;
    top: 0px;
}

#nav-main a, #nav-mobile a, #nav-trigger a { /* Header link text color */
    color: #442822;
}

#nav-main a:hover, #nav-mobile a:hover {
    background-color: #9c621d;
}

#nav-mobile ul { /* Colors the li buttons on mobile */
    background: -webkit-linear-gradient(top, #b76b28, #7f2d10); /* Android Browser 4+, Chrome 10+, Safari 5.1+ */
    background: -moz-linear-gradient(top, #b76b28, #7f2d10); /* Firefox 3.6+ */
    background: -ms-linear-gradient(top, #b76b28, #7f2d10); /* IE 11+ */
    background: -o-linear-gradient(top, #b76b28, #7f2d10); /* Opera 11.5+, Opera Mobile 12+ */
    background: linear-gradient(top bottom, #b76b28, #7f2d10); /* W3 standard */
}

#nav-main li { 
    border-right: solid 1px #b56d27; /* Separator color */
}
#nav-mobile li {
    border-bottom: solid 2px #b56d27; /* Separator color */
}

.textSkill {
    background-color: #383939;
}


/*--------------
    GENERAL
--------------*/

body, html { /* Scrollbar control - Do not change */
    overflow: auto;
}

header, main, #wrapper { /* Page contents width - Alter with caution */
    max-width: 1080px;
    width: var(--full);
}

main, #wrapper { /* Page wrapper and main tag height - Do not change */
    height: var(--full);
    
    display: block; /* Needed for internet explorer */
}

#wrapper { /* Page wrapper whitespace removal - Do not change */
    bottom: 0;
    top: 0;

    margin: 0 auto; /* top/bottom right/left */
    
    overflow: hidden;
}

body {
    background: url(../img/bgMain.png);
    background-color: #000; /* Fallback. Should actually never apply */
    background-repeat: repeat;    
    font-family: 'Open Sans', sans-serif;
}

html {
    /* Removes the 300ms touch delay in IE */
    -ms-touch-action: manipulation; /* IE 10+ */
    touch-action: manipulation; /* Chrome, Opera */
    
    /* Fixes AA/font-smoothing and issue with distance between certain chars */
    text-rendering: optimizeLegibility; /* All but IE and Opera Mini */
    text-rendering: geometricPrecision;
    font-smooth: always;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; /* Firefox 25+ */
    -webkit-font-smoothing: antialiased; /* Chrome 5+, Safari 4+ */
    -webkit-font-smoothing: subpixel-antialiased;
}

h1, h2 { /* Content main header */
    margin: 0px 0px 5px 5px; /* top right bottom left */

    clear: left;
    font-family: XSCALE, Arial, sans-serif !important;
    font-size: 2.0em;
    text-align: left;
    text-shadow: 0.05em 0.05em black;
    text-transform: uppercase;
}

h2  { /* Content sub header - Accordion titles */
    line-height: 70%; /* Reduces spacing between rows */
    font-size: 1.9em !important;
}

h3 { /* Content sub header - Script titles */
    font-weight: bold;
}


hr { /* Thematic breaks */
    height: 10px; 
    
    margin-bottom: 50px;
    margin-top: 10px;
}

hr.thin, hr.thinGrey {
    height: 2px;
    
    margin-bottom: 20px;
    margin-top: 20px;
}

hr.thinGrey {
    background-color: #555;
}

/* h4 is used by the accordions!!! */

img {
    max-height: var(--full);
    max-width: var(--full);
}

li { /* List item */
    line-height: 1.5em;
}

ul { /* Unordered list */
    margin-bottom: 12px;
    margin-left: 1.6em ;

    font-size: var(--text-medium-b);
}

p { /* Paragraph */
    margin: 5px 0px; /* top/bottom right/left */
    text-align: left;
}

span { /* Span - Used by the menu button and back to top -buttons */
    margin-bottom: 2.0em;

    display: block;
}


/*------------
    HEADER
------------*/

header {
    height: 131px;
    
    position: relative;
    
    margin-top: 10px;

    background-image: url(../img/bgHeaderC.png);
    background-image: image-set(url(../img/bgHeaderC.png) 1x, url(../img/bgHeaderC.png) 2x)
}

#headerName, #headerTitle {
    position: absolute;    
    z-index: 2;
    
    padding-left: 20px;

    font-family: talldark !important;
    text-shadow: 0.03em 0.03em black;
}

#headerName {
    padding-top: 0.06em;

    font-size: 4.4em;
    letter-spacing: 0.008em;
}

#headerTitle {
    padding-top: 1.17em;

    font-size: 3.6em;
    letter-spacing: 0.004em;
}


/*----------------
    NAVIGATION
----------------

#nav-trigger        - This is the actual menu button visible on mobile devices
#nav-main           - The navigation bar
#nav-mobile         - Compact version of the navigation bar visible on mobile devices

*/


nav, #nav-trigger { /* Nav bar and menu button distance to bottom of header */
    margin-bottom: 0.8em;
}

#nav-trigger {
    position: absolute;
    bottom: 0;
    right: 0;
    
    display: block; 
    text-align: right;
}

#nav-trigger a { /* The link with the menu symbol */
    padding: 0.3em 0.3em 0.3em 0.3em; /* top left bottom right */
}

#nav-trigger span { /* Span (background) for the menu button */
    width: 4.0em;
    
    margin-bottom: 0 !important;
    
    line-height: 1.5em; 
}


/* Navigation bar */

#nav-main { /* Nav bar on big screens */   
    position: absolute;
    bottom: 0;
    right: 0;
    
    display: none; /* Hidden because of the mobile-first design approach */
}

#nav-mobile { /* Nav bar on mobile devices */
    width: var(--full);

    position: absolute;
    bottom: 0;
  
    display: block;
}


/* Navigation menu */

#nav-main ul { 
    margin: 0;
}

#nav-mobile ul {
    position: absolute;
    right: 0;    
    z-index: 99;
    
    display: none; /* Hidden unless user is on mobile device */
}


/* Navigation menu list element */

#nav-main li { 
    display: inline-block;
}

#nav-mobile li { /* Nav menu list element on mobile devices */
    width: 6.5em;
    
    padding: 1.0em 0.7em 1.0em 0.0em; /* top right bottom left */
    
    display: block;
}

#nav-main li:last-child {
    border-right: none;
}

#nav-mobile li:last-child {
    border-bottom: none;
}


/* Navigation menu link text */

#nav-main a, #nav-mobile a, #nav-trigger a  {
    display: block;
    font-family: bignoodle !important;
    font-size: var(--text-big);
    letter-spacing: 0.01em;
    text-shadow: -1px 1px #ff702a;
}

#nav-main a {
    padding: 0.3em 0.75em; /* top/bottom right/left */
}

#nav-mobile a {
    text-align: right;
}


/*----------
    MAIN
----------*/

main {
    position: relative;

    overflow: hidden;
}

section.content { /* Wrapper for the main contents */
    margin-top: 10px;
    padding: 0px 0px 10px 0px; /* top left bottom right */
    
    background-repeat: repeat;
    background: url(../img/bgContainer.png);
    border-radius: 0px 40px 0px 40px; /* top left, top right, bottom right, bottom left*/
}

section.content, a.linkTop  { /* Adds a border around the main content section */
    border: 0px solid;
}

span.topSpan { /* Back to top button */
    height: 2.0em;

    padding-top: 10px;
}


/* Specific content wrappers */

div.wrapAccordion, div.wrapArt { /* Accordion wrapper */
    height: var(--full);

    background-repeat: repeat !important;
    background: url(../img/bgContainer.png) !important;
}

div.wrapAccordion {
    display: none;
}

div.wrapArt {
    margin-top: 79px;
    
    display: block;
    
    border-top: 5px solid;
    border-radius: 0px 40px 0px 0px;
}

div.wrapContact, div.wrapSocial { /* Contact and Generic wrappers */
    width: var(--full);

    margin-bottom: 12px;

    text-align: left;
}

div.wrapCv, div.wrapFlex, div.wrapScripts, div.wrapSkills, div.wrapSoftware, div.wrapThumb { /* General settings for the content wrappers */
    margin-bottom: 12px;
    padding: 5px;

    border-radius: 0.8em;
    
    -webkit-flex-flow: row wrap; /* Chrome 21+, Opera 15+, Safari 6.1+ */
    -ms-flex-flow: row wrap; /* IE 10+ */
    flex-flow: row wrap; /* W3 standard */

    text-align: left;
}

div.wrapCv { /* Flex wrapper for the CV section */
    margin-bottom: 0;
    padding: 0;

    -webkit-flex: 1 0 var(--full); /* Chrome 21+, Opera 15+, Safari 6.1+ */
    -ms-flex: 1 0 var(--full); /* IE 10+ */
    flex: 1 0 var(--full); /* W3 standard */
 
    text-align: center;
}

div.wrapCv:last-child {
    margin-top: 5px;
}

div.wrapFlex { /* Generic flex wrapper */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+ */
    display: -ms-flexbox; /* IE 10+ */
    display: flex; /* W3 standard */
}

div.wrapMisc { /* Flex wrapper for the links section */
    width: var(--full);
    
    padding-bottom: 10px;

    -webkit-flex: 1 0 var(--full); /* Chrome 21+, Opera 15+, Safari 6.1+ */
    -ms-flex: 1 0 var(--full); /* IE 10+ */
    flex: 1 0 var(--full); /* W3 standard */
}

div.wrapScript {

}

div.wrapSoftware { /* Ordinary wrapper with less margin bottom than the others */  
    background: none;
    text-align: center;
}

div.wrapSkills { /* Wrapper for the skills list */
}

div.wrapStudio { /* Wrapper for the studio contents */
    width: var(--full);

    box-sizing: border-box;
}

div.wrapThumb{ /* Gallery wrapper */
    margin-bottom: 0;
    padding: 3px 0px; /* top/bottom left/right  */

    text-align: center;
}

div.wrapThumb a{ /* Links that are children of the gallery wrapper */
    width: var(--full);

    padding: 0;

    display: inline-block;
}

div.wrapThumb a:first-child{
    padding-top: 5px;    
}



/*------------
    FOOTER
------------*/

footer {
    height: 45px; /* Same as footer p */
    width: var(--full);

    bottom: 0;
    position: fixed;
    
    margin: 0 auto; /* top/bottom right/left*/

    background-repeat: repeat-x;
    background: url(../img/bgHeaderD.png);
    display: none;
    overflow: hidden; /* Removes whitespace under footer */
    text-align: center;
}

footer p {
    height: 45px; /* Same as footer */
    
    margin: 0 !important;

    line-height: 32px; /* Same as footer */
    text-align: center;
}


/*----------------
    ACCORDIONS
----------------*/

h4 { /* Actual button */
    height: 100px; /* Accordion height */

    background-size: cover !important; /* Forces cropping - Note that cropping is removed on large screens in mobile.css */
    background-position: right !important; /* Positions the background to the right */
    border-top: 3px solid #333; /* Used as a separator */
    cursor: pointer;
}

h4#accordion01 {
    background: url(../img/thumb01mobile.png);
}

h4#accordion02 {
    background: url(../img/thumb17mobile.png);
}

h4#accordion03 {
    background: url(../img/thumb16mobile.png);
}

h4#accordion04 {
    background: url(../img/thumb04mobile.png);
}

h4#accordion06 {
    background: url(../img/thumb06mobile.png);
    background-position: center !important;
}

h4#accordion07 {
    background: url(../img/thumb07mobile.png);
}

h4#accordion08 {
    background: url(../img/thumb08mobile.png);
}

h4#accordion09 {
    background: url(../img/thumb09mobile.png);
}

h4#accordion10 {
    background: url(../img/thumb10mobile.png);
}

h4#accordion11 {
    background: url(../img/thumb11mobile.png);
}

h4#accordion12 {
    background: url(../img/thumb12mobile.png);
}

h4#accordion13 {
    background: url(../img/thumb13mobile.png);
}

h4#accordion14 {
    background: url(../img/thumb14mobile.png);
}

h4#accordion15 {
    background: url(../img/thumb15mobile.png);
    background-position: center !important;
}

section#accordion { /* Section container for all accordions */
    background: none; /* Important - Do not change */
}


/*-----------
    LINKS
-----------*/

a { /* Link */
    font-weight: bold;
    text-decoration: none;
}

a:visited { /* Clicked links */

}

a:hover { /* Links that the mouse pointer hovers over */

}

a.kingToolThumb {
    float: left !important;
}

a.kingShaderThumb {
    float: left !important;
    width: 340px !important;
}

a.linkTop { /* Back to top -link */
    padding: 0.7em;

    background-repeat: repeat;
    background: url(../img/bgContainer.png);
    border-radius: 0.7em; 
    display: block;
    float: right;
    text-shadow: 0.07em 0.07em black;
    text-transform: uppercase;
}

a.linkCv:link { /* CV links */
    display: none;
    text-decoration: underline;
}

a.linkCv2:link {   
    display: block;
    text-decoration: underline;
}

a.linkCv:hover, a.linkCv2:hover {
    text-decoration: none;
}


/*--------------------
    ICONS / IMAGES
--------------------*/

/* Background images for the header art */
#bgFooter {
    bottom: 16px;
    position: absolute;
}

#bgHeaderA, #bgHeaderB {   
    position: absolute;
    top: 58px;
}

#bgHeaderA, #bgFooter {
    height: 65px;
    width: var(--full);
    
    z-index: -2;
    
    background-repeat: repeat-x;  
}

#bgHeaderB {
    height: 70px;
    width: 1094px; /* HD width + 14px extra on sides */
    
    margin-left: -547px; /* Inverse value of the half the height above */
    
    left: var(--half);    
    z-index: -1;
    
    background-repeat: no-repeat;
}

img.iconContact, img.iconGeneric { /* Contact and Generic icon(s) */
    width: var(--quarter);
    
    margin-right: var(--icon-right-margin);

    background: none;
    border-radius: 0.8em;
    float: left;
}

img.iconFlag { /* CV language flags */
    height: 45px;
    width: 90px;
    
    margin-right: var(--icon-right-margin);

    background: none;
    float: left;
}

img.iconScript { /* Script icons */
    width: var(--quarter);

    position: relative;
    
    margin-right: var(--icon-right-margin);
    
    background: none;
    border-radius: 0.8em;
    float: left;
}

img.iconSoftware { /* Software icons */
    width: 30%;
    
    position: relative;
    
    margin: 0;

    background: none;
    border-radius: 0.7em;
}

img.iconSpine { /* Spine version of the software icon - w. red border */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid #ff5001;
}

img.iconStudio { /* Studio icons */
    width: 33%;

    position: relative;
    
    margin-right: var(--icon-right-margin);
    
    background: none;
    border-radius: 0.8em;
    float: left;
}

img.navIcon {
    height: 37px;
    width: 37px;

    padding: 4px;

    object-fit: none;
}

img.navIconAbout {
    object-position: 0 0;
}

img.navIconArt {
    object-position: -37px 0px;
}

img.navIconContact {
    object-position: -74px 0;
}

img.navIconMisc {
    object-position: -111px 0;
}

img.navIconResume {
    object-position: -148px 0;
}

img.navIconTechArt {
    object-position: -185px 0;
}

img.photo { /* Personal photo */
    width: 150px;

    margin: 0px 0px 2px 5px; /* top, right, bottom, left*/

    float: right;
}

/*--------------
    CLASSES
--------------*/

.bgHide { /* Background which disappears on wide screens */
    border-bottom-left-radius: 0.5em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    width: var(--full);
}

.displayBlock {
    display: block !important;
}

.displayInline {
    display: inline !important;
}

.displayTable {
    display: table !important;
}

.kingToolText {
    padding-left: 25px;
    text-align: left;
}

/* Margin classes */
.margBottomHide { /* Affects the features list for the tools section */
    margin-bottom: 0px !important;
}

.margBottom0 {
    margin-bottom: 0px !important;
}

.margTop0 {
    margin-top: 0px !important;
}

/* Padding classes */
.padLeft { 
    padding-left: 5px !important;
}

.padRight {
    padding-right: 5px !important;
}

.padSides {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.padSidesHide { /* Values assigned in mobile.css */
}

.padTop {
    padding-top: 10px !important;
}

.padTopMobile {
    padding-top: 5px !important;
}

.vertAlign {
    vertical-align: middle;
}

/* Text formatting classes */
.textBold { 
    font-weight: bold;
}

.textCenter {
    text-align: center !important;
}

.textItalic {
    font-style: italic;
}

.textLarge {
    font-size: var(--text-medium-b);
}

.textMedium, .textNormal {
    font-size: var(--text-small-b);
}

.textSmall {
    font-size: var(--text-tiny);
}

.textSkill {
    border-radius: 12px;
    display: inline-block;
    font-weight: bold;
    font-size: 1.15em;
    padding: 4px 16px 4px 16px;
}

.textTiny {
    font-size: 0.7em;
}