/* ================================== FONTS ================================== */
/*
@font-face {font-family: "English111 Vivace BT";
    src:url("../fonts/OpenSans-Light.eot?")format("eot"),
    url("../fonts/OpenSans-Light.woff")format("woff"),
    url("../fonts/OpenSans-Light.ttf")format("truetype"),
    url("../fonts/OpenSans-Light.svg#OpenSans-Light")format("svg");
    font-weight:normal;font-style:normal;}
}
*/

/* ================================== GLOBAL ================================== */
* {margin: 0;}
html, body {height: 100%;}
body {
    background: transparent;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    font-size: 14px;
}
form {
    width: auto;
    padding: 25px 0;
}
input, select, textarea, button {
    font-size: 100%;
    padding: 7px;
    margin: 5px 0;
    outline: 0;
    border: 0;
    width: 97%;
    background: #fff;
    border: 1px solid rgb(213, 213, 213);
    border-radius: 5px;
} 
input {
    width: 98.4%;
}
select {
    height: 33px;
    width: 100%;
}
textarea {
    min-height: 150px;
}
input:focus, textarea:focus {
    border: 1px solid #2882FF;
    box-shadow: 0 0 2px #2882FF;
}
input[type="radio"], input[type="checkbox"] {
    width: auto;
}
input[type="radio"]:focus, input[type="checkbox"]:focus {
    border: 0px solid blue;
    box-shadow: 0 0 0 #2882FF;
}
input[type=submit], button {
    width: auto;
    padding: 5px 18px;
    line-height: 25px;
    text-shadow: none;
    cursor: pointer;
    box-shadow: none;
    /*background: #333; */
    color: #FFF;
}
input[type=color] {
    width: 100px;
}
/*input[type=submit]:hover, button:hover {background: #3F3F3F;}*/
h1 {font-size: 200%;font-weight: 500;padding: 20px 0;}
h2 {font-size: 170%;font-weight: 500;padding: 20px 0;}
h3 {font-size: 150%;font-weight: 500;padding: 20px 0;}
h4 {font-size: 140%;font-weight: 500;padding: 20px 0;}
h5 {font-size: 130%;font-weight: 500;padding: 20px 0;}
h6 {font-size: 120%;font-weight: 500;padding: 20px 0;}

p {margin: 5px 0;line-height: 25px;}
a {
    text-decoration: none;
    color: blue;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
a:hover {text-decoration: underline;}
ul {}
li {}

thead {font-weight: bold;}
td {padding: 1px 5px;}

strong, b, .bold {font-weight: bold;}
i {font-style: italic;}


.button {
    background: rgb(95, 95, 95);
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    -moz-transition: all 0s ease;
    -webkit-transition: all 0s ease;
    -o-transition: all 0s ease;
    transition: all 0s ease;
}
.btn-default {
    background: rgb(95, 95, 95);
}
.btn-default:hover {
    background: #4e4d4d;
}
.btn-send {
    background: #2b71b5;
}
.btn-send:hover {
    background: #3686d3;
}
.button:hover {text-decoration: none;}

.seperator {border-top: 1px solid #cecece;
    margin: 30px 0;
    line-height: 1px;
    border-bottom: 0;
}

.success {
    color: green; 
    font-size: 120%; 
    text-align: center;
}
.error {
    color: red; 
    font-size: 120%; 
    text-align: center;
    background: #ffe6e6;
    width: 50%;
    display: block;
    padding: 11px 40px;
    margin: auto;
    margin-top: 6%;
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: 0 2px 7px #b5b5b5;
    z-index: 9;
}
.error .button {
    padding: 4px 8px;
}
.error .close-button {
    position: absolute;
    right: 4px;
    top: 0;
    color: #6f6f6f;
    font-size: 19px;
}
.del-icon {
    color: #5f5f5f;
}
.del-icon:hover {
    color: red;
}
.menu-edit .del-icon {
    display: inline-block;
    width: 18px;
    position: relative;
    top: -2px;
    right: 2px;
}
/* ================================== FONT COLOR ================================== */



/* Wrapper */
.wrapper {
    max-width: 1000px;
    margin: auto;
    padding: 0 20px;
}




/* ================================== Upload Form ================================== */
.container {
    width: 500px;
    margin: 0 auto;
}
.progress_outer {
    border: 1px solid #A0A0A0;
    border-radius: 4px;
}
.progress {
    width: 20%;
    background-color: #82A7FB;
    border-radius: 4px;
    height: 20px;
    /*background-image: url(progress_bar.gif);
    background-size: contain;
    background-repeat: no-repeat;
    */
}
#file {
    display: none;
}


