/* ********************************************************************************** */
/*                                                                                    */
/* Global                                                                             */
/*                                                                                    */
/* ********************************************************************************** */

body {
  font-family: "museo_sans300",Helvetica,Arial,sans-serif;
}

.table {
  display: table;
  width:100%;
}

.cell {
  display: table-cell;
  vertical-align: middle;
}

.cell p:last-child {
  margin-bottom: 0;
}

.container {
  max-width: 700px; /* overwrite */
}

/* ************************************* */
/* Meta                                  */
/* ************************************* */

#meta {
  width: 100%;
  height: 48px;
  font-size: 13px;
}

.meta-social {
  margin-top: 11px;
}

.meta-social ul {
  display: inline-block;
  margin-left: 0; /* overwrite */
}

.meta-social li {
  padding-right: 0px;
  padding-left: 10px;
}

.ico-facebook,
.ico-twitter,
.ico-linkedin,
.ico-youtube {
  width:24px;
  height:24px;
  display: block;
  color:white;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  line-height:24px;
}

.ico-youtube {
  border-radius: 4px;
  font-size: 18px;
  line-height:22px;
}

/* ************************************* */
/* Header                                */
/* ************************************* */
  
body > header {
  margin-bottom: 20px;
  width:100%;
  height:169px;
  position: relative;
}

/* ************************************* */
/* Logo                                  */
/* ************************************* */

.cell--logo {
  height:169px;
  font-size: 16px;
}

#logo {
    background-image: url("https://oeb.global/themes/custom/oeb/res/img/logos/logo-oeb-online-educa-berlin-incorporating-learning-technologies-germany.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 121px;
    margin-right: 20px;
    text-indent: -9999%;
    width: 315px;
    margin-bottom: 10px;
}

sup {
    top: -.3em;
}

/* ************************************* */
/* Footer                                */
/* ************************************* */

footer { 
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ************************************* */
/* Form                                  */
/* ************************************* */

label { 
  font-weight: normal; /* overwrite */
}

textarea {
  resize: vertical;
}

input[type=checkbox] + label,
input[type=radio] + label,
.label-option label, 
.label-option{ 
    cursor: pointer;
}

.divider {
    height: 1px;
    width:100%;
    display:block; /* for use on default inline elements like span */
    margin: 9px 0 20px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.divider-big {
    height: 1px;
    width:100%;
    display:block; /* for use on default inline elements like span */
    margin: 30px 0;
    overflow: hidden;
    background-color: #e5e5e5; 
}

.divider-dot {
    height: 1px;
    width:100%;
    display:block; /* for use on default inline elements like span */
    margin: 20px 0;
    overflow: hidden;
    border-bottom: 1px dotted #ABABAB;
}

/****  Components  ****/


.panel-body {
    min-height: 650px;
}


.page-header-first {
    margin: 0 0 20px 0;
}

table.superindex-text tr td.sup{ 
    vertical-align: top; 
    text-align:right; 
    padding: 3px 10px 0 0;
}

.button-block{
    margin-top: 35px;
}

.marked-input{
    background-color: #B2E7C4; 
    padding: 10px; 
    border-radius: 6px;
}

.marked-input label{
    padding-top: 0 !important; 
}

.form-group textarea{
    resize: vertical;
    height: 130px !important;
}

/****  Miscellaneous  ****/

#message-box div .alert {
    margin-bottom: 0px !important;
}

.extra-label, 
.extra-field{  
    margin: 20px 0 0 0;
}



/* ********************************************************************************** */
/*                                                                                    */
/* Media Queries                                                                      */
/*                                                                                    */
/* ********************************************************************************** */



@media screen and (max-width: 768px) {

    .cell {
      padding-left:10px;
      padding-right: 10px;
    }
    
    .meta-social {
      text-align: center !important;
    }
    
    .no-smart {
      display:none;
    }

}  

@media screen and (max-width: 480px) {


    
    body > header,
    .cell--logo {
        height:120px;
    }

    #logo {
        width: 157px;
        background-size: contain;
        margin-right: 0;
        height:60px;
    }
    
    #slogan {
       display:none;
    }

}  

@media screen and (max-width: 400px) {



}