/*
Theme Name: SmartDataSystem
Theme URI: www.smartdatasystem.com
Description: Tema desarrollado para SmartDataSystem. 2018
Version: nelson.nino@in-deev.com
Author URL; www.in-deev.com
*/

/*-----------------------------------------------------------
* Project Name: SmartDataSystem
* File name:  style.css
* Data: Nov 2018
* Author: www.in-deev.com
------------------------------------------------------------*/


/*--------------------COMENTARIOS-----------------------------
* Width: 1600px
* Parallax: NO
* Responsive: YES
-------------------------------------------------------------*/
 
/*-- RESET --*/

*,.no-margin {
    margin:0;
    padding:0;
}
.no-margin{
    margin: 0!important
}

body,html,#loader {
    width: 100%;
    height:100%
}
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-rendering:optimizelegibility;
    color:#5b5e6d;
    letter-spacing: .2px
}


/*-- GENERAL STYLES --*/

h1 {
    font-size:28px;
    line-height:1.1;
    margin:0 0 24px;
    font-weight: 700;
    color: #323648
}
h2 {
    font-size:24px;
    line-height:1.2;
    font-weight: 700;
    display: inline-block;
    margin: 0;
    color: #323648
}

h3 {
    font-size:20px;
    line-height:1.3;
    margin:15px 0;
    font-weight: 400;
    color: #323648
}

h4 {
    font-size:18px;
    line-height:1.4;
    font-weight: 400;
    color: #323648
}
h5 {
    font-size:12px;
    line-height:1.5;
}
p {
    line-height: 1.6;
    font-weight: 400;
    margin: 16px 0
}


a:active,a:focus,a:hover,button:focus {
    outline:0!important;
    text-decoration:none
}
a {
    color: #98dc5d
}

p::-moz-selection {
    color: #FFFFFF;
    background: #98dc5d
}
p::selection {
    color: #FFFFFF;
    background: #98dc5d
}


.cursor {
    cursor:pointer
}

.icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-block;
}


.btn {
    width: auto;
    text-align: center;
    border-radius: 8px;
    background: #98dc5d;
    color: #fff;
    border: none;
    font-size: 16px;
    padding: 14px 24px;
    margin: 8px 8px 8px 0;
    display: inline-block;
    position: relative;
    transition: all .4s linear
}
a.btn {
    color: #FFF !important
}

.btn-primary:hover {
    background: #7ebd5f
}

.btn-default {
    background: #fab840;
    line-height: 1;
}
.btn-default:hover {
    background: #f7a53e;
    color: #FFFFFF
}



/*--- GENERAL --- */



.container-fluid {
    padding-right: 0;
    padding-left: 0;
}
.bg-gray {
    background: #fafafa;
    padding: 120px 0
}
.divider-gray {
    background: #fafafa;
}


.text-white {
    color: #dadada
}
.text-green {
    color: #96db5b
}
.text-red {
    color: #98dc5d
}

/* --- MARGINS --- */
.center{
    margin: 0 auto;
    float: none
}

.top24{
    margin-top: 24px
}
.top32{
    margin-top: 32px
}
.top40{
    margin-top: 40px
}
.top56{
    margin-top: 56px
}
.top72{
    margin-top: 72px
}
.top80{
    margin-top: 80px
}

.top120{
    margin-top: 120px;
}

.bottom80{
	margin-bottom: 80px;
}

hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #dadada;
}

/* --- HEADER --- */
header {
    min-height: 70px
}


.navbar-light {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: #FFF
}
.navbar {
    margin-bottom: 0;
    border-radius: 0;
    border: none;
/*     padding: .5rem 0; */
	padding: 1rem;
    align-items: initial;
}

.navbar-brand {
    width: 198px;
    margin-left: 16px
}

.navbar-light .navbar-toggler {
    margin: 8px;
    border-color: transparent;
}
.navbar-light .navbar-toggler .icon-bar {
    background-color: #98dc5d;
}

.navbar-light .navbar-nav>li {
    padding: 12px 0
}
.navbar-light .navbar-nav>li>a {
    color: #5b5e6d;
    padding: 0 16px;
}

.navbar-light .navbar-nav>li>a:hover {
    color: #98dc5d
}
.navbar-light .navbar-nav>.active>a, .navbar-light .navbar-nav>.active>a:focus, .navbar-light .navbar-nav>.active>a:hover {
    background-color: transparent;
    color: #98dc5d
}
.navbar-light .navbar-nav>.active>a:after {
    width: 100%;
}

