/* ---------------------------------------------------------------------- */
/*  Reset & Clearfix (normalize.css v3.0.2)
/* ---------------------------------------------------------------------- */

html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body {margin: 0;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}audio:not([controls]) {display: none; height: 0;}[hidden], template {display: none;}a {background-color: transparent;}a:active, a:hover {outline: 0;}abbr[title] {border-bottom: 1px dotted;}b, strong {font-weight: 400;}dfn {font-style: italic;}h1 {margin: .67em 0; font-size: 2em;}mark {background: #ff0; color: #323137;}small {font-size: 80%;}sub, sup {font-size: 75%; line-height: 0; vertical-align: baseline; position: relative;}sup {top: -.5em;}sub {bottom: -.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 1em 40px;}hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}pre {overflow: auto;}code, kbd, pre, samp {font-family: monospace,monospace; font-size: 1em;}button, input, optgroup, select, textarea {margin: 0; font: inherit; color: inherit;}button {overflow: visible;}button, select {text-transform: none;}button, html input[type=button], input[type=reset], input[type=submit] {cursor: pointer; -webkit-appearance: button;}button[disabled], html input[disabled] {cursor: default;}button::-moz-focus-inner, input::-moz-focus-inner {padding: 0; border: 0;}input {line-height: normal;}input[type=checkbox], input[type=radio] {box-sizing: border-box; padding: 0;}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {height: auto;}input[type=search] {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;}input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {-webkit-appearance: none;}fieldset {margin: 0 2px; padding: .35em .625em .75em; border: 1px solid silver;}legend {padding: 0; border: 0;}textarea {overflow: auto;}optgroup {font-weight: 700;}table {border-spacing: 0; border-collapse: collapse;}td, th {padding: 0;}

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

.clearfix:after {display: table; content: ''; clear: both;}
.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;width:0}

/* ---------------------------------------------------------------------- */
/*  Basic Elements & Classes
/* ---------------------------------------------------------------------- */

