* {
	padding: 0;
    margin: 0;
    transition: all 0.3s linear;
    font-size: 0px;
    background-repeat: no-repeat;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box; 
            box-sizing: border-box;
}

a {
    text-decoration: none;
}

/* unvisited link */
a:link {
    color: #333333;
}

/* visited link */
a:visited {
     color: #333333;
}

/* mouse over link */
a:hover {
     color: #333333;
}

/* selected link */
a:active {
  color: #333333;
}

a[x-apple-data-detectors=true] { color: inherit !important; text-decoration: inherit !important;}

.centerVertAlignMe {
    top: 50%;
    transform: translateY(-50%);
}

.centerAbs {
    left: 50%;
    transform: translateX(-50%);
}

.centerMe {
    margin: 0 auto;
}

/*  * * * * * * * * * * * *    General Content style: */

html {
    max-width: 100%;
}

body {
    min-width: 320px;
    margin: 0 auto;
    width: 100%;
    background-color: #333333;  
    text-align: center;
}

article {
    position: relative;
    top: 0px;    
    margin: 0 auto;
    min-width: 320px;
    width: 100%;
    max-width: 1960px;    
    height: 900px; 
    margin: 0 auto;   
    z-index: 100;
    padding-top: 25px;
    padding-bottom: 60px;
    z-index: 1000;
    background-color: #000000;
    overflow: hidden;
}

.abs {
    position: absolute;    
}

#bigBackground {
    z-index: 1001;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('images/spring_BG.jpg');
    background-position: 50% 50%;
    background-size: 105% 110%;
    filter: blur(5px);    
}

#blackBG {
    z-index: 1002;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;    
    background-color: rgba(0, 0, 0, 0.5);
}

/* * * * * * * * * * * * * Nav Bar: */

nav {
    position: relative;
    z-index: 2001;
    width: 100%;
    height: 20px;
    margin-bottom: 30px;
    /*
    background-color: rgba(0, 0, 0, 0.5);
    */
}

#navCont {
    width: 100%;
    max-width: 1600px;
    padding: 0 40px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;

}

#navCont a {
    width: 25%;
}

.navSelections {
    height: 30px;
    width: 100%;
    padding-top: 7px;
    color: #f0f0f0;
    font-size: 11px;
    letter-spacing: 3px;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
}

/* * * * * * * * * * * * * Mobile Nav Bar: */

#NavBarMobile {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 50px;
    z-index: 8000;
    text-align: center;
    max-width: 1600px;
    display: none;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(84, 84, 84, 0.6);
}

#hamburgerCont {
    z-index: 8000;
    position: absolute;
    right: 20px;
    top: 13px;
    height: 23px;
    width: 28px;
    transform-origin: 50% 50%;
}

.burgers {
    position: absolute;
    z-index: 8000;
    left: 0px;
    width: 100%;
    height: 3px;
    background-color: rgba(84, 84, 84, 0.6);
    /*
    background-color: rgba(153, 255, 255, 0.6);
    */
    border-radius: 2px;
    transform-origin: 50% 50%;
}

#burger01 {
    top: 0px;
}

#burger02 {
    top: 10px;
}

#burger03 {
    top: 20px;
}

#mobileNavLogo {
    width: 180px;
    height: 30px;
    position: absolute;
    left: 20px;
    top: 10px;
    color: #ffffff;
    font-size: 30px;
}

/* * * * * * * * * * * * * Footer:  */

footer {
    background-color: #333333;
    position: relative;
    z-index: 7000;
    width: 100%;
    max-width: 1960px;
    margin: 0 auto;
    height: 80px;
    padding-top: 30px;
}

#footerCont {
    width: 90%;
    margin: 0 auto;
    max-width: 1600px;   
}

.footerBoxes, .footerBoxesMobile {
    display: inline-block;
    width: 49%;
}

.footerBoxes, .footerBoxes a, #footerContMobile, #footerContMobile a {
    color: #f0f0f0;
    font-size: 11px;
    text-align: left;
    line-height: 20px; 
}

#footerLeft {
    text-align: left;  
}

#footerRight {
    text-align: right; 
}

#footerContMobile {
    width: 100%;
    display: none;
}

.footerspacer10 {
    width: 100%;
    height: 10px;
    border-bottom: 1px solid #ffffff;
    margin: 5px 0 15px;
}

