@charset "utf-8";
/* CSS Document */

/* CSS Reset ***********************************************************************************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

:focus {outline: 0;}
body {	line-height: 1;	color: black;	background: white;	background-repeat: no-repeat;	background-attachment: fixed;}
ol, ul {  list-style: none; }
table { border-collapse: separate;	border-spacing: 0;}
caption, th, td {	text-align: left;	font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {	content: "";}
blockquote, q {	quotes: "" "";
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {  display: block;}

/* CSS Estilo ***********************/
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansitalic';
    src: url('../fonts/OpenSans-Italic-webfont.eot');
    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* { font-family: 'open_sansregular'; }

html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%; }

/* CLEAR FIX rodape infinito*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/* GERAL */

h2 {font-family: 'open_sansregular'; font-size: 42px; line-height: 80px; margin: 15px 0 15px 0; color: #fff; }
h3 {font-family: 'open_sansregular'; 
    font-size: 36px; line-height: 40px; color: #000; width: 100%; float: left; 
    margin: 0 0 10px 0; text-align: center; padding: 30px 0 20px 0; background-image: url("../img/border-h3.png");}
h4 {font-family: 'open_sansregular'; font-size: 26px; line-height: 30px; margin: 25px 0 15px 0; color: #000; clear: both;}
h5 {font-family: 'open_sansregular'; font-size: 20px; line-height: 30px; margin: 15px 0 0 0; color: #FF3355;  padding: 10px 0 5px 0; clear: both;}
p {font-size: 15px; line-height: 24px;	color: #1a1a1a;	margin: 5px 0 12px 0; font-family: 'open_sansregular'; text-align: justify;}
.index {font-size: 15px; line-height: 24px;	color: #1a1a1a;	margin: 5px 0 12px 0; font-family: 'open_sansregular'; text-align: center;}
.h-pages { text-align: center; }
a { text-decoration: none; color: #33a7ff;}
a:hover { text-decoration: none; }
strong { font-weight: bold; }

/* HEADER */
header {position: fixed; height: 100px; top: 0; width: 100%; z-index: 100; height: 100px; background: url("../img/header/background.jpg") center bottom repeat-x;}
/*header {width: 100%;height: 100px; background: url("../img/header/background.jpg") center bottom repeat-x;}*/
#header-content {clear: both; width: 90%; min-width: 980px; height: auto; margin: 0 auto;}
#header-left {float: left; width: 228px; height: 62px; margin: 20px 0 0 20px; background: url("../img/header/logo-quarks.png") left top no-repeat; position: relative; z-index: 100;}
.a-logo { float: left; display: inline-block; width: 100%; height: 100%; text-indent: -9999px;}
#header-right {float: right; width: 400px; height: 70px; padding-top: 20px;}
.spn-contact {width: 205px; float: right; font-size: 14px; color: #33a7ff; text-align: right; padding-right: 35px; margin: 0;}
.spn-contact span { font-size: 16px; }
.spn-contact p{width: 170px; float: left; color: #33a7ff; margin-bottom: 6px;}
.spn-contact a { display: block; color: #33a7ff; }
.spn-contact img{float: right; margin-top: 5px; }

/* MENU */
.nav-menu { float: right; width: auto; height: 50px; margin: 0;}
.nav-menu ul { float: left; width: 100%; margin: 25px  0 0 0;}
.nav-menu ul li { float: left; display: block; position: relative; font-size: 18px; text-align: center; }
.nav-menu ul li a { float: left; display: block; height: 35px; color: #808080; padding: 15px 18px 0 18px; }
.nav-menu ul li a:hover { background-color: #33a7ff; color: #fff; text-decoration: none; }

.nav-menu ul li ul { display: none; float: none; position: absolute; top: 24px; left: 0; width: 220px; background: #1192f5;}
.nav-menu ul li:hover > ul { display: block; z-index: 1001; }
.nav-menu ul li ul li, .nav-menu ul li ul li a { float: none; width: auto; font-size: 16px; text-align: left; color: #fff;}
.nav-menu ul li ul li a:hover { float: none; background: #33a7ff; }
.nav-menu ul li ul li { margin: 0; }
.nav-menu ul li ul li ul { top: -25px; left: 100%; }

/* TEASERS */
/*.teaser-home {min-width: 980px; float: left;width: 100%; height: auto; min-height: 300px;}*/
.teaser-home {margin-top: 100px; min-width: 980px; float: left;width: 100%; height: auto; min-height: 300px;}
.teaser-home img{ width: 100%; height: auto; min-height: 300px;}
.teaser-home span{width: 930px; height: 12vw; min-height: 23vw; display: block; margin: -25vw auto 1vw auto; text-align: right; padding-right: 20px;}
.teaser-home ul li span h2{-webkit-box-shadow: 4px 2px 10px 1px rgba(0,0,0,1);-moz-box-shadow: 4px 2px 10px 1px rgba(0,0,0,1);box-shadow: 4px 2px 10px 1px rgba(0,0,0,1);}
.link-teaser{width: 440px; height: 110px; float: right; display: block; position: relative; z-index: 300; margin: 0; background: url("../img/teaser/bg-description-teaser.png"); }
.link-teaser p{width: 405px; height: auto; margin: 13px 20px 0 30px; float: right; color: #1a1a1a; font-family: 'open_sansitalic'; font-size: 18px; line-height: 26px;}

/*.teaser {float: left;width: 100%; height: auto; min-height: 290px; margin-bottom: 20px;}*/
.teaser {margin-top: 100px; float: left;width: 100%; height: auto; min-height: 290px; margin-bottom: 20px;}
.teaser img{ width: 100%; height: auto; min-height: 200px;}
.teaser span{width: 930px; height: 18vw; min-height: 19vw; display: block; margin: -15vw auto 1vw auto; text-align: right; padding-right: 20px;}
.teaser span h2{line-height: 30px; margin: 5px 0 30px 0; color: #005896;}
.teaser-content {float: left; margin: -260px 0 0 6%; width: 40%; z-index: 200; position: relative;}
.teaser-content h2{color: #0080cf; font-size: 42px; line-height: 50px; }
.teaser-content p{text-align: left; font-size: 16px; font-weight: bold;}

/* CONTAINER */
#container {width: 981px; margin: 0 auto; position: relative;}
.sec-content { float: left; position: relative; width: 940px; height: auto; min-height: 430px; padding: 0 20px 0 20px; margin-top: 0; clear: both;}
.sec-content li{float: left;}
.no-teaser{margin-top: 100px;}
#index .sec-content { }

/* ARTICLE / ASIDE */
.art-main { float: left; width: 100%; text-align: center; overflow: hidden; margin: 30px 0; }
.art-main h4 a{ color: #000;}
.art-main li{ width: 274px; margin: 0 18px;}
.art-main p a{ color: #1a1a1a; }
.art-no-center { text-align: left;  }

.asd-main {clear: both;nfloat: left; width: 100%; text-align: center; overflow: hidden;	margin-top: 40px; padding-top: 20px;padding-bottom: 20px; border-top: 1px solid #ccc;}

/* ACCORDEON */
.dl-toggle { clear: both; float: left; width: 100%; margin: 5px 0 10px 0; }
.dl-toggle dt {
	box-sizing: border-box;
	height: 30px;
	font-family: 'open_sansitalic';
	font-size: 24px;
	background: url("../img/icons/arrow.png") 0 4px no-repeat;
	padding: 0 0 0 25px;
	margin: 10px 0 0 0;
}
.dl-toggle dt a {  color: #d90019; }
.dl-toggle dt a:hover { text-decoration: none; }
.dl-toggle dd { clear: both; float: left; margin: 5px 0 20px 27px; }

/* HOME */
.box { display: inline-block; width: 290px; margin: 0 8px 0 8px; }
.box p { font-family: 'open_sansitalic'; font-size: 16px; line-height: 26px;}

.box-small { display: inline-block; width: 165px; margin: 15px 9px 0 9px; }
.box-small h3 { font-size: 20px; line-height: 30px; }
.box-small p { font-family: 'open_sansitalic'; }

/* TABLES */
table { float: left; width: 100%; margin: 5px 0 15px 0; border: 1px solid #f5f5f5; }
table tr { font-size: 14px; line-height: 18px; }
table tr th { background: #e3e3e3; padding: 5px 10px 5px 10px; font-weight: bold;}
table tr td { padding: 5px 10px 5px 10px; }
table tr:nth-child(even) td { background: #f5f5f5; }
table tr.header { background: #e0e0e0; color: #000; }
th:last-child,
td:last-child,
td:nth-last-child(2) { text-align: right;}
.table-details{font-size: 13px; font-style:italic;}

/* CONTATO */
.contact{width: 410px; float: right; padding: 0 0 30px 0; }
.contact h4{width: 100%; float: right; text-align:right; padding-right: 14px; margin: 10px 0 13px 0;}
.ul-contact { float: left; width: 100%; border-bottom: 1px solid #e6e6e6; margin-bottom: 20px; padding-bottom: 15px;}
.ul-contact li { width: 97%; text-align: right; font-size: 20px; line-height: 36px; color: #009dff; }
.ul-contact li span { width: 120px; float: left; text-align: left; font-size: 16px; color: #999;}
.ul-contact li a { color: #009dff; }
.contact p{clear: both; text-align: right; padding-right: 15px;}

/* FORMS */
form { float: left; width: 500px; margin: 0; }
fieldset{width: 500px; float: left; margin-bottom: 30px;}

label {
	clear: both;
	float: left;
	width: 125px;
	height: 30px;
	font-size: 14px;
	line-height: 42px;
	color: #999;
	margin: 0;
}

input {
	float: left;
	width: 320px;
	padding: 5px;
	border: solid 2px #f5f5f5;
	margin: 4px 0 4px 0;
	font-size: 16px;
	color: #434c59;
}
input:focus { 
        /*background-color: #fffab5;
        /*border: 1px solid #ff9500;*/
        border-color: #33a7ff;   
}

select {
	float: left;
	width: 335px;
	padding: 5px;
	border: solid 2px #f5f5f5;
	margin: 4px 0 4px 0;
	font-size: 16px;
	color: #434c59;
}
select:focus { 
    /*background-color: #fffab5;
    /*border: 1px solid #ff9500;*/
    border-color: #33a7ff; 
}

textarea {
	float: left;
	width: 320px;
	height: 140px;
	padding: 5px;
	border: solid 2px #f5f5f5;
	margin: 4px 0 4px 0;
	font-size: 16px;
	color: #434c59;
	overflow: hidden;
	resize: none;
}
textarea:focus { 
    /*background-color: #fffab5;
    /*border: 1px solid #ff9500;*/
    border-color: #33a7ff; 
}

button {
	clear: both;
	float: left;
	width: 135px;
	height: 35px;
        background: #33a7ff;
	margin: 8px 0 0 125px;
	border: 0;
	cursor: pointer;
	font-size: 18px;
	text-transform:uppercase;
	color: #fff;
	text-align: center;
}

#msg { width: 100%; float: left; font-size: 14px; color: #FF7700; margin: 0 0 20px 0; text-align: center;}

/* FOOTER */
footer {height: 170px;	margin-top: 20px; background: url("../img/footer/background.jpg") center top repeat-x;}

#sec-footer-middle {clear: both; width: 90%; min-width: 981px;	height: 170px;	margin: 0 auto;}

.footer-left { width: 50%; height: 65px; float:left; padding: 30px 0 0 0;}
.footer-right { width: 50%; height: 40px; float:right;}
.nav-menu.bottom{margin-top: 20px; margin-right: -15px;}
.nav-menu.bottom ul li { font-size: 14px;}
.nav-menu.bottom ul li a {height: 30px; padding: 10px 15px 0 10px; }
.nav-menu.bottom ul li a:hover { background-color: transparent; color: #009dff;}
.nav-menu.bottom ul li ul { top: 5px; left: 0; background: transparent;}
.nav-menu.bottom ul li:hover > ul {}
.nav-menu.bottom ul li ul li, .nav-menu.bottom ul li ul li a { font-size: 14px; color: #009dff;}
.nav-menu.bottom ul li ul li a:hover {background: transparent; }

#spn-copyright { height: 25px; clear: both; float: left; font-size: 11px; color: #32424f; margin-top: 50px; }

#spn-cio-solutions { float: right; display: block; width: 100px; height: 13px; margin-top: 50px; background: url("../img/footer/logo-cio-solutions.png") left top no-repeat; text-indent: -9999px;}
#spn-cio-solutions a { display: block; width: 100%; height: 100%; cursor: pointer; }

@media only screen and (min-width : 320px) and (max-width : 1024px) {
.teaser-home span{margin: -270px auto 20px auto; }
.teaser span{margin: -180px auto 20px auto;}
}

/* INPUT */
.input-invalid{
    background-color: #fffab5;
    border-color: #de0000;    
}

input:required:valid, textarea:required:valid, select:required:valid{
    background-color: white;
    border: solid 2px #f5f5f5;
}

input:required:valid:focus, textarea:required:valid:focus, select:required:focus{
     border-color: #33a7ff; 
}


/* LIST */
.lista{   
    margin: 0 0 40px 0;
    width: 100%;
    float: left;
}

.lista li{
    color: #1a1a1a;   
    font-family: 'open_sansregular';
    font-size: 16px;
    line-height: 32px;       
    list-style: disc;
    width: 100%;
    text-align: center;
    clear: both;
    list-style-position: inside;
}

.lista-downloads{   
    margin: 0 0 40px 0;
    width: 100%;
    float: left;
}

.lista-downloads li{
    color: #1a1a1a;   
    font-family: 'open_sansregular';
    font-size: 16px;
    line-height: 32px;       
    list-style: disc;
    width: 100%;    
    clear: both;
    list-style-position: inside;
}

/* E-SOCIAL - opção texto ao redor da imagem*/
.sec-features{padding: 30px 0; clear: both; width: 100%; border-bottom: 1px solid #CCC; float: left;}
.sec-features h4{margin-top: 0; width: 400px; float: none; clear: none; display: inline;}
.sec-features p{text-align: left; float: none; width: auto; }
.img-features-left{float: left; margin: 0 20px 0 0;}
.img-features-right{float: right; margin: 0 0 20px 20px;}

/* MESSAGES */
.messages, message {    
    margin: auto 125px;    
    float: left;
}
.messages.info {    
    background: none; 
    color: #00a938;
}
.messages.error, message.error {
    color: #de0000;
    font-size: 12px;
}


/* GROWL */
.ui-growl {            
    font-family: 'open_sansregular';
    font-size: 14px;
    position:absolute;
    top:50%;
    left:25%;
    z-index:9999;
}

.ui-growl-image-info {
    background: url("../img/alerta/icone_alerta_info.png");
    width: 40px;
    height: 40px;
}

.ui-growl-image-error {
    background: url("../img/alerta/icone_alerta_erro.png");
    width: 40px;
    height: 40px;
}