/* CATALOGO GALA made by RED032 - Jaume Subirats */
@font-face {
    font-family: Max;
    src: url("fonts/max/MaxWeb.html"), url("fonts/max/MaxWeb.woff") format("woff");
    font-style: normal;
}
body {
    font-family: 'Max', Helvetica, Arial;
    margin: 0 0;
}
img {
    /*
    width: 100%;
    height: auto;
    */
}
p {
    color: #333;
}
.noSelect {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    outline: none;
}

/* Fixed header and footer.
--------------------------------------- */

#header, #footer, #left, #right {
    position: fixed;
    height: 40px;
    display: block;
    width: 100%;
    background: #8a7552;
    /* background: none; */
    z-index: 9;
    text-align: center;
    padding: 20px 0 0 0;
}
#header {
    font-size: 1.2em;
    color: #CCC;
    margin: 0 0;
    top: 0;
}
#header p {
    margin: 4px 0 0 0;
    padding: 0 0;
}
#header a {
    color: #EEE;
    margin: 0 30px 0 0;
    text-decoration: none;
}
#header a:hover, a#galink:hover, a#catpdf:hover, a#tecpdf:hover {
    color:#333;
    text-decoration: none;
}
#header a.selected {
    color: #000;
}

#home #iniBtn, 
#coleccion-klea #kleaBtn,
#coleccion-emma #emmaBtn,
#coleccion-bowl #bowlBtn,
#gallery #galink
{
    color: #333;
    text-decoration: underline;
}


#footer {
    bottom: 0px;
    height: 30px;
    padding: 4px 0 18px;
}
#footer img {
    width: 90px;
    height: auto;
    margin: 5px;
}
#left, #right {
    height: 100%;
    width: 50px;
}
#left {
    left: 0px;
}
#right {
    right: 0px;
}
a#catpdf:before {
    /* content: 'descargar'; */
    padding: 0 4px;
}
a#galink, a#catpdf, a#tecpdf {
    color: #000;
    font-size: 0.8em;
    letter-spacing: 1px;
    position: relative;
    text-decoration: none;
    top: 0px;
    float: right;
    right: 30px;
}

.slide {
    /* background-size: cover; */
}
.section {
    padding: 0 0;
    text-align: center;
}
.section h1 {
    color: #8a7552;
    font-size: 6em;
}
.section .intro h2 {
    color: #8a7552;
    font-size: 4em;
    padding: 20vh 0 10px 0 !important;
    text-align: center;
}
.section p {
    font-size: 1.4em;
    line-height: 32px;
    padding: 0 15% 0 17%;
    text-align: left;
    color: #888;
    font-weight: lighter;
}
.section .colText.floatRight p {
    padding: 0 15% 0 10%;
}
.section .colTextSlide.floatRight p {
    padding: 0 20% 0 10%;
}
.section .colTextSlide.floatLeft p {
    padding: 0 15% 0 20%;
}
.infobox {
    font-size: 14px;
    margin: 50px 0 0;
}
.infobox a {
    color: #8a7552 !important;
    text-decoration: none;
}
.infobox a:hover {
    text-decoration: underline;
}
.infobox a:first-child {
    color: #555 !important;
    font-weight: 800;
}
.section .fp-tableCell {
    vertical-align: top;
}
.floatRight {
    float: right;
}
.floatLeft {
    float: left;
}
#section0 {
    background: url("img/portada.jpg")no-repeat;
    background-size: cover;
    background-position: center;
}
#section0 h1 {
    color: #8a7552;
    font-size: 6em;
    padding: 15vh 0 0 0;
    font-weight: 300;
    letter-spacing: 12px;
}
#section1 {}
#section1 p {
    font-size: 2em;
    line-height: 40px;
    padding: 0 21%;
    text-align: center;
    font-weight: 300;
    margin: -20px 0 24px;
}
#section2 {}
#section3 {}

/* HOME */

.colImg {}
.colImg img {
    height: 100vh; /* era width: 100vw; */
    width: 58vw; /* era width: 60vw; */
}
.colText {
    padding: 5vh 0 0 0;
    width: 40vw;
    height: 100vh;
}
.section .colText h2 {
    color: #8a7552;
    font-size: 4em;
    text-align: left;
    line-height: 10px;
}
.section .floatLeft h2 {
    padding: 14vh 7vw 0;
}
.section .floatRight h2 {
    padding: 14vh 4vw 0;
}
.infobox p {
    line-height: 40px !important;
}

/* SLIDES */

.colImgSlide {}
.colImgSlide img {
    height: 100vh;
    width: 70vw;
}
.colTextSlide {
    padding: 5vh 0 0 0;
    width: 30vw;
    height: 100vh;
}
.colImgSlideFull {}
.colImgSlideFull img {
    height: 100vh;
    width: 100vw;
}

