/**
* Name: layout.css
*
* Styling for the layout of the pages - header, footer, page sections etc.
*
* T.O.C
*
* =Page Loader
* =Wrap
* =Header Top
* =Header
* =Logo
* =Menu
* =Menu Basics
* =Menu Skin
* =DropDown
* =Mega Menu Section
* =Menu Arrows
* =Mobile Menu
* =Mobile menu trigger
* =Custom search form
* =Shopping Cart Item
* =Sticky Header
* =Content
* =Page Header
* =Fullwidth Section
* =Footer Top
* =Footer
* =Footer Bottom
* =Back to top
* =Misc
*
*/
/* ==========================================================================
=Page Loader
========================================================================== */
.page-loader {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999999;
background-color: #000000;
}
.loader {
width: 60px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bounce-1, .bounce-2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* border-radius: 50%; */
background-color: #66A1F1;
opacity: 0.6;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.bounce-2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@keyframes bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
/* ==========================================================================
=Wrap
========================================================================== */
#wrap {
position: relative;
background-color: #fff;
}
@media (max-width: 767px) {
#wrap {}
}
/* ==========================================================================
=Header Wrap
========================================================================== */
.header-style-3 #header-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 30;
}
#header-wrap .container-fluid { padding: 0 40px; }
@media (min-width: 768px) and (max-width: 991px) {
.header-style-3 #header-wrap { position: relative; }
#header-wrap .container-fluid { padding: 0 25px; }
}
@media (max-width: 767px) {
.header-style-3 #header-wrap { position: relative; }
#header-wrap .container-fluid { padding: 0 15px; }
.container-fluid {}
}
/* ==========================================================================
=Header Top
========================================================================== */
#header-top {
background-color: #66A1F1;
color: #ffffff;
}
#header-top a { color: inherit; }
@media (max-width: 767px) {
#header-top {}
}
/* ==========================================================================
=Header
========================================================================== */
#header {
margin: 0 auto;
background-color: #272727;
}
.header-style-2 #header { background-color: #ffffff; }
.header-style-3 #header {
border-bottom: 1px solid rgba(255,255,255,0.25);
background-color: transparent;
}
@media (max-width: 991px) {
.header-style-3 #header { background-color: #272727; }
}
/* ==========================================================================
=Logo
========================================================================== */
#logo {
padding: 8px 0 4px 0;
}
/**
* 1. we need the to be only the size of it's child ![]()
element
* 2. it shouldn't extend beyond the size of it's parent if it's child ![]()
is very large e.g 1000x1000 px
*/
#logo a {
display: inline-block; /* 1 */
max-width: 100%; /* 2 */
}
#logo img {
height: 68px;
display: block;
}
@media (max-width: 767px) {
/**
* 1. on mobile devices logo padding right needs to be the width of the
* mobile menu trigger + some spacing so as to not let the logo
* overlap the mobile menu trigger
*/
#logo {
padding-right: 40px; /* 1 */
display: inline-block;
position: relative;
z-index: 999999999;
}
}
/* ==========================================================================
=Menu
========================================================================== */
/* =Menu Basics
========================================================================== */
.sf-menu,
.sf-menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.sf-menu li { margin-bottom: 0; }
.sf-menu > li { float: left; }
.sf-menu > li > a {
position: relative;
display: block;
-webkit-transition: none;
transition: none;
}
/**
* 1. z-index is 1025 because the sticky menu is 1020
*/
.sf-menu .sf-mega,
.sf-menu li.dropdown ul {
position: absolute;
z-index: 1025; /* 1 */
/*top: 100%;*/
left: 0;
display: none;
}
.sf-menu li:last-child ul {
right: 0;
left: auto;
}
.sf-menu li.dropdown { position: relative; }
.sf-menu li.dropdown ul ul {
top: -2px;
left: 100%;
}
.sf-menu li:last-child ul ul {
left: auto;
right: 100%;
}
.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega,
.sf-menu li.dropdown:hover > ul,
.sf-menu li.dropdown.sfHover > ul { display: block; }
/* =Menu Skin
========================================================================== */
.sf-menu { float: right; }
.sf-menu a {
display: block;
padding: 15px 0;
color: #ffffff;
text-decoration: none;
-webkit-transition: all .3s;
transition: all .3s;
}
.navigation-style-2 .sf-menu a{ color: #fff; }
.navigation-style-3 .sf-menu a{ color: #151515; }
.sf-menu li.dropdown a { padding: 15px; }
.sf-menu li:last-child > a { border-bottom: none; }
.sf-menu > li > a,
.sf-menu > li.dropdown > a {
padding: 28px 20px 28px;
border: none;
color: #ffffff;
font-weight: 300;
}
.navigation-style-2 .sf-menu > li > a,
.navigation-style-3 .sf-menu > li > a,
.navigation-style-2 .sf-menu > li.dropdown > a,
.navigation-style-3 .sf-menu > li.dropdown > a { color: #272727; }
.sf-menu > li a i { margin-right: 5px; }
.sf-menu > li.current > a,
.sf-menu li.sfHover > a,
.sf-menu a:hover,
.sf-menu li.sfHover a:hover {
color: #66a1f1;
text-decoration: none;
}
.navigation-style-3 .sf-menu > li.current > a {
color: #66a1f1;
text-decoration: none;
}
/* =DropDown
========================================================================== */
/**
* 1. allow long menu items to determine submenu width
*/
.sf-menu li.dropdown ul {
min-width: 190px; /* 1 */
background-color: #272727;
border-top: 2px solid #66a1f1;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);
}
.navigation-style-3 .sf-menu li.dropdown ul {
border-top: none;
background-color: #ffffff;
}
.sf-menu li.dropdown ul li a {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.navigation-style-2 .sf-menu li.dropdown ul li a:before {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
content: "";
background-color: #66a1f1;
-webkit-transition: all .3s;
transition: all .3s;
}
.navigation-style-2 .sf-menu li.dropdown ul li a:hover:before { width: 30px; }
.navigation-style-3 .sf-menu li.dropdown ul li a {
border-bottom: 1px solid rgba(0,0,0, 0.09);
-webkit-transition: all .3s;
transition: all .3s;
}
.navigation-style-3 .sf-menu li.dropdown ul li a:hover {
background-color: #66a1f1;
color: #ffffff;
}
.navigation-style-4 .sf-menu li.dropdown ul li a:before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 1px;
content: "";
background-color: #66a1f1;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.navigation-style-4 .sf-menu li.dropdown ul li a:hover { padding-left: 20px; }
.navigation-style-4 .sf-menu li.dropdown ul li a:hover:before { width: 10px; }
/* =Mega Menu Section
========================================================================== */
.sf-mega {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
margin-top: -2px;
border-top: 2px solid #66a1f1;
background-color: #272727;
box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.2);
}
.navigation-style-2 .sf-mega,
.navigation-style-3 .sf-mega {
border-top: none;
background-color: #ffffff;
}
.navigation-style-3 .sf-mega { padding: 0; }
.sf-mega-section {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.sf-mega-section.menu-image { padding: 0 15px; }
.navigation-style-3 .sf-mega-section { border-right: 1px solid rgba(0, 0, 0, 0.09); }
.sf-mega-section:last-child { border-right: none; }
.sf-mega-section a {
position: relative;
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.navigation-style-2 .sf-mega-section a { position: relative; }
.navigation-style-2 .sf-mega-section a:before {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
content: "";
background-color: #66a1f1;
-webkit-transition: all .3s;
transition: all .3s;
}
.navigation-style-2 .sf-mega-section a:hover:before { width: 30px; }
.navigation-style-3 .sf-mega-section ul li a {
border-bottom: 1px solid rgba(0,0,0, 0.09);
-webkit-transition: all .3s;
transition: all .3s;
}
.navigation-style-3 .sf-mega-section ul li a:hover {
color: #ffffff;
background-color: #66a1f1;
}
.sf-mega-section .menu-image { margin-top: 45px;}
.navigation-style-4 .sf-mega-section a:before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 1px;
content: "";
background-color: #66a1f1;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.navigation-style-4 .sf-mega-section a:hover { padding-left: 20px; }
.navigation-style-4 .sf-mega-section a:hover:before { width: 10px; }
/**
* 1. set mega menu section size, as a percentage of the mega menu width
*/
.sf-mega.sf-mega-1-col .sf-mega-section{ width: 100%; } /* 1 */
.sf-mega.sf-mega-2-col .sf-mega-section{ width: 50%; }
.sf-mega.sf-mega-3-col .sf-mega-section{ width: 33.3333333333%; }
.sf-mega.sf-mega-4-col .sf-mega-section{ width: 25%; }
.sf-mega.sf-mega-5-col .sf-mega-section{ width: 20%; }
.sf-mega-section-title {}
/* =Menu Arrows
========================================================================== */
.sf-arrows .sf-with-ul:after {
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: #ececee;
margin-top: 0;
content: "";
display: none;
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: rgba(0, 0, 0, 0.7); }
.sf-arrows ul .sf-with-ul:after {
border-color: transparent;
border-left-color: #ececee;
margin-top: -5px;
margin-right: 15px;
display: inline;
}
.navigation-style-3 .sf-arrows ul .sf-with-ul:after { border-left-color: #dbdde0; }
@media (min-width: 1200px) {
.sf-menu > li > a,
.sf-menu > li.dropdown > a { padding: 28px 30px 28px; }
}
@media (min-width: 768px) and (max-width: 991px) {
#menu { display: none; }
}
@media (max-width: 767px) {
#menu { display: none; }
}
/* ==========================================================================
=Mobile Menu
========================================================================== */
#mobile-menu {
border-bottom: 1px solid #e0e0e0;
margin-bottom: 0;
background-color: #66A1F1;
}
#mobile-menu li {
display: block;
margin: 0;
}
#mobile-menu > li > ul,
#mobile-menu > li > ul > li > ul {
display: none;
margin-left: 0;
}
#mobile-menu .sf-mega {
display: none;
padding: 0;
border: none;
margin: 0;
box-shadow: none;
z-index: 99999999999999;
}
#mobile-menu .sf-mega-section {
float: none;
width: 100%;
padding: 0;
border: none;
}
#mobile-menu .sf-mega-section ul {
margin-left: 0;
margin-bottom: 0;
}
#mobile-menu li a {
position: relative;
display: block;
padding: 15px 25px;
border-top: 1px solid #e0e0e0;
color: #ffffff;
font-size: 13px;
text-align: left;
text-decoration: none;
}
#mobile-menu .sf-mega { background-color: #ffffff; }
#mobile-menu ul a { padding-left: 45px; }
#mobile-menu ul li ul a { padding-left: 65px; }
#mobile-menu .mobile-menu-submenu-arrow {
position: absolute;
top: 0;
right: 0;
width: 70px;
height: 100%;
border-left: 1px solid #e0e0e0;
color: #ffffff;
font-size: 20px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
#mobile-menu li a:hover {}
#mobile-menu { display: none; }
/* ==========================================================================
=Mobile menu trigger
========================================================================== */
#mobile-menu-trigger {
float: right;
display: none;
font-size: 32px;
}
@media (min-width: 768px) and (max-width: 991px) {
#mobile-menu-trigger {
display: block;
margin-top: 18px;
margin-right: 0;
}
}
@media (max-width: 767px) {
#mobile-menu-trigger {
position: absolute;
top: 18px;
right: 5px;
display: block;
padding: 10px;
margin-top: 0;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#mobile-menu-trigger {}
}
/* ==========================================================================
=Custom search form
========================================================================== */
#custom-search-button + nav { margin-right: 80px; }
#custom-search-button {
position: absolute;
top: 32px;
right: 10px;
display: block;
width: 20px;
height: 20px;
background: url(../images/bg-search-light.png) no-repeat center center;
transition: none;
}
.header-style-2 #custom-search-button { background: url(../images/bg-search.png) no-repeat center center; }
/**
* 1. z-index is 1030 because the menu has a z-index of 1025
*/
#custom-search-form-container {
position: fixed;
z-index: 1030;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .9);
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
}
#custom-search-form-container.open {
opacity: 1;
-webkit-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
}
#custom-search-form-container form {
position: absolute;
top: 50%;
left: 50%;
width: 30%;
display: inline-block;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#custom-search-form-container input[type="text"] {
width: 100%;
box-sizing: border-box;
color: #ffffff;
font-size: 18px;
font-weight: 300;
outline: none;
}
#custom-search-form-container input[type="submit"] {
position: absolute;
left: 100%;
top: 0;
margin: 0;
}
#custom-search-form-container .close {
position: fixed;
top: 15px;
right: 15px;
padding: 20px;
margin: 0;
font-size: 40px;
font-weight: 300;
color: #ffffff;
background-color: transparent;
opacity: 1;
}
@media (min-width: 768px) and (max-width: 991px) {
#custom-search-button {
right: 50px;
top: 25px;
}
}
@media (max-width: 767px) {
/**
* Hide search on mobile
*/
/**
* 1. !important is needed to overwrite the display:block added by the js
*/
#custom-search-form {
display: none !important; /* 1 */
}
#custom-search-button { display: none; }
}
/* ==========================================================================
=Shopping Cart Icon
========================================================================== */
#shopping-cart {
top: 15px;
right: 10px;
}
#shopping-cart ~ #custom-search-button { margin-right: 60px; }
#shopping-cart + nav { margin-right: 50px; }
@media (min-width: 768px) and (max-width: 991px) {
#shopping-cart {
top: 8px;
right: 50px;
}
}
@media (max-width: 767px) {
#shopping-cart {
top: 18px;
right: 50px;
}
}
/* ==========================================================================
=Sticky Header
========================================================================== */
@media (min-width: 1025px) {
/**
* 1. The height of the #header-wrap should be increased or decreased to accommodate the logo
*/
#header-wrap {
position: relative;
height: 80px; /* 1 */
}
#header {
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
}
/**
* 1. The z-index has to be 1020 so it is bigger than the back to top buttons z-index that is 1010
*/
#header.stuck {
position: fixed;
z-index: 1020; /* 1 */
top: 0;
width: 100%;
padding: 5px 0 0 0;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background-color: #272727;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
.header-style-2 #header.stuck { background-color: #ffffff; }
#header.stuck .sf-menu li.dropdown ul { margin-top: 0; }
#header.stuck #logo { padding: 8px 0 4px 0; }
#header.stuck .sf-menu > li > a,
#header.stuck .sf-menu > li.dropdown > a { padding: 28px 30px 28px; }
#header.stuck .sf-mega { margin-top: 0; }
#header.stuck .sf-arrows .sf-with-ul:after { margin-top: -6px; }
#header.stuck #custom-search-button { top: 22px; }
#header.stuck #shopping-cart { top: 5px; }
#header.stuck .site-header-cart > li:nth-child(2) { margin-top: 44px; }
}
/* ==========================================================================
=Content
========================================================================== */
#content {}
/* ==========================================================================
=Page Header
========================================================================== */
#page-header {
position: relative;
padding: 215px 0;
margin-bottom: 110px;
background: #f4f6f8 no-repeat center center;
}
#page-header.no-margin-bottom { margin-bottom: 0; }
.page-header-style-2 #page-header {
padding: 180px 0;
text-align: center;
}
#page-header h1 {
position: relative;
display: inline-block;
margin-bottom: 0;
opacity: 1;
padding-bottom: 35px;
font-size: 48px;
color: #ffffff;
}
#page-header h1:before {
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 50px;
height: 3px;
background-color: #66A1F1;
}
.page-header-style-2 #page-header h1:before {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (max-width: 767px) {
#page-header h1 { font-size: 28px; }
}
/* ==========================================================================
=Fullwidth Section
========================================================================== */
/**
* Full width section
*
* 1. background-image must be supplied using inline css as it is different for every .fullwidth-section
*
*/
.fullwidth-section {
position: relative;
overflow: hidden;
z-index: 0;
padding: 40px 0;
margin-bottom: 110px;
background-color: #f3f3f3;
background-attachment: scroll;
background-repeat: no-repeat; /* 1 */
background-position: 50% 0;
}
.fullwidth-section-content {
position: relative;
z-index: 3;
}
.fullwidth-section-overlay {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
background-position: 0 0;
}
.fullwidth-section-video {
position: absolute;
overflow: hidden;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
}
.yt-player { display: none; }
/**
*
* 1. We add background-size cover so the parallax looks ok if you provide smaller images
*
*/
.parallax.parallax-enabled {
background-attachment: fixed !important;
-webkit-background-size: cover;
background-size: cover; /* 1 */
}
.horizontal-parallax { background-repeat: repeat-x; }
.animated-parallax { background-repeat: repeat-x; }
@media (max-width: 767px) {
.fullwidth-section {
-webkit-background-size: cover;
background-size: cover;
}
}
/* ==========================================================================
=Footer Top
========================================================================== */
#footer-top {
background-color: #272727;
color: #ffffff;
}
#footer-top h1,
#footer-top h2,
#footer-top h3,
#footer-top h4,
#footer-top h5,
#footer-top h6,
#footer-top a { color: inherit; }
#footer-top a {
-webkit-transition: all .3s;
transition: all .3s;
}
#footer-top a:hover { color: #66A1F1; }
#footer-top-widget-area-1 {}
#footer-top-widget-area-2 {}
#footer-top-widget-area-3 {}
#footer-top-widget-area-4 {}
@media (max-width: 767px) {
#footer-top-widget-area-1 + #footer-top-widget-area-2 { margin-top: 60px; }
#footer-top-widget-area-2 + #footer-top-widget-area-3 { margin-top: 60px; }
#footer-top-widget-area-3 + #footer-top-widget-area-4 { margin-top: 60px; }
}
/* ==========================================================================
=Footer
========================================================================== */
#footer {
padding: 75px 0;
border-top: 1px solid #66A1F1;
color: #ffffff;
background-image: url('../../content/backgrounds/footer.jpg');
background-repeat: no-repeat;
background-size: cover;
background-color: #272727;
}
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer a { color: inherit; }
#footer a {
-webkit-transition: all .3s;
transition: all .3s;
}
#footer a:hover { color: #66A1F1; }
.footer-style-2 #footer { background-image: none; }
.footer-style-2 #footer a { color: #66A1F1; }
.footer-style-3 #footer { padding: 120px 0; }
.footer-style-4 #footer { background-image: none; }
#footer-widget-area-1 {}
#footer-widget-area-2 {}
#footer-widget-area-3 {}
#footer-widget-area-4 {}
@media (max-width: 767px) {
#footer-widget-area-1 + #footer-widget-area-2 { margin-top: 60px; }
#footer-widget-area-2 + #footer-widget-area-3 { margin-top: 60px; }
#footer-widget-area-3 + #footer-widget-area-4 { margin-top: 60px; }
}
/* ==========================================================================
=Footer Bottom
========================================================================== */
#footer-bottom {
color: #ffffff;
background-color: #171717;
}
#footer-bottom h1,
#footer-bottom h2,
#footer-bottom h3,
#footer-bottom h4,
#footer-bottom h5,
#footer-bottom h6,
#footer-bottom a { color: inherit; }
#footer-bottom a {
-webkit-transition: all .3s;
transition: all .3s;
}
#footer-bottom a:hover { color: #66A1F1; }
#footer-bottom-widget-area-1 {}
#footer-bottom-widget-area-2 {}
#footer-bottom-widget-area-3 {}
#footer-bottom-widget-area-4 {}
@media (max-width: 767px) {
#footer-bottom-widget-area-1 + #footer-bottom-widget-area-2 { margin-top: 60px; }
#footer-bottom-widget-area-2 + #footer-bottom-widget-area-3 { margin-top: 60px; }
#footer-bottom-widget-area-3 + #footer-bottom-widget-area-4 { margin-top: 60px; }
}
/* ==========================================================================
=Back to top
========================================================================== */
#back-to-top {
position: fixed;
z-index: 1010;
right: -40px;
bottom: 20px;
width: 40px;
height: 40px;
background-color: #111;
color: #fafafa;
font-size: 30px;
line-height: 40px;
text-align: center;
opacity: 0.5;
cursor: pointer;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
#back-to-top i {
font-size: 16px;
line-height: 40px;
font-weight: normal;
vertical-align: top;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
#back-to-top:hover { background-color: rgba(0, 0, 0, 0.7); }
#back-to-top:hover i { color: #fff; }
#back-to-top.visible { right: 40px; }
#back-to-top.gone { right: -40px; }
@media (max-width: 767px) {
#back-to-top { bottom: 10px; }
#back-to-top.visible { right: 10px; }
}
/* ==========================================================================
=Misc
========================================================================== */
.javascript-required,
.modern-browser-required {
padding: 15px 0;
background-color: #d50f25;
color: #fff;
font-weight: 700;
text-align: center;
}
.milestone i{margin-bottom:5px!important;}
.milestone-content .infoTxt{margin-bottom:26px;display:block;}