/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #D8F1DD; color: #000; text-shadow: none; }
::selection { background: #D8F1DD; color: #000; text-shadow: none; }
::-webkit-selection { background: #D8F1DD; color: #000; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 16px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */
body{ background: #FFF url(https://www.cpcaminhoes.com.br/images/background.png) repeat-x; font: 12px/12px Verdana, Geneva, sans-serif; color: #000; }
a { outline: 0 !important; }
/*
.error, .error *, .success, .success * { font-size: 13px; font-family: Verdana; line-height: 13px; margin-left: 50px; }
.error, .error *{ color: #f00 !important; }
.success, .success *{ color: #3AB855 !important; }
*/
.fL { float: left; }
.fR { float: right; }
.cB { clear: both; }
.mT { margin-top: 5px; }
.mR { margin-right: 5px; }
.mB { margin-bottom: 5px; }
.mL { margin-left: 5px; }
a { text-decoration: none;} 

#geral{ width:990px; margin:0 auto; }
.wrapper { width: 100%; height: auto; clear: both;}
#topo{ width:990px; height:120px; position:relative; background-color:#FFF; margin: 0 auto;}
#busca{ width:300px; height:85px; float: right;background-color:#fff;}
#busca .telefone { float: right; margin-right: 20px;}
#busca #search-form { background-color:#a9a9a9 !important; clear: both; width: 280px; height: 20px;}
#busca #search-form a { float: right; color: #000; text-decoration: underline; }
#busca #search-form #search { background-color:#fff; margin:0 50px 2px 0; width: 260px; border:2px solid #a9a9a9; float: left; display: block; }
#busca #search-form #search-submit { background-color:#a9a9a9; border:0px; color:#fff; position: absolute; left: 950px; width: 21px; height: 21px; }
#fb { width: 85px; float: left; margin-top: 15px;}
#menu{ clear: both; width:990px; height:33px; top:130px; background:#FFF url(https://www.cpcaminhoes.com.br/images/back_menu.png) repeat-x top center; text-align:right; }

#menuver{ margin: 0 auto; overflow: hidden; padding: 0; display: block; width: 875px; font: 12px/12px Verdana, sans-serif; }
#menuver li{ display: block; float: left; list-style: none outside none; margin: 0 17px; overflow: hidden; }
#menuver li a{ padding: 6px 10px; text-decoration: none; color: #fff; display: block; overflow: hidden; }
#menuver li a:visited{ color: #fff; }
#menuver li a:hover{ background-color: #c11d23; color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#menuver li a:active{ background: #ccc; color: #fff; }

/* inicio css banner */

#gallery { position: relative; width: 830px; margin:auto; z-index:0; padding-bottom: 10px; }
#gallery #gallery_infos { background-color: #FFF;; font-size: 11px; font-weight: bold; overflow: hidden; text-align: center; width: 830px; }
#gallery #gallery_infos p { padding: 0 !important; font-size: 13px !important; }
#gallery ul { clear: both; display: block; height: 240px; overflow: hidden; position: relative; width: 100%; position: relative; }
#gallery ul li { display: block; width: 830px; height: 240px; position: absolute; }
#gallery ul li a { display: none; cursor:pointer; margin: auto; }
#gallery ul li a.visible { display: block !important; }
#gallery ul li a img { width: 830px; height: 240px; }
#gallery #gallery_itens { position: absolute; top: 10px; right: 5px; z-index: 15; }
#gallery #gallery_itens a { margin-top: 2px; display: block; clear: both; padding: 5px 10px; background-color: #404140; text-decoration: none; color: #fff; font-weight: bold; }


#slider{ width: 990px; height: 364px; position: relative; overflow: hidden; }
#sliderContent{ width: 990px; position: absolute; top: 0; margin-left: 0; }
.sliderImage{ float: left; position: relative; display: none; }
.sliderImage span{ position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 990px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; }
.clear{ clear: both; }
.sliderImage span strong{ font-size: 14px; }
.top{ top: 0; left: 0; }
.bottom{ bottom: 0; left: 0; }
ul{ list-style-type: none; margin: 0; padding: 0; }
#thumb_banner{ width:130px; height:70px; background-color:#999; float:left; margin-top:20px; margin-left:10px; margin-right:10px; }


/* Parte */
#logo { width: 215px; height: 85px; background-color: #FFF; float: left; }

/* sidebar */
#sidebar { width: 125px; min-height: 850px; height: 100%; margin: 8px 30px 0 30px; float: left; }
#sidebar h2, #rightBar h2, .contatoDados h2, #footer h2 { color:#FF0000; border-bottom: 1px solid #d6d6d6; padding-bottom: 2px; margin-bottom: 0; font-size: 12px}
#sidebar h2 a { color:#FF0000 !important; } 

/* home */

.titulohome {color: #ff0000;border-bottom: 1px solid #d6d6d6;font-size: 16px; clear: both; display: block; height: 18px;}

#txtHome { width: 730px; height:auto; float: left; color: #738483; }
#txtHome p { margin-left: 30px; font-size: 13px; line-height: 12px; text-align: justify;}
#conteudoHome { width: 530px; margin: 2px 0 0 8px; float: left; }
#conteudoHome p { margin-left: 0; }
.destaques { width: 117px; height: 200px; float: left; margin: 2px 15px 0 0; color:#738483; font-size: 12px; line-height:13px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.txtDestaques { width: 117px; height: 160px;}
.txtDestaques>p { margin: 0;}
.imgDestaques { width: 117px; height: 30px;}
#rightBar { width: 210px; margin: 0 20px 0 20px; float: left; }

#cadastro { width: 210px; height: 94px; background: #d9d9d9 url(https://www.cpcaminhoes.com.br/images/back_login.png) repeat-x top center; border: 1px solid #d9d9d9; }
#cadastro a { float: right; color: #000; margin: 7px 20px 0 0;}
#login input[type=text]{ background-color:#c0c0c0; border:0px;  border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color:#FFF; margin: 0 0 3px 5px; width: 170px; display:block; font-size:12px; }
#cadastro #login-submit { background-color:#D92027; border:0px; color:#fff; position: relative; left: 175px; top: -22px; width: 20px; height: 20px; float: left; }
#cadastro h3 { text-align: center;}

#noticiasHome { width: 210px; height:auto; min-height: 205px; background: #e5e5e5 url(https://www.cpcaminhoes.com.br/images/back_noticias.png) repeat-x top center; border: 1px solid #e5e5e5; margin-top: 10px }
#noticiasHome h3, p { margin: 10px 11px; color:#777; }
#noticiasHome p { padding-bottom: 10px; }
#noticiasHome a { text-decoration: none; }
#cadastro h2, #noticiasHome h2, #videosHome h2 { color:#777; border:0; margin: 14px 0 10px 5px; font-size: 18px; font-family: Geneva, Arial, Helvetica, sans-serif;}


.promocao { position: relative; top: -150px; width: 118px; height: 17px; background: url(https://www.cpcaminhoes.com.br/images/produtos_promocao.png) repeat top center; margin: 0; color: #FFF; text-align: center; padding-top: 3px; display: none;}


#principal { width: 680px; float: left; height:auto;} 


/* jQuery lightBox plugin - style */
#produtosFotos { padding: 10px 0; width: 300px; }
#produtosFotos ul { list-style: none; }
#produtosFotos ul li, #eventosFotos ul li { display: inline; margin: 0 1px 2px 1px; }
#produtosVideo { margin: 7px 0; z-index: -9999;}
#paginacao { width: 100%; clear: both; margin: 0 auto; text-align: center; font-size: 18px; padding-top: 10px;}
#eventosFotos ul li { margin: 30px; }
#eventoPrincipal { width: 100%; height: 240px;}
#eventoPrincipal p { margin-left: 350px;}
.foto_peq { width: 74px; float: left; height: 50px; margin: 5px 5px 0 0; }
#box_fotos { width: auto; min-height: 320px; height: auto; }

/* INDIQUE / PROPOSTA */
#indique_content, #proposta_content { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#indique_content, #proposta_content { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#indique_content form, #proposta_content form { box-shadow: 0 0 6px #666; background-color: #DDDDDD; font-family: Verdana; font-size: 13px; left: 0; margin: 110px auto 0; padding: 15px; position: relative; top: 0; width: 500px; }
#indique_content form { height: 570px; }
#proposta_content form { height: 540px; }
#indique_content form p, #proposta_content form p { color: #555555; padding: 5px; }
#indique_content form p.al_left, #proposta_content form p.al_left  { float: left; }
#indique_content form p.al_left input, #proposta_content form p.al_left input  { width: 160px !important; }
#indique_content form p.al_left label, #proposta_content form p.al_left label  { display: inline !important; }
#indique_content form p label, #proposta_content form p label { width: 170px; display: inline-block; }
#indique_content form p#message label, #proposta_content form p#message label { width: 300px; display: inline-block; }
#indique_content form p input#submit, #proposta_content form p input#submit{ padding: 5px 15px; color: #555555; }
#indique_content form p input, #indique_content form p textarea, #proposta_content form p input, #proposta_content form p textarea  { border: 0; box-shadow: 0 0 5px #888; padding: 3px; }
#indique_content form p input.indique_error, #indique_content form p textarea.indique_error, #proposta_content form p input.indique_error, #proposta_content form p textarea.indique_error  { background-color: #BB0000; color: #FFFFFF; }
#indique_content form p a.close, #proposta_content form p a.close { background-color: #FFFFFF; box-shadow: 0 0 6px #888888; color: #555555; display: inline-block; float: right; line-height: 13px; padding: 7px 10px; text-decoration: none; }
#indique_content form p textarea, #proposta_content form p textarea { clear: both; display: block; height: 120px; margin-top: 10px; width: 475px; resize: none; }



#conteudo { width: 100%; height: auto; float: left; background-color: #FFF; }
.estoque  { width: 780px; margin: 10px 0; min-height: 555px; height: auto; background: #dbdbdb url(https://www.cpcaminhoes.com.br/images/back_produtos.png) repeat-x top center; float: left; border: 1px solid #d6d6d6;  }
.estoqueFotos { width: 317px; height: auto; margin: 5px; float: left; }
.estoqueFotos .estoqueBotoes { width: 317px; height: 75px; margin: 8px 0 0 0; float: left; clear: both; height: auto;}
.estoqueTxt { width: 340px; height: auto; float: left;}
.estoqueTxt h2 { width: auto; color:#244a8b; font: bold 26px Arial; text-transform: uppercase; margin: 0;}
.estoqueTxt h3 { width: 340px; color:#758383; font: bold 20px Trebuchet MS, Arial; text-transform: uppercase; margin: 0;}
.estoqueTxt h4 { width: 300px; color:#db2029; font: 20px Trebuchet MS, Arial; text-transform:capitalize; margin: 7px 0; }
.detalhesTitle, .detalhesContent { width: 150px; float: left; border-bottom: 1px solid #aaa; color: #525555; padding: 3px 3px 3px 0;}
.detalhesTitle { margin-left: 11px; }
/*
#estoqueTxt h4 { width: 300px; color:#db2029; font: 20px Trebuchet MS, Arial; text-transform:capitalize; background: url(https://www.cpcaminhoes.com.br/images/seta.png) no-repeat center left ; padding-left: 20px; margin: 7px 0; }
*/
.estoqueTxt p { color:#525555; line-height: 20px;}
.estoqueBusca  { width: 760px; margin: 10px 20px 0 0; min-height: 100px; height: auto; background: #dbdbdb url(https://www.cpcaminhoes.com.br/images/back_produtos.png) repeat-x top center; float: right; border: 1px solid #d6d6d6; padding: 10px;  }
.estoqueBuscaImg { width: 180px; height: auto; float: left; margin-right: 10px;}
.estoqueDetalhes { position: relative; top: -40px; left: 580px; width: 151px; height: 32px;}

.ford, .iveco, .mercedes, .scania, .volks, .volvo, .empresa, .evento, .noticia, .contato, .videos { background: url(https://www.cpcaminhoes.com.br/images/sprite.jpg); width: 780px; height: 82px; float: left; clear: right; margin-right: 15px;}
.iveco { background-position: -53px -5px; }
.ford { background-position: -53px -90px; }
.mercedes { background-position: -53px -175px; }
.scania { background-position: -53px -261px; }
.volks { background-position: -53px -346px; }
.volvo { background-position: -53px -431px; }
.empresa { background-position: -53px -519px; }
.evento { background-position: -53px -606px; }
.noticia { background-position: -53px -693px; }
.contato { background-position: -53px -781px; }
.videos { background-position: -53px -871px; }

.noticiasBox { width:775px;height: auto; background: #dbdbdb url(https://www.cpcaminhoes.com.br/images/back_produtos.png) repeat-x top center; float: left; border: 1px solid #d6d6d6; padding: 25px 0; margin: 5px 0;}
.videosBox, .eventosBox { width: 180px; height: 220px; float: left; margin: 10px 20px 10px 0;}
#videosYt { width: 560px; margin-left: 50px; float: left; }
#videosYt p{ padding-top: 10px; } 
#videos p { margin: 10px 0 !important;}

#busca_form { width: 665px; margin: 10px 0; height: auto; background: #dbdbdb url(https://www.cpcaminhoes.com.br/images/back_produtos.png) repeat-x ; float: left; border: 1px solid #d6d6d6; background-position: 0 -200px }

#contato_form, #cadastro_form { width: 780px; margin: 10px 0; height: auto; background: #dbdbdb url(https://www.cpcaminhoes.com.br/images/back_produtos.png) repeat-x ; float: left; border: 1px solid #d6d6d6; background-position: 0 -200px }
#contato{text-align: left; margin: 15px;}
#contato_form label { min-width: 90px; width: auto; float:left; display: block; } 
#cadastro_form label { min-width: 140px; width: auto; height: 30px; float:left; display: block; } 
#contato_form p ,#cadastro_form p { padding-bottom: 5px; clear: both; } 
#contato_form #send, #cadastro_form #send { border: 0; box-shadow: 0 0 5px #888; padding: 3px; margin-top: 5px; clear: both; width: 150px; }
#contatoe, #contatod { width: auto; float: left; margin: 1px;}
.contatoMapa { width: 190px; height: 330px; float: left; margin-bottom: 10px;}
.contatoDados { width: 200px; height: 330px; float: left; }
.contatoDados h2 { border: 0 !important; text-align: left !important; }
.contatoDados p { margin: 0 !important; text-align: left !important; }
.vendedores { width: 780px; margin: 10px 0; height: auto; background: #FFF; float: left; }
.dadosvendedor { width: 382px; margin: 4px; height: 100px; background: #FFF; float: left;}


#empresaimagem { width: 270px; height: 300px; float: left;}
#empresatxt { width: 390px; height: auto; float: left; color: #777;}
#empresaFotos { clear: both; padding: 20px 0;}  
#empresaFotos ul li{ display: inline; margin: 5px; } 




h3{line-height: 10px;}
h5 { font-size: 16px; color:#0d8d00 }
.legendaFoto{background-color:#dfb199; margin: 0 auto; width: 300px; height: 40px; color: #FFF; font-size: 16px; line-height: 18px;}


#destaquesFooter { width: 800px; margin: 0 auto; clear: both; padding-top: 20px;}
#left, #right { width: 48px; height: 112px; float: left; margin: 20px 0 10px; }
#barra { margin: 10px 5px 10px 5px; overflow: hidden; width: 680px; float: left; float: left; }
#barra ul { width: 5000px; top: 0; left: 0; padding: 0; list-style: none; overflow: hidden; position: relative; }
#barra ul li { position: relative; margin: 0 5px 5px 0; opacity: 0.8; filter: alpha(opacity=80);  height: 150px; width: 118px; float: left; color: #738483; }
#barra ul li:first-child { margin-left: 5px; }
#barra ul li img { height: 89px; width: 118px; }
#barra ul li.active { opacity: 1 !important; filter: alpha(opacity=100) !important; }


#footerback { width: 780px; text-align: right; float: left; text-decoration:underline; color: #000;}

#footer { font-size: 12px; line-height: 12px; clear: both; }
#footer p { text-align: center; color:#738483; }
#footer a { text-decoration: none; color: #738483; font-family: Verdana; }


/* Messages */
#message_close a { background-image: url(../img/sprite.png); }
#message { position: relative; display: none; z-index: 10; }
#message #message_container { background-color: #EEEEEE; border-radius: 5px 5px 5px 5px; left: 0; margin: 0 auto; max-width: 350px; position: absolute; right: 0; text-align: center; top: 150px; width: 350px; }
#message #message_container #message_title { border-radius: 5px 5px 0px 0px; padding: 15px 0; position: relative; }
#message.warning #message_container #message_title { background-color: #FF0000; color: #FFFFFF; }
#message.notice #message_container #message_title { background-color: #FFFF00; }
#message.success #message_container #message_title { background-color: #00FF00; }
#message #message_container #message_title #message_close { overflow: hidden; position: absolute; right: 10px; top: 3px; }
#message #message_container #message_title #message_close a { background-position: 0 -80px; color: #FFFFFF; cursor: pointer; display: inline-block; height: 13px; padding: 11px; text-decoration: none; text-indent: -99999px; width: 13px; }
#message #message_container #message_content { padding: 8px 5px; overflow: hidden; }
#message #message_container #message_content p { margin: 6px 0; }

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}