#footerContMobile a:hover,  .footerBoxes a:hover {
    cursor: pointer;
    border-bottom: 2px solid #fff;
    transition: all 0.1s linear;
}

/* * * * * * * * * * * * * Mobile Nav bar menu: */

#NavBarMenuCont {
    position: fixed;
    z-index: 7000;
    top: -800px;
    left: 0px;
    width: 100%;
    height: 400px;
}

#NavBarMenu {
    position: relative;
    z-index: 7000;
    margin: 20px auto 0;
    height: 360px;
    width: 94%;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid rgb(54, 54, 54);
    border-radius: 8px;
    padding-top: 20px;
    overflow: visible;
}

.menu {
    position: relative;
    width: 90%;
    max-width: 270px;
    height: 40px;
    margin: 20px auto;
    transform-origin: 50% 50%;
    padding-top: 11px;
    overflow: visible;
}

.menuTextCont {
    width: 100%;
    text-align: center;
    color: rgb(54, 54, 54);
    font-size: 16px;
    opacity: 0;
}

.brackets {
    position: absolute;
    top: -3px;
    color: rgba(153, 255, 255, 0.6);
    font-size: 46px;
    height: 46px;
    width: 5px;
    font-weight: normal;
}

#bracket01, #bracket03, #bracket05, #bracket07, #bracket09 {
    left: 123px;
    border-top: 2px solid rgba(84, 84, 84, 0.6);
    border-bottom: 2px solid rgba(84, 84, 84, 0.6);
    border-left: 2px solid rgba(84, 84, 84, 0.6);
    
    /*
    border-top: 2px solid rgba(153, 255, 255, 0.6);
    border-bottom: 2px solid rgba(153, 255, 255, 0.6);
    border-left: 2px solid rgba(153, 255, 255, 0.6);
    */
}

#bracket02, #bracket04, #bracket06, #bracket08, #bracket10 {
    right: 123px;
    border-top: 2px solid rgba(84, 84, 84, 0.6);
    border-bottom: 2px solid rgba(84, 84, 84, 0.6);
    border-right: 2px solid rgba(84, 84, 84, 0.6);
    
    /*
    border-top: 2px solid rgba(153, 255, 255, 0.6);
    border-bottom: 2px solid rgba(153, 255, 255, 0.6);
    border-right: 2px solid rgba(153, 255, 255, 0.6);
    */
}

#sampleScreen {
    position: fixed;
    z-index: 5000;
    top: 0px;
    left: 0px;
    width: 2500px;
    height: 2500px;
    transition: all 0.0s linear;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

/* * * * * * * * * * * * * Main Screen: */

#mainCont {
    z-index: 2000;
    position: relative;
    text-align: center;
    width: 100%;
    max-width: 1600px;
    height: 770px;
    margin: 0 auto;
    border-radius: 10px; 
    overflow: hidden;
    background-color: #000000;
}

#laptopScreen {
    z-index: 5000;
    top: 13px;
    left: 5px;    
    width: 400px;
    height: 250px;
    overflow: hidden;
}

#laptopScreen:hover {
    cursor: pointer;
}

#deskContainer {
    z-index: 3000;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 87px;
    background-image: url('images/home_page_desk.jpg');
    background-position: 50% 50%;
    background-size: 1800px 100%;    
}

#windowContainer {
    z-index: 2950;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url('images/home_page_window.png');
    background-position: 0% 0%;
    background-size: 100% 96%;
}

#window {
    width: 81%;
    height: 71%;
    top: 8%;
    z-index: 5000;
}

#window:hover {
    cursor: pointer;
}

/* * * * * * * * * * * * * Backgrounds:  */

.BGcontainer {
    top: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 0%;
    transition: all 0.8s ease-in-out;
    overflow: hidden;
}

#springBG {
    z-index: 2900;
    left: 0;
    opacity: 1;
    background-image: url('images/spring_BG.jpg');
}

#summerBG {
    z-index: 2901;
    left: 0;
    opacity: 0;
    background-image: url('images/summer_BG.jpg');
}

#fallBG {
    z-index: 2902;
    left: 0;
    opacity: 0;
    background-image: url('images/fall_BG.jpg');
}

#winterBG {
    z-index: 2903;
    left: 0;
    opacity: 0;
    background-image: url('images/winter_BG.jpg');
}

/* * * * * * * * * * * * * Laptop Screen Animation:  */
#laptopContainerMain {
    z-index: 6001;
    overflow: hidden;
    bottom: 40px;
    width: 544px;
    height: 336px;
    transition: all 0.01s linear !important;
}

