/*--------------------------------------------------------------------
LAYOUT BASE - NOR267 (modern browsers)

#####    ###  #########  #########  #########  #########  #########
######   ###  ###   ###  ###   ###        ###  ###        #########
### ###  ###  ###   ###  ###   ###  #########  #########       ###
###  ### ###  ###   ###  #########  #########  ###   ###      ###
###   ######  ###   ###  ### ###    ####       ###   ###     ###
###    #####  #########  ###  ###   #########  #########    ###

Version: 	        1.0 - 2014
design:             Ivan Alves (Nor267)
web development:    Pedro campos (Nor267)
email: 		        geral@nor267.com
website: 	        http://www.nor267.com
created with:       Brackets --http://brackets.io/--
--------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://fonts.googleapis.com/css?family=PT+Serif:400,400italic);

*::-moz-selection { color: #ffffff; background: #1A1A1A; }  /* For Firefox */
*::selection { color: #ffffff; background: #1A1A1A; }

input { -webkit-appearance: none; border-radius: 0; }

body {
  /* need html and min-height and not just height for ipad*/
    width: 100%;
    height: 100%;
    min-height: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    margin: 0;
    font-family: Lato, Arial;
    font-size: 14px;
    color: #000000;
    -webkit-text-size-adjust: none;
}
html { height: 100%; }

.wrapper {
    width: 100%;
    height: 100%;
}

/* HEADER */
.header {
    width: 100%;
    height: 172px;
}
.header .cnt {
    width: 100%;
    max-width: 1154px;
    margin: 0 auto;
}
.header .logo { 
/*display: none; */float: left; 
    display: block;
    margin: 42px auto 24px auto;
    text-align: center;
    width: 100%;
}

.menu {
    width: 100%;
    float: left;
}
.header .logo-line {
    display: none;
    margin: 34px auto 18px auto;
}
.menu ul {
    display: table;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
.menu ul li {
    float: left;
}
.menu ul li a {
    font-size: 10px;
    color: #000000;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 0 2px;
    margin: 0 9px;
}
.menu ul li a.active, .menu ul li a:hover { background-color: #000000; }
.menu ul li a.active, .menu ul li a:hover { color: #FFFFFF; }

.header .redes-sociais { float: right; position: relative; margin: -88px 7% 0 0; }
.header .redes-sociais a { float: left; margin: 0 0 0 8px; }
.header .redes-sociais .mobileLogo {
    position: absolute;
    clear: both;
    right: 0;
    top: 24px;
}
/* !HEADER */

/* HOME */
.home {
    width: 86%;
    margin: 24px 7% 32px 7%;
}
.home img {
    display: block;
    max-width: 100%;
    margin: 64px auto 0 auto;
}
.home .video {
    display: block;
    margin: 0 auto;
    width: 320px; height: 240px;
}
/* !HOME */


/* WORK */
.work .filter {
    width: 86%;
    margin: 12px auto 32px auto;
}
.work .filter p {
    font-family: pt serif;
    font-size: 8px;
    font-weight: 600;
    font-style: italic;
    margin: 0;
}
.work .filter p span {
    display: none;
    width: 15px;
    height: 16px;
    background-image: url(../images/layout/separador.png);
    background-size: 15px 16px;
    margin: 10px 0 2px 0;
}
.work .filter a {
    font-size: 8px;
    text-transform: uppercase;
    color: #000000;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 0;
    margin: 0 12px 0 0;
}
.work ul.list {
    width: 86%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
.work ul.list li { width: 100%; float: left; margin: 0 0 30px 0; }
.work ul.list li img { background-color: #EFECE7; }
.work ul.list li h1 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 22px 0 0 0;
    text-align: center;
}
.work ul.list li h1 span {
    display: block;
    width: 15px;
    height: 16px;
    background-image: url(../images/layout/separador.png);
    background-size: 15px 16px;
    margin: 8px auto 2px auto;
}
.work ul.list li p { width: 100%; float: left; text-align: center; margin: 6px 0; }
.work ul.list li p a { color: #000000; text-decoration: none; text-transform: uppercase; }
.work ul.list li p.tags {
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.work ul.list li p.description {
    font-family: pt serif;
    font-size: 9px;
}
.work ul.list li p.credits {
    font-family: pt serif;
    font-size: 8px;
    font-style: italic;
}
/* !WORK */

/* WORK INSIDE */
.work-inside .pagination {
    position: relative;
    width: 86%;
    margin: 0 7% 0 7%;
}
.pagination p, .pagination h1 {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000000;
    text-decoration: none;
    font-weight: 300;
    margin: 0;
}
.pagination p span { display: block; font-weight: 400; }
.pagination h1 { text-align: center; font-weight: 400; }
.pagination a { color: #000000; display: inline-block; text-decoration: none; }
.pagination .back p { text-align: center; }
.pagination .next p { text-align: right; }
.pagination .back { width: 100%; position: absolute; top: 48px;}
.pagination .previous { float: left; min-height: 30px; }
.pagination .next { float: right; min-height: 30px; }

.swiper-container {
    width: 100%;
    height: 242px;
    background: #ffffff;
    color: #fff;
    text-align: center;
    margin: 66px 0 24px 0;
    float: left;
}
.swiper-slide {
    width: 320px;
    position: relative;
    float: inherit;
}
.swiper-slide .video { width: 320px; height: 240px; }
.swiper-slide .hover {
    position: absolute;
    display: block;
    width: 100%; height: 100%;
    background-color: #ffffff;
    opacity: 0.8;
    -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; transition: .4s;
}
.swiper-slide-active .hover { opacity: 0; display: none; }
.arrow-left, .arrow-right {
    width: 15px;
    height: 33px;
    position: absolute;
    font-size: 48px;
    color: #ffffff;
    text-decoration: none;
    background-size: 15px 33px;
    display: block;
    top: 100px;
    z-index: 10;
}
.arrow-left { margin: 0 0 0 12px; background-image: url(../images/layout/arrow-prev.png); }
.arrow-right { margin: 0 12px 0 0; right: 0px; background-image: url(../images/layout/arrow-next.png); }
.arrow-left:hover, .arrow-right:hover { }

/* !WORK INSIDE */

/* CLIENTS */
.clients ul.list {
    width: 86%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
.clients ul.list li { width: 100%; float: left; margin: 0 0 30px 0; }
/* !CLIENTS */

/* ABOUT */
.about { width: 86%; max-width: 348px; margin: 0 auto 24px auto; text-align:center;}
.about h1 { font-family: pt serif; font-size: 14px; font-weight: 400; line-height: 20px; margin: 22px 0 20px 0; float: left; }
.about h2 { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; line-height: 20px; margin: 12px 0 14px 0; float: left; }
.about p { font-family: pt serif; font-size: 9px; font-weight: 400; line-height: 20px; margin: 14px 0 0 0; }
.about p span, .about h2 span {
    display: block;
    width: 15px;
    height: 16px;
    background-image: url(../images/layout/separador.png);
    background-size: 15px 16px;
    margin: 10px 0 2px 0;
}
.about a { color: #000000; text-decoration: none; }
/* !ABOUT */

/* CONTACT */
.contactos { width: 100%; float: left; text-align:center; }
.contactos h1 { font-family: lato; width: 100%; font-size: 9px; font-weight: 400; text-transform: uppercase; line-height: 20px; margin: 20px 0 8px 0; float: left; letter-spacing: 1px; }
.contactos h3 { font-family: lato; width: 100%; font-size: 9px; font-weight: 400; text-transform: uppercase; line-height: 20px; margin: 8px 0 8px 0; float: left; letter-spacing: 1px; }
.quote { width: 100%; }
.quote p { font-size: 13px; font-style: italic; margin: 20px 0 0 0; }
.contactos .morada { line-height: 10px; }
.contactos .morada p {
    margin: 0;
    line-height: 14px;
}
.contactos .morada p span { margin-top: 14px; }
/* !CONTACT */

/* IDIOMAS */
.idiomas {
    text-align:center;
    margin: 0 auto;
    font-weight: 300;
    padding: 24px;
    color: #B3AB97;
    font-size: 10px;
    clear: both;
}
.idiomas a {
    display: inline-block;
    color: #B3AB97;
    text-decoration: none;
}
.idiomas a.current, .idiomas a:hover { color: #000000; }
/* !IDIOMAS */

@media (min-width: 580px) {
    
.swiper-container { height: 376px; }
.swiper-slide { width: 500px; }
.swiper-slide .video { width: 500px; height: 374px; }
.home .video { width: 500px; height: 374px; }

.arrow-left, .arrow-right { display: block; top: 174px; }
.arrow-left { margin: 0 0 0 50%; left: -280px; }
.arrow-right { margin: 0 50% 0 0; right: -280px; }

.contactos { margin: 0 0 18px 0; }
.quote { width: 124px; float: right; margin: 0 0 18px 0; }
    
}

@media (min-width: 820px) {

/* HEADER */
.header .cnt { width: 766px; }
.header .logo { margin: 42px 0 0 0; width:auto;}
.header .logo-line{display:table;}
.header .redes-sociais { position: inherit; margin: 66px 0 0 0; }
.menu { width: 610px; }
.header .redes-sociais .mobileLogo { display: none; }
/* !HEADER */

/* WORK */
.work { width: 740px; margin: 0 auto; padding: 0 24px 0 0;}
.work .filter { width: 105px; margin: 0; float: left; }
.work .filter p span { display: block; }
.work .filter a { display: block; width: 100%; clear: both; margin: 8px 0; }
.work ul.list { width: 634px; margin: 0; float: left; }
.work ul.list li { width: 287px; height: 432px; float: left; margin: 0 15px 0 15px; }
/* !WORK */

/* WORK INSIDE */
.work-inside .pagination { width: 766px; margin: 0 auto;}
.pagination .previous, .pagination .next { width: 230px; float: left;}
.pagination .back { position: inherit; top: 0; width: 306px; float: left; }
.swiper-container { height: 482px; margin: 16px 0 24px 0;}
.swiper-slide { width: 640px; }
.swiper-slide .video { width: 640px; height: 480px; }
.home .video { width: 640px; height: 480px; }
.arrow-left, .arrow-right { top: 224px; }
.arrow-left { margin: 0 0 0 50%; left: -382px; }
.arrow-right { margin: 0 50% 0 0; right: -382px; }
/* !WORK INSIDE */

/* CLIENTS */
.clients ul.list { width: 634px; margin: 0 auto; }
.clients ul.list li { width: 287px; float: left; margin: 0 15px 30px 15px; }
/* !CLIENTS */

/* ABOUT */
.about { width: 348px; }
/* !ABOUT */

}

@media (min-width: 1220px) {

/* HEADER */
.header .cnt { width: 1154px; }
.header .logo { display: block; }
.menu {
    width: 1000px;
}
/* !HEADER */

/* WORK */
.work { width: 1059px; padding: 0 96px 0 0;}
.work ul.list { width: 952px; }
/* !WORK */

/* WORK INSIDE */
.work-inside .pagination { width: 1154px; }
.pagination .previous, .pagination .next { width: 380px;}
.pagination .back { width: 394px; }
.swiper-container { height: 632px; }
.swiper-slide { width: 840px; }
.swiper-slide .video { width: 840px; height: 630px; }
.home .video { width: 840px; height: 630px; }
.arrow-left, .arrow-right { top: 298px; }
.arrow-left { margin: 0 0 0 50%; left: -578px; }
.arrow-right { margin: 0 50% 0 0; right: -578px; }
/* !WORK INSIDE */

/* CLIENTS */
.clients ul.list { width: 952px; }
/* !CLIENTS */

}

/* And this is the last line */