.card-container {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    margin-bottom: 30px
}

.card {
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: -moz-transform .5s;
    -o-transition: -o-transform .5s;
    transition: transform .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative
}
.back,
.front {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f3f4f4;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .14)
}
.front {
    z-index: 2
}
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 3
}
.back .btn-simple {
    position: absolute;
    left: 0;
    bottom: 4px
}
.card {
    background: none repeat scroll 0 0 #fff;
    border-radius: 4px;
    color: #444
}
.back,
.card-container,
.front {
    width: 100%;
    height: 420px;
    border-radius: 4px
}
.card .cover {
    height: 105px;
    overflow: hidden;
    border-radius: 4px 4px 0 0
}
.card .cover img {
    width: 100%
}
.card .user {
    border-radius: 50%;
    display: block;
    height: 80px;
    margin: -55px auto 0;
    overflow: hidden;
    width: 80px
}
.card .user img {
    background: none repeat scroll 0 0 #fff;
    border: 0px solid #222f3f;
    width: 100%
}
.card .content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px
}
.card .content .main {
    min-height: 160px
}
.card .back .content .main {
    height: 215px
}
.card .name {
    font-size: 22px;
    line-height: 28px;
    margin: 10px 0 0;
    text-align: center;
    text-transform: capitalize
}
.card h5 {
    margin: 5px 0;
    font-weight: 400;
    line-height: 20px
}
.card .profession {
    color: #6d6d6d;
    text-align: center;
    margin-bottom: 20px
}
.card .footer {
    border-top: 1px solid #eee;
    color: #6d6d6d;
    margin: 30px 0 0;
    padding: 10px 0 0;
    text-align: center
}
.card .footer .social-links {
    font-size: 18px
}
.card .footer .social-links a {
    margin: 0 7px
}
.card .footer .btn-simple {
    margin-top: -6px
}
.card .header {
    padding: 15px 20px;
    height: 90px
}
.card .motto {
    border-bottom: 1px solid #eee;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
    text-align: center
}
.card .stats-container {
    width: 100%;
    margin-top: 50px
}
.card .stats {
    display: block;
    float: left;
    width: 33.333333%;
    text-align: center
}
.card .stats:first-child {
    border-right: 1px solid #eee
}
.card .stats:last-child {
    border-left: 1px solid #eee
}
.card .stats h4 {
    font-weight: 300;
    margin-bottom: 5px
}
.card .stats p {
    color: #777
}
.title {
    color: #506a85;
    text-align: center;
    font-weight: 300;
    font-size: 44px;
    margin-bottom: 90px;
    line-height: 90%
}
.title small {
    font-size: 17px;
    color: #999;
    text-transform: uppercase;
    margin: 0
}
.space-30 {
    height: 30px;
    display: block
}
.space-50 {
    height: 50px;
    display: block
}
.space-200 {
    height: 200px;
    display: block
}
.white-board {
    background-color: #fff;
    min-height: 200px;
    padding: 60px 60px 20px
}
.ct-heart {
    color: #f74933
}
pre.prettyprint {
    background-color: #fff;
    border: 1px solid #999;
    margin-top: 20px;
    padding: 20px;
    text-align: left
}
.atv,
.str {
    color: #05ae0e
}
.kwd,
.pln,
.tag {
    color: #3472f7
}
.atn {
    color: #2c93ff
}

.pln {
    color: #333
}

.com {
    color: #999
}
.btn-simple {
    opacity: .8;
    color: #666;
    background-color: transparent
}
.btn-simple:focus,
.btn-simple:hover {
    background-color: transparent;
    box-shadow: none;
    opacity: 1
}
.btn-simple i {
    font-size: 16px
}
.navbar-brand-logo {
    padding: 0
}
.navbar-brand-logo .logo {
    border: 1px solid #333;
    border-radius: 50%;
    float: left;
    overflow: hidden;
    width: 60px
}
.navbar .navbar-brand-logo .brand {
    color: #fff;
    float: left;
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
    margin-left: 10px;
    margin-top: 10px;
    width: 60px
}
.navbar-default .navbar-brand-logo .brand {
    color: #555
}
@media screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .back,
    .front {
        -ms-backface-visibility: visible;
        backface-visibility: visible
    }
    .back {
        visibility: hidden;
        -ms-transition: all .2s cubic-bezier(.92, .01, .83, .67)
    }
    .front {
        z-index: 4
    }
    .card-container.manual-flip.hover .back,
    .card-container:not(.manual-flip):hover .back {
        z-index: 5;
        visibility: visible
    }
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}
@media (min-width:768px) {
    .container {
        width: 750px
    }
}
@media (min-width:992px) {
    .container {
        width: 970px
    }
}

