@font-face {
    font-family: 'Neutra';
    src: url('../fonts/neutratext-bold.eot');
    src: url('../fonts/neutratext-bold.eot') format('embedded-opentype'),
         url('../fonts/neutratext-bold.woff2') format('woff2'),
         url('../fonts/neutratext-bold.woff') format('woff'),
         url('../fonts/neutratext-bold.ttf') format('truetype'),
         url('../fonts/neutratext-bold.svg#NeutraTextBold') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Neutra';
    src: url('../fonts/neutratext-book.eot');
    src: url('../fonts/neutratext-book.eot') format('embedded-opentype'),
         url('../fonts/neutratext-book.woff2') format('woff2'),
         url('../fonts/neutratext-book.woff') format('woff'),
         url('../fonts/neutratext-book.ttf') format('truetype'),
         url('../fonts/neutratext-book.svg#NeutraTextBook') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Neutra';
    src: url('../fonts/neutratext-bookitalic.eot');
    src: url('../fonts/neutratext-bookitalic.eot') format('embedded-opentype'),
         url('../fonts/neutratext-bookitalic.woff2') format('woff2'),
         url('../fonts/neutratext-bookitalic.woff') format('woff'),
         url('../fonts/neutratext-bookitalic.ttf') format('truetype'),
         url('../fonts/neutratext-bookitalic.svg#NeutraTextBookItalic') format('svg');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Neutra';
    src: url('../fonts/neutratext-demi.eot');
    src: url('../fonts/neutratext-demi.eot') format('embedded-opentype'),
         url('../fonts/neutratext-demi.woff2') format('woff2'),
         url('../fonts/neutratext-demi.woff') format('woff'),
         url('../fonts/neutratext-demi.ttf') format('truetype'),
         url('../fonts/neutratext-demi.svg#NeutraTextDemi') format('svg');
    font-weight: 700;
    font-style: normal;
}