/* NAV CONTROLS
--------------------------------------- */

#fp-nav ul li .fp-tooltip {
    color: #000;
    text-shadow: 0px 0px 1px #eee;
    letter-spacing: 1px;
}
.fp-controlArrow {
    display: none;
}
.fp-slidesNav.bottom {
    bottom: 60px;
}
.fp-slidesNav ul li a span {
    background: #FFF;
}
#btnNext:before, #btnPrev:before, #btnPause:before  {
    color: #FFF;
    content: "";
    width: 25px;
    height: 4px;
    background: #FFF;
    position: absolute;

}

#btnPrev:after, #btnNext:after, #btnPause:after  {
    bottom: 4px;
    color: #FFF;
    content: "";
    width: 25px;
    height: 4px;
    background: #FFF;
    position: absolute;
}
#btnPrev:after {
    transform: rotate(228deg) translateY(10px) translateX(8px);
    -webkit-transform: rotate(228deg) translateY(10px) translateX(8px);
    -moz-transform: rotate(228deg) translateY(10px) translateX(8px);
}
#btnPrev:before {
    transform: rotate(320deg) translateY(17px) translateX(-2px);
    -webkit-transform: rotate(320deg) translateY(17px) translateX(-2px);
    -moz-transform: rotate(320deg) translateY(17px) translateX(-2px)
}
#btnNext:after {
    transform: rotate(-45deg) translate(15px);
    -webkit-transform: rotate(-45deg) translate(15px);
    -moz-transform: rotate(-45deg) translate(15px);
}
#btnNext:before {
    transform: rotate(45deg) translate(-40px);
    -webkit-transform: rotate(45deg) translate(20px);  
    -moz-transform: rotate(45deg) translate(20px);   
}
#btnPause:after {
    transform: rotate(90deg) translateY(-10px) translateX(-18px);
    -webkit-transform: rotate(90deg) translateY(-10px) translateX(-18px);
    -moz-transform: rotate(90deg) translateY(-10px) translateX(-18px);
}
#btnPause:before {
    transform: rotate(90deg) translateX(24px) translateY(-4px);
    -webkit-transform: rotate(90deg) translateX(24px) translateY(-4px);
    -moz-transform: rotate(90deg) translateX(24px) translateY(-4px);
}
#btnPause:after, #btnPause:before { 
color: #666; background: #666;
}
#btnPrev, #btnNext, #btnPause {
    background: rgba(255, 255, 255, .5);
    border: 2px solid #8a7552;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    position: absolute;
    z-index: 999;
    padding: 0px;
    color: transparent;
}
#btnPrev {
    left: 20px;
    top: 45vh;   
}
#btnNext {
    right: 20px;
    top: 45vh;
}
#btnPause {
    right: 20px;
    top: 55vh;
}
#btnPrev:hover, #btnNext:hover, #btnPause:hover{
    cursor: pointer;
    /* background: #EEE; */
    background: rgba(255, 255, 255, .3);
}
button.trigger {
    position: fixed;
    bottom: 40px;
    left: 50%;
    z-index: 5000;
    display: block;
    margin-left: -0.5em;
    padding: 0;
    width: 1em;
    height: 1em;
    border: none;
    background: transparent;
    color: transparent;
    font-size: 2em;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    -webkit-transition: opacity 0.3s 0.5s;
    transition: opacity 0.3s 0.5s;
}
button.trigger span {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
button.trigger::before {
    position: absolute;
    bottom: 100%;
    left: -100%;
    padding: 0;
    width: 100%;
    background: none;
    color: #8a7552;
    content: attr(data-info);
    font-size: 1.6em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
button.trigger span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #8a7552;
    content: "";
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.mouse {
    position: absolute;
    width: 25px;
    height: 42px;
    bottom: 40px;
    left: 50%;
    margin-left: -12px;
    border-radius: 15px;
    border: 2px solid #8a7552;
    -webkit-animation: intro 1s;
    animation: intro 1s;
}
.scroll {
    display: block;
    width: 3px;
    height: 3px;
    margin: 6px auto;
    border-radius: 4px;
    background: #8a7552;
    -webkit-animation: finger 1s infinite;
    animation: finger 1s infinite;
}
#share-buttons {
    position: fixed;
    z-index: 9;
    bottom: -10px;
    right: 50px;
}
#share-buttons a {
    text-decoration: none;
}
#share-buttons a:hover {
    opacity: .8;
}
#share-buttons img {
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline;
}

/* SHARING BUTTONS */

