{"id":3987,"date":"2015-05-08T23:15:04","date_gmt":"2015-05-08T23:15:04","guid":{"rendered":"https:\/\/themify.me\/demo\/themes\/ultra\/?page_id=3987"},"modified":"2016-10-23T19:39:18","modified_gmt":"2016-10-23T19:39:18","slug":"video-background-2","status":"publish","type":"page","link":"https:\/\/sulaimankhan.com\/index.php\/theme-appearance\/video-background-2\/","title":{"rendered":"Video Background"},"content":{"rendered":"<div id=\"themify_builder_content-3987\" data-postid=\"3987\" class=\"themify_builder_content themify_builder_content-3987 themify_builder themify_builder_front\">\n\n\t\n                <!-- module_row -->\n                <div data-gutter=\"gutter-default\" class=\"themify_builder_row themify_builder_3987_row module_row module_row_0 clearfix gutter-default builder-parallax-scrolling\"                      data-equal-column-height=\"\">\n\n                    \n                    \n                <div class=\"builder_row_cover\" style=\"background-color: rgba(0,0,0, 0.69)\" data-color=\"rgba(0,0,0, 0.69)\" data-hover-color=\"rgba(0,0,0, 0.69)\"><\/div>\n\n                \n                    <div class=\"row_inner_wrapper\">\n                        <div class=\"row_inner\">\n\n                            \n                            \n                                \n                                        <div class=\"col-full first tb-column  tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    <div class=\"themify_builder_sub_row\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclearfix gutter-default  sub_row_0-0-1\" >\n                                                                \n                                                                    <div class=\"col4-1 first sub_column sub_column_0-0-1-0 sub_column_post_3987\" >\n                                                                        \n                                                                        \n                                                                                                                                                    \n                                                                                                                                                    <\/div><div class=\"col4-1 sub_column sub_column_0-0-1-1 sub_column_post_3987\" >\n                                                                        \n                                                                        \n                                                                                                                                                    \n                                                                                                                                                    <\/div><div class=\"col4-2 last sub_column sub_column_0-0-1-2 sub_column_post_3987\" >\n                                                                        \n                                                                        \n                                                                                                                                                    \n    <!-- module feature -->\n    <div id=\"feature-3987-sub_row_0-0-1-2-0\" class=\"module module-feature feature-3987-sub_row_0-0-1-2-0 with-chart layout-icon-left size-medium  \">\n\n        \n        \n        <div class=\"module-feature-image\">\n\n                            <a href=\"https:\/\/www.youtube.com\/watch?v=XgxsUiY_n0w&#038;iframe=true&#038;width=100%&#038;height=100%\" class=\"themify_lightbox\">\n                   \n                <div class=\"module-feature-chart-html5\"\n                    data-progress=\"0\"\n                    data-progress-end=\"100\"\n                    data-bgcolor=\"rgba(0,0,0, 1)\"\n                    data-color=\"rgba(255,255,255, 1.00)\"\n                    data-trackcolor=\"rgba(0,0,0,.1)\"\n                    data-size=\"150\"\n                    data-linewidth=\"3\"\n                    data-animate=\"2000\"\n                    \n                    data-linecap=\"butt\"\n                    data-scalelength=\"0\"\n                    data-rotate=\"0\">\n                    \n                    <div class=\"chart-html5-circle\">\n                        <div class=\"chart-html5-mask chart-html5-full\"><div class=\"chart-html5-fill\"><\/div><\/div>\n                        <div class=\"chart-html5-mask chart-html5-half\"><div class=\"chart-html5-fill\"><\/div><\/div>\n                    <\/div>\n\n                    <div class=\"chart-html5-inset chart-html5-inset-icon\">\n                        \n                                                                                <i class=\"module-feature-icon fa fa-play\" style=\"color: rgba(255,255,255, 1.00)\"><\/i>                        \n                    <\/div>\n                <\/div>\n\n                                <\/a>\n            \n        <\/div>\n\n        <div class=\"module-feature-content\">\n            \n            <h4><br \/>To the Future<\/h4>        <\/div>\n\n            <\/div>\n    <!-- \/module feature -->\n\n    <style>\n            .feature-3987-sub_row_0-0-1-2-0 .module-feature-chart-html5 {\n                width: 150px;\n                height: 150px;\n                -webkit-box-shadow: inset 0 0 0 3px rgba(0,0,0,.1);\n                -moz-box-shadow: inset 0 0 0 3px rgba(0,0,0,.1);\n                -ms-box-shadow: inset 0 0 0 3px rgba(0,0,0,.1);\n                -o-box-shadow: inset 0 0 0 3px rgba(0,0,0,.1);\n                box-shadow: inset 0 0 0 3px rgba(0,0,0,.1);\n            }\n            .feature-3987-sub_row_0-0-1-2-0 .module-feature-chart-html5 .chart-html5-circle .chart-html5-mask,\n            .feature-3987-sub_row_0-0-1-2-0 .module-feature-chart-html5 .chart-html5-circle .chart-html5-fill {\n                width: 150px;\n                height: 150px;\n                -webkit-transition: all 2000ms ease 0s;\n                -moz-transition: all 2000ms ease 0s;\n                -ms-transition: all 2000ms ease 0s;\n                -o-transition: all 2000ms ease 0s;\n                transition: all 2000ms ease 0s;\n            }\n            .feature-3987-sub_row_0-0-1-2-0 .module-feature-chart-html5 .chart-html5-circle .chart-html5-mask {\n                border-radius: 0 75px 75px 0;\n                clip: rect(0px, 150px, 150px, 75px);\n            }\n            .feature-3987-sub_row_0-0-1-2-0 .module-feature-chart-html5 .chart-html5-circle .chart-html5-fill {\n                border-radius: 75px 0 0 75px;\n            }\n            .feature-3987-sub_row_0-0-1-2-0 .module-feature-chart-html5 .chart-html5-circle .chart-html5-mask .chart-html5-fill {\n                clip: rect(0px, 75px, 150px, 0px);\n                -webkit-box-shadow: inset 0 0 0 3px rgba(255,255,255, 1.00);\n                -moz-box-shadow: inset 0 0 0 3px rgba(255,255,255, 1.00);\n                -ms-box-shadow: inset 0 0 0 3px rgba(255,255,255, 1.00);\n                -o-box-shadow: inset 0 0 0 3px rgba(255,255,255, 1.00);\n                box-shadow: inset 0 0 0 3px rgba(255,255,255, 1.00);\n            }\n            .feature-3987-sub_row_0-0-1-2-0 .module-feature-chart-html5 .chart-html5-inset {\n                background-color: ;\n            }\n        <\/style>\n\n                                                                                                                                                    <\/div><\/div>\n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                    \n                                    \n                                \n                            <\/div>\n                            <!-- \/row_inner -->\n                        <\/div>\n                        <!-- \/row_inner_wrapper -->\n                    <\/div>\n                    <!-- \/module_row -->\n                    \n\n                <!-- module_row -->\n                <div data-gutter=\"gutter-default\" class=\"themify_builder_row themify_builder_3987_row module_row module_row_1 clearfix gutter-default\"                      data-equal-column-height=\"\">\n\n                    \n                    \n                    <div class=\"row_inner_wrapper\">\n                        <div class=\"row_inner\">\n\n                            \n<!-- .themify_builder_3987_row.module_row_1 Style -->\n<style type=\"text\/css\" >\n.themify_builder_3987_row.module_row_1.module_row {\n\tbackground-color: #0069D2;\n\tcolor: #ffffff;\n\tpadding-top : 8%;\n\tpadding-bottom : 8%\n}\n.themify_builder_3987_row.module_row_1.module_row h1 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_1.module_row h2 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_1.module_row h3:not(.module-title) {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_1.module_row h4 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_1.module_row h5 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_1.module_row h6 {\n\tcolor: #ffffff\n}\n<\/style>\n<!-- End .themify_builder_3987_row.module_row_1 Style -->\n\n                            \n                                \n                                        <div class=\"col3-1 first tb-column  tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    \n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                        <div class=\"col3-1 middle tb-column  tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    \n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                        <div class=\"col3-1 last tb-column  tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    \n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                    \n                                    \n                                \n                            <\/div>\n                            <!-- \/row_inner -->\n                        <\/div>\n                        <!-- \/row_inner_wrapper -->\n                    <\/div>\n                    <!-- \/module_row -->\n                    \n\n                <!-- module_row -->\n                <div data-gutter=\"gutter-default\" class=\"themify_builder_row themify_builder_3987_row module_row module_row_2 clearfix gutter-default builder-parallax-scrolling fullheight\"                      data-equal-column-height=\"\">\n\n                    \n                    \n                    <div class=\"row_inner_wrapper\">\n                        <div class=\"row_inner\">\n\n                            \n<!-- .themify_builder_3987_row.module_row_2 Style -->\n<style type=\"text\/css\" >\n.themify_builder_3987_row.module_row_2.module_row {\n\tbackground-image: url(https:\/\/themify.me\/demo\/themes\/landing\/files\/2015\/03\/exterior-fw-05.jpg);\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_2.module_row h1 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_2.module_row h2 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_2.module_row h3:not(.module-title) {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_2.module_row h4 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_2.module_row h5 {\n\tcolor: #ffffff\n}\n.themify_builder_3987_row.module_row_2.module_row h6 {\n\tcolor: #ffffff\n}\n<\/style>\n<!-- End .themify_builder_3987_row.module_row_2 Style -->\n\n                            \n                                \n                                        <div class=\"col-full first tb-column  tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    \n<!-- module text -->\n<div id=\"text-3987-2-0-1\" class=\"module module-text text-3987-2-0-1   \">\n\t\n\t\n\t<h1 style=\"text-align: center;\">Impressive Design without Compromise<\/h1>\n\t<\/div>\n<!-- \/module text --><style type=\"text\/css\">.themify_builder .text-3987-2-0-1.module-text { background-color: #000000; background-color: rgba(0,0,0, 0.45); padding-top: 15px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px;  } \n<\/style>\n\n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                    \n                                    \n                                \n                            <\/div>\n                            <!-- \/row_inner -->\n                        <\/div>\n                        <!-- \/row_inner_wrapper -->\n                    <\/div>\n                    <!-- \/module_row -->\n                    \n\n                <!-- module_row -->\n                <div data-gutter=\"gutter-default\" class=\"themify_builder_row themify_builder_3987_row module_row module_row_3 clearfix gutter-default\"                      data-equal-column-height=\"\">\n\n                    \n                    \n                    <div class=\"row_inner_wrapper\">\n                        <div class=\"row_inner\">\n\n                            \n<!-- .themify_builder_3987_row.module_row_3 Style -->\n<style type=\"text\/css\" >\n.themify_builder_3987_row.module_row_3.module_row {\n\tpadding-top : 8%;\n\tpadding-bottom : 6%\n}\n<\/style>\n<!-- End .themify_builder_3987_row.module_row_3 Style -->\n\n                            \n                                \n                                        <div class=\"col-full first tb-column  tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    \n<!-- module slider image -->\n<div id=\"slider-3987-3-0-1-loader\" class=\"themify_builder_slider_loader\" style=\"height:50px;\"><\/div>\n<div id=\"slider-3987-3-0-1\" class=\"module module-slider slider-3987-3-0-1 themify_builder_slider_wrap clearfix  slider-agency \">\n\n\t\n\t<ul class=\"themify_builder_slider\" \n\t\tdata-id=\"slider-3987-3-0-1\" \n\t\tdata-visible=\"1\" \n\t\tdata-scroll=\"1\" \n\t\tdata-auto-scroll=\"4\"\n\t\tdata-speed=\"1\"\n\t\tdata-wrap=\"yes\"\n\t\tdata-arrow=\"yes\"\n\t\tdata-pagination=\"yes\"\n\t\tdata-effect=\"scroll\" \n\t\tdata-height=\"variable\" \n\t\tdata-pause-on-hover=\"resume\" >\n\t\t\n\t\t\t\t<li style=\" \">\n\t\t\t\t\t\t<div class=\"slide-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themify.me\/demo\/themes\/landing\/files\/2015\/03\/4-wheel-01.jpg\" width=\"800\" alt=\"Efficiency \" \/>\t\t\t\t\t\t\t<\/div>\n\t\t\t<!-- \/slide-image -->\n\t\t\t\n\t\t\t\t\t\t<div class=\"slide-content\">\n\t\t\t\t\t\t\t\t<h3 class=\"slide-title\">\n\t\t\t\t\t\t\t\t\t\tEfficiency &amp; Dyamics\t\t\t\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\n\t\t\t\t<em>An Athlete in Top Form<\/em>\n\n<ul>\n <li>Aerodynamic Design<\/li>\n <li>Aerodynamic Features<\/li>\n <li>Intelligent Lightweight Construction<\/li>\n<\/ul>\t\t\t<\/div>\n\t\t\t<!-- \/slide-content -->\n\t\t\t\t\t<\/li>\n\t\t\t\t<li style=\" \">\n\t\t\t\t\t\t<div class=\"slide-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themify.me\/demo\/themes\/landing\/files\/2015\/03\/visions-01.jpg\" width=\"800\" alt=\"Design\" \/>\t\t\t\t\t\t\t<\/div>\n\t\t\t<!-- \/slide-image -->\n\t\t\t\n\t\t\t\t\t\t<div class=\"slide-content\">\n\t\t\t\t\t\t\t\t<h3 class=\"slide-title\">\n\t\t\t\t\t\t\t\t\t\tDesign\t\t\t\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\n\t\t\t\t<em>Time for a new ideal<\/em>\n\n<ul>\n <li>Ambient Light<\/li>\n <li>Sustainable Materials<\/li>\n <li>Exterior Colours<\/li>\n <li>Scissor Doors<\/li>\n<\/ul>\t\t\t<\/div>\n\t\t\t<!-- \/slide-content -->\n\t\t\t\t\t<\/li>\n\t\t\t\t<li style=\" \">\n\t\t\t\t\t\t<div class=\"slide-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/themify.me\/demo\/themes\/landing\/files\/2015\/03\/service-inclusive.jpg\" width=\"800\" alt=\"Safety\" \/>\t\t\t\t\t\t\t<\/div>\n\t\t\t<!-- \/slide-image -->\n\t\t\t\n\t\t\t\t\t\t<div class=\"slide-content\">\n\t\t\t\t\t\t\t\t<h3 class=\"slide-title\">\n\t\t\t\t\t\t\t\t\t\tSafety\t\t\t\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t\n\t\t\t\t<em>Innovations that you can trust<\/em>\n\n<ul>\n <li>Charging Assistant<\/li>\n <li>BMW TeleServices<\/li>\n <li>Mobility Assistance<\/li>\n <li>Maintenance and Repair Packages<\/li>\n<\/ul>\t\t\t<\/div>\n\t\t\t<!-- \/slide-content -->\n\t\t\t\t\t<\/li>\n\t\t\t<\/ul>\n\t<!-- \/themify_builder_slider -->\n\n<\/div>\n<!-- \/module slider image -->\n\n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                    \n                                    \n                                \n                            <\/div>\n                            <!-- \/row_inner -->\n                        <\/div>\n                        <!-- \/row_inner_wrapper -->\n                    <\/div>\n                    <!-- \/module_row -->\n                    \n\n                <!-- module_row -->\n                <div data-gutter=\"gutter-default\" class=\"themify_builder_row themify_builder_3987_row module_row module_row_4 clearfix gutter-default\"                      data-equal-column-height=\"\">\n\n                    \n                    \n                    <div class=\"row_inner_wrapper\">\n                        <div class=\"row_inner\">\n\n                            \n<!-- .themify_builder_3987_row.module_row_4 Style -->\n<style type=\"text\/css\" >\n.themify_builder_3987_row.module_row_4.module_row {\n\tbackground-color: #edebf0;\n\tcolor: #72747d;\n\tpadding-top : 8%;\n\tpadding-bottom : 6%\n}\n.themify_builder_3987_row.module_row_4.module_row a {\n\tcolor: #000000\n}\n.themify_builder_3987_row.module_row_4.module_row h1 {\n\tcolor: #72747d\n}\n.themify_builder_3987_row.module_row_4.module_row h2 {\n\tcolor: #72747d\n}\n.themify_builder_3987_row.module_row_4.module_row h3:not(.module-title) {\n\tcolor: #72747d\n}\n.themify_builder_3987_row.module_row_4.module_row h4 {\n\tcolor: #72747d\n}\n.themify_builder_3987_row.module_row_4.module_row h5 {\n\tcolor: #72747d\n}\n.themify_builder_3987_row.module_row_4.module_row h6 {\n\tcolor: #72747d\n}\n<\/style>\n<!-- End .themify_builder_3987_row.module_row_4 Style -->\n\n                            \n                                \n                                        <div class=\"col4-2 first tb-column  tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    \n<!-- module text -->\n<div id=\"text-3987-4-0-1\" class=\"module module-text text-3987-4-0-1   \">\n\t\n\t\n\t<h3>Track Race Test<\/h3><p>The animation done on the right was through the use of the <a href=\"https:\/\/themify.me\/addons\/progress-bar\">Progress Bar Addon<\/a>. Create your own progress bar now. See our demo page for the Progress Bar addon <a href=\"https:\/\/themify.me\/demo\/themes\/addons\/demo\/progress-bar\/\">here<\/a>.<\/p>\n\t<\/div>\n<!-- \/module text -->\n\n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                        <div class=\"col4-2 last tb-column empty-column tb_3987_column module_column\" >\n\n                                            \n                                            \n                                            <div class=\"tb-column-inner\">\n\n                                                \n                                                \n                                                    &nbsp;\n                                                    <\/div>\n                                                    <!-- \/.tb-column-inner -->\n                                                                                                <\/div>\n                                            <!-- \/.tb-column -->\n                                        \n                                    \n                                    \n                                \n                            <\/div>\n                            <!-- \/row_inner -->\n                        <\/div>\n                        <!-- \/row_inner_wrapper -->\n                    <\/div>\n                    <!-- \/module_row -->\n                    \n<\/div>\n<!-- \/themify_builder_content -->","protected":false},"excerpt":{"rendered":"<p>Impressive Design without Compromise<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3420,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-3987","page","type-page","status-publish","hentry","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author"],"_links":{"self":[{"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/pages\/3987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/comments?post=3987"}],"version-history":[{"count":1,"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/pages\/3987\/revisions"}],"predecessor-version":[{"id":5081,"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/pages\/3987\/revisions\/5081"}],"up":[{"embeddable":true,"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/pages\/3420"}],"wp:attachment":[{"href":"https:\/\/sulaimankhan.com\/index.php\/wp-json\/wp\/v2\/media?parent=3987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}