@charset "UTF-8";

/* COLORS
--------------------------------------------------
  dark-brown: #3e3039;
  orange: #f97c47;
  yellow: #fff2cc;
  beige: #eee6dd;
  black: #121212;
  grey: #808080;
*/


/* GLOBAL STYLES
-------------------------------------------------- */
body {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  background-color: #fff;
  color: #808080;
}

h1, h2, h3, h4 {
  font-family: 'Poiret One', cursive;
  color: #3e3039;
  margin: 0;
}

h1 {
  font-size: 36px;
}

h2 {
  font-family: 'Arima Madurai', sans-serif;
  font-weight: 100;
  font-size: 40px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 26px;
  margin-top: 20px;
  margin-bottom: 5px;
}

.top0 { margin-top: 0px; }
.top10 { margin-top: 10px; }
.top20 { margin-top: 20px; }
.top40 { margin-top: 40px; }
.top60 { margin-top: 60px; }
.top80 { margin-top: 80px; }
.bottom0 { margin-bottom: 0px; }
.bottom10 { margin-bottom: 10px; }
.bottom20 { margin-bottom: 20px; }
.bottom40 { margin-bottom: 40px; }
.bottom60 { margin-bottom: 60px; }
.bottom80 { margin-bottom: 80px; }
.left0 { margin-left: 0px; }
.left10 { margin-left: 10px; }
.left20 { margin-left: 20px; }
.left40 { margin-left: 40px; }
.left60 { margin-left: 60px; }
.left80 { margin-left: 80px; }
.right0 { margin-right: 0px; }
.right10 { margin-right: 10px; }
.right20 { margin-right: 20px; }
.right40 { margin-right: 40px; }
.right60 { margin-right: 60px; }
.right80 { margin-right: 80px; }


/* ORNAMENTS
-------------------------------------------------- */
.ornament {
  margin-top: 30px;
  margin-bottom: 10px;
}

.ornament .left {
  padding-right:0;
  padding-top: 22px;
}

.ornament .middle {
  padding-left:0;
  padding-right:0;
  text-align: center;
}

.ornament .right {
  padding-left:0;
  padding-top: 22px;
}

.horizontal-line {
  height: 1px;
  background-color: #3e3039;
  width: 100%;
}

.horizontal-line,
.ornament-icon {
  vertical-align: middle;
  display: inline-block;
}


/* NAVBAR
-------------------------------------------------- */
.navbar-inverse {
    background-color: rgba(62, 48, 57, 0.9);
    border: 0;
}

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: middle;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }

  .navbar-inverse .navbar-nav>li {
    margin-left: 20px;
    margin-right: 10px;
  }

  .navbar-inverse .navbar-nav li::before {
    font-family: FontAwesome;
    content: "\f1d1";
    color: #121212;
    position: absolute;
    top: 25px;
    left: -22px;
  }

  .navbar-inverse .navbar-nav ul li::before,
  .navbar-inverse .navbar-nav li:first-child::before {
    content: "";
  }
}

.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
  max-height: 360px;
}

.navbar-inverse .navbar-nav>li>a {
  font-size: 16px;
  color: #fff2cc;
  text-transform: uppercase;
}

.navbar-inverse .navbar-nav>li>a {
  padding-top: 25px;
  padding-bottom: 25px;
}

@media (max-width: 767px) {
  .navbar-inverse .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
  color: #fff2cc;
  background-color: rgba(62, 48, 57, 1);
}

.dropdown-menu {
  font-size: 16px;
  text-align: center;
  background-color: rgba(62, 48, 57, 0.9);
  border: 0;
  border-radius: 0;
  padding: 0;
}

.dropdown-menu>li>a {
  color: #fff2cc;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
  color: #fff2cc;
  background-color: rgba(62, 48, 57, 1);
}

@media (max-width: 767px) {
  .dropdown-menu {
    text-align: left;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
    color: #fff2cc;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
    color: #fff2cc;
    background-color: rgba(62, 48, 57, 1);
  }
}

.navbar-inverse .navbar-toggle {
  border: 0;
}

.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
  background-color: rgba(62, 48, 57, 1);
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff2cc;
}

