/*Responsive styles */


/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body.boxed #page-wrapper {width:1200px; border-left: 0px solid #fff; border-right: 0px solid #fff; margin:0 auto; background:#f5f5f5; 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
body.boxed #header {width:1200px; border-left: 0px solid #fff; border-right: 0px solid #fff; margin:0 auto; background:#fff; 
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.dl-menuwrapper { display: none;}
body.boxed .welcome-message { width: 1200px;}

}/* end Large devices (large desktops, 1200px and up) */


/* Large devices (large desktops, max 1200px ) */
@media (max-width: 1200px) {
#main-menu { display: none;}



} /* end Large devices (large desktops, max 1200px ) */


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and ( max-width: 1200px) {


/* Sliding Panel */
#panel div { text-align: center;}
#panel ul.info-left { display: inline-block; margin-bottom: 10px;}
#panel ul.info-right { display: inline-block; margin-bottom: 10px;}





/* Services */
.services-box span { font-size: 20px; padding: 20px;}
.services-box h3 { margin-top: 9px;}
.services-box p { margin-top: 20px;}


/* Portfolio */
.overlay-effect figcaption { }


/* Our Team Carousel */
#our-team ul { padding-left: 25px;}


/* Home Layout 2 */
/* Feedbacks Section */
.feedback-box blockquote { margin-top: 120px; margin-left: 0;}


/* Home Layout 3 */
/* Designed2 Section */
.designed2-margin {margin-top: 80px;}


/* Home Layout 5 */
/* Agency Tabs Section */
#agency .tab-content h3 {font-size: 20px;}
#agency .tab-content p {font-size: 13px;}


/* Testimonials2 Section */
#testimonials2 blockquote { font-size: 30px; line-height: 35px;}


/* Home Layout 6 */
#buy-now h3 { font-size: 24px;}


/* Home Layout 7 */
/* Amazing2 Section */
#amazing2 .amazing2-left { margin-top: 50px;}
#amazing2 .amazing2-right { margin-top: 50px;}

.amazing-left { margin-top: 70px;}
.amazing-right { margin-top: 70px;}

/* Home Layout 9 */
/* Recent Projects */
#recent-projects .overlay-effect figcaption { min-height: 80px;}
#recent-projects h3 { font-size: 10px;}
#recent-projects span { font-size: 10px;}


/* Home Layout 10 (Shop) */
/* Banners Section */
#shop-banners .shop-banner span { line-height: 70px;}


/* Text Page */
.text_page .circular-bar canvas { width: 150px;}
.text_page .circular-bar.featured canvas { width: 160px !important; height: 160px !important; margin-top: 23px;}
.text_page .separator2 { padding: 0 50px;}
.text_page .circular-bar span { margin-bottom: 110px; margin-top: -100px;}
.text_page .circular-bar.featured span { margin-bottom: 100px; margin-top: -116px;}


/* Pricing Page */
/* Pricing Tables */
.pricing2 .pricing-table.featured .pricing-header img { transform: none;}
.pricing-table.featured {margin-left: -19px;width: -moz-calc(110% - -18px); width: -webkit-calc(110% - -18px);
width: -o-calc(110% - -18px); width: calc(110% - -18px);}


/* Team Style 1 Page */
.sidebar3 .btn { padding: 14px 29px;}


/* Custom Callout Box Page */
.custom-box-1 p { padding: 0 100px;}


/* Product Item */
.main-image {max-width: 370px;}


/* Laptop Slider */
.flex-direction-nav a { top: 42%;}

} /* end Medium devices (desktops, 992px and up) */


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 992px) { 


/* Responsive Menu */
#dl-menu {text-align: right; padding-top: 37px; margin-right: 80px;}
.dl-menuwrapper { text-align: right !important; margin-right: 80px !important; padding-top: 36px; z-index: 1000; 
-webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; }
.dl-menuwrapper:first-child { margin-right: 100px; }
.dl-menuwrapper button { background: transparent; border: none; width: 25px; height: 28px; text-indent: -900em; 
overflow: hidden; position: relative; cursor: pointer; outline: none; padding: 0; }
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul { background: transparent; }
.dl-menuwrapper button:after { content: ''; position: absolute; width: 100%; height: 4px; background: #3d3d3d; 
border-radius: 4px; left: 0; box-shadow: 0 8px 0 #3d3d3d, 0 16px 0 #3d3d3d; }
.dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.dl-menuwrapper li { position: relative; background: #fafafa; }
.dl-menuwrapper ul li.active { background: #EEEEEE;}
.dl-menu span.icon-angle-right.pull-right { position: absolute; right: 10px; font-size: 11px; top: 20px;}
.dl-menuwrapper li a { display: block; position: relative; padding: 15px 20px; font-size: 16px; line-height: 20px; 
font-weight: 300; color: #3d3d3d; outline: none; }
.dl-menuwrapper li a.active {background: #EEEEEE;}
.dl-menuwrapper li a.active:hover { border-right: 0;}
.no-touch .dl-menuwrapper li a:hover { background: rgba(255,248,213,0.1); }
.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; line-height: 50px; font-family: 'icomoon'; 
speak: none; -webkit-font-smoothing: antialiased; content: "\f105"; color: #3d3d3d; font-size: 12px; }
.dl-menuwrapper li.dl-back:after { left: 10px; color: #3d3d3d; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); }
.dl-menuwrapper .dl-menu { text-align: left; margin: 5px 0 0 0; position: absolute; width: 100%; opacity: 0; display:none; 
-webkit-transform: translateY(10px); transform: translateY(10px); 
-webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dl-menuwrapper .dl-menu.dl-menu-toggle { transition: all 0.3s ease; }
.dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; -webkit-transform: translateY(0px); 
transform: translateY(0px); width: 100%; position: absolute; left: 45px; margin: 0; top: 102px; display: block; }

/* 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: 102px; left: 0; margin: 0; }
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s;  }

@-webkit-keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

@keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

.dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; }

@-webkit-keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; }

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

@keyframes SubMenuAnimIn1 {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}
.dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; }

@-webkit-keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-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: ''; }





.btn-default {padding: 10px 50px;}


/* Sub-Header */
.title { padding: 5px 0;}


/* Slidin Panel */
.slide span.icon-chevron-up { right: 50%;}
#panel div { text-align: center;}
#panel ul.info-left { display: inline-block; margin-bottom: 10px;}
#panel ul.info-right { display: inline-block; margin-bottom: 10px;}


/* Services */
.services-box span { font-size: 20px; padding: 20px;}
.services-box h3 { margin-top: 9px; font-size: 16px;}
.services-box p { margin-top: 20px;}


/* Portfolio */
.overlay-effect figcaption { }
.overlay figcaption h3 { font-size: 14px;}
.overlay figcaption h5 { font-size: 12px;}
.overlay figcaption span { top: 20px;}


/* Our Team Carousel */
#our-team .overlay-effect figcaption { min-height: 120px;}
#our-team ul { padding: 0; margin-top: 10px;}
#our-team ul li { width: 35px; height: 35px;}
#our-team ul li a { line-height: 35px;}


/* Home Layout 2 */
/* Feedbacks Section */
.feedback-box blockquote { margin-top: 120px; margin-left: 0;}


/* Services Section */
.icon-container-left { display: none;}
.icon-container-right { display: none;}




/* Contact Page */
.contact #contact_form input { width: 300px;}
.contact #contact_form textarea { width: 400px;}
.contact-info p { color: #9f9f9f; font-size: 11px;}
.contact-info h4 { margin-bottom: 5px;}
.contact-info span { line-height: 94px;}


/* Text Page */
.text_page .circular-bar canvas { width: 150px;}
.text_page .circular-bar.featured canvas { width: 160px !important; height: 160px !important; margin-top: 23px;}
.text_page .separator2 { padding: 0 50px;}
.text_page .circular-bar span { margin-bottom: 110px; margin-top: -100px;}
.text_page .circular-bar.featured span { margin-bottom: 100px; margin-top: -116px;}


/* Custom Callout Box Page */
.custom-box-1 p { padding: 0 50px;}
.custom-box-3 { padding: 50px;}


/* Buttons Page */
.buttons-intro p { padding: 0 50px;}


/* Product Item */
.main-image {max-width: 260px;}


/* Laptop Slider */
.laptop-mask .flexslider {max-width: 342px; top: 7.5%;}
.flex-direction-nav a { top: 53%;}

/* Shopping Cart */
.shopping-table h4 { margin-top: 90px;}


} /* end Small devices (tablets, 768px and up) */



/* Extra small devices (Phones) */
/* Max Width 768px */
@media (max-width: 768px) {


/* Responsive Menu */
#dl-menu {text-align: right; padding-top: 37px; margin-right: 80px;}
.dl-menuwrapper { text-align: right !important; margin-right: 80px !important; padding-top: 36px; z-index: 1000; 
-webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; }
.dl-menuwrapper:first-child { margin-right: 100px; }
.dl-menuwrapper button { background: transparent; border: none; width: 25px; height: 28px; text-indent: -900em; 
overflow: hidden; position: relative; cursor: pointer; outline: none; padding: 0; }
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul { background: transparent; }
.dl-menuwrapper button:after { content: ''; position: absolute; width: 100%; height: 4px; background: #3d3d3d; 
border-radius: 4px; left: 0; box-shadow: 0 8px 0 #3d3d3d, 0 16px 0 #3d3d3d; }
.dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.dl-menuwrapper li { position: relative; background: #fafafa; }
.dl-menuwrapper ul li.active { background: #EEEEEE;}
.dl-menu span.icon-angle-right.pull-right { position: absolute; right: 10px; font-size: 11px; top: 20px;}
.dl-menuwrapper li a { display: block; position: relative; padding: 15px 20px; font-size: 16px; line-height: 20px; 
font-weight: 300; color: #3d3d3d; outline: none; }
.dl-menuwrapper li a.active {background: #EEEEEE;}
.dl-menuwrapper li a.active:hover { border-right: 0;}
.no-touch .dl-menuwrapper li a:hover { background: rgba(255,248,213,0.1); }
.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; line-height: 50px; font-family: 'icomoon'; 
speak: none; -webkit-font-smoothing: antialiased; content: "\f105"; color: #3d3d3d; font-size: 12px; }
.dl-menuwrapper li.dl-back:after { left: 10px; color: #3d3d3d; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); }
.dl-menuwrapper .dl-menu { text-align: left; margin: 5px 0 0 0; position: absolute; width: 100%; opacity: 0; display:none; 
-webkit-transform: translateY(10px); transform: translateY(10px); 
-webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dl-menuwrapper .dl-menu.dl-menu-toggle { transition: all 0.3s ease; }
.dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; -webkit-transform: translateY(0px); 
transform: translateY(0px); width: 100%; position: absolute; left: 45px; margin: 0; top: 102px; display: block; }

/* 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: 102px; left: 0; margin: 0; }
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s;  }

@-webkit-keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

@keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

.dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; }

@-webkit-keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; }

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

@keyframes SubMenuAnimIn1 {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}
.dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; }

@-webkit-keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-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: ''; }






/* InfoCard */
.logo-container.hasInfoCard:before,
.logo-container #infocard {display:none;}


/* Boxed Slideshow */
#boxed-slideshow .welcome-message { top: 55%;}
#boxed-slideshow .welcome-message h2 { font-size: 40px;}

/* slider */
.firstslide h1 { font-size: 28px; color: #fff; line-height: 50px; margin-left:0; margin-top: 0; font-weight:300; padding-top:50px}
.firstslide h3 { color: #fff; font-size: 18px; line-height: 25px; margin-left:5px; font-weight:300; padding-top:100px}

.ptop50 { padding-top: 20px;}
.mbottom100 { margin-bottom: 0;}


/* Logo */
#logo {padding: 30px 0;}


/* Slidin Panel */
.slide span { right: 48%;}
#panel ul.info-left li { float: none; border-right: none; margin-right: 0;}
#panel div { text-align: center;}
#panel ul.info-left { float: none; display: inline-block; margin-bottom: 10px;}
#panel ul.info-right { float: none; display: inline-block; margin-bottom: 10px;}


/* Search */
.searchPanel .searchForm.active {right: 12px;}


/* Sub-Header */
.title { padding: 5px 0px;}


/* Services */
.services-box { text-align: center; margin-bottom: 50px;}
.services-box span { float: none; font-size: 20px; padding: 20px; display: inline-block;}
.services-box h3 { font-size: 20px; display: block; margin-top: 20px; margin-left: 0;}
.services-box p { margin-top: 20px; margin-bottom: 20px;}


/* Portfolio */
.portfolio-wrapper .portfolio-item { width: 50%;}
.overlay-effect figcaption { }
.overlay figcaption h3 { font-size: 16px;}
.overlay figcaption span { top: 20px;}


/* Our Team Carousel */
#team h2 { font-size: 24px;}
#our-team .owl-buttons { top: 0;}


/* Buy Section */
.buy h2 { font-size: 30px; line-height: 32px;}
.buy h5 { margin-bottom: 25px;}


/* Subscribe */
#subscribe input { width: 200px;}


/* Home Layout 2 */
/* Amazing Section */
#amazing { padding: 40px 0;}
#amazing .right { text-align: center;}
#amazing img { margin: 0 auto;}
ul.number-list { text-align: center; padding-top: 25px;}
ul.number-list li { display: block; margin-bottom: 30px;}
ul.number-list span { margin-right: 0;}
ul.number-list li h4 { display: block;}






/* Pricing Page */
/* Pricing Tables */
h3.pricing { margin-bottom: 50px;}
.pricing-table { margin-bottom: 50px;}
.pricing-table.featured { transform: none; width: inherit; margin-left: 0;}
.pricing2 .pricing-table ul li {text-align: center; margin-left: 0;}
.pricing2 .pricing-table .pricing-header img { margin: 0 auto;}
.pricing2 .pricing-table.featured .pricing-header img { transform: none;}


/* Coming Soon Page */
.coming-soon h2.section-title { margin-top: 0;}


/* Contact Page */
.contact #contact_form input { width: 100%;}
.contact #contact_form textarea { width: 100%;}


/* Buttons Page */
.buttons-intro p { padding: 0;}


/* Laptop Slider */

.flex-direction-nav a { top: 43%;}


/* Footer */
footer h3 { margin-bottom: 20px;}
footer .fleft { width: 100%;}

} /* end Extra small devices (Phones) Max Width 768px */


/* Max Width 320px */
@media (max-width: 320px) {

/* Responsive Menu */
#dl-menu {text-align: right; padding-top: 37px; margin-right: 80px;}
.dl-menuwrapper { text-align: right !important; margin-right: 80px !important; padding-top: 36px; z-index: 1000; 
-webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; perspective-origin: 50% 200%; }
.dl-menuwrapper:first-child { margin-right: 100px; }
.dl-menuwrapper button { background: transparent; border: none; width: 25px; height: 28px; text-indent: -900em; 
overflow: hidden; position: relative; cursor: pointer; outline: none; padding: 0; }
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul { background: transparent; }
.dl-menuwrapper button:after { content: ''; position: absolute; width: 100%; height: 4px; background: #3d3d3d; 
border-radius: 4px; left: 0; box-shadow: 0 8px 0 #3d3d3d, 0 16px 0 #3d3d3d; }
.dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.dl-menuwrapper li { position: relative; background: #fafafa; }
.dl-menuwrapper ul li.active { background: #EEEEEE;}
.dl-menu span.icon-angle-right.pull-right { position: absolute; right: 10px; font-size: 11px; top: 20px;}
.dl-menuwrapper li a { display: block; position: relative; padding: 15px 20px; font-size: 16px; line-height: 20px; 
font-weight: 300; color: #3d3d3d; outline: none; }
.dl-menuwrapper li a.active {background: #EEEEEE;}
.dl-menuwrapper li a.active:hover { border-right: 0;}
.no-touch .dl-menuwrapper li a:hover { background: rgba(255,248,213,0.1); }
.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; line-height: 50px; font-family: 'icomoon'; 
speak: none; -webkit-font-smoothing: antialiased; content: "\f105"; color: #3d3d3d; font-size: 12px; }
.dl-menuwrapper li.dl-back:after { left: 10px; color: #3d3d3d; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); }
.dl-menuwrapper .dl-menu { text-align: left; margin: 5px 0 0 0; position: absolute; width: 100%; opacity: 0; display:none; 
-webkit-transform: translateY(10px); transform: translateY(10px); 
-webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dl-menuwrapper .dl-menu.dl-menu-toggle { transition: all 0.3s ease; }
.dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; -webkit-transform: translateY(0px); 
transform: translateY(0px); width: 100%; position: absolute; left: 45px; margin: 0; top: 102px; display: block; }

/* 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: 102px; left: 0; margin: 0; }
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s;  }

@-webkit-keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

@keyframes MenuAnimOut1 {
  0% { }
  50% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    -webkit-transform: translateZ(-372.5px) rotateY(15deg);
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

.dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; }

@-webkit-keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes MenuAnimIn1 {
  0% {
    -webkit-transform: translateZ(-500px) rotateY(0deg);
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translateZ(-250px) rotateY(30deg);
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateZ(0px) rotateY(0deg);
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; }

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

@keyframes SubMenuAnimIn1 {
  0% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}
.dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; }

@-webkit-keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes SubMenuAnimOut1 {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-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: ''; }







h2.section-title { font-size: 26px;}
h2.section-title2 { font-size: 26px;}

/* Logo */
#logo { padding: 36px 0;}

#header { min-height: 83px;}




/* Logo */
#logo img { max-width: 130px;}


/* Slidin Panel */
.slide span { right: 46%;}




} /* end Max Width 320px */


@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}