/*body styles*/
body {
	font-family: 'Permanent Marker', cursive;
	text-shadow: -1px -1px 1px #222222, 1px 1px 1px #222222;
	margin:0 auto;
}


    /*background styles*/
    .backgroundSet {

        width:100%;
        float:left;
        position:relative;
        z-index:2;
        margin:0 auto;
    }

        /*background image styles*/
        .backgroundImage {

            width:100%;
            float:left;
            position:relative;
            z-index:0;
            margin:0 auto;
        }

            #homeBackgroundImage {

                min-height:900px;
                width:100%;
                background-image: url('res/images/mixingboard.png');
                background-position:center;
                background-size:cover;
                margin:0 auto;
            }

            #aboutMeBackgroundImage {

                min-height:900px;
                width: 100%;
                background-image: url('res/images/mixingboard.png');
                background-position:center;
                background-size:cover;
                filter:blur(10px);
                margin:0 auto;
            }

            #portfolioBackgroundImage {

                min-height: 900px;
                width: 100%;
                background-image: url('res/images/mixingboard.png');
                background-position:center;
                background-size:cover;
                filter:blur(10px);
                margin:0 auto;
            }

            #contactBackgroundImage {

                min-height: 900px;
                width: 100%;
                background-image: url('res/images/mixingboard.png');
                background-position:center;
                background-size:cover;
                filter:blur(10px);
                margin:0 auto;
            }

        /*END background image styles*/

        /*background FX styles*/
        .backgroundFX {

            float:left;
            position:absolute;
            z-index:1;
            margin:0 auto;
        }

            #homeBackgroundFX {

                min-height:900px;
                width:100%;
                margin:0 auto;
            }

            #aboutMeBackgroundFX {

                min-height:900px;
                width:100%;
                background-position:center;
                background-size:cover;
                background-color:#bbbbbb;
                opacity: 0.2;
                margin:0 auto;
            }

            #portofolioBackgroundFX {

                min-height:900px;
                width:100%;
                background-position:center;
                background-size:cover;
                background-color:#bbbbbb;
                opacity: 0.2;
                margin:0 auto;
            }

            #contactBackgroundFX {

                min-height:900px;
                width:100%;
                background-position:center;
                background-size:cover;
                background-color:#bbbbbb;
                opacity: 0.2;
                margin:0 auto;
            }
        /*END background FX styles*/

    /*END background styles*/

    /*foreground styles*/
    .foregroundSet {

        height:800px;
        width:100%;
        float:left;
        position:absolute;
        z-index:3;
    }

        /*navigation style*/
        nav {

            height:80px;
            width:100%;
            margin-left:0;
            margin-right:0;
            margin-top:0;
            background-color:#25252a;
            box-shadow: 2px 2px 2px 2px #222222;
        }

            /*logo style*/
            #logo {

                display:inline-block;
                height:51px;
                width:200px;
                color:#8f2121;
                padding-left:30px;
                padding-top:18px;
                font-size:30px;
                letter-spacing:2px;
                font-weight:900;
                white-space:nowrap;
				text-shadow: 4px 4px 8px #181818;
            }

                #logo a {

                    text-decoration:none;
                    color:#7f1111;
                }
            /* END logo style */

            /*links style*/
            #navLinks {

                list-style:none;
                display:inline-block;
                float:right;
                padding-right:30px;
                padding-top:23px;
            }

                #navLinks li {

                    float:left;
                    padding-left:20px;
                }

                    #navLinks li a {

                        color:#AAAAAA;
                        text-decoration:none;
                        letter-spacing:2px;
                        font-size:24px;
                    }

                    #navLinks li .current {

                        color:#7f1111;
                    }
            /*END links style*/

        /* END navigation style */

        /* introduction style */
        #intro {

            height: 823px;
            width:100%;
			margin: 0 auto;
        }

            #intro h2 {

                font-size: 75px;
                letter-spacing:2px;
                text-transform:uppercase;
                color:#7f1111;
                padding-top:300px;
                text-align:center;
                margin-top:0;
            }
        /* END introduction style*/

        /* about me styles */

        /*about me head style*/
        #aboutMeHead {

            min-height:610px;
            width:100%;
        }

            #aboutMeHead h1 {

                font-size:60px;
                text-align:center;
                letter-spacing:4px;
                padding-top:50px;
                margin-top:0;
                margin-bottom:0;
                color:#7F1111;
            }

            #aboutMeHead h2 {

                text-align:center;
                color:#7f1111;
                letter-spacing:5px;
                font-size:24px;
                font-weight:300;
                margin-top:5px;
                margin-bottom:30px;
				font-family: 'Shadows Into Light', cursive;
				font-weight: 800;
				text-shadow: -2px -2px 2px #1f0000, 2px 2px 2px #1f0000;
            }
        /*END about me head style*/

        /*about me content styles*/
        #aboutMe {
            min-height:610px;
            width: 75%;
            background-color:transparent;
            margin:100px auto;
			margin-bottom: 30px;
            margin-top:0px;
            display:table;
            float:none;
			font-family: 'Shadows Into Light', cursive;
			font-weight: 400;
        }

            /*about mixing styles*/
            #aboutMixing {

                height:610px;
                width:33%;
                border:2px solid #aaaaaa;
                display:inline-block;
                margin:0 auto;
                box-shadow: 2px 2px 5px 5px #424242;
                float:none;
                align-self:center;
            }

                /*about mixing background style*/
                #aboutMixingBackgroundSet {

                    height:608px;
                    width:24.5%;
                    margin:0 auto;
                    position:absolute;
                    z-index:6;
                }

                    #aboutMixingBackgroundImage {

                        height:608px;
                        width:100%;
                        background-image: url('res/images/mixingboard2.jpg');
                        background-position:center;
                        background-size:cover;
                        position:relative;
                        z-index:4;
                        filter:blur(1px);
                        float:left;
                    }

                    #aboutMixingBackgroundFX {

                        margin-top:200px;
                        height:280px;
                        width:100%;
                        background-color:#080808;
                        opacity:0.9;
                        position: absolute;
                        z-index:5;
                        float:left;
                    }
                /*END about mixing background style*/

                /*about mixing foreground style*/
                #aboutMixingForegroundSet {

                    height:608px;
                    width:24.5%;
                    position:absolute;
                    z-index:7;
                    padding: 0;
                    margin: 0 auto;
                }

                    #aboutMixingForegroundSet h1 {

                        padding-top:120px;
                        text-align:center;
                        font-size:55px;
						text-shadow: -2px -2px 2px #3f0000, 2px 2px 2px #3f0000;
                    }

                    #aboutMixingForegroundSet p {

                        text-align:center;
                        padding:5px;
                        padding-top:25px;
                        text-shadow: -1px -1px 1px #040404, 1px 1px 1px #040404;
						color: #bbbbbb;
						font-size: 22px;
                    }
                /*END about mixing foreground style*/

            /*END about mixing styles*/

            /*about myself styles*/
            #aboutMastering {

                height:610px;
                width:33%;
                border:2px solid #aaaaaa;
                display:inline-block;
                margin:0 auto;
                box-shadow: 2px 2px 5px 5px #424242;
                float:none;
                align-self:center;
            }

                /*about myself background style*/
                #aboutMasteringBackgroundSet {

                    height:608px;
                    width:24.5%;
                    margin:0 auto;
                    position:absolute;
                    z-index:10;
                }

                    #aboutMasteringBackgroundImage {

                        height:608px;
                        width:100%;
                        background-image: url('res/images/mastering.jpg');
                        background-position:center;
                        background-size:cover;
                        position:relative;
                        z-index:8;
                        filter:blur(2px);
                        float:left;
                    }

                    #aboutMasteringBackgroundFX {

                        margin-top:200px;
                        height:280px;
                        width:100%;
                        position:absolute;
                        background-color:#080808;
                        opacity:0.9;
                        z-index:9;
                        float:left;
                    }
                /*END about myself background style*/

                /*about myself foreground style*/
                #aboutMasteringForegroundSet {

                    height:608px;
                    width:24.5%;
                    position:absolute;
                    padding: 0;
                    margin: 0 auto;
                    z-index:11;
                }

                    #aboutMasteringForegroundSet h1 {

                        padding-top:120px;
                        text-align:center;
                        font-size:55px;
						text-shadow: -2px -2px 2px #3f0000, 2px 2px 2px #3f0000;
                    }

                    #aboutMasteringForegroundSet p {

                        text-align:center;
                        padding:5px;
                        padding-top:25px;
                        text-shadow: -1px -1px 1px #040404, 1px 1px 1px #040404;
						color: #bbbbbb;
						font-size: 23px;
                    }
                /*END about myself foreground style*/

            /*END about myself styles*/

            /*about mastering styles*/
            #aboutAdditionalServices {

                height:610px;
                width:33%;
                border:2px solid #aaaaaa;
                display:inline-block;
                margin:0 auto;
                box-shadow: 2px 2px 5px 5px #424242;
                float:none;
                align-self:center;
            }

                /*about mastering background style*/
                #aboutAdditionalServicesBackgroundSet {

                    height:608px;
                    width:24.5%;
                    margin:0 auto;
                    position:absolute;
                    z-index:10;
                }

                    #aboutAdditionalServicesBackgroundImage {

                        height:608px;
                        width:100%;
                        background-image: url('res/images/studio-one.png');
                        background-position:center;
                        background-size:cover;
                        position:relative;
                        z-index:8;
                        filter:blur(2px);
                        float:left;
                    }

                    #aboutAdditionalServicesBackgroundFX {

                        margin-top:200px;
                        height:280px;
                        width:100%;
                        position:absolute;
                        background-color:#080808;
                        opacity:0.9;
                        z-index:9;
                        float:left;
                    }
                /*END about mastering background style*/

                /*about mastering forground style*/
                #aboutAdditionalServicesForegroundSet {

                    height:608px;
                    width:24.5%;
                    padding: 0;
                    margin: 0 auto;
                    position:absolute;
                    z-index:11;
                }

                    #aboutAdditionalServicesForegroundSet h1 {

                        padding-top:140px;
                        text-align:center;
                        font-size:50px;
						color: #7f1111;
						text-shadow: -2px -2px 2px #3f0000, 2px 2px 2px #3f0000;
						font-weight: 500;
                    }

                    #aboutAdditionalServicesForegroundSet p {

                        text-align:center;
                        padding:5px;
                        padding-top:25px;
                        text-shadow: -1px -1px 1px #040404, 1px 1px 1px #040404;
						color: #bbbbbb;
						font-size: 24px;
                    }
                /*END about mastering foreground style*/

            /*END about mastering styles*/

        /*END about me content styles*/

        /* END about me styles */

        /*portfolio styles*/

            /*portfolio head styles*/
            #portfolioHead {

                display:block;
                margin-top:75px;
                margin-bottom:50px;
            }

            #portfolioHead h1 {

                color:#7f1111;
                text-align:center;
                font-size:80px;
                margin-bottom:30px;
            }

            /*END portfolio head styles*/

            /*audio player styles*/
            #playlist, audio {

                background:#000000;
                width:100%;
                padding:5px;
                padding-bottom:0px;
                margin:0 auto;
                display:flex;
                box-shadow:0px 0px 5px 3px #242424;
            }

            #playlist {

                min-height:300px;
                margin-top:0px;
                padding-top:0px;
                display:block;
                margin-bottom:250px;
                padding-bottom:5px;
            }

            #playlist li {

                color:#eeeedd;
                background:#222222;
                padding:5px;
                padding-left:10px;
                margin:0 auto;
                list-style:decimal inside none;
                width:100%;
            }

            #playlist li a {

                color:#eeeedd;
            }

            .active, .active a {

                color:#7f1111 !important;
                text-decoration:none;
            }

            #playlist label a:hover{

                text-decoration:none;
            }

            /*END audio player styles*/

        /*END portfolio styles*/

        /*contact styles*/

            #contactHead {

                margin-top:50px;
                color:#7f1111;
                text-shadow: 2px 2px 2px #222222 0px 0px 0px #222222;
            }

            #contactHead h1 {

                text-align:center;
            }


            #paragraphForeground {

                color:#dddddd;
				text-shadow: -2px -2px 2px #080808, 2px 2px 2px #080808;
				font-size: 20px;
                font-family:serif;
                text-align:center;
                font-weight:500;
                padding:15px;
                padding-left:30px;
                padding-right:30px;
            }

            .formSet {
                margin-top:20px;
                width:85%;
            }

            .emailSet, .subjectSet, .messageSet, .buttonSet {

                display:block;
                width:100%;
            }

            .messageSet, #message {

                min-height:200px;
            }

            #email, #subject, #message, #js_send {

                width:100%;
                padding:10px;
                font-size:14px;
                font-family:serif;
                color:#bbbbbb;
                background:#191c1d;
                border:none;
                border-bottom: 1px solid #5555ff;
                text-shadow:none;
            }

            #email:focus, #subject:focus, #message:focus, #js_send:focus {

                border-color:#5555ff;
            }

            #email:active, #subject:active, #message:active, #js_send:active {

                border-color:#5555ff;
            }

            #js_send {

                margin-bottom:315px;
            }

        /*END contact styles*/

        /* footer style */
        #footer {

            height:50px;
            width:100%;
            background-color:#333333;
            box-shadow:2px 2px 5px 5px #222222;
        }

            #footer p {

                text-align:center;
                color: #999999;
                font-weight:600;
                padding-top:15px;
                letter-spacing:2px;
                font-size:14px;
                margin-top:0;
                margin-bottom:0;
            }
        /* END footer style */

    /*END foreground styles*/

