*,:before,:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
* {-webkit-font-smoothing: antialiased;}



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

html {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; color: #000; line-height: 18px;}

::-moz-selection {background: #b3d4fc; text-shadow: none;}
::selection {background: #b3d4fc; text-shadow: none;}

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

audio, canvas, iframe, img, svg, video {vertical-align: middle;}

fieldset {margin: 0; padding: 0; border: 0;}
textarea {resize: vertical;}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* GENERAL
/* ---------------------------------------------------------------------- */

a {color: #000; text-decoration: none; -webkit-transition: color 0.6s ease-out; -moz-transition: color 0.6s ease 0s; -o-transition: color 0.6s ease 0s; transition: color 0.6s ease 0s;}
a:hover {color: #B388FF;}

h1, h2, h3 {margin: 0 0 10px; font-size: 16px; font-weight: 500; line-height: 24px;}
h4, h5, h6 {margin: 0 0 10px; font-size: 12px; font-weight: 500;}


/* ---------------------------------------------------------------------- */
/* HEADER
/* ---------------------------------------------------------------------- */

header {padding: 40px; border-top: 5px solid #000;}

header nav {overflow: hidden;}
header nav ul {margin: 0; padding: 0; list-style: none; overflow: hidden; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines;}
header nav li {vertical-align: top; display: inline-block; *display: inline; zoom: 1;}
header nav li a {font-size: 16px; font-weight: 500}
.stretch {width: 100%; display: inline-block; font-size: 0; line-height: 0;}
.menu-bt {display: none;}

.main-wrapper {padding-bottom: 80px;}
.welcome .main-wrapper {margin-top: 100vh; background: #FFF; overflow: hidden; position: relative;}

.home-anim {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1;}
.anim-wrap {width: 100%; height: 100%;}
.home-anim h1 {margin: 0; font-size: 35vh; line-height: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.home-anim #tunnel + h1 {color: #FFF;}
.home-anim #canvas + h1 {color: #C31515; mix-blend-mode: difference;}
#canvas {background: #B388FF;}

.wrapper {min-height: calc(100vh - 86px); padding: 0 30px;}

.grid-item {opacity: 0;}

.col-1-4 {width: 25%; padding: 10px;}
.col-1-4 .main-img {width: 100%;}
.col-1-4 h2 {margin: 20px 0 0;}
.col-1-4 h3 {margin: 0 0 8px; color: #B388FF;}
div.tags a {color: #AAAAAA;}
div.tags a:hover {color: #B388FF;}

.col-1-4 a .main-img {-webkit-transition: opacity 0.6s ease-out; -moz-transition: opacity 0.6s ease 0s; -o-transition: opacity 0.6s ease 0s; transition: opacity 0.6s ease 0s;}
.col-1-4 a:hover .main-img {opacity: .6;}

.etic-logo {width: 80px; position: fixed; right: 80px; bottom: 40px; z-index: 99;}
.dcm-description {font-weight: 500; position: fixed; top: 40px; right: 40px; left: 40px;}

.main {overflow: hidden;}
.grid {width: calc(100vw - 220px); overflow: hidden; float: left;}

aside {width: 130px; margin-top: 10px; float: right;}

.tag-cloud a {display: block; color: #AAAAAA;}
.tag-cloud a:hover {color: #B388FF;}

.singular {max-width: 1000px; margin: 0 auto 60px; padding-top: 50px;}
.singular h1 {margin: 0; font-size: 42px; font-weight: 500; color: #222; line-height: 52px; text-align: center;}
.singular h2 {margin: 10px 0 30px; color: #B388FF; text-align: center;}
.singular .main-img, .singular .media-img {text-align: center;}
.singular .main-img img, .singular .media-img img {max-width: 100%; max-height: 700px; margin: 0 auto 30px;}

.singular .content {margin: 40px 0; overflow: hidden;}
.singular .content h1 {margin: 0; font: 400 18px/22px 'AnoBold-Regular', sans-serif; color: #222; text-align: left;}
.singular .content h2 {margin: 0; font: 400 14px/22px 'AnoRegular-Regular', sans-serif; color: #222; text-align: left;}
.singular .titles {width: 200px; float: left;}
.singular .text {width: calc(100% - 400px); float: left;}
.singular .text p {margin: 0 0 10px; font: 400 14px/22px 'AnoRegular-Regular', sans-serif;}
.singular .text p:last-child {margin: 0;}

.singular .related {border-top: 2px solid #000;}
.singular .related h3 {font: 400 23px/27px 'AnoHalf-Regular', sans-serif; text-align: center;}

.singular .related .col-1-4 h2 {margin: 20px 0 0; font-family: 'AnoBold-Regular'; font-size: 18px; font-weight: normal; text-align: center;}
.singular .related .col-1-4 h3 {margin: 0; font-size: 13px; font-weight: normal; color: #707070; text-align: center;}

body.curso, body.pages {background: #B388FF;}
body.curso a:hover, body.pages a:hover {color: #FFF;}

body.curso .wrapper, body.pages .wrapper {margin: 0; overflow: hidden;}

.curso .aside, .pages .aside {width: 200px; margin-left: 10px; font-size: 16px; font-weight: 500; line-height: 24px; float: left;}
.curso .aside a, .pages .aside a {display: block;}
.curso .aside a.active, .pages .aside a.active {color: #FFF;}

.curso .page, .pages .page {max-width: 550px; float: left;}
.text p {margin: 0 0 20px;}
.text p a {font-weight: 500;}

form input {width: 100%; margin-bottom: 20px; background: none; border: none; border-bottom: 2px solid #000; font-weight: 500;}
form .button {width: auto; margin: 0; padding: 0; background: none; border: none; font-weight: 500; -webkit-transition: color 0.6s ease-out; -moz-transition: color 0.6s ease 0s; -o-transition: color 0.6s ease 0s; transition: color 0.6s ease 0s;}
form .button:hover {color: #FFF;}

form input:focus {outline: none;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #000;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #000;
}
:-moz-placeholder { /* Firefox 18- */
  color: #000;
}


/* ---------------------------------------------------------------------- */
/*  EMBED VIMEO
/* ---------------------------------------------------------------------- */

.embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; visibility: visible!important;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: visible!important;}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (max-width: 1630px) {
    .singular {max-width: 1000px;}
}

@media only screen and (max-width: 1380px) {
    .etic-logo {right: 80px;}
}

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

    .home-anim h1 {font-size: 36vw;}

    header {padding: 20px;}

    header nav ul {display: none; width: 200px; height: 100%; margin: 0; padding: 20px; background: #7C73FF; position: fixed; top: 0; left: -200px; z-index: 999;}
    header nav li {display: block; margin: 0!important; float: none;}
    header nav ul a {display: block; line-height: 24px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    header nav ul a:hover {color: #FFF;}

    .dcm-description {font-size: 16px; line-height: 22px; right: 50px;}

    .menu-bt {display: block; padding: 20px; font-size: 21px; text-align: right; position: absolute; top: 0; right: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    .menu-open .menu-bt {width: calc(100% - 200px); height: 100%;}

    .etic-logo {display: none; width: 50px; right: 20px; bottom: 20px; position: absolute;}
    .welcome .etic-logo {display: block;}
    .menu-open .etic-logo {display: block;position: fixed; right: auto; bottom: 20px; left: 20px; z-index: 9999;}

    .main-wrapper {padding-bottom: 0;}

    .wrapper, body.curso .wrapper, body.pages .wrapper {margin: 0; padding: 40px 20px;}

    .main {overflow: visible;}

    .grid, .singular, .curso .aside, .pages .aside, .curso .page, .pages .page {width: 100%; margin: 0; padding: 0; float: none;}
    .col-1-4 {width: 100%; padding: 20px 0;}

    .curso .page, .pages .page {padding-top: 30px;}

    aside {width: 100%; padding: 10px 10px; border-top: 2px solid #000; text-align: center; overflow: hidden; position: relative; top: 20px; float: none;}

    .tag-cloud a {display: inline; margin-right: 21px; line-height: 21px;}

    .singular .titles, .singular .text {width: 100%; margin-bottom: 20px; float: none;}
    .singular .content {margin: 40px 0 20px;}
    .singular h1 {font: 400 28px/38px 'AnoBold-Regular', sans-serif;}

}


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

  

}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *, *:before, *:after {background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important;}
    a, a:visited {text-decoration: underline;}
    a[href]:after {content: " (" attr(href) ")";}
    abbr[title]:after {content: " (" attr(title) ")";}
    a[href^="#"]:after, a[href^="javascript:"]:after {content: "";}
    pre, blockquote {border: 1px solid #999; page-break-inside: avoid;}
    thead {display: table-header-group;}
    tr, img {page-break-inside: avoid;}
    img {max-width: 100% !important;}
    p, h2, h3 {orphans: 3; widows: 3;}
    h2, h3 {page-break-after: avoid;}
}