/* 
CSS Style sheet
Ver. 1.2
Author: Nishant Dogra
Initial built: 09-10-2017
Updated: 30-06-2018
*/

@media only screen and (max-width: 1999px) {
.container { max-width: 1600px; }
}

@media only screen and (max-width: 1440px) {
.container { max-width: 1260px; }
}

@media only screen and (max-width: 1200px) {
.header-force-framework { display: none; }
}

@media only screen and (max-width: 1024px) {
.layout-common .layout-inner, .layout-form .layout-inner { padding: 50px 20px; }
}

@media only screen and (max-width: 768px) {
h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
header { height: 250px; }
header .logo-section { margin-top: 26px; margin-bottom: 26px; }
footer { margin-top: -150px; padding-top: 150px; }
footer, footer .force-text-right, footer .force-text-left { text-align: center; }
.card { padding: 10px 0; }
.layout-common .layout-inner, .layout-form .layout-inner { padding: 20px; }
.basic-layout { margin-top: -180px; margin-bottom: 50px; }
.basic-layout .layout-form .horizontal { margin-bottom: 10px; }
.basic-layout.app-index-layout { width: 100%; margin-top: -180px; margin-bottom: 40px; position: absolute; bottom: -32px; }
.basic-layout.app-index-layout .layout-form .horizontal { margin-bottom: 0; }
.layout-inner .horizontal { padding: 0; }
.user-initials { width: 36px; height: 36px; font-size: 18px; line-height: 36px; top: 22px; right: 0; }
.big-click-action .verticals { margin-left: 4%; }
.big-click-action .verticals:last-child { margin-left: 0; }
.big-click-action .click-action { padding: 8px 12px; margin-bottom: 10px; margin-right: 0; }
.force-text-center .button { margin-right: 0; margin-left: 0; }
.button-full:last-child { margin-bottom: 0; }
.basic-layout.portfolio, .basic-layout.profiles { margin-top: -180px; margin-bottom: 40px; }
.blog-post-grid { width: calc(50% - 22px); }
/* responsive navigation */
.hidden-xs { display: none !important; }
.visible-xs { display: block !important; }
.header__nav.nav-bar { position: absolute; background-color: #161d2c; margin-top: 0; top: 0; z-index: 1; right: 100%; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; transition: position 2.9s; -webkit-transition: position 2.9s; -moz-transition: position 2.9s; -ms-transition: position 2.9s; -o-transition: position 2.9s; }
.toggle-this { left: 0; box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4); }
.header__nav .toggle-menu { position: fixed; z-index: 1; top: 20px; right: 20px; width: 40px; height: 30px; display: flex; flex-direction: column; justify-content: space-around; padding: 2px 2px 2px 3px; border-radius: 5px; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; }
.header__nav .toggle-menu { position: absolute; right: -100%; margin-right: 25px; }
.header__nav.toggle-this .toggle-menu { position: fixed; right: 0; }
.header__nav.toggle-this { position: fixed; }
.header__nav .line { width: 100%; height: 3px; border-radius: 5px; background-color: #ffffff; transition: transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out; -moz-transition: transform 0.2s ease-out; -ms-transition: transform 0.2s ease-out; -o-transition: transform 0.2s ease-out; }
header nav .nav-link:first-child { margin: 0; }
.toggle-this .line1 { background-color: #ffffff; transform: scale(0.9) rotateZ(-45deg) translate(-8px, 5px); }
.toggle-this .line2 { display: none; }
.toggle-this .line3 { background-color: #ffffff; transform: scale(0.9) rotateZ(45deg) translate(-6px, -4px); }
.toggle .toggle-menu { background-color: white; }
.nav-list { list-style: none; padding: 0 20px; margin: 0; position: absolute; top: 15px; }
.nav-list-item { text-align: left; padding: 4px; float: left; width: 100%; color: #fff; }
li.nav-list-item.inline { width: auto; float: left; margin-right: 10px; }
.nav-list-item hr { float: left; width: 100%; opacity: 0.2; }
.nav-link { color: #fff; font-size: 0; text-decoration: none; position: relative; padding-bottom: 4px; top: 22px; }
.head-nav-mobile .nav-list-item .nav-link { font-size: 16px; opacity: 0.85; top: 0; }
.head-nav-mobile .nav-list-item .nav-link:focus,
.head-nav-mobile .nav-list-item .nav-link:active,
.head-nav-mobile .nav-list-item .nav-link:hover { opacity: 1; text-decoration: none; }
.nav-list-item p { opacity: 0.5; font-size: 16px; }
/* image gallery styles*/
.image-gallery { width: 100%; margin: 0; }
.iframe-video { min-height: auto; }
}

@media only screen and (max-width: 549px) {
hr { margin-top: 10px; margin-bottom: 10px; }
.blog-post-grid { width: 100%; margin: 0; }
.click-card h1 { font-size: 20px; }
.blog-post-grid a, .blog-post-list a, .blog-post-list-thumb a { width: calc(100% - 42px); text-align: center; margin-bottom: 0; }
.blog-post-grid a { margin-bottom: 20px; }
table tr { margin-bottom: 5px; }
table tr td { padding: 0; font-size: 90%; width: auto; vertical-align: top; }
.download-app-heading { margin-top: 0; }
.download-app-cta { width: calc(100% - 40px); padding: 8px 18px; font-size: 16px; margin-bottom: 40px; text-align: center; }
.faq-list { margin-bottom: 10px; }
.download-app-section h2 { font-size: 26px; margin-top: 20px; }
.download-app-section p{ margin-top: 20px; margin-bottom: 20px; }
.faqs-list, .quotes-list { padding-top:0; padding-bottom: 0; }
.download-app-section { margin-top: 20px; }
.avatar-details ul, .avatar-details strong { padding-left: 0; }
}

@media only screen and (max-width: 419px) {
footer { font-size: 16px; }
h4, .h4, .card h4, .card h5 { font-size: 22px; }
.theme-common .portfolio .layout-inner { padding: 50px 5px; }
.layout-profile .h4 { font-size: 16px; }
}