<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container container-wide">
<div class="row row-50 justify-content-md-center justify-content-xl-end justify-content-xxl-end">
<div class="col-md-9 col-lg-8 col-xl-6 col-xxl-5">
<div class="box-range-content">
<h3>a few words about us</h3>
<div class="divider divider-default"></div>
<p class="heading-5">Brave is an innovative web solution, which combines captivating design and flawless functionality in a multipurpose HTML template.</p>
<p class="text-spacing-sm">Made to be used by anyone who is looking for a stunning multifunctional website, this template is a universal solution, which can be used already after being installed. It differs from other similar projects in everything - be it the initial concept or the final look. Brave also can boast the set of powerful features that can be used by anyone without being afraid to overload their site. This template is certainly a synonym of awesomeness!</p>
</div>
</div>
<div class="col-md-9 col-lg-8 col-xl-6 col-xxl-6 jp-video-init">
<div class="jp-video jp-video-single jp-video-0 jp-video-270p">
<div class="jp-type-playlist">
<!-- Hidden playlist for script-->
<ul class="jp-player-list">
<li class="jp-player-list-item" data-jp-m4v="video/video.mp4" data-jp-title="local video" data-jp-poster="images/video-poster.jpg"></li>
</ul>
<!-- container in which our video will be played-->
<div class="jp-jplayer" id="jp_jplayer_0" style="width: 870px; height: 489px;">
<img id="jp_poster_0" style="width: 100%; height: auto;" src="images/video-poster.jpg">
<video id="jp_video_0" preload="metadata" src="http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/video/video.mp4" title="local video" style="width: 0px; height: 0px;"></video>
</div>
<!-- main containers for our controls-->
<div class="jp-gui" style="display: block;">
<div class="jp-interface">
<div class="jp-controls-holder">
<!-- play and pause buttons-->
<a class="jp-play" href="javascript:;" tabindex="1">play</a>
<a class="jp-pause" href="javascript:;" tabindex="1" style="display: none;">pause</a>
<span class="separator sep-1"></span>
<!-- progress bar-->
<div class="jp-progress">
<div class="jp-seek-bar" style="width: 100%;">
<div class="jp-play-bar" style="width: 0%;">
<span></span>
</div>
</div>
</div>
<div class="jp-time-wrapper">
<!-- time notifications-->
<div class="jp-current-time">00:00</div>
<span class="time-sep">/</span>
<div class="jp-duration">00:16</div>
</div>
<span class="separator sep-2"></span>
<!-- mute / unmute toggle-->
<a class="jp-mute" href="javascript:;" tabindex="1" title="mute">mute</a>
<a class="jp-unmute" href="javascript:;" tabindex="1" title="unmute" style="display: none;">unmute</a>
<!-- volume bar-->
<div class="jp-volume-bar">
<div class="jp-volume-bar-value" style="width: 40%;">
<span class="handle"></span>
</div>
</div>
<span class="separator sep-2"></span>
<!-- full screen toggle-->
<a class="jp-full-screen" href="javascript:;" tabindex="1" title="full screen">full screen</a>
<a class="jp-restore-screen" href="javascript:;" tabindex="1" title="restore screen" style="display: none;">restore screen</a>
</div>
<!-- end jp-controls-holder-->
</div>
<!-- end jp-interface-->
</div>
<!-- end jp-gui-->
<!-- unsupported message-->
<div class="jp-playlist">
<ul style="">
<li class="jp-playlist-current">
<div>
<a href="javascript:;" class="jp-playlist-item-remove" style="display: none;">�</a>
<a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="0">local video</a>
</div>
</li>
</ul>
</div>
<div class="jp-no-solution" style="display: none;">
<span>Update Required</span>Here's a message which will appear if the video isn't supported. A Flash alternative can be used here if you fancy it.
</div>
<!-- end jp_container_1-->
</div>
</div>
</div>
</div>
</div>
/*! CSS Used from: Embedded */
@media print {
*,*::before,*::after {
text-shadow: none!important;
box-shadow: none!important;
}
a,a:visited {
text-decoration: underline;
}
img {
page-break-inside: avoid;
}
p,h3 {
orphans: 3;
widows: 3;
}
h3 {
page-break-after: avoid;
}
}
*,*::before,*::after {
box-sizing: border-box;
}
h3 {
margin-top: 0;
margin-bottom: 0.5rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
ul {
margin-top: 0;
margin-bottom: 1rem;
}
a {
color: #ed1c94;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:hover {
color: #af0e6a;
text-decoration: underline;
}
img {
vertical-align: middle;
border-style: none;
}
a {
touch-action: manipulation;
}
h3 {
margin-bottom: 0.5rem;
font-family: "Oswald", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.2;
color: #343a40;
}
h3 {
font-size: 48px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-9,.col-lg-8,.col-xl-6,.col-xxl-5,.col-xxl-6 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 768px) {
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
}
}
@media (min-width: 992px) {
.col-lg-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%;
}
}
@media (min-width: 1200px) {
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (min-width: 1600px) {
.col-xxl-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%;
}
.col-xxl-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (min-width: 768px) {
.justify-content-md-center {
justify-content: center!important;
}
}
@media (min-width: 1200px) {
.justify-content-xl-end {
justify-content: flex-end!important;
}
}
@media (min-width: 1600px) {
.justify-content-xxl-end {
justify-content: flex-end!important;
}
}
/*! CSS Used from: Embedded */
a:focus {
outline: none!important;
}
*:focus {
outline: none;
}
p {
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
display: block;
}
a {
color: #ed1c94;
text-decoration: none;
transition: .25s;
}
a:hover,a:focus {
color: #af0e6a;
text-decoration: underline;
outline: none;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
}
h3,[class^='heading-'] {
margin-top: 0;
margin-bottom: 0;
font-family: "Oswald", Helvetica, Arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
color: #29293a;
}
a {
display: inline-block;
}
a:hover,a:focus {
text-decoration: none;
}
h3 {
font-size: 24px;
line-height: 1.45;
letter-spacing: 0.06em;
}
@media (min-width: 768px) {
h3 {
font-size: 28px;
}
}
@media (min-width: 1200px) {
h3 {
font-size: 34px;
line-height: 1.375;
}
}
@media (min-width: 1600px) {
h3 {
font-size: 48px;
}
}
.heading-5 {
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
font-size: 19px;
line-height: 1.5;
text-transform: none;
}
@media (min-width: 768px) {
.heading-5 {
line-height: 1.41667;
}
}
@media (min-width: 1600px) {
.heading-5 {
font-size: 24px;
}
}
.heading-5 {
font-weight: 300;
}
@media (min-width: 1200px) {
.box-range-content {
max-width: 570px;
margin-left: auto;
margin-right: auto;
}
}
.text-spacing-sm {
letter-spacing: 0.02em;
}
.container-wide {
margin-left: auto;
margin-right: auto;
max-width: 1800px;
}
* + p {
margin-top: 15px;
}
p + p {
margin-top: 12px;
}
.heading-5 + p {
margin-top: 20px;
}
.divider + p {
margin-top: 10px;
}
@media (min-width: 1200px) {
.divider + p {
margin-top: 18px;
}
}
@media (min-width: 1600px) {
.divider + p {
margin-top: 40px;
}
}
html .row-50 {
margin-bottom: -50px;
}
html .row-50:empty {
margin-bottom: 0;
}
html .row-50 > * {
margin-bottom: 50px;
}
.divider {
display: inline-block;
border: 0;
font-size: 0;
line-height: 0;
height: 3px;
max-width: 100px;
width: 100%;
}
h3 + .divider {
margin-top: 20px;
}
@media (min-width: 1600px) {
h3 + .divider {
margin-top: 40px;
}
}
.divider-default {
background: linear-gradient(to right, #ed1c94 50%, #981df0 120%);
}
.jp-video:before {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 1;
}
.jp-video:hover:before {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.jp-video {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
background: #000000;
}
.jp-video .jp-interface {
position: relative;
width: 100%;
height: 35px;
background-color: #f2f2f2;
box-shadow: inset 0px 1px 0px #f7f7f7, inset 0px -1px 0px #e2e2e2;
}
.jp-video div.jp-controls-holder {
clear: both;
margin: 0 auto;
display: flex;
position: relative;
overflow: hidden;
}
.jp-video a.jp-play,.jp-video a.jp-pause {
width: 40px;
height: 35px;
float: left;
text-indent: 110%;
outline: none;
}
.jp-video a.jp-play {
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/sprite.png) 0 0 no-repeat;
}
.jp-video a.jp-pause {
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/sprite.png) -40px 0 no-repeat;
display: none;
}
.jp-video .jp-progress {
background: #706d6d;
border-radius: 5px;
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.4);
flex: 1;
height: 10px;
float: left;
margin-top: 13px;
margin-right: 10px;
margin-left: 10px;
}
.jp-video .jp-time-wrapper {
display: none;
}
@media (min-width: 480px) {
.jp-video .jp-time-wrapper {
display: block;
}
}
.jp-video .jp-seek-bar {
width: 0px;
height: 100%;
cursor: pointer;
}
.jp-video .jp-play-bar {
width: 0px;
height: 10px;
position: relative;
z-index: 9;
background-size: 12px 12px;
background-color: #7d0ecc;
background-repeat: repeat-x;
border-radius: 5px;
background-image: linear-gradient(#981df0, #7d0ecc);
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
}
.jp-video .jp-play-bar span {
position: absolute;
top: -3px;
right: -12px;
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/handle.png) no-repeat center;
width: 16px;
height: 17px;
}
.jp-video .jp-current-time,.jp-video .jp-duration {
font-size: 11px;
font-family: Arial;
color: #444444;
margin-top: 12px;
float: left;
}
.jp-video .jp-current-time {
float: left;
display: inline;
}
.jp-video .jp-duration {
float: left;
display: inline;
text-align: right;
}
.jp-video .jp-current-time {
margin-left: 10px;
}
.jp-video .jp-duration {
margin-right: 10px;
}
.jp-video .time-sep {
float: left;
margin: 13px 3px 0 3px;
font-size: 11px;
font-family: Arial;
color: #444444;
}
.jp-video a.jp-mute,.jp-video a.jp-unmute {
text-indent: -9999px;
float: left;
height: 35px;
outline: none;
}
.jp-video .jp-mute {
float: left;
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/sprite.png) -80px 0 no-repeat;
margin-top: 1px;
margin-left: -10px;
width: 35px;
}
.jp-video a.jp-unmute {
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/sprite.png) -115px 0 no-repeat;
margin-top: 1px;
margin-left: -13px;
display: none;
width: 38px;
}
.jp-video .jp-volume-bar {
float: left;
margin-top: 13px;
margin-right: 10px;
overflow: hidden;
width: 70px;
height: 10px;
cursor: pointer;
background: #706d6d;
border-radius: 5px;
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.jp-video .jp-volume-bar-value {
background: rgba(112, 109, 109, 0.01);
width: 0px;
height: 10px;
position: relative;
}
.jp-video .jp-volume-bar-value span {
position: absolute;
top: 0px;
right: 0px;
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/volume.png) no-repeat center;
width: 11px;
height: 10px;
}
.jp-video .jp-full-screen {
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/sprite.png) -150px 0 no-repeat;
float: left;
width: 40px;
height: 35px;
text-indent: -9999px;
margin-left: -15px;
outline: none;
}
.jp-video .jp-restore-screen {
background: url(http://ld-wp2.template-help.com/novi-builder/brave_v2/projects/template/images/sprite.png) -150px 0 no-repeat;
float: left;
width: 40px;
height: 35px;
text-indent: -9999px;
margin-left: -15px;
outline: none;
}
.jp-video .jp-playlist li {
padding: 3px 0;
}
.jp-video .jp-playlist li.jp-playlist-current a {
color: #ffffff;
}
.jp-video .jp-jplayer {
cursor: pointer;
font-size: 0;
overflow: hidden;
}
.jp-video.jp-video-single .jp-playlist,.jp-video.jp-video-single .jp-gui {
display: none!important;
}
.jp-video {
position: relative;
}
.jp-video:before {
content: '\f4fb';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Material Design Icons';
font-size: 50px;
line-height: 100px;
color: #f2f3f9;
z-index: 1;
pointer-events: none;
border-radius: 50%;
transition: .3s ease-out all;
transform-origin: 50% 50%;
}
.jp-video:hover:before {
color: #d8dae2;
}
@media (min-width: 768px) {
.jp-video:before {
font-size: 70px;
}
}
@media (min-width: 1200px) {
.jp-video:before {
font-size: 100px;
}
}
.jp-video .jp-jplayer img {
display: block!important;
}
.jp-video .jp-jplayer video {
display: none;
}
/*! CSS Used keyframes */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*! CSS Used fontfaces */
@font-face {
font-family:'Oswald';font-style:normal;font-weight:200;src:local('Oswald ExtraLight'), local('Oswald-ExtraLight'), url(https://fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-1h4Tvs9CAZek1wEt.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family:'Oswald';font-style:normal;font-weight:200;src:local('Oswald ExtraLight'), local('Oswald-ExtraLight'), url(https://fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-1h4Ttc9CAZek1wEt.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family:'Oswald';font-style:normal;font-weight:200;src:local('Oswald ExtraLight'), local('Oswald-ExtraLight'), url(https://fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-1h4TtM9CAZek1wEt.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:'Oswald';font-style:normal;font-weight:200;src:local('Oswald ExtraLight'), local('Oswald-ExtraLight'), url(https://fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-1h4Tus9CAZek1w.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Lato';font-style:italic;font-weight:300;src:local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v14/S6u_w4BMUTPHjxsI9w2_FQftx9897sxZ.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:'Lato';font-style:italic;font-weight:300;src:local('Lato Light Italic'), local('Lato-LightItalic'), url(https://fonts.gstatic.com/s/lato/v14/S6u_w4BMUTPHjxsI9w2_Gwftx9897g.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Lato';font-style:normal;font-weight:300;src:local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwaPGQ3q5d0N7w.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:'Lato';font-style:normal;font-weight:300;src:local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Lato';font-style:normal;font-weight:400;src:local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:'Lato';font-style:normal;font-weight:400;src:local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:'Lato';font-style:normal;font-weight:700;src:local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:'Lato';font-style:normal;font-weight:700;src:local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
