@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Lato:400,900italic,900,700italic,700,400italic,300italic,300,100italic,100);
/************************************ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; font-size:inherit; vertical-align:baseline; line-height:normal}

ol, ul { list-style:none}

table { border-collapse:collapse; border-spacing:0}

caption, th, td { text-align:left; font-weight:normal; vertical-align:middle}

q, blockquote { quotes:none}

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

a img { border:none}

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

a { text-decoration:none; color:inherit}

button, button:focus, a, a:focus, a:active, input:focus, input:active { outline:none !important; cursor:pointer}

button::-moz-focus-inner, a::-moz-focus-inner, input::-moz-focus-inner { border:0 !important}

/************************************ ZOPPINI STYLES ************************************/
html { font-size:18px}
html .clear { width:100%; height:0; line-height:0; font-size:0; clear:both}
html .clearfix:after, html .col-last:after, html .pagination:after { content:" "; width:100%; height:0; line-height:0; font-size:0; clear:both; display:block}
html body { font-family:"Lato", sans-serif; color:#686662; font-weight:400; line-height:1.2; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; position:relative}
html body * { line-height:inherit; font-size:inherit}
html b, html strong, html .bold { font-weight:700}
html em, html i, html .italic, html #header .logo .abstract, #header .logo html .abstract { font-style:italic}
html small, html .small { font-size:0.75rem; line-height:normal}
html .big { font-size:1.2em}
html .relative { position:relative}
html .float-left { float:left !important}
html .float-right { float:right !important}
html .align-right { text-align:right}
html .align-center { text-align:center}
html .uppercase { text-transform:uppercase}
html .transition, html .btn { -moz-transition-property:all; -o-transition-property:all; -webkit-transition-property:all; transition-property:all; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -webkit-transition-duration:0.2s; transition-duration:0.2s; -moz-transition-timing-function:ease-in; -o-transition-timing-function:ease-in; -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in}
html .bk, html .gray-row { position:absolute; top:0; left:0; right:0; z-index:0; min-width:600px}
html .bk { height:100%; background:url(img/bk.jpg) no-repeat center top}
html .gray-row { background:#939290; height:205px}
html .prewrap { position:relative; z-index:2; min-height:100vh; padding-bottom:46px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; min-width:600px}
html .wrap { max-width:1042px; padding:0px 20px; margin:0px auto; position:relative}
html .col12 { float:left; margin-right:10%}
html .col12 { width:45%}
html .col-last { margin-right:0}

#header { position:relative; z-index:3; height:205px}
#header .wrap { height:205px}
#header .logo { width:28%; padding-top:460px; position:relative; float:left}
#header .logo h1, div.h1-logo {font-family:"Merriweather", serif; font-size:3.72rem; line-height:1; text-transform:uppercase; font-weight:700}
#header .logo .abstract { font-family:"PT Serif", serif; font-size:1.33rem; letter-spacing:-0.08rem}
#header #menu { padding-top:170px; padding-bottom:20px; float:right; width:68%; font-family:"Merriweather", serif; color:#fff; font-weight:700; font-size:0.8rem; text-transform:uppercase}
#header #menu ul { display:table; width:100%; text-align:center}
#header #menu ul li { position:relative; padding-bottom:20px; display:table-cell}
#header #menu ul li a { padding:6.66667px 0}
#header #menu ul li ul { display:none; position:absolute; padding:20px 6.66667px 6.66667px 6.66667px; top:100%; left:0; color:#686662; background:#fff}
#header #menu ul li ul li { width:100%; font-weight:400}
#header #menu ul li:hover a { border-bottom:3px solid #fff}
#header #menu ul li:hover ul { display:block}
#header #menu ul li:hover ul li { display:inherit}
#header #menu ul li:hover ul li a { border-bottom:none}
#header #menu ul li:hover ul li:hover a { text-decoration:underline}
#header #menu ul li.selected a { border-bottom:3px solid #fff}
#header #menu ul li.selected li a { border-bottom:none}
#header #menu ul li.selected li.selected a { font-weight:900}

#main { width:70%; margin-left:30%; margin-bottom:125px; margin-top:65px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; padding:0 20px 0 40px}

.btn { background:#868581; color:#fff; font-size:0.6rem; text-transform:uppercase; font-weight:700; border:none; padding:16px 26px}

.btn:hover { color:#868581; background:#fff}

.section { color:#939290; margin-bottom:50px; padding-bottom:70px; position:relative}
.section .btn.more { position:absolute; bottom:0; left:0}

.title-sez { font-family:"Merriweather", serif; text-transform:uppercase; font-weight:900; font-size:1.72rem; color:#686662; margin-bottom:30px; position:relative; padding-bottom:15px}

.title-sez:after { content:""; width:100%; display:block; border-bottom:3px solid #686662; max-width:310px; position:absolute; bottom:0; left:0}

.list-article { padding-left:25px; background:url(img/list.png) left top 3px no-repeat; font-size:0.94rem; margin-bottom:20px; color:#686662}
.list-article .details { font-style:italic; font-size:0.72rem}
.list-article .title-strong { font-weight:900; font-size:0.83rem}
.list-article .year { font-style:italic; font-weight:700; font-size:0.72rem}
.list-article .details, .list-article .title-strong, .list-article .year, .list-article .title-light { margin-bottom:5px}

.media-article { font-size:0.72rem; color:#686662}
.media-article .title-media { font-weight:700; font-size:0.94rem; margin-bottom:5px; margin-top:5px}
.media-article img { width:100%; height:auto; display:block}

.media-article.video .wrap-img { position:relative}
.media-article.video .wrap-img:after { content:" "; position:absolute; top:0; right:0; left:0; bottom:0; background:url(img/play.png) no-repeat center center}

#footer { position:absolute; bottom:0; left:0; right:0}
#footer .copy { background:#868581; text-align:center; color:#fff; padding-top:15px; padding-bottom:15px; font-size:0.75rem; font-weight:300}

#menu-toggle { position:absolute; bottom:0; right:0; padding:15px 25px}

#menu-toggle.opened { background:#686662}

.embed-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%}

.embed-container iframe, .embed-container object, .embed-container embed { position:absolute; top:0; left:0; width:100%; height:100%}

.body { color:#939290; line-height:1.4; /*ckeditor*/ }
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, .body p, .body ul, .body ol, .body img, .body iframe, .body object, .body .embed-container { margin-bottom:0.5em}
.body img { max-width:100%; height:auto}
.body h1, .body h2, .body h3, .body h4, .body h5, .body h6 { font-weight:700; color:#686662}
.body h1 { font-size:1.72rem}
.body h2 { font-size:1.52rem}
.body h3 { font-size:1.22rem}
.body h4 { font-size:1.02rem}
.body h5 { font-size:1rem}
.body h6 { font-size:0.9rem}
.body ul, .body ol { padding-left:25px}
.body ul { list-style:disc}
.body ol { list-style:decimal}
.body a { text-decoration:underline; color:#686662}
.body img[align="left"] { margin-right:0.5em}
.body img[align="right"] { margin-left:0.5em}
.body .mm.left { float:left}
.body .mm.right { float:right}
.body .mm.left { padding:0 0.5em 0 0}
.body .mm.right { padding:0 0 0 0.5em}
.body .mm.center { text-align:center}
.body .hide { display:none}
.body figure { width:auto; margin:0}
.body figure img { display:block}

.articles { margin-bottom:40px}
.articles .header { border-bottom:1px solid #939290; padding:5px 0}
.articles .header .title { font-size:1.38rem; font-weight:700}
.articles .article { padding:40px 15% 40px 0; background:url(img/more.png) no-repeat right center; color:#939290}
.articles .article footer { margin-top:10px}
.articles .article.pdf { background-image:url(img/pdf.png)}
.articles .monografia { padding-left:80px; background:none}
.articles .monografia .figure { position:relative; margin-left:-80px; float:left}

.pagination { float:right; font-size:0.66rem; font-weight:700; color:#939290}
.pagination .next, .pagination .prev { display:inline-block; padding:0 10px; vertical-align:middle}
.pagination .next:after { content:url(img/next.png)}
.pagination .prev:after { content:url(img/prev.png)}

.inner-nav { margin-top:50px; border-top:3px solid #686662; padding-top:20px; font-family:"Merriweather", serif; font-size:0.89rem}
.inner-nav h2 { font-weight:700; text-transform:uppercase}
.inner-nav ul { padding-left:20px}
.inner-nav ul li { text-transform:capitalize; padding:10px 0 0}
.inner-nav ul li a:hover { text-decoration:underline}
.inner-nav ul li.selected { font-weight:900}

#gallery { width:484px}
#gallery .thumb img { cursor:pointer}
#gallery .zoom { position:relative}
#gallery .zoom li{ background-color:#000; text-align:center}
#gallery .zoom img{max-width:100%; max-height:333px; margin-bottom:-4px}
#gallery .flex-nav-prev .flex-prev { position:absolute; top:0; bottom:0; left:0; height:333px; width:20%; display:block; background:url(img/white-prev.png) no-repeat left 10px center}
#gallery .flex-nav-next .flex-next { position:absolute; top:0; bottom:0; right:0; height:333px; width:20%; display:block; background:url(img/white-next.png) no-repeat right 10px center}
#gallery .flex-caption { color:#939290; font-size:0.95rem; padding:20px 0;background-color:#fff;text-align:left;}

.video-list .media-article { margin-bottom:20px; color:#939290}
.video-list .media-article .title-media { padding:10px 0 5px 0; margin-top:20px; border-top:1px solid #939290}



#sez1 .wrap-img{height:195px; background:no-repeat center center #000; -moz-background-size:contain; -o-background-size:contain; -webkit-background-size:contain; background-size:contain;overflow:hidden}


/************************************ media queries ************************************/
/******** tablet ********/
@media only screen and (min-width:788px) and (max-width:1082px) { html { font-size:1.6vw} 
#sez1 .wrap-img{height:18vw;} }
@media only screen and (max-width:787px) { .nomobile { display:none}
  html { font-size:24px}
  html .bk { background:url(img/bk-mobile.jpg) no-repeat center top; -moz-background-size:contain; -o-background-size:contain; -webkit-background-size:contain; background-size:contain}
  html  .gray-row { height:113px}
  html .col12 { width:100%; float:none; margin-right:0}
  html #header { height:113px}
  html #header .wrap { height:113px}
  html #header .logo { position:static; float:none; width:auto; padding-top:inherit}
  html #header .logo h1 { font-size:1.45rem; color:#fff; padding:60px 0 10px 26%}
  html #header #menu { display:none; position:absolute; top:100%; left:0; right:0; background:#686662; padding:107px 30px; float:none; width:auto; min-height:100vh}
  html #header #menu ul { display:inherit}
  html #header #menu ul li { display:inherit; text-align:left; padding-bottom:50px}
  html #header #menu ul li ul { display:block; color:#fff; background:none; position:static; padding-left:30px}
  html #header #menu ul li ul li { float:none; width:auto; text-align:left; padding:30px 0 0}
  html #header #menu.opened { display:block}
  html #main { width:80%; margin-left:20%}
  #sez1 .wrap-img{height:250px;}
}
@media only screen and (min-width:788px) { .onlymobile { display:none} }
#sgtoolbar img { display:inline !important}