#top {
    margin-top: 50px;
}

.title-icon {
    width: 35px;
    vertical-align: baseline;
    position: relative;
    margin-right: 10px;
    top: 5px;
}

.glyphicon-hand-right{
    margin-right: 10px;
}

.col-vcenter {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

img.settings {
    width: 25px;
    margin-left: 8px;
    display: inline;
}

p.lead.title {
    margin-top: 20px;
}

.no-gap {
    margin-bottom: 0px;
}

ul.lead.choice {
    padding-left: 20px;
}

ul.lead.choice > li {
    list-style-type: square;
    margin-top: 10px;
    margin-bottom: 10px;
}

ul.lead.order {
    padding-left: 20px;
}

ul.lead.order > li {
    list-style-type: decimal;
    margin-top: 10px;
    margin-bottom: 10px;
}

ul.lead.info {
    padding-left: 20px;
}

ul.lead.info > li {
    list-style-type: circle;
    margin-top: 4px;
    margin-bottom: 4px;
}

ul.lead.small {
    padding-left: 20px;
}

ul.lead.small > li {
    list-style-type: disc;
    margin-top: 10px;
    margin-bottom: 10px;
}

p.lead.tip {
    margin-top: 10px;
}

div.container.social-media h2, div.container.social-media ul {
    /*visibility: hidden;*/
}

.callout {
    padding: 20px;
    padding-bottom: 10px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #ce4844;
    background-color: #F4F4F4;
}

ul.choice li em {
    margin-right: 5px;
}

kbd {
    background-color: #E5E5E5;
    color: inherit;
    font-size: 80%;
    vertical-align: 1px;
}

kbd kbd {
    font-weight: 300;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: 0px;
}

/*images*/
.app-img {
    margin-bottom: 10px;
    max-width: 100%;
    height: auto;

}

/* iPad */
#people_color_tag {
    width: 295px;
    float: left;
    clear: both;
    margin-right: 10px;
}
#people_student_color_meaning {
    width: 141px;
    float: left;
    clear: both;
    margin-right: 10px;
}
#people_lesson_preset {
    width: 321px;
}
#people_change_lesson_preset {
    width: 197px;
    float: left;
    clear: both;
    margin-right: 10px;
}
#people_enter_freetime {
    width: 268px;
    float: left;
    clear: both;
    margin-right: 10px;
}

#people_student_context_menu {
    width: 292px;
    float: left;
    clear: both;
    margin-right: 10px;
}

#timetable_progress_1 {
    width: 388px;
    float: left;
    clear: both;
    margin-right: 30px;
}

#timetable_edit_1, #timetable_edit_2, #timetable_edit_3 {
    width: 181px;
}

/* mac */
#people_freetime_double_click_osx {
    width: 259px;
}

#people_freetime_adapt_osx {
    width: 275px;
}

#people_lesson_duration_change_osx {
    width: 299px;
}

#people_lesson_duration_presets_osx {
    width: 418px;
    float: left;
    clear: both;
    margin-right: 10px;
}

#people_change_color_osx {
    width: 334px;
    float: left;
    clear: both;
    margin-right: 10px;
}

#timetable_progress_osx {
    width: 477px;
    float: left;
    clear: both;
    margin-right: 30px;
}

/* start page */
video {
    border: 2px solid black;
    width: 640px;
    height: 640px;
    max-width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    #macbook {
        padding-top: 30px;
    }
    #ipad {
        padding-top: 50px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    #ipad {
        padding-top: 30px;
    }
}


.border {
    border: 1px solid red;
}