Файл: 1. Анализ предметной области webсайт студии видеографии 7.docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 25.10.2023
Просмотров: 195
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
СОДЕРЖАНИЕ
1. Анализ предметной области – web-сайт студии видеографии
Для воспроизведения видео и анимации используется технология Macromedia Flash компании Adobe.
Основные достоинства Flash технологии:
Так же хотелось бы отметить дополнительные плюсы данной технологии:
3. Свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц).
Явных или значительных минусов в данной технологии найти не удалось.
ния, что задачи были выполнены системой успешно либо по каким-то причинам не выполнены.
Верхняя навигационная панель позволяет осуществить доступ к любому разделу сайта и всегда остается доступной при переходе в тот или иной раздел, что позволяет пользователю «не заблудиться», если он на сайте впервые. (рис. 2.7)
Рисунок 2.7 - Пример перехода в разделы сайта
2.5 Использование Flash технологии
- устранение проблем совместимости между браузерами;
- мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать; - Flash имеет автоматическую поддержку anti-aliasing (сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз; На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователям Сети просматривать страницы с Flash содержимым. Подключаемые модули распространяются бесплатно.
1. Возможно построение универсального сервера.
2. Легко переносится часть логики с серверной на клиентскую часть.
Для написания кода сайта были использованы:
HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), ещё с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.
Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.
В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы
Пример использования CSS для режима совместимости на IPAD
/*!
* Bootstrap v3.1.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
.container{width: 100%; min-height: 160px; padding-top: 20px; margin: 0 auto;}
.container2{padding-top: 0;}
.wrapper2{position: relative; min-height: 680px; height: auto !important; height: 100%; width: 100%; margin:0 auto 0 auto; /* отрицательный нижний отступ на высоту футера */ padding: 0;}
.left-col{width: 35%; min-height: 160px; float: left;}
.center-col{width: 330px; min-height: 160px; margin: 0 auto;}
.right-col{width: 35%; min-height: 160px; float: right;}
.left-col .fs1{font-size: 0 !important;}
.left-col .fs1-first{font-size: 14px !important;}
.adaptive_menu_0_rev{display: none !important;}
.adaptive_menu_1_rev{display: none !important;}
.adaptive_menu_2_rev{display: none !important;}
.adaptive_menu_3_rev{display: block !important;}
.adaptive_menu_0{display: block !important;}
.adaptive_menu_1{display: block !important;}
.adaptive_menu_2{display: block !important;}
.adaptive_menu_3{display: none !important;}
.logo{width: 200px; height: 140px; background: url('../images/logo.svg') 0px 0 no-repeat; background-size: 100%; margin: 18px auto 0 auto}
.right-col .fs21{margin-left: 10px !important;}
.vimeo{height: 300px;}
.carousel-indicators{bottom: -120px;}
.carousel-indicators li{width: 83px; height: 46px;}
#button_1, #button_2, #button_3, #button_4{height: 480px !important;}
.wrapper2{min-height: 300px !important}
.text_menu_town{float: left; max-width: 80px;}
.carousel-control{display: none;}
.vimeo{width: 48%; height: 200px; float: left; margin: 1%;}
.carousel-indicators{display: none;}
.carousel-inner > .item{display: block;}
#button_1, #button_2, #button_3, #button_4{height: 100% !important; min-height: 300px;}
Приложение 3
Пример использования CSS для режима совместимости на IPhone
/*!
* Bootstrap v3.1.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
header.container{display: none;}
.iphone_top_menu{display: block; position: fixed; z-index: 5; top: 0; left: 0px; width: 100%; height: 50px; background: #365457;}
body{padding-top: 50px;}
h4.panel-title {margin: 0;}
h4.panel-title i.glyphicon{top: 0px;}
.adaptive_menu_0{display: block !important;}
.adaptive_menu_1{display: block !important;}
.adaptive_menu_2{display: block !important;}
.adaptive_menu_3{display: block !important;}
.navbar-inner{ -webkit-box-shadow: 0 3px 3px rgba(54, 84, 87, 0.175); box-shadow: 0 3px 3px rgba(54, 84, 87, 0.175); }
.glyphicon-th-list{
top: 9px;
left: 270px;
font-size: 30px;
}
.glyphicon-th-list:focus{
color: #FF8763;
}
.btn-top-menu{
border-radius: 3px;
border: 1px solid #fffaf5;
background: #365457;
}
.sr-only{position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
.navbar-toggle:focus{border: 1px solid #FF8763;}
.ui-btn-active .icon-bar{background: #FF8763 !important;}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background: #fffaf5;
border-radius: 1px;
}
.navbar-toggle {
position: relative;
float: left;
padding: 9px 10px;
margin-top: 8px;
margin-left: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid #fffaf5;
border-radius: 4px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal-dialog {
position: relative;
width: 250px;
margin: 0px;
}
.modal-content {
background: url(../images/bgmenu_phone.jpg) -25px ;
position: relative;
background-size: cover ;
background-color: #FFFAF5;
background-clip: padding-box;
border-right: 0px solid #999;
border-right: 0px solid rgba(0, 0, 0, .2);
border-left: 0px solid #999;
border-left: 0px solid rgba(0, 0, 0, .2);
border-radius: 0px;
min-height: 568px;
width: 250px;
outline: none;
-webkit-box-shadow: inset -3px 0px 9px rgba(0,0,0,0.5);
-moz-box-shadow: inset -3px 0px 9px rgba(0,0,0,0.5);
box-shadow: inset -3px 0px 9px rgba(0,0,0,0.5);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=00);
opacity: .0;
}
.modal-header {
min-height: 16.42857143px;
margin: 0px 20px;
border-bottom: 2px solid rgba(255,250,245,0.3);
}
.modal-header .close {
margin-top: -2px;
}
.modal-header h3{color: #FFFAF5;}
.modal-header h4{color: #FFFAF5;}
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.modal-body {
position: relative;
padding: 20px;
}
.modal-body ul{ margin: 0; padding: 0; list-style: none;}
.modal-body ul li{border-bottom: 1px solid rgba(255,250,245,0.3);}
.modal-body ul li:last-child{border-bottom: 0;}
.modal-body ul li a{color: #FFFAF5 !important}
.modal-body ul li a:hover{color: #FF8763 !important}
.modal-body ul li{color: #FFFAF5;line-height: 26px; }
.modal-body ul li a{padding: 5px 0;color: #FFFAF5;}
.modal-body ul li a p{color: #FFFAF5;}
.modal-footer {
margin: 19px 20px 20px;
padding-top: 15px;
text-align: right;
border-top: 2px solid #375458;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
html, body{min-width: 320px !important;}
.container{width: 100%; min-height: 160px; padding-top: 20px; margin: 0 auto;}
.container2{padding-top: 0px;}
.wrapper2{position: relative; min-height: 680px; height: auto !important; height: 100%; width: 100%; margin:0 auto 0 auto; /* отрицательный нижний отступ на высоту футера */ padding: 0;}
.logo{width: 200px; height: 140px; background: url('../images/logo.svg') 0px 0 no-repeat; background-size: 100%; margin: 18px auto 0 auto}
.right-col .fs21{margin-left: 10px !important;}
.vimeo{height: 300px;}
.carousel-indicators{bottom: -120px;}
.carousel-indicators li{width: 83px; height: 61px;}
#button_1, #button_2, #button_3, #button_4{height: 100% !important; min-height: 300px;}
.wrapper2{min-height: 300px !important}
.text_menu_town{float: left; max-width: 80px;}
.content-wrapper{width: 320px;}
.packet{width: 320px; height: 100% !important; margin-bottom: 20px;}
.border_in_packet-dotted_2{width: 300px;}
.left_col_row_4{width: 240px; font-size: 12px;}
.left_col_row_4 ul{padding-left: 20px;}
.content-row_4 ul li{font-size: 12px;}
.right_col_row_4{width: 80px; font-size: 12px;}
.right_col_row_4 ul li h4{ font-size: 12px;}
.right_col_row_5{width: 100px;}
.right_col_row_5 ul li{height: 17.5px;}
.right_col_row_5 ul li h4{font-size: 12px;}
.left_col_row_5 ul{padding-left: 10px;}
.left_col_row_5{width: 185px;}
.hour_text{font-size: 11px;}
.packet_7{width: 290px; padding: 15px 0;}
.content-row_4 ul li{list-style: none;}
.border_in_packet-solid_2{width: 180px;}
.myForm{width: 300px;}
.carousel-control{display: none;}
.vimeo{width: 100%; height: 200px;}
.carousel-indicators{display: none;}
.carousel-inner > .item{display: block;}
footer .bordertop{display: none;}
.pad_t10{padding-top: 10px;}
.content-row_4{display: none !important;}
.logo2 {
width: 33px;
height: 28px;
background: url('../images/logo2.svg') 0px 0 no-repeat;
background-size: 100%;
margin: 2px 5px 0 0;
display: inline-block;
float: left;
}
.bg, .iphone_top_menu {
-webkit-box-shadow: -1px 0px 5px rgba(0, 0, 0, .5);
box-shadow: -1px 0px 5px rgba(0, 0, 0, .5);}
.bg{position: relative;}
.bg{ left: 0;
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;}
.iphone_top_menu{ left: 0;
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;}
.player .sidedock button{font-size: 0 !important;}
.modal{opacity: 1; overflow-y: hidden;}
.modal-open .bg{}
.vra{
/*width: 0px;*/
position: relative;
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;}
.modal-open .vra{
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;
}
.activeLink a{color: #FF8763 !important;}
.iphone{display: block !important;}
.imac{display: none !important;}
.carousel-inner > .next, .carousel-inner > .prev{
position: relative;
}
.wrapper2{padding-top: 50px !important ;}
.ui-content{
/*margin-top: 50px !important; */
}
#button_8{
width: 100%;
padding: 10px;
}
Верхняя навигационная панель позволяет осуществить доступ к любому разделу сайта и всегда остается доступной при переходе в тот или иной раздел, что позволяет пользователю «не заблудиться», если он на сайте впервые. (рис. 2.7)
Рисунок 2.7 - Пример перехода в разделы сайта
2.5 Использование Flash технологии
Для воспроизведения видео и анимации используется технология Macromedia Flash компании Adobe.
Основные достоинства Flash технологии:
- маленький размер получающихся файлов и, соответственно, более быстрая загрузка из сети. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы, (которые также могут использоваться в страницах Flash), что очень положительно влияет на уменьшение размера страницы и время ее скачивания;- устранение проблем совместимости между браузерами;
- мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать; - Flash имеет автоматическую поддержку anti-aliasing (сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз; На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователям Сети просматривать страницы с Flash содержимым. Подключаемые модули распространяются бесплатно.
Так же хотелось бы отметить дополнительные плюсы данной технологии:
1. Возможно построение универсального сервера.
2. Легко переносится часть логики с серверной на клиентскую часть.
3. Свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц).
Явных или значительных минусов в данной технологии найти не удалось.
Дизайн инфографики был выполнен в программе Adobe Photoshop CS5 от той же компании Adobe (рис. 2.8)
Рисунок 2.8 - Рабочее поле программы Adobe Photoshop CS5
2.6 Выбор и описание средств написания кода
Для написания кода сайта были использованы:
HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML. Хотя стандарт был завершён (рекомендованная версия к использованию) только в 2014 году (предыдущая, четвёртая, версия опубликована в 1999 году), ещё с 2013 года браузерами оперативно осуществлялась поддержка, а разработчиками — использование рабочего стандарта (англ. HTML Living Standard). Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека и простоты анализа для парсеров.
Во всемирной паутине долгое время использовались стандарты HTML 4.01, XHTML 1.0 и XHTML 1.1. Веб-страницы на практике оказывались свёрстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приёмов. HTML5 был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единый API для сложных веб-приложений.
В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы
Ваше сообщение отправленно
Пример использования CSS для режима совместимости на IPAD
/*!
* Bootstrap v3.1.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
.container{width: 100%; min-height: 160px; padding-top: 20px; margin: 0 auto;}
.container2{padding-top: 0;}
.wrapper2{position: relative; min-height: 680px; height: auto !important; height: 100%; width: 100%; margin:0 auto 0 auto; /* отрицательный нижний отступ на высоту футера */ padding: 0;}
.left-col{width: 35%; min-height: 160px; float: left;}
.center-col{width: 330px; min-height: 160px; margin: 0 auto;}
.right-col{width: 35%; min-height: 160px; float: right;}
.left-col .fs1{font-size: 0 !important;}
.left-col .fs1-first{font-size: 14px !important;}
.adaptive_menu_0_rev{display: none !important;}
.adaptive_menu_1_rev{display: none !important;}
.adaptive_menu_2_rev{display: none !important;}
.adaptive_menu_3_rev{display: block !important;}
.adaptive_menu_0{display: block !important;}
.adaptive_menu_1{display: block !important;}
.adaptive_menu_2{display: block !important;}
.adaptive_menu_3{display: none !important;}
.logo{width: 200px; height: 140px; background: url('../images/logo.svg') 0px 0 no-repeat; background-size: 100%; margin: 18px auto 0 auto}
.right-col .fs21{margin-left: 10px !important;}
.vimeo{height: 300px;}
.carousel-indicators{bottom: -120px;}
.carousel-indicators li{width: 83px; height: 46px;}
#button_1, #button_2, #button_3, #button_4{height: 480px !important;}
.wrapper2{min-height: 300px !important}
.text_menu_town{float: left; max-width: 80px;}
.carousel-control{display: none;}
.vimeo{width: 48%; height: 200px; float: left; margin: 1%;}
.carousel-indicators{display: none;}
.carousel-inner > .item{display: block;}
#button_1, #button_2, #button_3, #button_4{height: 100% !important; min-height: 300px;}
Приложение 3
Пример использования CSS для режима совместимости на IPhone
/*!
* Bootstrap v3.1.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
header.container{display: none;}
.iphone_top_menu{display: block; position: fixed; z-index: 5; top: 0; left: 0px; width: 100%; height: 50px; background: #365457;}
body{padding-top: 50px;}
h4.panel-title {margin: 0;}
h4.panel-title i.glyphicon{top: 0px;}
.adaptive_menu_0{display: block !important;}
.adaptive_menu_1{display: block !important;}
.adaptive_menu_2{display: block !important;}
.adaptive_menu_3{display: block !important;}
.navbar-inner{ -webkit-box-shadow: 0 3px 3px rgba(54, 84, 87, 0.175); box-shadow: 0 3px 3px rgba(54, 84, 87, 0.175); }
.glyphicon-th-list{
top: 9px;
left: 270px;
font-size: 30px;
}
.glyphicon-th-list:focus{
color: #FF8763;
}
.btn-top-menu{
border-radius: 3px;
border: 1px solid #fffaf5;
background: #365457;
}
.sr-only{position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
.navbar-toggle:focus{border: 1px solid #FF8763;}
.ui-btn-active .icon-bar{background: #FF8763 !important;}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background: #fffaf5;
border-radius: 1px;
}
.navbar-toggle {
position: relative;
float: left;
padding: 9px 10px;
margin-top: 8px;
margin-left: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid #fffaf5;
border-radius: 4px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal-dialog {
position: relative;
width: 250px;
margin: 0px;
}
.modal-content {
background: url(../images/bgmenu_phone.jpg) -25px ;
position: relative;
background-size: cover ;
background-color: #FFFAF5;
background-clip: padding-box;
border-right: 0px solid #999;
border-right: 0px solid rgba(0, 0, 0, .2);
border-left: 0px solid #999;
border-left: 0px solid rgba(0, 0, 0, .2);
border-radius: 0px;
min-height: 568px;
width: 250px;
outline: none;
-webkit-box-shadow: inset -3px 0px 9px rgba(0,0,0,0.5);
-moz-box-shadow: inset -3px 0px 9px rgba(0,0,0,0.5);
box-shadow: inset -3px 0px 9px rgba(0,0,0,0.5);
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=00);
opacity: .0;
}
.modal-header {
min-height: 16.42857143px;
margin: 0px 20px;
border-bottom: 2px solid rgba(255,250,245,0.3);
}
.modal-header .close {
margin-top: -2px;
}
.modal-header h3{color: #FFFAF5;}
.modal-header h4{color: #FFFAF5;}
.modal-title {
margin: 0;
line-height: 1.42857143;
}
.modal-body {
position: relative;
padding: 20px;
}
.modal-body ul{ margin: 0; padding: 0; list-style: none;}
.modal-body ul li{border-bottom: 1px solid rgba(255,250,245,0.3);}
.modal-body ul li:last-child{border-bottom: 0;}
.modal-body ul li a{color: #FFFAF5 !important}
.modal-body ul li a:hover{color: #FF8763 !important}
.modal-body ul li{color: #FFFAF5;line-height: 26px; }
.modal-body ul li a{padding: 5px 0;color: #FFFAF5;}
.modal-body ul li a p{color: #FFFAF5;}
.modal-footer {
margin: 19px 20px 20px;
padding-top: 15px;
text-align: right;
border-top: 2px solid #375458;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
html, body{min-width: 320px !important;}
.container{width: 100%; min-height: 160px; padding-top: 20px; margin: 0 auto;}
.container2{padding-top: 0px;}
.wrapper2{position: relative; min-height: 680px; height: auto !important; height: 100%; width: 100%; margin:0 auto 0 auto; /* отрицательный нижний отступ на высоту футера */ padding: 0;}
.logo{width: 200px; height: 140px; background: url('../images/logo.svg') 0px 0 no-repeat; background-size: 100%; margin: 18px auto 0 auto}
.right-col .fs21{margin-left: 10px !important;}
.vimeo{height: 300px;}
.carousel-indicators{bottom: -120px;}
.carousel-indicators li{width: 83px; height: 61px;}
#button_1, #button_2, #button_3, #button_4{height: 100% !important; min-height: 300px;}
.wrapper2{min-height: 300px !important}
.text_menu_town{float: left; max-width: 80px;}
.content-wrapper{width: 320px;}
.packet{width: 320px; height: 100% !important; margin-bottom: 20px;}
.border_in_packet-dotted_2{width: 300px;}
.left_col_row_4{width: 240px; font-size: 12px;}
.left_col_row_4 ul{padding-left: 20px;}
.content-row_4 ul li{font-size: 12px;}
.right_col_row_4{width: 80px; font-size: 12px;}
.right_col_row_4 ul li h4{ font-size: 12px;}
.right_col_row_5{width: 100px;}
.right_col_row_5 ul li{height: 17.5px;}
.right_col_row_5 ul li h4{font-size: 12px;}
.left_col_row_5 ul{padding-left: 10px;}
.left_col_row_5{width: 185px;}
.hour_text{font-size: 11px;}
.packet_7{width: 290px; padding: 15px 0;}
.content-row_4 ul li{list-style: none;}
.border_in_packet-solid_2{width: 180px;}
.myForm{width: 300px;}
.carousel-control{display: none;}
.vimeo{width: 100%; height: 200px;}
.carousel-indicators{display: none;}
.carousel-inner > .item{display: block;}
footer .bordertop{display: none;}
.pad_t10{padding-top: 10px;}
.content-row_4{display: none !important;}
.logo2 {
width: 33px;
height: 28px;
background: url('../images/logo2.svg') 0px 0 no-repeat;
background-size: 100%;
margin: 2px 5px 0 0;
display: inline-block;
float: left;
}
.bg, .iphone_top_menu {
-webkit-box-shadow: -1px 0px 5px rgba(0, 0, 0, .5);
box-shadow: -1px 0px 5px rgba(0, 0, 0, .5);}
.bg{position: relative;}
.bg{ left: 0;
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;}
.iphone_top_menu{ left: 0;
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;}
.player .sidedock button{font-size: 0 !important;}
.modal{opacity: 1; overflow-y: hidden;}
.modal-open .bg{}
.vra{
/*width: 0px;*/
position: relative;
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;}
.modal-open .vra{
-webkit-transition: linear 0.15s;
-moz-transition: linear 0.15s;
-ms-transition: linear 0.15s;
-o-transition: linear 0.15s;
transition: linear 0.15s;
}
.activeLink a{color: #FF8763 !important;}
.iphone{display: block !important;}
.imac{display: none !important;}
.carousel-inner > .next, .carousel-inner > .prev{
position: relative;
}
.wrapper2{padding-top: 50px !important ;}
.ui-content{
/*margin-top: 50px !important; */
}
#button_8{
width: 100%;
padding: 10px;
}