html{box-sizing: border-box;}
*,*:before,*:after{box-sizing: inherit;}

body {
    text-align: center;
    font-family: 'Open Sans';
    font-size: 1em;
    color: #333;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {font-weight: 300;}

h1 {font-size: 2.5em; }
h2 {font-size: 2em;}
h3 {font-size: 1.75em;}
h4 {font-size: 1.5em;}
h5 {font-size: 1.25em;}
h6 {font-size: 1em;}

a {
    color: inherit;
    text-decoration: none;
}

.toggle-control {display: none;}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

button {
    padding: 0 30px;
    background-color: #2C58A8;
    border: none;
    outline: none;
    border-radius: 5px;
    line-height: 50px;
    font-weight: 400;
    color: #fff;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
    overflow: hidden;
}

.breadcrumbs {
    max-width: 1200px;
    margin: 20px auto;
    text-align: left;
}

.breadcrumbs li {display: inline-block;}

.breadcrumbs span {
    font-size: 0.8em;
    text-transform: uppercase;
}

.breadcrumbs span:before {
    content: '/';
    padding: 0 9px 0 5px;
    color: #ccc;
}

.breadcrumbs ~ section .wrapper {text-align: left;}
.breadcrumbs ~ section .wrapper p,
.breadcrumbs ~ section .wrapper li {line-height: 30px;}

#partners li,
#features nav a:before,
#services nav a:before,
#homepage #features .icon span {background: url(/assets/img/lojcomm_imgs.png) no-repeat;}

/*header*/
header {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    text-align: right;
}

header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    width: 100%;
    height: 30px;
    background: #036;
}

header:after {
    content: '';
    clear: both;
    display: table;
}

.suporte24h {
    padding: 0 20px;
    background-color: #036;
    line-height: 30px;
    font-size: 0.8em;
    color: #fff;
    text-transform: uppercase;
}

.suporte24h span[itemprop="name"]:before {content: 'atendimento ';}

header > a {
    float: left;
    display: block;
    margin: 11px 20px;
}

header nav {
    margin: 20px 0;
    line-height: 50px;
}

header nav > .toggle {display: none;}

header nav li {
    position: relative;
    display: inline-block;
    margin: 0 -2px;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
}

header nav a {
    display: block;
    padding: 0 15px;
    cursor: pointer;
}

header nav li:hover,
header nav li ul {
    background-color: #2C58A8;
    color: #fff;
}

header nav li ul {
    position: absolute;
    display: none;
    width: 200px;
    border: 2px solid #2C58A8;
    text-align: left;
}

header nav li:hover ul {display: block;}

header nav li li {
    display: block;
    margin: 0;
}

header nav li li a:hover {
    background-color: #fff;
    color: #333;
}

/*footer*/
footer {
    background: #003366;
    text-align: left;
    line-height: 1.5em;
    color: #fff;
}

footer .wrapper {
    position: relative;
    padding: 20px 0;
}

footer h3 {
    font-size: 1em;
    font-weight: 400;
    text-transform: uppercase;
}

footer strong {
    font-size: 1.1em;
    font-weight: 400;
}

#contact {
    margin-bottom: 20px;
    padding: 0 20px;
    text-align: center;
}

.contact-point {
	display: inline-block;
	height: 60px;
    margin: 0 25px 15px;
}

.contact-point p {text-align: right;}

#contact .media-body,
#contact .media-right {
	display: inline-block;
	vertical-align: middle;
}

#contact .media-right {
    width: 50px;
    height: 50px;
	margin-left: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    text-align: center;
    line-height: 46px;
    font-size: 25px;
    vertical-align: middle;
}

#contact .media-right img {margin-top: 8px;}

#newsletter {
    clear: both;
    padding: 20px;
    border-top: 1px solid #587BBA;
    border-bottom: 1px solid #587BBA;
    text-align: right;
}

#newsletter input {
    width: 250px;
    height: 40px;
    margin-right: -4px;
    padding: 0 5px;
    background: none;
    border: 1px solid #fff;
    line-height: 40px;
    color: #fff;
}