.resp-sharing-button__link, .resp-sharing-button__icon {
    display: inline-block
}
.resp-sharing-button__link {
    color: #fff;
    margin: 0px 0px 8px 4px;
}
.resp-sharing-button {
    border-radius: 25px;
    transition: 25ms ease-out;
    padding: 0.3em 0.3em 0em;
    margin: 0px 0px 6px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.resp-sharing-button__icon svg {
    width: 1em;
    height: 1em
}
.resp-sharing-button span {
    padding-left: 0.4em
}

/* Non solid icons get a stroke */

.resp-sharing-button__icon {
    stroke: #fff;
    fill: none
}

/* Solid icons get a fill */

.resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle {
    fill: #fff;
    stroke: none;
    font-size: 25px;
}
.resp-sharing-button--facebook {
    background-color: none;
    border-color: #3b5998;
}
.resp-sharing-button--twitter {
    background-color: none;
    border-color: #55acee;
}
.resp-sharing-button--twitter svg {}
.resp-sharing-button--facebook svg {}
.resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active {
    background-color: #2d4373;
    border-color: #2d4373;
}
.resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active {
    background-color: #2795e9;
    border-color: #2795e9;
}

/* END SHARING BUTTONS */


/*
/*
/* MEDIA QUERIES
------------------------------------------------------------------------------------------ */


/*PHONES
--------------------------------------- */

@media only screen and (max-device-width: 40em) {
    #header {
        height: 80px;
    }
    #header p {
    margin: 16px 10px 0 0;
    }
    #header a {
        color: #EEE;
        margin: 0px 30px 0px 0;
        font-size: 40px;
        letter-spacing: 2px;
        color: #FFF;
    }
    body#gallery #header {
        height: 40px;
        padding: 10px 0 0px 0;
    }
    body#gallery #header a {
        margin: 0px 10px 0px 0;
          font-size: .85em;
          font-weight: 800;
        letter-spacing: 2px;
    }
    body#gallery #header p {
        margin: 0px 0px 0 0;
    }
    a#catpdf, a#tecpdf {
        color: #FFF;
        font-size: 2em;
        letter-spacing: 2px;
        margin: 0px 0px 0px 0;
        position: absolute;
        background: #666;
padding: 16px 20px 8px;
        width: 280px;
    }
    a#catpdf {
        top: 120px;
        right: 20px;
    }
    a#tecpdf {
        color: #000;
        top: 190px;
        right: 20px;
    }
    body#gallery a#catpdf, body#gallery a#tecpdf {
       letter-spacing: 2px;
        font-size: .75em;
        padding: 5px 7px;
            display: none;
    }
    body#gallery a#catpdf {
        top: 50px;
        right: 0px;
    }
    body#gallery a#tecpdf {
        top: 80px;
        right: 0px;
    }
    #section0 h1 {
        padding: 60vh 0 0 0;
        font-size: 8em;
    }
    #section1 h2 {
    padding: 20vh 8% 60px !important;
        font-size: 7em;
    }
    .section h2 {
        font-size: 7em;
        padding: 0 0 0 0;
        margin: 70px 0 0;
    }
    #section1 p {
        font-size: 3em;
        line-height: 64px;
        padding: 0 15%;
    }
    .section p {
        font-size: 2.5em !important;
        line-height: 46px;
    }
    #section4 p#pBowl span{
        display: none;
    }
    .colImg {
        height: 50vh;
    }
    .colImg img {
        width: 100vw;
        height: 50vh;
    }
    .colText {
        width: 100vw;
        height: 50vh;
        padding: 1vh 0 0 0;
    }
    .colText h2 {}
    #share-buttons {
        bottom: 10px;
        right: 10px;
        padding: 18px 10px 0px 0;
    }
    #share-buttons a {
    text-decoration: none;
    border: 0px solid #000;
    border-radius: 10px;
    background: none;
    padding: 7px 20px 0;
    }
    .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle {
        fill: #000;
        font-size: 60px !important;
    }
}

/* end max-device-width: 480px */


/*PHONES
--------------------------------------- */

@media only screen and (max-device-width: 736px) and (orientation: portrait) {
    .section p {
        font-size: 2.4em;
        padding: 0 10%;
        text-align: left;
        line-height: 1.3em !important;
    }
    .mouse {
        display: none;
    }
}
@media only screen and (max-device-width: 736px) and (orientation: landscape) {
    #header {
        height: 50px;
        font-size: 1.7em;
    }
    a#catpdf, a#tecpdf {
        top: 5px;
    }
    .intro {
        padding: 12vh 0px 0 0px !important;
    }
    .intro p .section p {
        font-size: 1.4em;
        line-height: 28px;
        padding: 0px 20px 0 50px;
    }
    #section1 p {
        font-size: 1.4em;
        line-height: 33px;
        padding: 0 10%;
    }
    .section h2 {
        padding: 5vh 0px 0 0px !important;
        padding: 5vh 0px 0 6vw !important;
        /*ojo*/
    }
    .mouse {
        display: none;
    }
}

/*TABLETS
--------------------------------------- */