.navbar-inverse .navbar-brand {
  font-family: 'Poiret One', cursive;
  font-size: 40px !important;
  color: #fff2cc;
  text-transform: none !important;
}

.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-brand:hover {
  color: #fff2cc;
  background: none !important;
}

@media (min-width: 767px) and (max-width: 896px) {
  .navbar-inverse .navbar-nav>li>a {
    font-size: 14px;
  }
  .nav>li>a {
        padding: 10px 6px;
  }
}


/* SIDEBAR
-------------------------------------------------- */
/* make sidebar nav vertical */
@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
    /*display: block;*/
  }
  .sidebar-nav .navbar ul:not {
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.navbar-default {
  background-color: transparent;
  border: 0;
}

.navbar-default .navbar-toggle {
  border: 0;
  float: left;
  margin-right: 0;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: #eee6dd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #3e3039;
}

.navbar-default .subnavi {
  /*float: right;*/
  color: #3e3039;
  padding-left: 5px;
  padding-right: 5px;
}

.navbar-default .subnavi:focus,
.navbar-default .subnavi:hover {
  color: #3e3039;
}

.sidebar-nav .navbar-nav li {
  /*overflow: hidden;*/
}

.sidebar-nav .navbar-nav li:after {
  content:"";
  display: inline-block;
  vertical-align: bottom;
  width: 70px;
  border-top: 1px solid #3e3039;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .sidebar-nav .navbar-nav li:after {
    display: none;
  }
}

.sidebar-nav .navbar-nav li:last-child:after {
  display: none;
}

.sidebar-nav .navbar-nav li a {
  border: 0;
  color: #808080;
  padding-top: 10px;
  padding-bottom: 10px;
}

.sidebar-nav .navbar-nav li a:hover {
  border: 0;
  color: #3e3039;
}

.sidebar-nav .navbar-nav>.active>a,
.sidebar-nav .navbar-nav>.active>a:focus,
.sidebar-nav .navbar-nav>.active>a:hover {
  background-color: #eee;
  /*background-color: transparent;*/
  color: #3e3039;
}

.sidebar-nav .navbar-nav>.open>a,
.sidebar-nav .navbar-nav>.open>a:focus,
.sidebar-nav .navbar-nav>.open>a:hover {
  background-color: #eee;
  color: #3e3039;
}

.sidebar-nav .dropdown-menu {
  background-color: #fff;
  top: 0;
  right: -100%;
  width: 100%;
  font-size: 14px;
}

.sidebar-nav .dropdown-menu>li>a:focus,
.sidebar-nav .dropdown-menu>li>a:hover {
  background-color: #eee;
  color: #3e3039;
}

.sidebar-nav .dropdown-menu>li>a {
  color: #808080;
  text-transform: none;
}

.sidebar-nav .dropdown-menu>li>a:after {
  display: none;
}

.sidebar-nav .dropdown-menu>li:after {
  display: none;
}

.sidebar-nav .open .dropdown-menu .dropdown-header,
.sidebar-nav .open .dropdown-menu>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}