#newsletter button {
    position: relative;
    top: 1px;
    height: 40px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    line-height: 40px;
    color: #2C58A8;
}

#newsletter span {
    padding-right: 10px;
    font-size: 0.8em;
    text-transform: uppercase;
}

footer .wrapper > p {
    clear: both;
    position: absolute;
    margin-top: -53px;
    left: 20px;
    font-size: 0.8em;
    text-transform: uppercase;
}

/*intro*/

#intro {
    height: 300px;
    text-align: center;
    color: #fff;
}

#intro p {
    line-height: 1.325em;	
    font-size: 1.4em;
    font-weight: 300;
}

#intro iframe {
	background: -webkit-linear-gradient(top, #193068 0%,#1c3f53 100%);
	background: linear-gradient(to bottom, #193068 0%,#1c3f53 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193068', endColorstr='#1c3f53',GradientType=0 );
}


/*homepage*/
#homepage #intro {margin-bottom: 20px;}
#homepage .breadcrumbs {display: none;}
#homepage article section {padding-bottom: 50px;}
#homepage article .wrapper {text-align: center;}

#homepage #recent-works {
    background-color: #EDEDED;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

#homepage #recent-works .slick-slide {
    position: relative;
    padding: 0 20px;
    text-align: center;
}

#homepage #recent-works h3 {
    position: absolute;
    bottom: 0;
    left: 10px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.75);
    font-size: 1em;
    color: #fff;
    text-transform: uppercase;
}

#homepage #features li {
    display: inline-block;
    width: 25%;
    margin: 0 -2px;
    padding: 20px;
    vertical-align: top;
}

#homepage #features .icon {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    padding: 20px 0;
    text-align: center;
    background-color: #2C58A8;
    border-radius: 100%;
}

#homepage #features li:hover .icon {background-color: #003366;}

#homepage #features .icon span {
    display: block;
    width: 59px;
    height: 59px;
    margin: 0 auto;
}

#homepage #features li:nth-child(1) .icon span {background-position: -175px 0;}
#homepage #features li:nth-child(2) .icon span {background-position: -175px -59px;}
#homepage #features li:nth-child(3) .icon span {background-position: -175px -118px;}
#homepage #features li:nth-child(4) .icon span {background-position: -175px -177px;}
#homepage #features li:nth-child(5) .icon span {background-position: -234px -177px;}
#homepage #features li:nth-child(6) .icon span {background-position: -234px -118px;}
#homepage #features li:nth-child(7) .icon span {background-position: -175px -236px;}
#homepage #features li:nth-child(8) .icon span {background-position: -234px -236px;}

#homepage #features strong {
    font-weight: 400;
    text-transform: uppercase;
}

#homepage a.h-button {
    display: inline-block;
    margin-top: 20px;
    padding: 0 30px;
    border: 2px solid #2C58A8;
    line-height: 35px;
    color: #2C58A8;
    transition: all 0.3s ease-in-out;
}

#homepage a.h-button:hover {
    background-color: #2C58A8;
    color: #fff;
}

#testimonials li {
    display: inline-block;
    width: 50%;
    margin: 0 -2px;
    padding: 20px;
    text-align: left;
}

#testimonials h2 {
    margin-bottom: 0;
    font-size: 1.5em;
    font-weight: 400;
}

#testimonials small {font-size: 0.9em;}

#testimonials p {
    margin-top: 10px;
    line-height: 1.325em;
    font-size: 1.2em;
}

#testimonials .media-left {
    float: left;
    width: 80px;
    height: 80px;
    background: #000;
    border-radius: 100%;
}

#testimonials .media-body {margin-left: 100px;}

#partners {background-color: #F2F2F2;}

#homepage #partners {padding-bottom: 0;}

#partners .wrapper {
	padding: 20px 0;
	text-align: center;
}

#partners li {
    display: inline-block;
    margin: 20px 50px;
    vertical-align: bottom;
}