@media (min-width:1200px) {
    .container {
        width: 1170px
    }
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}
.row {
    margin-right: -15px;
    margin-left: -15px
}
.col-lg-4,
.col-md-4,
.col-sm-4,
.col-xs-4 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}
.col-xs-4 {
    float: left
}
.col-xs-4 {
    width: 33.33333333%
}
.col-xs-pull-4 {
    right: 33.33333333%
}
.col-xs-push-4 {
    left: 33.33333333%
}
.col-xs-offset-4 {
    margin-left: 33.33333333%
}
@media (min-width:768px) {
    .col-sm-4 {
        float: left
    }
    .col-sm-4 {
        width: 33.33333333%
    }
    .col-sm-pull-4 {
        right: 33.33333333%
    }
    .col-sm-push-4 {
        left: 33.33333333%
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%
    }
}
@media (min-width:992px) {
    .col-md-4 {
        float: left
    }
    .col-md-4 {
        width: 33.33333333%
    }
    .col-md-pull-4 {
        right: 33.33333333%
    }
    .col-md-push-4 {
        left: 33.33333333%
    }
    .col-md-offset-4 {
        margin-left: 33.33333333%
    }
}
@media (min-width:1200px) {
    .col-lg-4 {
        float: left
    }
    .col-lg-4 {
        width: 33.33333333%
    }
    .col-lg-pull-4 {
        right: 33.33333333%
    }
    .col-lg-push-4 {
        left: 33.33333333%
    }
    .col-lg-offset-4 {
        margin-left: 33.33333333%
    }
}
.artigoEsquerda {
    width: 95%;
    float: left;
    border: 2px solid #f0f0f0;
    padding: 0;
    margin-left: 2.5%;
    margin-right: 1.5vw;
    margin-bottom: 10vw;
    border-radius: .5vw;
    overflow: hidden
}
@media (min-width:170px) and (orientation:landscape) {
    .artigoEsquerda {
        margin-left: 10vw
    }
}
@media (min-width:600px) and (orientation:landscape) {
    .artigoEsquerda {
        margin-left: 13%;
        width: 300px
    }
}
@media (min-width:800px) and (orientation:landscape) {
    .artigoEsquerda {
        margin-left: 13%;
        width: 300px
    }
}
@media (min-width:900px) and (orientation:landscape) {
    .artigoEsquerda {
        margin-left: 15%;
        width: 300px
    }
}
@media (min-width:1500px) and (orientation:landscape) {
    .artigoEsquerda {
        margin-left: 18%;
        width: 300px
    }
}
@media (min-width:1650px) and (orientation:landscape) {
    .artigoEsquerda {
        margin-left: 24%;
        width: 300px
    }
}
@media (min-width:600px) and (orientation:portrait) {
    .artigoEsquerda {
        width: 200px;
        margin-left: 4%
    }
}
@media (min-width:800px) and (max-height:800px) and (orientation:portrait) {
    .artigoEsquerda {
        margin-left: 50px;
        width: 250px
    }
}
.artigosMeio {
    float: left;
    border: 2px solid #f0f0f0;
    padding: 0;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    margin-bottom: 4vw;
    border-radius: .5vw;
    overflow: hidden
}
@media (min-width:600px) and (orientation:landscape) {
    .artigosMeio {
        width: 300px
    }
}
@media (min-width:600px) and (orientation:portrait) {
    .artigosMeio {
        width: 300px
    }
}
@media (max-width:1050px) and (orientation:landscape) {
    .artigosMeio {
        width: 220px
    }
}
@media (min-width:800px) and (max-height:800px) and (orientation:portrait) {
    .artigosMeio {
        width: 250px
    }
    .card-container {
        height: 320px
    }
}
.botaoCriarLaranjaTopo {
    background-color: #44bdea;
    border-bottom-color: #44bdea;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: #44bdea;
    border-left-style: solid;
    border-left-width: 2px;
    border-right-color: #44bdea;
    border-right-style: solid;
    border-right-width: 2px;
    border-top-color: #44bdea;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 2px;
    color: #fff;
    cursor: pointer;
    font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 300;
    height: 55px;
    line-height: 30px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 15px;
    margin-right: 0;
    margin-top: 20px;
    max-width: 610px;
    outline-color: #2b554a;
    outline-style: none;
    outline-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    transition-delay: 0s;
    transition-duration: .1s;
    transition-property: background-color;
    transition-timing-function: ease-out;
    text-align: center;
    vertical-align: baseline;
    width: 280px;
    zoom: 1;
    display: block;
    position: inherit;
    right: 45px;
    bottom: 30px;
    margin-bottom: 15px
}
@media (min-width:620px) {
    .botaoCriarLaranjaTopo {
		border-radius:25px;
		background-color: #211114;
		border-color: #211114;
		bottom: 30px;
		margin-left: 5%;
        left: 0;
        position: inherit;
        margin-bottom: 20px;
    }
}
@media (min-width:1600px) {
    .botaoCriarLaranjaTopo {
		margin-right: 42%;
		right: 0;
	}
}
@media (min-width:1900px) {
    .botaoCriarLaranjaTopo {
		margin-left: 4%;
	}
}