@media only screen and (max-device-width: 900px) and (orientation: portrait) {
    .colImg, .colImgSlide {
        height: 50vh;
    }
    .colImg img, .colImgSlide img {
        width: 100vw;
        height: 50vh;
    }
    .colText, .colTextSlide {
        width: 100vw;
        height: 50vh;
        padding: 1vh 0 0 0;
    }
    .section .intro {
        padding: 10vh 0 0;
    }
    .section .intro h2 {
        font-size: 4em;
        padding: 20vh 3% 10px !important
    }
    .section .colText h2 {
        padding: 30px 0px 0 100px !important;
        text-align: left !important;
    }
    #section1 p {
        padding: 0 12%;
    }
    .section p {
        font-size: 2em;
        line-height: 1.3em;
        padding: 0 10%;
    }
}
@media only screen and (min-device-width: 480px) and (max-device-width: 660px) 
and (orientation: landscape) {

#header {
	text-align: left;
}
#header a {
margin: 0px 0px 0px 30px;
    font-size: 30px;
}
a#galink {
    position: absolute;
    top: 34px;
    right: 320px;
}
a#galink:before {
content:"/";
}
a#catpdf {
    top: 15px;
    right: -140px;
}
a#tecpdf {
    top: 75px;
    right: -140px;
}
.section p {
    font-size: 2em !important;
    line-height: 30px !important;
}
.section h2 {
    padding: 0vh 0px 0 10vw !important;
}
#section1 h2 {
    padding: 3vh 8% 60px !important;
    font-size: 4em;
}
.section .floatLeft h2 {
    padding: 0vh 4vw 0 !important;
    margin: 30px 0 0 0;
}
.section .floatRight h2 {
    padding: 5vh 4vw 0;
}
.section .colText h2 {
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
    font-size: 4em;
    margin: -40px 0px 0 -50px;
}
.section .floatLeft h2 {
    padding: 0vh 6vw 0 !important;
    margin: -30px 0 0 0;
}
.section .colText.floatRight p {
    padding: 0 0% 0 4%;
}
.infobox {
    margin: 0px 0 0;
}
#section0 h1 {
    padding: 36vh 0 10px 0;
    font-size: 7em;
}
button.trigger {
	display: none;
	}

}

@media only screen and (min-device-width: 660px) and (max-device-width: 960px) 
and (orientation: landscape) {
.section .floatLeft h2 {
    padding: 5vh 6vw 0;
	}
.section .floatRight h2 {
    padding: 5vh 4vw 0;
	}
button.trigger {
	display: none;
	}

}

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
    .section p {
        font-size: 1.4em;
        line-height: 26px;
        padding: 0 8% 0 60px;
    }
    .section .intro h2 {
        font-size: 3em;
        padding: 15vh 0px 0 0px;
        text-align: center;
    }
}
@media only screen and (max-device-width: 1024px) {
    #footer, #left, #right {
        display: none;
    }

    #btnNext {
        height: 70px;
        width: 70px;
        border-radius: 50px;
    }
    #btnNext:before, #btnNext:after {
        background: #CCC;
        height: 8px;
    }
    #btnNext:before {
        width: 40px;
        margin: 0px 0px 0px 0px;
    }
    #btnNext:after {
        width: 46px;
        margin: 0px 0px 2px -5px;
        -webkit-transform: rotate(-45deg) translate(18px);
        -webkit-transform: rotate(-45deg) translate(18px);
    }
        #btnPause {
    right: 25px;
    top: 65vh;
	}
    .mouse {
        bottom: 0px;
    }
    .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle {
    fill: #FFF;
    stroke: #000;
    font-size: 30px;
    }
}
@media only screen and (min-device-width: 1440px) {
    .section .intro h2 {
        padding: 25vh 0 10px 0;
    }
}
/* laptop pc

@media only screen 
and (min-width: 1200px) and (max-width: 1400px) 
and (min-height: 600px) and (max-height: 768px) 
and (orientation: landscape) { 
 .colImg img {
    height: 100vh;
    width: 50vw;
    padding: 60px 0px 0px 50px;
    }  
.colImgSlideFull img {
    height: 105vh;
    width: 94vw;   
    padding: 0 40px;
    margin-top: -40px; 
}
}
*/
/* large desktop pc

@media only screen 
and (min-width: 1800px) and (max-width: 1920px) 
and (min-height: 700px) and (max-height: 1080px) 
and (orientation: landscape) { 
 .colImg img {
    height: 100vh;
    width: 46vw;
    padding: 60px 0px 0px 50px;
    }  
.colImgSlideFull img {
    height: 105vh;
    width: 95vw;
    padding: 0 50px 0 0px;
    margin-top: -40px;
}
}
*/

/***************************************************************/


/* mouse animation *********************************************/


/***************************************************************/

@-webkit-keyframes intro {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes intro {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes finger {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}
@keyframes finger {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

/* end mouse animation *********************************************/