@media(max-width:1680px) {

    #aboutMixing, #aboutMastering, #aboutAdditionalServices {
        display:flex;
        margin-bottom:10px;
        width:75%;
    }

    #aboutMixingBackgroundSet, #aboutMixingForegroundSet, #aboutMasteringBackgroundSet, #aboutMasteringForegroundSet,
    #aboutAdditionalServicesBackgroundSet, #aboutAdditionalServicesForegroundSet {

        width:55.85%;
    }

    .backgroundSet, .backgroundImage {

        min-height:1200px;
    }

    #aboutMeBackgroundImage, #aboutMeBackgroundFX {

        min-height:2300px;
    }

    #homeBackgroundImage, #homeBackgroundFX, #portfolioBackgroundImage, #portofolioBackgroundFX {

        min-height:1300px;
    }

    @media(max-width:1095px) {

        nav {

            height:115px;
        }

        #contactBackgroundImage, #contactBackgroundFX {

            min-height:1340px;
        }
        nav #logo, nav #navLinks, nav #navLinks li {

            float:none;
            width:100%;
            text-align:center;
            padding-left:10px;
            padding-right:10px;
        }

        nav #navLinks {

            display:flex;
            padding-top:15px;
            padding-bottom:20px;
            white-space:nowrap;

        }

        nav #navLinks li a {

            font-size:18px;
        }

        nav #logo {

            font-size:24px;
        }

        #intro h2 {

            font-size:70px;
            padding-left:15px;
            padding-right:15px;
        }

        #homeBackgroundImage, #homeBackgroundFX, #portfolioBackgroundImage, #portofolioBackgroundFX {

            min-height:1340px;
        }

        @media(max-width:640px) {

            #contactBackgroundImage, #contactBackgroundFX {

                min-height:1160px;
            }

            #js_send {

                margin-bottom:400px;
            }

            @media(max-width:540px) {

                #aboutMixingBackgroundSet, #aboutMixingForegroundSet, #aboutMasteringBackgroundSet, #aboutMasteringForegroundSet,
                #aboutAdditionalServicesBackgroundSet, #aboutAdditionalServicesForegroundSet {

                    width:56%;
                }

                #aboutMixingForegroundSet h1, #aboutMasteringForegroundSet h1, #aboutAdditionalServicesForegroundSet h1 {

                    font-size:30px;
                    padding-left:10px;
                    padding-right:10px;
                    padding-top:145px;
                }

                #aboutMixingForegroundSet p, #aboutMasteringForegroundSet p, #aboutAdditionalServicesForegroundSet p {

                    font-size:16px;
                }

                #portfolioHead h1 {

                    font-size:75px;
                }

                #portfolioHead h2 {

                    font-size:35px;
                }

                @media(max-width:535px) {

                    #aboutMixingBackgroundSet, #aboutMixingForegroundSet, #aboutMasteringBackgroundSet, #aboutMasteringForegroundSet,
                    #aboutAdditionalServicesBackgroundSet, #aboutAdditionalServicesForegroundSet {

                        width:55.6%;
                    }

                    #aboutMixingBackgroundFX, #aboutMasteringBackgroundFX, #aboutAdditionalServicesBackgroundFX {

                        height:200px;
                    }

                    @media(max-width:480px) {

                        #aboutMixingBackgroundFX, #aboutMasteringBackgroundFX, #aboutAdditionalServicesBackgroundFX {

                            height:230px;
                        }

                        #aboutMeBackgroundImage, #aboutMeBackgroundFX {

                            min-height:2400px;
                        }

                        #portfolioBackgroundImage, #portofolioBackgroundFX {

                            min-height:1300px;
                        }


                        @media(max-width:440px) {

                            #js_send {

                                margin-bottom:340px;
                            }

                            nav {

                                height:85px !important;
                            }

                            #contactBackgroundImage, #contactBackgroundFX {

                                min-height:1060px;
                            }

                            #logo {

                                font-size:20px !important;
                                padding-top:10px !important;
                            }

                            #navLinks {

                                padding-top:0px !important;
                            }

                            #navLinks li a {

                                font-size:13px !important;
                            }

                            #portfolioHead {

                                margin-top:100px !important;
                            }

                            #intro {

                                height:700px;
                            }

                            #intro h2 {

                                font-size:60px;
                                padding-left:10px;
                                padding-right:10px;
                                padding-top:100px;
                            }

                            .backgroundSet, .backgroundImage, .backgroundFX, #homeBackgroundImage, #homeBackgroundFX {

                                min-height:800px;
                            }

                            #aboutMeBackgroundImage, #aboutMeBackgroundFX {

                                min-height:2340px;
                            }

                            #portfolioBackgroundImage, #portfolioBackgroundFX {

                                min-height:1200px;
                            }

                            #playlist {

                                margin-bottom: 120px;
                            }

                            @media(max-width:400px) {

                                #logo {

                                    font-size:16px !important;
                                }

                                #navLinks li a {

                                    font-size:12px !important;
                                }

                                #intro h2 {

                                    font-size:50px;
                                    padding-left:10px;
                                    padding-right:10px;
                                }

                                #aboutMixingForegroundSet h1, #aboutMasteringForegroundSet h1, #aboutAdditionalServicesForegroundSet h1 {

                                    font-size:25px;
                                    padding-left:10px;
                                    padding-right:10px;
                                    padding-top:155px;
                                }

                                #aboutMixingForegroundSet p, #aboutMasteringForegroundSet p, #aboutAdditionalServicesForegroundSet p {

                                    font-size:12px;
                                }

                                #portfolioHead h1 {

                                    font-size:50px;
                                }

                                #portfolioHead h2 {

                                    font-size:25px;
                                }

                                #aboutMeBackgroundImage, #aboutMeBackgroundFX {

                                    min-height:2340px;
                                }

                                #portfolioBackgroundImage, #portofolioBackgroundFX {

                                    min-height:1180px;
                                }

                                @media(max-width:360px) {

                                    #js_send {

                                        margin-bottom:300px;
                                    }

                                    @media(max-width:340px) {

                                        #logo {

                                            font-size:15px !important;
                                        }

                                        #navLinks li a {

                                            font-size:10px !important;
                                        }

                                        #intro h2 {

                                            font-size:40px;
                                            padding-left:10px;
                                            padding-right:10px;
                                        }

                                        #portfolioHead h1 {

                                            font-size:40px;
                                        }

                                        #portfolioHead h2 {

                                            font-size:20px;
                                        }

                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
/*END body styles*/