$modal-color: #757575; $modal-highlight-color: #212121; .modal { .icon-cross { width: 19px; height: 19px; outline: none; fill: $modal-highlight-color; } .close-mask { position: absolute; width: 19px; height: 19px; margin-top: -19px; } h4 { font-size: 35px; font-weight: $regular; color: $modal-highlight-color; @media (max-width: 767px) { font-size: 29px; } } } .modal-content { border-radius: 4px; box-shadow: 0 5px 15px rgba(0, 0, 0, .3); } .modal-dialog { @media (min-width: 768px) { width: 740px; margin-top: 100px; } } .modal-body { padding: 16px 31px; color: $modal-color; } .people-modal { .theme-metadata { font-size: 14px; margin-right: 10px; .caption { color: $modal-highlight-color; } } .theme-description { margin: 12px 0 37px; } .people-details { .row { margin-top: 20px; } .people-img { width: 100px; height: 100px; margin: 10px; @media (max-width: 767px) { width: 120px; height: 120px; margin: 10px auto; } } .details { padding-left: 30px; @media (max-width: 767px) { padding: 0; } } .name { margin-bottom: 9px; font-size: 17px; font-weight: $bold; color: $modal-highlight-color; } .position { font-weight: $regular; color: $modal-color; } .social { padding: 0; list-style: none; @media (max-width: 767px) { text-align: center; } li { display: inline-block; padding-right: 3px; } } } } .modal-ribbon-wrapper { margin-bottom: 5px; .modal-ribbon { margin-right: 7px; font-size: 14px; } }