Team:NJU-China/css/homestyle.css

/* ==========================================================================

  style.css
   ========================================================================= */
   @font-face {
   font-family: "Montserrat-UltraLight";
   src: url(../fonts/Montserrat-UltraLight.otf);

}

/* ==========================================================================

   1. CSS RESET
   ========================================================================= */

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {

   margin: 0;
   padding: 0;
   border: 0;
   font: inherit;
   vertical-align: baseline;

} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

   display: block;

} body {

   line-height: 1;

} blockquote, q {

   quotes: none;

} blockquote:after, blockquote:before, q:after, q:before {

   content: ;
   content: none;

} table {

   border-collapse: collapse;
   border-spacing: 0;

}

• focus {

   outline: 0;
   text-decoration: none;

} a:focus, a:active {

   text-decoration: none;
   outline: 0;

}

/* ==========================================================================

   2. DOCUMENT STYLES
   ========================================================================= */

body {

   font-family: 'Montserrat-UltraLight', Arial, sans-serif;
   font-size: 15px;
   line-height: 23px;
   color: #777777;
   background-color: #fff;

} .row {

   margin-bottom: 100px;

}

.centered {

   text-align: center;

} img {

   max-width: 100%;
   height: auto;
   display: block;

}

/* ==========================================================================

   3. TYPOGRAPHY 
   ========================================================================= */

p, a {

   color: #777777; 

} p, a, span {

   font-family: 'Montserrat-UltraLight', Arial, sans-serif;
   line-height: 25px;

} p {

   padding-bottom: 15px;

} a {

   -webkit-transition: all 0.2s ease 0s;
   -moz-transition: all 0.2s ease 0s;
   -o-transition: all 0.2s ease 0s;
   -ms-transition: all 0.2s ease 0s;
   transition: all 0.2s ease 0s;
   text-decoration: none;

} a:hover {

   text-decoration: none;

} h1, h2, h3, h4{

   font-family: 'Suranna', serif;
   color: #161d27;
   margin-top: 0;
   margin-bottom: 15px;
   text-transform: uppercase;

}

h5, h6 {

   font-family: 'Montserrat', Arial, sans-serif;
   color: #161d27;
   margin-top: 0;
   margin-bottom: 0;
   text-transform: uppercase;

} h1 {

   font-size: 60px;
   line-height: 60px;

} h2 {

   font-size: 44px;
   line-height: 44px;

} h3 {

   font-size: 36px;
   line-height: 36px;

} h4 {

   font-size: 27px;
   line-height: 28px;

} h5 {

   font-size: 18px;
   line-height: 24px;
   margin-bottom: 3px;

} h6 {

   font-size: 15px;
   line-height: 15px;

} h5 .sans-serif {

   font-family: 'Montserrat', Arial, sans-serif !important;
   font-size: 21px;

} .dark h5 .sans-serif {

   color: #fff;

} strong {

   font-weight: 600;

} strong a:hover {

   text-decoration: underline;

}

.custom-col-padding {

   padding: 275px 0 195px 0!important;

} .padding-0 {

   padding-top: 0 !important;
   padding-bottom: 0 !important;
   padding-left: 0 !important;
   padding-right: 0 !important;

} a.more-details{

   font-family: 'Suranna', serif;
   text-transform: uppercase;
   font-size: 21px; 
   border-bottom: 1px solid;
   color: #161d27;
   display: inline-block;
   padding-bottom: 3px;
   margin-top: 10px;

   -webkit-transition: all 0.2s ease 0s;
   -moz-transition: all 0.2s ease 0s;
   -o-transition: all 0.2s ease 0s;
   -ms-transition: all 0.2s ease 0s;
   transition: all 0.2s ease 0s;

} a.more-details .fa{

   position: relative;
   top: -2px;
   margin-left: 7px;
   font-size: 14px;

}