#laptopContainer {
    z-index: 5001;
    bottom: 0;
    left: 50%;
    background-position: 50% 50%;
    background-size: 100% 100%;
    width: 544px;
    height: 336px;
	perspective: 1135px;
	perspective-origin: 50% 50%;
    transition: all 0.6s ease-in-out !important;
}

#laptopSwitch {
    top: 64px;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 20px;
    border-radius: 15px;
    transition: all 0.5s linear;
    
    -webkit-box-shadow: inset 0px 4px 8px 1px rgba(0, 0, 0, 0.8);
       -moz-box-shadow: inset 0px 4px 8px 1px rgba(0, 0, 0, 0.8);
            box-shadow: inset 0px 4px 8px 1px rgba(0, 0, 0, 0.8);
            
    background-image: radial-gradient(#98e428, #73c326, #3c8921);
}

#laptopSwitch:hover {
    cursor: pointer;
}

.laptopSwitchButton {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    left: 2px;
    top: 1px;
    background-image: url('images/button_BG.jpg');   
    background-position: 50% 50%;
    background-size: 100%; 
}

#laptopBottom {
    z-index: 4005;
    width: 100%;
    top: 278px;
    left: 0px;
    width: 100%;
    height: 58px;
    background-image: url('images/laptop_bottom.png');   
    background-size: 100%;
    background-position: 50% 50%;
}

#laptopMonitorCont {
    z-index: 4010;
    width: 410px;
    height: 278px;
    top: 1px;
    left: 50%;
    margin-left: -205px;
    transform-origin: bottom;
	transform-style: preserve-3d;
}

.openLaptop {
    transform: rotateX(0deg);
}

.closeLaptop {
    transform: rotateX(-90deg);
}

#laptopMonitor {
    background-image: url('images/laptop_monitor.png');
    background-size: 100%;
    background-position: 50% 50%;        
}

#laptopBack {
    background-image: url('images/laptop_top.png');   
    background-size: 100%;
    background-position: 50% 50%;
	transform: rotateY(0deg) translateZ(-5px);      
}

#laptopBack:hover {
    cursor: pointer;
}

.laptopBG {    
    width: 410px;
    height: 278px;
}

.laptopsides {
    transform-origin: top left;    
}

#laptopside01 {
    width: 5px;
    height: 268px;
    background-image: linear-gradient(to left, #b3b3b3, #acacac, #dedcdd, #dedcdd, #dedcdd, #acacac, #b3b3b3);
	transform: rotateY(90deg) translateX(0px) translateY(5px);
}

#laptopside02 {
    width: 5px;
    height: 268px;    
    background-image: linear-gradient(to left, #b3b3b3, #acacac, #dedcdd, #dedcdd, #dedcdd, #acacac, #b3b3b3);
	transform: rotateY(90deg) translateZ(410px) translateY(5px);
}

#laptopside03 {
    border-top: 1px solid #b3b3b3;
    width: 406px;
    border-radius: 1px;
    height: 6px;
    background-image: linear-gradient(#dedcdd, #acacac, #515153, #515153, #515153);
	transform: rotateX(90deg) translateX(2px) translateY(-6px);
}

.rustButtons {
    width: 40px;
    height: 20px;
    top: 63px;
    border-radius: 4px;
    background-size: 100% 100%;
    background-position: 50% 50%;
    transition: all 0.1s linear;
    display: none;
}

.rustButtons:hover {
    cursor: pointer;
}

#rustButtonLeft {
    left: 40%;
    background-image: url('images/rust_arrow_left_03.jpg');
}

#rustButtonRight {
    right: 40%;
    background-image: url('images/rust_arrow_right_01.jpg');
}

.screens {    
    width: 400px;
    height: 250px;
    left: 0px;
    background-position: 50% 50%;
    background-size: 100%;    
    overflow: hidden;
}

#springScreen {
    top: 0px;
}

/* #summerScreen {
    top: 260px;
    background-image: url('images/screen_temp_02.jpg');
} */

#winterScreen {
    top: 260px;
    background-image: url('images/screen_temp_04.jpg');
}

#easterEggScreen {
    z-index: 7001;
    top: 260px;
    background-image: url('images/easter_egg_picture.jpg');   
}