/* ================================== AJAX RESPONSE ================================== */
#ajaxResponse {position: fixed;top: 100px;left: 50%;}
#ajaxResponse img {background: rgba(255, 255, 255, 0.86);padding: 7px;border-radius: 30px; box-shadow: 0 0px 1px rgb(111, 111, 111);}



/* ================================== Configuration Install ================================== */
#form-config {width: 400px; margin: auto;box-shadow: 0 0 4px silver;margin-top: 20px; padding: 25px;}
#form-config h1 {font-size: 150%; text-align: center;}
h2.config {font-size: 130%; width: 70%;margin: auto;line-height: 35px;margin-top: 40px;text-align: center;}
h3.config {text-align: center;}



/* ================================== HEADER ================================== */
header {
    background: rgb(250, 250, 250);
    background-repeat: no-repeat;
    background-size: cover;
}
header h1 {
    float: left;
    font-size: 250%;
    padding: 5px 0;
}
header h1 img {
    max-height: 100px;
}
nav ul {
    float: right;    
}
nav ul li {float: left;}
nav ul li a {display: block; background: yellow;padding: 20px 15px;}
nav ul li a:hover {text-decoration: none}
#main-nav-toggle {
    display: none;
    color: #00ACE8;
    font-size: 35px;
    position: absolute;
    top: 4px;
    right: 20px;
}
#main-menu .active > a {
    background: #fbfb00;
}
#main-menu li:hover .submenu{
    display: block;
}
#main-menu .submenu {
    display: none;
    position: absolute;
    z-index: 999;
}
.submenu li {
    float: none;
}
.submenu li a {
    padding: 10px 15px;
}
.submenu li a:hover {
    background: #ffffa5;
        -moz-transition: all 0s ease;
    -webkit-transition: all 0s ease;
    -o-transition: all 0s ease;
    transition: all 0s ease;
}


/* ================================== LANGUAGE SWITCHER ================================== */
#languageBox {width: auto;border: 0px solid red;display: inline-block;right: 0;float: right;    margin-top: 5px;    margin-bottom: 5px;}
#languageBox ul {}
#languageBox ul li {float: left;}
#languageBox ul li a {text-decoration: none; padding: 0 5px;    border: 1px solid #E6E6E6;color: #989898;background: white;}
#languageBox ul li a.active {border: 1px solid #E6E6E6;color: #989898;background: #F9F9F9;}
#languageBox ul li a.flagLink {position: relative; top: -6px;}
#languageBox ul li a.flagLink img {position: relative; top: 6px;}





/* ================================== BODY ================================== */
#page {
   min-height: 100%;
   background: rgb(95, 95, 95);
   margin-bottom: -50px;
}
#page:after {
    content: "";
    display: block;
}
#page:after, footer {
    height: 50px;
}
#content {
   background: #fff;
   padding-bottom: 40px;
}



/* ================================== Side Bar ================================== */
#sidebar-nav {
    float: left;
    width: 20%;
}

#side-content {
    float: right;
    width: 80%;
}
#sidebar-nav .sidebar-plugin-wrapper {

}
#sidebar-nav section {
    border: 1px solid gray; 
    width: 170px;  
    margin: 10px 0; 
}


/* ================================== ADMIN MENU ================================== */
article.menu .button {width: 200px;}
#menu-box {
    text-align: center;
}
#menu-edit-single #seo-menu {padding: 10px;background: #4C4C4C;color: #fff;border-radius: 5px;margin-top: 10px;margin-bottom: 10px;}
#menu-edit-single .button {
    min-width: 80px;
}