.mb-0 {

   margin-bottom: 0 !important;

} .mb-20 {

   margin-bottom: 20px !important;

} .mb-40 {

   margin-bottom: 40px !important;

} .mb-60 {

   margin-bottom: 60px !important;

} .mb-80 {

   margin-bottom: 80px !important;

} .mb-100 {

   margin-bottom: 100px !important;

} .pt-0 {

   padding-top: 0 !important;

} .pt-20 {

   padding-top: 20px !important;

} .pt-40 {

   padding-top: 40px !important;

} .pt-60 {

   padding-top: 60px !important;

} .pt-80 {

   padding-top: 80px !important;

} .pt-100 {

   padding-top: 100px !important;

} .pt-120 {

   padding-top: 100px !important;

} .pt-150 {

   padding-top: 150px !important;

} .pt-160 {

   padding-top: 160px !important;

}

.pb-80 {

   padding-bottom: 80px !important;

}

.custom-heading.style-1 span, .custom-heading.style-2 span, .menu-item-price p{

   font-family: 'Montez', cursive;
   text-transform: none;

}

/* ==========================================================================

   4. HEADER
   ========================================================================= */

1. header-wrapper {

   width: 100%;
   position: fixed;
   top: 0;
   z-index: 1000;

} .resize-header {

   background-color: rgba(0,0,0,0.90);
   -webkit-animation: headerFadeIn 0.4s forwards;
   animation: headerFadeIn 0.4s forwards;

} @-webkit-keyframes headerFadeIn {

   from { background-color: rgba(0,0,0,0.0); }
   to { background-color: rgba(0,0,0,0.90); }

} @keyframes headerFadeIn {

   from { background-color: rgba(0,0,0,0.0); }
   to { background-color: rgba(0,0,0,0.90); }

} .resize-header .logo {

   margin: 10px 0;

} .resize-header .logo img {

   max-width: 100%;
   -webkit-animation: reduceLogo 0.1s forwards;
   animation: reduceLogo 0.1s forwards;

} @-webkit-keyframes reduceLogo {

   from { max-width: 100%;}
   to { max-width: 60%; }

} @keyframes reduceLogo {

   from { max-width: 100%;}
   to { max-width: 60%; }

} .resize-header #header .nav-left .pi-nav {

   margin-top: 50px;
   -webkit-animation: reduceTopMargin 0.2s forwards;
   animation: reduceTopMargin 0.2s forwards;

} @-webkit-keyframes reduceTopMargin {

   from { margin-top: 50px;}
   to { margin-top: 12px; }

} @keyframes reduceTopMargin {

   from { margin-top: 50px;}
   to { margin-top: 12px; }

} .resize-header .navbar {

   margin-bottom: 0;

} .header-inner .row, .main-nav .row {

   margin-bottom: 0;

} .logo {

   margin: 30px 0;

}

1. header .nav-left .navbar-header {

   float: left;

}

1. header .nav-left .pi-nav {

   float: left;
   margin-top: 50px;

}

1. header .navbar-default .navbar-collapse,
2. header .navbar-default .navbar-form {

   border: 0px solid transparent;

}

1. header .navbar-default .navbar-nav > .open > a,
2. header .navbar-default .navbar-nav > .open > a:hover,
3. header .navbar-default .navbar-nav > .open > a:focus {

   background-color: transparent;

}

1. header .navbar-collapse {

   padding: 0;
   float: right;

}

1. header .navbar-default{

   background: none;
   border: 0px solid transparent;
   -webkit-box-shadow: none;
   box-shadow: none;

}

1. header .navbar-nav.pi-nav > li > a {

   line-height: 25px;

}

1. header .navbar-default .navbar-nav > li > a {

   border: none;
   font-family: 'Montserrat', Arial, sans-serif;
   font-size: 15px;
   text-transform: uppercase;
   color: #fff;
   margin: 0 4px;

}

1. header .navbar-default .navbar-nav > .current-menu-item > a:before,
2. header .navbar-default .navbar-nav > li>a:hover:before {

   position: absolute;
   font-family: 'FontAwesome';
   font-size: 6px;
   content: "\f111";
   display: block;
   top: 16px;
   left: 0px;

}

