/* apply a natural box layout model to all elements */
    *,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
    body {
    font-size: 10px;
    font-family: 'Exo', sans-serif;
}
    html,
body,
header,
footer,
section,
article,
aside,
div,
fieldset,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    margin: 0;
    padding: 0;
}

.container {
    width: 1024px;
    margin: 0 auto;
	
    position: relative;
}

.top {
    height: 460px;
}

#orelha-container {
    background: #8437ae;
    width: 350px;
    height: 430px;
    position: absolute;
    top: 200px;
    left: 0;
    z-index:9999;
    padding: 20px;
    color: #fff;
    font-weight: 300;
}
    #orelha-container h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    #orelha-container p {
        font-size: 16px;
        margin-bottom: 10px;
        overflow: auto;
        font-family: arial, sans-serif;
    line-height: 130%;
    font-weight: 300;
    }
        #orelha-container p:before {
            content: url(http://www.agora-escolha.com/0/menos-despesas/img/bullet_white.png);
            margin-right: 10px;
        }

#orelha {
    width: 41px;
    height: 137px;
    position: absolute;
    right: -42px;
    top: 0;
    cursor: pointer;
}

header {
    background: #efeff2;
    height: 450px;
    position: relative;
    overflow: hidden;
}
    .image-top {
        position: absolute;
        right: -100px;
    }

.header-content-left {
    float: left; 
    width: 51%;
    padding: 20px 0;
}
    h1 {
        font-size: 3.5em;
        font-weight: 700;
        margin-bottom: 0.5em;
        color: #004871;
    line-height: 100%;
    }
        h1 span {
            color: #8437ae;
        }    
    h2 {
        font-size: 1.6em;
        font-family: arial, sans-serif;
        font-weight: 300;
        line-height: 150%;
    }

section {
    background: url(http://www.agora-escolha.com/0/menos-despesas/img/bg_pattern.jpg) repeat;
    padding: 10px;
}
    .content-left {
        width: 50%;
        float: left;
        padding: 30px 0;
    }
        .content-left h3 {
            color: #582574;
            font-size: 2.8em;
            margin-bottom: 1em;
        }
        .content-left p {
            font-size: 1.6em;
            margin-bottom: 1em;
            font-family: arial, sans-serif;
            line-height: 150%;
        }
            .content-left p:before {
                content: url(http://www.agora-escolha.com/0/menos-despesas/img/bullet.png);
                margin-right: 10px;
            }
        .content-left h5 {
            font-size: 16px;
            margin-bottom: 30px;
            font-weight: 300;
    font-family: arial, sans-serif;
        }

section#purple {
    background: #8437ae;
}

.splash {
    position: absolute;
    width: 155px;
    height: 155px;
    top: -77px;
    left: 450px;
    background: url(../img/splash.png);
    color: #fff;
    font-size: 2.8em;
    text-align: center;
    padding-top: 40px;
    line-height: 100%;
}

/* SLIDER */

.slider {
    width: 500px;
	height:300px;
    position: relative;
}

.bx-viewport {
    height: 200px !important;
}

.bx-wrapper {
	height:200px;
}

.bxslider li {
    width: auto;
    padding-bottom: 0px;
}

.bxslider p {
    color: #000;
    margin-bottom: 5px;
    font-size: 1.6em;
}

li p:before {
    content: url(http://www.agora-escolha.com/0/menos-despesas/img/green_arrow.png);
    float: left;
}

/* FOOTER */
footer {
    padding: 20px 10px;
}
    footer p {
    color: #606060;
    font-size: 1em;
    font-family: arial, sans-serif;
    line-height: 1.5em;
    margin-bottom: 10px;
}

/* FORM */
form {
    width: 360px;
    background: #5e5e5e;
    float: right;
    position: relative;
    top: -10px;
    padding: 70px 20px 0 20px;
    font-size: 1.2em;
}
.form-title {
    background: #8437ae ;
    width: 300px;
    height: 75px;
    position: absolute;
    top: -25px;
    left: 30px;
    padding-top: 10px;
    color: #fff;
}
    .form-title p {
        font-size: 2.2em;
        text-align: center;
        line-height: 100%;
        font-weight: 400;
    }
.corner {
    position: absolute;
    top: -30px;
    left: 15px;
}

fieldset {
    border: none;
    margin-bottom: 15px;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #606060;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #606060;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #606060;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #606060;
}

.base {
  border-radius: 4px;
 
  box-shadow: 0px 1px 1px 0px rgb( 0, 0, 0 );
  position: absolute;
  left: 871px;
  top: 660px;
  width: 280px;
  height: 45px;
  z-index: 218;
}


button {
  border-radius: 4px;
  background: #a144c1;
background: -moz-linear-gradient(top,  #a144c1 1%, #8236ad 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a144c1), color-stop(100%,#8236ad));
background: -webkit-linear-gradient(top,  #a144c1 1%,#8236ad 100%);
background: -o-linear-gradient(top,  #a144c1 1%,#8236ad 100%);
background: -ms-linear-gradient(top,  #a144c1 1%,#8236ad 100%);
background: linear-gradient(to bottom,  #a144c1 1%,#8236ad 100%);
  box-shadow: 0px 1px 1px 0px rgb( 0, 0, 0 );
    border: none;
    outline: none;
    color: #fff;
    font-size: 2em;
    font-weight:700;
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 260px;
    position: relative;
    left: 50%;
    margin-left: -130px;
    font-weight: 300;
}

#mensagem {
    color:#fff;
    font-weight: 300;
    padding: 20px;
    text-align: center;
}

input[type="text"] {
    height: 30px;
    border: none;
    outline: none;
    padding-left: 5px;
    width: 34%;
    color: #606060;
}
input#nome, input#email {
    width: 194px;
    width: 65%;
}

select {
    width: 320px;
     -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    height: 30px;    
    background:#fff url('http://www.agora-escolha.com/0/menos-despesas/img/bg_select.jpg') center right no-repeat;
    padding-left: 5px;
    color: #aaa;
    border: none; outline: none;
    color: #606060
}

@-moz-document url-prefix() { 
    select {
        padding-top: 5px;
        background-image: none;
    }
}

input[type="checkbox"] {
    float: left;
    margin-right: 5px;
    font-size: 2em;
}

.condicoes {
    color: #fff;
}
    .condicoes a {
        color: #fff;
    }

#myModal p {
    font-size: 1.6em;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
	
}