body{font-family: 'Lato', sans-serif; background: #f0f0f0; color: #424242;}
a{ color:#424242;}
body.page{ background: none;}

#header{ background: #fff; padding: 1em 0;box-shadow: 2px 0 10px rgba(0,0,0,0.3); margin-bottom: 30px;}
#header h1{ width: 111px;  margin: 0 auto;}
#header h1 a{ display: block; width: 111px; height: 86px; background: url(../images/logo.png) no-repeat;}
#header h1 a span{ display: none;}
#header h2{ font-size: 10px; margin: 10px auto; color: #06a1e3; text-align: center;}
#header .container{ position: relative;}
#header .menu{ text-align: center; margin-top: 20px;position: relative;}
#header .menu li{display: inline-block; margin: 0 10px; font-family: Neutra, sans-serif; font-weight: 700; text-transform: uppercase; }
#header .menu li a{color: #06a1e3; text-decoration: none;}
#header .menu .current-menu-item a, #header .menu li a:hover{ color: #f37b5f;}
#header .menu li .sub-menu{ display: none; position: absolute; top: 23px; left: 0; width: 100%; background: #fff; padding: 15px 10px 0 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
#header .menu li .sub-menu li{ display: inline-block; margin: 0 0 10px 0; font-size: 0.9em; width: 20%; text-align: center;}
#header .menu li .sub-menu li a{color: #666;}
#header .menu li .sub-menu li a:hover{color: #06a1e3;}
#header .menu li:hover .sub-menu{ display: block; z-index: 1000;}
#header .social{ position: absolute; top: 10px; right: 10px;}
#header .social li{ display: inline-block;}
#header .social li a{ display: block; width: 30px; height: 30px; text-indent: -9999px; outline: none; background: url(../images/spriteredes.png) no-repeat; background-size: 105px;}
#header .social .facebook a{ background-position:-76px 0;}
#header .social .twitter a{background-position: 0 0;}
#header .social .instagram a{background-position: -37px 0;}
#header .toggle-menu{ display: none; width: 60px; height: 60px; background: url(../images/menu.png) no-repeat top left; background-size: 60px; text-indent: -9999px; outline: none; margin: -10px 0 0 0; opacity: 0.6;}
#header .toggle-menu.active{background: url(../images/close.png) no-repeat top left; background-size: 50px;}

.mainCarousel{ }
.mainCarousel li{ position: relative;max-height: 480px; overflow: hidden; }
.mainCarousel li img{ width: 100%; height: auto;}
.mainCarousel .slideInfo{position: absolute; bottom: 20%; left: 2%;font-family: Neutra, sans-serif; color: #fff; width: 98%;}
.mainCarousel .slideInfo h3{ font-size: 3em; text-shadow: 1px 2px 5px rgba(0,0,0,0.4); text-transform: uppercase; max-width: 60%; font-weight: 900; margin: 0 0 20px 0; text-align: left;}
.vermas{ font-family: Neutra, sans-serif; color: #06a1e3; text-transform: uppercase; font-size: 1.4em;  text-decoration: none; display: block; float: left; font-weight: 700; cursor: pointer;}
.vermas:hover{ color: #666;}

.events{ overflow: hidden; margin: 30px 0;}
.eventsContainer{ margin: 0 auto;}
.events .col{ float: left; width: 31.333%; margin: 0 2% 0 0;}
.events .col.left{font-family: Neutra, sans-serif;  text-transform: uppercase;}
.events h4{ font-size: 0.9em; text-align: center; font-weight: 900; margin: 2em 0 0.5em 0;}
.events h3{ font-size: 2em; padding: 0.8em 0; text-align: center; border-top: solid 3px #ccc; border-bottom: solid 3px #ccc;font-weight: 900;  max-width: 95%; margin: 0 auto;}
.events .col.center{ text-align: center;}
.events .imageContainer{ overflow: hidden; text-align: center; }
.events .imageContainer img{ width: 100%; height: auto; margin: 2em 0 0 0;}
.events .col.right{ float: right; margin: 1em 0 0 0;}
.events .col.right p{ margin: 0.8em auto; }
.events .col.right p a{ color: #000; text-decoration: underline;}
.events .details{ font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 700; font-size: 0.9em; margin-top: 0.5em;}
.events .details span{ display: block; margin: 0 0 0.3em 0; text-align: center;}

.newsContainer{margin: 0 0 30px 0; overflow: hidden;}
.newsContainer .news{ width: 31.333%; float: left; margin: 0 3% 0 0; min-height: 335px;}
.newsContainer .news .imgContainer{ max-height:160px; overflow: hidden;}
.newsContainer .news img{ width: 100%; height: auto;}
.newsContainer .news .newsContent{ padding: 4% 4% 8% 4%; color: #fff;}
.newsContainer .news h4, .newsContainer .news h4 a{ font-size: 1.1em; margin: 0 0 10px 0;font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; color: #fff; text-align: left;}
.newsContainer .news p{ font-size: 0.8em;}
.newsContainer .news.left{background:#8cc640;}
.newsContainer .news.center{background:#f37b5f; }
.newsContainer .news.right{background: #78d1f6; float: right; margin-right: 0;}

#footer{background: #abaaa4; overflow: hidden; padding: 2em 0 0 0; margin-top: 2em;}
.footerContainer{ width: 75%; margin: 0 auto; color: #fff;}
.footerContainer h4{ font-family: Neutra, sans-serif; text-transform: uppercase; margin: 0 0 20px 0;}
.footerContainer .col.left img{ display: block; margin: 0 0 20px 0;}
.footerContainer .col{ float: left; width: 20%;}
.footerContainer .col.right{ width: 66.666%; margin-right: 0;}
.footerContainer .col.center .dato{ margin: 0 0 10px 0;}
.footerContainer .col.center .dato input, .footerContainer .col.center .dato textarea{ padding: 5px; width: 95%;}
.footerContainer .col.center .submit{font-family: Neutra, sans-serif; background: #fff; color: #666; text-transform: uppercase; font-size: 1em; padding: 15px 0 10px 0; text-decoration: none; display: block; float: left; width: 100px; text-align: center; border: none;}
#footer .menu{ margin-top: 2em;}
#footer .menu li{ display: inline-block; margin: 0 10px 0 0;}
#footer .menu a{ color: #fff; text-decoration: none;}
#footer .social{ margin: 30px 0 0 0;}
#footer .social li{ display: inline-block;}
#footer .social li a{ display: block; width: 30px; height: 30px; text-indent: -9999px; outline: none; background: url(../images/sprteredesfooter.png) no-repeat; background-size: 105px;}
#footer .social .facebook a{ background-position:-76px 0;}
#footer .social .twitter a{background-position: 0 0;}
#footer .social .instagram a{background-position: -37px 0;}
#footer .contactInfo a{color: #fff; padding: 0 5px;}


/* about */
.sectionSelector{ width: 75%; margin: 3em auto; overflow: hidden;}
.sectionSelector .section{ width: 31%; margin: 0 3.5% 0 0; float: left; height: 320px; position: relative; cursor: pointer; overflow: hidden;}
.sectionSelector .section h4{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; color: #fff; text-align: center; font-size: 1.5em; position: absolute; bottom: 0; left: 17.5%; width: 65%; text-align: center; }
.sectionSelector .section img{ width: 50%; height: auto; display: block; margin: 50px auto 0 auto; opacity: 0.5;}
.sectionSelector .president{background: url(../images/presidente.jpg) no-repeat 15% top; background-size: cover;}
.sectionSelector .aboutpage{ background: url(../images/aex-nogales-logo-color-positivo.jpg) no-repeat top left; background-size: cover; }
.sectionSelector .members{ background: url(../images/asociacion.jpg) no-repeat center center; background-size: cover; margin-right: 0;}
.sectionSelector .aboutpage h4{color: #000;}
.sectionSelector .aboutpage img{ margin-top: 80px;}
.welcome-letter{ width: 60%; margin: 30px auto; font-size: 1.1em;}

.hiddenContent{margin: 0 auto 2em auto; overflow: hidden; font-size: 1.1em;}
.hiddenContent .fullSection{ display: none;}
.grid h2, .fullSection h2{color: #06a1e3;font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; margin: 1em 0; text-align: center; font-size: 1.6em;}
#president{ width: 75%; margin: 0 auto;}
#accordion{ font-family: 'Lato', sans-serif; margin: 2em 0;}
#president iframe{ width: 60%; height: 400px; margin: 0 auto; display: block;}
#president img{ max-width: 100%; height: auto; margin: 0 0 20px 0;}
#accordion h3{ background: #78d1f6; color: #fff; font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; line-height: 130%; letter-spacing: 0.5px;}
#accordion h3 br{ display: none;}
#accordion h3.ui-accordion-header-active{ background: #a6ce3b; outline: none;}
#aboutpage{ width: 70%; margin: 0 auto;}
#aboutpage p{ line-height: 150%; margin: 0 0 20px 0;}
#members .board{ overflow: hidden; width: 75%; margin: 0 auto;}
#members .board .member{ float: left; width: 23%; text-align: center; margin-right: 2%; -webkit-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}
#members .board .member:last-child{ margin-right: 0;}
#members .board .member .thumbContainer{ max-height: 150px; overflow: hidden; height: 150px; margin-bottom: 10px;}
#members .board .member img{ width: 80%; height: auto; display: block; margin: 0 auto;}
#members h5{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; margin: 0 0 5px 0;}
#members p.prom{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; margin: 0 0 5px 0; font-size: 0.8em; text-align: center;}
#members p.position{font-size: 0.9em; font-weight: 700; text-align: center; color: #666; margin: 0 0 15px 0;}
#members p{font-size: 0.8em; text-align: left; line-height: 160%;}
#members .bio{ display: none;}
#members #contentBio{ display: none;}
#members .board .member.active{-webkit-filter: grayscale(0%);filter: grayscale(0%);filter: none;}
#members #contentBio strong{ display: block; margin: 0 0 5px 0; font-weight: bold;}
#members .other {width: 60%; margin: 30px auto; }
#members .other .item{overflow: hidden; border-bottom: solid 1px #ddd; margin-bottom: 10px; padding-bottom: 10px;}
#members .other .item .img-container{ width: 20%; float: left;}
#members .other .item .img-container:before{padding-top: 100%; content: ''; display: block;}
#members .other .item .information{float: right; width: 78%;}
.timeline{ overflow: hidden; background: url(../images/dot.gif) repeat-y top center;}
.timeline .item{width: 48%; float: left;}
.timeline .item strong{ padding-top: 15%; display: block; }
.timeline .item.right{ float: right; margin-bottom: 0;}
.timeline .item.right img{ float: right; width: 48%; height: auto; margin:0;}
.timeline .item.right strong{ float: left; width: 50%;}

.grid{ width: 75%; margin: 0 auto 2em auto; overflow: hidden;}
.grid .item{ float: left; width: 20%; margin: 0 0 -5px 0; padding: 0; overflow: hidden; max-height: 190px;}
.grid .item img{ width: 100%; height: auto;}
.grid p{ margin: 20px 0 0 0; font-size: 0.9em; text-align: center;}

/* El colegio */
.mainNews{  margin: 2em auto;  overflow: hidden;}
.mainNews .left{ float: left; width: 48%;}
.mainNews .right{ float: right; width: 48%;}
.mainNews h3, #editorial h3 a{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 700; font-size: 22px; margin: 15px 0; color: #06a1e3; text-align: left;}
.mainNews p, #editorial p{ font-size: 0.9em; line-height: 150%; margin: 0 0 20px 0;}
.mainNews .right img{ width: 100%; height: auto;}
.houses{ margin: 2em 0;}
.houses .housesContainer{ overflow: hidden; width: 75%; margin: 0 auto;}
.houses .col{ width: 33.333%; float: left; text-align: center;}
.houses .col img{ width: 100%; height: auto; width: 50%;}
.houses span{color: #666; display: block; display: block; text-align: center; font-size: 0.8em; margin: 20px 0 0 0;}

/* Alumni */
.container h4{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 700; font-size: 16px; margin: 0 0 15px 0; color: #f37b5f;}
.participation{ margin: 30px auto; overflow: hidden;}
#editorial .article{ width: 48%; float: left;}
#editorial .article:nth-child(2){float: right;}
#editorial .article .autor{margin: 20px 0;}
#editorial .imageContainer{ overflow: hidden; max-height: 350px;}
#fotodelmes{ width: 48%; float: right; position: relative;}
#editorial img,#fotodelmes img{ width: 100%; height: auto;}
#editorial p{ font-size: 1.1em; line-height: 140%;}
#fotodelmes .credits{ position: absolute; bottom: 5px; left: 0; background: rgba(0,0,0,0.6); color:#fff; padding: 2%; width: 96%;}
#fotodelmes .credits h5{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; font-size: 1.4em;}

/* Despliegue */
.mainPostContent{ width: 60%; margin: 3em auto 2em auto;}
.mainPostContent h1{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; font-size:2em; margin: 0 0 1em 0;}
.mainPostContent .mainImageContainer{ margin: 1em 0; max-height: 400px; overflow: hidden;}
.mainPostContent .mainImageContainer img{ width: 100%; height: auto;}
.mainPostContent p, .mainPostContent li{ margin: 0 0 1em 0; line-height: 160%; font-size: 1.1em;}
.mainPostContent p strong{ font-weight: 700;}
.mainPostContent h3, .mainPostContent h4, .mainPostContent h5{ font-family: Neutra, sans-serif; text-transform: uppercase; margin: 0 0 20px 0; font-weight: 700;}
.mainPostContent h3{ font-size: 2em; margin: 2em 0;}
.mainPostContent h4{ font-size: 1.8em;}
.mainPostContent h5{ font-size: 1.6em;}
.mainPostContent img{max-width:  100%; height: auto;}
.mainPostContent table{ width: 100%; margin: 30px 0;}
.mainPostContent table th{ text-align: center; font-weight: 700; padding: 10px; font-size: 1.4em; border: solid 1px #ddd;}
.mainPostContent table td{ font-size: 1.2em; padding: 10px; border: solid 1px #ddd;}
.mainPostContent table li{ list-style: disc inside; font-size: 0.9em;}
hr{ clear: both; display: block;}

/* Muro de Exalumnos */
.wallContent{ overflow: hidden; width: 75%; margin: 2em auto 4em auto;}
#howToHelp h3{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; font-size:2em; color: #06a1e3; margin: 0 0 30px 0;}
#howToHelp p{ margin: 0 0 20px 0; font-size: 1em; line-height: 150%;}
#howToHelp img{ max-width: 100%; height: auto;}
a.donation{ background: #8cc640; color: #fff; font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; font-size:1.4em; display: block; line-height: 2em; text-align: center; text-decoration: none;}

/* Content Grid */
.contentGrid{ width: 60%; margin: 2em auto; overflow: hidden; }
.contentGrid .entry{ width: 44%; float: left; border: solid 1px #ddd; padding: 2%; margin: 0 0 2em 0; background: #fff; box-shadow: 1px 1px 10px rgba(0,0,0,0.3);}
.contentGrid .entry:nth-child(even){ float: right;}
.contentGrid .entry h3{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; font-size:1.5em; color: #06a1e3; margin: 0 0 1em 0;}
.contentGrid .entry a{ background: #8cc640; color: #fff; font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; font-size:1.2em; display: block; line-height: 2em; text-align: center; text-decoration: none; margin-top: 1em;}

/* servicios */
.services .section{ margin-right: 2%; width: 48%; margin-bottom: 30px;}
.services .section h4 a{ text-decoration: none;}
.services .section .icon{ width: 50%; height: 150px; margin: 30px auto 0 auto;}
.services .timebank{background: #78d1f6;}
.services .timebank .icon{ background: url(../images/bank.svg) no-repeat center center; background-size: 70%; opacity: 0.5;}
.services .classifieds{background: #f37b5f;}
.services .classifieds .icon{ background: url(../images/classifieds.svg) no-repeat center center; background-size: 70%; opacity: 0.5;}
.services .joboffers{background: #a6ce3b;}
.services .joboffers .icon{ background: url(../images/job.svg) no-repeat center center; background-size: 70%; opacity: 0.5;}
.services .publicidad{background: #007aaa;}
.services .section h4{ bottom: 60px;}
.services .section p{ position: absolute; bottom: 30px; width: 80%; left: 50%; margin-left: -40%; text-align: center;}
.contentGrid h1{font-family: Neutra, sans-serif;  text-transform: uppercase; font-weight: 900; font-size:2em; margin: 0 0 1em 0; text-align: center;}
.contentGrid .description{ margin: 0 0 2em 0;}

@media screen and (max-width: 480px){
    #members .board .member{ width: 100%; float: none ; margin: 0;}
    #header .menu, #header .sub-menu{ display: none;}
    #header .menu .sub-menu{ display: none !important;}
    #header .menu li{display: block; text-align: center; margin: 5px 0;}
    #header .toggle-menu{ display: block;}
    .mainCarousel .slideInfo{ bottom: auto; top: 5%;}
    .mainCarousel .slideInfo h3{ font-size: 1.5em; max-width: 90%;}
    .vermas{ font-size: 1em;}

}

@media screen and (max-width: 767px){
    .events .col,
    .newsContainer .news,
    .footerContainer .col,
    .sectionSelector .section,
    #howToHelp,
    .contentGrid .entry { width: 100%; float: none ; margin: 0;}
    #donationSidebar{ display: none;}
    .events .col.right{ float: none; margin: 0;}
    .contentGrid .entry:nth-child(even){ float: none;}
    .events .col.right p{ max-width: 100%; margin: 0;}
    .newsContainer .news, .sectionSelector .section, .contentGrid .entry{ margin: 0 0 30px 0;}
    .mainPostContent,
    .wallContent,
    .contentGrid,
    #president,
    #aboutpage,
    #members .other{ width: 94%;}
}

@media screen and (max-width: 992px){
  #header .menu li{margin: 0 5px;}
}