/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    @font-face { font-family: 'Lato';
        src: url('font/Lato-Regular.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_italic';
        src: url('font/Lato-Italic.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_900';
        src: url('font/Lato-Black.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_700';
        src: url('font/Lato-Bold.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_300';
        src: url('font/Lato-Light.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_300_italic';
        src: url('font/Lato-LightItalic.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_100';
        src: url('font/Lato-Thin.ttf') format('truetype'); }

    body {
        margin: 0px;
        padding: 0px;
        opacity: 0;
        -webkit-transition: opacity 0.7s ease-in;
        -moz-transition: opacity 0.7s ease-in;
        -ms-transition: opacity 0.7s ease-in;
        -o-transition: opacity 0.7s ease-in;
        transition: opacity 0.7s ease-in;
        background-color: #6a572c;
    }

    .main {
        margin: 0px;
        padding: 0px;
        background-color: #6a572c;
        width: 100%;
    }

    .header {
        position: relative; top: 0px; left: 0px;
        margin: 0px;
        padding: 0px;
        width: 100%;

    }

    .header_img {
        position: relative; top: 0px; left: 0px;
        padding: 0px;
        margin: 0px;
        width: 100%;
    }

    .header_img img {
        margin: 0px;
        padding: 0px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .header_content {
        position: absolute; top: 0px; left: 0px;
        width: 100%;
        display: block;
    }

    .header_over {
        position: absolute; top: 0px; left: 0px;
        width: 100%;
    }

    .header_menu {
        position: absolute; top: 0px; right: 0px;
        margin: 20px 20px 0px 0px;
        z-index: 300;
    }

    .menu_button {
        text-align: right;
        font-size: 30px;
        float: left;
        padding: 0px 20px 0px 0px;
    }

    .menu_button a {
        color: #ffffff;
        text-decoration: none;
    }

    .menu_button a:link {
        color: #ffffff;
    }

    .menu_button a:hover {
        color: #000000;
        cursor: pointer;
    }

    #main_menu {
        position:absolute; top: 60px; right: 40px;
        text-align: right;
        margin: 0px;
        font-family: 'Lato', sans-serif;
        font-size: 21px;
        letter-spacing: 0.15em;
        line-height: 1.8em;
        color: #b6b6b6;
        background-color: #ffffff;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.20);
        z-index: 500;
        display: none;
    }

    #main_menu_close {
        padding: 5px;
    }

    #main_menu_close:hover {
        cursor: pointer;
    }

    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 15px;
    }

    .li_deco {
        border-bottom-color: #d4d4d4;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .menu li:hover{
        background-color: rgba(141, 115, 35, 0.45);
    }

    .menu a {
        color: #878787;
        text-decoration: none;
    }

    .menu a:link {
        color: #878787;
        text-decoration: none;
    }

    .menu a:hover {
        color: #000000;
        border: 1px;
    }

    .menu a i:hover {
        color: #000000;
        border: 1px;
    }

    .menu_box_header {
        width: 100%;
        background-color: rgb(52, 37, 14);
        font-weight: lighter;
        color: #ffffff;
        text-align: right;
    }

    .clear{
        clear: both;
    }

    h1 {
        font-family: 'Lato', sans-serif;
        font-size: 42px;
        font-weight: 300;
        color: #e0e0e0;
        line-height: 42px;
    }

    h2 {
        font-size: 21px;
        color: #e0e0e0;
    }

    h3 {
        font-size: 14px;
        font-weight: 400;
        word-spacing: 0.1em;
    }

    .container h2, .container_02 h2, .container_03 h2, .container_04 h2, .container_05 h2 {
        color: #6a572c;
        font-size: 21px;
    }

    .content {
        position: relative; top: 0px; left: 0px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        width: 100%;

    }

    .content_text {
        margin: 0px;
        padding: 0px;
        width: 100%;
        font-family: 'Lato', sans-serif;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.05em;
        word-spacing: 0.2em;
        line-height: 1.4em;
    }

    .content_left {
        width: 100%;
        padding: 20px 50px 20px 50px;
        margin: 0px;
        display: block;
    }

    .content_right {
        width: 100%;
        padding: 20px 50px 20px 50px;
        margin: 0px;
        background-color: #b99e5d;
        display: block;
    }

    .content_right_aktuelles {
        width: 100%;
        padding: 0px 0px 0px 10px;
        display: block;
        color: #e0e0e0;
    }

    .content_italic {
        font-family: 'Lato', sans-serif;
        font-size: 15px;
        font-weight: 400;
        font-style: italic;
    }

    .content_text a {
        color: #000000;
        text-decoration: underline;
    }

    .content_text a:link {
        color: #000000;
    }

    .content_text a:hover {
        color: #ffffff;
        border: 1px;
    }

    .content_music {
        width: 100%;
    }

    .content_music {
        width: 100%;
    }

    .content_preise {
        width: 100%;
        padding: 0px 0px 0px 0px;
        background-color: #b99e5d;
    }

    .music_img {
        width: 100%;
        padding: 20px 0px 10px 0px;
        float: left;
    }

    .playlist_icon, .playlist_01_icon, .playlist_02_icon, .playlist_03_icon, .playlist_04_icon, .playlist_05_icon {
        margin: 0 auto;
        width: 50%;
        background-color: rgb(52, 37, 14);
        text-align: center;
        font-size: 21px;
        padding: 10px;
    }

    .playlist_icon a, .playlist_01_icon a, .playlist_02_icon a,.playlist_03_icon a,.playlist_04_icon a,.playlist_05_icon a  {
        color: #ffffff;
        text-decoration: none;
    }

    .playlist_icon a:link, .playlist_01_icon a:link, .playlist_02_icon a:link, .playlist_03_icon a:link, .playlist_04_icon a:link, .playlist_05_icon a:link {
        color: #ffffff;
    }

    .playlist_icon a:hover, .playlist_01_icon a:hover, .playlist_02_icon a:hover, .playlist_03_icon a:hover, .playlist_04_icon a:hover, .playlist_05_icon a:hover {
        color: #000000;
        cursor: pointer;
    }

    #playlist, #playlist_01, #playlist_02, #playlist_03, #playlist_04, #playlist_05 {
        position:relative; top: 0px; left: 0px;
        text-align: left;
        margin: 0px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.20);
        z-index: 500;
        display: none;
    }

    #playlist_close, #playlist_01_close, #playlist_02_close, #playlist_03_close, #playlist_04_close, #playlist_05_close {
        padding: 5px;
    }

    #playlist_close:hover, #playlist_01_close:hover, #playlist_02_close:hover, #playlist_03_close:hover, #playlist_04_close:hover, #playlist_05_close:hover {
        cursor: pointer;
    }

    .track-info-box {
        width: 80%;
    }

    .progress-box {
        width: 80%;
    }

    .footer {
        position: relative; top: 0px; left: 0px;
        width: 100%;
        padding: 10px 50px 40px 50px;
        margin: auto;
        background-color: #D9BE7A;
        font-family: 'Lato', sans-serif;
        font-size: 21px;
        font-weight: 400;
        letter-spacing: 0.1em;
        line-height: 1.8em;
    }

    .footer_menu {
        width: 100%;
    }

    .footer_menu_left {
        width: 100%;
    }

    .footer_info {
        width: 100%;
        padding: 10px 0px 0px 0px;
    }

    .footer_menu_right {
        width: 100%;
    }

    .footer a {
        color: #ffffff;
        text-decoration: none;
    }

    .footer a:link {
        color: #ffffff;
    }

    .footer a:hover {
        color: #000000;
    }

    .footer_title {
        width: 100%;
        text-align: center;
        padding: 0px 0px 10px 0px;

    }

    .footer_count {
        width: 100%;
        padding: 10px 0px 0px 0px;
        font-size: 12px;
        text-align: center;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    @font-face { font-family: 'Lato';
        src: url('font/Lato-Regular.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_italic';
        src: url('font/Lato-Italic.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_900';
        src: url('font/Lato-Black.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_700';
        src: url('font/Lato-Bold.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_300';
        src: url('font/Lato-Light.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_300_italic';
        src: url('font/Lato-LightItalic.ttf') format('truetype'); }
    @font-face { font-family: 'Lato_100';
        src: url('font/Lato-Thin.ttf') format('truetype'); }

    body {
        margin: 0px;
        padding: 0px;
        opacity: 0;
        -webkit-transition: opacity 0.7s ease-in;
        -moz-transition: opacity 0.7s ease-in;
        -ms-transition: opacity 0.7s ease-in;
        -o-transition: opacity 0.7s ease-in;
        transition: opacity 0.7s ease-in;
        background-color: #6a572c;
    }

    .main {
        margin: 0px;
        padding: 0px;
        background-color: #6a572c;
        width: 100%;
    }

    .header {
        position: relative; top: 0px; left: 0px;
        margin: 0px;
        padding: 0px;
        width: 100%;

    }

    .header_img {
        position: relative; top: 0px; left: 0px;
        padding: 0px;
        margin: 0px;
        width: 100%;
    }

    .header_img img {
        margin: 0px;
        padding: 0px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .header_content {
        position: absolute; top: 0px; left: 0px;
        width: 100%;
        display: block;
    }

    .header_over {
        position: absolute; top: 0px; left: 0px;
        width: 100%;
    }

    .header_menu {
        position: absolute; top: 0px; right: 0px;
        margin: 20px 20px 0px 0px;
        z-index: 300;
    }

    .menu_button {
        text-align: right;
        font-size: 30px;
        float: left;
        padding: 0px 20px 0px 0px;
    }

    .menu_button a {
        color: #ffffff;
        text-decoration: none;
    }

    .menu_button a:link {
        color: #ffffff;
    }

    .menu_button a:hover {
        color: #000000;
        cursor: pointer;
    }

    #main_menu {
        position:absolute; top: 60px; right: 40px;
        text-align: right;
        margin: 0px;
        font-family: 'Lato', sans-serif;
        font-size: 21px;
        letter-spacing: 0.15em;
        line-height: 1.8em;
        color: #b6b6b6;
        background-color: #ffffff;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.20);
        z-index: 500;
        display: none;
    }

    #main_menu_close {
        padding: 5px;
    }

    #main_menu_close:hover {
        cursor: pointer;
    }

    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 15px;
    }

    .li_deco {
        border-bottom-color: #d4d4d4;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    .menu li:hover{
        background-color: rgba(141, 115, 35, 0.45);
    }

    .menu a {
        color: #878787;
        text-decoration: none;
    }

    .menu a:link {
        color: #878787;
        text-decoration: none;
    }

    .menu a:hover {
        color: #000000;
        border: 1px;
    }

    .menu a i:hover {
        color: #000000;
        border: 1px;
    }

    .menu_box_header {
        width: 100%;
        background-color: rgb(52, 37, 14);
        font-weight: lighter;
        color: #ffffff;
        text-align: right;
    }

    .clear{
        clear: both;
    }

    h1 {
        font-family: 'Lato', sans-serif;
        font-size: 42px;
        font-weight: 300;
        color: #e0e0e0;
        line-height: 42px;
    }

    h2 {
        font-size: 21px;
        color: #e0e0e0;
    }

    h3 {
        font-size: 14px;
        font-weight: 400;
        word-spacing: 0.1em;
    }

    .container h2, .container_02 h2, .container_03 h2, .container_04 h2, .container_05 h2 {
        color: #6a572c;
        font-size: 21px;
    }

    .content {
        position: relative; top: 0px; left: 0px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        width: 100%;

    }

    .content_text {
        margin: 0px;
        padding: 0px;
        width: 100%;
        font-family: 'Lato', sans-serif;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0.05em;
        word-spacing: 0.2em;
        line-height: 1.4em;
    }

    .content_left {
        width: 100%;
        padding: 20px 50px 20px 50px;
        margin: 0px;
        display: block;
    }

    .content_right {
        width: 100%;
        padding: 20px 50px 20px 50px;
        margin: 0px;
        background-color: #b99e5d;
        display: block;
    }

    .content_right_aktuelles {
        width: 100%;
        padding: 0px 0px 0px 10px;
        display: block;
        color: #e0e0e0;
    }

    .content_italic {
        font-family: 'Lato', sans-serif;
        font-size: 15px;
        font-weight: 400;
        font-style: italic;
    }

    .content_text a {
        color: #000000;
        text-decoration: underline;
    }

    .content_text a:link {
        color: #000000;
    }

    .content_text a:hover {
        color: #ffffff;
        border: 1px;
    }

    .content_music {
        width: 100%;
    }

    .content_music {
        width: 100%;
    }

    .content_preise {
        width: 100%;
        padding: 0px 0px 0px 0px;
        background-color: #b99e5d;
    }

    .music_img {
        width: 100%;
        padding: 20px 0px 10px 0px;
        float: left;
    }

    .playlist_icon, .playlist_01_icon, .playlist_02_icon, .playlist_03_icon, .playlist_04_icon, .playlist_05_icon {
        margin: 0 auto;
        width: 50%;
        background-color: rgb(52, 37, 14);
        text-align: center;
        font-size: 21px;
        padding: 10px;
    }

    .playlist_icon a, .playlist_01_icon a, .playlist_02_icon a,.playlist_03_icon a,.playlist_04_icon a,.playlist_05_icon a  {
        color: #ffffff;
        text-decoration: none;
    }

    .playlist_icon a:link, .playlist_01_icon a:link, .playlist_02_icon a:link, .playlist_03_icon a:link, .playlist_04_icon a:link, .playlist_05_icon a:link {
        color: #ffffff;
    }

    .playlist_icon a:hover, .playlist_01_icon a:hover, .playlist_02_icon a:hover, .playlist_03_icon a:hover, .playlist_04_icon a:hover, .playlist_05_icon a:hover {
        color: #000000;
        cursor: pointer;
    }

    #playlist, #playlist_01, #playlist_02, #playlist_03, #playlist_04, #playlist_05 {
        position:relative; top: 0px; left: 0px;
        text-align: left;
        margin: 0px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.20);
        z-index: 500;
        display: none;
    }

    #playlist_close, #playlist_01_close, #playlist_02_close, #playlist_03_close, #playlist_04_close, #playlist_05_close {
        padding: 5px;
    }

    #playlist_close:hover, #playlist_01_close:hover, #playlist_02_close:hover, #playlist_03_close:hover, #playlist_04_close:hover, #playlist_05_close:hover {
        cursor: pointer;
    }

    .track-info-box {
        width: 80%;
    }

    .progress-box {
        width: 80%;
    }

    .footer {
        position: relative; top: 0px; left: 0px;
        width: 100%;
        padding: 10px 50px 40px 50px;
        margin: auto;
        background-color: #D9BE7A;
        font-family: 'Lato', sans-serif;
        font-size: 21px;
        font-weight: 400;
        letter-spacing: 0.1em;
        line-height: 1.8em;
    }

    .footer_menu {
        width: 100%;
    }

    .footer_menu_left {
        width: 100%;
    }

    .footer_info {
        width: 100%;
        padding: 10px 0px 0px 0px;
    }

    .footer_menu_right {
        width: 100%;
    }

    .footer a {
        color: #ffffff;
        text-decoration: none;
    }

    .footer a:link {
        color: #ffffff;
    }

    .footer a:hover {
        color: #000000;
    }

    .footer_title {
        width: 100%;
        text-align: center;
        padding: 0px 0px 10px 0px;

    }

    .footer_count {
        width: 100%;
        padding: 10px 0px 0px 0px;
        font-size: 12px;
        text-align: center;
    }
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    #main_menu {
        position:absolute; top: 70px; right: 50px;
        font-size: 20px;
    }

    .clear{
        clear: both;
    }

    h1 {
        font-family: 'Lato', sans-serif;
        font-size: 42px;
        font-weight: 300;
        color: #e0e0e0;
    }

    h2 {
        font-size: 21px;
        color: #e0e0e0;
    }

    h3 {
        font-size: 14px;
        font-weight: 400;
        word-spacing: 0.1em;
    }

    .content_text {
        margin: 0px;
        padding: 0px;
        width: 100%;
        font-family: 'Lato', sans-serif;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.05em;
        word-spacing: 0.2em;
        line-height: 1.4em;
    }

    .content_left {
        width: 50%;
        padding: 20px 50px 20px 50px;
        margin: 0px;
        display: table-cell;
    }

    .content_right {
        width: 50%;
        padding: 20px 50px 20px 50px;
        display: table-cell;
        background-color: #b99e5d;
    }

    .content_right_aktuelles {
        width: 50%;
        padding: 0px 0px 0px 10px;
        float: left;
        color: #e0e0e0;
    }

    .content_italic {
        font-family: 'Lato', sans-serif;
        font-size: 15px;
        font-weight: 400;
        font-style: italic;
    }

    .content_music {
        width: 50%;
        float: left;
    }

    .content_music {
        width: 50%;
        float: left;
    }

    .content_preise {
        width: 100%;
        padding: 0px 300px 0px 0px;
        background-color: #b99e5d;
    }

    .music_img {
        width: 50%;
        padding: 0px 0px 0px 10px;
        float: left;
    }

    .playlist_icon, .playlist_01_icon, .playlist_02_icon, .playlist_03_icon, .playlist_04_icon, .playlist_05_icon {
        margin: 0 auto;
        width: 50%;
        background-color: rgb(52, 37, 14);
        text-align: center;
        font-size: 21px;
        padding: 10px;
    }

    .footer {
        font-size: 21px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    #main_menu {
        position:absolute; top: 70px; right: 50px;
        font-size: 18px;
    }

    .clear{
        clear: both;
    }

    h1 {
        font-family: 'Lato', sans-serif;
        font-size: 36px;
        font-weight: 300;
        color: #e0e0e0;
    }

    h2 {
        font-size: 21px;
        color: #e0e0e0;
    }

    h3 {
        font-size: 14px;
        font-weight: 400;
        word-spacing: 0.1em;
    }

    .content_text {
        margin: 0px;
        padding: 0px;
        width: 100%;
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.05em;
        word-spacing: 0.2em;
        line-height: 1.4em;
    }

    .content_left {
        width: 50%;
        padding: 20px 50px 20px 50px;
        margin: 0px;
        display: table-cell;
    }

    .content_right {
        width: 50%;
        padding: 20px 50px 20px 50px;
        display: table-cell;
        background-color: #b99e5d;
    }

    .content_right_aktuelles {
        width: 50%;
        padding: 0px 0px 0px 10px;
        float: left;
        color: #e0e0e0;
    }

    .content_italic {
        font-family: 'Lato', sans-serif;
        font-size: 15px;
        font-weight: 400;
        font-style: italic;
    }

    .content_music {
        width: 50%;
        float: left;
    }

    .content_music {
        width: 50%;
        float: left;
    }

    .content_preise {
        width: 100%;
        padding: 0px 300px 0px 0px;
        background-color: #b99e5d;
    }

    .music_img {
        width: 50%;
        padding: 0px 0px 0px 10px;
        float: left;
    }

    .playlist_icon, .playlist_01_icon, .playlist_02_icon, .playlist_03_icon, .playlist_04_icon, .playlist_05_icon {
        margin: 0 auto;
        width: 50%;
        background-color: rgb(52, 37, 14);
        text-align: center;
        font-size: 21px;
        padding: 10px;
    }

    .footer {
        font-size: 18px;
    }
}