1. header .navbar-default .navbar-nav > li>a:hover:before {

   -webkit-animation: navItemMove 0.1s forwards;
   animation: navItemMove 0.1s forwards;

} @keyframes navItemMove {

   from { opacity: 0; transform: translateX(20px); }
   to { opacity: 1; transform: translateX(0px); }

} @-webkit-keyframes navItemMove {

   from { opacity: 0; -moz-transform: translateX(20px); }
   to { opacity: 1; -moz-transform: translateX(0px); }

}

1. header .dropdown-menu > li > a {

   font-size: 14px;
   font-weight: 400;
   padding: 15px 40px 15px 25px;
   color: #A0A0A0;
   border-bottom: 1px solid #3C3C3C;

}

1. header .dropdown-menu > li > a:hover,
2. header .dropdown-menu > li > a:focus {

   background: #363636;
   background-color: #363636 !important;
   background-image: none;
   filter: none;

}

1. header .dropdown-menu > li:last-child > a {

   border-bottom: none;

}

1. header .dropdown.dropdown-submenu > a:after {

   position: absolute;
   font-family: 'FontAwesome';
   font-size: 12px;
   content: "\f0da";
   display: block;
   top: 50%;
   right: 25px;
   color: #A0A0A0;
   margin-top: -8px;
   -webkit-transition: all 0.2s ease 0s;
   -moz-transition: all 0.2s ease 0s;
   -o-transition: all 0.2s ease 0s;
   -ms-transition: all 0.2s ease 0s;
   transition: all 0.2s ease 0s;

}

1. header .dropdown-menu {

   background: #252525;
   border: none;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   min-width: 270px;
   padding: 0;
   -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);

}

1. header .dropdown-menu > li > a .fa {

   margin-right: 15px;

}

/* ==========================================================================

   4.1. MAIN NAVIGATION
   ========================================================================= */

.navbar-nav > li {

   padding-bottom: 0;

}

.dropdown-submenu {

   position: relative;

}

1. header .dropdown-submenu > .dropdown-menu{

   top: -2px;
   left: 100%;
   -webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
   box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);

}

1. header .dropdown-submenu > .dropdown-menu {

   background-color: #363636 !important;

}

1. header .dropdown-submenu > .dropdown-menu > li > a:hover {

   background-color: #252525 !important;

} .dropdown-submenu:hover > .dropdown-menu {

   display: block;

} .dropdown.dropdown-submenu > a {

   position: relative;

}

/* ==========================================================================

   5. PAGE TITLE
   ========================================================================= */

.page-title.custom-img-background {

   padding-top: 275px;

} .page-title {

   padding-top: 275px;
   padding-bottom: 275px;

} .page-title .row {

   margin-bottom: 0;

}

/* ==========================================================================

   6. CUSTOM SECTION BACKGROUNDS
   ========================================================================= */

.custom-img-background {

   background-repeat: no-repeat;
   background-size: cover;
   padding-top: 100px;

} .custom-background.bkg-grey {

   background-color: #fdfdfc !important;

} .full-screen.custom-img-background {

   padding-top: 0;

} .full-screen-content-wrapper {

   display: table;
   width: 100%;
   padding: 0 30px;
   background-repeat: no-repeat;

} .full-screen-cell {

   display: table-cell;
   vertical-align: middle;

}

.bkg-img1 {

   background-image: url('../img/pics/bkg-img1.jpg');  

} .bkg-img2 {

   background-image: url('../img/pics/bkg-img2.png');  

}

.frame-box {

   background-color: #fff;
   border: 17px solid #131822;
   padding: 125px 80px;
   box-shadow: 0 0 18px 7px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 0 18px 7px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 18px 7px rgba(0,0,0,0.3);

} .custom-img-background.frame-box {

   background-size: 100%;
   background-position: center;

} .frame-box .custom-heading {

   padding-left: 0 !important;

} .frame-box.custom-img-background .custom-heading {

   margin-bottom: 50px;

}

