@import url('https://fonts.googleapis.com/css?family=Montserrat'); html, body { background-color: #f5f5f5; -webkit-font-smoothing: antialiased; } body { font-family: "Montserrat", sans-serif; color: #5f5f5f; } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; font-weight: bold; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .top-buffer { margin-top: 20px; } .bottom-buffer { margin-bottom: 20px; } .subheading { font-weight: normal; } .container { background-color: #fff; } .container-narrow { max-width: 700px; } .row { padding: 0 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .row-no-border { border-bottom: 0px; } .row:last-child { border-bottom: none; } .header { padding: 20px; } .header p { text-align: justify; } .avatar { text-align: center; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .avatar img { width: 89px; height: 89px; border-radius: 45px; } .embed-vid { text-align: center; } ul { padding-left: 20px; } ul li { list-style: square; padding-bottom: 10px; } .contact { width: 100%; text-align: center; padding-top: 10px; } .contact ul { margin: 0 auto; padding: 0; } .contact li { display: inline-block; padding: 0 10px; border-right: 1px solid #ccc; } .contact li:first-child { padding-left: 0px; } .contact li:last-child { border-right: none; padding-right: 0px; } ul.comma-separated { margin: 0; padding: 0; display: inline; list-style: none; } ul.comma-separated li { list-style: none; padding: 0; margin: 0; display: inline; } ul.comma-separated li:after { content: ", "; } ul.comma-separated li:last-child:after { content: ""; } @media (max-width: 320px) { .header .contact { font-size: 13px; } .header .contact li { padding: 0 5px; } .contact li:first-child { padding-left: 0; } .contact li:last-child { padding-right: 0; } } @media (max-width: 768px) { .container { width: 100%; } h1 { text-align: center; } } @media (min-width: 768px) { .container { margin-top: 100px; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); margin-bottom: 50px; } }