/*------------------- BASE STYLE ------------------- */ 

* {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html, body {min-height: 100% !important;}
body { width: 100%; position: relative; z-index: 0; margin: 0; padding: 0; 
-webkit-font-smoothing: antialiased;
}
body canvas {z-index: 1 !important;}
a {cursor: pointer;color:inherit;text-decoration:none;}
a:focus, button:focus {outline:none !important;}
img {max-width:100%;}
em {font-style: italic;}
strong {font-weight: bold;}
div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img {border: 0;}
input[type="image"], input[type="submit"], input[type="reset"], button {cursor: pointer;}
input[type="radio"], input[type="checkbox"] {position: relative; top: 2px;}
address, caption, cite, code, dfn, strong, th, var {font-style: normal;}
ol, ul {list-style: none;}
hr {border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #D3D3D3;}
caption,th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal; margin: 0;}
iframe {border: 0 inset !important;}
textarea {resize: none;}
input, textarea {outline: 0 !important;font-family:inherit;display:block;width:100%;}

/*-------------------- MAIN STYLE -------------------------*/

body {
    font:16px RalewayRegular, arial, sans-serif;
    color: #808080;
}

.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.button, .price {
	display:inline-block;
	border:none;
	text-align:center;
    padding: 11px 15px;
}

.button {
    padding: 11px 68px;
    font: 14px RobotoCondensedBold, arial, sans-serif;
    text-transform:uppercase;
}

.button, .button span {
    position:relative;
}

.button.grey {
    background: #1e1e1e;
    color:white;
}

.button.grey:hover {
    background:black;
}

.button.violet, .price {
    background: #ffc107;
    color:black;
}

.button.violet:hover {
    background:#ff9800;
}

#flyHeader, .navigation a, .button, .button:before, a.item-img, .slick-arrow {
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-webkit-transition:all .3s ease;
	transition:all .3s ease;
}

a.item-img, .item-img img {
    display:block;
}

.item-img img {
    width:100%;
}

a.item-img:hover {
	opacity:.8;
}

.bg {
    background-position:center top;
    -o-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
}

.fixed-bg {
    background-attachment:fixed;
}

.banner-section {
    text-align:center;
}

.banner-section, .banner-section .caption {
    color:white;
}

.banner-section.auto-height {
    padding:4% 0;
}

.banner-section.flex, .headerSlide .flex {
    justify-content:center;
    align-items:center;
}

.full-height {
    min-height:100vh;
}

.full-height50 {
    height:50vh;
}

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

header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:100px 54px 30px;
    color:white;
    font:16px RobotoCondensedRegular,arial, sans-serif;
    align-items:center;
    z-index:1000;
}

header.fly {
    background: #1d1d1d;
    padding-top:20px;
}

.logo, .logo a {
    display:inline-block;
}

.logo a {
    vertical-align: middle;
    font-size:25px;
}

.logo a:first-child {
    margin-right: 30px;
}

.logo img {
    display:block;
}

.navigation ul {
    padding:0;
    text-transform:uppercase;
}

.navigation > ul > li {
    display:inline-block;
    margin-right:24px;
    position:relative;
}

.navigation li ul {
    display:none;
    position: absolute;
    left:0;
    width:180px;
    padding-top:50px;
    z-index:10;
}

.navigation li ul a {
    padding:15px;
    background: #333;
    font-size:10px;
    display:block;
    border-bottom:1px solid #141414;
}

.navigation li:last-child {
    margin:0;
}

.navigation .active > a, .navigation a:hover {
    color: #f0a62b;
}

.showMenu {
    display:none;
    width:40px;
}

.showMenu span {
    display:block;
    height:5px;
    margin-bottom:8px;
    background:white;
}

.showMenu span:last-child {
    margin:0;
}

.headerSlide .flex {
    padding:160px 0 40px;
    background:rgba(0,0,0,.6);
}

