@charset "utf-8";
/* CSS Document */

body{
	}

#Black{
    background-color: #333333;
    background-image: url(assets/Pattern_White.png);
    background-position: bottom center;
}

#White{
    background-color: #fafafa;
    background-image: url(assets/Pattern_Black.png);
    background-position: bottom center;
}

/*Links */

.LinkPresets {
    height: 50px;
    position: relative;
    cursor: pointer;
    background-color: aquamarine;
}

#Link { 
    position: absolute;
	z-index: 10;
    opacity: .0;
    height: 1px;
    width: 1px;
}

#LinkA1{
    top: 150px;
    left: 0px;
    width: 135px;
}

#LinkA2{
    top: 200px;
    left: 0px;
    width: 180px;
    
}

#LinkA3{
    top: 150px;
    left: 360px;
    width: 80px;
}

#LinkA4{
    top: 150px;
    left: 0px;
    width: 120px;
}

#LinkA5{
    top: 250px;
    left: 0px;
    width: 190px;
}

#LinkA6{
    top: 200px;
    left: 215px;
    width: 50px;
}

#LinkA7{
    top: 150px;
    left: 0px;
    width: 190px;
}

#LinkA8{
    top: 100px;
    left: 215px;
    width: 50px;
    
}

#LinkB1{
    top: 100px;
    left: 0px;
    width: 135px;
}

#LinkC1{
    top: 100px;
    left: 250px;
    width: 90px;
}

#LinkC2{
    top: 200px;
    left: 0px;
    width: 320px;
}

#LinkC3{
    top: 350px;
    left: 0px;
    width: 190px;
}

#LinkC4{
    top: 300px;
    left: 215px;
    width: 50px;
}

#LinkC5{
    top: 150px;
    left: 0px;
    width: 190px;
}

#LinkC6{
    top: 100px;
    left: 215px;
    width: 50px;
}

/* CLASSes */

.LogoPresetsWhite {
	position: relative;
    margin: 200px auto 200px auto;
    width:450px;
    background-color: rgb(250,250,250);
}

.LogoPresetsBlack {
	position: relative;
    margin: 200px auto 200px auto;
    width:450px;
    background-color: rgb(51,51,51);
}


.CopyPresetsWhite {
	position: relative;
    margin: 200px auto 200px auto;
    width:450px;
    background-color: rgb(250,250,250);
}

.CopyPresetsBlack {
	position: relative;
    margin: 200px auto 200px auto;
    width:450px;
    background-color: rgb(51,51,51);
}

.BuyPresets {
	position: relative;
    margin: 200px auto 100px auto;
    width:450px;
}

[class*="carousel-"]{
    position: relative;
    margin: auto;
    width:100%;
    max-width: 1000px;
}

.VideoPresetsWhite {
    position: relative;
    margin: auto;
    display: block;
    width:100%;
    max-width: 1000px;
    box-shadow: 0px 1px 10px #ccc;
    z-index: 10;
}

.VideoPresetsBlack {
    position: relative;
    margin: auto;
    display: block;
    width:100%;
    max-width: 1000px;
    box-shadow: 0px 1px 10px #1a1a1a;
    z-index: 10;
}

/* IDs */

#FooterWhite {
    position:relative;
    align-self: bottom;
    margin-top: -500px;
    width: 100%;
    background-image: url(assets/Wave_fafafa.png);
    background-repeat: repeat-x;
    background-position: top center;
    background-color: #1a1a1a;
    height: 850px;
    z-index: -1;
}

#FooterBlack {
    position:relative;
    align-self: bottom;
    margin-top: -500px;
    width: 100%;
    background-image: url(assets/Wave_333333.png);
    background-repeat: repeat-x;
    background-position: top center;
    background-color: #1a1a1a;
    height: 850px;
    z-index: -1;
}

#CopyIntro{
    margin: auto auto 200px auto;
}

#CopyFooter{
    top: 150px;
    margin: 200px auto auto auto;
}

#GotoDigital {
    height: 50px;
    width: 450px;
    margin: 100px auto 50px auto;
    background-image: url(assets/goto_digital.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fafafa;
}

#GotoArchiveW {
    position: relative;
    height: 50px;
    width: 450px;
    margin: auto auto 100px auto;
    background-image: url(assets/goto_archive_333333.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fafafa;
}

#NextWhite {
    position:relative;
    align-self: bottom;
    margin-top: -350px;
    width: 100%;
    background-image: url(assets/Wave_1a1a1a.png);
    background-repeat: repeat-x;
    background-position: top center;
    background-color: #fafafa;
    height: 350px;
    z-index: -1;
}

#GotoCharacter {
    height: 50px;
    width: 450px;
    margin: 100px auto 50px auto;
    background-image: url(assets/goto_character.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #333333;
}

#GotoDigitalB {
    height: 50px;
    width: 450px;
    margin: auto auto 100px auto;
    background-image: url(assets/goto_digital_fafafa.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #333333;
}

#GotoArchiveB {
    position: relative;
    height: 50px;
    width: 450px;
    margin: auto auto 100px auto;
    background-image: url(assets/goto_archive_ffffff.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #333333;
}

#NextBlack {
    position:relative;
    align-self: bottom;
    margin-top: -350px;
    width: 100%;
    background-image: url(assets/Wave_1a1a1a.png);
    background-repeat: repeat-x;
    background-position: top center;
    background-color: #333;
    height: 350px;
    z-index: -1;
}

/* Thumbnails */

.Container {
    position: relative;
    margin: auto;
    width:100%;
    max-width: 1500px;
    z-index: 2;
}

.third {
    margin: auto;
    width: 500px;
}

.twothirds {
    margin: auto;
}

.thumbnail {
    z-index: 5;
    width: 450px;
}

.largethumbnail {
    z-index: 5;
    width: 100%;
}

.legend {
    background-color: #fafafa;
    padding: 50px 0 100px;
    margin: auto;
    display: block;
}



/* very small screen */
@media only screen and (max-width: 449px) {
    
    .Container {
        position: relative;
        margin: auto;
        padding:0 25px;
        height: 5800px;
    }
    
    .third {
        margin: auto;
        float: left;
        width: 100%;
    }
    
    .largethumbnail {
        z-index: 5;
        width: 1000px;
    }
    
    .thumbnail {
        z-index: 5;
        width: 100%;
    }
    
    .vsmall {
        position:relative;
        max-width: 100%;
        padding: 0 20px 0;
        image-rendering: crisp-edges;
    }
    
    .tiny {
        position: relative;
        width: 300px;
        height: auto;
    }
}
    
}

/* normal screen */
@media only screen and (min-width: 1000px) {
    
    .Container {
        position: relative;
        margin: auto;
        padding:0 25px;
        height: 5800px;
    }
    
    .third {
        margin: auto;
        float: left;
        width: 100%;
        padding: auto 25px auto;
    }
    
    .largethumbnail {
        z-index: 5;
        width: 1000px;
    }
    
}

/* large screen */
@media only screen and (min-width: 1350px) {
    
    .Container {
        position: relative;
        margin: auto;
        padding:0 25px;
        max-width: 1050px;
        height: 5850px
    }
    
    .third {
        margin: auto;
        float: left;
    }
    
    .twothirds {
       margin: auto;
    }
}

/* very large screen */
@media only screen and (min-width: 1500px) {
    .Container {
        position: relative;
        margin: auto;
        padding:0 25px;
        height: 3950px;
        max-width: 1500px
    }
    
    .third {
        margin: auto;
        float: left;
        width: 33.333%;
        padding: auto 25px auto;
    }
    
    .largethumbnail {
        z-index: 5;
        width: 950px;
    }
}