.apresentacao{
	margin-top: 90px !important;
	padding-right: 5% !important;
}

@media (min-width:620px) {
	.apresentacao{
		margin-top: 0px;
		padding-right: 20%;
	}
}



* {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none
}
body,
html {
    height: 100%
}
img {
    border: none
}
@media (min-width:320px) {
    body {
        font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif;
        font-size: 15px;
        margin-top: 90px
    }
}
@media (min-width:631px) {
    body {
        font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif;
        font-size: 16px;
        margin-top: 90px
    }
}
@media (min-width:320px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 14px;
        font-weight: 300
    }
}
@media (min-width:636px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 100%;
        font-weight: 300
    }
}
h1 {
    font-size: 4em;
    font-weight: 500;
    letter-spacing: -0em
}
@media (min-width:320px) {
    h2 {
        font-size: 1.3em
    }
}
@media (min-width:320px) {
    .rwd-break-big-screen {
        display: none
    }
    .rwd-break-small-screen {
        display: block
    }
}
@media (min-width:631px) {
    .rwd-break-big-screen {
        display: block
    }
    .rwd-break-small-screen {
        display: none
    }
}
@media (min-width:750px) {
    .rwd-break {
        display: none
    }
}
@media (min-width:636px) {
    h2 {
        font-size: 2.2em
    }
}
@media (min-width:320px) {
    h3 {
        font-size: 14px
    }
}
@media (min-width:636px) {
    h3 {
        font-size: 1.4em
    }
}
h4 {
    font-size: 1.8em;
    font-weight: 200
}
p {
    margin: .5em 0 1.2em;
    font-weight: 300;
    line-height: 1.3em;
    color: #555
}
.P2 {
    margin: .5em 0 1.2em;
    font-weight: 300;
    line-height: 1.2em;
    color: #777;
    font-size: .8em
}
@media (min-width:320px) {
    li {
        font-weight: 300;
        list-style-type: none
    }
}
@media (min-width:631px) {
    li {
        font-weight: 300;
        line-height: 12px;
        list-style-type: none;
        font-size: 16px
    }
    @media (min-height:700px) {
        li {
            font-weight: 300;
            line-height: 1.6em;
            list-style-type: none;
            font-size: 18px
        }
    }
}
ol,
ul {
    list-style-type: none
}
ol li,
ul li {
    color: #777
}
a {
    color: #4c4c4c;
    text-decoration: none
}
a:hover {
    color: #00a99d
}
hr {
    clear: both;
    border: none;
    border-top: 1px solid #eee;
    margin: 0 auto;
    width: 80%;
    max-width: 1200px
}
@media (min-width:320px) {
    form {
        padding-top: 0
    }
}
@media (min-width:636px) {
    form {
        padding-top: 0
    }
}
form label {
    display: inline-block;
    width: 150px;
    text-align: right;
    margin-right: 20px;
    font-weight: 300
}
form select {
    width: 300px
}
form input[type=email],
form input[type=password] {
    width: 274px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    padding: 3px 8px
}
form .control-group {
    margin-bottom: 1em
}
.wrap {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto
}
.saw:after {
    right: 2%;
    left: auto;
    bottom: -60px;
    content: '';
    position: absolute;
    border-top: 60px #fff solid;
    border-left: transparent 60px solid;
    border-right: transparent 60px solid;
    z-index: 2
}
section {
    position: relative
}
section .wrap {
    min-height: 130px;
    padding: 25px 0;
    padding-right: 25%
}
section .wrap .insert {
    position: absolute;
    top: 40px;
    right: 0;
    width: 33%;
    max-width: 400px;
    right: 20%
}
section .wrap .insert.large {
    top: 40px;
    right: -12.5%;
    width: 40%;
    max-width: 400px
}
section .wrap.reverse {
    padding-right: 0;
    padding-left: 25%
}
section .wrap.reverse .insert {
    right: auto;
    left: 0
}
section .wrap.reverse .insert.large {
    left: -13%
}
section .wrap.center {
    text-align: center;
    min-height: 130px;
    margin-top: 40px
}
section .wrap.full {
    padding-right: 0;
    padding-left: 0;
    width: 80%
}

section .wrap.short {
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 70px
}

.primary {
    background: #ffffff;
    color: #fff;
    background-repeat: no-repeat;
    background-position: 50% 10%
}

.primary p {
    color: #fff
}

.primary p a {
    color: #fff;
    font-weight: 500
}