html {height: 100%;}
body {width: 100%; height: 100%; background: #fff; font: 14px/1.7 'Pt Sans', serif; font-weight: 300; color: #737373; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;}

::-moz-selection {background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none;}
::selection {background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none;}

a {color: #323137; text-decoration: none; transition: all .2s ease-out 0s; -webkit-transition: all .2s ease-out 0s;}

h1, h1 a {font-family: 'Cormorant', serif; font-size: 50px; font-weight: 300; text-align: left; line-height: 1.4; letter-spacing: 1px;}
h2, h2 a {font-family: 'Cormorant', serif; margin: 0px; font-size: 28px; font-weight: 300; line-height: 120%; text-align: left; color: #000;}
h2 a:hover {color: #323137;}

h3, h3 a {font-family: 'Cormorant', serif; margin: 0; font-size: 22px; font-weight: 300; line-height: 110%; color: #000;}
h4, h4 a {font-family: 'Cormorant', serif; margin: 10px 0; font-size: 16px; font-weight: 300;}

.wrapper {width: 80%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 0px; position: relative;}

.full {width: 100%; padding: 0 70px;}
.wrapper.smaller {max-width: 900px;}

.wrapper-border {    border-top: 1px solid #ddd;}

.margin-top {margin-top: 80px;}
.margin-bottom {margin-bottom: 40px;}
.no-margin {margin: 0;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.fit {max-width: 100%;}
.fit > * {max-width: 100%;}

date {display: block;}

.no-desktop{display: none;}

/* ---------------------------------------------------------------------- */
/*  Header
/* ---------------------------------------------------------------------- */

header {}

.top-header {border-bottom: 1px solid #95989A; padding: 20px 0px 10px 0px;}
.top-header ul {margin: 0px; padding: 0px; list-style-type: none;}
.top-header ul li {display: inline-block; text-align: left; padding: 0px 5px; font-size: 12px; color: #000;}
.top-header ul li a {font-family: 12px; color:#000;}


.middle-header {border-bottom: 1px solid #95989A; padding: 20px 0px 20px 0px;}
.middle-header .logo {float:left;}
.middle-header .logo img {width: 368px; height: auto;}

.logo h1 {font-size: 28px; margin: 0px;}
.logo h1 span {display: block; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 300; letter-spacing: 0px; margin-top: -5px;}

.middle-header nav.nav-primary {float: right;}

nav.nav-primary ul {list-style: none; margin: 0px 0 0; padding: 0; position: relative; z-index: 99999;}
nav.nav-primary ul li {display: inline-block; padding: 10px 5px; text-align: left;}
nav.nav-primary ul li a {font-family: 'Cormorant', serif; color: #000; text-transform: uppercase; text-decoration: none; font-size: 15px; font-weight: normal;}



.psico-row {position: absolute; bottom:0px; width: 100%; transition:all .5s ease-out 0s; -webkit-transition: all .5s ease-out 0s;}
.psico-row .wrapper {width: 90%;}
.psico-row .psico-item {width: 32%; float:left; height: 80px; background: rgba(255, 255, 255, 0.64); color: #000; box-sizing: border-box; padding: 30px; font-family: 'Cormorant', serif; font-size: 28px; display: flex; align-items: center; margin-right: 2%; text-align: center; justify-content: center;}
.psico-row .psico-item:last-of-type{margin-right: 0px;}
.psico-row a {color: #302313; font-weight: 400; line-height: 100%;}
.psico-row .psico-item:hover { background: rgba(255, 255, 255, 0.74)}
    
.greyboxes {transition:all .2s ease-out 0s; -webkit-transition: all .2s ease-out 0s;}
.greyboxes .col-1-2 {padding: 0px;}
.greyboxes .col-1-2 .content {background: #F4F2F2; padding: 20px; box-sizing: border-box;  transition:all .5s ease-out 0s; -webkit-transition: all .5s ease-out 0s;}
.greyboxes .col-1-2 .content.left {margin-right: 10px;}
.greyboxes .col-1-2 .content.right {margin-left: 10px; text-align: left}
.greyboxes .col-1-2 img {width: 70%; margin: 20px auto 0px auto;}
.greyboxes .col-1-2 .content.right img {width: 60%;}

.greyboxes .col-1-2 a:hover .content{background: rgba(188, 184, 184, 0.78)}

.services-container {margin: 50px 0px;}
.services-container h2 {text-align: center; margin-bottom: 0px;}
.services-container .col-1-4 {text-align: center;}

.services-container .col-1-4 {background: url(../images/genius.svg) no-repeat top center; padding-top: 40px;}
.services-container .col-1-4.c-avaliacaopsicologica {background: url(../images/genius.svg) no-repeat top center;}
.services-container .col-1-4.c-psicoterapia {background: url(../images/puzzle.svg) no-repeat top center;}
.services-container .col-1-4.c-psicanalise {background: url(../images/layers.svg) no-repeat top center;}
.services-container .col-1-4.c-orientacao-vocacional {background: url(../images/hotairballoon.svg) no-repeat top center;}

.welcome a.col-1-4 {color: #737373;}
.welcome a.col-1-4:hover {color: #323137;}

.services-container .col-1-4 img {display: inline}
.services-info {
    padding: 10px;
    max-width: 60%;
    text-align: center;
    margin: 0px auto 30px auto;
    font-size: 13px;
}
/* ---------------------------------------------------------------------- */
/*  Banner
/* ---------------------------------------------------------------------- */

.main-banner {box-sizing: border-box; width: 100%;  height:240px; padding: 0; position: relative; margin-bottom: 20px; color: #FFF;  }
.main-banner .slide {width: 100%; height: 240px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative;}

.welcome .main-banner .slide {background-position: center center;}
.welcome .main-banner, .welcome .main-banner .slide {height: 340px;}

.over-slide {box-sizing: border-box; display: flex; width: 100%; height: 100%; color: #fff; position: absolute; top: 0; left: 0; justify-content: center; align-items: center; z-index: 999; background: rgba(0, 0, 0, 0.25)}

.slide-wrapper {box-sizing: border-box; width: 100%; text-align: left;  z-index: 99999; padding-top: 0px; padding-left: 50px;}
.welcome .slide-wrapper {padding-top: 50px; padding-left: 0px; text-align: center; }
.slide-wrapper a.back {color: #fff; position: absolute; bottom:60px;}

.over-slide h1 {margin: 0px; color: #fff; line-height: 100%;  font-weight: 300; font-size: 54px; text-align: left;}
.welcome .over-slide h1{text-align: center; margin: -85px 0px 10px 0px; }


.over-slide h2 {margin: 0px 0px 10px 0px; color: #302313; line-height: 100%;  font-weight: 300; text-transform: none; text-align: left; font-size: 50px}
.over-slide p {font-size: 20px; font-weight: 500; margin: 0px;} 



/* ---------------------------------------------------------------------- */
/*  Fade In Animation
/* ---------------------------------------------------------------------- */

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

.fade-in {opacity: 0; -webkit-animation: fadeIn ease-in 1; -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;}

.fade-in.one {-webkit-animation-delay: .7s; -moz-animation-delay: .7s; animation-delay: .7s;}
.fade-in.two {-webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s;}
.fade-in.three {-webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s;}


/* ---------------------------------------------------------------------- */
/*  Grid
/* ---------------------------------------------------------------------- */

.container {max-width: 100%; margin: 0 auto; padding: 1.25em; background: #fff;}
.row {margin: 0 0 1.25em;}
.row:last-child {margin-bottom: 0;}
[class*='col-'] {padding: 0 16px; float: left;}
[class*='col-'] img {display: block; max-width: 100%;}

@media all and (min-width: 37em) {
    .col-2-3 {width: 66.66%;}
    .col-1-2 {width: 50%;}
    .col-1-2:nth-child(2n+1) {clear: left;}
    .col-1-3 {width: 33.33%;}
    .col-1-3:nth-of-type(3n+1) {clear: left;}
    .col-1-4 {width: 25%;}
    
    
    .col-3-4 {width: 75%;}
    .col-1-5 {width: 20%;}

    .col-1-8 {width: 12.5%;}
}


/* ---------------------------------------------------------------------- */
/*  Page Layout
/* ---------------------------------------------------------------------- */

.page {padding: 50px;}
.page .col-1-3 {padding-right: 40px;}

ul.contactslist {margin: 0px; padding: 0px; list-style-type: none;}
ul.contactslist li {padding:0px 0px 10px 20px; position: relative}

ul.contactslist li.address:before{content: "\f041"; font: normal normal normal 14px/1 FontAwesome; position: absolute; top:4px; left: 0px;}
ul.contactslist li.mail:before{content: "\f0e0"; font: normal normal normal 14px/1 FontAwesome; position: absolute; top:4px; left: 0px;}
ul.contactslist li.phone:before{content: "\f098"; font: normal normal normal 14px/1 FontAwesome; position: absolute; top:4px; left: 0px;}
ul.contactslist li a {color: #737373; transition: all .2s ease-out 0s;}
ul.contactslist li a:hover {text-decoration: underline;}


.articles .page h1{font-family: 'Cormorant', serif; margin: 0px 20px 0px 0px; font-size: 28px; font-weight: 300; line-height: 120%; text-align: left; color: #000;}

.articles .page h2 {font-family: 'Cormorant', serif; margin: 0; font-size: 22px; font-weight: 300; line-height: 110%; color: #000;}
.articles .page p+h2, .articles .page ul+h2{margin-top: 40px;}
.articles .page h3 {font-size: 17px;}
.articles .date {font-size: 12px;}

.cert {margin-top: 20px;}
.cert img {height: 100px; display: inline-block; margin-right: 10px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);}


.item.ref {padding: 0px 0px 0px 10px; width: 90%; margin-top: 40px; display: block;}


.art-item {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}
.art-item h3 {margin-bottom: 10px;}

.articles-container {
    margin:40px;
}

.articles-container h2 {margin-bottom: 20px;}

.psico {background: #F4F2F2; padding: 20px; margin-top: 40px; transition:all .2s ease-out 0s; -webkit-transition: all .2s ease-out 0s;}
.psico h3 {margin-bottom: 10px; background: url(../images/puzzle.svg) no-repeat left 5px;     padding: 10px 0px 0px 50px;
    height: 40px;}
.psico a h3 {font-size: 22px!important;}
.psico:hover {background: rgba(188, 184, 184, 0.78)}

.psicoterapia.list p{margin-bottom: 0px;}
/* ---------------------------------------------------------------------- */
/*  Footer
/* ---------------------------------------------------------------------- */

footer {border-top: 1px solid rgba(149, 152, 153, 0.25); padding: 20px 0px!important;}
footer .footer-menu {margin: 0px; padding: 0px; list-style-type: none;}
footer .footer-menu li {display: inline-block; }
footer .footer-menu li a {color:#767676; border-right: 1px solid #767676; font-size: 12px; padding: 0px 10px; text-transform: uppercase }
footer .footer-menu li:first-of-type a {padding-left: 0px;}
footer .footer-menu li:last-of-type a {border-right:0px none}

.bottom-footer {border-top:1px solid rgba(149, 152, 153, 0.25); padding: 10px 0px 10px 0px; margin-top: 20px;}
.bottom-footer ul {margin: 0px; padding: 0px; list-style-type: none;}
.bottom-footer ul li {display: inline-block; text-align: left; padding: 0px 5px; font-size: 12px; color: #767676;}
.bottom-footer ul li a {font-family: 12px; color:#767676;}
.bottom-footer ul li:first-of-type{padding-left: 0px;}

/* ---------------------------------------------------------------------- */
/*  Form
/* ---------------------------------------------------------------------- */

form {margin: 20px 0px 20px 0px; padding: 0; text-align: left;}
form .col-1-2 {padding: 0px;}
form .col-1-2:first-of-type{padding-right: 5px;}
form .col-1-2:last-of-type{padding-left: 5px;}

input, textarea {width: 100%; margin-bottom: 10px; padding: 10px;  border: 1px solid #dcdee0; font-size: 12px;}
textarea {height: 100px;}

input:focus, textarea:focus {border-color: #ccc; outline: 0; -webkit-box-shadow: none; box-shadow: none;}

button{    width: 100%;
    background: #f3f3f3;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    color: #000;
    padding: 7px 10px;
    /* font-weight: 600; */
    text-decoration: none !important;
    outline: none !important;
    text-align: left;
    text-transform: uppercase;
    font-size: 15px;
    margin-top: -10px;
    letter-spacing: 1px;
    font-family: 'Cormorant'; transition: all .2s ease-out 0s;}
button:hover {background: #ccc; color: #000;}


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #737373;
    font-size: 12px;
}

input:-moz-placeholder, textarea:-moz-placeholder { 
     color: #737373;
    font-size: 12px;
}

input::-moz-placeholder, textarea::-moz-placeholder { 
     color: #737373;
    font-size: 12px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color: #737373;
    font-size: 12px;
}


form .row {margin-bottom: 0;}
.row > input {width: 49%;}
.row > input:nth-child(1) {margin-right: 1%;}


form h3 {margin: 20px 0; clear: both;}

.select-style {
    border: 1px solid #dcdee0;
    width: 100%;
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E') right 10px center no-repeat; font-size: 12px;
}

.select-style select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    font-size: 12px;
}

.select-style select:focus {
    outline: none;
}

/* ---------------------------------------------------------------------- */
/*  Pagination
/* ---------------------------------------------------------------------- */

ul.pagination {padding: 0; text-align: center; list-style-type: none;}
ul.pagination li {display: inline-block; margin: 0 10px;}
ul.pagination li a {text-decoration: none;}
ul.pagination li.active a {font-weight: 600;}



/* ---------------------------------------------------------------------- */
/*  Media Queries
/* ---------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
	
	.middle-header .logo img {width: 300px;}
	.middle-header .logo {float: none;}
	.middle-header nav.nav-primary {float: none; display: block;}
	nav ul li a {font-size: 14px;}
	.wrapper {width:80%;}
	.greyboxes .col-1-2 .content {height: auto!important;}
}


@media only screen and (max-width: 1100px) {

	.greyboxes .col-1-2 .content {height: 220px;}

}

@media only screen and (max-width: 1300px) {
	
	.middle-header .logo img {width: 300px;}
	nav.nav-primary  ul li a {font-size: 14px;}

.middle-header .logo h1 {font-size: 24px!important;}
	.middle-header .logo h1 span {font-size: 11px!important;}
	
	
}

@media only screen and (max-width: 1400px) {
	.greyboxes .col-1-2 .content {height: 200px;}
	.middle-header .logo h1 {font-size: 26px;}
	.middle-header .logo h1 span {font-size: 12px;}
	body header {-webkit-font-smoothing: auto!important;}

}

@media only screen and (max-width: 1200px) {
	
	.middle-header .logo img {width: 300px;}
	nav.nav-primary ul li a {font-size: 14px;}
	.wrapper {width:90%;}
}



@media only screen and (max-width: 540px) {
	.no-mobile {display: none!important;}
	.no-desktop {display: initial}
	.wrapper {width: 94%}
	.psico-row {display: none;}
	.welcome .over-slide h1 {margin: 0px;}
	.over-slide h1 {font-size: 38px;}
	.welcome .slide-wrapper {padding: 0px;}
	.col-1-2 {float: none; width: 100%; margin-left: 0px!important; margin-right: 0px!important; margin-bottom: 10px;}
	.greyboxes .col-1-2 .content.left {margin-right: 0px;}
	.greyboxes .col-1-2 .content.right {margin-left: 0px;}
	.greyboxes .col-1-2 img {width: 40%!important;}
	.col-1-3, .col-2-3 {float: none; width: 100%;}
	.col-1-2 .content, .col-1-2 .content h2 {text-align: center!important;}
	.greyboxes .col-1-2 .content {padding: 10px;}
	.page {padding: 0px;}
	.psico {display: none;}
	form .col-1-2:first-of-type {padding-right: 0px;}
	form .col-1-2:last-of-type {padding-left: 0px;}
	
	.articles-container {margin-top: 40px;}
	
	.art-item {margin: 20px 0px 0px 0px; width: 100%; padding: 0 16px;}
	.slide-wrapper {padding: 0px 20px;}
	.slide-wrapper a.back {position: static; margin-top: 10px; display: inline-block}
	.top-header {padding-top: 0px;}
	
#menuToggle
{
  display: block;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 9999;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 0;
  padding: 50px;
  padding-top: 125px;
  right: -100px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  display: none;
  opacity: 0
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
display: block;
  transform: scale(1.0, 1.0);
  opacity: 1;
}
}