.headerSlide h2, .headerSlide h3 {
    font-family:RobotoCondensedBold, arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.headerSlide h2 {
    font-size:3.5vw;
}

.headerSlide h3 {
    font-size:2vw;
}

.headerSlide p {
    font-size:20px;
    margin-bottom:20px;
}

.banner-form {
    padding-top:5%;
}

.banner-section .button {
    width:100%;
}

.banner-section input {
    text-align:center;
    font-size:16px;
}

.banner-section .ajax_form .error {
    color:#ffc107;
}

.content-section {
    padding:4% 0;
}

.caption, .subcaption {
    text-align:center;
}

.caption {
    font:45px RobotoCondensedBold, arial,sans-serif;
    text-transform: uppercase;
    padding-bottom:5%;
    color: #34383a;
}

.subcaption {
    font:15px Georgia-italic, arial, sans-serif;
    overflow:hidden;
}

.subcaption span {
    display:inline-block;
    position:relative;
    color: #401071;
}

.subcaption span:before, .subcaption span:after {
    content:"";
    position: absolute;
    display:block;
    width:60px;
    height:1px;
    background: #d4d4d4;
    top:48%;
}

.subcaption span:before {
    left:-80px;
}

.subcaption span:after {
    right:-80px;
}

.with-border {
    padding-bottom:10px;
    border-bottom:1px solid #d4d4d4;
}

.text-right {
    text-align:right;
}

.w100 {
    width:100%;
}

.banner2 {
    background-image:url(../images/ceramicas-mora-home-productos-01.jpg);
}

.zoom-photo, .zoom-img, .hidden-caption {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.zoom-photo, .zoom-img {
    display:block;
}

.hidden-caption, .zoom-img {
    -ms-transition:all .5s ease;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    transition:all .5s ease;
}

.zoom-photo {
    overflow:hidden;
}

.zoom-photo:hover .zoom-img {
    top:-10%;
    left:-10%;
    width:120%;
    height:120%;
}

.hidden-caption.flex {
    color:white;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:black;
    background:rgba(0,0,0,.5);
    opacity:0;
}

.hidden-caption strong {
    display:block;
    font:20px RobotoCondensedBold, arial, sans-serif;
    text-transform:uppercase;
}

.hidden-caption i {
    font: 15px Georgia-italic, arial, sans-serif;
}

.zoom-photo:hover .hidden-caption {
    opacity:1;
}

.button-section {
    padding:30px 0;
    text-align:center;
}

.banner3 {
    min-height:580px;
    padding:8% 0;
    background-image:url(../images/ceramicas-mora-home-contacto-01.jpg);
}

footer {
    color:white;
}

.footer-bottom {
    background-color:#1d1d1d;
    border-bottom:20px solid #141414;
    padding: 4% 0;
}

.socnets {
    margin-top:30px;
}

.socnets a {
    display:inline-block;
    margin-right:20px;
}

footer p {
    margin-bottom:15px;
}

/* -------------------------------------------------------- INNER PAGES ----------------------------------------------------*/

.breadcrumb, ul.pagination {
    padding:0;
}

.breadcrumb li, .pagination li {
    display:inline-block;
    margin-right:10px;
}

.breadcrumb {
    margin-bottom:30px;
}

.pagination .active a {

}

.content-text {
    text-align:justify;
    font-size:16px;
    line-height:1.8;
}

.content-text h1, .content-text h2, .content-text h3, .content-text h4, .content-text strong, .content-text b {
    font-family:RobotoCondensedBold, arial,sans-serif;
    color: #34383a;
}

.content-text h1, .content-text h2, .content-text h3, .content-text h4 {
    margin-bottom:15px;
}

.content-text h1, .content-text h2 {
    font-size:24px;
}

.content-text h3 {
    font-size:22px;
}

.content-text h4 {
    font-size:20px;
}

.content-text a, .breadcrumb a, .pagination a {
    text-decoration:underline;
}

.content-text a:hover, .breadcrumb a:hover, .pagination a:hover {
    text-decoration:none;
}

.content-text ol {
    list-style:decimal;
}

.content-text ul {
    list-style:disc;
}


/* ----------------------------------------------- FORMS ---------------------------------------------------*/

input[type="text"], input[type="email"], textarea {
    padding:5px 10px;
    border:1px solid #ccc;
}

input[type="text"], input[type="email"] {
    height:40px;
}

label {
    display:block;
    font-size:inherit;
    margin-bottom:5px;
}

.form-group {
    margin-top:15px;
}

.req {
    display:none;
}

.popup-form h3 {
    font:22px RobotoCondensedBold, arial,sans-serif;
    color:#401073;
}

.popup-form .button {
    float:right;
}

/* ------------------------------------------ POPUP BLOCKS -------------------------------------------------*/

.popup-block {
    position:relative;
    max-width:500px;
    margin:0 auto;
}

.popup-form {
    padding:30px;
    background:white;
    overflow:hidden;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}

#mobileMenu ul {
    padding:40px 10px 0;
    text-align:center;
    line-height:2;
    font-size:20px;
}

#mobileMenu ul, #mobileMenu .mfp-close {
    color:white;
}


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

@media screen and (max-width:1199px) {
    header {font-size:12px;}
}

@media screen and (max-width:991px) {
    .showMenu {display:block;}
    .text-right {text-align:inherit;}
    .content-text {text-align:left;margin-bottom:20px;}
    .zoom-photo:hover .hidden-caption {opacity:0;}
}

@media screen and (max-width:767px) {
    .headerSlide h2 {font-size:40px;}
    .headerSlide h3 {font-size:20px;}
    .headerSlide p {font-size:16px;}
    .caption {font-size:35px;}
}

@media screen and (max-width:599px) {
    .showMenu {display:none;}
    .caption {font-size:30px;}
}