.custom-heading, .custom-img-background .open-table-widget-style-1 .custom-heading{

   position: relative;
   margin-bottom: 50px;

} .custom-img-background .open-table-widget-style-1 {

   padding-left: 30px;
   padding-right: 30px;

} .custom-img-background .custom-heading {

   margin-bottom: 0;

} .custom-heading h3 {

   margin-bottom: 10px;

} .custom-heading h4 {

   margin-bottom: 15px;

} .page-content.dark .custom-heading h1, .page-content.dark .custom-heading h3 {

   color: #fff;

} .custom-heading.style-1 h3 span {

   font-size: 36px;

} .custom-heading.style-1 h2 span {

   font-size: 50px;

} .custom-heading.style-1 h1 span {

   font-size: 60px;

}

.master-slider .pi-caption01 {

   font-family: 'Suranna', serif;
   color: #fff;
   font-size: 78px;
   line-height: 78px;

} .master-slider .pi-caption02 {

   font-family: 'Montez', cursive;
   font-size: 72px;
   text-transform: none;

} .master-slider .pi-text01 {

   font-family: 'Montserrat', Arial, sans-serif;
   color: #fff;
   font-size: 21px;

} .master-slider .pi-text02, .master-slider .pi-text02 span {

   font-family: 'Montserrat-UltraLight', Arial, sans-serif;

} .master-slider .pi-text02 {

   color: #fff;
   font-size: 18px;

} .master-slider .pi-text02 span {

   color: #acb8c4;

} .master-slider .divider {

   width: 29.5em;
   text-align: center;

} .master-slider .divider .hr-double.left:before {

   position:absolute;
   content: "";
   width: 10em;
   height: 1px;
   left: 2em;
   top: 1.8em;

} .master-slider .divider .hr-double.left:after {

   position:absolute;
   content: "";
   width: 12em;
   height: 1px;
   top: 2.2em;
   left: 0;

} .master-slider .divider .hr-double.right:before {

   position:absolute;
   content: "";
   width: 10em;
   height: 1px;
   right: 2em;
   top: 1.8em;

} .master-slider .divider .hr-double.right:after {

   position:absolute;
   content: "";
   width: 12em;
   height: 1px;
   top: 2.2em;
   right: 0;

}

.master-slider .divider-svg {

   display: inline-block;
   width: 3em;
   height: 4em;

} .master-slider .divider .divider-svg img{

   width: 3em;
   height: 4em;

}

/* ==========================================================================

  color-default.css

============================================================================= */

1. header .navbar-default .navbar-nav > li > a:hover,
2. header .navbar-default .navbar-nav > .current-menu-item > a,
3. header .dropdown-menu > li.current-menu-item > a,
4. header .navbar-default .navbar-nav > li>a:hover,
5. header .navbar-default .navbar-nav > li >a:focus,
6. header .dropdown-menu > li > a:hover,
7. header .dropdown-menu > li > a:focus,
8. header .dropdown.dropdown-submenu > a:hover::after,
9. header .navbar-default .navbar-nav > .current-menu-item > a:before,

.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after, .dl-menuwrapper li.dl-back:after, strong a, .master-slider .pi-caption02, .page-content.dark .custom-heading .divider .hr-circle,

span, a:hover, .custom-heading.style-1:before, .custom-heading.style-1:after, .custom-heading .divider .hr-icon, .page-content ul li:before, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,

.owl-carousel .owl-controls .owl-buttons .owl-next:hover:before, .owl-carousel .owl-controls .owl-buttons .owl-prev:hover:before{

   color: #b48c80;

}

/* ==========================================================================

  masterslider.css

============================================================================= */

.master-slider{ position: relative; visibility: hidden; -moz-transform: translate3d(0 , 0 , 0); }

.master-slider a { -webkit-transition: none; -o-transition: none; transition: none; }

.master-slider, .master-slider * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

.master-slider img, .ms-slide-bgvideocont video {max-width:none;}

/* grab cursor */ .ms-grab-cursor{cursor: url(grab.png), move;} .ms-grabbing-cursor{cursor: url(grabbing.png), move;}

.ms-view { margin:0px auto; overflow:hidden; background:black; position:relative; -webkit-perspective: 2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; }

.ms-view .ms-slide-container{position:relative;}