#partners li:nth-child(1){width:130px; height:38px; background-position: 0 0;}
#partners li:nth-child(2){width:142px; height:38px; background-position: 0 -38px;}
#partners li:nth-child(3){width:172px; height:50px; background-position: 0 -76px;}
#partners li:nth-child(4){width:110px; height:38px; margin: 0; background: none; /*background-position: 0 -207px;*/}
#partners li:nth-child(4) div {position: relative; top: -50px; transform: scale(0.75); -webkit-transform: scale(0.75); filter: grayscale(100%); -webkit-filter: grayscale(100%);}

#partners li span {display: none;}

/*features / services*/
#features .wrapper,
#services .wrapper {padding-top: 0;}

section nav {
    float: left;
    width: 280px;
    margin-top: 25px;
    padding: 10px 0;
    background-color: #282828;
    text-align: left;
}

section nav a {
    display: block;
    line-height: 60px;
    opacity: 0.6;
    color: #fff;
}

#features nav a:before,
#services nav a:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 15px;
    vertical-align: middle;
}

section nav a:hover,
section nav .current a {
    background-color: #2C58A8;
    opacity: 1;
    color: #fff;
}

    /*features nav*/
    #features nav a[href="#navegacao"]:before {background-position: -234px 0;}
    #features nav a[href="#seguranca"]:before {background-position: -258px 0;}
    #features nav a[href="#seo"]:before {background-position: -282px 0;}
    #features nav a[href="#promocoes"]:before {background-position: -306px 0;}
    #features nav a[href="#logistica"]:before {background-position: -234px -72px;}
    #features nav a[href="#pagamento"]:before {background-position: -258px -72px;}
    #features nav a[href="#relacionamento"]:before {background-position: -282px -72px;}
    #features nav a[href="#administracao"]:before {background-position: -234px -24px;}
    #features nav a[href="#integracao"]:before {background-position: -282px -24px;}

    /*services nav*/
    #services nav a[href="#personalizacao"]:before {background-position: -306px -24px;}
    #services nav a[href="#analytics"]:before {background-position: -234px -48px;}
    #services nav a[href="#risk"]:before {background-position: -258px -48px;}
    #services nav a[href="#emarketing"]:before {background-position: -282px -48px;}
    #services nav a[href="#integracao"]:before {background-position: -282px -24px;}
    #services nav a[href="#seo"]:before {background-position: -306px -72px;}
    #services nav a[href="#medias"]:before {background-position: -234px -96px;}

#features .wrapper article,
#servicos .wrapper article {
    float: left;
    width: calc(100% - 300px);
    padding: 0 20px;
}

#features .wrapper article h2,
#servicos .wrapper article h2 {
    text-align: right;
    color: #2C58A8;
}

#features .wrapper article h3,
#servicos .wrapper article h3 {
    clear: both;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

#features .wrapper article ul,
#services .wrapper article ul {
    margin-left: 30px;
    list-style: circle;
    text-align: left;
}

#features .wrapper article li,
#services .wrapper article li {margin: 10px 0;}

#features .wrapper article td,
#services .wrapper article td {padding: 15px;}

#features .wrapper article img,
#services .wrapper article img {
	display: block;
	margin: auto;
	text-align: center;
}

#img_credit {
	display: block;
	padding-top: 20px;
	text-align: right;
	font-size: 0.5em;
	color: #888;
	text-transform: uppercase;	
}

section#cases article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}

section#cases article:nth-child(2n+1) {text-align: right;}
section#cases article:nth-child(2n+1) img {float: left; margin-right: 50px;}

section#cases article:nth-child(2n+2) {text-align: left;}
section#cases article:nth-child(2n+2) img {float: right; margin-left: 50px;}

section#cases h1 {color: #2C58A8;}

section#cases p {
    line-height: 1.5em;
    color: #888;
}

/*solicite-um-orcamento*/
#orcamento {
    max-width: 1200px;
    margin: 50px auto;
    text-align: left;
}