.primary .saw:after {
    left: 2%;
    right: auto;
    bottom: -60px;
    content: '';
    position: absolute;
    border-top: 60px #222f3f solid;
    border-left: transparent 60px solid;
    border-right: transparent 60px solid;
    z-index: 2
}
@media (min-width:320px) {
    @charset "UTF-8";
    .contact {
        background: linear-gradient(141deg, #4361ee 0, #4361ee 51%, #4361ee 75%);
        color: #fff
    }
    .contact p {
        color: #fff
    }
    .contact p a {
        color: #fff;
        font-weight: 500
    }
    .contact .saw:after {
        left: 2%;
        right: auto;
        bottom: -60px;
        content: '';
        position: absolute;
        border-top: 60px #333 solid;
        border-left: transparent 60px solid;
        border-right: transparent 60px solid;
        z-index: 2
    }
    .reverse {
        padding-left: 37.5%;
        padding-right: 0
    }
    #header {
        position: fixed;
        height: 90px;
        background: #f5f5f5;
        left: 0;
        right: 0;
        top: 0;
        z-index: 99
    }
    #header:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        right: 0;
    }
    #header .wrap {
        padding: 28px 0 10px
    }
    #header a {
        color: #222f3f;
        font-size: 1em;
        -webkit-transition: color .2s linear;
        -moz-transition: color .2s linear;
        -ms-transition: color .2s linear;
        -o-transition: color .2s linear;
        transition: color .2s linear
    }
    #header .logo {
        float: left;
        line-height: 36px
    }
    #header .logo img {
        float: left;
        margin-top: -3px;
        margin-left: -10px;
        width: 130px;
    }
    #header .logo .header {
        letter-spacing: -.05em;
        font-size: 2em;
        font-weight: 300
    }
    #header nav {
        float: right
    }
    #header nav a {
        margin-left: 40px;
        font-weight: 400;
        font-size: .8em
    }
    #header nav a.selected {
        border-bottom: 3px solid #02b3a9
    }
    #header nav .bt {
        color: #fff;
        -webkit-transition: background-color .2s linear;
        -moz-transition: background-color .2s linear;
        -ms-transition: background-color .2s linear;
        -o-transition: background-color .2s linear;
        transition: background-color .2s linear
    }
    footer {
        clear: both;
        min-height: 100px;
        border-top: 1px solid #eee;
        background-color: #f9f9ff
    }
    footer .wrap {
        padding: 40px 0;
        font-size: .8em;
        color: #777
    }
    footer nav {
        text-align: center
    }
    footer nav a {
        width: 48px;
        height: 48px;
        display: inline-block;
        background-repeat: no-repeat;
        margin: 0 40px
    }
    footer nav a.twitter-logo {
        background-image: url(../imagens/logo-twitter.png)
    }
    footer nav a.linkedin-logo {
        background-image: url(../imagens/logo-linkedin.png)
    }
    footer nav a.facebook-logo {
        background-image: url(../imagens/logo-facebook.png)
    }
    footer nav a.google-plus-logo {
        background-image: url(../imagens/logo-google-plus.png)
    }
    .bt {
        background: #02b3a9;
        display: inline-block;
        color: #fff;
        padding: 4px 20px;
        text-align: center;
        border-bottom: #089b87 2px solid;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-borderradius: 5px;
        -webkit-transition: background-color .2s linear;
        -moz-transition: background-color .2s linear;
        -ms-transition: background-color .2s linear;
        -o-transition: background-color .2s linear;
        transition: background-color .2s linear
    }
    .bt:hover {
        color: #fff;
        background-color: #0acbb1
    }
    .bt.large {
        font-size: 1.5em;
        padding: 5px 20px;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-borderradius: 8px
    }
    .bt .sub-text {
        margin-top: -.5em;
        display: block;
        font-size: .5em
    }
    #hero {
        background-repeat: no-repeat;
        background-position: 40% 50%
    }
    @media (min-width:320px) {
        #hero {
            margin-top: 120px
        }
    }
    @media (min-width:631px) {
        #hero {
            margin-top: 90px
        }
    }
    @media (min-width:1025px) {
        #hero {
            margin-top: 0;
			background-color: #f3f5f9;
        }
    }
    #hero section {
        padding: 160px 0 40px
    }
    #hero .wrap img.insert {
        top: 50px
    }

    @media all and (max-width:1150px) {
        .wrap {
            width: 90%
        }
        section .wrap {
            width: 95%;
            padding-right: 31%
        }
        section .wrap .insert.large {
            right: -5.5%
        }
        section .wrap.reverse {
            padding-right: 0;
            padding-left: 31%
        }
        section .wrap.reverse .insert.large {
            left: -6%
        }
        #header .logo .header {
            font-size: 1.6em
        }
        #header nav a {
            font-size: .8em;
            margin-left: 11px
        }
    }
    @media all and (max-width:1000px) {
        .wrap,
        section .wrap.full {
            width: 95%
        }
        section .wrap {
            width: 57%;
            padding-right: 38%
        }
        section .wrap .insert.large {
            right: -2%
        }
        section .wrap.reverse {
            padding-right: 0;
            padding-left: 38%
        }
        section .wrap.reverse .insert.large {
            left: -2%
        }
        footer nav a {
            margin: 0 30px;
            width: 48px;
            height: 48px
        }
    }
    #header nav a {
        float: none;
        font-size: .7em
    }
    @media all and (min-width:370px) {
        #header nav a {
            float: none;
            font-size: .8em
        }
    }
    @media all and (min-width:500px) {
        #header nav a {
            margin-left: 40px;
            font-size: 16px;
        }
    }
    @media all and (max-width:600px) {
        section .wrap {
            width: 95%;
            padding: 10px 0;
            min-height: 0
        }
    }
    @media all and (min-width:601) and (max-width:750px) {
        section .wrap {
            width: 95%;
            padding: 50px 0;
            min-height: 0
        }
    }
    @media all and (max-width:750px) {
        body {
            margin-top: 0
        }
        #header {
            position: fixed;
            height: auto;
            padding-bottom: 10px;
            text-align: center
        }
        #header .logo {
            float: none;
            display: inline-block;
            margin-top: -6px;
            height: 60px
        }
        #header nav {
            clear: both;
            display: block;
            float: none;
            padding-top: 10px;
            margin-top: -8px;
            border-top: 1px solid #eee
        }
        #header nav a:first-child {
            margin-left: 0
        }
        #header nav .bt {
            display: none
        }
        section .wrap.reverse {
            padding-left: 0
        }
        section .wrap .insert {
            position: relative;
            max-height: 200px;
            max-width: none;
            display: none
        }
        section .wrap.short {
            padding-top: 20px;
            padding-bottom: 20px;
            min-height: 0
        }
        h1 {
            font-size: 2.8em
        }
        h4 {
            font-size: 1.5em;
            font-weight: 300
        }
        #hero,
        .primary {
            background-size: 1600px 400px;
            background-position: -500px 0
        }
        .primary {
            background-position: -500px -50px
        }
        #get-snap {
            display: none
        }
        .primary .saw:after,
        .saw:after,
        .secondary .saw:after,
        .terciary .saw:after {
            border-width: 22px;
            border-bottom-width: 0;
            bottom: -22px
        }
    }
    @media all and (max-width:480px) {
        #hero,
        .primary {
            background-size: 1200px 300px;
            background-position: -340px 0
        }
        .primary {
            background-position: -340px -50px
        }
        footer nav a {
            margin: 0 16px;
            width: 50px;
            height: 50px
        }
    }
    .smile-alert-mask {
        position: fixed;
        z-index: 13000;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .6)
    }
    @media (min-width:320px) {
        .smile-alert-message-body {
            position: fixed;
            z-index: 13000;
            width: 300px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-color: #fafafc;
            text-align: center;
            border-radius: 3px
        }
    }
    @media (min-width:636px) {
        .smile-alert-message-body {
            position: fixed;
            z-index: 13000;
            width: 350px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-color: #fafafc;
            text-align: center;
            border-radius: 3px
        }
    }
    .smile-alert-message-tbf {
        padding: 0 20px;
        font-size: 15px;
        color: #606060
    }
    .smile-alert-message-title {
        font-weight: 400;
        font-size: 17px
    }
    .smile-alert-message-content,
    .smile-alert-message-title {
        padding: 1.2em 20px .5em
    }
    .smile-alert-message-content {
        text-align: center
    }
    .smile-alert-message-button {
        position: relative;
        line-height: 42px;
        margin-top: 20px;
        font-size: 17px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        background-color: #09b59f
    }
    .smile-alert-message-button:after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        border-top: 1px solid #d5d5d6;
        color: #d5d5d6;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }
    .smile-alert-message-button a {
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent
    }
    a.smile-alert-message-button-cancel {
        color: #353535
    }
    a.smile-alert-message-button-confirm:after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        border-left: 1px solid #d5d5d6;
        color: #d5d5d6;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5)
    }
    a.smile-alert-message-filter {
        background: #999;
        color: #000;
        -moz-opacity: .3;
        -khtml-opacity: .3;
        opacity: .3
    }
    .hidden {
        width: 95%;
        z-index: 10000;
        position: absolute;
        left: -3000px;
        color: #000;
        background-color: #fff;
        box-shadow: 2px -1px 15px #888
    }
    input[type=image]:focus {
        outline: 0
    }
    :focus {
        outline: 0
    }
    .tituloPaginaInicial {
        font-size: 2.8em;
        font-weight: 500;
        color: #fff;
        margin: 0;
        padding: 0;
        font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif
    }
    @media (min-width:600px) {
        .tituloPaginaInicial {
            color: #fff;
            font-size: 3em;
            font-weight: 500;
            margin: 0;
            padding: 0;
            font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif
        }
    }

	blockquote {
		padding-left: 30px;
		background-image: url(../imagens/quote-open-light.png);
		background-position: top left;
		background-repeat: no-repeat
	}

	@media (min-width:320px) {
		.subtituloTelaInicial {
			color: #ffffff;
			letter-spacing: 1px;
			top: 170px;
			margin-top: 20px;
			margin-left: 6%;
			font-size: 20px;
			font-family: source-sans-pro,Helvetica,Arial,sans-serif,sans-serif;
		}
		
		.botaoCriarPaginaInicial {
			float: left;
			padding-left: 60px;
			letter-spacing: 1px;
			font-weight: 300;
			padding-top: 10px;
			font-size: 18px;
			vertical-align: middle;
			color: #ffff;	
		}
		.imagemCriarPaginaInicial {
			height: 25px;
			float: right;
			padding-right: 12px;
			padding-top: 7px;
			vertical-align: middle;
			margin-top: 5px
		}
		.botaoCriar {
			background-color: #f24b00;
			border-bottom-color: #9d4817;
			border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			border-image-outset: 0;
			border-image-repeat: stretch;
			border-image-slice: 100%;
			border-image-source: none;
			border-image-width: 1;
			border-left-color: #9d4817;
			border-left-style: solid;
			border-left-width: 2px;
			border-right-color: #9d4817;
			border-right-style: solid;
			border-right-width: 2px;
			border-top-color: #9d4817;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			border-top-style: solid;
			border-top-width: 2px;
			color: #fff;
			cursor: pointer;
			font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif;
			font-size: 19px;
			font-style: normal;
			font-weight: 600;
			height: 45px;
			line-height: 30px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			margin-bottom: 0;
			margin-left: 0;
			margin-right: 0;
			margin-top: 20px;
			max-width: 610px;
			outline-color: #2b554a;
			outline-style: none;
			outline-width: 0;
			overflow-x: hidden;
			overflow-y: hidden;
			padding-bottom: 0;
			padding-left: 0;
			padding-right: 0;
			padding-top: 0;
			transition-delay: 0s;
			transition-duration: .1s;
			transition-property: background-color;
			transition-timing-function: ease-out;
			text-align: center;
			vertical-align: baseline;
			width: 250px;
			zoom: 1
		}
		.botaoCriar:hover {
			height: 45px;
			border-bottom-width: 6px
		}
	}
	@media (min-width:636px) {
		.subtituloTelaInicial {
			color: #000;
			letter-spacing: normal;
			display: inline-block;
			top: 220px;
			margin-top: 0px;
			text-align: left;
			margin-right: 50%;
			line-height: 30px;
			margin-left: 4%;
			font-size: 20px;
			font-family: source-sans-pro,Helvetica,Arial,sans-serif,sans-serif;
			padding-top: 20px;
		}

		.botaoCriarPaginaInicial {
			float: left;
			padding-left: 55px;
			vertical-align: middle;
			font-size: 19px;
			color: #fff
		}
		.imagemCriarPaginaInicial {
			height: 30px;
			float: right;
			padding-right: 20px;
			vertical-align: middle
		}
		.botaoCriar {
			background-color: #f24b00;
			border-bottom-color: #9d4817;
			border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			border-image-outset: 0;
			border-image-repeat: stretch;
			border-image-slice: 100%;
			border-image-source: none;
			border-image-width: 1;
			border-left-color: #9d4817;
			border-left-style: solid;
			border-left-width: 2px;
			border-right-color: #9d4817;
			border-right-style: solid;
			border-right-width: 2px;
			border-top-color: #9d4817;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			border-top-style: solid;
			border-top-width: 2px;
			color: #fff;
			cursor: pointer;
			font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif;
			font-size: 19px;
			font-style: normal;
			font-weight: 700;
			height: 45px;
			line-height: 30px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			margin-bottom: 0;
			margin-left: 0;
			margin-right: 0;
			margin-top: 20px;
			max-width: 610px;
			outline-color: #2b554a;
			outline-style: none;
			outline-width: 0;
			overflow-x: hidden;
			overflow-y: hidden;
			padding-bottom: 0;
			padding-left: 0;
			padding-right: 0;
			padding-top: 0;
			transition-delay: 0s;
			transition-duration: .1s;
			transition-property: background-color;
			transition-timing-function: ease-out;
			text-align: center;
			vertical-align: baseline;
			width: 280px;
			zoom: 1
		}
		.botaoCriar:hover {
			height: 45px;
			border-bottom-width: 6px
		}
	}
	
	@media (min-width:1600px) {
		.subtituloTelaInicial {
			margin-left: 4%;
		}
	}
	.hideMe {
		display: none;
		visibility: hidden
	}
	@media (min-width:320px) {
		.mensagemContato {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			outline: 0;
			border: 1px solid rgba(255, 255, 255, .4);
			width: 90%;
			height: 150px;
			border-radius: 3px;
			padding: 10px 15px;
			display: block;
			text-align: center;
			font-size: 18px;
			line-height: 20px;
			color: #3b3b3b;
			-webkit-transition-duration: .6s;
			transition-duration: .6s;
			font-weight: 300
		}
		.inputContato {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			outline: 0;
			border: 1px solid rgba(255, 255, 255, .4);
			width: 90%;
			border-radius: 3px;
			padding: 10px 15px;
			display: block;
			text-align: center;
			font-size: 18px;
			color: #3b3b3b;
			-webkit-transition-duration: .6s;
			transition-duration: .6s;
			font-weight: 300
		}
	}
	@media (min-width:760px) {
		.mensagemContato {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			outline: 0;
			border: 1px solid rgba(255, 255, 255, .4);
			width: 350px;
			height: 150px;
			border-radius: 3px;
			padding: 10px 15px;
			display: block;
			text-align: center;
			font-size: 18px;
			line-height: 20px;
			color: #3b3b3b;
			-webkit-transition-duration: .6s;
			transition-duration: .6s;
			font-weight: 300
		}
		.inputContato {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			outline: 0;
			border: 1px solid rgba(255, 255, 255, .4);
			width: 350px;
			border-radius: 3px;
			padding: 10px 15px;
			display: block;
			text-align: center;
			font-size: 18px;
			color: #3b3b3b;
			-webkit-transition-duration: .6s;
			transition-duration: .6s;
			font-weight: 300
		}
	}
	.quadradosComoFunciona {
		width: 90%
	}
	@media (min-width:600px) and (orientation:portrait) {
		.quadradosComoFunciona {
			width: 100%
		}
	}
	footer nav a.adobe-logo {
		background-image: url(../images/logo-adobe.svg)
	}
	footer nav a.github-logo {
		background-image: url(../images/logo-github.svg)
	}
	footer nav a.twitter-logo {
		background-image: url(../imagens/logo-twitter.png)
	}
	footer nav a.linkedin-logo {
		background-image: url(../imagens/logo-linkedin.png)
	}
	footer nav a.pinterest-logo {
		background-image: url(../imagens/logo-pinterest.png)
	}
	footer nav a.instagram-logo {
		background-image: url(../imagens/logo-instagram.png)
	}
	footer nav a.facebook-logo {
		background-image: url(../imagens/logo-facebook.png)
	}
	footer nav a.google-plus-logo {
		background-image: url(../imagens/logo-google-plus.png)
	}
	.subTituloPaginaInicial {
		margin-top: 0;
		margin-bottom: 20px;
		font-size: 32px;
		font-weight: 300;
		letter-spacing: .1px;
		margin: 0;
		padding: 0;
		font-family: source-sans-pro,Helvetica,Arial,sans-serif,sans-serif;
		color: #565656;	
	}
	.subTituloPaginaInicialTexto {
		margin-top: 0;
		margin-bottom: 20px;
		font-weight: 300;
		padding: 0;
		font-family: source-sans-pro,Helvetica,Arial,sans-serif,sans-serif;			
		display:block;
		font-size: 18px;
		color: #212121;
		line-height: 26px;
		letter-spacing: 0.4px;
		margin-left:15px;
		margin-right:20px;
		text-align:justify;
	}
	.textoSubTitulo {
		display:block;
		font-size: 18px;
		color: #212121;
		font-weight: 300;
		line-height: 26px;
		letter-spacing: 0.4px;
		margin-left:15px;
		margin-right:20px;
		text-align:justify;
	}
	
	.imagemSolucoesEsquerda{
		float:left; 
		display:inline-block;
		max-width:100%;
	}
	
	.imagemSolucoesDireita{
		float:right; 
		display:inline-block;
		max-width:100%;
	}
	
	@media (min-width:636px) {
		.subTituloPaginaInicial {
			font-size: 40px
		}
		.subTituloPaginaInicialTexto {
			margin-left:0px;
		}
		.textoSubTitulo {
			margin-left:0px;
		}
		.imagemSolucoesEsquerda{
			margin-right: 50px;
		}
		.imagemSolucoesDireita{
			margin-left: 50px;
		}
	}
	
	.imagemBanner {
		display: inline-block;
		width: 100%
	}
	@media (min-width:636px) {
		.imagemBanner {
			display: inline-block;
			width: auto;
			padding-right: 20px;
		}
	}
	.descricaoTelaInicial {
		font-size: 30px;
		font-weight: 300;
		display: block;
		color: #252525;
		margin-left: 20px;
		margin-right: 20px;
		letter-spacing: .5px;
		font-family: Roboto, Arial, Helvetica, Verdana, Arial, sans-serif
	}
	
	@media (min-width:636px) {
		.descricaoTelaInicial {
			font-size: 38px;
			line-height: 45px;
			letter-spacing: 1px;
			display: inline-block;
			position: absolute;
			top: 50px;
			margin-left: 10%;
			margin-right: 10%;
		}
	}
	@media (min-width:1300px) {
		.descricaoTelaInicial {
			font-size: 80px;
			line-height: 70px;
			margin-left: 8%;
			letter-spacing: -3px;
			margin-right: 10%;
			text-align: left;
			display: contents;
		}
	}
	@media (min-width:1600px) {
		.descricaoTelaInicial {
			font-size: 50px;
			line-height: 50px;
			margin-left: 2%;
		}
	}
	@media (min-width:1900px) {
		.descricaoTelaInicial {
			margin-left: 0%;
			top: 70px;
			font-size: 80px;
			line-height: 80px;
		}
	}
	
	.botaoEnviar {
		background-color: #222f3f;
		border-bottom-color: #222f3f;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-image-outset: 0;
		border-image-repeat: stretch;
		border-image-slice: 100%;
		border-image-source: none;
		border-image-width: 1;
		border-left-color: #222f3f;
		border-left-style: solid;
		border-left-width: 1px;
		border-right-color: #222f3f;
		border-right-style: solid;
		border-right-width: 1px;
		border-top-color: #222f3f;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border-top-style: solid;
		border-top-width: 1px;
		color: #fff;
		cursor: pointer;
		font-family: source-sans-pro, Helvetica, Arial, sans-serif, sans-serif;
		font-size: 19px;
		font-style: normal;
		font-weight: 500;
		height: 35px;
		line-height: 30px;
		list-style-image: none;
		list-style-position: outside;
		list-style-type: none;
		margin-bottom: 0;
		margin-left: 10%;
		margin-right: 0;
		margin-top: 0;
		max-width: 610px;
		outline-color: #2b554a;
		outline-style: none;
		outline-width: 0;
		overflow-x: hidden;
		overflow-y: hidden;
		padding-bottom: 0;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 2px;
		transition-delay: 0s;
		transition-duration: .1s;
		transition-property: background-color;
		transition-timing-function: ease-out;
		text-align: center;
		vertical-align: baseline;
		width: 200px;
		zoom: 1
	}
	::-webkit-scrollbar {
		width: 10px
	}
	::-webkit-scrollbar-track {
		background: #4d5062
	}
	::-webkit-scrollbar-thumb {
		background: #4cc9f0
	}
	::-webkit-scrollbar-thumb:hover {
		background: #4895ef
	}
	.contratosEsquerda {
		display: inline-block
	}
	.contratosDireita {
		display: inline-block
	}
	@media (min-width:636px) {
		.contratosEsquerda {
			width: 50%
		}
		.contratosDireita {
			width: 49%
		}
	}
}