.ms-slide { position:absolute; height:100%; -webkit-transform: translateZ(0px); -ms-transform: translateZ(0px); -o-transform: translateZ(0px); transform: translateZ(0px); }

.ms-wk .ms-slide { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

.ms-slide.selected {}

.ms-slide .ms-slide-bgcont, .ms-slide .ms-slide-bgvideocont{ position: absolute; overflow:hidden; width: 100%; }

.ms-slide .ms-slide-link { display: block; width: 100%; height: 100%; position: absolute; top:0; z-index: 110; }

.ms-slide .ms-slide-bgvideocont{ z-index: 105; height: 100%; }

.ms-wk .ms-slide .ms-slide-bgvideocont, .ms-wk .ms-slide-bgvideocont>video{ -webkit-transform: translateZ(0.3px); transform: translateZ(0.3px); }

.ms-slide .ms-slide-bgvideo{ position: absolute; top: 0px; }

.ms-inner-controls-cont, .ms-container {position: relative; margin:0 auto;} .ms-slide .ms-slide-bgcont img , .ms-container , .ms-inner-controls-cont{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

.ms-slide .ms-layer, .ms-fixed-layers .ms-layer {position:absolute;pointer-events: auto}

.ms-slide .ms-slide-layers, .ms-fixed-layers { position: absolute; overflow:hidden; width:100%; height: 100%; z-index: 109; top:0px; pointer-events: none; }

.ms-slide .ms-slide-video{ position:absolute; top:0; z-index: 111; background:black; padding:0; margin: 0; border: none; }

.ms-parallax-layer { width: 100%; position: absolute; top: 0; }

.ms-scroll-parallax-cont{ position: absolute; top:0; width: 100%; height: 100%; }

.ms-wk .ms-scroll-parallax-cont{ -webkit-transform: translateZ(0.4px); transform: translateZ(0.4px); }

/*.ms-scroll-parallax .ms-sl-selected .ms-scroll-parallax-cont, .ms-scroll-parallax .ms-sl-selected .ms-slide-bgcont{} .ms-scroll-parallax .ms-slide-bgcont{}*/ .ms-layer.video-box{background:black;} .ms-layer.video-box iframe{ padding:0; margin: 0; border: none; position: absolute; z-index: 111; }

.ms-slide .ms-slide-vpbtn , .ms-slide .ms-video-btn{ position:absolute; cursor: pointer; z-index: 112; }

.ms-slide .ms-slide-vcbtn{ position:absolute; cursor: pointer; z-index: 113; }

.ms-slide-vcbtn-mobile{ position: relative; bottom: 0; left:0; width:100%; height: 28px; background-color: black; color: white; text-align: center; cursor: pointer; z-index: 113; }

.ms-slide-vcbtn-mobile .ms-vcbtn-txt {

   text-transform: uppercase;
   font-family: sans-serif;
   font-size: 0.75em;
   display: inline-block;
   background: url(video-close-btn.png) no-repeat 0px 3px;
   padding-left: 15px;
   height: 15px;
   color: #DBDBDB;
   margin-top: 7px;

}

.ms-wk .ms-slide .ms-slide-vcbtn, .ms-wk .ms-slide .ms-slide-layers, .ms-wk .ms-slide .ms-slide-vpbtn, .ms-wk .ms-slide .ms-slide-video, .ms-wk .ms-slide-link { -webkit-transform: translateZ(0.44px); transform: translateZ(0.44px); }

.ms-video-img{ position:absolute; width:100%; height:100%; top:0; left:0; }

.ms-mask-frame{ overflow:hidden; position:absolute; float:left; }

.ms-slide-info {position: absolute;} .ms-slide-info.ms-dir-v {top:0;} .ms-slide-info.ms-dir-h {width:100%;}

@keyframes point-anim{ 0% {transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); opacity: 1; } 100% {transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); opacity: 0; } }

@-webkit-keyframes point-anim{ 0% {-webkit-transform: scale(0.5); opacity: 1; } 100% {-webkit-transform: scale(1.5); opacity: 0; } }