#orcamento table {width: 100%;}
#orcamento td:nth-child(1) {width: 40%;}
#orcamento td:nth-child(2) {width: 60%; padding-left: 20px;}

#orcamento td div {padding: 10px 0;}

#orcamento input {
    width: 100%;
    height: 50px;
    padding: 0 5px 0 50px;
    border: 1px solid #666;
    border-radius: 3px;
    line-height: 50px;
}

#orcamento .input-with-icon {position: relative;}

#orcamento .input-with-icon i {
    position: absolute;
    top: 11px;
    left: 11px;
    height: 48px;
    border-radius: 5px;
    line-height: 48px;
    font-size: 23px;
    color: #999;
}

#orcamento textarea {
    width: 100%;
    height: 190px;
    padding: 10px;
    border: 1px solid #666;
    border-radius: 3px;
    overflow-y: auto;
}

#orcamento .input-with-icon input:focus,
#orcamento textarea:focus {border-color: #2C58A8;}
#orcamento .input-with-icon input:focus ~ i{color: #2C58A8;}

#orcamento tfoot {text-align: right;}

#orcamento tfoot button:after {content: 'Enviar'; margin-left: 10px;}

/*about*/
#quem-somos #infos .wrapper {padding-top: 0;}
#quem-somos td {padding: 20px;}

/*slick*/
.slick-slide img {
    display: inline-block;
    width: 100%;
    height: auto;
}

.slick-dots {margin-top: 30px;}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 100%;
    font-size: 0;
    background: none;
    border: 1px solid #666;
}

.slick-dots .slick-active button {
    background-color: #2C58A8;
    border-color: #2C58A8;
}

@media only screen and (max-width : 1024px) {
    header nav a {font-size: 0.9em;}
    #partners li {margin: 20px 25px;}
    .breadcrumbs, .wrapper, #orcamento, section#cases {padding-right: 20px; padding-left: 20px;}
    #cases #categories li {width: 11.5%;}
    #cases #categories #cama-mesa-banho {width: 19.5%;}
}

