/*
Theme Name: ksd
Theme URI: https://webvistas.net
Author: Roy Green
Author URI: http://roygreen.com
Description: A minimal theme for Kevin Scholberg
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ksd
*/

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* This is all the stuff I defined */

@font-face {
    font-family: 'Bodoni Bk BT';
    src: url('./fonts/BodoniBT-Book.woff2') format('woff2'),
        url('./fonts/BodoniBT-Book.woff') format('woff'); 
/*	 src: url('./fonts/BODONIN.TTF');*/
    font-style: normal;
}

html {
    overflow-y: hidden;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
    font-family: 'Bodoni Bk BT', 'Sree Krushnadevaraya', serif;
    font-weight: 400;
    font-size-adjust: initial;
}

#page {
    font-size: 1em;
    /* equivalent to 16px */
    line-height: 1.25;
    /* equivalent to 20px */
}

/********************************************/

footer {
    position: fixed;
    top: calc(100vh - 180px);
    left: calc(100vw - 300px);
    background-color: transparent;
    width: 200px;
    height: 150px;
}

header {
    position: fixed;
    top: 5rem;
    left: 5rem;
    background-color: transparent;
    width: 150px;
    height: 200px;
}

header ul {
    list-style-type: none;
}

nav ul li {
    margin: 24px 0;
	display: flex;
	flex-wrap: nowrap;
}



main {
    margin: auto auto auto 250px;
/*    border: 2px solid green;
    background-color: #ff9;
    top: 10vh;
    left: 10vw;
    width: 80vw;
    height: 80vh;*/
}

nav, div#contactinfo {
    font-family: 'verdana', sans-serif;
    letter-spacing: 2px;
    line-height: 1.4em;
    font-size: smaller;
}

nav a, div#contactinfo a {
    text-decoration:none;

}

nav ul li.active {
    /*background-color: red; */
}

nav ul li span {
	background-color: #42b72a;
	flex: 0 0 8px;  /* must match width defined elsewhere */
}

nav ul li.active span {
	background-color: black;
}

div#contactinfo {
    width: 340px;
	height: 200px;
	margin:0 auto;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-170px;
	margin-top:-100px;
}

/* experience page */

div#foo {
    position:absolute;
    color: black;
    top: 0;
    left: 45vw;
    line-height: 3em;
    overflow-y: hidden;
}

div#foo-mobile {
    position:absolute;
    color: black;
    top: -9999px;
    left: 45vw;
    line-height: 3em;
    overflow-y: hidden;
    visibility: hidden;
}

div#foo .mcs-item p {
    font-size: 15pt;   /* was x-large */
    text-align: left;
}

div#foo-mobile .mcs-item p {
    font-size: medium;
    text-align: left;
}

div#bar {
    position: absolute;
    left: calc(44vw - 200px);
    top: 0;
    overflow-y: hidden;
}

div#bar-mobile {
    position: absolute;
    left: calc(44vw - 130px);
    top: -9999px;
    overflow-y: hidden;
    visibility: hidden;
}

.line {
    width: 24px;
    height: 4px;
    background: #000;
    margin-bottom: 3px;
}

#hamburger {
    position: fixed;
    top: -9999px;
    left: 5px;
    margin: 5px 5px 5px 0;
    z-index: 5;
    cursor: pointer;
}


/***************************************
 * controls the spacing of elements.
 * Overrides MagicScroll's own calculations
 */
div#foo-mobile .mcs-item {
    height: 2%!important;
}

div#bar-mobile .mcs-item {
    height: 6.55%!important;
}


/***************************************
 * logo is in two parts, this is the text part
 */

span#ksd-logo-name {
    font-family: verdana, sans-serif;
    font-size: 12px;
    color: fuchsia;
    letter-spacing: 2.5px;
    font-weight: 600;
    line-height: 3em;
    padding-left: 23px;
}


/***************************************
 * three pages in the whole project,
 * this sets the backgrounds
 */

.page-home, .page-contact-us {
    background: #ff9;
}

.page-graphics-signage {
    background: rgba(255,255,255, 200);
}


/******************************************
 *  This is to support fade in instead of using jQuery
 */

.dofadein {

    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 4s; /* Firefox < 16 */
    -ms-animation: fadein 4s; /* Internet Explorer */
    -o-animation: fadein 4s; /* Opera < 12.1 */
    animation: fadein 4s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



/******************************************/

#wrapper {
 width:80vw;
 height:10vh;
 margin:0 auto;
 position:fixed;
 left:50%;
 top:50%;
 margin-left:-40vw;
 margin-top:-5vh;
}

#container {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: 0;
  left: 0;
}


/*****************************************
 * This supports a linear-fade for the home page
 */



h1.small-detail {
    font-size: 4vh;  
	text-align: center;
}

.linear-wipe {

    background: linear-gradient(to left, #ff9 20%, #ff9 30%, #333 50%, #333 60%, #333 80%);
    background-size: 270% auto;

    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


    animation-name: shine;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-timing-function: linear;
}

@keyframes shine {
    from {
        background-position: 100%;
    }
    to {
        background-position: 0%;

    }
}

/*********************************************
 * mobile header for responsiveness as normal
 */
#mobile-header {
    position: fixed;
    top: 0px;
    width: 150px;
    height: 1000px;
    left: -150px;
    background-color: white;
    z-index: 3;
}

#mobile-header nav {
    position: relative;
    transform: scale(0.75, 0.75);
    top: 60px;
    left: 16px;
}



/*********************************************
 * responsive breakpoints
 */

@media only screen and (max-width: 920px) {
    header {
        transform: scale(0.75, 0.75);
       /*font-size: 0.8em;*/
        left: 2rem;
        top: 2rem;
    }

    footer {
        transform: scale(0.75, 0.75);
        top: calc(100vh - 140px);
        left: calc(100vw - 250px);
    }

    main div#wrapper h1.linear-wipe {
        font-size: 3.5vw;
    }

    div#contactinfo {
        font-size: 70%;
        margin-left: -110px;
    }



    /*******************************************
     * this flips the normal and mobile sliders
     */
    div#foo {
        top: -9999px;

    }

    div#foo-mobile {
        top: 0;
    }

    div#bar {
        top: -9999px;
    }

    div#bar-mobile {
        top: 0;
    }
    /*
        .mcs-item img {
            height: 100px!important;
            width: 100px!impornt;
        }
    /*
        div#bar {
            transform: scale(0.5, 0.5);
        }
    */

}

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


    #hamburger {
        display: inline-block;
        top: 10px;
        left: 10px;
    }

    header {
        top: -9999px;
    }

    footer {
        top: calc(100% - 130px);
        left: calc(100vw - 230px);
    }





}