.dropdown-menu {
    border: none;
    background: #FAFAFA;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC
}
.dropdown-menu li {
    font-size: 15px;
    padding: 12px 0
}
.dropdown-menu li a {
    color: #5b5e6d;
    padding-left: 32px;
}
.dropdown-menu li:hover a {
    color: #323648
}

.navbar-light .navbar-nav .open .dropdown-menu>li>a {
    text-align: center;
}

.navbar-light .navbar-toggler:focus,
.navbar-light .navbar-toggler:hover {
    background-color: transparent;
}


.navbar-toggler span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #96db5b;
    transition: all 0.15s;
}

.navbar-toggler.collapsed span {
    margin-bottom: 6px
}
.navbar-toggler span:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: 10px 7px;
}

.navbar-toggler span:nth-child(3) {
    opacity: 0;
}

.navbar-toggler span:nth-child(4) {
    transform: rotate(-45deg);
    transform-origin: 10px -5px;
}

.navbar-toggler.collapsed span:nth-child(2),
.navbar-toggler.collapsed span:nth-child(4) {
    transform: rotate(0);
}

.navbar-toggler.collapsed span:nth-child(3) {
    opacity: 1;
}

.navbar-collapse {
/*     padding: 16px 0; */
	padding: 0;
}



/* --- HOME --- */

.product-card {
    min-width: 280px;
    max-width: 380px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
    padding: 40px 24px
}
.product-card img {
    width: 70px
}
.product-card div {
    min-height: 148px;
}

.solution-card {
    width: 33%;
    min-width: 280px;
    max-width: 380px;
    height: 120px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
    padding: 48px 0;
    background: #FFFFFF;
    transition: all .3s ease-out
}
.solution-card:hover {
    background: #4ce9fa;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
}
.solution-card:hover h4 {
    color: #FFFFFF;
}

.evidence-card {
    width: 33%;
    min-width: 280px;
    max-width: 380px;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
    padding: 48px 0;
}

.evidence-card img {
    width: 216px;
}
.client-img {
    width: 100%;
    max-width: 274px;
    display: inline-block;
    margin: 8px
}

.partner-img {
    width: 100%;
    max-width: 172px;
    display: inline-block;
    margin: 8px
}





/* --- PAGE --- */

.default {
    padding: 80px 0
}

.content a {
    color: #98dc5d;
}
.content ul, .content ol {
    margin-left: 20px
}
.content ul li, .content ol li  {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #CCC;
}
.container-table {
    overflow-x: auto
}
.content table {
    border-bottom: 1px solid transparent;
    border-color: rgba(204,204,204,0.5);
    width: 100%;
    margin: 0 0 10px 0;
    border-collapse: collapse;
    border-spacing: 0;
}
.content td, .content th {
    border-top: 1px solid transparent;
    border-color: rgba(204,204,204,0.5);
    padding: 5px 10px 5px 5px;
}
.content img {
    width: 100%;
    height: auto;
}

.container-sections section {
    margin: 40px 0 80px
}
.container-sections section:nth-child(even) {
    background: #FAFAFA;
    padding: 80px 0
}
.container-sections img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

/* --- RESOURCES PAGE -- */
.wrapper {
    position: relative;
    width: 100%;
}

.btn-sidebar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: fixed;
    top: 70px;
    left: 12px;
    z-index: 1;
    background: #fab840;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(0,0,0,.2)
}
.btn-sidebar span {
    width: 16px;
    height: 20px;
    position: relative;
    top: 11px;
    left: 13px;
    background-image: url(img/arrow.svg);
    display: block;
}
.left-sidebar {
    width: 100%;
    height: 100%;
    position: fixed;
    margin-top: -4px;
    margin-left: -100%;
    z-index: 1;
    padding: 40px 24px;
    background: #323648;
    transition: all .3s ease-out
}
.left-sidebar.sidebar-show {
    margin-left: 0;
}

#sidenav a {
    padding: 6px 8px 6px 0;
    text-decoration: none;
    color: #FFFFFF;
    display: block;
}
#sidenav a:hover {
    color: #FAFAFA;
}

#sidenav a.lev1 {
    font-size: 18px;
}
#sidenav a.lev2 {
    font-size: 14px;
	padding-left: 10px;
}
#sidenav a.lev3 {
    font-size: 14px;
    padding-left: 24px
}