@media only screen and (max-device-width : 1279px) and (orientation : landscape) {
    header:before, .suporte24h {height: 50px; line-height: 50px;}
    header > a {float: none; text-align: center;}
    header nav {position: absolute; top: 0; left: 0; margin: 0; text-align: right;}
    header nav .toggle {position: absolute; z-index: 100; display: block; width: 60px; height: 50px; padding: 0; text-align: center; font-size: 1.8em; color: #fff; transition: transform 0.05s ease-in-out;}
    header nav .toggle-control:checked ~ .toggle {background-color: #eee; box-shadow: 5px 5px 5px rgba(0,0,0,0.25); transform: translate3d(300px,0,0); font-size: 1.5em;}
    header nav .toggle-control:checked ~ .toggle i {display: none;}
    header nav .toggle-control:checked ~ .toggle:before {content: '\f00d'; font-family: FontAwesome; color: #999;}
    header nav > ul {position: relative; display: none; width: 300px; padding-right: 15px; background-color: #eee; box-shadow: 5px 5px 5px rgba(0,0,0,0.25); transform: translate3d(-300px,0,0); transition: transform 0.3s ease-in-out;}
    header nav > .toggle-control:checked ~ ul {display: block; transform: translate3d(0,0,0);}
    header nav li ul {position: relative; display: block; width: 300px; padding-right: 15px; background-color: #eee; border: none; text-align: right;}
    header nav li {width: 300px; margin: 0;}
    header nav li, header nav a {display: block; color: #333;}
    header nav a:hover {background: none;}
}

@media only screen and (orientation : portrait) {
    header:before, .suporte24h {height: 50px; line-height: 50px;}
    header > a {float: none; text-align: center;}
    header nav {position: absolute; top: 0; left: 0; margin: 0; text-align: right;}
    header nav .toggle {position: absolute; z-index: 100; display: block; width: 60px; height: 50px; padding: 0; text-align: center; font-size: 1.8em; color: #fff; transition: transform 0.05s ease-in-out;}
    header nav .toggle-control:checked ~ .toggle {background-color: #eee; box-shadow: 5px 5px 5px rgba(0,0,0,0.25); transform: translate3d(300px,0,0); font-size: 1.5em;}
    header nav .toggle-control:checked ~ .toggle i {display: none;}
    header nav .toggle-control:checked ~ .toggle:before {content: '\f00d'; font-family: FontAwesome; color: #999;}
    header nav > ul {position: relative; display: none; width: 300px; padding-right: 15px; background-color: #eee; box-shadow: 5px 5px 5px rgba(0,0,0,0.25); transform: translate3d(-300px,0,0); transition: transform 0.3s ease-in-out;}
    header nav > .toggle-control:checked ~ ul {display: block; transform: translate3d(0,0,0);}
    header nav li ul {position: relative; display: block; width: 300px; padding-right: 15px; background-color: #eee; border: none; text-align: right;}
    header nav li {width: 300px; margin: 0;}
    header nav li, header nav a {display: block; color: #333;}
    header nav a:hover {background: none;}
    #sitemap {overflow: hidden; width: 100%;}
    #contact {width: 100%; margin-top: 30px;}
    #contact, #newsletter {text-align: center;}
    .contact-point {display: inline-block; width: 41%; margin: 0px 4%; vertical-align: top; text-align: right;}
    .contact-point p {margin: 0;}
    footer .wrapper > p {position: relative; margin: 15px 0; text-align: center;}
    #homepage #features li {width: 50%;}
    section nav {width: 100%; padding: 0; overflow-x: auto;}
    section nav:before,
    section nav:after {position: absolute; z-index: 500; width: 20px; background-color: #282828; text-align: center; line-height: 60px; font-family: FontAwesome; color: #444;}
    section nav:before {content: '\f053'; left: 0;}
    section nav:after {content: '\f054'; right: 0; margin-top: -60px;}
    #features nav ul {width: 1550px;}
    #services nav ul {width: 1180px;}
    section nav li {display: inline-block; margin-right: -4px;}
    section nav a {padding-right: 20px; border-right: 1px solid #555;}
    section nav li:last-child a {border: none;}
    #features .wrapper, #servicos .wrapper {padding-top: 0;}
    #features .wrapper article, #servicos .wrapper article {width: 100%; margin-top: 10px;}
    #features .wrapper article .features-2,
    #features .wrapper article .features-2-img {width: 100%; padding: 0;}
    #cases #categories {height: 40px; overflow-x: auto;}
    #cases #categories:before,
    #cases #categories:after {position: absolute; width: 15px; background-color: #f0f0f0; text-align: center; line-height: 40px; font-family: FontAwesome; font-size: 0.7em; color: #999;}
    #cases #categories:before {content: '\f053'; left: 0;}
    #cases #categories:after {content: '\f054'; right: 0; margin-top: -40px;}
    #cases #categories ul {width: 1100px; padding: 0 15px; overflow: hidden;}
    section#cases article {text-align: center !important;}
    section#cases article img {float: none !important;}
    #orcamento tr, #orcamento td {display: block; width: 100% !important; padding: 0 !important;}
    ::-webkit-scrollbar{height: 0;}
}

/*js effects*/
nav li:nth-child(2) { animation-delay: .25s; }
nav li:nth-child(3) { animation-delay: .5s; }
nav li:nth-child(4) { animation-delay: .75s; }

#feature-card-performance, #feature-card-cart { animation-delay: .25s; }
#feature-card-support, #feature-card-guest { animation-delay: .75s; }
#feature-card-gateway, #feature-card-infra { animation-delay: 1s; }

#testimonials li:nth-child(2) .testimonial-card { animation-delay: .25s; }
#testimonials li:nth-child(3) .testimonial-card { animation-delay: .5s; }
#testimonials li:nth-child(4) .testimonial-card { animation-delay: .75s; }

/* :checkbox fix */
body {-webkit-animation: bugfix infinite 1s;}
@-webkit-keyframes bugfix {from {padding: 0;} to {padding: 0;}}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}