.multiColumn {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

.sidebar-nav .multiColumn {
  right: -230%;
  width: 230%;
}

@media (max-width: 480px) {
  .multiColumn {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}


/* BRAND
-------------------------------------------------- */
.brand {
  position: absolute;
  top: 80px;
  left: 17%;
  z-index: 999;
}

.brand .logo {
  font-family: 'Poiret One', cursive;
  font-size: 120px;
  color: #3e3039;
  margin: 0;
}

.brand h1 {
  margin-left: 40px;
}

.brand .logo a {
  color: #3e3039;
}

.brand .logo a:hover {
  color: #3e3039;
  text-decoration: none;
}

.brand .ornament {
  margin-top: 20px;
  margin-left: 40px;
}

.brand .horizontal-line {
  width: 70px;
}


/* CAROUSEL
-------------------------------------------------- */
.carousel-inner > .item {
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-color: #fff;
  height: 420px;
}

@media (min-width: 420px) {
  .carousel-inner > .item {
    height: 520px;
  }
}

@media (min-width: 640px) {
  .carousel-inner > .item {
    height: 620px;
  }
}

@media (min-width: 768px) {
  .carousel-inner > .item {
    height: 720px;
  }
}

@media (min-width: 992px) {
  .carousel-inner > .item {
    height: 820px;
  }
}

.glyphicon-chevron-left:before,
.glyphicon-chevron-right:before {
  font-family: FontAwesome;
  font-size: 48px;
}

.glyphicon-chevron-left:before {
  content: "\f104";
  color: rgba(62, 48, 57, 0.75);
}

.glyphicon-chevron-right:before {
  content: "\f105";
  color: rgba(62, 48, 57, 0.75);
}

.carousel-control {
  text-shadow: none;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.carousel-indicators li {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  background-color: rgba(0,0,0,0);
  border: 1px solid rgba(62, 48, 57, 0.3);
  border-radius: 16px;
}

.carousel-indicators .active {
  width: 20px;
  height: 20px;
  margin: 0;
  background-color: rgba(62, 48, 57, 0.3);
  border: 0;
}


/* JUMBOTRON
-------------------------------------------------- */
.jumbotron {
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-color: #fff;
  height: 300px;
  margin-bottom: 0;
}

@media (min-width: 420px) {
  .jumbotron {
    height: 400px;
  }
}

@media (min-width: 640px) {
  .jumbotron {
    height: 500px;
  }
}

@media (min-width: 768px) {
  .jumbotron {
    height: 600px;
  }
}

@media (min-width: 992px) {
  .jumbotron {
    height:700px;
  }
}

.tech {
  height: 300px;
}

@media (min-width: 420px) {
  .tech {
    height: 320px;
  }
}

@media (min-width: 640px) {
  .tech {
    height: 340px;
  }
}

@media (min-width: 768px) {
  .tech {
    height: 360px;
  }
}

@media (min-width: 992px) {
  .tech {
    height:460px;
  }
}


/* CONTENT
-------------------------------------------------- */
.content-tech {
  background-image: url(../images/Odissi-Technik_gradient.png);
  background-repeat: repeat-x;
  background-position: top left;
}

.content-tech .content {
  padding-top: 60px;
}

@media (min-width: 768px) {
  .content-tech {
    padding-top: 70px;
  }
}

.category {
  color:  #3e3039;
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-left: 40px;
}

.category .horizontal-line {
  width: 70px;
  margin-right: 10px;
}

.content .text-box {
  letter-spacing: normal;
}

@media (min-width: 640px) {
  .content .text-box {
    margin-left: 40px;
  }
}

.text-box p:first-child:first-letter {
  font-family: 'Arima Madurai', sans-serif;
  font-weight: 200;
  font-size: 38px;
  line-height: 20px;
  color: #3e3039;
  float: left;
  padding: 10px 7px 0px 0px;
}

.content .text-box-technik {
  letter-spacing: normal;
}

@media (min-width: 640px) {
  .content .text-box-technik {
    margin-left: 40px;
  }
}

.characters {
  text-align: center;
}

.content a {
  color: #f97c47;
  padding-bottom: 6px;
}

.content a:focus,
.content a:hover {
  color: #f97c47;
  border-bottom: 1px solid #f97c47;
  padding-bottom: 5px;
  text-decoration: none;
}

.content a::after {
  font-family: FontAwesome;
  content: "\f105";
  padding-left: 5px;
}

.pager {
  text-align: justify;
}

.pager .prev {
  float: left;
}

.pager a.prev:before {
  font-family: FontAwesome;
  content: "\f104";
  padding-right: 5px;
}

.pager a.prev:after {
  content: "";
}

.pager .next {
  float: right;
}


/* TABS
-------------------------------------------------- */
.nav-tabs {
  font-size: 16px;
  border: 0;
}

.nav-tabs>li {
  margin-right: 10px;
}

@media (min-width: 448px) {
  .nav-tabs {
    font-size: 16px;
  }
  .nav-tabs>li {
    margin-right: 20px;
  }
}

/*@media (min-width: 640px) {
  .nav-tabs {
    font-size: 18px;
  }
  .nav-tabs>li {
    margin-right: 40px;
  }
}*/

.nav-tabs>li>a {
  border: 0;
  padding: 0;
  color: #3e3039;
}

.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover {
  color: #3e3039;
  border-bottom: 1px solid #3e3039;
  padding-bottom: 5px;
}

.nav-tabs>li>a:after {
  content: "";
  padding: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border: 0;
  color: #3e3039;
  border-bottom: 1px solid #3e3039;
  padding-bottom: 5px;
}

.nav>li>a:focus, .nav>li>a:hover {
  background-color: transparent;
}

.tab-content {
  padding-top: 40px;
}

#transliteration {
  font-size: 18px;
}

#originaltext {
  font-size: 24px;
}


/* LESSON
-------------------------------------------------- */
.lesson {
  background-color: #eee6dd;
  padding-top: 50px;
}

.lesson h4 {
  margin-bottom: 20px;
}

.lesson h4:before,
.lesson h4:after {
  content: "\2248";
  padding-left: 10px;
  padding-right: 10px;
}

.lesson a {
  color: #f97c47;
}

.lesson a:focus,
.lesson a:hover {
  color: #f97c47;
  border-bottom: 1px solid #f97c47;
  padding-bottom: 5px;
  text-decoration: none;
}

.lesson a:before {
  font-family: FontAwesome;
  content: "\f041";
  font-size: 24px;
  padding-right: 10px;
}

.lesson .time span {
  color: #3e3039;
}

.lesson .time:before {
  font-family: 'Poiret One', cursive;
  content: "\2248";
  font-size: 26px;
  color: #3e3039;
}


/* CONTACT
-------------------------------------------------- */
.contact {
  background-color: #f97c47;
  padding-top: 50px;
  min-height: 640px;
}

@media (min-width: 992px) {
  .contact {
    background-image: url(../images/Odissi-Kontakt.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
  }
}

.form-group {
  margin-bottom: 40px;
}

.form-control {
  background-color: transparent;
  color:  #3e3039;
  border: none;
  border-bottom: 1px solid #fff2cc;
  border-radius: 0px;
  box-shadow: none;
}

.form-control:focus {
  border-color: transparent;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.075),0 0 4px rgba(255,255,255,.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.075),0 0 4px rgba(255,255,255,.6);
}

.contact .btn {
  background-color: transparent;
  color: #fff2cc;
  border-radius: 0;
  border: 1px solid #fff2cc;
  padding: 10px 60px;
}

.contact .btn:hover {
  background-color: #fff2cc;
  color: #f97c47;
}

/* csc-mailform */
div.csc-mailform ol {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

div.csc-mailform ol li {
  margin-bottom: 20px;
}

div.csc-mailform ol li:nth-last-child(2) {
  margin-bottom: 40px;
}

div.csc-mailform input::-webkit-input-placeholder,
div.csc-mailform textarea::-webkit-input-placeholder {
  color: #3e3039;
}

div.csc-mailform input::-moz-placeholder,
div.csc-mailform textarea::-moz-placeholder {
  color: #3e3039;
}

div.csc-mailform input:-ms-input-placeholder,
div.csc-mailform textarea:-ms-input-placeholder {
  color: #3e3039;
}
div.csc-mailform li label
{
  width:100%;
}

/* FOOTER
-------------------------------------------------- */
footer {
  background-color: #3e3039;
  color: #fff2cc;
  font-size: 12px;
  padding-top: 50px;
  padding-bottom: 70px;
}

footer .logo {
  font-family: 'Poiret One', cursive;
  font-size: 70px;
}

footer nav ul {
  list-style-type: none;
  display: inline-block;
  padding: 0;
}

footer nav li {
  display: inline-block;
  text-transform: uppercase;
  margin-bottom: 15px;
}

footer nav li::before {
  font-family: FontAwesome;
  content: "\f1d1";
  color: #121212;
  padding-left: 10px;
  padding-right: 10px;
}

footer nav li:first-child::before {
  content: "";
  padding: 0;
}

footer nav a {
  color: #fff2cc;
}

footer nav a:hover {
  color: #fff2cc;
  text-decoration: none;
  border-bottom: 1px solid #fff2cc;
  padding-bottom: 5px;
}

.tx-yag-items a:after,
.tx-yag-items img:after {
  content:'';
  padding-left: 0;
}

.text-box ul li p:first-child:first-letter,
.text-box ol li p:first-child:first-letter {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #808080 ;
  padding: 0;
}