article.menu-edit ul {display: inline-block;width: auto;margin: auto;bordeR: 0px solid rgb(95, 95, 95);padding: 30px;border-radius: 20px;background: rgb(249, 249, 249);box-shadow: 0 0 1px rgb(60, 60, 60);}

article.menu-edit ul li {background: #fff;border-bottom: 1px solid rgb(187, 187, 187);border-right: 1px solid rgb(187, 187, 187);border-left: 1px solid rgb(187, 187, 187);border-radius: 5px;box-shadow: inset 0 0px 4px 0px rgb(181, 181, 181);}
article.menu-edit ul li span {display: inline-block;cursor: move;text-align: center; width: 50px; border-right: 1px solid #C0C0C0;border-radius: 0 4px 4px 0;}
article.menu-edit ul li span img {width: 25px;position: relative;top: 4px;}

article.menu-edit ul li .sidebar-icon {margin: 0 4px;position: relative;top: -1px;font-size: 18px;}

article.menu-edit ul li a.title {font-size: 14px;line-height: 20px;display: inline-block;width: 320px; border-right: 1px solid rgb(197, 197, 197);background: rgb(221, 221, 221);color: #414141;padding: 3px 10px 3px; text-align: left;}
article.menu-edit ul li a.inactive {background: #A0A0A0;}

article.menu-edit ul li .lang-link {position: relative; font-size: 150%;line-height: 30px;display: inline-block;width: 19px;border-right: 1px solid rgb(197, 197, 197);background: rgb(221, 221, 221);color: #414141;padding: 0px 10px;}
article.menu-edit ul li .flag {width: 34px;position: absolute;top: -2px;right: 2px; }

article.menu-edit ul li a img {width: 20px;position: relative;top: 2px;right: 2px;}
article.menu-edit ul li a.title:hover {text-decoration: none; background: rgb(237, 237, 237);}

article.menu-edit ul li span:hover {background: #DEDEDE;}
article.menu-edit ul li span:active {background: red;}

article.menu-edit .submenu {margin-left: 50px;}
article.menu-edit .submenu a.title {width: 270px;}



/* ================================== ADMIN CONTENT EDIT ================================== */
table#content-edit {margin: auto;}
table#content-edit td {border: 0px solid black; vertical-align: middle; line-height: 30px; padding: 1px 10px;}
table#content-edit thead tr {font-size:100%;}
table#content-edit tr {border-bottom: 1px solid rgb(189, 189, 189);}
table#content-edit tbody tr:first-child td {padding-top: 10px;}
table#content-edit td.title {min-width: 200px; font-size: 100%;}
table#content-edit td.title a {display: block; color: #333;}
table#content-edit td.title a:hover {text-decoration: none;}
table#content-edit td.language {width: auto;}
table#content-edit td.language img {width: 30px;}
table#content-edit td.language a:hover {text-decoration: none;}
table#content-edit td.del {width: auto;}

.content-edit p, .content-edit div {  color: #777;  margin-bottom: 10px;}
.content-edit input, .content-edit select, .content-edit textarea {margin: 0 0 10px;}


#ulColumns {margin-top: 5px;padding-bottom: 25px;}
#ulColumns li {float: left;}


#content #slider {}
#content #slider #displaySlider {}
#content .imgBox {float: left; position: relative; cursor: move;}
#content .imgBox:hover .delImg {display: inline-block;}
#content .imgBox .delImg {opacity: 0.6; cursor: default; display: none; position: absolute;left: 0px;z-index: 22;background: rgba(255, 255, 255, 0.8);width: 100px;bottom: 0;text-align: center;}
#content .imgBox .delImg img {cursor: pointer;}
#content .imgBox .delImg:hover {opacity: 1;}




/* ================================== ADMIN SORT SIDEBAR ================================== */

.sort-sidebar {
    margin-bottom: 40px;
}



/* ================================== ADMIN ARTICLE EDIT ================================== */
#category-box select {width: 240px;}
#category-box .categorydel {position: relative;left: 5px;}




/* ================================== ADMIN LANGUAGE ================================== */

#admin-language-form td {border: 1px solid rgb(223, 223, 223)}
#admin-language-form .active-td {width: 1%;text-align:center;}
#admin-language-form .flag-td {width: 1%;}
#admin-language-form .country-td {width: 30%}
#admin-language-form .language-td {width: 30%}
#admin-language-form .del-td {width: 1%}
#admin-language-form .save-language {text-align: right;}

#admin-language-form .active-td select {width: 60px;}
#admin-language-form .flag-td img {position: relative;top: 10px;}
#admin-language-form .language-td input {width: 100%}
#admin-language-form .del-td .del {}
#admin-language-form .new-language a {text-decoration: none; padding: 10px;display: inline-block;background: rgb(43, 113, 181);color: #fff;}
#admin-language-form .new-language a:hover {background: rgb(54, 134, 211);}


/* ================================== ADMIN CONFIG ================================== */
#admin-config-form {}
#admin-config-form .row {border: 1px solid gray;}
#admin-config-form .left-col {display:inline-block;}
#admin-config-form .right-col {display:inline-block;}
#admin-config-form h2 {margin-top: 20px}

/* ================================== ADMIN CONFIG ================================== */
.admin-design-form .del-icon {
    margin: 5px;
    font-size: 17px;
}

/* ================================== VIEW CONTENT ================================== */
.ul_layout {}
.ul_layout li {margin-left: 3%; float: left; display: inline-block; text-align: justify;}
.ul_layout li:first-child {margin-left: 0;}


/* ================================== FOOTER ================================== */
footer {
    color: #EDEDED;
    background: rgb(61, 61, 61);    
    background-repeat: no-repeat;
    background-size: cover;
}
footer a {color: #EDEDED;}
footer #copyright {padding-top: 18px;}
footer #copyright #webdesign {float: right;}


/* ================================== Admin Editor ================================== */
.mce-container-body button:hover {
    background: transparent;
}



/* ================================== GERNERAL ================================== */
.align-center, .center {text-align: center;}
.text-align-left {text-align: left;}
.text-align-right {text-align: right;}
.text-align-justify {text-align: justify;}

.float-left {float: left;}
.float-right {float: right;}

.margin-center {margin-left: auto; margin-right: auto;}

.display-none {display: none;}



.sortable .fa-arrows {
    padding: 8px;
    cursor: move;
}
.sortable .fa-arrows:hover {
    color: #0E24DA;
}

.pflichtfeld {background: #FAD9D9;}
.clear {clear: both;}
.clear-right {clear: right;}
.clear-left {clear: left;}
.hidden {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  clip: rect(1px, 1px, 1px, 1px);
}



/* ================================== RESPONSIVE ================================== */
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
/* =========== Tablets =========== */
@media(max-width: 980px) {
    #main-nav-toggle {
        display: inline-block;
    }
    #main-nav ul {
       display: none;
       top: 40px;
        position: absolute;
        z-index: 9;
        right: 20px;
    }
    #main-nav ul {
        background: #00ACE8;
        float: none;
    }
    #main-nav ul li {
        float: none;
        text-align: left;
    }
    #main-nav ul li a {
        padding: 8px 15px;
        /*color: #fff;*/
        width: 100%;
    }
    #main-nav ul li a:hover {
        background:#f9f900;/* #50C4EC;*/
    }

    /* submenu */
    #main-nav .submenu {
        display: block;
        position: relative;
        top: 0;
        left: 20px;
    }
    .submenu li {
        float: none;
    }


}
/* =========== Smarphones =========== */
@media(max-width: 760px) {

}
@media(max-width: 480px) {

}
@media(max-width: 320px) {

    input, select, textarea {
        padding: 7px 5px;
    }


    /* ========== ADMIN LANGUAGE ========== */
    #admin-language-form .language-td {
        width: 2%;
    } 
    #admin-language-form .active-td select, #admin-language-form .country-td select {
        padding: 7px 0px;
    } 
    #admin-language-form .active-td select {
        width: 47px;
    }
    #admin-language-form .del-td {
        width: 0%;
    } 

}