/* In Android browser, using css animations over slider causes some crashes */ .ms-android .ms-tooltip-point .ms-point-border{ animation:none; -moz-animation:none; -webkit-animation:none; -o-animation:none; } /* ==========================================================================

  responsive.css

============================================================================= */

@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}@media (min-width:768px){.navbar-right .dropdown-menu{left:auto;right:0}.navbar-right .dropdown-menu-left{left:0;right:auto}}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-left:0;padding-right:0}}@media (max-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}@media (min-width:768px){.navbar-static-top{border-radius:0}}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}@media (min-width:768px){.navbar-toggle{display:none}}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}.navbar-nav.navbar-right:last-child{margin-right:-15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important}}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}}@media (min-width:768px){.navbar-form{width:auto;border:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;-webkit-box-shadow:none;box-shadow:none}.navbar-form.navbar-right:last-child{margin-right:-15px}}@media (min-width:768px){.navbar-text{float:left;margin-left:15px;margin-right:15px}.navbar-text.navbar-right:last-child{margin-right:0}}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}

1. dl-menu{

   display: none;

}

.dl-menuwrapper {

   width: 100%;
   max-width: 300px;
   float: left;
   position: relative;
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   perspective: 1000;
   -webkit-perspective-origin: 50% 200%;
   -moz-perspective-origin: 50% 200%;
   perspective-origin: 50% 200%;
   display: none;
   z-index: 1002;

}

.dl-menuwrapper:first-child {

   margin-right: 100px;

}

.dl-menuwrapper button {

   background: #ccc;
   border: none;
   width: 100%;
   height: 45px;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   outline: none;
   color: #fff;
   text-transform: uppercase;
   text-align: left;
   padding-left: 60px;
   font-family: 'Montserrat', Arial, sans-serif;

}

.dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul {

   background: #aaa;

}

.dl-menuwrapper button:after {

   content: ;
   position: absolute;
   width: 30px;
   height: 1px;
   background: #fff;
   top: 14px;
   left: 10px;
   box-shadow: 
       0 8px 0 #fff, 
       0 16px 0 #fff;

}

.dl-menuwrapper ul {

   padding: 0;
   list-style: none;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;

}

.dl-menuwrapper li {

   position: relative;

}

.dl-menuwrapper li a {

   display: block;
   position: relative;
   padding: 12px 15px;
   font-size: 13px;
   line-height: 22px;
   font-weight: 400;
   color: #A0A0A0;
   border-bottom: 1px solid #3C3C3C;
   outline: none;

}

.dl-menuwrapper li:last-child a {

   border-bottom: none;

}

.no-touch .dl-menuwrapper li a:hover{

   background: #363636;

}

.dl-menuwrapper li.dl-back > a {

   padding-left: 30px;
   background: rgba(0,0,0,0.1);

}

.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after {

   position: absolute;
   top: 0;
   speak: none;
   -webkit-font-smoothing: antialiased;
   line-height: 45px;
   font-size: 10px;
   font-family: 'FontAwesome';
   content: "\f054";

}

.dl-menuwrapper li.dl-back:after {

   left: 10px;
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   transform: rotate(180deg);

}

.dl-menuwrapper li > a:after {

   right: 10px;
   color: rgba(0,0,0,0.15);

}

.dl-menuwrapper .dl-menu {

   margin: 5px 0 0 0;
   position: absolute;
   width: 100%;
   opacity: 0;
   pointer-events: none;
   -webkit-transform: translateY(10px);
   -moz-transform: translateY(10px);
   transform: translateY(10px);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;

}

.dl-menuwrapper .dl-menu.dl-menu-toggle {

   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   transition: all 0.3s ease;

}

.dl-menuwrapper .dl-menu.dl-menuopen {

   opacity: 1;
   pointer-events: auto;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   transform: translateY(0px);

}

/* Hide the inner submenus */ .dl-menuwrapper li .dl-submenu {

   display: none;

}

