.ml-auto { margin-left: auto; } .mb-lg { margin-bottom: 40px; } .align-items-baseline { display: flex; align-items: baseline; } .align-items-center { display: flex; align-items: center; } .logo-bar-section { padding: 10px 0; .p-logo { float: none; font-size: 4em; } .caption { color: #808080; font-size: 20px; font-style: italic; font-weight: 700; padding-left: 20px; } } .header-bar-section { padding: 5px 0; .p-contact { color: #fff; font-size: 20px; font-weight: 700; } } .p-banner { padding-bottom: 0; background-size: contain; .banner-caption { background: rgba(105, 105, 105, 0.9); padding: 30px 10px; text-align: center; color: #fff; } h3 { margin-bottom: 20px; } p { color: #fff; font-size: 18px; } } .p-social { text-align: right; .social-list { position: relative; min-height: 38px; min-width: 190px; display: inline-block; margin-bottom: 0; li, a { height: 38px; width: 40px; display: block; } li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; } } .fa { left: 0px; background: url('../images/social-list.png') -3px 0; } .ig { left: 46px; background: url(../images/social-list.png) -50px 0; } .tw { left: 97px; background: url(../images/social-list.png) -98px 0; } .ln{ left: 144px; background: url(../images/social-list.png) -142px 0; } } .btn-join { background: #ed7d31; color: #fff; padding: 6px 30px; font-size: 13px; font-weight: 600; border-radius: 0; border: 0; &:hover { background-color: darken(#ed7d31, 10%) } } .why_prohub_wrap { padding: 30px 0 50px; p { font-size: 18px; line-height: 1.5; } h3 { font-size: 36px; margin-bottom: 30px; color: #ed7d31; text-align: center; font-style: italic; font-weight: 900; } .icon-list { padding: 0; margin: 20px 0; list-style: none; text-align: left; li { margin-bottom: 20px; padding-left: 40px; position: relative; font-size: 14px; &:before { background: rgba(0, 0, 0, 0) no-repeat scroll 0 0; background-image: url("../images/bullet-checkbox.png"); background-size: contain; content: " "; position: absolute; left: 0; top: 3px; height: 24px; width: 20px; } } } .p-image { margin: 0 auto; max-width: 400px; img { margin: 20px 0; filter: drop-shadow(3px 3px 3px #686868); } .caption { text-align: center; font-style: italic; margin-bottom: 20px; font-size: 16px; } } } .hw-heading { h3 { font-size: 36px; margin-bottom: 25px; color: #ed7d31; text-align: center; font-style: italic; font-weight: 900; } } .plan_wrap { padding: 50px 0; } .how_works_heading { display: table; width: 100%; } .banner-jumbotron { display: table-cell; vertical-align: middle; .jumbotron-caption { max-width: 400px; line-height: 1.5; } .jumbotron-btn { text-align: center; max-width: 400px; } } .jumbotron-footer { background-color: #696969; color: #fff; padding: 20px 0; .quote { text-align: center; font-size: 24px; font-weight: 600; line-height: 1.3; } .ref { padding-left: 15px; font-style: italic; font-size: 16px; margin-top: 10px; } } @media (max-width: 768px) { .mb-sm-30{ margin-bottom: 30px; } } @media (max-width: 615px) { .align-items-baseline, .align-items-center { flex-direction: column; } .ml-auto { margin-left: initial; } } @media (max-width: 567px) { .logo-bar-section .caption { display: block; } } @media (max-width: 480px) { .why_prohub_wrap, .hw-heading { h3 { font-size: 24px !Important; } } .jumbotron-caption { font-size: 18px; } .jumbotron-footer .quote { font-size: 16px; } } .vjs-default-skin .vjs-big-play-button { left: 40%; top: 40%; width: 20%; height: 20%; }