.quadro-programacao{
	width: 500px;
	max-width: 95%;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: inherit;
	margin-right: 5%;
    line-height: inherit;
    display: block;
	float: right;
}
@media (min-width:636px) {
	.quadro-programacao{
		margin-right: 50px;
	}	
}
.codigo-fonte{
    overflow-y: auto;
    height: 495px;
    border-radius: 4px;
    background-color: #161c27;
    box-shadow: 0 53px 32px -40px rgb(43 58 78 / 16%);
    position: relative;
    display: flex;
    padding: 25px;	
}

@media (min-width:636px) {
	.codigo-fonte{
		overflow-y: hidden;
		overflow-x: hidden;
	}
}

.numeracao-codigo-fonte{
    padding: 12px;
    top: -16px;
    left: 0;
    border-right: 1px solid #202838;
    position: absolute;
    user-select: none;
}
.tituloH1Apresentacao{
}
@media (min-width:636px) {
	.tituloH1Apresentacao{
		margin-right:15%;
	}
}

.subTituloApresentacao{
    background-color: #e3e2f6;
    margin-top: 40px;
	width: 110%;
	border-radius: 15px;
	padding-bottom: 10px;
	margin-left: -2%;
}

.h2PaginaApresentacao{
    font-weight: 300;
    margin-top: 3%;
    font-size: 80px;
    line-height: 75px;
    color: #252525;
    margin-left: 8%;
    letter-spacing: -3px;
    margin-right: 10%;
    text-align: left;
    display: block;
}
.primeiraImagem{
	position: absolute;
	top: 60px;
	right: 12%;
}

@media (min-width:1600px) {
    .primeiraImagem {
		right: 18%;
	}
}
@media (min-width:1900px) {
    .primeiraImagem {
		right: 22%;
		top: 115px;
	}
}