/* When a submenu is openend, we will hide all li siblings. For that we give a class to the parent menu called "dl-subview". We also hide the submenu link. The opened submenu will get the class "dl-subviewopen". All this is done for any sub-level being entered.

• /

.dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a {

   display: none;

}

.dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {

   display: block;

}

/* Dynamically added submenu outside of the menu context */ .dl-menuwrapper > .dl-submenu {

   position: absolute;
   width: 100%;
   top: 50px;
   left: 0;
   margin: 0;

}

/* Animation classes for moving out and in */ .dl-menu.dl-animate-out-2 {

   -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
   -moz-animation: MenuAnimOut2 0.3s ease-in-out;
   animation: MenuAnimOut2 0.3s ease-in-out;

}

@-webkit-keyframes MenuAnimOut2 {

   100% {
       -webkit-transform: translateX(-100%);
       opacity: 0;
   }

}

@-moz-keyframes MenuAnimOut2 {

   100% {
       -moz-transform: translateX(-100%);
       opacity: 0;
   }

}

@keyframes MenuAnimOut2 {

   100% {
       transform: translateX(-100%);
       opacity: 0;
   }

}

.dl-menu.dl-animate-in-2 {

   -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
   -moz-animation: MenuAnimIn2 0.3s ease-in-out;
   animation: MenuAnimIn2 0.3s ease-in-out;

}

@-webkit-keyframes MenuAnimIn2 {

   0% {
       -webkit-transform: translateX(-100%);
       opacity: 0;
   }
   100% {
       -webkit-transform: translateX(0px);
       opacity: 1;
   }

}

@-moz-keyframes MenuAnimIn2 {

   0% {
       -moz-transform: translateX(-100%);
       opacity: 0;
   }
   100% {
       -moz-transform: translateX(0px);
       opacity: 1;
   }

}

@keyframes MenuAnimIn2 {

   0% {
       transform: translateX(-100%);
       opacity: 0;
   }
   100% {
       transform: translateX(0px);
       opacity: 1;
   }

}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {

   -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
   -moz-animation: SubMenuAnimIn2 0.3s ease-in-out;
   animation: SubMenuAnimIn2 0.3s ease-in-out;

}

@-webkit-keyframes SubMenuAnimIn2 {

   0% {
       -webkit-transform: translateX(0%);
       opacity: 0;
   }
   100% {
       -webkit-transform: translateX(0px);
       opacity: 1;
   }

}

@-moz-keyframes SubMenuAnimIn2 {

   0% {
       -moz-transform: translateX(0%);
       opacity: 0;
   }
   100% {
       -moz-transform: translateX(0px);
       opacity: 1;
   }

}

@keyframes SubMenuAnimIn2 {

   0% {
       transform: translateX(0%);
       opacity: 0;
   }
   100% {
       transform: translateX(0px);
       opacity: 1;
   }

}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {

   -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
   -moz-animation: SubMenuAnimOut2 0.3s ease-in-out;
   animation: SubMenuAnimOut2 0.3s ease-in-out;

}

@-webkit-keyframes SubMenuAnimOut2 {

   0% {
       -webkit-transform: translateX(0%);
       opacity: 1;
   }
   100% {
       -webkit-transform: translateX(100%);
       opacity: 0;
   }

}

@-moz-keyframes SubMenuAnimOut2 {

   0% {
       -moz-transform: translateX(0%);
       opacity: 1;
   }
   100% {
       -moz-transform: translateX(100%);
       opacity: 0;
   }

}

@keyframes SubMenuAnimOut2 {

   0% {
       transform: translateX(0%);
       opacity: 1;
   }
   100% {
       transform: translateX(100%);
       opacity: 0;
   }

}

/* No JS Fallback */ .no-js .dl-menuwrapper .dl-menu {

   position: relative;
   opacity: 1;
   -webkit-transform: none;
   -moz-transform: none;
   transform: none;

}

.no-js .dl-menuwrapper li .dl-submenu {

   display: block;

}

.no-js .dl-menuwrapper li.dl-back {

   display: none;

}

.no-js .dl-menuwrapper li > a:not(:only-child) {

   background: rgba(0,0,0,0.1);

}

.no-js .dl-menuwrapper li > a:not(:only-child):after {

   content: ;

}

.dl-menuwrapper button {

   background: #252525;

}