#screenDock {
    top: 215px;    
    width: 200px;
    height: 34px;
    background-color: rgba(0, 0, 0, 0.7);
    left: 50%;
    margin-left: -100px;
}

/* * * * * * * * * * * * * Spring Screen Animation:  */

#springScreenTop {
    z-index: 6005;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 18px;
}

#springScreenSideNav {
    z-index: 6005;
    top: 0px;
    left: 0px;
    width: 17px;
    height: 250px;
}

#springBorder {
    z-index: 6004;
    background-color: #1e1e1e;
    top: 0px;
    left: 204px;
    height: 250px;
    width: 4px;
    border-left: 1px solid #3e3e3e;
    border-right: 1px solid #3e3e3e; 
}

#leftNumbersContainer {
    left: 25px;   
}

#rightNumbersContainer {
    left: 15px;    
}

.springNumbersCont {
    z-index: 6004;
    color: #5a5a5a !important;
    font-size: 7px;
    text-align: left;
    width: 8px;
    top: 0px; 
}

.springScreenStuff div, .screenCSSbracket, .screenCSSbracket2, .screenCSScomment, .screenCSSvalue, .screenJScomment, #springRight, .screenJSdeclare, .screenJSvalue, .screenJSnumber {
    font-size: 7px;
    text-align: left;
    letter-spacing: 0.3px;
}

.screenCSScomment, .screenJScomment {
    color: #558b3a;
}

.screenCSSbracket, .screenCSSbracket2, .screenCSSvalue, #springRight, #springRight div {
    color: #f0f0f0;
}

.screenCSSbracket2 {
    margin-bottom: 8px;
}

.screenCSSElement {
    color: #d7ab53;    
}

.screenCSSproperties {
    font-size: 7px;
    text-align: left;
    color: #9cdcf0;
    padding-left: 15px; 
}

.screenJSdeclare {
    color: #569cd6;
}

.screenJSvalue {
    color: #ce8248;
}

.screenJSnumber {
    color: #a2bd93;
}

#screenJSpad01, .screenJSpad02  {
    padding-left: 10px;   
}

.screenJSpad03 {
    padding-left: 20px;   
}

.screenJSpad04 {
    padding-left: 30px;   
}

.screenJSpad05 {
    padding-left: 40px;   
}

.screenJSpad06 {
    padding-left: 50px;   
}
    
.springScreenStuff {
    text-align: left;
    background-color: #1e1e1e;
    z-index: 5005;
    top: 20px;
    width: 200px;
    height: 838px;
    background-position: 50% 50%;
    background-size: 100%;
    font-size: 7px;
     
    -webkit-animation-duration: 55s;
       -moz-animation-duration: 55s;
        -ms-animation-duration: 55s;
         -o-animation-duration: 55s;
            animation-duration: 55s;     
        
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;        

    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
            animation-timing-function: linear;
}

#springLeft {
    left: 0px;
    padding-left: 45px;

    -webkit-animation-name: springLeft;
       -moz-animation-name: springLeft;
        -ms-animation-name: springLeft;
         -o-animation-name: springLeft;
            animation-name: springLeft;
}

#springRight {
    top: -470px;
    right: 0px;
    padding-left: 35px;

    -webkit-animation-name: springRight;
       -moz-animation-name: springRight;
        -ms-animation-name: springRight;
         -o-animation-name: springRight;
            animation-name: springRight;
}

@keyframes springLeft {

    0% {
        top: 20px;
    }
    
    3% {
        top: 20px;
    }
    
    10% {
        top: -130px;
    }
    
    30% {
        top: -130px;
    }
    
    50% {
        top: -310px;        
    }
    
    60% {
        top: -310px; 
    }
    
    65% {
        top: -480px;        
    }

    70% {
        top: -480px;  
    }
    
    100% {
        top: 20px;        
    }
    
}

@keyframes springRight {

    0% {
        top: 20px;
    }
    
    10% {
        top: 20px;
    }
    
    30% {
        top: -180px;       
    }
    
    50% {
        top: -180px; 
    }
    
    60% {
        top: -310px;        
    }

    65% {
        top: -310px;  
    }

    70% {
        top: -480px;  
    }
    
    100% {
        top: 20px;        
    }
    
}

/* * * * * * * * * * * * * Easter Egg:  */

#touchPad {
    top: 19px;
    left: 150px;
    width: 245px;
    height: 20px;
}

#touchPad:hover {
    cursor: pointer;
}