.main {
    padding: 80px 8px 80px 48px
}
.resources-section {
    padding: 80px 0;
    border-bottom: 2px solid #EBEBEB
}
h3.level1 {
    font-size: 28px;
    text-transform: uppercase;
}
h3.level3 {
    font-size: 20px;
}

.syntax_hilite ol li {
    border-bottom: none;
    padding-bottom: 4px
}
.syntax_hilite .pre {
    line-height: 1 !important;
}
.syntax_hilite .pre br {
    line-height: 0;
}



/* --- ABOUT PAGE --- */
.about {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}
.about-shadow {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    z-index: 1
}
.about-text {
    color: #FFFFFF;
    padding: 40px 0;
    position: relative;
    z-index: 10
}
.about-img {
    max-width: 180px
}


/* --- STORIES PAGE --- */
.stories-card {
    width: 248px;
    border-radius: 4px;
    display: inline-block;
    margin: 16px 0;
    padding: 24px;
    box-shadow: 0 0 4px rgba(0,0,0,.2);
    vertical-align: top;
    text-align: center;
}
.stories-card img {
    width: 160px
} 
.storie-heading {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}
.outcomes-box {
    width: 240px;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #CCC;
    margin: 16px
}
.outcomes-box div {
    padding: 24px;
}
.outcomes-box div:last-child {
    padding: 16px;
    background: #F2F2F2;
    border-top: 1px solid #CCC    
}
.storie-img {
    width: 280px;
    display: inline-block;
}



/* --- CONTACT FORM 7 --- */

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity: .5
}
::-moz-placeholder { /* Firefox 19+ */
  opacity: .5
}
:-ms-input-placeholder { /* IE 10+ */
  opacity: .5
}
:-moz-placeholder { /* Firefox 18- */
  opacity: .5
}
form.wpcf7-form label {
    width: 100%
}
input.wpcf7-form-control, textarea.wpcf7-form-control {
    width: 100%;
    height: 48px;
    border: 1px solid #CCC;
    border-radius: 4px;
    background: #FAFAFA;
    padding: 16px;
    margin-bottom: 8px;
}
textarea.wpcf7-form-control {
    height: 120px;
    resize: none;
}

input[type="submit"].wpcf7-form-control {
    width: 160px;
    height: 48px;
    background: #98dc5d;
    color: #fff;
    line-height: 8px;
    border: none;
}

.screen-reader-response, .wpcf7-not-valid-tip {
    font-style: italic;
    color: #fab840;
    font-size: 14px
}
.screen-reader-response ul li {
    list-style: none;
}


/* --- FOOTER --- */
footer {
    width: 100%;
    padding: 72px 0 48px;
    background: #fafafa;
    font-size: 0.8em;
}
.footer-brand {
    width: 100%;
    max-width: 240px;
    display: block;
    margin-top: 18px;
    margin-bottom: 24px
}
.footer-info {
    display: inline-block;
    width: calc(100% - 32px);
    vertical-align: top;
    margin-bottom: 8px
}
ul#menu-footer-1 li, ul#menu-footer-2 li, ul#menu-footer-3 li {
    list-style: none;
}
ul#menu-footer-1 li a, ul#menu-footer-2 li a, ul#menu-footer-3 li a {
    color: #5b5e6d;
    opacity: .8;
    padding: 12px 0;
    display: inline-block;
    transition: all .3s ease-out
}
ul#menu-footer-1 li a:hover, ul#menu-footer-2 li a:hover, ul#menu-footer-3 li a:hover {
    opacity: 1;
}
#menu-footer-1 li:nth-child(1),
#menu-footer-2 li:nth-child(1),
#menu-footer-2 li:nth-child(6),
#menu-footer-3 li:nth-child(1) {
    color: #323648;
    font-weight: 700;
    margin-top: 12px
}


.bottom-bar {
    width: 100%;
    font-size: 12px;
    background: #FAFAFA;
    color: #5b5e6d;
    padding: 8px 0 4px
}
.bottom-bar .container {
    border-top: 1px solid #CCC
}
.bottom-bar strong{
    padding: 8px 0;
    display: inline-block;
}


.legal-footer li {
      list-style: none;
}


/*-- RESPONSIVE -- */