.dl-menuwrapper button:hover {

   background: #363636;

}

.dl-menuwrapper button.dl-active, .dl-menuwrapper ul {

   background: #252525;

}

@media only screen and (min-width: 320px) and (max-width: 479px){

   .page-content .row{
       margin-bottom: 0px;
   }
   .page-content *[class*="col-"] {
       margin-bottom: 80px;
   }
   *[class*="col-"] *[class*="col-"]{
       margin-left: 0 !important;
   }
   *[class*="col-"] img:only-child  {
       display: table;
       margin-left: auto;
       margin-right: auto;
   }

   /*  HEADER WRAPPER
   --------------------------------------------------------------------- */

   #header-wrapper{
       position: relative;
       background-color: rgba(0,0,0,1.0);
   }
   #header-wrapper + *{
       margin-top: 0 !important;
   }

   /*  NAVIGATION
   --------------------------------------------------------------------- */
   #header .nav-left .navbar-header {
       width: 100%;
   }
   .navbar-nav.pi-nav{
       display: none;
   }
   .dl-menuwrapper {
       max-width: 100%;
   }
   #dl-menu{
       display: block;
   }
   .collapse.navbar-collapse{
       width: 100%;
   }
   .navbar-header,
   #header.header-type-1 .nav-left .navbar-header{
       float: none;
   }
   .logo{
       display: table;
       margin: 20px auto;
   }
   .logo img {
       height: 80px;
   }

   .col-md-6 .blockquote.style-1 {
       width: 100%;
   }

   --------------------------------------------------------------------- */

   #header-wrapper{
       position: relative;
       background-color: rgba(0,0,0,1.0);
   }
   #header-wrapper + *{
       margin-top: 0 !important;
   }

   /*  NAVIGATION
   --------------------------------------------------------------------- */
   #header .nav-left .navbar-header {
       width: 100%;
   }
   .navbar-nav.pi-nav{
       display: none;
   }
   .dl-menuwrapper {
       max-width: 100%;
   }
   #dl-menu{
       display: block;
   }
   .collapse.navbar-collapse{
       width: 100%;
   }
   .navbar-header,
   #header.header-type-1 .nav-left .navbar-header{
       float: none;
   }
   .logo{
       display: table;
       margin: 20px auto;
   }
   .logo img {
       height: 80px;
   }

   .col-md-6 .blockquote.style-1 {
       width: 100%;
   }

   /*  MASTER SLIDER
   --------------------------------------------------------------------- */

   .master-slider .pi-text01,
   .master-slider .pi-text02,
   .master-slider .pi-text02 span,
   .master-slider .divider {
       visibility: hidden;
   }

   .scroll-up {
       bottom: 20px;
       right: 20px;
   }

}

@media only screen and (min-width: 768px) and (max-width: 991px){

   .page-content .row{
       margin-bottom: 0px;
   }
   .page-content *[class*="col-"] {
       margin-bottom: 80px;
   }
   *[class*="col-"] *[class*="col-"]{
       margin-left: 0 !important;
   }
   *[class*="col-"] img:only-child  {
       display: table;
       margin-left: auto;
       margin-right: auto;
   }

   /*  HEADER WRAPPER
   --------------------------------------------------------------------- */

   #header-wrapper{
       position: relative;
       background-color: rgba(0,0,0,1.0);
   }
   #header-wrapper + *{
       margin-top: 0 !important;
   }

   /*  NAVIGATION
   --------------------------------------------------------------------- */
   #header .nav-left .navbar-header {
       width: auto;
   }
   .navbar-nav.pi-nav{
       display: none;
   }
   .dl-menuwrapper {
       max-width: 100%;
   }
   #dl-menu{
       display: block;
   }
   .collapse.navbar-collapse{
       width: 60%;
       float: left;
       margin-top: 20px;
   }
   .navbar-header,
   #header.header-type-1 .nav-left .navbar-header{
       float: none;
   }
   .logo{
       display: table;
       margin: 10px auto;
   }
   .logo img {
       height: 65px;
   }
   .navbar {
       margin-bottom: 0;
   }