@media (min-width: 768px) {
    h1 {
        font-size:56px;
    }
    h2 {
        font-size: 34px;
    	line-height: 1.2em !important;
    }

    h3 {
        font-size:32px;
    }

    h4 {
        font-size:24px;
    }

    .container>.navbar-collapse {
        margin-right: -15px;
        margin-left: -15px
    }

    .navbar-brand {
        width: 210px;
    }

    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: 0;
    }

    .wrapper {
        display: flex;
        justify-content: space-between;
    }
    .btn-sidebar {
        display: none
    }
    .left-sidebar {
        width: 280px;
        height: auto;
        padding-top: 24px;
        flex-shrink: 0;
        z-index: 100;
        position: relative;
        margin-left: 0;
        box-shadow: 0 0 0 rgba(12,13,14,0.05);
        transition: box-shadow ease-in-out .1s,transform ease-in-out .1s;
        background: #182A38
    }
    .sticky-container {
        position: -webkit-sticky;
        position: sticky;
        width: auto;
        top: 96px;
        margin-bottom: 16px;
        padding-left: 16px
    }
    #sidenav a {
        color: #ffffff;
    }
    #sidenav a:hover {
        color: #fab840;
    }
    .main {
        width: calc(100% - 180px);
        padding: 80px 24px
    }

    .stories-card {
        width: 280px;
        margin: 16px;
    }

    .about-text {
        padding: 80px 0;
    }


}

@media (min-width: 992px) {


    .navbar-brand {
        width: 300px;
    }
    .navbar-light .navbar-collapse {
        border-bottom: none;
    }

    .container>.navbar-header {
        border-bottom: none;
    }

    .navbar-light .navbar-collapse {
        box-shadow: none;
    }
    .navbar-light .navbar-nav>li>a {
/*         padding: 12px; */
        font-size: 15px;
		line-height: 52px;
   		display: block;
    }

    .navbar-light .navbar-nav>li {
        padding: 4px 8px;
		height: 60px;
    }
	
	.navbar-light .navbar-nav>li:not(.sign-in):after {
        content: "";
		display: block;
		position: absolute;
   		left: 50%;
		width: 0%;
		height: 3px;
		background-color: #182A38;	
		transition: all 0.3s ease-in-out;
    }
	
	.navbar-light .navbar-nav>li:nth-last-child(2):after {
		height: 0;
    }
	
	.navbar-light .navbar-nav>li:hover:after {
		width: 100%;
    	left: 0;
    	transform: translateX(0%);
		
    }
	
	.sign-in {
		margin-left: 40px;
	}

    .sign-in a {
        background: #fab840;
        border-radius: 4px;
        color: #FFFFFF !important;
        transition: all .3s linear;height: 38px;
   		line-height: 38px !important;
		margin-top: 6px;
   		margin-bottom: 6px;
    }
    .sign-in a:hover {
        background: #f7a53e;
        color: #FFFFFF;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .navbar-nav>li>.dropdown-menu {
/*         min-width: 320px; */
		min-width: 220px;
        border: none;
        border-radius: 4px;
        box-shadow: 0 0 12px rgba(0,0,0,.2);
        left: -20px;
        margin-top: 0px;
        background: #FFFFFF;
		padding: 0;
    }
    .dropdown-menu li {
        padding: 0;
    }

    .dropdown-menu>li>a {
        color: #5b5e6d;
        padding: 14px 32px;
        display: block;
        font-size: 14px;
        transition: all .3s linear
    }
    .dropdown-menu>li>a:hover {
        background: #98DC5D;
        color: #ffffff;
    }
    .navbar-light .navbar-nav .open .dropdown-menu>li>a {
        text-align: left;
    }


    .navbar-light, .navbar-brand, .navbar-right {
        transition: all .4s linear;
		padding: 0 1rem;
    }
    .navbar-light.nav-scroll {
        box-shadow: 0 4px 4px rgba(0,0,0,.2)
    }

}


@media (min-width: 1200px) {

    .navbar-brand {
        width: 360px;
        margin-top: 6px
    }

}


.widget_search div{
    position: relative;
    display: table;
    border-collapse: separate;
}


.widget_search [type=text] {
    padding: 6px 20px 6px 25px;
}


.widget_search input[type=submit]{
    background-color: #fab840 !important;
    color: #fff;
	border: none;
    padding: 8px;
}


.widget_categories ul li {
    padding: 8px 0;
    list-style: none;
    border-bottom: 1px solid #e2e2e2;
}

.widget{
	margin-top: 50px;
}

.blog-content{
    padding-right: 80px;
}

.post-link a {
   font-size:21px;
}

.post-link .col-md-6 {
   padding: 0px;
}

.blog-content img {
	width: 100%;
	height: auto;
}